Exercise - Create a Role Center page with an Activity page - Training

15 minutes

Scenario

You are a developer for CRONUS International Ltd. and want to create a Role Center page and display some cues on the Role Center.

Tasks

Create a new extension.
Create a Cue table.
Create an activity page.
Create a Role Center page and add the activity page to the Role Center.
Create a query and use it to add data in a field in the Cue table.
Update the Cue table
Update the Activities page
Create a Profile
Publish the extension

Steps

Create a new extension

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 latest (highest) version of Business Central 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 Role Center Example. Change the publisher setting to Cronus International Ltd.
Remove the HelloWorld.al file.

Create a Cue table

Select File > New File and save this file by selecting File > Save. Use the file name SalesInvoiceCue.Table.al.
Create a new table in this file by using code snippets. Enter ttable and then press the Tab key.
Change the ID to 50130 and the name to "Sales Invoice Cue".
Set the DataClassification property to CustomerContent and set the Caption property to 'Sales Invoice Cue'.
Remove the MyField field.
Create the following fields in the table. You can use the tfield snippet.

Field No. Field Name Data Type Length

1 Primary Key Code 10

2 Sales Invoice – Open Integer

3 Sales Invoice – Released Integer

4 Sales This Month Decimal
Set the DataClassification property for each field in the table, except the Sales Invoice - Open and Sales Invoice - Released fields, to CustomerContent.
Set the Caption property for each field in the table.
Set the primary key to Primary Key.

Field No.	Field Name	Data Type	Length
1	Primary Key	Code	10
2	Sales Invoice – Open	Integer
3	Sales Invoice – Released	Integer
4	Sales This Month	Decimal

Set the FieldClass property to FlowField for the Sales Invoice - Open field. Set the CalcFormula property to:

 CalcFormula = count("Sales Header" where("Document Type" = const(Invoice), 
                                          Status = const(Open)));

Set the FieldClass property to FlowField for the Sales Invoice - Released field. Set the CalcFormula property to:

 CalcFormula = count("Sales Header" where("Document Type" = const(Invoice), 
                                          Status = const(Released)));

The Cue table should now resemble this:

table 50130 "Sales Invoice Cue"
{
    DataClassification = CustomerContent;
    Caption = 'Sales Invoice Cue';

    fields
    {
        field(1; "Primary Key"; code[10])
        {
            DataClassification = CustomerContent;
            Caption = 'Primary Key';
        }
        field(2; "Sales Invoice - Open"; Integer)
        {
            Caption = 'Sales Invoice - Open';
            FieldClass = FlowField;
            CalcFormula = count("Sales Header" where("Document Type" = const(Invoice), Status = const(Open)));
        }
        field(3; "Sales Invoice - Released"; Integer)
        {
            Caption = 'Sales Invoice - Released';
            FieldClass = FlowField;
            CalcFormula = count("Sales Header" where("Document Type" = const(Invoice), Status = const(Released)));
        }
        field(4; "Sales this Month"; Decimal)
        {
            DataClassification = CustomerContent;
            Caption = 'Sales this Month';
        }
    }

    keys
    {
        key(Pk; "Primary Key")
        {
            Clustered = true;
        }
    }
}

Create an activity page

Select File > New File and save this file by selecting File > Save. Use the file name SalesInvoiceActivities.Page.al.
Create a new page in this file by using code snippets. Enter tpage and then press the Tab key.
Change the ID to 50130 and the name to Sales Invoice Activities.
Set the SourceTable property to Sales Invoice Cue and set the Caption property to Sales Invoice Activities.
Set the PageType property to CardPart. Remove the UsageCategory and ApplicationArea properties.
Verify that a content area is created in the layout section. If not, create an area called content.
Change the name of the first group to Sales Invoice. Change the group control in a cuegroup. Set the Caption property of the cuegroup to Sales Invoice.
Add all fields in the cuegroup. Set the ApplicationArea property to All. Do not add the Primary Key field to the page.
Make sure every field has a ToolTip property.

Add the following code to the OnOpenPage trigger:

 if not Rec.Get() then begin
     Rec.Init();
     Rec.Insert();
 end;

Remove the actions section from the page.
The Activities page should now resemble this:\

