Embed Canvas App on a Model Driven App Dashboard

In this post we will look at how we can add a canvas app to a system dashboard on a model driven app.

For the sake of simplicity I'm using a canvas app that calls a flow(could just use the CDS entity as well) to get some data and displays it on a table as shown below.

We will be using the URL of the canvas app to embed  an IFrame on our dashboard. To get the URL select File->Share, this would open a new page with the details of our app and has the URL.

Now let's add a new Dashboard from our solution which also contains the canvas app we are using.

I'm selecting a 2 column but you can choose the one that works best for you

Add the IFrame as shown below and save the dashboard

Since our canvas app uses powerapps.com domain and our model driven app runs on dynamics.com domain we need to uncheck the cross frame scripting restriction.

Make sure to publish your dashboard otherwise the model driven app might not sometimes show the dashboard

Now let's add our new dashboard to the model driven app. To do this we need to open our model driven app in the App Designer and include our dashboard in it.

Now refresh your model driven app and you should see your canvas app embedded.

Note: Since Personal dashboards don't allow adding an IFrame to a different domain, we cannot add our canvas app to a personal dashboard and have to use a system dashboard at this time.

Also, if you have issues with your canvas app rendering on the dashboard, there is a weird bug which can be fixed by opening the canvas app in a different tab in the same browser and press play. Refresh the dashboard and that should hopefully fix the issue.