How to do it...

1. Open your AL project folder in Visual Studio Code.
2. The first thing we need to do is create the control add-in AL object. In the Explorer, create a new file named Television Control AddIn.al and enter in the following code in the Editor tab:

controladdin TelevisionControlAddIn
{
    RequestedHeight = 75;
    MinimumHeight = 75;
    MaximumHeight = 75;
    RequestedWidth = 300;
    MinimumWidth = 300;
    MaximumWidth = 300;
    VerticalStretch = true;
    VerticalShrink = true;
    HorizontalStretch = true;
    HorizontalShrink = true;
    StartupScript = 'ControlAddIn/startup.js';
    Scripts = 'ControlAddIn/controlAddIn.js';
    StyleSheets = 'ControlAddIn/style.css';

    procedure SetTelevisionShow(TelevisionShow: JsonObject);
    event ControlReady();
}

You can use the tcontroladdin snippet to create the default control add-in structure.

If the compiler highlights any issues with the script or style sheet paths, double-check to make sure you created the folder at the right location and that you have the necessary files in that folder.

Note that we define the events and procedures that the control add-in contains, but only the signatures, not the actual source code.

3. Now that we've defined the control add-in in AL, we need to add it to a page. To do this, let's create a new FactBox, which we will then add to Customer Card.

In Explorer, create a new file named Television Control AddIn Factbox.al and enter the following code in Editor:

page 50105 "Television Control AddIn Fctbx"
{
    PageType = CardPart;
    SourceTable = Customer;

    layout
    {
        area(Content)
        {

        }
    }
}

4. Let's first add the functions that will get the data needed for the control add-in. In our scenario, we want to show what the customer's favorite show is, and provide a way to search for information on the show in an online television database. Enter the following code into Editor after the layout section:

local procedure GetFavoriteTelevisionShow()
var
    CustomerTelevisionShow: Record "Customer Television Show";
    FavoriteShow: JsonObject;
    NoneFoundLbl: Label 'None found';
begin
    CustomerTelevisionShow.SetRange("Customer No.", "No.");
    CustomerTelevisionShow.SetRange(Favorite, true);
    if CustomerTelevisionShow.FindFirst() then begin
        FavoriteShow.Add('name', GetShowName(
        CustomerTelevisionShow."Television Show Code"));
        FavoriteShow.Add('url', MakeTvdbUrl(GetShowName
        (CustomerTelevisionShow."Television Show Code")));
    end else begin
        FavoriteShow.Add('name', NoneFoundLbl);
        FavoriteShow.Add('url', '');
    end;
    CurrPage.TelevisionControlAddin.SetTelevisionShow(
    FavoriteShow);
end;

local procedure GetShowName(ShowCode: Code[20]): Text
var
    TelevisionShow: Record "Television Show";
begin
    if ShowCode <> '' then begin
        TelevisionShow.Get(ShowCode);
        exit(TelevisionShow.Name);
    end;
end;

local procedure MakeTvdbUrl(ShowName: Text) Url: Text
var
    UrlBase: Label 'https://www.thetvdb.com/search?q=';
begin
    if ShowName <> '' then begin
        ShowName := ConvertStr(DelChr(ShowName, '<>', 
        ' '), ' ', '+');
        Url := UrlBase + ShowName;
    end;
end;

In a nutshell, we're grabbing the first show marked as the favorite for the customer, and then using a JSON object to pass the television show name and a URL to the control add-in. If the customer doesn't have a favorite, then we're just passing a standard text string. Nothing too complicated, right?

5. Now that we have all of our logic in place, we need to add the control add-in to the page. Add the following code to the area(Content) section in order to display the control add-in:

usercontrol(TelevisionControlAddIn; TelevisionControlAddIn)
{
    ApplicationArea = All;
    Visible = true;

    trigger ControlReady()
    begin
        GetFavoriteTelevisionShow();
    end;
}

Notice that the trigger name, ControlReady, is the same as the event name that we defined in the control add-in in step 2. This is how the triggers on the AL page get linked to the events in the control add-in.

6. The ControlReady event ensures that the control add-in is updated when it first opens, but we also need to make sure that if the user is scrolling through customer records without closing and reopening the page, everything is updated when the customer records change. Add the following code after the layout section to do this:

trigger OnAfterGetRecord()
begin
    GetFavoriteTelevisionShow();
end;

7. At this point, we've defined our control add-in and we've added it to a FactBox so that we can see it, so the last step is to add the FactBox to Customer Card.

In Explorer, click on the Customer Card Extension.al file and in the Editor, add following code after the addlast(General) section:

addfirst(FactBoxes)
{
    part("Television Control AddIn Fctbx"; "Television Control 
    AddIn Fctbx")
    {
        Caption = 'Favorite Television Show';
        ApplicationArea = All;
        SubPageLink = "No." = field ("No.");
    }
}

8. Now, we can try it out! Press F5 to build and publish your application. When your browser opens and you log in to your sandbox, perform the following steps:
   1. Go to Customer List and select any customer to open CUSTOMER CARD.
   2. At the top-right, you should see your new FactBox. It displays the name of the customer's favorite television show and a button, similar to this:

If you scroll through the records in CUSTOMER CARD, then you will see that the add-in gets updated every time the customer record changes.