Home
Dynamics 365
Dyn365CE
Embed a Canvas App in a Model Driven App (full-screen)

Embed a Canvas App in a Model Driven App (full-screen)

Jonas WautersDyn365CE5 years ago84 Views

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

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.

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:

<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:

Type: Web Resource
URL: dyn_/canvasapp.html (replace dyn_ with your own prefix)
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!