Sider

Slik setter du opp en app med flere sider og oppsummering.

Du kan sette opp flere sider enkelt i Altinn Studio Designer. Vil du gjøre det manuelt, se Oppsett. Enkelte innstillinger er ikke tilgjengelige i Designer, og disse må du sette manuelt — se Innstillinger for dem.

Oppsett

Du plasserer sidene i layouts-mappen under mappen for prosessteget. Mappenavnet under App/ui/ må være nøyaktig det samme som prosesstegets ID i process.bpmn, for eksempel Task_1 — det er denne mappenavn-matchen som kobler sidene til riktig prosessteg. Vil du endre rekkefølgen på sidene, se Navigasjon. Under ser du et eksempel på filstrukturen for en app med to prosessteg:

|- App/
  |- config/
    |- process/
      |- process.bpmn        <- her definerer du Task_1 og Task_2
  |- ui/
    |- Settings.json          <- valgfritt: globale innstillinger for hele appen
    |- Task_1/
      |- Settings.json
      |- layouts/
        |- side1.json
        |- side2.json
        |- side3.json
    |- Task_2/
      |- Settings.json
      |- layouts/
        |- side1.json
        |- side2.json
        |- side3.json

Mappenavnet skiller mellom store og små bokstaver, og må være helt likt prosesstegets ID — som ofte har stor forbokstav, for eksempel Task_1.

Datamodellen til prosessteget setter du i Settings.json-filen til mappen, med egenskapen defaultDataType. Se Innstillinger for de andre innstillingene du kan sette i denne fila.

Innstillinger

Du kan konfigurere flere ulike innstillinger for sidene dine. Du gjør dette i Settings.json-filen til prosesstegmappen, som du ser i mappestrukturen over, under pages-objektet. Hvert prosessteg har sin egen fil.

I tillegg finnes en valgfri, felles Settings.json-fil i App/ui/ for innstillinger som gjelder hele appen, som taskNavigation, showProgress og autoSaveBehavior. Denne fila er flat — innstillingene ligger direkte i roten av fila, ikke inni et pages-objekt.

Eksempel på prosesstegets Settings.json:

{
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json",
  "defaultDataType": "Skjema",
  "pages": {
    "order": [
      "Info",
      "Form",
      "Summary"
    ],
    "excludeFromPdf": [
      "Info",
      "Summary"
    ],
    "hideCloseButton": false,
    "showLanguageSelector": false,
    "showExpandWidthButton": false,
    "showProgress": true,
    "pdfLayoutName": "PDFLayout"
  },
  ...
}

Eksempel på den globale App/ui/Settings.json:

{
  "taskNavigation": [
    {
      "name": "task.form",
      "taskId": "Task_1"
    },
    {
      "type": "receipt"
    }
  ],
  "showProgress": true,
  "autoSaveBehavior": "onChangePage"
}

Dette er innstillingene du har tilgjengelig:

{
  "expandedWidth": true
}

{
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json",
  "pages": {
      "order": [
         ...
      ],
      "expandedWidth": true,
      ...
  },
  "components": {
    ...
  }
}

{
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
  "data": {
    "expandedWidth": true,
    "layout": [
      components...
    ],
  }
}

• Navigasjon

  Slik lar du brukeren navigere mellom sider, viser en sidemeny eller fremdriftsindikator, og validerer ved sidebytte.