Navigasjon

Slik lar du brukeren navigere mellom sider, viser en sidemeny eller fremdriftsindikator, og validerer ved sidebytte.

Navigasjon kan handle om flere ting: Du kan la brukeren bevege seg fra side til side med knapper, vise et navigasjonsfelt øverst på siden, eller vise en sidemeny med oversikt over sidene og oppgavene i appen. Denne artikkelen dekker alle tre.

Gå fra side til side med knapper

Brukeren flytter seg mellom sidene i appen ved hjelp av navigasjonsknapper. Altinn Studio Designer legger til knappene automatisk, men du kan også legge dem til manuelt i koden.

Legge til navigasjonsknapper manuelt i layoutfilen (NavigationButtons)

Du legger navigasjonsknappene i alle layoutfilene der du trenger dem. Vil du vise dem nederst på siden, plasserer du dem nederst i layoutfilen.

Eksempel på konfigurasjon

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

Parametere for NavigationButtons

Vise en sidemeny med rekkefølgen på sidene

Du definerer rekkefølgen på sidene i Settings.json-filen til prosesstegmappen.

Filplassering: App/ui/Task_1/Settings.json (bytt ut Task_1 med prosesstegets egen ID)

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

Skjule sider dynamisk: Du kan skjule enkelte sider med dynamiske uttrykk.

Gruppere sider

Du kan gruppere sidene og vise dem i en sidemeny som alternativ til tradisjonell rekkefølge. Da erstatter du pages.order med pages.groups.

Filplassering: App/ui/Task_1/Settings.json

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

Parametere for sidegrupper

Vise prosess og oppgaver i navigasjonsmenyen

Vise prosessen ved å definere det i koden

Du kan vise hele prosessen i navigasjonsmenyen på to måter i koden:

• For hele appen: i App/ui/Settings.json med taskNavigation direkte i roten av filen (ikke i et eget objekt).
• Per prosessteg: i prosesstegets Settings.json med pages.taskNavigation.

Eksempel for hele appen

Filplassering: App/ui/Settings.json

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

Eksempel per prosessteg

Filplassering: App/ui/Task_1/Settings.json

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

Parametere for stegene i prosessen

Vise navigasjon fra Altinn Studio Designer

Altinn Studio Designer har en egen navigasjonsmeny du kan legge til fra Utforming-siden. Du velger selv om du vil vise alle sidene og oppgavene i navigasjonen, eller bare noen av dem.

Legg til oppgaver i navigasjonen

1. Åpne appen du vil sette inn en navigasjonsmeny for.
2. Klikk på Utforming i toppmenyen. Du kommer til Oversikt-siden for Utforming, der du ser oppgavene som er tilgjengelige i appen.
3. Under Andre innstillinger ser du øverst en melding om at du ikke viser noen oppgaver i navigasjonsmenyen ennå. Under den finner du en tabell med oppgaver du kan velge å vise.
4. Velg Vis alle oppgavene hvis du vil ha med alle oppgavene i navigasjonsmenyen. Da ser du at de blir tilgjengelige i den øverste tabellen. Velg enkeltoppgaver med Vis oppgaven hvis du ikke vil ha med alle oppgavene.
5. Den øverste tabellen viser nå oppgavene du har valgt å vise, og rekkefølgen de vises i. Klikk på de tre prikkene til høyre for hver oppgave for å skjule enkeltoppgaver, eller flytte dem opp og ned for å endre rekkefølgen i navigasjonen. Her kan du også endre visningsnavnet for en oppgave og gå direkte til utformingen av den.
6. Bruk knappen Vis med navigasjonsmeny for å forhåndsvise navigasjonsmenyen på venstre side i appen.

Vise en fremdriftsindikator

En fremdriftsindikator er et lite visuelt hjul som viser hvor langt brukeren har kommet med å fylle ut eller lese et skjema. Den kan gi brukeren oversikt over totalt antall sider, og hvor i utfyllingen brukeren er. Fremdriftsindikatoren vises øverst i det høyre hjørnet.

Viktig å vite

Har du satt opp dynamisk skjulte sider, kan antallet sider variere mye og virke forvirrende for brukeren.

Vurder om fremdriftsindikatoren gir mening og verdi for brukeren, før du legger den til.

Legge til selve fremdriftsindikatoren

Du kan sette showProgress per prosessteg, eller globalt for hele appen i App/ui/Settings.json (se /nb/altinn-studio/v9/develop-a-service/look-and-feel/sider/). Eksempel per prosessteg:

Filplassering: App/ui/Task_1/Settings.json

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

Vise et navigasjonsfelt (NavigationBar)

Et navigasjonsfelt vises øverst på siden i appen, og kan gjøre det enklere for brukeren å se alle sidene i appen. Gi hver side et godt navn, slik at navigasjonsfeltet blir nyttig.

Hvordan fungerer det?

