Embedded Canvas Apps within Model-Driven Forms

Just this past December, Microsoft announced the ability to enrich model-driven forms with embedded canvas apps – and this is really exciting. Since I first started working with the power platform, the fact that canvas apps and model-driven apps don’t really play together has seemed a notable limitation. This enhancement really helps bring everything closer together because we can get the same pixel-perfect purpose-driven UI that we’ve come to love (and we all know we do) about canvas apps but within a fully functional model-driven application. In case you are wondering, yes this does potentially open the door to embedding canvas apps within UCI for Dynamics 365 as well (since UCI for Dynamics is essentially a model-driven app).

First off, it takes only a few clicks to embed a canvas app on a model-driven form. Canvas apps are easy to develop (hence the somewhat-maligned concept of the citizen developer) and you can craft very nice visual layouts with “no coding” required (in fact it’s the same level of coding that you’d be using with custom excel apps for example). Furthermore, to bring in and display data from external services, you can choose from a long list of connectors that PowerApps offers for popular services such as SharePoint and Office365 or they can create custom connectors. Finally – and this is important – you get the context of the model-driven form passed in to the canvas app – including the current record or list of related records.

Example from Microsoft:

While you are building you Canvas app in PowerApps App Builder, you can get the context from your model-driven form via the Data element of a special control called ModelDrivenFormIntegration:

ModelDrivenFormIntegration.Data is a list of records. If you Embed the app into a sub-grid, the context passed to the canvas app from the form will be a list of related records. If you instead embed into a field, the current record of the form is passed as the context to the canvas app. In this case you would use the First expression and dot notation to access the objects attributes i.e. First(ModelDrivenFormIntegration.Data).EmailAddress1. 

Once you’ve made the changes to your canvas app to get and use the context, it’s time to save, publish and embed the app into your form. You can either embed into a field or into a sub-grid. As mentioned, use a (single line of text) field if you want to pass the current record to the app, and use a sub-grid if you want to pass a list of related records.

To embed into a field, add the field to your form and edit its properties:

It should be noted:

• You must set the Control to enabled for Web only, not Phone or Tablet
• You can only embed one canvas app per form
• App ID must be set by customize (Open existing app then save, publish to create link to control)

To Embed a Sub-Grid, add a Sub-Grid and edit its properties:

It should be noted:

• Works the same as the field properties except here you specify a View Name
• Fetchxml of view is result set

Full instructions for embedding can also be found in the Microsoft Preview documentation. Once you’ve embedded you can make use of the data in your canvas App, which will behave like an integral part of your model-driven form with a few limitations. One such limitation is that you cannot directly edit items using the context (yet!). You can however create another CDS data source and pass your context item to a LookUp function i.e. LookUp(Accounts, accountid = First(ModelDrivenFormIntegration.Data).AccountId)

Of course, you may have guessed that being restricted to a single record or list of records coming from a form is a bit of a. . . well, restriction! You’ll be pleased to know that you can also connect and grab data from other data sources by using connectors. there are over 230 Built-in Connectors and you can also build you own using an API.

I look forward to diving more into this functionality in the future. If you Enjoyed this post, please check out my Blog to view this article and many more in the future. Follow / subscribe if you like! Thanks so much!