How to Embed a Canvas App in Power Pages

Prerequisites

Before you begin, ensure that you have the following:

• Access to Power Platform:
  • A Power Apps environment with permissions to create and manage Canvas apps.
  • A Power Pages environment to embed the Canvas app.
• An existing Canvas app:
  • If you don’t have one, create a basic app in Power Apps Studio.

Step 1: Prepare Your Canvas App

1. Open Power Apps Studio:

   Navigate to Power Apps and log in.

2. Select or Create a Canvas App:

   Click Apps > New App > Canvas App to create a new app. If using an existing app, open it for editing.

3. Make Your App Responsive:

   Ensure the app is responsive by enabling responsiveness in settings:

   • Go to File > Settings > Screen size + orientation.
   • Enable the toggle for Scale to fit.

4. Publish the App:

   Once satisfied with the app, click File > Save > Publish to Teams or Web. Note the App ID. You can find it under Settings > Advanced Settings > App ID.

Step 2: Create or Access Your Power Pages Site

1. Navigate to Power Pages:

   Go to Power Pages.

2. Create a New Site:

   Click Create a site. Choose a template and configure the basics of your site.

3. Access an Existing Site:

   If you already have a Power Pages site, select it from the list.

Step 3: Embed the Canvas App into Power Pages

1. Go to the Page Designer:

   Select the desired site and navigate to Pages > Edit to open the page editor.

2. Add a Section to the Page:

   Add a new section by clicking the + icon. Choose a section layout that suits your app dimensions.

3. Insert an iFrame Component:

   In the section, select + Add Component. Choose the HTML or Embed Code option.

4. Add the Canvas App Embed Code:

   <iframe src="https://apps.powerapps.com/play/e/{AppID}?source=iframe" 
       width="100%" 
       height="600px" 
       frameborder="0" 
       allowfullscreen></iframe>

   Replace {AppID} with the actual ID of your Canvas app.

5. Configure iFrame Dimensions:

   Adjust the width and height attributes to fit the layout. For dynamic sizing, set width="100%" and use CSS for responsive height.

6. Save and Publish:

   Click Save and then Publish to make the changes live.

Step 4: Test the Embedded App

1. Open the Site in a Browser:

   Navigate to the published site URL.

2. Verify Functionality:

   Ensure the Canvas app is visible and interactive. Test responsiveness and app performance.

3. Debug Any Issues:

   If the app does not appear, verify the App ID and ensure the app is published. Check browser console for iFrame-related errors.

Additional Tips

Security Considerations:

• Ensure appropriate permissions are set for app users.
• Use Dataverse for secure data access.

Styling:

Apply CSS in Power Pages to style the iFrame container.

.canvas-app-container iframe {
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

Monitoring:

Use Power Platform Admin Center to monitor app usage and performance.