Group
🚧 Denne dokumentasjonen er under oppdatering.
Bruk
Anatomi
Egenskaper
Følgende er en liste over tilgjengelige egenskaper for Group. Listen er automatisk generert basert på komponentens JSON schema (se link).
Vi oppdaterer for øyeblikket hvordan vi implementerer komponenter. Listen over egenskaper kan derfor være noe unøyaktig.
Required properties: id
,type
Property | Type | Description |
---|---|---|
| string | The component ID. Must be unique within all layouts/pages in a layout-set. Cannot end with <dash><number>. |
| string | The component type. |
| object | Data model bindings for component |
dataModelBindings.group | string | Data model binding for repeating group connection to a group in the data model |
| object | Text resource bindings for a component. |
textResourceBindings.add_button | string | Add button |
textResourceBindings.description | string | The description text for the group |
textResourceBindings.edit_button_close | string | Edit button close |
textResourceBindings.edit_button_open | string | Edit button open |
textResourceBindings.help | string | The help text for the group |
textResourceBindings.save_and_next_button | string | Save and next button |
textResourceBindings.save_button | string | Save button |
textResourceBindings.shortName | string | The short name for the group (used in validation messages) (optional). If it is not specified, 'title' text is used. |
textResourceBindings.title | string | The title/label text for the group |
| array | An array of the "id" of child components belonging to the group. |
| groupEditOptions | Alternatives for edit view of repeating group |
groupEditOptions.addButton | boolean | Boolean or expression indicating whether add new button should be shown or not under the table. |
groupEditOptions.alertOnDelete | boolean | Boolean value indicating if warning popup should be displayed when attempting to delete a row |
groupEditOptions.alwaysShowAddButton | boolean | Boolean value indicating whether add new button should be shown or not under the table when a group is open. |
groupEditOptions.deleteButton | boolean | Boolean or expression indicating whether delete button should be shown or not for a given row |
groupEditOptions.editButton | boolean | Boolean or expression indicating whether edit button should be shown or not for a given row |
groupEditOptions.filter | array | Conditions for filtering visible items in repeating group |
groupEditOptions.mode | string | Mode for how repeating group table is displayed in edit mode Enum: [hideTable, likert, showAll, showTable, onlyTable] |
groupEditOptions.multiPage | boolean | Boolean value indicating if form components in edit mode should be shown over multiple pages/views. |
groupEditOptions.openByDefault | 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. | |
groupEditOptions.saveAndNextButton | boolean | Boolean or expression indicating whether save and go to next button should be shown or not in addition to save and close button |
groupEditOptions.saveButton | boolean | Boolean or expression indicating whether save button should be shown or not for a given row |
| object | Settings for the components grid. Used for controlling horizontal alignment. Example(s): {xs: 12} |
gridSettings.innerGrid | 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 |
gridSettings.labelGrid | gridProps | Optional grid for the component label. Used in combination with innerGrid to align labels on the side. Example(s): {xs: 12} See: gridProps |
| boolean | Boolean value or expression indicating if the component should be hidden. Defaults to false. |
| boolean | Boolean to decide whether the row should be displayed. |
| integer | The maximum number of iterations of a group. Only relevant if group is repeating. |
| object | |
pageBreak.breakAfter | 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 |
pageBreak.breakBefore | 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 |
| groupPanelOptions | Alternatives for panel view of repeating group |
groupPanelOptions.groupReference | object | Reference to the group that is being displayed in the panel. Used for referencing another repeating group context. |
groupPanelOptions.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 |
groupPanelOptions.iconAlt | string | Alternative text for the icon. Only applicable if iconUrl is provided. Can be plain text or a text resource reference. |
groupPanelOptions.iconUrl | 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 |
groupPanelOptions.showIcon | boolean | Boolean value indicating if the icon should be shown. |
groupPanelOptions.variant | string | Change the look of the panel. Enum: [info, warning, success] |
| boolean | Boolean or expression indicating if the component should be rendered as a summary. Defaults to false. |
| array | An array of rows to be rendered after the group table (using Grid component configuration) |
| array | An array of rows to be rendered before the group table (using Grid component configuration) |
| boolean | Boolean to decide whether a vertical line indicating grouping of fields should be visible. Only relevant for non-repeating groups. |
| object | An object containing key-value pairs where the key is a table header and the value is an object containing settings for the headers column |
| array | An array of the id of child components that should be included as table headers. If not defined all components are shown. |
Konfigurering
Vi oppdaterer for øyeblikket Altinn Studio med flere muligheter for innstillinger!
Dokumentasjonen oppdateres fortløpende, men det kan være flere innstillinger tilgjengelig enn det som beskrives her og noen innstillinger kan være i betaversjon.
Legg til komponent
Du kan legge til en komponent i Altinn Studio Designer ved å dra den fra komponent-listen til sideområdet.
Når du velger komponenten, vises innstillingspanelet for den.
Grunnleggende komponent:
App/ui/layouts/{page}.json
{
"$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
{
"data": {
"layout": [
{
// Basic component (required properties)
}
]
}
}
}