Meta UI Control Add-Ins for Business Central, how and why…

Today we’ve successfully completed a workshop at Vos Transport with Global Mediator where we did a demo/prototype of a new user interface defined on metadata embedded in Microsoft Dynamics NAV using client add-ins.

We’ve been working on preparing this workshop for over 12 months and I am very happy and proud of the result.

Client Add-Ins

Within Microsoft Dynamics NAV, client add-ins have been possible for a long time, yet not a lot of partners have picked up the technology except for edge cases such as Point of Sale and Rich Text Editors.

The problem we are trying to solve for Vos Transport is giving insight in the data to the users of the planning system. This is a customized part of their NAV system but you could compare it to Manufaturing or Service order scheduling challenges.

For many years we’ve struggled with the limitations of the NAV user interface such as lack of drag and drop, resizable rowheigts, conditional coloring, concattenating columns and double/right mouseclick events.

On top of that we wanted visual insights in the planning using either time lines and/or visual components in maps with modern options like heatmaps.

I’ve seen other partners build external components for this, mostly using Web Services but I’ve never felt comfortable with these since they make navigating back and forth to NAV very hard.

Flexible & Low-Code

Even though I am proud of our internal IT department at Vos, we cannot take the responsibilty of creating our own UI for something like this, and even if we could, we lack the in-house skills for such a level of front end development.

This is why we started to talk with Global Mediator to build a brand new Page Designer that allows a new level of UI flexibilty in NAV/Business Central.

The goal is that any NAV Admin person can configure these pages without any knowledge of complex frameworks. Just a little knowledge about the NAV datamodel, basic HTML and JavaScript will sufice. The later only for conditional formatting to create simple boolean expressions.

The Result

In essence the Meta UI tool allows you to convert any list page in NAV to a new format where any formatting rule can be applied, rows can be concattenated, pyjama printing can be applied and if you want, one column can be rendered as a representation of a time line.

The tool allows expandable subpages where multiple rows can be expanded at the same time allowing us to drag and drop for example a sales line from one sales order to another sales order.

Microsoft Graph API & JavaScript Add-Ins

The technology used behind the scenes are the new Microsoft Graph API and JavaScript Add-Ins. Both introduced in NAV2018 making that the “oldest” version to support the Meta UI.

If you want to build a Meta UI page on a cusomised table you need to generate the API definition which will automatically be added to the endpoint by the NAV framework.

Next Steps

The Meta UI will be taken into production this weekend and roled out for a few pilot users to give feedback, especially about the performance.

In September we will evaluate the experience and define if the tool will be implemented accross the whole company in all our offices across Europe.

Roadmap

We’ve already started the scope for the next project using the Meta UI tool which will include an HTML editor and a PDF viewer which is going to help us convert orders we receive in PDF format more automatically.

Are you interested?

Now that we’ve proven the technology and moved the first customer into production we want to talk to other NAV/Business Central partners who have the same need for a more advanced grid component, map controls, PDF viewers or HTML editors. Maybe you will challenge us to add more components to the toolbox.

It requires a minimal learning curve to get started and shows great results very quickly.

I will share some screen shots very soon as we will do some clean up first based on the workshops feedback.