Using embedded Canvas Apps to display external data in Model-Driven Apps

This is the second blog post in a series of two about embedded Canvas Apps. My previous blog post was all about the concept of embedded Canvas Apps. If you want to know the difference between Canvas Apps and Model-Driven Apps (both together being the building blocks of Power Apps) and find out when you can combine those and utilize an embedded Canvas App on a form in a Model-Driven App, go back to my previous blog post and you will find out more about that. In this blog post we will look at a specific use case and how to set that up.

The Use Case

Imagine a Model-Driven App in which you can manage some processes. A common scenario is that you have another system which handles some other processes. In your Model-Driven App you handle the customer information and you want to see the whole picture of the customer from within there. In this example we want to display information on the Contact in our Model-Driven App, information that comes from another system.

Getting started with Embedded Canvas Apps

To get started, navigate to the maker portal. Create or edit the main form of the entity for which for which you want to embed a Canvas App. Please note that you need to do this in classic mode. So switch to classic. You can place a Canvas App either as a part of a tab on a section and let other sections on that tab represent other information. Or you can choose to let a whole tab represent the Canvas App.

Add a field to a section and make sure it is a field that always contains data. For the contact entity, e.g. choose email address and let e-mail address be mandatory for contacts. The field will not be displayed, it will be replaced by your Canvas App. This is just how it is done, i.e. the way you add a Canvas App to a form. As you probably know you have the possibility to add the same field to the form more than once so it is no problem to actually display the email address somewhere else on the form. But you knew that already.

For the field, open properties. Then choose to add a Custom Control and choose Canvas App. Now you will have the possibility to from here create a new Canvas App. Choose to do that and the Power Apps Studio will open.

There is one thing that differ an embedded Canvas App from an ordinary Canvas App. For embedded Canvas Apps you have contextual information. This means that you easily can get hold on data for the record in you Canvas App. This is all thanks to the added component ModelDrivenFormIntegration.

Use ModelDrivenFormIntegration.Item in order to access data from the record. For example [@ModelDrivenFormIntegration].Item.’Email Message’ in the formula bar in order to get hold on the email address.

One other thing to note is that a Canvas App Form control and data source for your entity in the Common Data Service are automatically added to your Canvas App.

If you want to display data from another data source then you have some different options for how to do that. One way is to create a Custom Connector and use that connector directly from within your Canvas App. Or you can use Power Automate and let a flow use your Custom Connector and get data for you. You can also skip the Custom Connector part and use a HTTP action in order to go and get the data that you want to display.

I have used the alternative to set up a Custom Connector and also have a flow in the background which uses that Custom Connector and then sends the response back to the Canvas App. Perhaps now you wonder why I chose to use that alternative. Well, the answer is that this was the way I got it to work. Time will tell what best practices we should have here. Please note that I have tested this only in a DEV environment. There are currently restrictions related to having Custom Connectors, Canvas Apps and flows in solutions. I will tell you more under findings and thoughts later in this blog post.

In order to trigger the flow when the user navigates to the form and the tab where your embedded Canvas App is, you can add a formula for the OnVisible property of the form. You can use Action -> Power Automate in order to set up a new flow.  

In your flow, use your Custom Connector or an HTTP action. Then use the Response action in order to get the data back to your Canvas App. Save the response in a Collection and add a table (or a gallery) to your Canvas App and let that table (or gallery) display the collection. Use the function ClearCollect in order to save as collection. It should look something like this.

ClearCollect(Events;’PowerApp->TheNameOfYourFlow,Answer’.Run(“jj0407s1-5c1g-53c0-862a-7b54fdd24577”))

We use the ClearCollect function to create a collection called Events. We use the flow “TheNameOfYourFlow” and we send in a parameter. In this case hard coded to a certain guid. You can use this as a test (but a real guid from your environment) and then you can change that so that you use the guid of the record which the user has navigated to. Remember that you can use  [@ModelDrivenFormIntegration].Item in order to get data from the record, i.e. to get the guid representing the record.

Imagine that you need to send in the guid to the other systems API, a guid representing a certain contact, in order to retrieve data for the contact.

About using the Response action in a flow. Make sure that you add the body of the HTTP request or Custom Connector. Also make sure that you expand the advanced settings and add the JSON scheme. Please not that you can also generate the scheme from an example. This means that you can run your flow one time and then take a look at the run flow. Then copy – paste the output from the HTTP action in order to generate the JSON scheme for the response action.

When you are done with your Canvas App, Save and Publish. When the App is saved the App Id will be send to your Model-Driven form and you will see it on the property page of the field you added before.

There is one more thing that you need to do before the Canvas App will be displayed and that is to go to the form properties and make sure that the checkbox “Display label on the form” is NOT checked. You might also need to go to the Controls area of the properties again and make sure that the Canvas App control is checked for Web.

This is what it might look like with a Canvas App embedded on a form in a Model-Driven App. Please note that this is just an example. You have lots of possibilities to give your Canvas App a makeover. You have the possibility to use themes for your Canvas App and you can also change the background colours, font etc. for the tables. What we have here is an event which is NOT in the Common Data Service, it is just displayed in an embedded Canvas App and the data is from another system.

Findings and thoughts

From the docs

There are some guidelines in the docs, take a look! In there you can read about e.g. that you can only have one embedded Canvas App on a form. Actually, you can have several configured but only one will display at a time. You can also read that ebedded Canvas Apps are not displayed when creating a new record since they need a record context to be passed to them. You can also read that before you could add a canvas app on the sub-grid control but that option is no longer available.

Share your Canvas App

Do not forget to share the embedded Canvas App with those who should be able to use it. You can share it with “Everyone” in order to share it with the entire organization. Read more about that here. I am not really sure about what more parts that you need to share in order for everyone to make use of the embedded Canvas App. E.g. if you have a flow and a Custom Connector involved as well. I assume that you need to make sure that the users are authorized to the data sources but I need to do some more research in this area. If you have any input, please feel free to leave a comment to this blog post.

Size and Orientation

File, Screen size + orientation lets you change the size of the app. It is not restricted to phone or tablet. E.g. Landscape, Widescreen works well for embedded apps which you place on a new tab. In my case I use the following settings.

Read more about size and orientation here.

Work in Solutions

To be able to work with Canvas Apps, Flows and Custom Connectors in solutions is still quite new. There are limitations which you should be aware of. Here are some examples:

Database operations such as backup, restore, and copy are not supported for canvas apps and flows. It says in the documentation that these operations can corrupt canvas apps and flows. Not good at all! Since it is a common scenario that you copy from production to test in order to be able to do better tests in there with better data.

Flows created from solutions do not appear in the “Team Flows” list. They must be accessed through a solution.

Canvas App in a managed solutions can’t be edited in the target environment. I guess we need to start to use environment variables if we need some environment specific configurations. I have not done enough tests here myself, but I can imagine it might be tricky with data sources/connections sometimes.  

Importing a solution containing a flow will not automatically create or associate required connections. The flow must be edited to fix these and then you add an unmanaged layer. Sara Lagerquist has some tips for all of you who connects to the Common Data Service only from your flows. Take a look here.

Now I have mentioned a few things. Read the full list from Microsoft here. It sounds good that Canvas Apps, flows and Custom connectors now are available in solutions, but it seams Microsoft have some job to do in order for our ALM processes for these quite new concepts to fully function. Keep an eye on the documentation. Hopefully Canvas Apps, flows and Custom Connectors will work better in solutions in the future.

Anyway, let us not be sad about the fact that our ALM processes are not complete yet. Let us instead be happy about the fact that we are able to empower our Model-Driven Apps by using the concept of embedded Canvas Apps!