Exercise - Build a control add-in object - Training

12 minutes

Scenario

To test your newly learned skills on control add-ins, you want to show the customer name, email, and phone number in a control add-in that is displayed on the Sales Invoice page.

Tasks

Build a control add-in.
Host the control add-in in a CardPart.
Send data to JavaScript.
Use JavaScript to display the information.

Steps

Start Visual Studio Code.
Select View > Extensions (Ctrl+Shift+X).
Enter AL Language in the Search Extensions in the Marketplace search box.
Select the green Install button.
Create a new AL extension project. Select View > Command Palette... (Ctrl+Shift+P).
Enter AL: Go! in the search box and select the command from the list.
Accept the suggested path (or enter another path).
Select the 4.0 Business Central 2019 release wave 2 target platform.
Select Microsoft cloud sandbox as the development endpoint.
Download the application symbols. Select View > Command Palette... (Ctrl+Shift+P).
Enter AL: Download symbols in the search box and select the command from the list.
If requested, provide your organizational credentials (Microsoft 365 account/Microsoft Entra ID account).
Open the app.json file and change the name setting to Customer Info. Change the publisher setting to Cronus International Ltd.
Remove the HelloWorld.al file.
Create a new file with the name CustInfoCtrl.al and use the tcontroladdin snippet. Change the name in the snippet to Customer Info Control.
Include jQuery in the scripts property.

https://code.jquery.com/jquery-3.4.1.min.js
Create a new file with the name CustInfoCardPart. Use tpage to create a new page. Set the PageType property to CardPart.
Set the SourceTable to Customer.

In the layout section, add a usercontrol in the content area that hosts the control add-in object.

layout
{
    area(Content)
    {
        usercontrol(CustInfoCtrl; CustInfoCtrl)
        {

        }
    }
}

Create a new file with the name SalesInvoiceExt. Use the tpageext snippet to create a page extension. Extend the Sales Invoice page.

Add a part that will host the CustInfoCardPart to the FactBoxes area. Connect the part by using the SubPageLink property. Use Bill-to Customer No.

layout
{
    addfirst(factboxes)
    {
        part(CustInfoCardPart; CustInfoCardPart)
        {
            SubPageLink = "No." = field("Bill-to Customer No.");
        }
    }
}

Create a local procedure called GetCustomerInfo on the CardPart page.

Build a JsonObject with the name, email, and phone number of the current record. Pass the JsonObject to the control add-in.

local procedure GetCustomerInfo()
var
    custInfo: JsonObject;
begin
    custInfo.Add('name', Rec.Name);
    custInfo.Add('email', Rec."E-Mail");
    custInfo.Add('phone', Rec."Phone No.");
    CurrPage.CustInfoCtrl.GetCustomerInfo(custInfo);
end;

Create a trigger called OnAfterGetCurrentRecord on the CardPart page. Call GetCustomerInfo in that trigger.
Create a procedure called GetCustomerInfo in the control add-in. Add a JsonObject as parameter, but don't add any code.
```
procedure GetCustomerInfo(CustInfo: JsonObject)
```
Create a JavaScript file with the name start.js.

Add the following code:

var controlAddIn, nameDiv, phoneDiv, emailDiv;
controlAddIn = $("#controlAddIn");
nameDiv = $("
", { id: "nameDiv" });
phoneDiv = $("
", { id: "phoneDiv" });
emailDiv = $("
", { id: "emailDiv" });

controlAddIn.append(nameDiv);
controlAddIn.append(phoneDiv);

window.GetCustomerInfo = function(custInfo) {
controlAddIn.append(emailDiv);
nameDiv.html("Name: " + custInfo.name);
phoneDiv.html("Phone: " + custInfo.phone);
emailDiv.html("E-mail: " + custInfo.email);
}

Open the control add-in and set the StartupScript property to start.js.
Remove the Stylesheets, RecreateScript, RefreshScript, and Images properties.
Remove the event and procedure that was created by the template.
Publish your extension to the sandbox. Select View > Command Palette... (Ctrl+Shift+P).
Enter AL: Publish in the search box (or press the F5 shortcut key) and select the command from the list.
If you want to test your extension, you can do so by opening a sales invoice. Your control add-in should show the customer information.

Continue

Exercise - Build a control add-in object

Scenario

Tasks

Steps

Feedback