Chapter 8: Designing Pages and User Interfaces

Objectives

By the end of this chapter you will be able to:

• Choose suitable page types for common AL scenarios
• Build a list page over your Chapter 7 table
• Add actions that delegate logic to codeunits
• Keep UI code thin and maintainable

8.1 Page types and responsibilities

The common page types are:

• Card: one record at a time
• List: many records in a grid
• Document: transactional workflows with a header and lines

For loan installments, a List page is the natural first UI.

8.2 Building a list page

page 50100 "Loan Repayment Schedule List"
{
    PageType = List;
    SourceTable = "Loan Repayment Schedule";
    ApplicationArea = All;

    layout
    {
        area(content)
        {
            repeater(Group)
            {
                field("Loan No."; Rec."Loan No.") { ApplicationArea = All; }
                field("Installment No."; Rec."Installment No.") { ApplicationArea = All; }
                field("Due Date"; Rec."Due Date") { ApplicationArea = All; }
                field(Paid; Rec.Paid) { ApplicationArea = All; }
            }
        }
    }
}

Rec is the page’s current record. Projects created with the AL: Go! command turn off the older implicit with, so a field’s source has to be written as Rec."Loan No.". A bare "Loan No." doesn’t compile there.

8.3 Actions and separation of concerns

Keep core rules out of actions. An action should call a procedure that holds them.

action(MarkPaid)
{
    ApplicationArea = All;
    Caption = 'Mark Paid';

    trigger OnAction()
    var
        LoanRepaymentMgt: Codeunit "Loan Repayment Mgt.";
    begin
        LoanRepaymentMgt.MarkInstallmentPaid(Rec);
        CurrPage.Update(false);
    end;
}

This keeps the page on the right side of the business-logic boundary that Chapter 9 sets up.

8.4 UI quality practices

• Show the fields users need now, and leave out the clutter.
• Keep captions explicit and in business terms.
• Don’t duplicate table validation rules in the page unless users need the feedback earlier.

Chapter summary

In this chapter you:

• Selected page types by how the business uses them
• Implemented a list page over Chapter 7 data
• Added thin actions that call codeunit logic
• Prepared the UI layer for reuse and testing

Tasks

1. Create the list page. Build a page for Loan Repayment Schedule.
2. Add a business action. Add Mark Paid wired to a codeunit call.
3. Review field set. Keep only fields required for day-to-day installment operations.
4. Try it yourself. Add one UX improvement (sorting, grouping, or action placement) and justify it.

Check your work: your page action should remain thin and delegate business logic to Chapter 9 codeunit procedures.