Integrate Canvas Apps into Power Apps Portals

In this blog, we are going to integrate Canvas App into the Power Apps portal. You can embed canvas apps using iframe into websites and other services like power BI and SharePoint. This blog will show you how to set parameters for embedding power apps into websites like a portal. We will then embed our Helpdesk app into the power apps portal. As we all know, Canvas power apps can be embedded into Model-driven apps, Power BI dashboards, and Microsoft Teams. Still, here I will show the power of bringing low-code platforms to your external users.  

I created a straightforward canvas app where users can log in as helpdesk users or administrators to create a ticket or assign a case. You can create your canvas app and embed it into the portal. 

The next step is to locate the Id of the canvas app. You can find your canvas app's Id by going to the power apps maker portal and then selecting your app. 

You can use Microsoft Docs' embedded code to embed an app into the power apps portal. Code image is given below. 

The next step is to create a new webpage in the power apps portal. You can add a new page from the power apps portal studio. You can provision a portal if you do not have it. To add a new page, go to the portal studio, click on a new page button, and select your interest template. 

Select the newly created page's body and then click on the Source Code Editor button available at the bottom right corner of the page. You will get a code editor screen to paste the code snippet given by Microsoft to embed a canvas app. You have to set the Id of the canvas app, width, and height in HTML code.  

Once the code is embedded, click the save button. Click on the Browse Website button on the top right side of the page to see the app functional. You can see the final look of our embedded app on the power app portal page. 

You will need an Azure active directory user and power apps user license to access this app. If you logged out and navigated to the same portal page without being logged in as an AD user, you will find a sign-in screen. Anonymous users cannot access this app.

The data displayed in the embedded app cannot be controlled with portal security items such as entity permission and web roles. The power apps portal data displayed via an entity form or entity list cannot directly interact with the embedded canvas app. Apart from this, the canvas app would not be as responsive as the portal itself because it is embedded within the iframe.

If you have questions or need any assistance you can reach out to us using the comment box below or by reaching out to our BOLDEnthusiasts via our contact us page.