Embedding Canvas Apps into Model-Driven Forms for a Unified Experience

In Microsoft Power Apps, there are two main application types—canvas apps and model-driven apps—each serving unique purposes. While model-driven apps are tightly coupled with Microsoft Dataverse as their data source, canvas apps offer flexibility with 400+ data sources through built-in or custom connectors.

Canvas apps are highly customizable, allowing you to design user interfaces from scratch for mobile or tablet devices. You can drag and drop components, apply formulas for logic, and connect to multiple data sources. Model-driven apps, on the other hand, are structured, data-driven, and ideal for business process–focused solutions.

But what if you want the rich visuals and flexibility of a canvas app inside a structured model-driven form? That’s where embedding a canvas app comes in. This integration lets you enhance model-driven forms with custom visualizations, external data sources, and advanced interactivity.

Embedding via the Classic Experience

1. Open the main form in your model-driven app and switch to classic view.

2. Select the column that will bind to the canvas app.

3. In Field Properties, go to the Controls tab and select Add Control → Web.

4. Set the key properties:

• Table (Entity) Name – Source data for the app.
• App Name – Name of the existing canvas app.
• App ID – Unique identifier of the canvas app.

5. If you don’t have an app yet, leave the fields blank and click Customize to create one in Canvas App Studio.

The app automatically includes a ModelDrivenFormIntegration control, bringing contextual form data directly into the embedded app.

 Embedding via the Modern Experience

1. Open the form editor in modern experience.

2. Select the column where the app will be embedded.

3. From the Related Data group, choose Canvas App.

4. In the Add Canvas App dialog, enter:

• Entity Name
•  App Name
•   App ID

5. Publish your changes—the canvas app will now display inside the model-driven form.

The Power of ModelDrivenFormIntegration Control

Once embedded, the ModelDrivenFormIntegration control becomes the bridge between your host model-driven form and the canvas app. It enables:

•  DataSource – Link the app’s data to the form’s table.
•  OnDataRefresh – Trigger actions when the host form saves data.
•  Item – Access fields from the host form.
•  Actions like:
• SaveForm
• RefreshForm
• NavigateToMainForm
•  NavigateToView
•  OpenQuickCreateForm

 Why Embed a Canvas App in a Model-Driven Form?

• Enhanced UI – Bring in charts, maps, and visual dashboards.
• Multiple Data Sources – Display data beyond Dataverse.
• Custom Interactions – Add business-specific logic and workflows.
• Improved Productivity – Give users a richer, single-screen experience.

By embedding a canvas app in a model-driven form, you combine the power of structured data management with the flexibility of custom design, creating a seamless and powerful user experience.