Integrate Canvas Apps into Power Apps Portals

Introduction

This blog will focus on how 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 also 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, I will show the power of bringing low-code platforms to your external users here.

However, to access the canvas app as an external user, you need the Power Apps plan subscription and must be registered as an Azure AD guest or Azure AD user. Note that the power apps portal will not render canvas apps embedded in model-driven apps.

Further Read: An Introduction to Canvas and Model Driven Apps.

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 and integrate canvas app into the portal following a few simple steps. 

this image shows canvas app

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.

Empower your Workflow with Power Apps!

Take the next step with AlphaBOLD and dive deeper into enhancing your business processes. Discover how Power Apps can revolutionize your workflow efficiency.

Request a Demo
this image shows the Id of the canvas app

You can use Microsoft Docs’ embedded code to embed an app into the Power Apps portal. The code image is given below. 

this image shows Microsoft Docs' embedded code

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 provide a portal if you do not have one. To add a new page, go to the portal studio, click a new page button, and select your interest template. 

this image shows power apps portal

Select the newly created page’s body and click the Source Code Editor button at the bottom right corner. You will get a code editor screen to paste the code snippet Microsoft gave to embed a canvas app. You must set the ID of the canvas app and its width and height in the HTML code.

this image shows Editor button - Integrate Canvas Apps into Power Apps Portals

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

Learn more about AlphaBOLD’s BI Services 

this image shows app functional

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

Step into the Future of Business Applications!

Partner with AlphaBOLD to explore custom solutions that propel your business forward. Let innovation be your advantage.

Request a Demo
this image shows Azure active

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 because it is embedded within the iframe.

Read more: Create and Embed a Canvas App in Teams

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.

Explore Recent Blog Posts

Infographics show the 2021 MSUS Partner Award winner

Related Posts

Receive Updates on Youtube