Oppsummeringsvisning

Hvordan sette opp visning av oppsummering av utfylt skjema.

På denne siden:

Oppsett må gjøres manuelt inntil videre. Støtte for oppsett via Altinn Studio kommer på et senere tidspunkt.

MERK: PDF-genereringen har per nå ikke støtte for oppsummerings-komponenten. For at PDF-generering skal fungere må enten alle oppsummerings-komponentene, eller hele oppsummerings-siden(e) ekskluderes fra PDF. Dette gjøres i Settings.json-filen knyttet til layout-filene.

Oppsett

Visning av oppsummering settes opp på samme måte som øvrige skjema-komponenter i et skjema. Man kan velge å ha oppsummeringen på en egen side, eller på samme side som andre skjema-komponenter.

Oppsummerings-komponenten er meget enkel, og refererer til komponent som skal oppsummeres, og siden denne ligger på. Eksempel:

{
    "id": "summary-1",
    "type": "Summary",
    "componentRef": "<komponent-id>",
    "pageRef": "<side komponenten er definert på>"
},

Komponenten viser oppsummering av data fra den spesifiserte komponenten. I tillegg får sluttbruker mulighet til å gå tilbake til den aktuelle komponenten/siden for å gjøre endringer.

Visningen er litt forskjellig avhengig av hva slags skjemakomponent oppsummeringen refererer til.

Merk: PDF-generering støtter ikke oppsummering side, så må den ekskluderes ved å endre ui/Settings.json

"pages": 
      { 
        "excludeFromPdf": [ "navn-til-oppsummering-side" ] 
      }

Tekstressurser

Som nevnt over er oppsummeringskomponenten enkel med oppsummering av data fra en annen komponent, men det er to tilfeller hvor det er mulig å sette opp egne tekstressurser for oppsummeringskomponenten:

  • title-feltet i textResourceBindings kan brukes for å sette en label/tittel for oppsummeringen. Hvis dette er satt, vil den overstyre en evt. tittel som er satt på komponenten som oppsummeres.
  • accessibleTitle-feltet i textResourceBindings kan brukes for å egendefinere aria-label til endre-knappen som ellers bruker title-feltet
{
    "id": "summary-1",
    "type": "Summary",
    "componentRef": "<komponent-id>",
    "pageRef": "<side komponenten er definert på>",
    "textResourceBindings": {
        "title": "Egendefinert tittel",
        "accessibleTitle": "Egendefinert aria-label"
    }
},

Enkel skjemakomponent

Dette er skjemakomponenter som kun er knyttet til 1 felt i datamodellen. F.eks. Input, Dropdown, Checkbox/Radio, osv.

Oppsummering enkel skjemakomponent

Oppsummering enkel skjemakomponent

Oppsummeringen viser ledeteksten til skjemakomponenten, og tilknyttet data. Dersom det er en aktiv feilmelding knyttet til skjemakomponenten, vil dette også vises.

Oppsummering enkel skjemakomponent med feil

Oppsummering enkel skjemakomponent med feil

Adressekomponent

Denne komponenten har flere felter som inngår. Visningen er lik som for en enkel skjemakomponent, slik at feltene blir slått sammen til en enkel tekst.

Oppsummering adressekomponent, med feil

Oppsummering adressekomponent, med feil

Filvedlegg

Oppsummeringsvisningen for filvedlegg viser en liste over de vedleggene som er lastet opp for den aktuelle komponenten.

Oppsummering vedleggskomponent

Oppsummering vedleggskomponent

Grupper

Peker man på en Group-komponent vil en oppsummering vises for alle under-komponentene i gruppa.

Oppsummering for gruppe

Oppsummering for gruppe

Det er også mulig å ekskludere enkelte under-komponenter fra å vise i uppsummeringen ved å bruke excludedChildren-egenskapen. Denne egenskapen skal innholde en liste over komponent-IDer man ikke ønsker vist.

{
  "id": "main-group",
  "type": "Group",
  "textResourceBindings": {
    "title": "Hovedgruppe"
  },
  "dataModelBindings": {
    "group": "model.mainGroup"
  },
  "children": [
    "child1",
    "child2",
    "child3"
  ]
},
{
  "id": "summary-of-group",
  "type": "Summary",
  "componentRef": "main-group",
  "pageRef": "FormLayout",
  "excludedChildren": ["child3"]
}

Grupper i grupper

Oppsummering støttes også for repeterende grupper inne i repeterende grupper. Vi støtter kun ett nivå av grupper i grupper. I dette tilfellet vises oppsummeringen av hvert innslag av gruppen på øverst nivå som en egen kategori, og gruppen på nederste nivå vises på samme måte som vanlige repeterende grupper.

For å støtte oppsummeringsvisning av gruppe i gruppe må gjøre følgende oppsett i layout-filen:

  • Referere til hovedgruppen i componentRef i Summary-komponenten
  • Sette "largeGroup": true på Summary-komponenten

Eksempel

Med følgende oppsett av gruppe i gruppe i layout:

