Embedding Canvas Apps in Model-Driven Apps

Embedding Canvas Apps into Model-Driven Apps within the Power Platform provides the flexibility to leverage the best of both worlds. Model-Driven Apps (MDAs) are designed around the data model and the Common Data Service (now known as Dataverse), focusing on structured data. On the other hand, Canvas Apps provide highly customizable user interfaces with drag-and-drop simplicity, but often lack the built-in structure that MDAs offer.

By embedding a Canvas App inside a Model-Driven App, you can provide a customized and interactive experience while still benefiting from the rich data structure and relationships that MDAs offer.

Here is a step-by-step guide to embedding Canvas Apps in Model-Driven Apps:

1. Prerequisites

Before embedding a Canvas App inside a Model-Driven App, ensure you have the following prerequisites:

Step 1.1: PowerApps Environment

Ensure that you have access to a PowerApps environment where both Model-Driven Apps and Canvas Apps can be created and managed.

Step 1.2: Required Permissions

You need appropriate permissions to modify Model-Driven Apps. This typically means being an admin or having a role with permissions to customize the app.

Step 1.3: Existing Canvas App

If you haven’t already created the Canvas App, you need to create it first. The Canvas App should be designed and tested, and ready for integration.

Step 1.4: Dataverse (Common Data Service) Setup

Model-Driven Apps depend heavily on Dataverse (Common Data Service), so your Canvas App should have access to the necessary data entities and relationships in Dataverse.

2. Create or Modify a Model-Driven App

The first step is either to create a new Model-Driven App or modify an existing one.

Step 2.1: Create a Model-Driven App

Go to the Power Apps portal and click on Apps in the left sidebar.
Click Create an app and choose Model-Driven App.
Use the App Designer to select the entities (tables) and configure the app’s navigation, forms, views, and dashboards.

Step 2.2: Add Components

Inside the App Designer, you can select and configure the pages, components, and entities. Make sure that your Model-Driven App is structured according to your requirements.

3. Create and Publish the Canvas App

The next step is to create the Canvas App that you want to embed. This can be a brand new app or an existing one.

Step 3.1: Create a New Canvas App

Go to the Power Apps portal, click on Create > Canvas App.
Choose the Phone or Tablet layout based on your preferences. The tablet layout is typically used for embedding within Model-Driven Apps as it provides a larger workspace.
Design the Canvas App using drag-and-drop controls. Make sure to use data sources like Dataverse, SharePoint, or any external system you want to integrate into the Canvas App.

Step 3.2: Use Dataverse Entities

Since your Model-Driven App is based on Dataverse, it is best to use Dataverse as a data source in your Canvas App.
Connect the Canvas App to the same Dataverse entities (tables) that are used in your Model-Driven App.

Step 3.3: Publish the Canvas App

After you’ve created and tested your Canvas App, click on File > Save and Publish the app.

4. Embed the Canvas App into the Model-Driven App

Once both the Model-Driven App and Canvas App are ready, you can embed the Canvas App into the Model-Driven App.

Step 4.1: Open the Model-Driven App in the App Designer

In Power Apps, go to Apps and select the Model-Driven App you wish to edit.
Click on Edit to open the App Designer for that Model-Driven App.

Step 4.2: Add a Canvas App as a Web Resource

In the App Designer, select the Forms or Dashboards where you want the Canvas App to appear.
Insert a Web Resource by selecting the Insert tab, then choosing Web Resource from the options.

Step 4.3: Configure the Web Resource to Point to the Canvas App

When prompted to configure the Web Resource, select Canvas App as the type of web resource.
Enter the App ID (the unique identifier for the Canvas App) of the Canvas App you want to embed. You can find the App ID from the Canvas App’s details page in the Power Apps portal.

Step 4.4: Set the Canvas App Display Parameters

Configure how the Canvas App should be displayed in the Model-Driven App (e.g., size, borders, etc.). You can adjust these settings in the properties of the Web Resource.

5. Pass Data Between Model-Driven and Canvas Apps

One of the key benefits of embedding a Canvas App inside a Model-Driven App is the ability to pass data between the two apps. This can be done by using Context Variables or Parameters.

Step 5.1: Set Context Variables in Canvas App

When embedding a Canvas App inside a Model-Driven App, you may want to pass data like record ID or selected entity fields to the Canvas App.
You can pass this data from the Model-Driven App as parameters in the URL.

Example:

Navigate(CanvasAppName, {RecordID: 1234, EntityName: "Account"})

In the Canvas App, you can retrieve these parameters by using the Param() function.

Example:

Set(varRecordID, Param("RecordID"))

This allows you to use dynamic data from the Model-Driven App inside the Canvas App.

Step 5.2: Update Data in Dataverse from Canvas App

If you want to allow the Canvas App to update data in Dataverse, make sure your Canvas App is connected to the appropriate Dataverse tables. You can use formulas like Patch() to update records.

Example:

Patch(Accounts, varRecordID, {AccountName: TextInput1.Text})

This would update the AccountName of the record specified by varRecordID.

6. Test the Integration

After embedding the Canvas App in the Model-Driven App, thoroughly test the integration to ensure that:

The Canvas App appears and functions as expected within the Model-Driven App.
Data is passed correctly between the two apps.
Actions like updates or data retrieval are working correctly.

7. Publish and Share the Model-Driven App

Once everything is tested and working as expected, you can publish the Model-Driven App with the embedded Canvas App.

Step 7.1: Save and Publish

After finalizing all configurations in the App Designer, save the changes and publish the Model-Driven App.

Step 7.2: Share the App

Share the Model-Driven App with the relevant users or teams, ensuring they have appropriate permissions to view and interact with the embedded Canvas App.

8. Ongoing Maintenance and Optimization

Step 8.1: Monitor Usage and Feedback

After the app is live, monitor usage and gather feedback from users. Ensure that the embedded Canvas App is providing the functionality users need.

Step 8.2: Update and Optimize

Based on feedback, you may need to update the Canvas App or the Model-Driven App. This could include performance optimization, bug fixes, or adding new features.

Conclusion

Embedding Canvas Apps into Model-Driven Apps provides the ability to create customized and interactive user interfaces while leveraging the powerful data model and relationships provided by Dataverse. The integration of these two types of apps allows businesses to offer a seamless user experience and to maximize the potential of the Power Platform.

By following the steps outlined above, you can successfully integrate a Canvas App into a Model-Driven App and create a powerful, dynamic solution.

Let me know if you need further details or assistance with any of the steps!