Display Values

Read-only building blocks for record pages: a status badge, a postal address, and a way to read a column's value in code without decoding the wire format.

Reading a column's value

To branch on a value (tint a status, show a flag, compare a date), read the column's raw value instead of its label, which is localized. In React, useColumnValue(columnName) returns the value of a column of the surrounding RecordContext as a plain JavaScript type, with the formatted string and the column's metadata alongside it. In Blazor, read the typed value from the record with GetValueOrDefault<T>. Either way, a column that is empty or withheld by column security reads as null; CanReadColumn tells the two apart.

React Blazor

Outside a RecordContext, such as in a grid cell renderer or a chart tooltip, call readColumnRawValue(record, columnName) from @powerportalspro/core on the record you hold.

Status badge

ColumnStatusBadge shows the record's status reason (statuscode) and takes its colour from the state (statecode): a brand tint while active, a neutral outline otherwise. The colour comes from the state's value, not its label, so it holds in every language. Nothing renders when the label is empty or withheld.

React example Blazor example React TypeScript Razor
Contoso Ltd Active
Fabrikam, Inc. Inactive

Custom tones

For a table with more than two states, pass a Tone function that maps the state's value to a badge colour and appearance. It receives null when the state is empty or withheld.

React Blazor

Address

AddressDisplayValue renders one of a table's addresses (address1, address2, …) in an <address> element, with the same label as ColumnDisplayValue. It shows Dataverse's _composite column when the user may read it. Otherwise it composes the street lines, then city, region and postal code, then the country, which it leaves off when it matches HomeCountry.

React example Blazor example React TypeScript Razor
1 Microsoft Way
Building 92
Redmond, WA 98052
70 Wilson Street
London, EC2A 2DB
United Kingdom
React Blazor

ColumnStatusBadge Class

Parameters

Name
Type
Default
Description
IsVisiblebool
True
Is the badge visible.
LabelColumnstring
statuscode
Column whose formatted value is the badge's text. Defaults to statuscode, the status reason; use statecode for a table whose status reason isn't readable.
SizeBadgeSize?
Badge size. Defaults to Fluent's own.
StateColumnstring
statecode
Column whose value decides the tone. Defaults to statecode.
ToneFunc<int?, StatusBadgeTone>?
Picks the tone from the state column's value — null when it is empty or withheld. Defaults to StatusBadgeTone.Default(System.Nullable{System.Int32}): a brand tint for active (0), a neutral outline otherwise. Supply one for a table with more than two states.
Name: IsVisible
Type: bool
Default: True
Description: Is the badge visible.
Name: LabelColumn
Type: string
Default: statuscode
Description: Column whose formatted value is the badge's text. Defaults to statuscode, the status reason; use statecode for a table whose status reason isn't readable.
Name: Size
Type: BadgeSize?
Description: Badge size. Defaults to Fluent's own.
Name: StateColumn
Type: string
Default: statecode
Description: Column whose value decides the tone. Defaults to statecode.
Name: Tone
Type: Func<int?, StatusBadgeTone>?
Description: Picks the tone from the state column's value — null when it is empty or withheld. Defaults to StatusBadgeTone.Default(System.Nullable{System.Int32}): a brand tint for active (0), a neutral outline otherwise. Supply one for a table with more than two states.
React Blazor

AddressDisplayValue Class

Parameters

Name
Type
Default
Description
Descriptionstring?
Description to be displayed in the tooltip. Falls back to the {Prefix}_composite column's description.
DisplayLabelWhenAvailablebool
True
Specifies whether to display a label if available.
DisplayTooltipWhenAvailablebool
True
Specifies whether to display a tooltip if available.
EmptyPlaceholderstring
—
Text shown when the address is empty. Defaults to an em-dash; pass an empty string to suppress.
HomeCountrystring?
The country to leave off a composed address, e.g. 'United States' for a portal whose addresses are almost all domestic. Compared ignoring case and accents. Doesn't apply when the address is Dataverse's own composite, which is shown as Dataverse formats it.
IsVisiblebool
True
Is the address visible.
Labelstring?
Text to be displayed as a label. Falls back to the {Prefix}_composite column's label, e.g. 'Address 1'.
Prefixstring
address1
The address's column prefix — address1, address2, or a custom address's prefix. The parts are read from {Prefix}_line1…3, _city, _stateorprovince, _postalcode, _country and _composite. Defaults to address1.
Name: Description
Type: string?
Description: Description to be displayed in the tooltip. Falls back to the {Prefix}_composite column's description.
Name: DisplayLabelWhenAvailable
Type: bool
Default: True
Description: Specifies whether to display a label if available.
Name: DisplayTooltipWhenAvailable
Type: bool
Default: True
Description: Specifies whether to display a tooltip if available.
Name: EmptyPlaceholder
Type: string
Default: —
Description: Text shown when the address is empty. Defaults to an em-dash; pass an empty string to suppress.
Name: HomeCountry
Type: string?
Description: The country to leave off a composed address, e.g. 'United States' for a portal whose addresses are almost all domestic. Compared ignoring case and accents. Doesn't apply when the address is Dataverse's own composite, which is shown as Dataverse formats it.
Name: IsVisible
Type: bool
Default: True
Description: Is the address visible.
Name: Label
Type: string?
Description: Text to be displayed as a label. Falls back to the {Prefix}_composite column's label, e.g. 'Address 1'.
Name: Prefix
Type: string
Default: address1
Description: The address's column prefix — address1, address2, or a custom address's prefix. The parts are read from {Prefix}_line1…3, _city, _stateorprovince, _postalcode, _country and _composite. Defaults to address1.