How to Hide Header Fields and Read Formatted OData Values in Model-Driven Apps

When customizing model-driven apps in Microsoft Power Apps, you often need to dynamically show or hide fields depending on the user’s business context. Hiding fields inside the main form is simple, but header fields frequently cause confusion.

Another common challenge is correctly reading formatted OData values returned by the Web API.

This article explains both topics with clear examples and a complete JavaScript template you can use immediately.

Correctly Reading Formatted OData Values

When retrieving records through the Web API, lookup and option set fields return two values:

• the raw value (GUID or integer)

• the formatted value (the user-friendly display text)

The formatted value uses the suffix:

@OData.Community.Display.V1.FormattedValue

Example

If your lookup schema name is:

sample_salesorganization

Then the formatted value is accessed using:

sample_salesorganization@OData.Community.Display.V1.FormattedValue

To read it correctly:

record[DISPLAY_PROP]

Hiding Header Fields

Header controls require the prefix:

header_

Example:

formContext.getControl("header_fieldname").setVisible(false);

If the prefix is missing, the control won’t be found.

Complete Example: Dynamic Header Field Visibility

DynamicHeaderFieldVisibility: async function () {
    try {
        const currentUserBU = await MyApp.Helpers.getCurrentUserBusinessUnit();
        const salesAreas = MyApp.Data.getSalesAreas(false) || [];

        const ctrlPrimaryCode =
            formContext.getControl("header_sample_primarycode");
        const ctrlSecondaryCode =
            formContext.getControl("header_sample_secondarycode");

        ctrlPrimaryCode?.setVisible(false);
        ctrlSecondaryCode?.setVisible(false);

        const DISPLAY_PROP =
            "sample_salesorganization@OData.Community.Display.V1.FormattedValue";

        const hasNorthArea = salesAreas.some(x =>
            (x[DISPLAY_PROP] || "").toUpperCase().includes("NORTH")
        );

        const hasSouthArea = salesAreas.some(x =>
            (x[DISPLAY_PROP] || "").toUpperCase().includes("SOUTH")
        );

        if (currentUserBU === "SalesDivision") {

            if (hasNorthArea && hasSouthArea) {
                ctrlPrimaryCode?.setVisible(true);
                ctrlSecondaryCode?.setVisible(true);
            }
            else if (hasNorthArea) {
                ctrlPrimaryCode?.setVisible(true);
            }
            else if (hasSouthArea) {
                ctrlSecondaryCode?.setVisible(true);
            }
        }

        else if (currentUserBU === "PartnerDivision") {
            ctrlPrimaryCode?.setVisible(true);
            ctrlSecondaryCode?.setVisible(false);
        }

    } catch (err) {
        console.error("Error in DynamicHeaderFieldVisibility:", err);
    }
},

Key Takeaways

1. How to read formatted OData values

Always use the exact OData suffix:
fieldname@OData.Community.Display.V1.FormattedValue

Access it like:

record[DISPLAY_PROP]

2. How to hide header fields

Use:

formContext.getControl("header_fieldname").setVisible(false);

Remember to include the header_ prefix.