Getting started with embedded Canvas Apps

Canvas Apps is one of the two building blocks of Power Apps, the second being Model-Driven Apps. I have written about both these concepts before and I have also mentioned that you can combine the two by embedding a Canvas App on a form in a Model-Driven App. This is the first blog post in a series of two. In this first blog post I will give examples of use cases for embedded Canvas Apps and in my next blog post I will go through the entire process of how to create an embedded Canvas App for one of these use cases.

About Power Apps

Power Apps is a part of the Power Platform, the part where we build our business apps. The two building blocks Canvas Apps and Model-Driven Apps have different purposes.

With Model-Driven Apps most of the layout is already determined for you. You work with concepts like entities, forms, views, business process flows etc. In almost most cases the data source is the Common Data Service. You can use something called Virtual Entities though in order to display data from other sources. Most of the concepts in Model-Driven Apps come from Dynamics CRM/xRM, so if you are familiar with the concepts related to Dynamics CRM/xRM then you are already an expert of Model-Driven Apps.  It is a no-code tool for building business applications and the users most often run the apps in a browser.

Canvas Apps are often explained as Power Point meets Excel, you start with an empty canvas, add your graphic pieces (as in Power Point) and write formulas behind the different pieces (Excel alike formulas). It is referred to as a low-code tool for creating apps. There is a mobile device app called Power Apps (surprise, surprise) which you download, logon to a certain environment and you will access your Canvas Apps. The data source can be the Common Data Service but it can also be another data source of your choice. Choose between any of the 270+ predefined connectors or create a custom connector.

What are embedded Canvas Apps?

As already mentioned, there is also a possibility to combine Model-Driven Apps and Canvas Apps. Then we get what is called an embedded Canvas App, which means a Canvas App which is embedded on a form in a Model-Driven App. The form passes data context to the Canvas App. The embedded Canvas Apps that I have created so far, for those I have used the data context and of the current record. On the Power Apps blog on the 24th of September 2018 you could read:  

Host forms can pass data context of the current record, a related record or a set of related records to an embedded canvas app.

Sounds like you can get more out of the context than what I have tried so far.

The configuration of an embedded Canvas App starts on a form which is used in the Model-Driven App. On the form you add a field and you should make sure to choose a field which always contains data. For this field you change the properties of the field – you add a custom component  – a Canvas App. From there you will be guided and taken to the studio where Canvas Apps are designed. The end result will be a Canvas App, displaying data of your choice, or containing some other logic of your choice and this Canvas App will be displayed on a certain form in the Model-Driven App.

In the above picture, which is from the Microsoft documentation they have embedded an app which displays pictures of contacts. This reminds me a little of the Power Apps Component Framework component Contact Cards by Natraj Yegnaraman. However his PCF control displays pictures of contacts instead of a list of contacts, not contacts on an account form. Perhaps there is some PCF control which is even more similar to the Microsoft picture or at least you should be able to accomplish something similar with the Power Apps Component Framework I believe.  

Embedded Canvas Apps – the Use Cases

The starting point is that you have a Model-Driven App, i.e. you have created a business application in order to fulfil some requirements from a customer. Probably the customer needed to store and manage entities such as customers, vendors, quotes etc. or totally different entities, but probably several entities and you created an entity model or used an existing one and utilized concepts that comes with the Common Data Service and Model-Driven Apps  such as the security management, ways to design business process flows, perhaps integration with Outlook etc.

When might it then be the case that you want to consider an embedded Canvas App? Well, let us take a look at three different situations.

1. To integrate with other systems and/or display data from those systems

Historically there were code. If you wanted to display data from other sources than the tables in the SQL server and the [Organization]_MSCRM database (Common Data Service nowadays) you simply needed to code. For instance, you could have had an iFrame and some HTML and JavaScript behind. Or a plugin or custom workflow and retrieve data which you then added as new records or updated existing records with some more data.

We have had Virtual Entities since 2017 though, which actually could be an alternative to using Canvas Apps and Model-Driven Apps together. Take a look at this blog post from Ivan Ficko in order to read more about that.

You still have the code options. Though you probably would consider creating a Power Apps Component Framework control instead of having an iFrame. However, you also have a low-code alternative – to extend one or several forms and utilize Canvas Apps here instead. I will let you in on how to accomplish this my next blog post. Stay tuned!

2. Display data which is located far away from where you are

Imagine that you have a very complex entity model. Ideally we want to create an entity model which contains all what the customer needs without being way to complex and especially without duplication of data between entities and you want the customer to be satisfied with what can be displayed where.

However, sometimes you run into situations where the customer would benefit a lot from seeing certain data on a form which is simply located too many relations away in order to do this in an easy way. Here we could consider using an embedded Canvas App. If the data you want to display is located just one relation away, have a look at Quick View Forms.

3. Simplify the built-in way of doing things

I can think of a third one. My friend Megan Walker has put together an advent calendar for this year, where different persons give away different gifts for free each day in December. Yesterday Bruce Sithole was behind door number 7 with his gift, which was an example of an embedded Canvas App and you can download it from here. His description of the app is that it lets you create connections between entities in an easier way than when using the built in way of creating connections. Check it out! So I guess this is a third use case – to simplify the built-in way of doing things.

Embedded Canvas App for categorizing tracked e-mails

Actually, I have used this third option. That was when I had the requirement that the customer wanted to categorize tracked e-mails. Tracked e-mails are read-only. At first I looked at Outlook categories, but I could not find a way to use those and get a category from Outlook into the record in the Common Data Service.

Trying to come up with a no-code way to meet the requirement we started to think of flow. I could not really see a solution with few clicks just using a flow though. You would need to type in the category somehow. So we created an embedded Canvas App and then it was possible to type in a category, click on a button and a flow in the background took care of updating the record. After you have typed in a category, it is displayed right above where you set the category.

Please note! You should use a drop down list here instead so that you maintain the control of the categories and not let the users type in whatever they want. That could get messy.

This is what the app looks like in designer mode.

Perhaps you have other suggestions for when to use an embedded Canvas App? Please feel free to make a comment to this blog post.

This was the first blog post of two about embedded Canvas Apps. In my next blog post I will do a deep-dive into setting up an embedded Canvas App which displays data from another data source than the Common Data Service. Stay tuned!

Read more

Embedded Canvas Apps became general available in June this year. Take a look at the announcement.

https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/embed-canvas-app-in-form

https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/embedded-canvas-app-guidelines