page 50130 "Sales Invoice Activities"
{
    PageType = CardPart;
    SourceTable = "Sales Invoice Cue";
    Caption = 'Sales Invoice Activities';

    layout
    {
        area(Content)
        {
            cuegroup("Sales Invoice")
            {
                Caption = 'Sales Invoice';

                field("Sales Invoice - Open"; Rec."Sales Invoice - Open")
                {
                    ToolTip = 'Specifies the value of the Sales Invoice - Open field.';
                    ApplicationArea = All;
                }
                field("Sales Invoice - Released"; Rec."Sales Invoice - Released")
                {
                    ToolTip = 'Specifies the value of the Sales Invoice - Released field.';
                    ApplicationArea = All;
                }
                field("Sales this Month"; Rec."Sales this Month")
                {
                    ToolTip = 'Specifies the value of the Sales this Month field.';
                    ApplicationArea = All;
                }
            }
        }
    }
    trigger OnOpenPage()
    begin
        if not Rec.Get() then begin
            Rec.Init();
            Rec.Insert();
        end;
    end;
}

Create a Role Center page and add the activity page to the Role Center

Select File > New File and save this file by selecting File > Save. Use the file name MyRoleCenter.Page.al.
Create a new page in this file by using code snippets. Enter tpage and then press the Tab key.
Change the ID to 50131 and the name to My Role Center.
Remove the SourceTable property and change the PageType property to RoleCenter.
Remove the content area in the layout section and add a new rolecenter area in the layout section.
Remove the actions section and remove the global variable myInt.
Add a part with the name Sales Invoice Activities of the Sales Invoice Activities page to the rolecenter area.

layout
{
    area(RoleCenter)
    {
        part("Sales Invoice Activities"; "Sales Invoice Activities")
        {
            ApplicationArea = All;
        }
    }
}

Create a query and use it to add data in a field in the Cue table

Select File > New File and save this file by selecting File > Save. Use the file name CustomLedgEntrySales.Query.al.
Create a new page in this file by using code snippets. Enter tquery and then press the Tab key.
Change the ID to 50130 and the name to Custom Ledg. Entry Sales.
Set the QueryType property to Normal.
Set the dataitem to Cust. Ledger Entry.
Add filter columns for Document Type and for Posting Date.
Add one column for Sales (LCY) and specify the Sum method.
Remove the OnBeforeOpen trigger.

query 50130 "Custom Ledg. Entry Sales"
{
    QueryType = Normal;

    elements
    {
        dataitem(CustLedgerEntry; "Cust. Ledger Entry")
        {
            column(SumSalesLCY; "Sales (LCY)")
            {
                Method = Sum;
            }
            filter(DocumentTypeFilter; "Document Type")
            {
            }
            filter(PostingDateFilter; "Posting Date")
            {
            }
        }
    }
}

Update the Cue table

Open the SalesInvoiceCue.Table.al file and create a public procedure with the name CalcSalesThisMonth. Return a variable Amount of data type Decimal.
Add the following code to the function.

    procedure CalcSalesThisMonthAmount() Amount: Decimal
    var
        CustLedgerEntry: Record "Cust. Ledger Entry";
        CustomLedgEntrySales: Query "Custom Ledg. Entry Sales";
    begin
        CustomLedgEntrySales.SetRange(DocumentTypeFilter, CustLedgerEntry."Document Type"::Invoice);
        CustomLedgEntrySales.SetRange(PostingDateFilter, CalcDate('<-CM>', Workdate()), Workdate());

        CustomLedgEntrySales.Open();
        if CustomLedgEntrySales.Read() then
            Amount := CustomLedgEntrySales.SumSalesLCY;
        CustomLedgEntrySales.Close();
    end;

Update the Activities page

Open the SalesInvoiceActivities.Page.al page.
Create the OnAfterGetRecord trigger in the page and add the following code in the trigger:
```
Rec."Sales This Month" := Rec.CalcSalesThisMonthAmount();
```
Set the DrillDownPageID property of the Sales This Month field to Customer Ledger Entries.

Create a Profile

Select File > New File and save this file by selecting File > Save. Use the file name MyProfile.Profile.al.
Create a new page in this file by using code snippets. Enter tprofile and then press the Tab key.
Change the code to the following:

profile MyProfile 
{
    Caption = 'My Profile';
    RoleCenter = "My Role Center";
}

Publish the extension

Publish your extension to the sandbox. Select View > Command Palette... (Ctrl+Shift+P).
Enter AL: Publish in the search box (or press the F5 keyboard shortcut) and then select the command from the list.
Open My Settings from the settings icon.
Change the Role to My Profile to test your newly created Role Center.

Continue

Exercise - Create a Role Center page with an Activity page