How to integrate Power BI charts in the Canvas app
Power BI is a visualization software available under the umbrella of Power Platform. It accepts data from a wide variety of data sources and the created chart can be integrated with Canvas Apps. “Power BI Tile” is a control available in charts option in the top ribbon bar.
We assume that the user already knows Power BI terminologies and already created a chart, this example shows how to integrate Power BI in the Canvas app, how to create a report and the basic terminologies is explained in this post.
Add the Power BI connector from the data section.
Workspace is a container in which all the charts will be created and charts should be pinned to a dashboard as a tile.
Add the Power BI tile, Select the workspace it will display the list of dashboards inside the workspace and based on the selected dashboard, tiles will be displayed.
Once the tile is selected a URL will be generated, we have to pass query string parameters to load charts dynamically. A generated tile URL will look like the below one.
Generated URL:
//Generated URL
https://app.powerbi.com/embed?dashboardId=a7xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxa69&tileId=91xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx373&config=eyxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxfQ%3d%3d
//URL Split up
https://app.powerbi.com/embed?dashboardId=dashboardID&tileId=tileID&config=configStringWith Query String:
//Filtered query
"https://app.powerbi.com/embed?dashboardId=a7xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxa69&tileId=91xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx73&config=eyxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxfQ%3d%3d&filter=TableName%2FColumnName%20eq%20%27"& DynamicValue & "%27"
//URL Split up
https://app.powerbi.com/embed?dashboardId=dashboardID&tileId=tileID&config=configString&filter=Store/Territory eq 'NC'As you see in the above example, in URL split up the filter query is clearly shown and while passing into the URL it should be encoded.
?filter=Store(Table Name)/Territory(Column Name) eq (operator) ‘NC’ (filter value)
“AllowNewAPI” should be set to true then only the above filter condition will work.
Now comes the important part, Refreshing the chart to bring the latest data based on the query. The chart may be on the home page as a dashboard or based on the selected record the chart should be refreshed as the expected outcome.
There are two types of data load mode in the chart:
- Import – It loads all the data to Power BI and then performs the query
- Direct Query – It loads the data based on the query
Why all of a sudden the query mode is important? Because there are limitations in the import mode.
Pro-user – 8 refreshes a day; Premium user – 48 refreshes a day. If it exceeds the limit error will be thrown.
Import Query – On the refresh button click the following code will be added.
//GroupID,DatasetID
PowerBI.RefreshDataset("232e2b6d-2e0a-4fd4-8ee9-71f52be1b2d1","fb80d079-a509-42ec-85ba-feee22408842");
Direct Query – no need to call the refresh dataset, just need to update the variable and that variable should be passed to the “Reset” property.
//Here the variable is set to true and then it set to false
UpdateContext({restVar:true});
UpdateContext({restVar:false});
Here are some reference links Filter query, Refresh limits.
Please post your queries in the comment section. Happy Building š
