Power BI Embedded: Step 3 - integrate your report using PHP and JavaScript

Using Power BI Embedded you can integrate your report in a website or web-application. To do so there are three parts you need to do:

  • Configure your Azure environment
  • Add a Power BI workspace to this environment and upload a report
  • Implement the code to generate a token and embed your report

In this last post we will zoom in on the third part. In the previous post we’ve created a workspace, uploaded our report and saved the ID’s of the workspace and the report. In this post we will use that information (in combination with the Access Key) too generate a token and embed the report.

Starting July '17 Power BI Embedded will be part of the new Power BI Premium service. The current setup explained in this post will be supported for a limited amount of time. If the way of working changes, this post will be updated.

To implement Power BI Embedded in your website or web application we are going to create three files:

  • token.php – here we will generate a token using the JWT class.
  • jwt_helper.php – containing the JWT class
  • index.php - containing in the code to embed the report using the token

Create the Token.php file
In token.php we use the Azure Access Key, the workspace collection and the workspace to generate a JWT token. The token we generate is valid for one hour and is only valid for reading the report:

<?php

$key = "YourAzureAccessKey"; // Fill in the Azure Power BI Workspace Collection Access Key

$payload = array(

"ver" => "0.2.0",

"type" => "embed",

"wcn" => "YourWorkspaceCollectionName", // Fill in the Azure Power BI Workspace  Collection Name

"wid" => "YourWorkspaceID", // Fill in the Workspace ID

"rid" => "YourReportID", // Fill in the Report ID

"iss" => "PowerBISDK",

"aud" => "https://analysis.windows.net/powerbi/api",

"scp" => "Report.Read",

"exp" => time()+60*60, // The expiration time of the token, in this case 1 hour

"nbf" => time()

);

$token = JWT::encode($payload,$key); // the actual token

?>

Combine all in the Index.php file
In the <head> element we need to include jQuery and PowerBI.Js:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>  <!-- JQuery is used to link to report to the div element-->

<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script> <!-- JavaScript library for embedding Power BI -->

We add a <div> element to the body element. The report will be embedded using an <iframe> inside this <div>.

<div id="reportContainer"></div>

Next we include the jwt_helper.php and token.php to enable access to the token.

<?php include("jwt_helper.php”); ?>

<?php include("token.php"); ?>

 

Last but not least, we configure the details of the report we want to embed in the <div> :

<script>

var setAccessToken = '<?php echo $token;?>';

var setEmbedUrl = "https://embedded.powerbi.com/appTokenReportEmbed?reportId=AddYourReportID";

var setEmbedReportId = "AddYourReportId";

var config= {

type: 'report',

accessToken: setAccessToken,

embedUrl: setEmbedUrl,

id: setEmbedReportId,

settings: {

filterPaneEnabled: false,

navContentPaneEnabled: false

}

};

var reportContainer = $('#reportContainer')[0];

var report = powerbi.embed(reportContainer, config);

</script>

 

Wrap up and view the result

We’ve configured our Azure Environment, added a workspace and uploaded a report using the command line interface. Using the ID’s of the workspace, the report and our Azure Acces Key we generated the token and created an index file to embed the report. The next step is uploading all the code to your webserver (or use your localhost) and view the final result.

Lars Bouwens is Business Intelligence consultant at Motion10 and likes to read and write about Power BI and Azure.

Leave a Reply

Next ArticleSetting up DWH Test Automation: Design & Arch