wauters

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.

  • Canvas App embedded in a Model Driven Form
  • Canvas App embedded in a Model Driven App (“full-screen”)

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.

Sitemap

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).

The Sitemap designer on the left and the result on the right

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:

  • Dashboard
  • Entity
  • Web Resource
  • URL

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

In a Model Driven app, Web Resources are most commonly used for storage of icons or custom JavaScript. A Web Resource can also be a complete HTML page. Knowing this, we could create our own HTML page which contains an embedded Canvas App. We will be using the exact same technique like we use for embedding of a Canvas App in a website or portal (source), by the use of iFrames.

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.

Creating a new 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.

Creating an HTML Web Resource

Copy paste below code in the editor:

<html>
<style>
    body {
        margin: 0;
        overflow-wrap: break-word;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        z-index: 999999;
    }

    iframe {
        display: block;
        background: #000;
        border: none;
        height: 100vh;
        width: 100vw;
    }
</style>
<script type="application/javascript">
    if (typeof Xrm === "undefined") {
        var Xrm = parent.Xrm;
    }
    let appName = "{Your App Name Here}";

    //Get Canvas App ID by name
    Xrm.WebApi.retrieveMultipleRecords("canvasapp", "?$select=canvasappid,tags,appversion&$filter=name eq '" + appName + "'", null).then(
        function (entities, nextLink) {
            //If Canvas App found
            if (entities.entities.length) {
                let canvasAppId = entities.entities[0].canvasappid;
                let appUrl = `https://apps.powerapps.com/play/${canvasAppId}?source=modelDrivenApp&screenColor=rgba(239,243,246,1)&CID=3`
                //Update iFrame source
                document.getElementById('embeddedCanvasApp').src = appUrl;
            }
        }, function (error) {
            console.log(error);
        })
</script>

<head>
    <title>Canvas App</title>
</head>

<body>
    <iframe id="embeddedCanvasApp" style="background: #FFFFFF;" src="" allow="geolocation; microphone; camera">
    </iframe>
</body>

</html>

This JavaScript basically retrieves the Canvas App Id and sets the right URL as source for the iFrame. Change where it says “{Your App Name Here}” (line 32) to the logical name of your Canvas App that you would like to embed. The logical name can be found in the solution explorer:

Getting the logical name of your canvas app

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:

  1. Type: Web Resource
  2. URL: dyn_/canvasapp.html (replace dyn_ with your own prefix)
  3. Title: Canvas App
Creating and configuring a new Sub Area navigating to a Web Resource.

Click save, publish and refresh your model driven app. By navigation to the Sub Area, the Canvas App should start loading full-screen:

Canvas App loading in a full-screen fashion

Conclusion

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)”

  1. 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.

    Reply
  2. Pingback: Embed a Canvas App in a Model Driven App (full-screen) - 365 Community

      1. 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.

        Reply

    1. 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.

      Reply

  5. 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.”

    https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/reference/xrm-navigation/openwebresource

    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

    Reply

  6. 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

    Reply

Leave a Reply