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(…);
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
** 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
Are you available to work on a control add in project ?