Vis/skjul meny
Altinn Studio / Reference / User interface / Components / CommonProps
Common Component Properties
Description of common property definitions used by components
The following list is autogenerated from this JSON schema file and provides a brief description of all the available common component properties.
Type: string
Description: The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.
Enum: [on, off, name, honorific-prefix, given-name, additional-name, family-name, honorific-suffix, nickname, email, username, new-password, current-password, one-time-code, organization-title, organization, street-address, address-line1, address-line2, address-line3, address-level4, address-level3, address-level2, address-level1, country, country-name, postal-code, cc-name, cc-given-name, cc-additional-name, cc-family-name, cc-number, cc-exp, cc-exp-month, cc-exp-year, cc-csc, cc-type, transaction-currency, transaction-amount, language, bday, bday-day, bday-month, bday-year, sex, tel, tel-country-code, tel-national, tel-area-code, tel-local, tel-extension, url, photo]
Description: The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.
Enum: [on, off, name, honorific-prefix, given-name, additional-name, family-name, honorific-suffix, nickname, email, username, new-password, current-password, one-time-code, organization-title, organization, street-address, address-line1, address-line2, address-line3, address-level4, address-level3, address-level2, address-level1, country, country-name, postal-code, cc-name, cc-given-name, cc-additional-name, cc-family-name, cc-number, cc-exp, cc-exp-month, cc-exp-year, cc-csc, cc-type, transaction-currency, transaction-amount, language, bday, bday-day, bday-month, bday-year, sex, tel, tel-country-code, tel-national, tel-area-code, tel-local, tel-extension, url, photo]
Type: object
Description: Text resource bindings for a component.
Required:
Description: Text resource bindings for a component.
Required:
title| Property | Type | Description |
|---|---|---|
| string | The description text for the component |
| string | The help text for the component |
| string | The short name for the component (used in validation messages) (optional). If it is not specified, 'title' text is used. |
| string | The text shown in column title when component is used in repeating group (optional). If it is not specified, 'title' text is used. |
| string | The title/label text for the component |
See: tableColumnOptions
Required:
Required:
component| Property | Type | Description |
|---|---|---|
| string | The ID of the component to be rendered in the cell |
See: tableColumnOptions
Required:
Required:
text| Property | Type | Description |
|---|---|---|
| string | The text or text resource ID to be rendered in the cell |
| Property | Type | Description |
|---|---|---|
| gridProps | Optional grid for inner component content like input field or dropdown. Used to avoid inner content filling the component width. Example(s): {xs: 12}See: gridProps |
| gridProps | Optional grid for the component label. Used in combination with innerGrid to align labels on the side. Example(s): {xs: 12}See: gridProps |
| Property | Type | Description |
|---|---|---|
| boolean | Boolean or expression indicating whether add new button should be shown or not under the table. |
| boolean | Boolean value indicating if warning popup should be displayed when attempting to delete a row |
| boolean | Boolean value indicating whether add new button should be shown or not under the table when a group is open. |
| boolean | Boolean or expression indicating whether delete button should be shown or not for a given row |
| boolean | Boolean or expression indicating whether edit button should be shown or not for a given row |
| array | Conditions for filtering visible items in repeating group |
| string | Mode for how repeating group table is displayed in edit mode Enum: [hideTable, likert, showAll, showTable, onlyTable] |
| boolean | Boolean value indicating if form components in edit mode should be shown over multiple pages/views. |
| Boolean or string indicating if group should be opened by default. If no items exist: 'first', 'last', and true adds a new item. If items exist already, true does not open anything, but 'first' opens the first item, and 'last' opens the last item in the group. | |
| boolean | Boolean or expression indicating whether save and go to next button should be shown or not in addition to save and close button |
| boolean | Boolean or expression indicating whether save button should be shown or not for a given row |
| Property | Type | Description |
|---|---|---|
| object | Reference to the group that is being displayed in the panel. Used for referencing another repeating group context. |
groupReference.group | string | Group reference. Can be either the group id or the group data model binding. Example(s): the-group-id,some.model.theGroup |
| string | Alternative text for the icon. Only applicable if iconUrl is provided. Can be plain text or a text resource reference. |
| string | Url of the icon to be shown in panel. Can be relative if hosted by app or full if referencing a cdn or other hosting. Example(s): fancyIcon.svg,https://cdn.example.com/fancyIcon.svg |
| boolean | Boolean value indicating if the icon should be shown. |
| string | Change the look of the panel. Enum: [info, warning, success] |
Type: object
| Property | Type | Description |
|---|---|---|
| string | PDF only: Value or expression indicating whether a page break should be added after the component. Can be either: 'auto' (default), 'always', or 'avoid'. Example(s): auto,always,avoid |
| string | PDF only: Value or expression indicating whether a page break should be added before the component. Can be either: 'auto' (default), 'always', or 'avoid'. Example(s): auto,always,avoid |
Description: Boolean or expression indicating if the component should be presented as read only. Defaults to false. <br /> <i>Please note that even with read-only fields in components, it may currently be possible to update the field by modifying the request sent to the API or through a direct API call.<i/>
Default:
Default:
false| Property | Type | Description |
|---|---|---|
| string | Choose text alignment between 'left', 'center', or 'right' for text in table cells. Defaults to 'left' for text and 'right' for numbers. Enum: [left, center, right] |
| Use this property to controll behaviour when text is too large to be displayed in table cell. | |
textOverflow.lineWrap | boolean | Toggle line wrapping on or off. Defaults to true |
textOverflow.maxHeight | number | Determines the number of lines to display in table cell before hiding the rest of the text with an elipsis (...). Defaults to 2. |