Display Temperature Data with Power BI Embedded


In this task, we'll walk through publishing a pre-created Power BI report into a Power BI collection and Workspace in your Microsoft Azure* Subscription. You can learn more about Power BI Embedded here: azure.microsoft.com/en-us/services/power-bi-embedded/

1. You DO NOT NEED to edit the report provided, however, if you would like to see how it was authored, and your are on a Windows* system, you can download Power BI Desktop from powerbi.microsoft.com/en-us/desktop/. Once you have downloaded it, you can open the HOLs\PowerBI\TemperatureChart.pbix file to view how it was designed. REGARDLESS, DO NOT MAKE CHANGES TO THE REPORT AT THIS TIME!

2. To publish the report to Power BI Embedded, we need to first create a Power BI Embedded Workspace Collection. Open the Azure Portal (https://portal.azure.com) and close any blades left open from previous steps. Then click + New > Intelligence + analytics > Power BI Embedded.

3. Complete the properties for the new collection as follows, then click Create to create it:

  • Workspace Collection Name - <name>collection
  • Subscription - Chose the same subscription used for the previous resources
  • Resource group - Choose Use existing and select the <name>group resource group created previously
  • Location - Use the same location as the previous resources
  • Pricing - Leave as Standard
  • Pin to dashboard - Checked

4. Once the new Power BI Embedded Workspace Collection is created, click the Access keys button along the right of its blade:

5. Then click the icon to the right of the KEY 1 value to copy it to the clipboard:

6. And document your collection name and key in the myresources.txt file.

7. A Workspace Collection is just what it sounds like, it is a collection of one or more Workspace instances. To upload a report, it must go into a Workspace, but at the time of this writing you can't create new Workspaces in the Azure portal. The rest of our interaction with the Power BI Embedded service will be via the powerbi-cli npm package (link). Open a command prompt or terminal window and issue the following npm command to install the powerbi-cli package globally:

Note: Some users on non-Windows OSs are having issues with the powerbi-cli at least as recently as v1.0.6. If you are having issues using the powerbi-cli commands you may want to try it from a Windows machine if you have access to one. If you are at an event, find a fellow participant with Windows that will let you run the powerbi-cli commands from their computer. You can create your own folder on their machine store store the powerbi config created for your collection, and they can easily delete that folder when you are done.

npm install -g powerbi-cli

8. Make sure the powerbi-cli version is at LEAST v1.0.8 or later. If you installed the powerbi-cli previously, the version might be lower. Go ahead and run the npm install -g powerbi-cli command from above to ensure you are running the latest version:

powerbi --version

Example output:


9. Once it is installed, in the command prompt or terminal window, change into the HOLs\PowerBI folder, and run the following command and use the collection name and key you just pasted into the myresources.txt file to tell the powerbi how to connect to our workspace collection:

Note: The powerbi config command creates a .powerbirc file in the directory where the command was executed. It contains sensitive connection information about how to connect to to your Power BI Embedded Workspace Collection so be careful who you expose that file to.

Note: If you receive an error similar to powerbi-config(1) does not exist, try --help you may want to refer to Microsoft/PowerBI-Cli#5 (comment) for a possible workaround. Or, as an alternative you can simply supply the key, collection name, and workspace id for each powerbi command you execute. You do not NEED to do the powerbi config commands, it just helps make future statements easier.

powerbi config -c <collectioName> -k "<accessKey>"

For example:

powerbi config -c mic16collection -k "BoeKHkxkB/JuHsXTRsgUSegrvNnMC97YgycKJYXKDY7q9v5nbSxpoJkfvMmvMr68CrAi1iQVv0KgCpjlVtLIxw=="

Which returns this output as shown below. The values shown here are stored in the .powerbirc file in the current directory:

[ powerbi ] collection: mic16collection
[ powerbi ] accessKey: BoeKHkxkB/JuHsXTRsgUSegrvNnMC97YgycKJYXKDY7q9v5nbSxpoJkfvMmvMr68CrAi1iQVv0KgCpjlVtLIxw==
10. Now, we can create a new Workspace. Workspaces are the containers that we upload reports into. Use the following command:
powerbi create-workspace
Which returns output similar to the following, showing the Id of the workspace that was created:
Note: When a PowerBI Embedded Collection has just been created, you may get intermittent errors when attempting to connect to it. If you get an error, first verify that you are using the proper values as arguments, and then continue to repeat the statement until it succeeds.
[ powerbi ] Workspace created: 9c3b7e34-4a86-4c9b-9534-f9f3953e7f92
Then save the new Workspace Id to the config so you don't have to enter it each time:
powerbi config -w <workspaceId>
For example:
powerbi config -w 9c3b7e34-4a86-4c9b-9534-f9f3953e7f92
Which returns:
[ powerbi ] collection: mic16collection
[ powerbi ] accessKey: BoeKHkxkB/JuHsXTRsgUSegrvNnMC97YgycKJYXKDY7q9v5nbSxpoJkfvMmvMr68CrAi1iQVv0KgCpjlVtLIxw==
[ powerbi ] workspace: 9c3b7e34-4a86-4c9b-9534-f9f3953e7f92

Finally, copy the new Workspace ID returned from the statement above and past it into the myresources.txt file.

11. Now we can upload our report (the TemperatureChart.pbix file) into our new workspace:
Note: These commands assume you are in the HOLs\PowerBI folder.
powerbi import -n <what>  -f <local>
For example:
powerbi import -n "TemperatureChart" -f "TemperatureChart.pbix"
Which returns something like:
[ powerbi ] Importing TemperatureChart.pbix to workspace: 9c3b7e34-4a86-4c9b-9534-f9f3953e7f92
[ powerbi ] File uploaded successfully
[ powerbi ] Import ID: b3cd9de9-11e5-473c-9b55-0e569c89a756
[ powerbi ] Checking import state: Publishing
[ powerbi ] Checking import state: Succeeded
[ powerbi ] Import succeeded
12. Next, we'll retrieve the unique IDs for the report, and the dataset in it:
powerbi get-reports
[ powerbi ] =========================================
[ powerbi ] Gettings reports for Collection: 9c3b7e34-4a86-4c9b-9534-f9f3953e7f92
[ powerbi ] =========================================
[ powerbi ] ID: 9cc7d690-2d22-4d8c-be13-66b8d9349167 | Name: TemperatureChart
powerbi get-datasets
Gettings datasets for Collection: 9c3b7e34-4a86-4c9b-9534-f9f3953e7f92
ID: ed212c12-0335-414d-b0f1-d4e1be1268da | Name: TemperatureChart
Copy the report and Data set IDs returned from the last two statements and past them into the myresources.txt file.
14. The last step on the report side is to update the connection information for the Dataset in the report to point to our Azure SQL Database, on our Azure SQL Server with our login credentials. We need to create a connection string in the right format. Here is the template for the connection string:
"data source=<name>sql.database.windows.net;initial catalog=<name>db;persist security
Replace the <name>sql and <name>db values above with your own. For example:
"data source=mic16sql.database.windows.net;initial catalog=mic16db;persist security info=True;encrypt=True;trustservercertificate=False"
Copy the connection string and paste it into the myresources.txt file:
16. Next, use the values for our Dataset ID, SQL Login Name and Password, and the Connection String from above to complete the following statement:
powerbi update-connection --dataset "<Dataset ID>" --username <your sql login> --password
"<your sql password>" --connectionString "<your connection string>"
For example:
powerbi update-connection --dataset "ed212c12-0335-414d-b0f1-d4e1be1268da" --username sqladmin --password "P@ssw0rd" --connectionString "data source=mic16sql.database.windows.net;initial catalog=mic16db;persist security info=True;encrypt=True;trustservercertificate=False"
Which returns something similar to:
Note: Sometimes this fails. If you get an error, double check your parameters, but even if they are correct, simply running the command a second or third time may work.
[ powerbi ] Found dataset!
[ powerbi ] Id: ed212c12-0335-414d-b0f1-d4e1be1268da
[ powerbi ] Name: TemperatureChart
[ powerbi ] Updating connection string...
[ powerbi ] Getting gateway datasources...
[ powerbi ] Connection string successfully updated
[ powerbi ] Dataset:  ed212c12-0335-414d-b0f1-d4e1be1268da
[ powerbi ] ConnectionString:  data source=mic16sql.database.windows.net;initial catalog=mic16db;persist security info=T
[ powerbi ] Found 1 Datasources for Dataset ed212c12-0335-414d-b0f1-d4e1be1268da
[ powerbi ] --------------------------------------------------------------------
[ powerbi ] Datesource ID:  dbb612f8-06c8-481c-984d-3b3e28391cf3
[ powerbi ] Gateway ID:  8b37fcc6-be5a-47e3-a48d-9d9390b29338
[ powerbi ] Credential Type:  undefined
[ powerbi ] Datasource Type:  Sql
[ powerbi ] Updating datasource credentials...
[ powerbi ] Successfully updated datasource credentials!
[ powerbi ] Datasource ID:  dbb612f8-06c8-481c-984d-3b3e28391cf3
[ powerbi ] Gateway ID:  8b37fcc6-be5a-47e3-a48d-9d9390b29338
17. Ok, the last step is to actually embed the report into our web app. Most of the code has already been written for us, we just need to make a few quick changes. To get started, open the HOLs\WebApp folder directly in A SEPARATE INSTANCE of Visual Studio Code just as you did when you were working with the web app previously. Use the values you've saved in the myresources.txt file to complete the "powerbi*" config settings in the config.json file, and Save your changes:

For Example:

For Example:

Next, open the public/index.html file and locate the code as shown below. The div that will contain our embedded report has been commented out, and a placeholder <img/> is being displayed instead. We need to switch that around so the <img/> is commented out, and the <div..></div> is available.
<img src="images/chartplaceholder.png" alt="" style="border: none;" width="455" height="380" border="0" />
<div id="powerbiReport" powerbi-type="report" style="height:380px;"></div>
and switch them around so the <img.../> tag is commented out, and the <div...></div> tag isn't
<img src="images/chartplaceholder.png" style="width:455px;height:380px;border:none;"
<div id="powerbiReport" powerbi-type="report" style="height:380px;"></div>


19. Next, near the bottom of the public\index.html file locate the following code:

//Uncomment the following line of code to embed the Power BI report.

And uncomment the $scope.embedReport(); statement:

//Uncomment the following line of code to embed the Power BI report.


This will cause some code to run when the page is loaded to embed the report into the <div /> container we uncommented above. Save your changes.

20. The following information is just FYI, you don't need to do anything with this code:

The embedReport() function we are calling above calls into the backend node.js application hosted in server.js to retrieve a valid embed token for the report.

$scope.embedReport = function () {
    //Get just the very latest measurements from the node.js server back end
    $http.get('/api/powerbiembedconfig').success(function(config) {
        if(config) {
            var powerbiReport = angular.element( document.querySelector( '#powerbiReport' ) )[0];

The /api/powerbiembedconfig route on the backend server in server.js uses the powerbi-api node.js library to create a JSON Web Token or JWT token that the embedded request uses to authenticate with the Power BI Embedded service. The JWT token is signed by your Workspace Collection's Access Key which is known by the backend server, but not the front end web application:

        //FYI, http://calebb.net and http://jwt.io have token decoders you can use to inspect the generated token.
        // Set the expiration to 24 hours from now:
        var username = null;  //Not creating a user specific token
        var roles = null;     //Not creating a role specific token
        var expiration =  new Date();
        expiration.setHours(expiration.getHours() + 24);
        // Get the other parameters from the variables we initialized
        // previously with values from the config.json file.
        // Then generate a valid Power BI Report Embed token with the values.
        var token = powerbi.PowerBIToken.createReportEmbedToken(
        // And sign it with the provided Power Bi Access key
        // Again, this value comes from the config.json file
        var jwt = token.generate(powerbiAccessKey);
        // Create the required embed configuration for the
        // web client front end to use
        var embedConfig = {
            type: 'report',
            accessToken: jwt,
            id: powerbiReportId,
            embedUrl: 'https://embedded.powerbi.com/appTokenReportEmbed'
        // And pass that config back to the user as the response.

21. Regardless, we should be done. Let's commit our changes into the git repo, and sync with the Azure Web App repo in Azure..

In Visual Studio Code, click the git icon on the left, add a comment to the commit message box at the top, and click the checkmark icon to commit your changes:

22. Then still on the git panel, click the ... ellipsis button at the top, and select Sync to push our changes up to the Azure Web Apps.

23. Then, in the Azure Portal (https://portal.azure.com), on the Deployment options for your <name>web Web App, verify that the deployment succeeds:

24. Then in your browser open the web site in Azure (***http://<name>web.azurewebsites.net***) and check out the new report!

25. The page is set to refresh automatically every 30 seconds. You should see that the report updates the data it displays as well!

IDE or Development Framework: 
For more complete information about compiler optimizations, see our Optimization Notice.