Mastering formContext.ui.headerSection: Controlling Header Visibility in Model-Driven Apps

The Power Platform gives us great flexibility with the UI, and one underrated but powerful capability is dynamically managing the header visibility of a form using the formContext.ui.headerSection API.

Whether you want to hide the command bar for certain users, simplify the UI during create mode, or tailor the form experience based on data, this API gives you the control.

📌 What Is formContext.ui.headerSection?

This API lets you get or set the visibility of various header components on a model-driven form in Dynamics 365 Online:

🧪 Real-World Use Cases

Let’s explore a few scenarios you might encounter—and how you can use this API effectively.

✅ Scenario 1: Hide Header Body on Create

You don’t want users to see certain calculated fields in the header while creating a record.

function onLoad_HideHeaderBodyOnCreate(executionContext) {
    const formContext = executionContext.getFormContext();

    if (formContext.ui.getFormType() === 1) { // 1 = Create
        formContext.ui.headerSection.setBodyVisible(false);
    }
}

✅ Scenario 2: Hide Command Bar for Read-Only Users

You might want to remove the clutter for users with read-only roles (e.g., Customer Viewers).

function onLoad_HideCommandBarForViewerRole(executionContext) {
    const formContext = executionContext.getFormContext();
    const userRoles = Xrm.Utility.getGlobalContext().userSettings.roles.getAll();

    const isViewer = userRoles.some(role => role.name === "Customer Viewer");

    if (isViewer) {
        formContext.ui.headerSection.setCommandBarVisible(false);
    }
}

🔍 Bonus: You could also hide form ribbon buttons with Enable Rules, but this gives a cleaner UI when needed.

✅ Scenario 3: Toggle Tab Navigator Based on Field Value

Imagine a toggle field that, when set, hides the header tab navigator to simplify navigation.

function onFieldChange_ToggleTabNavigator(executionContext) {
    const formContext = executionContext.getFormContext();
    const shouldHide = formContext.getAttribute("new_simplifiedmode").getValue();

    formContext.ui.headerSection.setTabNavigatorVisible(!shouldHide);
}

You could call this on field change or on form load.

✅ Scenario 4: Show All Header Sections for Admin Role

Ensure that admins always see the full header layout.

function onLoad_ShowFullHeaderForAdmins(executionContext) {    const formContext = executionContext.getFormContext();
    const userRoles = Xrm.Utility.getGlobalContext().userSettings.roles.getAll();

    const isAdmin = userRoles.some(role => role.name === "System Administrator");

    if (isAdmin) {
        formContext.ui.headerSection.setBodyVisible(true);
        formContext.ui.headerSection.setCommandBarVisible(true);
        formContext.ui.headerSection.setTabNavigatorVisible(true);
    }
}

🚫 What It Doesn’t Do

• It does not remove buttons or fields just hides the UI sections of the form header.
• It doesn’t apply to on-premise or classic UI forms.

🧠 Final Thoughts

The formContext.ui.headerSection API is a subtle but powerful way to clean up your forms dynamically, enforce business logic visually, and provide a more focused experience based on context.

If you’re building polished Model-Driven Apps for Dynamics 365 or Power Apps, this should be part of your UI toolkit.