Embedded Apps

In the last step, we learned about Customising the User Experience. Now, we explore Embedded Apps.

Canvas apps work great as standalone apps, however, they also can be built to be embedded in other applications. Canvas apps can be embedded into SharePoint Pages, Power BI, Microsoft Teams, other websites and soon into model-driven forms. When embedding in other apps you bring the flexibility of the canvas app design surface plus the use of all the connectors to the app you are building in the context of the other app. In many cases, this can mean bringing the Power platform app or data directly where the user is spending their time.

Generic Embedding

Using a properly constructed iFrame HTML element, the PowerApp can be embedded and made available to any licensed user in your tenant. The Url for the iFrame would be something like the following with the AppID substituted for your specific ID.

https://web.powerapps.com/webplayer/iframeapp?source=iframe&appId=/providers/Microsoft.PowerApps/apps/[AppID]

You can also pass custom parameters to the application using a format of myparam1=value1. The application can read the value of these when launched. To read these values, the app would reference them using the Param function.

SharePoint Pages

Adding a PowerApp canvas app to a SharePoint Online Page can be done using the add web part option and choosing PowerApps.

You will then provide the Web link or ID for your application.

After following these steps, your app will be available on the page.

Power BI

When you create an application to embed in Power BI, you will be using the custom visual capability of Power BI. You will add the PowerApps custom visual from the marketplace and then you will be able to add the PowerApps custom visual to your report. The new app you create from here will have a live data connection to the Power BI data. You can read more about this integration here: Power BI Integration.

Microsoft Teams

Canvas apps can be embedded into a Microsoft Teams channel as a tab. Using the add tab experience, you can connect to a PowerApps canvas app.

You can read more about enabling this here: Adding an app to Microsoft Teams

Model-Driven Apps

While model-driven apps offer a quick way to get an app up and running on a data-centric app, it doesn’t allow the blank canvas design experience of a canvas app or access to all the connectors. In preview at the time of this writing, the ability to embed a canvas app in a model-driven form unlocks what used to require a developer to build a custom control or an HTML web resource can now be done with a canvas app.

Using this new feature, you can adjust the control properties of a field or a sub-grid to configure a canvas app to take over the user experience for that field. When building an app for integration with a form, you start building the app from the model-driven form designer. This adds a special integration that allows you to access the data from the form or sub-grid in the canvas application. Using that data as context, you can use other connectors or visuals to provide the overall application experience. You can follow the preview of this feature here Extend Dynamics 365 entity forms.

Up next, let’s go through a summary of Building Canvas Applications.