Last modified: May 28, 2024

Group

🚧 This documentation is a work in progress.

Usage

Anatomy

Properties

The following is an autogenerated list of the properties available for Group based on the component’s JSON schema file (linked below).

We are currently updating how we implement components, and the list of properties may not be entirely accurate.

JSON schema

Required properties: id,type

PropertyTypeDescription

id

stringThe component ID. Must be unique within all layouts/pages in a layout-set. Cannot end with <dash><number>.

type

stringThe component type.

dataModelBindings

objectData model bindings for component
dataModelBindings.groupstringData model binding for repeating group connection to a group in the data model

textResourceBindings

objectText resource bindings for a component.
textResourceBindings.add_buttonstringAdd button
textResourceBindings.descriptionstringThe description text for the group
textResourceBindings.edit_button_closestringEdit button close
textResourceBindings.edit_button_openstringEdit button open
textResourceBindings.helpstringThe help text for the group
textResourceBindings.save_and_next_buttonstringSave and next button
textResourceBindings.save_buttonstringSave button
textResourceBindings.shortNamestringThe short name for the group (used in validation messages) (optional). If it is not specified, 'title' text is used.
textResourceBindings.titlestringThe title/label text for the group

children

arrayAn array of the "id" of child components belonging to the group.

edit

groupEditOptionsAlternatives for edit view of repeating group
groupEditOptions.addButtonbooleanBoolean or expression indicating whether add new button should be shown or not under the table.
groupEditOptions.alertOnDeletebooleanBoolean value indicating if warning popup should be displayed when attempting to delete a row
groupEditOptions.alwaysShowAddButtonbooleanBoolean value indicating whether add new button should be shown or not under the table when a group is open.
groupEditOptions.deleteButtonbooleanBoolean or expression indicating whether delete button should be shown or not for a given row
groupEditOptions.editButtonbooleanBoolean or expression indicating whether edit button should be shown or not for a given row
groupEditOptions.filterarrayConditions for filtering visible items in repeating group
groupEditOptions.modestringMode for how repeating group table is displayed in edit mode
Enum: [hideTable, likert, showAll, showTable, onlyTable]
groupEditOptions.multiPagebooleanBoolean value indicating if form components in edit mode should be shown over multiple pages/views.
groupEditOptions.openByDefaultBoolean 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.saveAndNextButtonbooleanBoolean or expression indicating whether save and go to next button should be shown or not in addition to save and close button
groupEditOptions.saveButtonbooleanBoolean or expression indicating whether save button should be shown or not for a given row

grid

objectSettings for the components grid. Used for controlling horizontal alignment.
Example(s): {xs: 12}
gridSettings.innerGridgridPropsOptional 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.labelGridgridPropsOptional grid for the component label. Used in combination with innerGrid to align labels on the side.
Example(s): {xs: 12}
See: gridProps

hidden

booleanBoolean value or expression indicating if the component should be hidden. Defaults to false.

hiddenRow

booleanBoolean to decide whether the row should be displayed.

maxCount

integerThe maximum number of iterations of a group. Only relevant if group is repeating.

pageBreak

object
pageBreak.breakAfterstringPDF 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.breakBeforestringPDF 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

panel

groupPanelOptionsAlternatives for panel view of repeating group
groupPanelOptions.groupReferenceobjectReference to the group that is being displayed in the panel. Used for referencing another repeating group context.
groupPanelOptions.groupReference.groupstringGroup reference. Can be either the group id or the group data model binding.
Example(s): the-group-id,some.model.theGroup
groupPanelOptions.iconAltstringAlternative text for the icon. Only applicable if iconUrl is provided. Can be plain text or a text resource reference.
groupPanelOptions.iconUrlstringUrl 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.showIconbooleanBoolean value indicating if the icon should be shown.
groupPanelOptions.variantstringChange the look of the panel.
Enum: [info, warning, success]

renderAsSummary

booleanBoolean or expression indicating if the component should be rendered as a summary. Defaults to false.

rowsAfter

arrayAn array of rows to be rendered after the group table (using Grid component configuration)

rowsBefore

arrayAn array of rows to be rendered before the group table (using Grid component configuration)

showGroupingIndicator

booleanBoolean to decide whether a vertical line indicating grouping of fields should be visible. Only relevant for non-repeating groups.

tableColumns

objectAn object containing key-value pairs where the key is a table header and the value is an object containing settings for the headers column

tableHeaders

arrayAn array of the id of child components that should be included as table headers. If not defined all components are shown.

Configuration

We are currently updating Altinn Studio Designer with more configuration options! The documentation is continuously updated, and there may be more settings available than what is described here, and some settings may be in beta version.

Add component

    You can add a component in Altinn Studio Designer by dragging it from the list of components to the page area. Selecting the component brings up its configuration panel.

    Basic component:

    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)
        }
      ]
    }
  }
}

    Examples