JavaScript and AL. The regular expressions example.
Views (2605)
Jalmaraz
669
Like
Share
ReportIt wasn´t the goal, but I notice how easy is to execute a JavaScript in AL and interact each other.
I think too, this wasn´t Microsoft intention when they create add-ins for Visual Studio Code AL, but could be useful:
1 To replace DOTNET.
2 Extend AL with JavaScript and navigator features.
Example steps.
The AL project will do this feature:
- Input a regular expression pattern in a text box.
- Input a string in another text box.
- Place an action button to check if the string match with the pattern using JavaScript regular expressions. Put the result (true or false) in another text box.
The steps are:
1 New Al project.
2 Create a script in the same project workspace of AL files.
3 Declare an add-in in AL.
4 Use the add-in in a AL page.
Step 1 create AL project.
Almost nothing to say about that open Visual Studio Code, F1 and “AL: GO!”. The I choose “Cloud Sandbox”. Open a new AL project this way: https://community.dynamics.com/nav/b/conceptsindailynavisionwork/archive/2018/10/07/customizing-saas-and-the-end-of-developer-partner-license
Step 2 Create a script in a “RegularExp.js” file.
The JavaScript function create a new regular expression, and build a new object “Result” with:
- Pattern.
- Evaluated string.
- Test. Test is a JavaScript statement that returns if an expression matches with regular expression pattern.
The last statement “InvokeExtensibilityMethod” calls back to AL code.
function TestRegualarExpresion(PatternString="",EvaluatedString="") {
var MS365RegExp = new RegExp(PatternString);
const Result = {"Pattern": PatternString,
"EvaluatedString": EvaluatedString,
"TestPassed": MS365RegExp.test(EvaluatedString)};
Microsoft.Dynamics.NAV.InvokeExtensibilityMethod('AfterEvaluateString', [Result]);
}
Notice that you can create the script in the same folder, but it hasn´t to be that way. When we create app file, this JS is embedded in the bin file:
Not required any additional library to do this. In my laptop, I have only Visual Studio code, and AL code extension. I haven´t any local D365 instance, neither dockers. I will publish the app in SAAS environment.
Most interesting stuff: we define at the end a callback to AL. In the event we set a dynamics AL function to be called: “AfterEvaluateString”.
Step 3. Declare new Add-in (file “AddinRegExp.al”).
controladdin RegularExpresionTest
{
Scripts = 'RegularExp.js';
event AfterEvaluateString(Result: JsonObject)
procedure TestRegualarExpresion(PatternString: Text;EvaluatedString: text)
}
The “.js” file could be in the same workspace, or not. Even it could be in the web and be referenced with an URL. Will be compiled and included in .app file, with AL code.
We are making here a bridge between AL app and JavaScript functions and events, with their parameters (AfterEvaluateString and TestRegualrExpresion).
Here we have documentation about add-ins: https://docs.microsoft.com/en-us/dynamics365/business-central/dev-itpro/developer/devenv-control-addin-object
Step 4 New AL Page.
page 50120 "Evaluate Regular Expresions JS"
In the new Page we create an add-in control:
usercontrol(RegularExpresion; RegularExpresionTest)
{
ApplicationArea = All;
}
We put an action that calls “TestRegularExpresion” JavaScript function:
action(RegularExpTest)
{
Caption = 'Test Expression';
ApplicationArea = All;
trigger OnAction()
begin
CurrPage.RegularExpresion.TestRegualarExpresion(PatternString, StringToEvaluate);
end;
}
The two parameters of function call are text global variables.
We came back to user control in AL page and put inside the trigger process to callback from JavaScript. The trigger “AfterEvaluateString” is the function that JavaScript call in InvokeExtensibility statement:
usercontrol(RegularExpresion; RegularExpresionTest)
{
ApplicationArea = All;
trigger AfterEvaluateString(Result: JsonObject)
var
MatchToken: JsonToken;
begin
Result.SelectToken('TestPassed', MatchToken);
MatchToken.WriteTo(TestPassed);
end;
}
I cloud write this code before(I did it in fact), but I come back to add-in control for didactic purposes. This code takes a Json object from JavaScript and put the result to a global text variable “TestPassed”.
Call flow recap.
AL page action execute a JavaScript function:
trigger OnAction()
begin
CurrPage.RegularExpresion.TestRegualarExpresion(PatternString, StringToEvaluate);
end;
JavaScript function “TestRegularExpresion” runs and at the end callback AL page with this statement:
Microsoft.Dynamics.NAV.InvokeExtensibilityMethod('AfterEvaluateString', [Result]);
AL page process the trigger in the add-in control:
usercontrol(RegularExpresion; RegularExpresionTest)
{
trigger AfterEvaluateString(Result: JsonObject)
The bridge between JavaScript and AL is the add-in declaration:
controladdin RegularExpresionTest
{
Scripts = 'RegularExp.js';
Testing.
We have in the page tree text boxes:
Pattern: defines the regular expression that evaluate the next string.
String to check: A string to be checked with regular expression filled above.
Match: Result of JavaScript test match.
In the example we write the Spanish VAT number pattern for legal person “\d{1,8}\D{1}” (8 digits followed by a single alphanumeric), push action “Test expression” and the result is true.
Conclusion.
I am very amazed by the ease with JavaScript and AL can work together, without additional resources.
Only using add-in we have a very strong integration.
Comments
-
Good evening Antonio, you are wellcome. You don´t need any dotnet to do this. The regexp library is Javascript native, and you only need the Internet browser. Notice, that I am deploying this in a SAAS. It is only an exercise, because on Premise and even C/SIDE you already have a Regular expression management in "Type Helper" Codeunit. Care a lot yourself and yours!!
-
Hi Jalmaraz. First I wanted to thank you for this blog. I've been looking for information for how to add dotnet in BC on cloud with javascript for a while and it's the only thing I've seen that can help me. The only thing that is not clear to me is how I would add the dotnet dll to use it. Would I have to pass the name of the dotnet in the PatternString variable such as PatternString = '' System.Xml.XmlDocument "or would this not work for what I need? Greetings and thanks.
*This post is locked for comments