BUSINESS CENTRAL CONTROL ADD IN

Control AddIns looks like a fantastic solution to integrate a Business Central page with an external responsive Web Application.

The responsive website automatically adapts to the layout thus is fully working both on web client and mobile app for tablets and mobile phones.

The integration is pretty simple, in my scenario I a page includes a control AddIn that embeds a single WEB page. The page exchanges data with a Web Page. The Web Page is responsive and based on a a basic Azure Function.

The control addin allows to easily implement a clean solution that integrates business central pages with external websites.

As shown in figure the business control page implements TRIGGERS, the control addin implements the INTERFACE of the common procedures and events. The WebSite shares those procedures and events with the business central page.

This allow a two ways binding between those two components: the webpage calls the procedures declared in the control add in and implemented in the trigger page.

THE CONTROL ADDIN

The Control AddIn is the most important part of the project and is basically a gateway between the Business Page and the WebSite.

Inside the control add is specified the “StartupScript” which is a special script that the web client calls once the page is loaded.

THE “STARTUP SCRIPT”

The startup script is a normal JavaScript, the magic happens with this method: Microsoft.Dynamics.NAV.InvokeExtensibilityMethod().

In this script is possibile to invoke extensibility (CallBack methods),

What is InvokeExtensibilityMethod… As from official microsoft documentation: “InvokeExtensibilityMethod Invokes an AL trigger on the Dynamics 365 Business Central service on the page that contains the control add-in”

This file acts as “interface” between those two components: the BC page and the WebApp.

Here i declared events and procedures that are “shared” between the control addin and the page:

THE “SCRIPTS” SECTION

The Scripts property can reference both external and local scripts. I added both my local script and the external knockout library.

The knockout library allows me to use later on this way to load the external page: $.ajax({ url: url, xhrFields: { withCredentials: true } )).done(function(data) { $(“#controlAddIn).text(data); });

The local script contains a CallJavaScript method. This method is declared in the previous “StartupScript” and in consequence is accessible from the Business Central Page as I will describe later. This method is called in my webpage to raise events and call a trigger in the bc page.

THE “PAGE”

The control add-in is placed in the page.

There are two triggers in the page.

Those two triggers have the same signature as in the control add-in.

THE AZURE FUNCTION

The Azure Function returns an HTML5 page.

It contains three content files , those file are read, combined and sent back as an http response.

The interesting part is in the javascript that is called on the OnClick Event of the button.

The javascript function invokes PostToBc() and consequently the trigger in bc is raised.

IFRAME PROBLEMS

As I described on my other article, the iframe solution is not really the best one because this piece of code:

window.parent.document.CallJavaScript(‘OnBcPageCallBack’, [json]);

Does not work and cross site scripting is blocked by default by modern browsers.

https://businesscentraldotblog.wordpress.com/2021/02/28/control-add-in-in-business-central-why-iframes-are-not-a-good-idea/

Thus I used another solution to embed an external static resource on my BC page:

I first included: ‘https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js’,

Then I loaded the page with this AJAX function

$.ajax({ url: url, xhrFields: { withCredentials: true } )).done(function(data) { $(“#controlAddIn).text(data); });

SOURCES

Source codes are available:

Business Central Extension: https://github.com/avalonit/ExBcMarameoProdManager

Azure Function WebSite https://github.com/AlbertoValentiVaprime/AzWebMarameoProdManager

REFERENCES

Roberto Stefanetti and Vjieko Control addins

BUSINESS CENTRAL CONTROL ADD-INS

A couple of AL controladdin demos – Google Maps and Tic Tac Toe

https://github.com/vjekob/TicTacToeAL

LAST UPDATED

26th of February, 2021