ReadyXRM

The other day I was reading the Microsoft Docs site when I came across an entry on embedding Canvas Power Apps. It is well known that you can embed Canvas Power Apps in Power BI Dashboards, Model-Driven App forms and Microsoft Teams.

The docs article also mentioned that you can embed Canvas-based Power Apps in websites.

Think about that for a minute. Imagine the power of bring a low-code platform to your public facing website!

Specifically for Power Apps Portals projects. There is a lot of functionality currently being built with Liquid and JavaScript. Not to mention companion apps that could easily be built with a low-code canvas Power App.

HOWEVER, at this time, canvas Power Apps still require a Power Apps Plan subscription and the user of the app will need to be at least a guest user in your Azure Active Directory.

See article here on providing guest access to canvas Power Apps.

That being said, there could definitely be use cases where embedding a canvas app on a Power Apps Portal would be useful. The process is actually very easy.

Note that canvas apps embedded on model-driven forms that are used as the basis of entity forms will not render on the portal. (The question has come up once or twice)

How to add a canvas Power App to a Power Apps Portal

I created a fairly simple canvas based Power App that will allow a user to create a class registration in CDS. There are one or two articles on the web to explain how to create canvas apps.

The next step would be to note the App ID for the Power App. You can locate this in the Power Apps maker portal by going into the settings of an app.

The Microsoft Docs site provides the embed code that you need to insert into the Portal. I have included the snippet here;

<iframe width="[W]" height="[H]" src="https://apps.powerapps.com/play/[AppID]?source=website&screenColor=rgba(165,34,55,1)" allow="geolocation; microphone; camera"/>

The next step is to edit or create a new web page in your Power Apps Portal. This can be done using the new Portal Studio from the Power Apps maker portal. If this is new, check out my post on getting started with Power Apps Portals.

With the body of the page selected, click on the Source Code Editor button </> on the bottom right corner. With the code screen visible, paste in the Canvas app embedded HTML code, and enter values for the width, height and the App Id of the canvas app.

The canvas app will appear on the page.

Clicking the browse button, the canvas app is fully functioning on the Power Apps Portal.

The canvas app can perform Create-Read-Update-Delete (CRUD) functionality on CDS data, without needing Entity Forms, Web Forms, or custom code.

Currently, in order to run a Power Apps Canvas App you need at least two things, an Active Directory User and a Power Apps per-app or per-user license.

Navigating to the same Portal without being logged in as an Active Directory user will display a sign in screen. There is currently no option for anonymous users to access the canvas app.

Asides from the licensing issues, a couple of other key points.

• Portal security items like web roles, entity permissions have no bearing on the data being displayed in the embedded canvas app.
• The canvas app cannot interact directly with data being displayed on the portal via entity lists, entity forms or Liquid.
• Being in an Iframe, the canvas app will not have the same responsive capabilities of the Power Apps Portal.

Summary

There definitely will be some scenarios where having the embedded canvas app makes sense and would fit within the parameters of licensing and user access. (External contractors needing to report time and billing)

Other scenarios (such as a shopping cart, product configuration, case management, etc) while technically possible, cannot be realistically implemented based on the current licensing restrictions and the fact a user will need to sign in.

Potentially Microsoft will look at these techniques as possibly a way to further extend the customization capabilities of the Power Apps Portal.

Console Photo by Patryk Grądys on Unsplash

Cover Photo by Zoltan Tasi on Unsplash

Nick Doelman is a Microsoft Business Applications MVP, a Microsoft Certified Trainer, and a D365UG All-Star. He is also Canadian, so fairly polite. Follow Nick on twitter at @readyxrm