Sist endret: 10. nov. 2024

Sider

Hvordan sette opp en app med flere sider, sporvalg, oppsummering eller flere skjema.

Flere sider kan enkelt settes opp i Altinn Studio, men dersom du ønsker å gjøre det manuelt, se Oppsett. Det er også noen instillinger som ikke er tilgjengelig i Altinn Studio som eventuelt må settes manuelt; se Innstillinger for det.

Oppsett

Sider plasseres i ui/layouts-mappen i appen, for å konfigurere rekkefølgen på sidene, se Navigasjon. Dersom du har flere prosess-steg som har egne layoutsider er strukturen litt annerledes; dersom dette er tilfelle, se Flere skjema.

|- App/
  |- ui/
    |- layouts/
      |- side1.json
      |- side2.json
      |- side3.json
    |- Settings.json

Innstillinger

Det er flere ulike innstillinger som kan konfigureres for sidene dine. Disse innstillingene konfigureres i Settings.json-filen som du kan se i mappestrukturen over og ligger i pages-objektet. Dersom du bruker layout sets er det en egen fil for hvert sett.

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

De tilgjengelige innstillingene er følgende:

EgenskapTypeVerdi
hideCloseButtonBooleanOm lukk skjema-knappen øverst i høyre hjørne skal skjules eller ikke.
showLanguageSelectorBooleanOm språkvelgeren skal vises eller ikke. Lar brukeren bytte språk etter de har startet skjemautfylligen.
showExpandWidthButtonBooleanOm utvid bredde-knappen skal vises eller ikke. Lar brukeren utvide bredden til siden slik at den fyller hele nettleservinduet.
showProgressBooleanse Navigasjon
pdfLayoutNameStringse PDF
orderArrayse Navigasjon
excludeFromPdfArrayse PDF
expandedWidthBooleanse Utvidet skjemabredde

    Utvidet skjemabredde

    Default verdien for en sides breddehåndtering kan settes til å være utvidet ved å legge til expandedWidth-egenskapen til en layout i data-egenskapen. Dette vil gjøre at siden utvider seg til å fylle hele bredden av nettleservinduet når den åpnes. Dersom du setter expandedWidth på flere nivåer, vil den spesifikke verdien overskrive de generelle.

    layout-sets.json:

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

    Settings.json:

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

    Layout-file:

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