Option
A component that allows you to display an option from a code list
Usage
The Option component allows you to display an option from a code list. This can be useful if you have a value from a code list,
but want to display this to the user without the user being able to change this value. In other words, the Option component
is a read-only component, also known as a display component or presentation component.
An example of use could be that the municipality the user belongs to is retrieved from the National Population Register (DSF) and stored in the data model via prefilling. Even though the user should not change this value, it should be displayed for information, as all parts of the data model are part of the final submission. You can retrieve the list of municipalities from common shared code lists to look up the municipality number and display the municipality name.
Anatomy
- Horizontal: An option structured horizontally
Option horizontal - Vertical: An option structured vertically
Option vertical
Related
Properties
| Property | Type | Description |
|---|---|---|
id | string | The component ID. Must be unique within all layouts/pages in a layout set. Cannot end with |
value | number | A value from the code list. This property can be a dynamic expression that retrieves this value from e.g. the data model. |
textResourceBindings.title | string | Title (optional) |
textResourceBindings.description | string | Description (optional) |
textResourceBindings.help | string | Help text (optional) |
direction | string | Sets the structured direction of the title and value. Enum: [horizontal, vertical] Default: horizontal |
icon | string | The path to an icon to be displayed in connection with the choice (optional) |
In addition, all properties for connecting to code lists are supported.
Configuration
Add the component to the layout
{
"id": "municipality",
"type": "Option",
"textResourceBindings": {
"title": "Municipality",
},
"value": ["dataModel", "Prefill.MunicipalityNumber"],
"direction": "vertical",
"optionsId": "kommuner"
}
Adding title, value and direction
textResourceBindings.title
Label for the choice. This can be added as a hardcoded string or as a reference to a text resource. This property is used to show the user what the choice is about, not what the choice is. If you want to show the selected municipality, this could be e.g. “Municipality” or “Your municipality”. The actual choice (value) is retrieved from the code list, and is then displayed as e.g. “Oslo”.
textResourceBindings.description
Description for the choice. This can be added as a hardcoded string or as a reference to a text resource.
textResourceBindings.help
Help text for the choice. This can be added as a hardcoded string or as a reference to a text resource.
value
Here you specify the value to be displayed. This must match a value in the code list. The value can also be determined by a dynamic expression.
direction
Determines whether the choice is displayed below or next to the label. horizontal for next to the label and vertical for below.