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
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!!