{
  "id": "main-group",
  "type": "Group",
  "textResourceBindings": {
    "title": "Hovedgruppe"
  },
  "dataModelBindings": {
    "group": "model.mainGroup"
  },
  "children": [
    "nested-group-1"
  ],
  ... // resterende oppsett av komponent
},
{
  "id": "nested-group-1",
  "type": "Group",
  "textResourceBindings": {
    "title": "Undergruppe"
  },
  "dataModelBindings": {
    "group": "model.mainGroup.subGroup"
  },
  "children": [
    "input-field-1"
  ],
  ... // resterende oppsett av komponent
},
{
  "id": "input-field-1",
  "type": "Input",
  "textResourceBindings": {
    "title": "Skriv inn noe her"
  },
  "dataModelBindings": {
    "group": "model.mainGroup.subGroup.field1"
  },
  ... // resterende oppsett av komponent
}

Setter man opp oppsummering på følgende måte:

{
  "id": "summary-1",
  "type": "Summary",
  "componentRef": "main-group",
  "pageRef": "FormLayout",
  "largeGroup": true,
}
Oppsummering repeterende grupper i grupper

Oppsummering repeterende grupper i grupper

Kategorier

Det er mulig å gruppere oppsummeringene i forskjellige kategorier, for å gjøre en ev. oppsummeringsside mer oversiktlig. Dette gjøres ved å bruke den eksisterende gruppe-komponenten, uten å sette den opp som en repeterende gruppe.

Feltene i oppsummeringen vises da med en tittel, som settes i title-feltet for textResourceBindings for gruppe-komponenten. Se eksempel under.

Felter samlet under en kategori

Felter samlet under en kategori

{
  "id": "personalia-group",
  "type": "Group",
  "textResourceBindings": {
    "title": "Personalia"
  },
  "children": [
    "summary-1",
    "summary-2",
    "summary-3"
  ]
},
{
  "id": "summary-1",
  "type": "Summary",
  "componentRef": "d566c79c-3e3e-445b-be25-a404508f6607",
  "pageRef": "personalia"
},
{
  "id": "summary-2",
  "type": "Summary",
  "componentRef": "22a60bf0-d5b7-4b45-9ac9-c266b6ad3716",
  "pageRef": "personalia"
},
{
  "id": "summary-3",
  "type": "Summary",
  "componentRef": "d497737b-67b2-4e03-87a9-43f58579c938",
  "pageRef": "personalia"
},

Eksempel på oppsummeringsside

Under er et eksempel på en oppsummeringsside, med oppsett i layout-filen. Da oppsummeringen settes opp i layout-filene på samme måte som andre komponenter, kan man også ha med andre skjemakomponenter som tekster ved behov.

Oppsummering eksempel

Oppsummering eksempel

{
  "$schema":  "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json",
  "data": {
    "layout": [
      {
        "id": "send-in-text",
        "type": "Paragraph",
        "componentType": 1,
        "textResourceBindings": {
          "title": "finish"
        },
        "dataModelBindings": {}
      },
      {
        "id": "personalia-group",
        "type": "Group",
        "textResourceBindings": {
          "title": "Personalia"
        },
        "children": [
          "summary-1",
          "summary-2",
          "summary-3"
        ]
      },
      {
        "id": "summary-1",
        "type": "Summary",
        "componentRef": "d566c79c-3e3e-445b-be25-a404508f6607",
        "pageRef": "personalia"
      },
      {
        "id": "summary-2",
        "type": "Summary",
        "componentRef": "22a60bf0-d5b7-4b45-9ac9-c266b6ad3716",
        "pageRef": "personalia"
      },
      {
        "id": "summary-3",
        "type": "Summary",
        "componentRef": "d497737b-67b2-4e03-87a9-43f58579c938",
        "pageRef": "personalia"
      },
      {
        "id": "drugs-group",
        "type": "Group",
        "textResourceBindings": {
          "title": "Rus- og dopingmidler"
        },
        "children": [
          "summary-4",
          "summary-5",
          "summary-6",
          "summary-7"
        ]
      },
      {
        "id": "summary-4",
        "type": "Summary",
        "componentRef": "064c0033-8996-4825-85fc-2a19fe654400",
        "pageRef": "drugs"
      },
      {
        "id": "summary-5",
        "type": "Summary",
        "componentRef": "7f22e523-3f6d-4371-a5dd-233dc41af824",
        "pageRef": "drugs"
      },
      {
        "id": "summary-6",
        "type": "Summary",
        "componentRef": "18a7c709-ae2f-48b3-b6f6-bd631f5d8d56",
        "pageRef": "drugs"
      },
      {
        "id": "summary-7",
        "type": "Summary",
        "componentRef": "b7417cf9-f806-4835-a3d1-424c8d094d5f",
        "pageRef": "drugs"
      },
      {
        "id": "summary-group-1",
        "type": "Summary",
        "componentRef": "arbeidserfaring-group",
        "pageRef": "work"
      },
      {
        "id": "summary-8",
        "type": "Summary",
        "componentRef": "25f720db-5784-4c95-a530-43f0bf523466",
        "pageRef": "attachment"
      },
      {
        "id": "312afa87-c2a9-4ef1-a681-26cc47462878",
        "type": "Button",
        "componentType": 9,
        "textResourceBindings": {
          "title": "Send inn"
        },
        "dataModelBindings": {},
        "textResourceId": "Standard.Button.Button",
        "customType": "Standard"
      }
    ]
  }
}