Fields widget

To create a fields widget the following configurations need to be done.

Configure widget

• Widget title The widget title is presented in the UI at the top-left corner of the widget and should describe the content for that widget.

• Configure widget fields Each field can be configured to display case data in a certain way.

Configure widget fields

For each field that is added to the widget the following configuration is required in order to display the data correctly in the UI.

• Field title This is presented as the label of the field

• Field value Add the exact path to the data in the JSON document.

• Display type Select the way the data is presented in the UI. Please find the available display types below.

Display types

The following display types are supported in the case widgets configuration.

Display type	Presentation
Text	Value is presented in the UI as regular text.
Yes/No	This converts a Boolean value to "Yes"/"No".
Date	Accepts a UTC date string as input. A format can be specified for how you wish the date to be displayed (this is optional).
Number	The number display type is based on the DecimalPipe* from Angular. Optional formatting can be specified for how you wish the number to be displayed.
Percentage	The percentage display type is based on the PercentPipe* from Angular. Optional formatting can be specified for how you wish the percentage to be displayed. By default any value is divided by 100, unless a format is specified. This has been done because of the values that the Angular PercentPipe* expects.
Currency	The currency display type is based on the CurrencyPipe* from Angular. Optional formatting can be specified for how you wish the currency to be displayed.
Enum	Enum (or enumerate) is meant to assign a value to a key as to display data more accurately. The key is stored in the JSON document, the value is configured in the enum, based on the key the corresponding value is displayed.

Below descriptions are from the following Angular documentation pages:

• https://v17.angular.io/api/common/DecimalPipe
• https://v17.angular.io/api/common/PercentPipe
• https://v17.angular.io/api/common/CurrencyPipe

*Angular DecimalPipe

The value's decimal representation is specified by the digitsInfo parameter, written in the following format:

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

• minIntegerDigits: Minimum number of integer digits before the decimal point. Default is 1.

• minFractionDigits: Minimum number of digits after the decimal point. Default is 0.

• maxFractionDigits: Maximum number of digits after the decimal point. Default is 3.

If the formatted value is truncated it will be rounded using the "to-nearest" method:

{{3.6 | number: '1.0-0'}}
<!--will  '4'-->

{{-3.6 | number:'1.0-0'}}
<!--will  '-4'-->

*Angular PercentPipe

Decimal representation options, specified by a string in the following format: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

• minIntegerDigits: Minimum number of integer digits before the decimal point. Default is 1.

• minFractionDigits: Minimum number of digits after the decimal point. Default is 0.

• maxFractionDigits: Maximum number of digits after the decimal point. Default is 0.

*Angular CurrencyPipe

The format for the currency indicator. One of the following:

• code: Show the code (such as USD).

• symbol(default): Show the symbol (such as $).

• symbol-narrow: Use the narrow symbol for locales that have two symbols for their currency. For example, the Canadian dollar CAD has the symbol CA$ and the symbol-narrow $. If the locale has no narrow symbol, uses the standard symbol for the locale.

• String: Use the given string value instead of a code or a symbol. For example, an empty string will suppress the currency & symbol.

• Boolean (marked deprecated in v5): true for symbol and false for code.

Widget columns

The fields widget is also able to display data on multiple columns. As such a column can be added or removed. However you cannot have more columns than the width of the widget (For example, if a widget has a width set to Medium you cannot add more than 2 columns to it)