Gruppering av felter

Hvordan gruppere felter i skjema.

På denne siden:

Støtte for gruppering av felter er på plass i appene, men ikke i Altinn Studio. Oppsettet må gjøres manuelt inntil videre. Dokumentasjonen oppdateres når støtte for oppsett er på plass i Altinn Studio.

Oppsett

Felter i skjema kan settes opp til å bli del av en gruppe. Dette kan brukes til å f.eks. sette opp dynamikk på en enkelt gruppe av felter, i stedet for på hvert enkelt felt. I tillegg må felter kunnne grupperes for å støtte repeterende grupper i skjema.

En gruppe settes opp i FormLayout.json, sammen med de andre komponentene i skjemaet. Noen punkter å notere seg:

  • Gruppen må ligge før ev. komponenter som skal inngå i gruppen i FormLayout.json.
  • En gruppe ha type: "group" satt for at den skal registreres som en gruppe

Eksempel på en (repeterende) gruppe definert i FormLayout.json som inneholder 4 felter som kan repetere 3 ganger: En gruppe defineres på følgende måte i FormLayout.json:

{
  "id": "<unik-id>",
  "type": "group",
  "dataModelBindings": {
    "group": "<gruppen i datamodellen (kun repeterende grupper)>"
  },
  "maxCount": <Antall ganger gruppen kan repetere>,
  "children": [
    "<felt-id>",
    "<felt-id>",
    ...
  ]
}
Parameter Påkrevd Beskrivelse
id Ja Unik ID, tilsvarer ID på andre komponenter. Må være unik i FormLayout.json-filen.
type Ja MÅ være “group”. Sier at dette er en gruppe.
dataModelBindings Nei MÅ være satt for repeterende grupper, med group-parameteren som i eksempelet over. Skal peke på den repeterende gruppen i datamodellen.
maxCount Ja Antall ganger en gruppe kan repetere. Settes til 1 om gruppen ikke er repeterende.
children Ja Liste over de feltene som skal inngå i gruppen. Her brukes felt-id fra FormLayout.json

Repeterende grupper

Grupper i datamodellen inneholder ett eller flere felter. Grupper er definert som repeterende dersom de har maxOccurs > 1 i xsd’en. En gruppe som er repeterende i datamodellen må også settes opp som repeterende i skjemaet, ellers vil lagring av data feile.

Eksempel

Skjema med noen enkelt-felt, og en repeterende gruppe som:

  • inneholder 3 felter
  • kan repeteres opp til 3 ganger
Skjema med repeterende gruppe

Skjema med repeterende gruppe

Oppsett i FormLayout.json fra eksempelet over:

  1{
  2  "data": {
  3    "layout": [
  4      {
  5        "id": "info-intro",
  6        "type": "Paragraph",
  7        "componentType": 1,
  8        "textResourceBindings": {
  9          "title": "info.intro"
 10        },
 11        "dataModelBindings": {}
 12      },
 13      {
 14        "id": "person-name",
 15        "type": "Input",
 16        "componentType": 2,
 17        "textResourceBindings": {
 18          "title": "person.name"
 19        },
 20        "dataModelBindings": {
 21          "simpleBinding": "person.name"
 22        },
 23        "required": true,
 24        "readOnly": false
 25      },
 26      {
 27        "id": "person-email",
 28        "type": "Input",
 29        "componentType": 2,
 30        "textResourceBindings": {
 31          "title": "person.email"
 32        },
 33        "dataModelBindings": {
 34          "simpleBinding": "person.email"
 35        },
 36        "required": true,
 37        "readOnly": false
 38      },
 39      {
 40        "id": "restaurant-about",
 41        "type": "Paragraph",
 42        "componentType": 1,
 43        "textResourceBindings": {
 44          "title": "restaurant.about"
 45        },
 46        "dataModelBindings": {}
 47      },
 48      {
 49        "id": "restaurants-group",
 50        "type": "group",
 51        "dataModelBindings": {
 52          "group": "restaurants"
 53        },
 54        "maxCount": 3,
 55        "children": [
 56          "restaurant-name",
 57          "restaurant-city",
 58          "restaurant-reason"
 59        ]
 60      },
 61      {
 62        "id": "restaurant-name",
 63        "type": "Input",
 64        "componentType": 2,
 65        "textResourceBindings": {
 66          "title": "restaurant.name"
 67        },
 68        "dataModelBindings": {
 69          "simpleBinding": "restaurants.name"
 70        },
 71        "required": true,
 72        "readOnly": false
 73      },
 74      {
 75        "id": "restaurant-city",
 76        "type": "Input",
 77        "componentType": 2,
 78        "textResourceBindings": {
 79          "title": "restaurant.city"
 80        },
 81        "dataModelBindings": {
 82          "simpleBinding": "restaurants.city"
 83        },
 84        "required": true,
 85        "readOnly": false
 86      },
 87      {
 88        "id": "restaurant-reason",
 89        "type": "TextArea",
 90        "componentType": 3,
 91        "textResourceBindings": {
 92          "title": "restaurant.reason"
 93        },
 94        "dataModelBindings": {
 95          "simpleBinding": "restaurants.reason"
 96        },
 97        "required": true,
 98        "readOnly": false
 99      },
100      {
101        "id": "submit-button",
102        "type": "Button",
103        "componentType": 9,
104        "textResourceBindings": {
105          "title": "Send inn"
106        },
107        "dataModelBindings": {},
108        "textResourceId": "Standard.Button.Button",
109        "customType": "Standard"
110      }
111    ]
112  }
113}