BUSINESS CENTRAL CONTROL ADD-INS

BUSINESS CENTRAL CONTROL ADD-INS

Control add-in

A “control add-in” is a custom control for displaying and modifying data within an iframe or a page. For example, a control add-in can display the content of a webpage, visualize data as a chart or on a map, or host a custom web application. Control add-in can respond to user interaction to raise events that execute additional AL code.

Control add-in properties

In the control add-in definition, you must set the Scripts property to include scripts in the control add-in; the scripts could be local files in the package or references to external files using the HTTP or the HTTPS protocol.

With the StartupScript property, you can call a special script that runs when the page you have implemented the control add-in on, is loaded. These settings initialize the control add-in. With the Images and StyleSheet properties, you can specify additional styling to the control add-in.

Example

This simple example is taken from Microsoft, just to explain how an Addin works; below is a nice example always useful (Tic Tac Toe Addin)

Objects in this example

• Controladdin
• Page
• jsScripts
• Stylesheets
• Image

CONTROL ADD-IN DEFINITION

This controladdin object is then invoked as a usercontrol on a page called “TestPageWithAddIn”

CONTROL ADD-IN OBJECT

controladdin SampleAddIn

{

}

You can set several properties to the object, ex. you can resize the Addin Object

Example

RequestedHeight = 200;

MinimumHeight = 400;

MaximumHeight = 300;

Etc. etc.

Scripts

Scripts, Stylesheets and images can always be set from the Addin

In the body of the Addin you can define Procedures and Events (only declarations containers)

procedure CallJavaScript(i: integer; s: text; d: decimal; c: char);

event CallBack(i: integer; s: text; d: decimal; c: char);

PAGE “TestPageWithAddIn”

From this page we recall the functional logic through User Control and OnAction Trigger

USERCONTROL

Trigger CALLBACK()

OTHER FILES

Some js files usable by the Addin are these:

main.js

In main.js code, there should be a global function

CallJavaScript(i,s,d,c) {Microsoft.Dynamics.NAV.InvokeExtensibilityMethod(‘CallBack’, [i, s, d, c]);}

startup.js

in startup.js you can invoke extensibility (ex CallBack Method)

“InvokeExtensibilityMethod Invokes an AL trigger on the Dynamics 365 Business Central service on the page that contains the control add-in”

Microsoft.Dynamics.NAV.InvokeExtensibilityMethod(‘CallBack’, [42, ‘**TESTING INKOVE – ON_OPEN**’, 5.8, ‘c’])

other example

var map = new VEMap(‘controlAddIn’);

map.onLoadMap = function () {

var arguments = [map.GetCenter()];

Microsoft.Dynamics.NAV.InvokeExtensibilityMethod(‘MapLoaded’, arguments);

};

map.LoadMap(…);

https://docs.microsoft.com/en-us/dynamics365/business-central/dev-itpro/developer/methods/devenv-invokeextensibility-method

skin.css (sample)

You can define the Stylesheet CSS

script.js

The definition can be local or can be defined within the Addin control

Scripts

https://docs.microsoft.com/en-us/dynamics365/business-central/dev-itpro/developer/properties/devenv-scripts-property

** TESTING CONTROL ADD-IN

GitHub Link:

https://github.com/rstefanetti/AL-Samples/tree/Addins

A nice Game here!  by Add-in – Tic Tac Toe by Vjeko

https://github.com/vjekob/TicTacToeAL

A nice and complete article by Simplanova here:

https://simplanova.com/blog/step-by-step-guide-to-javascript-control-add-in/

Microsoft DOCS

https://docs.microsoft.com/en-us/dynamics365/business-central/dev-itpro/developer/devenv-control-addin-object

https://docs.microsoft.com/en-us/dynamics365/business-central/dev-itpro/developer/devenv-control-addin-style

L'articolo BUSINESS CENTRAL CONTROL ADD-INS proviene da Roberto Stefanetti Blog - Microsoft Dynamics 365 Business Central.