• Store skjermer: Appen viser alle sidene i listen. Er det ikke plass på én linje, fortsetter listen på neste linje.
• Små skjermer: Appen skjuler alle sidene i en nedtrekksmeny. Den aktive siden vises i menyen. Brukeren klikker på menyen for å se alle sidene.

Legge til navigasjonsfeltet i koden

Du legger til navigasjonsfeltet ved å legge koden for det i alle layoutfilene der du vil bruke det:

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

Vise nedtrekksmenyen på alle skjermer

I koden kan du sette opp at appen skal vise sidene i navigasjonsfeltet som en nedtrekksmeny, også på større skjermer:

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

Endre tekstene på knappene i navigasjonsfeltet

Knappene i navigasjonsfeltet henter navnet sitt fra filnavnet til siden, uten filutvidelsen. For eksempel blir side1.json og side2.json til knappene «side1» og «side2».

Slik endrer du tekstene:

Legg til tekster i resource.XX.json, der id er navnet på filen uten filutvidelsen:

{
  "language": "nb",
  "resources": [
    {
      "id": "side1",
      "value": "Første side"
    },
    {
      "id": "side2",
      "value": "Siste side"
    }
  ]
}

Angi validering ved sidebytte

Du kan legge inn kode for å sjekke om det finnes valideringsfeil når brukeren prøver å navigere mellom sider. Valideringsfeil kan for eksempel bety at brukeren har glemt å fylle ut et felt, eller har fylt det ut med feil format på informasjonen. Hvis det er feil, stopper appen navigeringen.

Du kan konfigurere dette på to nivåer med ulik prioritet: globalt for hele appen og per side. Du kan ikke sette det per prosessteg i Settings.json i oppgavemappen, fordi appen ikke tar med validationOnNavigation derfra. I tillegg kan du konfigurere NavigationButtons, CustomButton og NavigationBar på komponentnivå.

validationOnNavigation-objektet

Du bruker egenskapen validationOnNavigation på globalt nivå og per side. Den har to egenskaper. På komponentnivå bruker du tilsvarende objekt, men via egenskapene validateOnNext og validateOnPrevious (NavigationButtons) eller validateOnForward og validateOnBackward (NavigationBar).

{
  "page": "current",
  "show": ["Required", "Schema"]
}

page – hvilke sider appen sjekker:

show – hvilke valideringstyper appen viser:

Konfigurasjonsnivåer

1. Globalt nivå

Gjelder for alle prosessteg i appen. Konfigurer direkte i roten av App/ui/Settings.json (ikke i et eget objekt).

Filplassering: App/ui/Settings.json

{
  "validationOnNavigation": {
    "page": "current",
    "show": ["Required"]
  }
}

2. Per side

Overstyrer det globale nivået for én enkelt side. Konfigurer direkte på data-objektet i layoutfilen.

Filplassering: App/ui/Task_1/layouts/side1.json

{
  "data": {
    "layout": [...],
    "validationOnNavigation": {
      "page": "currentAndPrevious",
      "show": ["All"]
    }
  }
}

3. Komponentnivå (NavigationButtons, CustomButton, NavigationBar)

Har du ikke konfigurert noen av de høyere nivåene, kan du konfigurere validering direkte på komponenten. For NavigationButtons bruker du validateOnNext og validateOnPrevious:

{
  "id": "nav",
  "type": "NavigationButtons",
  "validateOnNext": {
    "page": "current",
    "show": ["Required", "Schema"]
  }
}

Merk: Setter du validationOnNavigation på side- eller globalt nivå, overstyrer denne konfigurasjonen komponentnivået:

• Den erstatter validateOnNext.
• Den slår av validateOnPrevious helt.

Prioritetsrekkefølge

Side → Globalt → Komponent

Sidenivå har høyest prioritet og overstyrer alt annet. Komponentnivåkonfigurasjonen gjelder bare når du ikke har konfigurert noen høyere nivåer.

Blokkere direktenavigasjon i sidemenyen

Når sidemenyen er aktiv og brukeren prøver å hoppe direkte til en side lenger fremme i rekkefølgen, stopper appen navigasjonen dersom noen av de mellomliggende sidene har validationOnNavigation konfigurert og inneholder valideringsfeil.

Eksempel: Brukeren er på side 1 og prøver å navigere direkte til side 3. Har side 2 validationOnNavigation konfigurert og inneholder valideringsfeil, er ikke knappen for side 3 tilgjengelig før brukeren retter feilene.

Hva skjer når det er valideringsfeil?

Når brukeren prøver å navigere og det finnes valideringsfeil:

• Appen viser feilene på siden.
• Appen blokkerer navigasjonen hvis det er feil på gjeldende side eller tidligere sider.
• Er feilene bare på fremtidige sider (ved "all"), blokkerer ikke appen navigasjonen, men viser feilene når brukeren navigerer til de aktuelle sidene.

Bruke NavigationBar med validering

NavigationBar-komponenten har tilsvarende egenskaper, validateOnForward og validateOnBackward:

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