There are tons of examples and tutorials on the internet on how to embed a Canvas App in a Model Driven App Form. Embedding a “full-screen” Canvas App in a Model Driven App however, wasn’t something that seemed to be documented before. See below gallery for a side-by-side comparison of the two “flavors” of embedding a Canvas App.
In this blog post I will show you step by step on how to “full-screen” embed your Canvas App in a Model Driven App.
Part of creating a Model Driven app is the configuration of the Sitemap (or more easily set, configuration of the menu). A Sitemap consists out of Area(s), Group(s) and Sub Area(s).
Sub Areas are the actual menu items that you can use for navigation. The idea would be to navigate to our Canvas App using a Sub Area. When you add a new Sub Area, you will need to define the navigation type. The supported navigation types of Sub Area are:
- Web Resource
Dashboard and Entites are most commonly used. Using the navigation type URL and directly navigate to our Canvas App works, but this opens the app in a new window. Not ideal. Web Resources to the rescue!
Create a Web Resource
Let’s start by explaining what web Web Resources are. According to Microsoft’s documentation:
Web resources are virtual files that are stored in the Common Data Service database and that you can retrieve by using a unique URL address.Microsoft Docs
Now, let’s create our Web Resource. Creating a Web Resource can be done from within a solution. Navigate to a solution and select New > Other > Web resource.
Give the Web Resource a meaningful name and display name. Best practice is to use a virtual folder path structure in your name (e.g. “/entities/contact/mainForm.js”). But in this example, we will keep it simple and go for “/canvasapp.html”. Select the Type Webpage (HTML) and click the Text Editor.
Copy paste below code in the editor:
Modify the Sitemap
Final step is to modify the Sitemap of your model driven app. Create a new Sub Area and provide the following settings:
- Type: Web Resource
- URL: dyn_/canvasapp.html (replace dyn_ with your own prefix)
- Title: Canvas App
Click save, publish and refresh your model driven app. By navigation to the Sub Area, the Canvas App should start loading full-screen:
Embedding a Canvas App in a full-screen fashion in a Model Driven App is not as easy as embedding it into a Model Driven Form. But given Microsoft’s strategy to end up with a single maker experience, I assume that this process will be less of a hassle in the future. Maybe by introducing a new navigation type of Sub Area, “Canvas App”? Anyone from Microsoft reading? 🙂 But at least we already have a way of achieving this behavior today!
10 thoughts on “Embed a Canvas App in a Model Driven App (full-screen)”
I am not able to share this with other users.
I have followed Microsoft documents for publishing the PowerApps.
Can you please help with steps to share with other users.
To share a canvas-app, please check this article: https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/share-app
This looks fantastic, but I couldn’t get it to work
Where did you get stuck?
Sorry – didn’t see this reply. I get a blank screen when I play the Model Driven App. I also get a blank screen when I go directly to the web resource link.
Does your Canvas App work on mobile within the Dynamics app?
Yes! Using the Power Apps mobile app at least (supports model driven apps for a while now). The Dynamics mobile app I haven’t tested.
Great idea. Thanks!
However, according to the documentation, this solution is not fully supported:
“The Xrm object isn’t available in HTML web resources. Therefore, scripts containing Xrm.* methods aren’t supported in HTML web resources. parent.Xrm.* will work if the HTML web resource is loaded in a form container. However, for other places, such as loading an HTML web resource as part of the SiteMap, parent.Xrm.* also won’t work.”
Loading the parent from the SiteMap seems to work now, but as long as it is not fully supported in the documentation I would be cautious in using it in production environments
How do we open canvas app from the button instead of from sitemap. I have created Jscript web resource and also html webresources. I have called the html webresources in the Jscript. I am not sure how to pass the canvas App in html page? I used smart button solution but it has lot of issues so please any pointer is appreciated. thanks. Vinod