Extending #ProjectfortheWeb Part9 #PPM #CDS #MSDyn365 #PowerPlatform #MSProject #PowerApps #PowerAddict #LessCodeMorePower #WorkManagement

In part 9 we will look at adding some charts and dashboards into the app to visualise the data in the entities in the extended Project app. In part 8 we completed the snapshot example, if you missed part 8 it can be found here: https://pwmather.wordpress.com/2020/03/23/extending-projectfortheweb-part8-ppm-cds-msdyn365-powerplatform-msproject-powerapps-powerautomate-poweraddicts/

Below is an example dashboard we will add to the app:

App

In Power Apps, navigate to the entity, in this example the Program entity is used. Click Charts > Add chart. This will launch the chart editor:

Chart1

Set the correct view to use, provide a name then select the correct fields for the series and category. Don’t forget to select the chart type too. Here is the first chart I created for the Program entity:

Chart2

Create other charts for the entity and other entities as required. We will see these examples in the app shortly. Before we do, lets create a dashboard. On the Program entity click Dashboards > Add dashboard and select the layout you need, this will launch the dashboard editor:

Chart3

I went for a 2 column layout. Provide a name, the correct filter and default filter time frame and the correct entity view to use:

Chart4

Now click the chart symbol in the visual filter zones to add a chart:

Chart5

Repeat for the remaining chart zones. Now click the icon in the streams zone to add a stream:

Chart6

Save and close the dashboard then repeat for the other entities as required.

Now run the app and view the charts and dashboards as seen below in the example Program entity, click Show Chart:

Chart7

      

This launches the chart panel, on the chart panel you can switch between charts for that entity:

Chart8

Clicking the data bars in the charts filters the data in the view. As we created a Dashboard for the Program entity we have the Open Dashboards button:

Chart9

This button launches the dashboard view, if multiple dashboards were created you can switch between dashboards for the entity here:

Chart10

Clicking the Show Visual Filter button shows the charts added to the dashboard:

Chart11

Here you can use the time frame filter on the top right to filter the data – this example uses the Estimated Program Cost field last updated on date as the filter:

Chart12

You can also click any of the data bars in the charts to filter the programs like below:

Chart13

Clicking the card below the charts on the dashboard takes you to the record, in this case the IT Change Program:

Record1

Switching to the Risks entity we can see one of the Risks charts created:

Chart14

That covers an intro to adding charts and dashboards at the entity level, now lets create a dashboard at the app level. Edit the app in the app designer and click Dashboards > Create New as seen below:

Dashboard1

Select the type of Dashboard you want, I went with Classic for this example, then select the layout you want:

Dashboard2

This launches a new window for you to build your dashboard – give it a name and then insert the components on the dashboard such as lists, charts, web resources, iframes or assistants by clicking the icon in the zones:

Dashboard3

Once created, save and close the dashboard. Now edit the Site Map and add the dashboard, I created a new group called Reports then added a new subarea into the Reports group. This new subarea was set to use the new PPM Dashboard:

Dashboard4

Save and publish site map, then back in the App Designer, select the Dashboard from the list of dashboards to include the PPM Dashboard in the app:

Dashboard5

Now save and publish the app. If we access the updated app we can see the new Reports group and the PPM Dashboard:

Dashboard6

Clicking a record on one of the lists added to the dashboard will open up that record, for example, from this sample dashboard I can access a program or a risk record.

That’s it for this post, a nice simple way to visualise the data directly in the model driven app. In part 10 we will look at adding Power BI reports into the app.

Comments are closed.

Blog at WordPress.com.

Up ↑

%d bloggers like this: