Customize Views of Step

How to customize views in different steps of a process.

On this page:

An application wil have a process which the user of the application follows. Depending of the type of step the user is in, different views are presented. This page explains the different views and how they can be customized.

Data

In this process task a form which the user can fill in data. The form can be edited using the UI editor or by changing FormLayout.json manually.

Confirmation

In this process task some standard texts are presented and the user can choose to confirm to go forward.

These texts can be overridden by manually adding each defined text keys in the apps text resources. More information about how this is done can be found here. In the following section we will present an overview of the different texts that can be customized.

Confirm view
Texts that can be customized in the confirm view

Customize texts

Text # (see image above)Text key
1confirm.title
2confirm.sender
3confirm.body
4confirm.answers
5confirm.attachments
6confirm.button_text

Example of custom texts in the file resources.nb.json:

{
  "id": "confirm.title",
  "value": "Vennligst bekreft at du ønsker å sende inn"
},
{
  "id": "confirm.body",
  "value": "Du må kun trykke send inn om du er helt sikker på at du vil sende inn. <br/><br/>I det du trykker send inn kan du ikke gjøre endringer."
},
{
  "id": "confirm.attachments",
  "value": "Dokumenter med opplysninger"
},
{
  "id": "confirm.button_text",
  "value": "Lagre og fortsett"
}

Note that in the example we have used the html-tag <br/> to make a line shift. For links and formatting use markdown.

This results in the following view:

Confirm view
Overridden texts in the confirm view

Custom form layout

For the confirm task the app developer has the possibility for configuring their own layout set with corresponding form layout definitions and other ui-configuration files which are included in the data step.

This makes the confirmation page customizable, and can use the components that are supported in Altinn Studio.

Since the confirm step is not meant to be used for writing data, a good practice would be to use static components ( header, paragraph) and set other components to readOnly.

An example setup of the layout-sets.json where Task_1 is a data step, and Task_2 a confirmation step:

{
    "sets": [
      {
        "id": "simple",
        "dataType": "simple",
        "tasks": [
          "Task_1"
        ]
      },
      {
        "id": "custom-confirmation",
        "dataType": "simple",
        "tasks": [
          "Task_2"
        ]
      }
    ]
  }

Notice that the layout-set configuration for Task_2 references the data model used in Task_1.

Example formLayout.json file that presents data from the data model used in the data-task:

{
  "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json",
  "data": {
    "layout": [
      {
        "id": "paragraph",
        "type": "Paragraph",
        "textResourceBindings": {
          "title": "paragraph"
        }
      },
      {
        "id": "name",
        "type": "Input",
        "textResourceBindings": {
          "title": "name.label"
        },
        "dataModelBindings": {
          "simpleBinding": "Felt1"
        },
        "required": true,
        "readOnly": true
      },
      {
        "id": "lastname",
        "type": "Input",
        "textResourceBindings": {
          "title": "lastName.label"
        },
        "dataModelBindings": {
          "simpleBinding": "Felt2"
        },
        "required": true,
        "readOnly": true
      }
    ]
  }
}

The app structure would look look this:

├───App
│   ├───config
│   ├───logic
│   ├───models
|   | ...
│   ├───ui
│   │   ├───custom-confirmation
│   │   │   └───layouts
|   |   |   └─── ...
│   │   └───simple
│   │       └───layouts
|   |   |   └─── ...

The end result:

Custom confirm view
Custom confirm view

For a complete setup of this feature see our example app.

Feedback

This is a process step where the application owner can validate the filled data to generate a feedback before the data is archived.

In the following section we will present an overview of the different texts that can be customized.

Feedback view
Texts that can be customized in the feedback view

Customize texts

Text # (see image above)Text key
1feedback.title
2feedback.body

Example of custom texts in the file resources.nb.json:

{
  "id": "feedback.title",
  "value": "Vent på at tjenesteeier sjekker data"
},
{
  "id": "feedback.body",
  "value": "Når tjenesteier har sjekket at alle data er godkjent vil du bli automatisk sendt videre til siste steg i prosessen."
}

Receipt

In this process task the process will be ended and some standard texts are shown.

These texts can be overridden by manually adding each defined text key in the app’s text resources. More information about how this is done can be found here.

If the actual recipient of the form is a different organization than the organization owning the app, the receipt should reflect this in the Receiver field. This can be done by setting the text resource appReceiver to the name of the actual recipient.

