You can control how a ViewModel value is displayed by setting a formatting tagged value on its ViewModel column; use this page when you need dates, times, durations, or numbers to appear in a specific textual form.

Choose a formatting strategy

MDriven clients do not all format values in the same way. Set the tagged value that matches the client technology that renders your ViewModel.

Client technology	Tagged value	Use it for	Editing consideration
WPF	StringFormat	Common text formatting for numbers, DateTime values, and TimeSpan values.	WPF can retain the original value while applying the format, including when the value is editable and two-way bound.
Blazor	StringFormat	Common text formatting for numbers, DateTime values, and TimeSpan values.	Verify the result in the target client.
MVC	StringFormat	Common text formatting.	Use the format appropriate to the binding and client rendering.
MVC	StringFormatRazor	Formatting performed in Razor code, primarily for displayed values.	Write-back formatting is harder; use it primarily for one-way, read-only presentation.
Angular	StringFormatAngular	An Angular filter appended to the binding. Use it for date, number, and currency display.	Angular does not handle this formatting well for two-way-bound editing. Use it primarily for read-only values.

Format a ViewModel column

1. Open the ViewModel in MDriven Designer and select the column whose displayed value you want to change.
2. Add a tagged value to that ViewModel column.
3. Choose the tag name for the client that renders the ViewModel. For example, use StringFormatAngular for an Angular client or StringFormat for WPF.
4. Enter the format value.
5. Generate or run the application and verify both the displayed value and, where applicable, the editing behavior.

For example, if Attribute1 is a double and an Angular view should display two decimal places, add this tagged value to the column:

Tagged value name	Tagged value value
StringFormatAngular	number:2

The rendered number is limited to two decimal places and uses a thousands separator. This format is intended for display, so test carefully if users must edit the same value.

Angular number formats

Use StringFormatAngular to append an Angular filter after the binding.

Value	Result
number:2	Displays a number with two decimal places. For example, a value such as 1234.567 is displayed with a thousands separator and two decimal places.
numberhash:2	Requires two decimal places, then shows available lower decimal places beyond those two. Its behavior corresponds to C# ToString('0.00######').

Use numberhash:2 when two decimals are required but you do not want to discard meaningful additional decimals. For example, a value with only two decimal places remains at two decimals, while a value with additional non-zero decimal precision can show that precision.

Angular can also transform dates, numbers, and currency through its filters. The browser and its language, regional, and currency settings can affect how a numeric or date format is presented to the user. Test the application in the browsers and locales your users use.

WPF, Blazor, and MVC formatting

For WPF, Blazor, and MVC, put the desired common text format in StringFormat. Use it for numbers, dates and times, and TimeSpan values.

WPF applies the format through its binding behavior. This means a user can see a formatted value while the control still works with the underlying value during two-way editing. For example, apply StringFormat to a numeric ViewModel column when the value must display with a chosen decimal representation but remain editable.

For MVC read-only output that needs Razor formatting, use StringFormatRazor. Razor formatting is best suited to one-way display because formatting values written back by the user is more difficult.

Keep formatting separate from styling

Use tagged values for the textual representation of a value. Use the ViewModel column's Style ref and CSS-related mechanisms for visual appearance such as typography, colours, spacing, and layout. Do not rely on style information to carry a format string; keeping the format in a tagged value makes the intent explicit and avoids mixing presentation concerns.

For example:

• Use StringFormatAngular = number:2 to control how a numeric value is written.
• Use Style ref to apply a visual class to the control that displays the value.

For CSS and style-reference behavior in Bootstrap, Angular, and MVC, see HowTos:Styling and CSS for Bootstrap, Angular and MVC. For Turnkey modifier classes, see Documentation:Turnkey Styling and Documentation:MDriven Stylesheet.

Related input behavior

Text formatting changes the value shown to the user; it does not add input hints or change an HTML input type.

• To add guidance below an input, use helper text.
• To show a hint while an input is empty, use a <ViewModelColumn>_Placeholder column as described in Documentation:Databound Placeholder text.
• To choose an input type such as email, telephone, URL, or password, use the Texttype tagged value described in Documentation:Input Controls.

See also

• Documentation:Input Controls
• Documentation:Databound Placeholder text
• HowTos:Styling and CSS for Bootstrap, Angular and MVC
• Documentation:Turnkey Styling
• Documentation:Formatting and Styling Buttons