Add a bit of style to your pages in AL

Say it with colours, in this video, I explore different options for adding extra communication to users but using styles (aka. colours) to UI elements. Check out the video:

https://youtu.be/HBnL69os6P0

In this video, Erik demonstrates how to use the Style and StyleExpr properties in AL to add visual formatting to fields on Business Central pages. He walks through the available style options, explains their sometimes quirky naming conventions, and shows how to dynamically apply styles based on record data — all without consuming extra screen real estate.

Understanding Styles in Business Central

Business Central provides a specific set of named styles that can be applied to fields on pages. These styles control the text formatting — things like color, bold, and italic — to help communicate information to users at a glance.

Erik pulls up the Style property page on Microsoft documentation and walks through the available options:

  • None / Standard – Default appearance (the difference between these two is unclear)
  • Standard – Default formatting
  • Accent – Blue text
  • Strong – Bold text (“almost the only name that makes sense”)
  • StrongAccent – Blue and bold
  • Attention – Red and italic
  • AttentionAccent – Blue and italic
  • Favorable – Bold and green
  • Unfavorable – Bold, italic, and red
  • Ambiguous – Yellow (or as Erik puts it, “maybe mustard”)
  • Subordinate – Gray

As Erik notes, these names are a bit quirky. You have to remember that “Favorable” means bold green and “Attention” means red italic. The upside of using abstract names is that Microsoft retains the liberty to change the actual visual appearance in the future — “Accent” could become pink instead of blue — while the semantic meaning stays the same.

Applying a Static Style

The simplest way to style a field is to use the Style property directly. This applies the same style to every record on the page. Erik starts by creating a page extension on the Customer List and modifying the Name field:

pageextension 52600 "customer list" extends "Customer List"
{
    layout
    {
        modify(Name)
        {
            Style = AttentionAccent;
        }
    }
}

After deploying with F5 and switching the page view from tiles to a list, the Name column shows up with the AttentionAccent style — italic with a blue/green tint. However, since this applies the style as a constant, every record gets the same formatting, which isn’t very useful for communicating meaningful information.

Making It Dynamic with StyleExpr

To apply styles conditionally based on data, you use StyleExpr instead of Style. The key difference is that StyleExpr accepts a string value (or a variable containing a string), which means you can change it programmatically at runtime.

Here’s the complete solution Erik builds, which colors the Name field differently based on the customer’s General Business Posting Group:

pageextension 52600 "customer list" extends "Customer List"
{
    layout
    {
        modify(Name)
        {
            //Style = AttentionAccent;
            StyleExpr = MyStyle;
        }
    }

    trigger OnAfterGetRecord()
    begin
        SetMyStyle();
    end;

    trigger OnAfterGetCurrRecord()
    begin
        SetMyStyle();
    end;

    procedure SetMyStyle()
    begin
        case Rec."Gen. Bus. Posting Group" of
            'DOMESTIC':
                Mystyle := 'Unfavorable';
            'EU':
                MyStyle := 'Favorable';
            'EXPORT':
                MyStyle := 'Ambiguous';
        end;
    end;

    var
        MyStyle: Text;
}

Let’s break down the key pieces:

The StyleExpr Property

Instead of a fixed enum value, StyleExpr = MyStyle points to a Text variable. This variable holds the name of the style as a string (e.g., 'Unfavorable', 'Favorable', 'Ambiguous').

The SetMyStyle Procedure

A simple case statement examines the record’s Gen. Bus. Posting Group field and assigns the appropriate style string. Domestic customers get Unfavorable (bold, italic, red), EU customers get Favorable (bold, green), and Export customers get Ambiguous (yellow).

Why Two Triggers?

Erik calls SetMyStyle() from both OnAfterGetRecord and OnAfterGetCurrRecord. He explains that in the past, OnAfterGetRecord alone was sufficient, but with the amount of caching and pre-loading that happens on modern list pages, using only one trigger sometimes causes certain records to be missed. Calling the procedure from both triggers ensures consistent styling across all visible records.

Best Practices and Considerations

Erik offers some practical advice on using styles effectively:

  • Don’t overuse it. Styles are a powerful way to communicate extra information without consuming screen real estate, but applying them to too many fields creates a confusing, “ugly” interface.
  • Stick to one styled field per page. If two different fields can both turn red for different reasons, users won’t know which one to pay attention to or what the color means.
  • Use it for meaningful signals. Good use cases include highlighting fields that need to be filled out, flagging incorrect values, or drawing attention to positive outcomes.

Summary

Adding style to your Business Central pages is straightforward in AL. Use the Style property for static, always-on formatting, and StyleExpr when you need dynamic, data-driven styling. Remember to hook into both OnAfterGetRecord and OnAfterGetCurrRecord for reliable results on list pages, and use styles judiciously — the goal is to communicate useful information to your users, not to turn your pages into a rainbow.

Picture of hougaard

hougaard