Embedding Canvas Apps within Model Driven Apps, Power Apps Portal, Power BI and Custom Websites

By | March 23, 2020

Canvas Apps is the new Citizen developer to quickly design pixel perfect mobile apps with very little to no pro-dev knowledge.

While Model Driven apps allow for drag and drop interface for form design, they still do have a strict layout and you cannot really place controls wherever you want. This is where Canvas Apps come in handy where you can go ahead and design canvas apps.

These canvas apps can then be embedded or referenced within the other Power Platform family of applications like the Model Driven Apps, Portals and even within Power BI Dashboards.

Note: Though the app can be embedded in a variety of applications, the logged-in user should have appropriate Power Apps License assigned to them for the canvas to appear for them.

If they are not already logged in with appropriate user account that has license assigned to them, they will see the Sign-in screen instead of the app.

Canvas Apps with Model Driven Apps

Canvas Apps can be embedded within Model Driven Apps as PCF controls.

To add a canvas app, the first step would be to place a text field on the form.

Canvas Apps

Next add a control to this field and choose Canvas app.

Canvas Apps

Make sure to set this as the control to be used in web, phone and tablet view.

Canvas Apps
In the properties click customize to auto-create a canvas app that has the reference of the record passed over for use within the app.

Canvas Apps

Using ModelDrivenFormIntegration we now have access and reference to the parent record within which the canvas app has been embedded.

Canvas Apps

The datasource is set to [@Accounts], I had embedded this within an account form and the source of all the controls on the form is tied to this as well.

Canvas Apps

Adding a gallery here to show contact images.

Canvas Apps

And now when you navigate to your record in model driven app, you can see it shows the related contact images.

Canvas Apps

Any changes you make to the data in the model driven form is auto reflected in the canvas. Change the city and it would show the updated value in the canvas.

You can also communicate with the model driven form. Read more here.

Canvas Apps within Power BI Report

Canvas Apps now show up as a component that can be directly added to a Power BI report. For this example, I created a canvas app of the My Open Opportunities View.

Using the My Open Opportunities View ensures that the security roles are honored and the logged in user only sees the opportunities that they have access to, without requiring any additional code.

Canvas Apps

Once saved, we could now embed this within Power BI Report. You now have PowerApps as a component that could be added directly.

Canvas Apps

After adding the component, you need to add the data fields that would be the source data for your canvas app

Canvas Apps

Once added, you could create a new Power App from here. Doing so will provide you with the PowerBI contextual information similar to the one we had in case of embedding it in Model driven apps.

Canvas Apps

Once done save and publish and when you move back to Power BI report, you have the app displayed in there.

Canvas Apps

Canvas Apps within Power Apps Portal

Any canvas app can be accessed through a public facing app url that can be found in the app details screen.

Right click on your canvas app in the app listing at https://make.powerapps.com and choose Details.

Canvas Apps

You can set the url of an IFRAME to the url provided in the Web Link to have the canvas app display there.

https://apps.powerapps.com/play/[AppID]?source=iframe

You can pass parameters within the url and this could be used with the app to provide contextual information.

https://apps.powerapps.com/play/[AppID]?source=iframe&id=10&city=redmond

The canvas app could read the parameter values and incorporate it in the logic to perhaps read related data.

Canvas Apps

And when invoking the app by passing a parameter of region=Mumbai, it results in:

Canvas Apps

This way you could build efficient Canvas Apps and just reuse them across various applications!

To share the app with your users on Microsoft Teams read the next part here.

 

Leave a Reply

Your email address will not be published. Required fields are marked *