Use a Power BI Tile in your web page

Use a Power BI Tile in your web page

EDIT 2016-07-12: Microsoft has changed their API and policies and functionality, so this artcile is obsolete now. I will shut down the sample site. For details, please see: https://powerbi.microsoft.com/en-us/blog/what-s-new-and-what-s-next-for-power-bi-embedded-july-2016/

 

Creating dashboards is more witchcraft than art and more art than science. Think about how many times you have banged your head to produce a useful chart according to the specs of your client. You have the numbers, you have the chart and everything in place but the customer keeps saying: “it’s just not the right shade of green…”

Many times we have to create custom web pages to accomplish what the BI solution can’t offer out of the box; and Power BI provides you just that, the ability to use a tile from a dashboard without forcing the customer to open the entire Power BI user interface. With this technique you can embed just a piece of a bigger BI report into an HTML page. It’s not very straightforward (at least for me it wasn’t), and I must say that the documentation often makes it worse (there’s an errata in the GET REST Uri of the Step 3 – Get user’s tile information).

So you want to embed a Power BI Tile into a web page: to quickly see how it works go to this example page. If you want more details, just read on.
I assume you already have a Power BI dashboard and you know how to get an access token. This is probably the most difficult part and I covered that in another article.

I am using cURL from a headless EC2 server just for sake of simplicity, you can do this with your favorite programming language.

First step is to get the ID of your dashboard:

[code]

curl -k -X GET "https://api.powerbi.com/beta/myorg/dashboards" -H "$AUTH_HEADER_LOCAL"

[/code]

where $AUTH_HEADER_LOCAL is the “Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiI……..” you created when asking for an access token.

The server will respond something like this:
recorte

From here you need to extract the id element which represents your dashboard.

Second step is to get the tile ID:

[code]

curl -k -X GET https://api.powerbi.com/beta/myorg/dashboards/${DASHBOARD_ID}/tiles -H "$AUTH_HEADER_LOCAL"

[/code]

where $AUTH_HEADER_LOCAL is the same as above and ${DASHBOARD_ID} is the value you got in step 1.

recorte
the answer will include an element named “embedUrl” which is the link to your tile.

Now that you have the embedUrl and the access token, you can build a simple HTML page:

  • Create an <iframe> element that will host your tile
  • Have your access token ready into a variable, I personally have it in an external .js file that I load as a <script> inside the page
  • Add a <script> element to activate the <iframe> with the access token and the dimensions of the tile

[code language=”javascript”]
<script type="text/javascript">
var width = 800;
var height = 600;
var embedTileUrl = "https://app.powerbi.com/embed?dashboardId=1d555f40-…..2618e&tileId=8cd8bc5….7624a";

window.onload = function () {
updateEmbedTile();
};

function updateEmbedTile() {
if ("" === embedTileUrl)
return;
iframe = document.getElementById(‘iFrameEmbedTile’);
iframe.src = embedTileUrl + "&width=" + width + "&height=" + height;
iframe.onload = postActionLoadTile;
}

function postActionLoadTile() {
if ("" === accessToken)
return;
var h = height;
var w = width;
var m = { action: "loadTile", accessToken: accessToken, height: h, width: w };
message = JSON.stringify(m);
iframe = document.getElementById(‘iFrameEmbedTile’);
iframe.contentWindow.postMessage(message, "*");
}

</script>
[/code]

Note that the access token will expire after 1 hour, so you need to have a way to refresh it on the server side.

