Tag: UI

Changing the CardPageId in a Page Extension – Business Central Wave 1 2025

With the release of Business Central 2025 Wave 1, Business central continues to refine and empower AL developers with more flexibility when extending standard functionality. One of the subtle but significant features is the ability to change the CardPageId in a PageExtension, giving developers greater control over navigation behavior in the application.

Why Would You Want to Change CardPageID?

Consider these scenarios:

  • Simplified Views: You’ve created a simplified version of a standard card page with only the most relevant fields for a specific user role. Now, you can easily link the standard list page to this streamlined card page for those users.
  • Custom Workflows: Your custom solution requires a specialized card page with unique actions and fields for certain data. You can now seamlessly integrate this custom card page with the existing list of that data.
  • Context-Specific Information: Depending on how a user navigates to a list page, you might want them to land on a different, more contextually relevant card page.

Let’s say you’ve built a custom card page for customers that shows additional analytics or fields. You want to replace the default Customer Card when users open a customer from the list.

page 50101 "Custom Customer Card"
{
    PageType = Card;
    SourceTable = Customer;
    ApplicationArea = All;

    layout
    {
        area(content)
        {
            group("Custom Info")
            {
                field("Customer Name"; Name)
                {
                    ApplicationArea = All;
                }
                // Additional fields and logic...
            }
        }
    }
}

Then, in your page extension:

pageextension 50100 CustomerListExt extends "Customer List"
{
    CardPageId = "Custom Customer Card";
}

Now, your users will be directed to the Custom Customer Card page instead of the standard one.

The ability to change the CardPageID in page extensions in Business Central Wave 1 2025 is a significant step forward in providing developers with more control over the user interface. This seemingly small change unlocks a wealth of possibilities for creating more tailored, efficient, and user-friendly Business Central solutions.

Stay tuned for more updates.

Embedding Powerful UI with UserControlHost PageType in Business Central

With the release of Business Central 2025 Wave 1, new page type UserControlHost is introduced which enables embedding custom JavaScript-based controls into the Business Central web client.

🔍 What is UserControlHost?

The UserControlHost page type allows you to embed custom client-side controls—typically written in JavaScript—inside the Business Central web client using the ControlAddIn object.These controls are built with web technologies—JavaScript, HTML, and CSS—and provide flexibility far beyond standard AL UI elements.

Think of UserControlHost as a “wrapper” that renders client-side controls defined via the ControlAddIn object.

You might consider using UserControlHost for:

  • Advanced data visualizations (charts, graphs, maps)
  • Dynamic dashboards or interactive UI widgets

🧱 How to use

To use the UserControlHost, you need two key components:

  1. A Control Add-In (ControlAddIn)
  2. A Page with PageType = UserControlHost
  1. Create the ControlAddIn
controladdin "MyWave2025Control"
{
    Scripts = 'scripts/chart.js', 'scripts/mycontrol.js';
    StartupScript = 'scripts/init.js';
    StyleSheets = 'styles/mycontrol.css';

    RequestedHeight = 400;
    RequestedWidth = 600;

    AutoAdjustHeight = true;
    AutoAdjustWidth = true;

    Events = OnItemSelected(text);
    Methods = LoadData(data: Text);
}

2) Create the UserControlHost Page

page 50200 "Dashboard Host"
{
    PageType = UserControlHost;
    ApplicationArea = All;

    layout
    {
        area(content)
        {
            usercontrol(MyCustomChart; "MyWave2025Control")
            {
                ApplicationArea = All;
            }
        }
    }

    trigger OnOpenPage()
    begin
        CurrPage.MyCustomChart.LoadData('{"region": "Thailand"}');
    end;

    trigger OnControlReady()
    begin
        Message('Custom Control is ready!');
    end;
}

The UserControlHost page type, especially with Wave 1 2025 enhancements, is the go-to choice for scenarios where traditional AL UI just won’t cut it. Whether you’re building modern dashboards, embedding custom charts, or creating interactive widgets