Last year, I published a series of blog posts sharing our lessons learned when developing business-savvy JavaScript add-ins for Dynamics NAV. With this series, I aimed at giving developers some best practices that we gained when creating our Visual Production Scheduler as fully-integrated JavaScript add-in for Microsoft Dynamics NAV. One of these posts dealt with the issues that you face when trying to resize JavaScript add-ins in the Dynamic NAV web client at runtime. Well, times change and so does Dynamics NAV. With the recent release of NAV 2016, things have changed a little bit and hence here is an update of this tip.
The initial challenge
In particular, the height adjustment of an add-in while resizing the NAV client window turned out to be difficult. We wanted the JavaScript add-in for Dynamics NAV to use as much of the space as possible in order to have the best possible usage of the screen. But adjusting the add-in height properly required the use of a tricky algorithm.
The basic idea of that algorithm is to determine first the needed space – we call it the “rest” – above and below the control add-in. We manage this by stretching the add-in to a huge firm value and then retrieving the scroll height of the container. At last, the available height can be calculated by subtracting the rest from the scroll height. This approach is working fine with NAV 2013 R2 as well as with NAV 2015.
What changed with Dynamics NAV 2016
It is substantial to that idea to find the correct scroll container, which is a DOM element outside the <iframe> element containing the add-in. Well, as of NAV 2016 the structure of the DOM document has changed. The scroll container of interest no longer exists. This is why we had to find a new approach to make our Visual Production Scheduler JavaScript add-in work.
What does the trick in Dynamics NAV 2016
We found out that there is a new element that is identifiable by its CSS class name “ms-nav-scrollable”. This element is available in the NAV Windows client as well as in the Web and the Tablet client of NAV and we can use it instead of the above mentioned scroll container. The following code snippet shows you our new approach:
Have a better idea? Let me know.
I hope this short info will help you, if you also have to achieve an intelligent resizing of JavaScript control add-ins in Dynamics NAV 2016. And perhaps you have a smarter solution, which you would like to share with us.
What you can do next
Have clients, who require a visual planning board for their manufacturing orders, and who want to see this planning board consistently across all devices? Here is the good news: you do not need to develop this for them. It already exists and we are happy to share and collaborate.