Feel free to use http://powerbitile.azurewebsites.net/ as a reference.

  1. Reply

    I’ve been fighting with embedding a tile *FOREVER*. I can get your example to work easily but all my examples get stuck loading. It isn’t a token problem because I immediately get back an error when my token is bad or expired. Do you have any hints?

    Is there some thing I have to do with the tiles — like Publish them? (If so, I would have expected an error message rather than a hang)

    Does it only work for some of the visualizations?

    I’m using exactly your code except replacing the dashboardId, tileId and the token between running it with your variables and running it with mine. Yours work fine. Mine hang while loading. They also hang in the Microsoft example app at https://github.com/Microsoft/PowerBI-CSharp/issues/4

    I’m desperate for answers . . . . TIA

    • Reply

      Hi Mark, I don’t think it only works for some viz. The truth is that I found this API somewhat unreliable. At least the error codes are misleading. I know MSFT is contantly updating their strategy and the examples. I don’t remember really but I suppose I created the dashboard and tiles when I had the 30 days premium trial. Can that be the reason? I’m not so sure. Or maybe the permission you have set to the application in the Azure portal. For sure I experienced different results with differents accounts/tokens in Power BI. Let me know if you get it working, I believe this technology is still “young” and needs some more time to be considered for prime time (my very personal opinion).

    • Alexander
    • February 26, 2016
    Reply

    Hi Davide Great Post! but I have a question, you say that the script to get the access token you have it in external un.js. There is a possibility that you show the code of the script that gets the access token? It would be helpful thanks

    • Alexander
    • February 26, 2016
    Reply

    Hi Davide it is a really great post! but I have a question, you say that the script to get the access token you have it in external un.js. There is a possibility that you show the code of the script that gets the access token? It would be helpful thanks

  2. Pingback: Filter a power BI tile on your web page | Davide Moraschi

    • KG
    • January 21, 2016
    Reply

    Is the site http://powerbitile.azurewebsites.net/ still available? It gives me an error message.

    • Reply

      Yes, it is still available. What error exactly? Could it be due to some network timeout as it is hosted on a shared Azure website, try again.

  3. Pingback: Embed multiple Power BI tiles into your Web | Davide Moraschi – Business Intelligence Project Manager, Big Data Architect

Leave a Reply to Alexander Cancel reply

11 thoughts on “Use a Power BI Tile in your web page

  1. Hi Davide it is a really great post! but I have a question, you say that the script to get the access token you have it in external un.js. There is a possibility that you show the code of the script that gets the access token? It would be helpful thanks

  2. Hi Davide Great Post! but I have a question, you say that the script to get the access token you have it in external un.js. There is a possibility that you show the code of the script that gets the access token? It would be helpful thanks

  3. I’ve been fighting with embedding a tile *FOREVER*. I can get your example to work easily but all my examples get stuck loading. It isn’t a token problem because I immediately get back an error when my token is bad or expired. Do you have any hints?

    Is there some thing I have to do with the tiles — like Publish them? (If so, I would have expected an error message rather than a hang)

    Does it only work for some of the visualizations?

    I’m using exactly your code except replacing the dashboardId, tileId and the token between running it with your variables and running it with mine. Yours work fine. Mine hang while loading. They also hang in the Microsoft example app at https://github.com/Microsoft/PowerBI-CSharp/issues/4

    I’m desperate for answers . . . . TIA

    1. Hi Mark, I don’t think it only works for some viz. The truth is that I found this API somewhat unreliable. At least the error codes are misleading. I know MSFT is contantly updating their strategy and the examples. I don’t remember really but I suppose I created the dashboard and tiles when I had the 30 days premium trial. Can that be the reason? I’m not so sure. Or maybe the permission you have set to the application in the Azure portal. For sure I experienced different results with differents accounts/tokens in Power BI. Let me know if you get it working, I believe this technology is still “young” and needs some more time to be considered for prime time (my very personal opinion).

      1. Thank you *very* much for the response. I’ve actually discovered that it is viz-related with, apparently, newly-created tiles guaranteed not to work . . . .

        http://community.powerbi.com/t5/Developer/Some-embedded-tiles-doesn-t-load-others-load-fine/m-p/28072

        You’re absolutely correct about the technology still being “young” and needing some more time to be considered for prime time — unfortunately, I’m supposed to create a sample program for a hackathon . . . .

        You wouldn’t happen to have a dashboard that you would be willing to give a hackathon-demo account access to, would you?

Leave a Reply to Alexander Cancel reply