Last modified: Apr 25, 2025

Pages

How to set up an app with multiple pages, multiple layout sets, or summary.

Multiple layout pages can easily be set up in Altinn Studio, if you want to do it manually, see Setup. There are also some configuration options that are not available in Altinn Studio but must be set manually; for that, see Settings.

Setup

Layout pages are placed in the layouts folder for the layout set; each process task can have its own layout set. To configure the order of the layout pages, see Navigation. Example of a file structure with two process tasks, each with its own layout set:

|- App/
  |- ui/
    | - layout-sets.json
    |- form-a/
      |- Settings.json
      |- layouts/
        |- page1.json
        |- page2.json
        |- page3.json
    |- form-b/
      |- Settings.json
      |- layouts/
        |- page1.json
        |- page2.json
        |- page3.json

In the layout-sets.json file, you define which task in the process where each layout-set should be used. Note that the ID is case sensitive, so if you have a capital letter in the folder name, the ID must reflect this. We recommend lower case letters in folder names.

Example:

{
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout-sets.schema.v1.json",
  "sets": [
    {
      "id": "form-a",
      "dataType": "schema_4222_160523_forms_212_20160523",
      "tasks": [
        "Task_1"
      ]
    },

    {
      "id": "form-b",
      "dataType": "schema_3161_140411_forms_1549_11554",
      "tasks": [
        "Task_2"
      ]
    }
  ]
}

Settings

There are several different settings that can be configured for your pages. These settings are configured in the Settings.json file seen in the folder structure above and lie in the pages object. If you use layout sets there is a separate file for each layout set.

{
  "$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"
  },
  ...
}

The available settings are the following:

PropertyTypeValue
hideCloseButtonBooleanWhether or not the back to inbox button in the upper left corner should be hidden.
showLanguageSelectorBooleanWhether or not the language selector should be visible. Allows the user to switch language after opening the form.
showExpandWidthButtonBooleanWhether or not the expand width button should be visible. Allows the user to expand the width of the page to fill the browser window.
showProgressBooleansee Navigation
pdfLayoutNameStringsee PDF
orderArraysee Navigation
groupsArraysee Navigation
excludeFromPdfArraysee PDF
expandedWidthBooleansee Expanded form width

    Expanded form width

    For å få en side til å automatisk utvide seg til full bredde av nettleservinduet når den åpnes, kan du legge til egenskapen expandedWidth for en layout. Dette setter standardtilstanden til siden til å være utvidet. Du kan sette expandedWidth på tre nivåer: i filen layout-sets.json, i filen Settings.json og i en spesifikk side sin layout-fil. 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-fil:

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