Extending #ProjectfortheWeb Part 10 #PPM #CDS #MSDyn365 #PowerPlatform #MSProject #PowerBI #PowerApps #PowerAddict #LessCodeMorePower #WorkManagement

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:

Power BI Emdedded 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:

New 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:

Select Power BI Dashboard

The Power BI dashboard can be accessed from the dashboard selector menu:

Access dashboard - view menu

Which loads the dashboard in the model-driven app as seen below:

Dasboard

Clicking a dashboard tile launches the report in a modal window as seen below:

Power BI view

You can also add Power BI tiles directly to a Dynamics 365 personal dashboard. From the PPM Dashboard click New > Dynamics 365 Dashboard:

image

Select the required layout and click create to launch the dashboard editor:

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:

Power BI zone

Select the workspace, the Power BI Dashboard then select the correct Power BI tile and also enable for the unified client:

Select Power BI Tiles

Add all the tiles to the Dynamics 365 dashboard as required:

Updated dashboard

Click Save when completed then Close and the dashboard will load:

Dashboard

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:

Embed

In the modal that launches – copy the second string as seen below as this contains the HTML iframe code:

HTML embed code

Edit the html code to add in the html tags and change the width and height to both be 100%:

Updated HTML

Now in Power Apps access the solution that contains the components for your extended app and click New > Other > Web resource:

New 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:

text editor

In the modal that pops up click Source and paste in the updated HTML code:

code added

Confirm the HTML is correct by viewing the Power BI report in the Rich Text tab:

preview

Click OK then click Save then click Publish.

Publish

Now we need to edit the app – access Apps, select the app then click Edit:

Edit app

In the App Designer click the pencil edit icon next to Site Map to launch the Sitemap Designer:

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:

Sitemap Update

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:

New sub area

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/

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: