Creating List and Card Pages in AL

Dynexal • Beginner Guide • 10 min read

Tables store your Business Central data, but pages are what users interact with. In this guide, you'll learn the difference between List and Card pages and how to build both with AL.

1. List Page vs. Card Page

A List page is designed to show multiple records in rows. It is useful for browsing, searching and selecting records. A Card page focuses on one record and is commonly used for detailed editing.

2. Create a simple List page

Assuming you already have a table named Dynexal Customer, a basic List page can be created like this:

page 50101 "Dynexal Customer List"
{
    PageType = List;
    SourceTable = "Dynexal Customer";
    ApplicationArea = All;
    UsageCategory = Lists;

    layout
    {
        area(Content)
        {
            repeater(General)
            {
                field("No."; Rec."No.")
                {
                    ApplicationArea = All;
                }
                field(Name; Rec.Name)
                {
                    ApplicationArea = All;
                }
                field(City; Rec.City)
                {
                    ApplicationArea = All;
                }
            }
        }
    }
}

3. Understand the important properties

• PageType = List tells Business Central that the page displays multiple records.
• SourceTable connects the page to its underlying table.
• UsageCategory = Lists helps make the page discoverable from search and navigation.
• repeater defines the columns users see in the list.
• ApplicationArea = All makes the controls available for all application areas in this example.

4. Create a Card page

Now create a Card page for the same table. The user can open one customer and see its fields in a form-like layout.

page 50102 "Dynexal Customer Card"
{
    PageType = Card;
    SourceTable = "Dynexal Customer";
    ApplicationArea = All;

    layout
    {
        area(Content)
        {
            group(General)
            {
                field("No."; Rec."No.")
                {
                    ApplicationArea = All;
                }
                field(Name; Rec.Name)
                {
                    ApplicationArea = All;
                }
                field(City; Rec.City)
                {
                    ApplicationArea = All;
                }
            }
        }
    }
}

5. List + Card is a common Business Central pattern

A typical solution uses a List page to browse records and a Card page to create or edit a selected record. This pattern appears throughout Business Central because it gives users both overview and detail views.

6. Add an action to open the Card

As your solution grows, actions can be added to pages to navigate to related functionality. For example, a list page can provide an action that opens a selected record's Card page.

actions
{
    area(Processing)
    {
        action(OpenCard)
        {
            ApplicationArea = All;
            Caption = 'Open Card';
            RunObject = page "Dynexal Customer Card";
            RunPageLink = "No." = field("No.");
        }
    }
}

7. Common beginner mistakes

• Using a field name that does not exist in the source table.
• Forgetting SourceTable when the page should display table data.
• Using the wrong page type for the user experience.
• Forgetting ApplicationArea on controls in examples where it is required.
• Trying to build a complex page before understanding the basic List → Card flow.

8. What to learn next

Once you are comfortable with List and Card pages, move to Page Extensions in Business Central, actions, FactBoxes, subpages and document pages. You can also revisit AL Tables in Business Central to strengthen the table-to-page foundation.