Too often, I have seen Card pages in Business Central that looked liked the fields were just thrown together without a simple thought about usability or making it look pretty. In this video, I look at a few simple options that will make your card pages look both better and prettier.
In this video, Erik walks through the process of transforming an ugly, unstructured card page in Business Central into a well-organized, professional-looking interface. He demonstrates the key techniques for grouping fields, controlling field visibility with the Importance property, and thinking about layout across different device form factors.
The Problem: Fields Just “Shoveled” Onto a Page
Erik starts by showing a customer card page where all the fields have simply been dumped into a single flat list — no grouping, no logical ordering, no thought given to the user experience. This is something he sees far too often, especially when developers use automated page generators that let you select a bunch of fields and produce a page without any structure.
Compare this to the standard Business Central Customer Card, which has collapsible groups like General, Address, Contact, Invoicing, Payments, and Shipping. Fields are logically organized, there’s a two-column layout with visual symmetry, and users can expand or collapse sections as needed. There’s also “Show more” / “Show less” functionality for less commonly used fields. That’s what a pretty card page looks like.
Step 1: Use Groups to Organize Fields
The most important structural element for card pages is the group control. Groups create collapsible FastTabs on card pages, giving users the familiar sections they expect. Erik emphasizes that while AL supports other layout options like fixed and grid, he tends to avoid them — sticking with groups is what Microsoft does in the base app, and it works well.
When creating a group, always provide a Caption property. Without it, the group will display its internal variable name, which isn’t user-friendly:
group(GenGroup)
{
Caption = 'General';
// fields go here
}Groups Inside Groups: Sub-Grouping
When you nest a group inside another group, the inner group does not become a separate collapsible FastTab. Instead, it renders as a sub-section within the parent group — typically appearing as a separate column with a simple title above it. This is useful for creating visual symmetry, such as having a “Name” column and an “Address” column side by side within the General group:
group(GenGroup)
{
Caption = 'General';
group(Namegroup)
{
Caption = 'Name';
field("No."; Rec."No.") { ... }
field(Name; Rec.Name) { ... }
field("Name 2"; Rec."Name 2") { ... }
field("Mobile Phone No."; Rec."Mobile Phone No.") { ... }
field("Salesperson Code"; Rec."Salesperson Code") { ... }
field("Responsibility Center"; Rec."Responsibility Center") { ... }
}
group(AddressGroup)
{
Caption = 'Address';
field(Address; Rec.Address) { ... }
field("Address 2"; Rec."Address 2") { ... }
field(City; Rec.City) { ... }
field("Post Code"; Rec."Post Code") { ... }
field(County; Rec.County) { ... }
field("Country/Region Code"; Rec."Country/Region Code") { ... }
}
}This creates a nice symmetric two-column layout within the General FastTab, with Name fields on one side and Address fields on the other.
Step 2: Use the Importance Property
The Importance property is a key tool for controlling field visibility. It has three values:
- Standard — the default; the field always shows when the group is expanded.
- Promoted — the field is visible even when the FastTab is collapsed, appearing in the summary line at the top of the group.
- Additional — the field is hidden by default and only appears when the user clicks “Show more.”
Promoted Fields
Use Importance = Promoted on fields that users need to see at a glance, even when a group is collapsed. For example, the customer number and name should always be visible:
field("No."; Rec."No.")
{
ToolTip = 'Specifies the value of the No. field';
ApplicationArea = All;
Importance = Promoted;
}
field(Name; Rec.Name)
{
ToolTip = 'Specifies the value of the Name field';
ApplicationArea = All;
Importance = Promoted;
}This mirrors how FastTabs worked in the old Windows client — when collapsed, you’d still see the key information. Erik recommends making sure every group has at least some promoted fields so users always see meaningful data.
Additional Fields
For fields that are only occasionally needed, use Importance = Additional. As soon as at least one field in a group has this property, the “Show more” / “Show less” toggle appears:
field("Name 2"; Rec."Name 2")
{
ToolTip = 'Specifies the value of the Name 2 field';
ApplicationArea = All;
Importance = Additional;
}Step 3: Think in Three Categories of Fields
Erik shares his mental model for organizing fields on any card page. He always thinks in three groups:
- Fields everyone needs to see — these are always visible (standard or promoted importance).
- Fields users need once in a while — these get
Importance = Additional, hidden behind “Show more.” - Fields only very few users need — these get
Visible = false.
Hidden Fields with Visible = false
For fields that almost nobody will ever use, set Visible = false. The field won’t appear on the page at all by default, but individual users can add it through personalization. This avoids cluttering the UI while still making the field accessible:
field("Currency Code"; Rec."Currency Code")
{
ToolTip = 'Specifies the value of the Currency Code field';
ApplicationArea = All;
Visible = false;
}An added benefit: if the page is exposed as a web service, non-visible fields are still available through the API even though they don’t appear on screen.
Step 4: Check the Layout on Other Devices
Erik offers an important practical tip: don’t just design for your large desktop monitor. Use the built-in designer in Business Central to preview how the page will look on tablet and phone form factors. You can get very focused on making things look perfect on a 32-inch high-resolution screen, only to find your users are accessing the page from a mobile device the next day.
When you’re designing pages with many fields and groups, periodically check the tablet and phone previews to make sure the layout still makes sense on smaller screens.
Step 5: Order Fields Logically Within Groups
Beyond just grouping, pay attention to the order of fields within each group. Put the most important fields first. For a “Posting Setup” group, for example, you’d likely want the Customer Posting Group and General Business Posting Group at the top, followed by tax information, then dimensions, then payment method codes.
Similarly, address fields should follow the conventions of your target locale — in Canada that means City, Province, Postal Code; in Denmark it’s Postal Code then City with no province.
The Final Result
Here is the complete source code for the improved card page:
page 50123 "Pretty Customer Card"
{
Caption = 'Pretty Customer Card';
PageType = Card;
SourceTable = Customer;
layout
{
area(content)
{
group(GenGroup)
{
Caption = 'General';
group(Namegroup)
{
Caption = 'Name';
field("No."; Rec."No.")
{
ToolTip = 'Specifies the value of the No. field';
ApplicationArea = All;
Importance = Promoted;
}
field(Name; Rec.Name)
{
ToolTip = 'Specifies the value of the Name field';
ApplicationArea = All;
Importance = Promoted;
}
field("Name 2"; Rec."Name 2")
{
ToolTip = 'Specifies the value of the Name 2 field';
ApplicationArea = All;
Importance = Additional;
}
field("Mobile Phone No."; Rec."Mobile Phone No.")
{
ToolTip = 'Specifies the value of the Mobile Phone No. field';
ApplicationArea = All;
}
field("Salesperson Code"; Rec."Salesperson Code")
{
ToolTip = 'Specifies the value of the Salesperson Code field';
ApplicationArea = All;
}
field("Responsibility Center"; Rec."Responsibility Center")
{
ToolTip = 'Specifies the value of the Responsibility Center field';
ApplicationArea = All;
}
}
group(AddressGroup)
{
Caption = 'Address';
field(Address; Rec.Address)
{
ToolTip = 'Specifies the value of the Address field';
ApplicationArea = All;
}
field("Address 2"; Rec."Address 2")
{
ToolTip = 'Specifies the value of the Address 2 field';
ApplicationArea = All;
}
field(City; Rec.City)
{
ToolTip = 'Specifies the value of the City field';
ApplicationArea = All;
}
field("Post Code"; Rec."Post Code")
{
ToolTip = 'Specifies the value of the Post Code field';
ApplicationArea = All;
}
field(County; Rec.County)
{
ToolTip = 'Specifies the value of the County field';
ApplicationArea = All;
}
field("Country/Region Code"; Rec."Country/Region Code")
{
ToolTip = 'Specifies the value of the Country/Region Code field';
ApplicationArea = All;
}
}
}
group(PostingGroup)
{
Caption = 'Posting Setup';
field("Customer Disc. Group"; Rec."Customer Disc. Group")
{
ToolTip = 'Specifies the value of the Customer Disc. Group field';
ApplicationArea = All;
}
field("Customer Posting Group"; Rec."Customer Posting Group")
{
ToolTip = 'Specifies the value of the Customer Posting Group field';
ApplicationArea = All;
}
field("Customer Price Group"; Rec."Customer Price Group")
{
ToolTip = 'Specifies the value of the Customer Price Group field';
ApplicationArea = All;
}
field("Global Dimension 1 Code"; Rec."Global Dimension 1 Code")
{
ToolTip = 'Specifies the value of the Global Dimension 1 Code field';
ApplicationArea = All;
}
field("Global Dimension 2 Code"; Rec."Global Dimension 2 Code")
{
ToolTip = 'Specifies the value of the Global Dimension 2 Code field';
ApplicationArea = All;
}
field("Currency Code"; Rec."Currency Code")
{
ToolTip = 'Specifies the value of the Currency Code field';
ApplicationArea = All;
Visible = false;
}
field("Payment Method Code"; Rec."Payment Method Code")
{
ToolTip = 'Specifies the value of the Payment Method Code field';
ApplicationArea = All;
}
field("Payment Terms Code"; Rec."Payment Terms Code")
{
ToolTip = 'Specifies the value of the Payment Terms Code field';
ApplicationArea = All;
}
field("Tax Area Code"; Rec."Tax Area Code")
{
ToolTip = 'Specifies the value of the Tax Area Code field';
ApplicationArea = All;
}
field("Tax Liable"; Rec."Tax Liable")
{
ToolTip = 'Specifies the value of the Tax Liable field';
ApplicationArea = All;
}
}
field(GLN; Rec.GLN)
{
ToolTip = 'Specifies the value of the GLN field';
ApplicationArea = All;
Visible = false;
}
}
}
}Key Takeaways
- Use groups to create logical, collapsible FastTabs — always with a
Caption. - Nest groups within groups to create sub-sections and achieve a two-column layout within a FastTab.
- Use
Importance = Promotedon key fields so they remain visible when the FastTab is collapsed. - Use
Importance = Additionalfor occasionally needed fields, enabling the “Show more” toggle. - Use
Visible = falsefor rarely needed fields — users can still add them via personalization, and they remain available through web services. - Order fields logically within each group, with the most important fields first.
- Test on multiple form factors — use the designer to preview your page on tablet and phone layouts.
- Remove unnecessary fields — flow filter fields don’t work on card pages, so don’t include them.
Your users will appreciate the effort, and a well-structured card page is far more inviting and productive to work with than a flat list of randomly ordered fields. Take the time to make your card pages pretty!
