Last modified: May 28, 2024

Grouping of fields

Setup for non-repeating groups

Fields in a form can be set up to be part of a group. This can be used to e.g. set up dynamics on multiple fields/components at once, instead of having to configure them for each single field. Visually, a group of fields will not look much different than configuring individual fields.

A group is set up in FormLayout.json, together with the other components in the form. This can be done manually directly in the file, or through form editor in Altinn Studio by using the group component.

Here is an example of a (non-repeating) group configuration that contains two fields: A group is defined as follows in FormLayout.json:

[
  {
    "id": "<unique-id>",
    "type": "Group",
    "children": [
      "field1",
      "field2"
    ]
  },
  {
    "id": "field1",
    "type": "Input",
    "textResourceBindings": {
      "title": "Field 1"
    },
    "dataModelBindings": {
      "simpleBinding": "field1"
    },
    "required": true
  },
  {
    "id": "field2",
    "type": "Input",
    "textResourceBindings": {
      "title": "Field 2"
    },
    "dataModelBindings": {
      "simpleBinding": "field2"
    },
    "required": true
  }
]

    Parameters

    ParameterRequiredDescription
    idYesUnique ID, same as ID on other components. Must be unique in the layout file, and should be unique across pages.
    typeYesMust be ‘Group’
    textResourceBindingsNoCan be set for groups, see description.
    childrenYesList of the component IDs that are to be included in the group.
    groupingIndicatorNoCan be "indented" or "panel". Indent shows a vertical line to the left of the group, and panel shows the group as a blue panel to indicate that the fields are related.

    textResourceBindings

    It is possible to add different keys in textResourceBindings:

    • title - Sets the group title. If not set, the components in the group will display just as if they were not part of a group (with no title above them)
    • description - Sets the group body text. This is displayed below the title, and above the components in the group.

    Visual grouping of components

    It is possible to visually group components together. This can be done by setting the groupingIndicator parameter to indent or panel on the group component.

    Panel

    Gruppe as panel
    Gruppe with panel view

    Indented

    Visually grouped
    Grouped with indented line

    Parameters

    ParameterRequiredDescription
    idYesUnique ID, same as ID on other components. Must be unique in the layout file, and should be unique across pages.
    typeYesMust be ‘Group’
    textResourceBindingsNoCan be set for groups, see description.
    maxCountNoThe number of times a group can repeat. Must be omitted or set to 0 for non-repeating groups, otherwise the group becomes a repeating group.
    childrenYesList of the component IDs that are to be included in the group.
    showGroupingIndicatorNoShows a vertical line to the left of the group to indicate that the fields are related. Can be true or false.

    textResourceBindings

    It is possible to add different keys in textResourceBindings:

    • title - Sets the group title. If not set, the components in the group will display just as if they were not part of a group (with no title above them)
    • body - Sets the group body text. This is displayed below the title, and above the components in the group.