Dynamics 365 Business Central: Add new actions (Show more and Show less) to show and hide subgroups on the page

Hi, Readers.
Today I would like to share an interesting requirement, how to add new actions (Show more and Hide) to show and hide subgroups on the page.

Within a page, the developer can combine page fields into groups. Groups help the user overview the page by placing related fields together. For example, on the
Customer Card (21, Card) page.

In AL:

And within a group, subgroups further increase the structure of the data displayed in a page.

In AL:

And you use this Importance Property to control the amount of information that is visible on a page.

It is useful on pages that have a large number of fields, where you can display the most important fields by default, but users have the option to show more as needed.

This behavior can be modified in Personalization or Design, etc.

Here question, can we add Show more and Show less actions for subgroup to control its display. Yes, it can be done if customized.

First let’s look at an example of new fields.
There are two ways to add clickable links.
1. Display field name and let users click on value: Using OnDrillDown (Page Field) trigger

2. Do not display the value, let users click the field name directly: Using Label Data type

The rest are similar to the method we mentioned in Dynamics 365 Business Central: Dynamic Visibility of Controls (Hide and show fields dynamically). This time I used an actual field to hold the Visible property so that BC can save the state of Show more or Show less.

Simple test:

Test video:

Source Code: GitHub (Please note that the source code is for reference only, you can improve it according to your own needs)

tableextension 50111 ZYCustomerExt extends Customer
{
    fields
    {
        field(50100; "Vehicle Visible"; Boolean)
        {
            Caption = 'Vehicle Visible';
            InitValue = false;
            DataClassification = CustomerContent;
        }
        field(50101; "Car Code"; Code[20])
        {
            Caption = 'Car Code';
            DataClassification = CustomerContent;
        }
        field(50102; "Car Name"; Text[50])
        {
            Caption = 'Car Name';
            DataClassification = CustomerContent;
        }
        field(50103; "Motorcycle Code"; Code[20])
        {
            Caption = 'Motorcycle Code';
            DataClassification = CustomerContent;
        }
        field(50104; "Motorcycle Name"; Text[50])
        {
            Caption = 'Motorcycle Name';
            DataClassification = CustomerContent;
        }
        field(50105; "Bicycle Code"; Text[50])
        {
            Caption = 'Bicycle Code';
            DataClassification = CustomerContent;
        }
        field(50106; "Bicycle Name"; Text[50])
        {
            Caption = 'Bicycle Name';
            DataClassification = CustomerContent;
        }
    }
}

pageextension 50111 ZYCustomerCardExt extends "Customer Card"
{
    layout
    {
        addafter(Name)
        {
            field(VehicleText; Vehicle)
            {
                ApplicationArea = All;
                Caption = 'Vehicle';
                Editable = false;
                trigger OnDrillDown()
                begin
                    if Rec."Vehicle Visible" = true then
                        exit;
                    Rec."Vehicle Visible" := true;
                    Rec.Modify(true);
                end;
            }
            group(VehicleGroup)
            {
                Visible = Rec."Vehicle Visible";
                Caption = 'Vehicle Group';

                field("Car Code"; Rec."Car Code")
                {
                    ApplicationArea = All;
                }
                field("Car Name"; Rec."Car Name")
                {
                    ApplicationArea = All;
                }

                field("Motorcycle Code"; Rec."Motorcycle Code")
                {
                    ApplicationArea = All;
                }
                field("Motorcycle Name"; Rec."Motorcycle Name")
                {
                    ApplicationArea = All;
                }

                field("Bicycle Code"; Rec."Bicycle Code")
                {
                    ApplicationArea = All;
                }
                field("Bicycle Name"; Rec."Bicycle Name")
                {
                    ApplicationArea = All;
                }
                field(HideVehicleLbl; HideVehicleLbl)
                {
                    ApplicationArea = All;
                    Editable = false;
                    ShowCaption = false;
                    Style = StrongAccent;
                    StyleExpr = true;
                    trigger OnDrillDown()
                    begin
                        if Rec."Vehicle Visible" = false then
                            exit;
                        Rec."Vehicle Visible" := false;
                        Rec.Modify(true);
                    end;
                }

            }
        }
    }

    var
        Vehicle: Text;
        HideVehicleLbl: Label 'Show less';

    trigger OnOpenPage();
    begin
        Vehicle := 'Show More';
    end;
}

Let’s look at another example of modifying a standard subgroup. Same approach, but maybe not a very good example.

Test video:

Source Code: GitHub (Please note that the source code is for reference only, you can improve it according to your own needs)

tableextension 50111 ZYCustomerExt extends Customer
{
    fields
    {
        field(50100; "Shipment Method Visible"; Boolean)
        {
            Caption = 'Shipment Method Visible';
            InitValue = false;
            DataClassification = CustomerContent;
        }
    }
}

pageextension 50111 ZYCustomerCardExt extends "Customer Card"
{
    layout
    {
        modify("Shipment Method")
        {
            Visible = Rec."Shipment Method Visible";
        }

        addbefore("Shipment Method")
        {
            field(ShowShipmentMethod; ShipmentMethodVisible)
            {
                ApplicationArea = All;
                Caption = 'Show Shipment Method';
                Editable = false;
                trigger OnDrillDown()
                begin
                    if Rec."Shipment Method Visible" = true then
                        exit;
                    Rec."Shipment Method Visible" := true;
                    Rec.Modify(true);
                end;
            }
        }
        addafter("Shipping Agent Service Code")
        {
            field(HideShipmentMethodLbl; HideShipmentMethodLbl)
            {
                ApplicationArea = All;
                Editable = false;
                ShowCaption = false;
                Style = StrongAccent;
                StyleExpr = true;
                trigger OnDrillDown()
                begin
                    if Rec."Shipment Method Visible" = false then
                        exit;
                    Rec."Shipment Method Visible" := false;
                    Rec.Modify(true);
                end;
            }
        }
    }

    var
        ShipmentMethodVisible: Text;
        HideShipmentMethodLbl: Label 'Show less';

    trigger OnOpenPage();
    begin
        ShipmentMethodVisible := 'Show More';
    end;
}

Great. Give it a try!!!😁

END

Hope this will help.

Thanks for reading.

ZHU