Technology Management Web Panel Add-in.

Part II – NAV 2015 Windows and Web Client custom controls.

In my last blog describing the Technology Management On-Screen Keyboard Add-in I promised to come back with another one about adding custom controls to Microsoft Dynamics NAV 2015 Web and Windows clients which I will be covering below.

I think most developers have been faced with the situation when there was a need to force the control to behave or look in a certain way. It used to be quite easy in previous versions of Dynamics NAV: place the control where you want, set the font, size and colours. It is not as easy any more. You would need an Add-in to achieve that today. And even though there are number of blogs and posts throughout the NAV community describing how to create an Add-In like that, it will still require a fair amount of time to develop one from scratch. And this in itself is usually a valid reason to tell the customer ‘No, I am afraid we cannot do that’ and try to persuade them to use a workaround.

But what if ‘No’ is not an option? What if it is critical to have this indicator, or a big red button right in the centre of the screen?

Well, in this case you will have to do the following:

  1. Create a C# class library object to hold the interface Add-in to establish communication between NAV C/AL and the JavaScript Control Add-in, sign, compile it and copy the resulting .dll into the Dynamics NAV Service and Client Add-in folders (you do not really need to put the .dll into the client folder when you will be deploying the solution, but it is critical when you develop). The code itself is nothing very clever, something like that:

    using System;
    using Microsoft.Dynamics.Framework.UI.Extensibility;
    using Microsoft.Dynamics.Framework.UI.Extensibility.WinForms;

    namespace Microsoft.Dynamics.Framework.UI.Extensibility
    {
       public delegate void WEBApplicationEventHandler(string msg);
    }
    namespace TestWebPanel
    {
       [ControlAddInExport("MyWebPanel")]
       public interface IWebPanel
       {
          [ApplicationVisible]
          event ApplicationEventHandler ControlAddInReady;
          [ApplicationVisible]
          void BuildHTML (string html);
          [ApplicationVisible]
          event WEBApplicationEventHandler SendMsgToNAV
       }
    }

    Each event will be exposed to NAV and will be visible as a trigger within the page containing the Add-in like below.

    Triggers

    If you do not see those after adding the control add-in to the page, then there is something wrong with the .dll.

    The void represents the JavaScript function that can be called from within NAV by reference by its name like CurrPage.TestPanel01.BuildHTML(xxx) where TestPanel01 is the name of the Add-In control, and the BuildHTML is the function declared in the JavaScript code below. In essence the C# object we create is a bridge between NAV and the JavaScript.

  2. Create a JavaScript file containing core communication functions to:

    – Notify NAV that the control is ready:

    function Initialize () {
       Microsoft.Dynamics.NAV.InvokeExtensibilityMethod("ControlAddInReady",null);
    }

    – Nest desired HTML code into the page:

    function BuildHTML(html){
       document.getElementById("controlAddIn").innerHTML = html;
    }

    – Communicate feedback back to NAV. In this example the function will tell NAV which control is calling and its new value (for example to call relevant field validation logics).

    function callNAV(controlId,passValue){
       message = passValue?(document.getElementById(controlId).value):””
       navMsg = "<control>";
       navMsg += "<id>" + controlId + "</id>";
       navMsg += "<value>" + message + "</value>";
       navMsg += "</control>";
       Microsoft.Dynamics.NAV.InvokeExtensibilityMethod(‘SendMsgToNav’,[navMsg])
    }

  3. Ensure the Manifest.xml file is set to allow resizing so that the HTML panel we build could be rendered.


    <VerticalStretch>true</VerticalStretch>
    <HorizontalStretch>true</HorizontalStretch>

  4. Register the Control Add-in in NAV.
  5. Add the Control Add-in to the page.
  6. Add C/AL code describing your control (basically build an HTML content of your Control Add-in) and pass it to the Control Add-in through relevant JavaScript function call (CurrPage.TestPanel01.BuildHTML(HTML), where HTML is a BigText variable containing the HTML description of the control or controls to add).
  7. Add the C/AL code to the ::SendMsgToNAV trigger to process the call from the Add-in.

It is obvious that even as condensed as possible, this is quite an endeavour if all you need is a big red button, or an indicator.

Our Web Panel Add-in allows C/AL developer to add a fully customizable control to a NAV page in pretty much the same manner described above but in a simplified way.

  1. Copy the .dll into the folders and import the objects.
  2. Run the installation routine which will register the Add-in.
  3. Add the Add-in to your page and add a control with a single line of code which will not require any HTML or Add-in knowledge what so ever.

This generic Add-in consists of the same three major parts:

– Functions and libraries containing HTML control definitions;
– JavaScript functions that nest the HTML code into the page and ensure communication between HTML control and NAV;
– C# interface allowing NAV to communicate with above JavaScript functions.

It already contains a number of functions that will allow you to create controls without having to develop your own HTML code and these libraries are being extended with every release.

So, whether it is a green/red indicator, ribbon of bespoke buttons or a role-centre-alike KPI panel hanging from the office ceiling – they can all be added using our Web Panel Add-in. And if you feel adventurous, you are most welcome to create a similar Add-in yourself, as now you should have everything you need for it.

Some useful external resources that might help enthusiasts are:
https://msdn.microsoft.com/en-us/library/dd983804%28v=nav.80%29.aspx
http://vjeko.com/categories/control-add-ins

Leave a Reply