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.