Blog

Long time no see here, for I don’t know which time. That’s how it is these days, life kicks in, work kicks in, stuff kicks in, and then time flies and months go between posts here.

I am currently delivering my “Developing Control Add-ins using AL language” workshop at the first pre-conf day of NAV TechDays 2019, and while my group is busy developing their control add-in, I decided to answer the question I got five minutes ago: “can we please have this piece of code”?

So, here it goes. This little trick will allow you to go full screen with your control add-in in BC150. Having a full-screen control add-in is not something that you can do with just setting properties on your controladdin object, but it’s absolutely possible. Also, this is not something you can only do with BC150 – as a matter of fact you can do it in every single version of the Business Central or Dynamics NAV web client (or tablet, or phone client for that matter). However, every single client and every single version has a different overall HTML structure, so this particular trick applies to BC150. It may work on 140, it may work on 160 in the future, but it also may not.

The principle is the same, though: you hide unnecessary screen elements, and you make your control add-in iframe element full width and full height, and that’s it.

This is what your controladdin object must declare:

And then, this is what your control add-in initialization JavaScript code should do (typically you’d put this into your startup script):

function initialize() {
    function fill(frame) {
        if (!frame)
            return;
        frame.style.position = "fixed";
        frame.style.width = "100vw";
        frame.style.height = "100vh";
        frame.style.margin = "0";
        frame.style.border = "0";
        frame.style.padding = "0";
        frame.style.top = "0";
        frame.style.left = "0";
        frame.ownerDocument.querySelector("div.nav-bar-area-box").style.display = "none";
        frame.ownerDocument.querySelector("div.ms-nav-layout-head").style.display = "none";
    }
    
    window.top.document.getElementById("product-menu-bar").style.display = "none";
    fill(window.frameElement);
    fill(window.frameElement.ownerDocument && window.frameElement.ownerDocument.defaultView && window.frameElement.ownerDocument.defaultView.frameElement);
}

And that’s it.

Good luck full-screening!