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:

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:

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:

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:

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:

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

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

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:

      

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

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:

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

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

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:

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

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

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

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:

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

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:

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:

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:

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

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.