Embed Canvas App In A Model Driven App

Model Driven Apps are PowerApp applications that are developed based on a data model. Such apps have very limited scope of user experience customizations compared to a Canvas App. However, there are ways where we can embed a Canvas App into a Model Driven App to incorporate a better user experience in a Model Driven App.

Pre-requisites

This article assumes that the readers have fundamental knowledge of Microsoft Dataverse and Model Driven App. If you have not worked with them, then it is recommended to familiarize yourself with these concepts to better understand this article. Additionally, please ensure that you have a PowerApp Environment with Dataverse enabled.

Getting Started

Following are the initial components we will consider for our scenario where we will try to put a static text on a Form in Model Driven App.

PowerApp Environment with Default Dataverse Tables
PowerApp Solution
Account Table
Model Driven App

For any Power Platform based implementation, it is recommended to create a solution, so that all the related components can be packaged and moved together from one environment to another. So, let’s start by creating a solution for our scenario as well.

Step 1

Navigate to here.

Step 2

Go to Solutions -> New Solution. Set the solution properties as follows and click on “Create”.

Display Name	Embed Canvas App
Publisher	CDS Default Publisher

Step 3

Open the newly created solution. Click on New -> App -> Model Driven App

Step 4

Give the Model Driven App a suitable name and click on “Done”.

Step 5

In the App, edit the “Sitemap Designer”.

Step 6

Set the New Area property as follows, then Save and Publish the “Sitemap Designer” changes.

Type	Entity
Entity	Account

Note

You will see that the entity added in the Sitemap Designer is now available in the Entity View of the Model Driven App.

Step 7

Save and Publish the app.

Step 8

Next, we will add the Account entity to the App. Go back to the solution and click on Add Existing -> Table

Step 9

Select the Account table, click next and select “Include All Components”. Click on Add to add the table to solution.

Step 10

Click on the Account Table in the solution and go to “Forms” tab.

Step 11

Add a new “Main” form. Give form a suitable name like “Embedded Canvas App Form”.

Step 12

In the Form, click on Component and add a 1-Column Tab Component and name it as “Canvas App”.

Step 13

Add a form field like “Account Name” in the section. Set the property to “Hide the label” as checked. Save the form.

Note

Ensure that the field that you are adding in the form is a “Required” field in the table.

Step 14

Now, open the form in Classic mode. To do so, click on the “Switch to Classic” in the ribbon.

Step 15

Select the newly created tab and select the form field in the section.

Step 16

With the form field selected, click on “Change Properties” button in the ribbon and go to “Controls” tab.

Step 17

Click on “Add Control” and select Canvas App in the pop-up. Click on “Add”.

Step 18

Set the “Canvas App” control to be visible on “Web”, you can choose others depending on your requirement.

Step 19

Click on “Customize” button to create an app. A new browser window will open for you to design your canvas app.

Step 20

Design your app, as per your requirements. I am adding just a simple label for this article.

Step 21

Save and Publish your canvas app.

Step 22

Now switch back to the other tab and you will see that the App Name and App ID are automatically populated.

Step 23

Select “Hide Default Control” for Canvas App Control setting.

Step 24

Click OK. Save and Publish your form in Classic Mode.

Step 25

Go to your solution. Ensure that you have few records in “Accounts” Table.

Step 26

Now play the Model Driven App from the solution and open a record from “Accounts” Table.

Step 27

Switch to your newly created Main Form and go to the “Canvas App” tab created. You will see your canvas app loaded in the form.

Summary

This article gave you an introduction on using Canvas App inside a Model Driven App. In the article I created a new Canvas App, since this activity is currently possible in Classic Mode only, as explained in the article. However, you can also embed an existing Canvas App into the Entity Forms using the new Form Designer experience as well. I will explain the steps for those in a future article. Until then, Happy Learning!!

2 Comments

Join the conversation! Your thoughts help the community grow.

Sajeev Siva4y ago
I am having a problem integrating a canvas app into a model-driven app form. It is working fine while the app is on online mode but not loading the integrated canvas app in offline mode. could you please advice?
- Pawan Jajoo3y ago
  Canvas App integration may not work when your MDA is being used in Offline Mode. Now, that there are custom pages available in MDA, you might want to try that option instead of using the Integrated Canvas App approach.