Part 1: 如何把Power BI 嵌入到sharepoint 网站

Part 1: 如何把Power BI 嵌入到sharepoint 网站

本文是转载，转自：http://rolandoldengarm.com/index.php/2016/04/27/part-1-how-to-embed-powerbi-in-a-sharepoint-site/

One of the most requested features for PowerBI was to be able to embed it in any web application. This has now been implemented with Power BI Embedded. An excellent demo created by Microsoft can be found here. While this is a very cool feature,it is aiming at developers. Another feature request that many of our customers have is to embed reports in a SharePoint site,e.g. to display it on an intranet.

Currently there is no out-of-the-box web part to display a PowerBI report in a SharePoint site. What I am going to show you,is how to do this with a provider hosted add-in!

Update September 2016: Part 3 is available.

While below instructions are working on my environments,some people have found some issues with this approach. In Part 3 I am using the Power BI Embedded service in the SharePoint Framework which solves those issues.

?

Essentially the app will work as follows:

1. The App allows the user to sign in.
2. After signing in,a list of Dashboards is shown.
3. After selecting a Dashboard,a list of Tiles on that dashboard is shown.
4. When selecting a Tile an pressing confirm,that particular tile will be displayed on the SharePoint site.

As a lot of steps are involved,I will focus on steps 1 – 3 in this part of the blog post series,and in part 2 I will show how to embed it into a SharePoint site. The source code can be found on GitHub

Register a Power BI App

The first step is to register a Power BI App. This works similar to registering an app for Azure AD. Under water it is the same,when you create a Power BI App,an Azure AD App is created for you.

Go to?https://dev.powerbi.com/apps and fill out the form. I have done it as follows:

Regarding permissions,I’ve chosen to enable all permissions,just as I don’t want to waste time on 401 errors. In a production scenario,you should only pick what you need.

The last step is click Register App. Please keep in mind there is no Edit function. Every time you click Register App,a new app is created in Azure.

Create a Provider Hosted Add-in

Open Visual Studio (preferably 2015),and click File > New Project. ?Select Office/SharePoint > App for SharePoint

Click OK and specify the following settings:

The URL must be a developer site on Office 365. ?Click Next and log in.?In the next screen,select “SharePoint Online”. In the final screen I’ve selected Web Forms. For Production purposes I would recommend to use MVC,but with Web Forms it is quicker to develop a basic app.

I prefer to use IIS (instead of IIS Express). Go to the project settings of the Web Project,go to Web,and change IIS Express to Local IIS. Also change Project URL to https instead of http. Finally,click on Create Virtual Directory.

Please note that this requires Visual Studio to be run as Administrator,and that IIS is configured on your machine.

The?application

Please have a look at the source code on GitHub. It will take forever to explain every line of source code,so I will take you through the important bits:

• NuGet Packages: Add the following NuGet Packages:
  • Newtonsoft.JSON
  • Microsoft.IdentityModel.Clients.ActiveDirectory
• Settings:?Double click Properties,go to Settings and create a default settings file. Add two settings: ClientId and ClientSecret,and copy the values from the PowerBI App.
• Redirect.aspx:?When the OAuth flow complete,
• Default.aspx:?This page is the main entry point of the application. It contains a Login button,which handles the authentication flow with Azure AD. After logging in,it will display the Dashboards in a drop down. When selecting an item,it will display all Tiles in that dashboard in another drop down. And finally,when a tile is selected,this report will be displayed.
  Some client-side JavaScript is required to handle the authentication for the iframe. All other authentication happens server-side.
  In Part 2 of this blog post series I will show how to inject scripts into the host web,to show the report in the SharePoint site.

The result!

?I have added the sample “Sales and Marketing” dashboard to my PowerBI instance:

Then,after

• I deploy the app from Visual Studio via F5.
• Trust the App
• Click “Sign In”
• Log into Power BI
• Accept the permissions requested:

  

… the sign in button disappears and I see the dashboards. I select the only dashboard in my account:

… and the first Tile in the Dashboard:

After waiting a bit,the dashboard should show up like this:

We have embedded PowerBI in a SharePoint Add-in

Goal 1 is achieved: Embed a PowerBI report in a SharePoint Provider Hosted Add-In. The next step is to inject this into the host SharePoint web. I will follow the approach the PnP team is using in their AppScriptPart sample. I will show this in Part 2 of this series! Follow me on Twitter to be the first to know.