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

Technology Management Web Panel Add-in.

Part I – NAV 2015 Web Client Onscreen Keyboard.

I believe we all love Microsoft Dynamics NAV and appreciate all the cool things you can do with it. There are some gaps though. One thing that has drawn my attention is the fact that it is, actually, quite inconvenient to work with data entry for devices having no keyboard attached (for example a touch-screen on a shop-floor, or a tablet device). You can bring the onscreen keyboard provided by the Operating System (if any), but this would force you to always call the keyboard to appear, or even keep it on the screen. Anyhow, as a result your screen might look something like this:

DefaultOSKeyboard 

Above image is Microsoft Dynamics NAV 2015 Web Client Purchase Orders screen on 14’’ touch-screen laptop with Microsoft Windows Onscreen Keyboard. Obviously this is not a very convenient way to work.

This is why here at Technology Management we have decided it is a good idea to create something to address this. We came up with a slick and fully customisable solution for an onscreen keyboard for the Microsoft Dynamics NAV 2015 Web Client. The Add-in enables the Web Client to accommodate the user with a keyboard layout depending on the control the user is going to input data in. Below is the same screen but with Tecman Web Panel Onscreen QWERTY keyboard.

TecmanOSqwerty TecmanOSqwerty.2

If you ask me, this is a way better option. It is nice, neat and appears only when I focus on the editable field. The onscreen keyboard dimensions and content are fully customisable. You can create an unlimited number of your own keyboard layouts if you need to and a single page can host multiple keyboard layouts depending on your needs. For example, the page above has another on-screen keyboard attached to work with quantities (see the screen below with the Tecman Web Panel Onscreen num-pad). The Add-in will tell the Web Client which keyboard layout to show in which case making the data entry quite intuitive and user friendly.

clip_image006TecmanOSDecimals.2

All the keyboard layouts defined are stored within Microsoft Dynamics NAV. You do not need to deploy any additional components anywhere. Just follow the standard Add-in installation routine on the Microsoft Dynamics NAV server and you are ready to go.

There is more functionality available within the Web Panel Add-in, but I will cover this in the next part of this blog. Spoiler alert: It will be dedicated to creating ‘classic’ style page controls (dimensions, positioning, font styling – everything many classic Microsoft Dynamics NAV users are longing for).

Brief Q&A

How does Web Panel – Onscreen Keyboard work?

Without going deep into details, the Add-in creates JavaScript code and injects it into the Web Client page. The JavaScript core code contains the library for building the onscreen keyboard of any layout as well as the keyboard definitions and attachment instructions (generated at runtime by Microsoft Dynamics NAV page).

How much development is involved to attach it to a page?

It does not take long at all. All you need is to add the Add-in control to the page (as always) and write several lines of code to let it know which keyboard layouts to attach to which controls.

Does this affect the Windows Client?

The Add-in does not affect your Windows Client. This means that you do not need to create any separate pages to utilise the Add-in.

Can I have it in my Windows Client?

I am afraid you cannot (at least at this point). Windows Client has no HTML content the web Panel Add-in Onscreen Keyboard element could interact with.