Integrate Power BI into Your Application: Part 3 – Embed Content

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmailFacebooktwittergoogle_plusredditpinterestlinkedintumblrmail

2017-06-25_12h06_03

In the part 1, you learned how to register an application to be able to interact with Power BI service and Azure environment. In the part 2, you learned how the authentication process works and how you can get the access token. In this part, I’m going to explain what is the process of embedding content (Dashboard, Report, and Tile) into a web page. you will learn about JavaScript part of it, and also the REST API section of it. if you like to learn more about Power BI; read Power BI book; from Rookie to Rock Star.

Step 1: Register your Application

Step 2: Authenticate

Step 3: Embed Content

in this step you will learn about codes and the method to embed the content into your application after registration and authentication of the application.

Sample Code

The sample code for this example can be downloaded from here.

Power BI Client Object

Power BI Client object is the main object needs to be created in order to interact with Power BI Service. As you’ve learned above, you need to have the access token for this step. You just need to parameters to create a Power BI Client object; ApiURL (which is static), and token (which is gained through authentication process mentioned in previous post).

After creating this object, you have access to massive amount of information from Power BI Service, and you can implement many actions through it (Which I explain many of these actions in other posts).

Get List of Reports

For this example; I’m going to Embed a report into web page, so I will get list of reports first (you can even directly mention the report Id).

As you can see the function used is GetReportsInGroupAsync. This function simply returns all reports under a group. Group Id is specified in web.config file. Notice that Id is not name of the group. the name that you see for group, dashboard, report, and data set, are just display labels. Each object in Power BI has an ID which is a unique identifier (GUID). you can easily find it when you browse the group in Power BI Service through URL;

2017-06-25_11h39_59

These Ids can then be used for Power BI REST API functions.

Function above will return first report on that list, because I’ve used FirstOrDefault() function. You can easily mention any other reports if you want to.

Creating Embed Content

In the MVC application the next step is to create the embed content and push it to the view. lines below generating the embed content;

JAVA Script in the Web page

In the EmbedReport.Chtml page which is view web page, you need a JavaScript section to embed the content into the page. here is the JavaScript code;

As you can see in the above section; Embed Token is required for embedding part again, plus embed content coming from the controller.

Testing Application

If you run the sample application, you can check and see how embedding Report in application works perfectly;

2017-06-25_12h06_03

As you can see, the report is integrated into my application which is running on my localhost. This method of embedding works with any type of report, sourced from any data source with any connection type.

Getting List of Dashboards

There is a function that returns list of dashboards for you, and you can easily select dashboards  you want.

GetDashboardsInGroupAsync, or GetDashboardAsync and many methods as listed below can give you information about dashboards;

2017-06-26_20h45_16

After fetching list of dashboards it can then be passed to view with script below;

Embed Dashboard

Finally embedding dashboard is similar to embedding report, with slight difference;

so as a result this is the embedded dashboard;

2017-06-26_20h52_57

Getting Tiles

You first need to have the dashboard object in order to get tiles under it.

2017-06-26_20h54_36

As you can see above there are some functions that fetch Tiles from Dashboard and group. Code below will fetch first tile in a dashboard and pass it to the view page.

Embedding Content Limitless

Very important consideration of the new REST API way of integrating Power BI content is that, now you can embed any type of content: Dashboard, Report, and Tile. Your data set can be connected to any data set, online or on-premises, import data or DirectQuery. With this method of integration, you can integrate anything that you have in Power BI account easily into your application. I will explain another post later about FAQs of such integration plan. Stay tuned for next blog posts from this series.

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmailFacebooktwittergoogle_plusredditpinterestlinkedintumblrmail
rssyoutuberssyoutube
Reza Rad
Reza Rad is an Author, Trainer, Speaker and DW/BI Consultant. He has a BSc in Computer engineering; he has more than 15 years’ experience in databases, programming and development mostly on Microsoft technologies. He is a Microsoft MVP in Data Platform for seven continues years (from 2011 till now) for his dedication in Microsoft BI. He is author of some SQL Server and BI books, and also Power BI online book; from Rookie to Rock Star.

6 Comments

    • This should be a group not from Shared with me. the link you have here is from “Shared With Me” section. group basically is under Work Spaces. just click on the work space, and you will be able to see Group GUID in the url of that page.
      Cheers
      Reza

      • Hi Reza,
        Thanks for your reply. I am at the exact same page as per your screenshot. I am using my own account/works space. All the dashboard, reports and data sets are all mine as I am not a pro user,therefore nothing is shared with me. But yet i dont see the groupID

        Regards,
        Tim

        • Hi Tim.
          You need to have Pro user to be able to create work spaces. it should not be “My work space”. it should be a new created work space.
          Cheers
          Reza

  • I followed your instructions and everything seems to be displaying properly, however when I click on a tile in my dashboard to get to the report below it nothing happens.
    Clicking on a tile to a report seems to do nothing.

    Any suggesstions as to why that is?

    Thanks,

    • clicking on dashboard and navigating to report is a functionality of Power BI Service. When you embed that into your application, you won’t have such functionality. clicking on dashboard tiles in web app won’t navigate to reports. however you will have some “click” events which you can program on those to navigate to another page in your web app that brings the report.
      Cheers
      Reza

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">