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.