A responsive Canvas App in a Model Driven Form (fix the height)

table of contents

Problem description

I wanted to track hours and other costs in a Model-Driven-App form of a project (to generate an invoice for a customer). The process is a little more compicated than just typing in some values. There shpuld happen some logic after selecting an expense type from a dropdown and I wanted to immediately trigger some calculations after submitting my values.

That would get really complicated inside a normal Form, so I decided to embed a Canvas App into the form. You'll find the official MS docu to do this here: embed canvas app in form.

Display settings for a responsive canvas app

I wanted to create a nice User Experience, so I created a responsive canvas app. This way the table in the Canvas App could fill the whole space on FullHD, but also on Laptops with a different resolution.

Works, BUT there is a scrollbar that nobody ordered

We may have achieved our desired outcome, but unfortunately, a scrollbar has appeared on the side. This means that our items can be scrolled off the screen if we scroll down all the way. Let's find out how to fix this issue and get rid of the scrollbar!

The Plan

I used the dev tools of my browser to locate the problem in the DOM. I found it ~10 divs deep into the page. There is a div with an inline-style that sets the height. After some tests it was clear that this value simply needs to be at "height: 100%". After changing this the responsive app works as expected.

Doing this in the dev tools of your browser is one thing, doing it inside a Model Driven App is a totally different ball game! Let's inject some CSS into our Form!

Founr the problem div - the form sets the height to < 2000 px

Create a JavaScript Web Resource

If you have never created a JavaScript Web Resource for a Form (like me), you should follow this walk-through on MS Learn.

Also this forum entry by Pannir Selvam helped a ton in writing the needed JavaScript to implement a CSS style sheet.

This is the final code of my JS Web Resource (make sure to exchange the name of the CSS Web Resource we will build in a second):

 var Example = window.Example || {};
(function () {

    // Change height of element
    this.loadCSS = function () {

        var path ="../WebResources/*logicalNameOfCssWebResource*";
        var head = window.parent.document.getElementsByTagName('head')[0];
        var link = document.createElement('link');
        
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = path;
        link.media = 'all';
        
        window.parent.document.head.appendChild(link);  
    }

}).call(Example);

Create a CSS Web Resource

Now we need some CSS to inject the new height to the right div. As you can see in the picture the div has a very long id. I'm afraid, that after moving the app from DEV to PROD the id will change. So we better try another way to locate the div.

Instead of selecting the div directly, we are looking onto the parent div with the class Canvas.CanvasControl and then select the child divs of that class.

The parent div has some unique classes that should only target an embedded Canvas App

The CSS to target our div looks like this (the "\" is to escape the "." in the class name):

 .Canvas\.CanvasControl > div {
    height: 100% !important;
}

Create a CSS Web Resource with the code and copy the logical name into the code of your JavaScript Web Resource.

Execute the JavaScript function in the Model Driven Form

Now we simply need to call the function when the Form loads. If you have followed the MS learn tutorial I linked this will be no problem.

• Open the Form in Edit Mode
• Select your Form
• Switch to "Events"
• Add the library from your Web Resources
• Make sure you selected "OnLoad"
• Enter the name of your function

How to set up your event

The Result

Now we can finally unleash the Power of our responsive Canvas App embedded into the Model Driven Form WITHOUT the unnecessary scroll bar!

Now the embedded app works perfectly on different window sizes