Multiple pages within a group

How to show components in a group in multiple pages

Multiple pages within group-display

When entering data in a group, there may be incidents where each element in the group contains multiple fields, which may result in a lot of scrolling and confusion for the user. To solve this, there has been implemented a possibility to split the fill out over multiple pages, which the user can navigate through while filling out the group element. The navigation takes place within a layout, and updates only the display within the editing area of the group.

To make use of this functionality, you will have to prefix the components in the children list with a number indicating which “page” of the fill out the component should be displayed on, followed by :. We start the count on 0, that is to say components to be displayed on the first “page” must be prefixed with 0:. Components to be displayed on the second page must be prefixed with 1:, and so on. In addition, you must set "multiPage": true in the edit-parameter. See example below:

{
  "id": "Some-group-id",
  "type": "RepeatingGroup",
  "children": [
    "0:fnr",
    "1:fornavn",
    "1:mellomnavn",
    "1:etternavn"
  ],
  "maxCount": 10,
  "dataModelBindings": {
    "group": "familie.barn"
  },
  "edit": {
    "multiPage": true,
    "mode": "hideTable",
  }
}

{
  "id": "Some-group-id",
  "type": "Group",
  "children": [
    "0:fnr",
    "1:fornavn",
    "1:mellomnavn",
    "1:etternavn"
  ],
  "maxCount": 10,
  "dataModelBindings": {
    "group": "familie.barn"
  },
  "edit": {
    "multiPage": true,
    "mode": "hideTable",
  }
}

Here a mode that hides the table when editing has also been added. The result will be as displayed below.