It’s been a while since I did the last post in this blog series, in part 9 we looked at adding some charts and dashboards into the extended Project for the web model-driven Power App. For those that missed part 9 it can be found here: https://pwmather.wordpress.com/2020/04/10/extending-projectfortheweb-part9-ppm-cds-msdyn365-powerplatform-msproject-powerapps-poweraddict-lesscodemorepower-workmanagement/
In part 10 we will continue to look at charts and dashboards for this extended app example but this time using Power BI. We wont cover building the Power BI report as there are many examples out there with templates from both Microsoft and also I’ve released one previously for the default entities used by Project: https://pwmather.wordpress.com/2019/10/30/welcome-to-the-new-project-getting-started-part-2-msproject-ppm-office365-powerplatform-projectmangement-modernworkmanagement-cds-pmot-pmo/ – this can easily be extended to bring in data from other CDS entities. This post assumes you have the Power BI Report dashboard created that you want to embed. There are several options for adding Power BI reports into model-driven apps. From adding personal Power BI Dashboards to integrating context filtered Power BI reports into the forms added into your app.
Firstly we will look at adding a personal Power BI Dashboard. Ensure that your Power Apps environment has Power BI Power BI visualization embedding enabled:
This is documented here if needed: https://docs.microsoft.com/en-gb/power-platform/admin/use-power-bi#enable-power-bi-visualizations-in-an-environment
Then access your app in Power Apps and access the sub area where you want to add the Power BI dashboard, in this example I’m adding this personal Power BI dashboard to the PPM Dashboard sub area in my app. Click New > Power BI Dashboard:
Select the workspace that contains the Power BI dashboard then select the correct dashboard, also check the check box to enable the unified client then click Save:
The Power BI dashboard can be accessed from the dashboard selector menu:
Which loads the dashboard in the model-driven app as seen below:
Clicking a dashboard tile launches the report in a modal window as seen below:
You can also add Power BI tiles directly to a Dynamics 365 personal dashboard. From the PPM Dashboard click New > Dynamics 365 Dashboard:
Select the required layout and click create to launch the dashboard editor:
Enter a Name for the dashboard and add the Power BI Tiles to the dashboard zones. To add a Power BI Tile, click the Power BI icon in the zone:
Select the workspace, the Power BI Dashboard then select the correct Power BI tile and also enable for the unified client:
Add all the tiles to the Dynamics 365 dashboard as required:
Click Save when completed then Close and the dashboard will load:
Clicking the Power BI tile loads the Power BI report in a modal just like when adding the full Power BI dashboard. Two simple ways to embed personal Power BI dashboards into your app.
The 3rd option is via a web resource where the Power BI report is embedded via an html iframe – credit to my fellow Project MVP Peter Kestenholz who blogged about this a while back: https://ppmblog.org/2019/12/30/guide-embedding-power-bi-in-model-driven-apps/, the process is also detailed below. Firstly navigate to the Power BI report that you want to embed and click the ellipsis on the top menu then Embed > Website or portal:
In the modal that launches – copy the second string as seen below as this contains the HTML iframe code:
Edit the html code to add in the html tags and change the width and height to both be 100%:
Now in Power Apps access the solution that contains the components for your extended app and click New > Other > Web resource:
Complete the new web resource form providing a name, display name and set the type to Webpage then click the Text Editor button:
In the modal that pops up click Source and paste in the updated HTML code:
Confirm the HTML is correct by viewing the Power BI report in the Rich Text tab:
Click OK then click Save then click Publish.
Now we need to edit the app – access Apps, select the app then click Edit:
In the App Designer click the pencil edit icon next to Site Map to launch the Sitemap Designer:
Add a new sub area to the site map – in this example a new sub area was added below the Reports group. Set the Type to Web Resource, in the URL option select the web resource created earlier (it will be the display name you set) and provide a Title:
Click Save then once completed click Publish then close the Sitemap Designer then close the App Designer. Now launch the app to view the new sub area added that displays the Power BI report:
Another nice simple way to add in the Power BI report to model-driven Power Apps for all users this time rather than a personal view.
You can also take this further by embedding Power BI reports are that filtered based on the current record with contextual filtering, we will take a look at this in another blog post but for now here are some links to help get you started on that if you wanted to: https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/embed-powerbi-report-in-system-form & https://crmchartguy.com/2019/03/24/embed-filtered-power-bi-reports-on-dynamics-365-forms-again-the-official-way/