Navigasjon mellom sider

Hvordan sette opp navigasjon mellom sider.

Navigering til neste og forrige side skjer via navigasjonsknapper. Disse må legges til manuelt i hver layout-fil.

Legg til navigasjonsknapper

Navigasjonsknapper legges inn i alle layout-filer der det er behov. Om man ønsker at de skal dukke opp nederst på siden, må den legges inn nederst i layout-filen. Eksempel vises under

{
  "id": "nav-page2",
  "type": "NavigationButtons",
  "textResourceBindings": {
    "next": "next",
    "back": "back"
  },
  "showBackButton": true
}

Rekkefølge

Rekkefølgen på sidene defineres i Settings.json for layout-settet. Dette gjøres på følgende vis:

{
  "pages": {
    "order": ["side1", "side2"]
  }
}

Dersom du ønsker å dynamisk skjule enkelte sider, kan dette gjøres med Dynamiske uttrykk.

Gruppering av sider

Dersom du ønsker å gruppere sider eller å vise sidene i en side-meny, kan du bruke side-grupper som et alternativ til tradisjonell rekkefølge. Da erstatter du pages.order med egenskapen pages.groups som vist nedenfor:

{
  "pages": {
    "groups": [
      {
        "name": "group.info",
        "type": "info",
        "order": ["info1", "info2"]
      },
      {
        "name": "group.form",
        "markWhenCompleted": true,
        "order": ["side1", "side2", "side3"]
      },
      {
        "order": ["oppsummering"]
      }
    ]
  }
}

Synliggjør prosess-steg i navigasjons-menyen

Du kan også vise den øvrige prosessen i navigasjons-menyen. Det kan konfigureres for hele appen i layout-sets.json med egenskapen uiSettings.taskNavigation, eller per layout-sett med egenskapen pages.taskNavigation i Settings.json for layout-settet. Eksempel:

{
  ...
  "uiSettings": {
    "taskNavigation": [
      {
        "name": "task.form",
        "taskId": "Task_1"
      },
      {
        "taskId": "Task_2"
      },
      {
        "type": "receipt"
      }
    ]
  }
}

Fremdriftsindikator

Det er mulig å aktivere en fremdriftsindikator som viser øverst i høyre hjørne av appen, som indikerer til brukeren hvor langt man har kommet i utfyllingen av en applikasjon med flere sider.

Konfigurasjon

For å sette opp fremdriftsindikatoren, legg til denne linjen i Settings.json-filen:

{
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json",
  "pages": {
    "order": ["student-info", "school-work", "well-being"],
    "showProgress": true
  }
}

Navigasjonsbar

Navigasjonsbar gir enkel tilgang til alle sider i en applikasjon.

På store skjermer vil alle sider listes opp. Dersom det ikke er plass på en linje, vil listen brytes og fortsette på neste linje. På mindre skjermer vil alle sider være skjult i en meny. Den siden som er aktiv vil vises i menyen. Når menyen klikkes på, vil en liste over alle sider vises.

Navigasjonsbar legges inn i alle layoutfiler der den skal brukes. Eksempel på konfigurasjon:

{
  "id": "navbar-page1",
  "type": "NavigationBar"
}

Det er også mulighet å konfigurere komponenten NavigationBar til å vise alle sider i en meny også på større skjermer. Dette gjøres ved å legge til “compact”: true. Eksempel på konfigurasjon:

{
  "id": "navbar-page1",
  "type": "NavigationBar",
  "compact": true
}

Endre tekster på navigasjonsbarknapper

Teksten på navigasjonsbarknappene vil som standard bruke filnavnet på siden uten filendelsen. F.eks om man har side1.json og side2.json vil navigasjonsknappene hete side1 og side2. For å overstyre disse tekstene, kan du legge til tekster i resources.XX.json, hvor id er navnet på filen uten filendelse. Eksempel:

{
  "id": "side1",
  "value": "Første side"
},
{
  "id": "side2",
  "value": "Siste side"
},

Validering ved sidebytte

Det er mulig å sjekke valideringsfeil i det brukeren prøver å bevege seg til neste side, dersom det er valideringsfeil vil det stoppe brukeren fra å navigere.

{
  "id": "nav-buttons1",
  "type": "NavigationButtons",
  "textResourceBindings": {...},
  "validateOnNext": {
    "page": "current",
    "show": ["All"]
  }
}

{
  "id": "nav1",
  "type": "NavigationBar",
  "validateOnForward": {
    "page": "current",
    "show": ["All"]
  }
}

{
  "id": "nav-buttons1",
  "type": "NavigationButtons",
  "textResourceBindings": {
    "next": "Neste",
  },
  "triggers": ["validatePage"],
}