Tilpasse visninger av steg

Slik tilpasser du visninger i forskjellige steg av en prosess.

En applikasjon har en prosess som brukeren følger. Avhengig av hvilken type steg brukeren er i, viser applikasjonen forskjellige ting. Denne siden forklarer hvordan du kan tilpasse visningen til de forskjellige stegene.

Data (tilsvarer utfyllingssteg i Altinn II)

I denne oppgavetypen viser appen et skjema som kan fylles ut. Du kan redigere skjemaet i Altinn Studio Designer eller ved å endre layoutfilene i App/ui/{oppgave-ID}/layouts/ direkte.

Bekreftelse

I denne oppgavetypen viser applikasjonen noen standardtekster, og brukeren kan velge å bekrefte for å gå videre.

Du kan overstyre tekstene ved å legge inn tekstnøkkel som hører til hver tekst i språkfilene for appen. Les mer om hvordan du legger inn tekster i språkfilene. Se under for oversikt over de forskjellige tekstnøklene du kan overstyre.

Overstyre tekster

Eksempel på overstyrte tekster i filen resource.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"
}

Merk at i eksempelet over har vi brukt html-taggen <br/> for å lage linjeskift. For lenke og utheving, bruk markdown.

Dette resulterer i følgende visning:

Egendefinert bekreftelse

For bekreftelsessteget kan du som apputvikler definere egne layouts og andre konfigurasjonsfiler som hører til datasteget.

Dette gjør det mulig å styre innholdet på bekreftelsessiden helt fritt, og du kan bruke komponentene du ellers har tilgjengelig i Altinn Studio.

Siden bekreftelsessteget ikke er ment brukt når du skal skrive data, anbefaler vi å bruke statiske komponenter (Heading, Paragraph) og sette komponenter utover dette som readOnly.

Opprett mappen App/ui/Task_2 for bekreftelsessteget. Mappen må ha samme navn som ID-en til oppgaven i process.bpmn. Legg til Settings.json, og bruk datatypen fra datasteget som defaultDataType:

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

Legg merke til at Settings.json for Task_2 refererer til datatypen til Task_1.

Eksempel formLayout.json som presenterer data som brukeren fylte ut i data-steget.

{
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/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
      }
    ]
  }
}

Dette vil gi følgende app-struktur:

App/
├── config/
├── logic/
├── models/
└── ui/
    ├── Task_1/
    │   └── ...
    └── Task_2/
        ├── Settings.json
        └── layouts/
            └── formLayout.json

Sluttresultatet i appen:

For et komplett oppsett av denne muligheten kan du se vår eksempelapp.

Tilbakemelding

Dette er et prosesssteg hvor applikasjonseieren sjekker utfylte data for å generere en tilbakemelding før alle data kan arkiveres.

Du kan overstyre tekstene på siden ved å legge inn tekstnøkler som hører til hver tekst i språkfilene for appen. Les mer om hvordan du legger inn tekster i språkfilene. Se under for oversikt over de forskjellige tekstnøklene du kan overstyre.

Overstyre tekster

Eksempel på overstyrte tekster i filen resource.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."
}

Kvittering

I denne oppgavetypen er prosessen ferdig og applikasjonen viser noen standardtekster.

Du kan overstyre tekstene ved å legge inn tekstnøkkel som hører til hver tekst i språkfilene for appen. Les mer om hvordan du legger inn tekster i språkfilene.

Hvis den reelle mottakeren av skjemaet er en annen organisasjon enn organisasjonen som eier appen, bør kvitteringen tydeliggjøre dette i Mottaker-feltet. Du kan gjøre dette ved å sette tekstresursen appReceiver til navnet på den reelle mottakeren.

Overstyre tekster

Eksempel på overstyrte tekster i filen resource.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:"
}

Merk at hvis du endrer verdien til tekstnøkkelen receipt.subtitle, vil lenken uansett peke til Altinn Innboks.

Dette resulterer i følgende visning:

Egendefinert kvittering

Du lager en egendefinert kvittering på samme måte som andre skjemasider.

Opprett mappen App/ui/CustomReceipt. Mappenavnet er fast og forteller appen at layoutene skal brukes som kvittering. Opprett en layouts-mappe og legg til sidene som skal inngå i kvitteringen. Du kan bruke flere sider.

Legg til Settings.json i CustomReceipt. Sett defaultDataType til datamodellen som skal være tilgjengelig i kvitteringen, og oppgi sidene i pages.order.

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

{
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json",
  "defaultDataType": "fields",
  "pages": {
    "order": ["side1", "side2"]
  }
}

Eksempel på en egendefinert layoutfil for kvittering:

{
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
  "data": {
    "layout": [
      {
        "id": "ReceiptHeader",
        "type": "Heading",
        "textResourceBindings": {
          "title": "receipt.title"
        },
        "size": "h2"
      },
      {
        "id": "fa796d12-49fc-457a-9d9a-d153998d55de",
        "type": "Image",
        "textResourceBindings": {
          "altTextImg": "Bilde"
        },
        "image": {
          "src": {
            "nb": "https://docs.altinn.studio/altinn-studio/getting-started/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": "ReceiptHeaderSubmitted",
        "type": "Heading",
        "textResourceBindings": {
          "title": "receipt.title_submitted"
        },
        "size": "h4"
      },
      {
        "id": "ReceiptAttachmentList",
        "type": "AttachmentList",
        "dataTypeIds": ["ref-data-as-pdf"]
      }
    ]
  }
}

Sluttresultatet i appen:

Tilpasse tekster for enkel kvittering (Simple Receipt)

Simple receipt er et konsept som er relevant for de applikasjonene som har aktivert AutoDeleteOnProcessEnd: True i applicationmetadata.json-filen. For mer informasjon om hva dette innebærer, les her.

Du kan også overstyre tekstene i denne kvitteringen ved å manuelt legge til hver definerte tekstnøkkel i appens tekstressursfil. Les mer om hvordan du legger inn tekster i språkfilene. Følgende avsnitt viser en oversikt over hvilke tekster du kan tilpasse.

Eksempel på overstyrte tekster i filen resource.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."
}

Dette resulterer i følgende visning: