D365 Business Central : Add Visual Indicator to Page

Using color or visual indicators is a great way to convey information quickly. They can represent different meanings, conditions, or statuses, making it easier for people to understand and interpret information without needing to read or process data. I have blogged about using Style Color to accomplish this. Another way to do this is to use Emojis as visual indicators.

Consider the scenario where we want Inventory Indicator on our Item List page. We want Red = Out of Stock, Yellow = Low Stock (less than 10), Green = In Stock. Let’s use Emojis as a visual indicator.

Below is the sample code.

pageextension 60111 "Item List_TNG" extends "Item List"
{
    layout
    {
        addafter(InventoryField)
        {
            field(InventoryIndicator_TNG; InventoryIndicator)
            {
                ApplicationArea = All;
                Caption = 'Inventory Indicator';
                ToolTip = 'Red = Out of Stock, Yellow = Low Stock, Green = In Stock';
                Editable = false;
            }
        }
    }

    trigger OnAfterGetRecord()
    begin
        if Rec.Inventory >= 10 then
            InventoryIndicator := '✅'
        else
            if Rec.Inventory > 0 then
                InventoryIndicator := '⚠️'
            else
                InventoryIndicator := '❌';
    end;


    var
        InventoryIndicator: Text;
}

That’s it. Nice and simple. While the method is straightforward, it’s worth noting that as a variable-based solution, we have a limitation on not being able to filter on it.

thatnavguy

Experienced NZ-based NAV Developer and Consultant with 15+ years of experience leading multiple IT projects, performing business analyst, developing, implementing, and upgrading Dynamics NAV and Business Central. Passionate to deliver solution that focuses on user-friendly interface while keeping high standard of compliance with the needs.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *