How to Embed Widgets in your Business Central FactBox Using AL Code

Published: Sep 01, 2023

How to Embed Widgets in your Business Central FactBox Using AL Code

Published: Sep 01, 2023

With the use of a Popdock widget you can integrate a Popdock list into your Business Central FactBox and filter down to return context sensitive data. Below are 2 example methods for embedding in FactBoxes.

  • FactBox on a Card Page
  • FactBox on a Subform

You will need to create a Popdock widget prior to following these steps because you will need the widget URL. Click Here to learn how to create a Popdock widget.

You can download an example of the final code here.

Add Popdock Dependencies

The Popdock for Dynamics 365 Business Central extension from AppSource already contains the Control Add-in you will be using so you can just add a dependency to the existing extension.

In your AL project add the below dependency to your app.json file.

"dependencies": [
    {
      "id": "f58a05f1-7501-400f-ac28-bc3294e1619a",
      "name": "Popdock for Dynamics 365 Business Central",
      "version": "1.0.0.0",
      "publisher": "eOne Solutions"
    }
  ],

Add a FactBox on a Card Page

6307d9d470b361940a758c18 Card

Create a Card Part to call the Control Add-in. You will need to modify the user control to point to whatever you named your Control Add-in. You can use any field in the source table as a filter variable for your widget.

It is important to specify the SourceTable so Business Central knows where to retrieve the fields you will use as parameters.

// Replace https://widget-weu.popdock.com/embed/aa3e51db-5e4e-ce57-53ec-b4117572b602 with your widget id
page 50100 PopdockFactBoxPart
{
    PageType = CardPart;
    InsertAllowed = false;
    ModifyAllowed = false;
    DeleteAllowed = false;
    SourceTable = 18;

    layout
    {
        area(Content)
        {
            usercontrol(Sidebar; eOnePopdockFactBox)
            {
                ApplicationArea = All;
            }
        }
    }
    trigger OnAfterGetRecord()
    var
        Url: Text;
        Session: SessionSettings;
    begin
        Session.Init();
        Url := 'https://widget-weu.popdock.com/embed/aa3e51db-5e4e-ce57-53ec-b4117572b602?theme=dynamics_bc&locale=' + FORMAT(Session.LocaleId) + '&companyName=' + COMPANYNAME + '&No.=' + rec."No.";
        CurrPage.Sidebar.CreateSidebar(Url);
    end;
}

Finally, create a Page Extension on the card page to be modified. You can modify the part to reference the name you gave the Card Part.

It is import that a SubPageLink is established so when switching records, the Iframe will refresh with new context sensitive data.

// The below code adds both a FactBox and FastTab to the Customer Card
// Replace https://widget-weu.popdock.com/embed/494647e3-0ee0-75ca-fb96-feb7ef200602 with your widget id

pageextension 50100 PopdockFastTab extends "Customer Card"
{
    layout
    {
        addfirst(factboxes)
        {
            part(PopdockFactBoxPart; PopdockFactBoxPart)
            {
                ApplicationArea = all;
                caption = 'Customer Entries';
                SubPageLink = "No." = FIELD("No.");
            }
        }
    }
}

FactBox linked to a Subform

6307d9d470b36115a8758b80 subform

Create a Card Part to call the Control Add-in. You will need to modify the usercontrol to point to whatever you named your Control Add-in. You can use any field in the source table as a filter variable for your widget.

It is important to specify the SourceTable of the subform referenced(“Purchase Line” in this example) so Business Central knows where to retrieve the fields you will use as parameters.

// Replace https://widget-weu.popdock.com/embed/aa3e51db-5e4e-ce57-53ec-b4117572b602 with your widget id
page 50101 PopdockPurchFactBoxPart
{
    PageType = CardPart;
    InsertAllowed = false;
    ModifyAllowed = false;
    DeleteAllowed = false;
    SourceTable = "Purchase Line";

    layout
    {
        area(Content)
        {
            usercontrol(Sidebar; eOnePopdockFactBox)
            {
                ApplicationArea = All;

            }
        }
    }
    trigger OnAfterGetRecord()
    var
        Url: Text;
        Session: SessionSettings;
    begin
        Session.Init();
        Url := 'https://widget-weu.popdock.com/embed/aa3e51db-5e4e-ce57-53ec-b4117572b602?theme=dynamics_bc&locale=' + FORMAT(Session.LocaleId) + '&companyName=' + COMPANYNAME + '&No.=' + rec."No.";
        CurrPage.Sidebar.CreateSidebar(Url);
    end;
}

Finally, create a Page Extension on the page to be modified. You can modify the part to reference the name you gave the Card Part.

It is import that the Provider and SubPageLink are pointing to the same table as your CardPart references(“Purchase Line” in this example). This will make the Iframe refresh each time a different subform item is selected.

pageextension 50101 PopdockFactBox extends "Purchase Invoice"
{
    layout
    {
        addfirst(factboxes)
        {

            part(PopdockFactBox; PopdockPurchFactBoxPart)
            {
                ApplicationArea = all;
                Caption = 'Item Inventory';
                Provider = PurchLines;
                SubPageLink = "No." = FIELD("No.");
            }
        }
    }
}


You will now see your Popdock widgets in Business Central FactBoxes!

Questions regarding embedding widgets using AL code? Contact support@eonesolutions.com.

Content
Add Popdock Dependencies ‍Add a FactBox on a Card Page FactBox linked to a Subform

Feeling stuck? Get the support and guidance you need to help you power through any data challenge

Reset Filters