Customize texts

Receipt view
Texts that can be customized in the receipt view
Text # (see image above)Text key
1receipt.receipt
2receipt.title
3receipt.subtitle
4receipt.body
5receipt.title_submitted

Example of custom texts in the file resources.nb.json:

{
  "id": "receipt.receipt",
  "value": "Søknad om flytting til Sogndal kommune"
},
{
  "id": "receipt.title",
  "value": "Takk, søknaden er sendt!"
},
{
  "id": "receipt.subtitle",
  "value": "Finn kopi av dine svar i Altinn Innboks"
},
{
  "id": "receipt.body",
  "value": "Saksbehandling av denne type søknader tar vanligvis opp til 4 uker. Du vil bli varslet når svaret er klart i din innboks."
},
{
  "id": "receipt.title_submitted",
  "value": "Last ned PDF med dine svar:"
}

Note that if you change the value of the text key receipt.subtitle the url will still point to Altinn Inbox.

This results in the following view:

Receipt view
Overridden texts in the receipt view

Custom form layout

This is a temporary approach for customizing the receipt page just as any other pages in the form. When support for layout-sets is available in Altinn Studio it will be possible to customize the receipt page in the same way as the confirmation page.

A custom receipt can be made in the same way as any other form page. The functionality will also be available in Altinn Studio shortly.

Build the layout as usual and refer to the filename of the layout in setting.json with the key receiptLayoutName. See below example where the layout file receipt.json is referred to.

{
  "$schema": "https://altinncdn.no/schemas/json/layout/layoutSettings.schema.v1.json",
  "pages": {
    "order": [
      "page1",
      "page2",
      "page3"
    ]
  },
  "receiptLayoutName": "receipt"
}

Example of a customized layout file for the receipt.

{
  "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json",
  "data": {
    "layout": [
      {
        "id": "ReceiptHeader",
        "type": "Header",
        "textResourceBindings": {
          "title": "receipt.title"
        },
        "dataModelBindings": {},
        "size": "h2"
      },
      {
        "id": "fa796d12-49fc-457a-9d9a-d153998d55de",
        "type": "Image",
        "textResourceBindings": {
          "title": "Bilde"
        },
        "dataModelBindings": {},
        "image": {
          "src": {
            "nb": "https://docs.altinn.studio/app/app-dev-course/modul2/kommune-logo.png"
          },
          "width": "100%",
          "align": "flex-start"
        },
        "grid": {
          "xs": 2
        }
      },
      {
        "id": "ReceiptParagraph",
        "type": "Paragraph",
        "textResourceBindings": {
          "title": "receipt.body"
        },
        "grid": {
          "xs": 10
        }
      },
      {
        "id": "ReceiptInstanceInformation",
        "type": "InstanceInformation",
        "elements":{
          "dateSent": false
        }
      },
      {
        "id": "ReceiptHeader",
        "type": "Header",
        "textResourceBindings": {
          "title": "receipt.title_submitted"
        },
        "size": "h4"
      },
      {
        "id": "ReceiptAttachmentList",
        "type": "AttachmentList",
        "dataTypeIds": ["ref-data-as-pdf"],
        "includePDF": true
      }
    ]
  }
}

Resulting receipt in the application:

Custom receipt
Custom receipt

Customizing texts in Simple Receipt

Simple receipt is a concept that becomes relevant for those applications that have enabled AutoDeleteOnProcessEnd: True in their applicationmetadata.json file. For more information on what this implies read here.

The texts in this receipt can also be overridden by manually adding each defined text keys in the apps text resources. More information about how this is done can be found here. In the following section we will present an overview of the different texts that can be customized.

Simple receipt view
Texts that can be customized in the simple receipt view
Text # (see image above)Text key
1receipt.receipt
2receipt.title
3receipt.body_simple

Example of custom texts in the file resources.nb.json:

{
    "id": "receipt.receipt",
    "value": "Søknad om flytting til Sogndal kommune"
},
{
    "id": "receipt.title",
    "value": "Takk, søknaden er sendt!"
},
{
    "id": "receipt.body_simple",
    "value": "All data knyttet til denne innsendingen vil slettes etter tjenesteeieren har mottatt det."
}

This results in the following view:

Simple receipt view
Overridden texts in the simple receipt view