As you know, day-by-day PowerApps is becoming more and more powerful, and it can be easily embedded into any website. This blog will explain how you can embed Canvas PowerApps to PowerApps Portal.
Follow Below steps to achieve this:
Steps to get the App Id of Canvas App:
- Go to Apps -> Select the Canvas App -> Click on more commands “…” -> Select Details
- You will get App ID in Details
- Copy this App ID
Steps for embedding Canvas App in PowerApps Portal
I will explain two ways to embed canvas apps
- Code to Embed the Canvas app
Code: <iframe width=”[W]” height=”[H]” src=”https://apps.powerapps.com/play/[AppID]?source=website&screenColor=rgba(165,34,55,1)” allow=”geolocation; microphone; camera”/>
[W]: width of Iframe
[H]: height of Iframe
[AppID]: id of canvas App
- Select the webpage (page) on which you want to embed the canvas app.
- Go to “Source Code Editor” of the Webpage(page)
Enter the Code here,
<div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; padding: 8px; margin: 0px; text-align: left; min-height: 100px;"> <div class="container" style="display: flex; flex-wrap: wrap;"> <div class="col-md-12 columnBlockLayout" style="display: flex; flex-direction: column;"> <iframe frameborder="0" width="700" height="500" src="https://apps.powerapps.com/play/b74d3c24-940e-4bbc-8541-db9d8f8e87ec?source=website&screenColor=rgba(165,34,55,1)" allow="geolocation; microphone; camera"> </iframe> </div> </div> </div>
- Save the code.
- Once you save the code browse the website you will see the canvas app
- Select the webpage (page) on which you want to add the canvas app.
- Go to Components -> Select Iframe
- After Adding Iframe update the properties of Iframe.
Width: width of Iframe
Height: height of Iframe
AppID is the Id of canvas App.
- After Adding Link, you will see Canvas app
- Currently, only Active Directory Users can see or use the Canvas App from PowerApps portal
- Anonymous users will not be able to access the Canvas App they will see below screen.
- Portal Securities like Web Roles, Entity Permissions are not applicable to the canvas app