Enrich your model-driven forms with embedded canvas apps (Public preview)

Makers can now extend the power of WYSIWYG, low-code customization,  offered by canvas apps, to model-driven forms. Using embedded canvas apps makers can easily design and create rich visual areas on model-driven forms. They can also connect and display data from over 200+ data sources in embedded canvas apps right next to data from the Common Data Service. The embedded canvas apps also provide rich data integration capabilities to bring in contextual data from the host model-driven form to the embedded canvas app unlocking a variety of scenarios.

Until today model-driven form customizers looking to create custom visual sections and layouts in their forms had to use professional development technologies such as HTML and JavaScript and embed them as web resources on their forms. Similarly, to bring in and display data from external services, model-driven form customizers had to use IFRAMES or virtual entities, both of which suffer from limitations. Using IFRAMES the content appears mostly as an island on the form with limited contextual linking (if any) and using virtual entities is limited to read-only scenarios.

The capability to embed canvas apps in model-driven forms provides a rich and elegant solution to both these issues and more. With just a few clicks, makers can now embed a canvas app on their model-driven forms. They can then use the canvas app designer to easily design and create visual layouts, no HTML, JavaScript or web resources involved. To bring in and display data from external services, makers can simply pick and choose from the long list of existing connectors that PowerApps offers for popular services such as SharePoint and Office365 or they can create custom connectors for their own services. The embedded canvas apps also get rich data context passed to them from the host form including the current record (being displayed in the model-driven form) or a list of records related to the current record.

Here’s an example of an embedded canvas app on the Account main form used to display the Contacts of an Account in a rich interactive visual gallery format.

Adding an embedded canvas app to your model-driven form is very similar to adding a custom control. You start by adding either a single line of text field or a Sub-Grid control to your form.

• Add a single line of text field if you want to pass the current record as data context to the embedded canvas app.
• Add a Sub-Grid control if you want to pass a list of records related to the current record as data context to the embedded canvas app. When using the Sub-Grid control, the Entity and Default view that act as the data source of the Sub-Grid control determine the data that is passed.

Next, configure the properties of the field or Sub-Grid control to add the Canvas app control.

Once you have added and enabled the Canvas app control, select Customize. This will launch the canvas app designer and allow you to customize the canvas app to meet your requirements. The App ID will be automatically generated for you when the canvas app is saved.

Canvas apps created via this process include a special control named ModelDrivenFormIntegration. This control is responsible for bringing contextual data from the host model-driven form to the embedded canvas app.

Use the WYSIWYG canvas app designer to easily design the interface to match your requirements. Connect and bring in data from a variety of data sources using connectors. Use the Filter, Search and LookUp functions and the context passed in from the host model-driven form to filter or find specific records in those data sources.

When you are done making the required changes to your embedded canvas app, save and publish it to make it available to users.

For detailed step-by-step instructions, please refer to the series of articles in our documentation on embedding canvas app in model-driven forms. Note that this feature is available in Unified Interface only and is limited to online environments.

Starting today the feature is available as public preview in these regions: Canada, India, Japan and South America. You can create an environment in one of these regions if you want to try this right away. The feature will make its way to other regions over the next few weeks but due to the extended holiday deployment schedules it will be until early January 2019 before it lights up in some regions.

A huge thanks to all our customers and partners who provided valuable time and feedback when the feature was being designed and developed.

As always please keep the feedback coming on ideas and improvements you would like to see in this area.