How to embed a canvas app in a model-driven form

In this post, we will go through the steps needed to embed a canvas app into a model-driven form. The way to do that is no different than how other custom controls are added. Here are the steps that need to be followed:

• Go to Solutions and select the entity to which you want to associate a canvas app. Open that entity's main form. For example, here is the standard Accounts main form (for the Accounts entity in CDS).

• Now within the main form, pick either an existing tab or add a new tab. For this example, I will add a new tab and call it Embedded Canvas App. Go to the Insert tab and select One Column (1 tab).

• Double click on the Tab and set the Label to "Embedded Canvas App" (you can set it to whatever you want). Hit OK.

• Add a required/mandatory field to the section within this tab e.g. Account Name.
  • Tip 1: Selecting a required/mandatory field (that is guaranteed to have a value) is necessary or recommended as otherwise the embedded canvas app will not refresh in response to any changes in data on the host model-driven form.
  • Tip 2: If you are unsure about which field to add, go to the Summary tab and look at the field that has a red asterisk against it.
  • Tip 3: The field you want to add might not be visible in the fields list on the right side. Uncheck the "Only show unused fields" checkbox.

• Double click on the field and go to the Controls tab. By default, the Text Box control will be selected for Web, Phone, and Tablet. Adding am embedded canvas app is just like adding any other custom control.

• Click on Add Control and select Canvas app.

• Click on Add. The Canvas app control details show up.

• Click on Customize and the app designer will open up with a default screen that has a form which displays the contextual record.

• For the purposes of this example, we will not make changes to the app. Click on File->Settings->Screen Size + Orientation and change the size to 16:9 (Default) and then Orientation to Landscape. Hit Apply.

• Once the screen size is changed, go back to the screen and adjust the size of the form to match the size of the screen. (Note: this step isn't necessary but is good for a good user experience)

• Go to File->Save as. Give a name to the app and hit Save. Once a canvas app is saved for the 1st time, it gets published as well.

• Go back to the main form and verify that the App Name and ID are now populated.

• Select Canvas app as the Web control (Note: Embedded canvas apps cannot be added as Phone and Tablet controls)

• Go to the Display tab and uncheck "Display label on the form" and click OK

• Save and publish the form.

• Go back to the model-driven app and select an Account. The Account main form opens

• Go to the Embedded Canvas App tab and verify that the embedded canvas app displays the current Account's details

• Open another account and verify that the embedded canvas app reflects the details of this account

In the subsequent posts of this series, I will describe some of the challenges with embedded canvas apps.

Stay tuned!