How To Embed A Canvas App On A Model Driven Dynamics Form?

In this article we will discuss how we can embed a Canvas App on a Model Driven form. Embedding canvas apps within model-driven forms can enhance user experience and extend the capabilities of the Dynamics 365 platform. This integration allows you to leverage the strengths of both canvas apps and model-driven apps within a single user interface.

There are two methods to achieve this:

• Embed a canvas app using modern experience
• Embed a canvas app using the classic experience

But we will discuss the modern experience because it’s the only interface that will be available in future and the classic experience will not be available.

Embed a canvas app using modern experience

In this continuously evolving landscape of Microsoft Dynamics 365, the modern experience offers seamless integration between canvas apps and model-driven forms, enriching user interactions and extending functionality within the platform. Leveraging the modern experience, you can embed canvas apps directly onto model-driven forms.

Let’s discuss about the involved steps to embed the app.

Step 1: Sign in to PowerApps maker.

make.powerapps.com

Step 2: Make sure to select the correct environment.

Step 3: Go to your solution.

Step 4: Open the solution and open the table where you want to add the canvas app on the main form.

Step 5: Open the main form in edit mode and add the section where you want to display the canvas app.

Step 6: Add the canvas app component from the left pane.

Step 7: Now, we need to put some information.

• Entity Name
• App Name
• App ID

You can check more details about these three values here

Step 8: Now I will add the canvas app to the component. I have already created my canvas app (Show Carousal Test) that I will display on the Account form.

Step 9: From the display, we will select the Canvas App.

When we select the Canvas App component then we will have to provide the Entity Name, App Name and App ID.

Step 10: How to find the unique name and app ID for a canvas app

Canvas app control first looks for the unique app name and then app id if it has not found the app name. Preferred is to provide both correctly.

IMPORTANT: Canvas must be in the same environment.

APP NAME we can get from the name column, we can get the unique name of the app.

We can get the App ID from the details of the application.

Step 11: I Have inserted the values for the App Name and App ID.

 

As, you can see the app is already embedded in the form.

 

Lets save and publish the form and see the Model Driven app in action.

We can see the Canvas application is embedded on the Account’s form.

 

 

There are some points that we should keep in mind while Canvas embedding the application on the model driven app form.

• By default, the label for the canvas app component is “New canvas app.” Consider changing it to a more descriptive name, such as the app’s name or a brief description.
• Avoid using the “Bind to table column” option for the App ID, as it requires the correct app ID to be displayed in a field within the record, which may not always be practical.
• Always use a required column with a guaranteed value. Without a value, the embedded canvas app won’t refresh in response to changes in data on the host model-driven form.
• Changing the App ID value will break the link from the model-driven form to the embedded canvas app.
  • If neither the App Name nor App ID match an existing canvas app, the form will display the message “Sorry, we didn’t find that app.”
• If opening Power Apps Studio is blocked by a web browser pop-up blocker, enable the make.powerapps.com site or temporarily disable the pop-up blocker before selecting “Customize” again.
• The embedded canvas app can access data from the host model-driven form through ModelDrivenFormIntegration.Item. For example, to retrieve the value of a column named “accountnumber,” use ModelDrivenFormIntegration.Item.accountnumber or ModelDrivenFormIntegration.Item.’Account Number.’
• The form designer directly links to Power Apps Studio opened in another browser tab. Ensure the App name is properly set to avoid referencing issues when importing the canvas app as part of a solution. Set the App name to specify a unique name for referencing the canvas app at runtime. If not set, the App ID property will be used, potentially causing issues between environments. Follow the steps in step 12 to create and set the App name.

 

FAQs:

1. What happens if I use the “Bind to table column” option for the App ID?

   • Using this option can lead to complications, as it requires the correct app ID to be displayed within a field in the record. However, this may not always be feasible or practical, potentially causing issues with data integrity.

2. How can I ensure that the embedded canvas app always refreshes with updated data?

   • Utilize a required column with a guaranteed value within the model-driven form. Without a value in this column, the embedded canvas app won’t refresh in response to changes in data, leading to potential discrepancies in the displayed information.

3. What should I do if the embedded canvas app fails to load due to changes in the App ID?

1. • If the App ID value changes, it can break the link between the model-driven form and the embedded canvas app. To resolve this, ensure that the App ID remains consistent or update the reference within the model-driven form to match the new App ID.