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!