Embedding Canvas Apps

A feature I’d like to show this week is embedding a canvas Power App in Dynamics 365 Finance & Supply Chain Management. This feature allows you to either embed the canvas app directly onto a page or it can be added to the Power Apps menu button. You can also pass along parameters to the app using data from Dynamics and passing the current legal entity parameter has been added as part of 10.0.19, which is now General Available.

The next time you create a canvas app (such as initiating a task or looking up data in a third-party system), I hope you keep this feature in mind. The embedded Power Apps can also be shared and added to a view using the Saved views feature which can be controlled with role-based security. The use of Saved views is not required but is the recommended approach. This is also a separate feature that must be enabled before using.

Below, I’ll walk through the two options to embed the Power App using a mock app I created for demonstration purposes. The app will be added to a product page in the Product information management module, but I will not be adding them to Saved views in this example. The number for a selected product will also be passed as a parameter to the app. Again, my app will be a non-functional app for demonstration purposes, but an example of a use case here could be listing related documents to this product from a SharePoint site that are not in Dynamics.

Embedding a Power App to a Page

1. Navigate to the page in Dynamics that you wish to embed your Power App into. I navigated to Product information management > Released products and clicked into a product.
2. Select Options > Personalize > Personalize this page.
3. The personalization toolbar appears. Click the ellipsis (…) icon and then Add an app from Power Apps.
   
   
   
4. Click the location on the screen you want to add the Power App to. I clicked around the very top Fast Tab.
5. When you’ve successfully placed a location for the Power App, the Add an app from Power dialogue appears.
   For Name enter how you want the Power App to appear on the form,
   For App ID this can be found at https://make.powerapps.com > Apps. Click the ellipsis next to your app and then click Details.
   Input context for the app is where you can select a field of data to send to your Power App as a parameter. These selections will change depending on the form or page you are adding the app to and what information is available.
   For Application Size I selected Thin. This represents the kind of format the app should be displayed as. Thin is a phone format and wide is the tablet format.
   For Legal entity access I am leaving it available to All legal entities.
   
   
   
   
6. Click Insert and note the message that the addition requires the form to be reloaded.
   
   
   
7. Click Close on the personalization bar and reload the form.
8. There is now a Fast Tab for my Embedded App Example Power App that I named in Step 5.
   
   
   
   Below is a screenshot of the Fast Tab when opened. The Power App is populated with the product number. We could have fit a much larger tablet app here, but you get the point.
   
   

Embedding a Power App to the Power Apps Menu

You can also add a Power App directly to the Power App menu button that appears in the upper right corner of the screen:

1. Click the Power App icon displayed above.
2. Click Add an App.
3. The Add an app from Power Apps dialog appears.
   For Name enter a name of how you want the app to appear in the menu.
   For App ID this can be found at https://make.powerapps.com > Apps. Click the ellipsis next to your app and then click Details.
   Input context for the app is where you can select a field of data to send to your Power App as a parameter. These selections will change depending on the form/page you are adding the app to and what information is available.
   For Application Size I selected Thin. This represents the kind of format the app should be displayed as. Thin is a phone format and wide is a tablet format.
   For Legal entity access I am leaving it available to All legal entities.
   
   
   
4. Click Insert and note the message that the addition requires the form to be reloaded.
   
   
   
5. Reload the form and you will now see your app in the Power App menu button.
   
   
   
6. The App, when launched, will appear like below. The product number has been passed to the app as a parameter that we selected in Step 3, and I’ve populated the text box in my app with the value.
   
   

In both examples, we selected the product number as the input context of the app. The context you select will be sent to your Power App as the EntityId parameter. The current legal entity will also be passed to the app as the cmp parameter starting in version 10.0.19. You can set the On Start event of your app to look for these parameters and assign them to variables like so:

For the documentation on this feature and information on sharing your embedded Power App, the link can be found here.

Thank you for reading! Please feel free to add me to LinkedIn for future blog updates. I’d also love to hear from you if you found this helpful or how you’ve implemented embedded Power Apps.