New navigation

[bjosttveit]

Early testing

Example app: https://ttd.apps.tt02.altinn.no/ttd/navigation-test/
Latest version: 4.16.0-pr.502.navigation.c38f687c

Changelog

[10.02.25]
Version: 4.16.0-pr.502.navigation.c38f687c
Description: Tighter layout (less page padding) when using new navigation to make more room for it on smaller screens.

[06.02.25]
Version: 4.16.0-pr.484.navigation.6869393d
Description: Changed error icon and chevron position. Testing new navigation button placement.

[06.02.25]
Version: 4.16.0-pr.465.navigation.5b4484fb
Description: Update from main. Make completed state opt-in and depend on visited pages & validation.

[17.01.25]
Version: 4.15.1.navigation.526e4373
Description: Add support for info groups and single page groups

[16.01.25]
Version: 4.15.1.navigation.ce3a5035
Description: Small tweaks

[09.01.25]
Version: 4.14.1.navigation.252436e9
Description: Moved language selector, improved responsiveness on mobile, better scaling with more text.

[03.01.25]
Version: 4.13.0-preview.1.navigation.c84f65b3
Description: Fixed component duplication bug, merged from main

[20.12.24]:
Version: 4.13.0-preview.1.navigation.4fcabad5
Description: Added aria-attributes

[18.12.24]:
Version: 4.13.0-preview.1.navigation.f6f45827
Description: Initial preview version

Configuration

To structure pages into groups, replace order with the new groups property in Settings.json.
Example:

// Settings.json
{
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4.16.0-pr.502.navigation.c38f687c/schemas/json/layout/layoutSettings.schema.v1.json",
  "pages": {    
    "groups": [
      {
        "name": "group.info",
        "type": "info",
        "order": ["info1", "info2"]
      },
      {
        "name": "group.form",
        "markWhenCompleted": true,
        "order": [
          "firstname",
          "lastname",
          "age",
          "birthday",
          "emails",
          "cars",
          "extra"
        ]
      },
      {
        "single": true,
        "type": "info",
        "order": ["important"]
      },
      {
        "name": "group.summary",
        "order": ["feedback", "summary"]
      }
    ]
  }
}

To show process steps like confirmation, signing, and receipt. Add a taskNavigation property under uiSettings in layout-sets.json.
Example:

// layout-sets.json
{
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4.16.0-pr.502.navigation.c38f687c/schemas/json/layout/layout-sets.schema.v1.json",
  "sets": [
    {
      "id": "form",
      "dataType": "model",
      "tasks": ["Task_1"]
    }
  ],
  "uiSettings": {
    "taskNavigation": [
      {
        "name": "tasks.form",
        "taskId": "Task_1"
      },
      {
        "taskId": "Task_Confirm"
      },
      {
        "type": "receipt"
      }
    ]
  }
}

Description

Related Issue(s)

• closes Implement new navigation component #2611
• closes App header does not not fit logo and username on mobile devices #125
• Support getting page order from navigation groups app-lib-dotnet#1005

Verification/QA

• Manual functionality testing
  • I have tested these changes manually
  • Creator of the original issue (or service owner) has been contacted for manual testing (or will be contacted when released in alpha)
  • No testing done/necessary
• Automated tests
  • Unit test(s) have been added/updated
  • Cypress E2E test(s) have been added/updated
  • No automatic tests are needed here (no functional changes/additions)
  • I want someone to help me make some tests
• UU/WCAG (follow these guidelines until we have our own)
  • I have tested with a screen reader/keyboard navigation/automated wcag validator
  • No testing done/necessary (no DOM/visual changes)
  • I want someone to help me perform accessibility testing
• User documentation @ altinn-studio-docs
  • Has been added/updated
  • No functionality has been changed/added, so no documentation is needed
  • I will do that later/have created an issue
• Support in Altinn Studio
  • Issue(s) created for support in Studio
  • This change/feature does not require any changes to Altinn Studio
• Sprint board
  • The original issue (or this PR itself) has been added to the Team Apps project and to the current sprint board
  • I don't have permissions to do that, please help me out
• Labels
  • I have added a kind/* label to this PR for proper release notes grouping
  • I don't have permissions to add labels, please help me out

[bjosttveit]

/publish

[github-actions]

PR release:

• <link rel="stylesheet" type="text/css" href="https://altinncdn.no/toolkits/altinn-app-frontend/4.16.0-pr.465.navigation.5b4484fb/altinn-app-frontend.css">
• <script src="https://altinncdn.no/toolkits/altinn-app-frontend/4.16.0-pr.465.navigation.5b4484fb/altinn-app-frontend.js"></script>

⚙️ Building...
✅ Done!

[bjosttveit]

@SimenRokaas angående problemene du rapportere om "ferdig" markering. Den ene hvor en side ikke markeres selv om alle rundt markeres, og den der sider med prefill markeres uten at brukeren har vært innom. Nå har jeg endret slik at vi ser på hvilke sider brukeren har vært innom (ved bruk av neste-knapper, man kan fortsatt hoppe fritt i navigasjons-menyen uten å endre tilstanden) i tillegg til sjekk på at validering er OK. Fortsatt usikker på når vi eventuelt skal si at "brukeren har vært innom", men tror dette vil fungere bedre. Dette er også gjort om til en opt-in egenskap på gruppe-nivå.

Angående "valgfri" gruppering, så er det nå mulig å ha "frittstående sider". Dvs. man må definere en gruppe, men hvis den bare har en side kan man sette "single": true så kan den ikke ekspanderes.

Er eksempler i test-appen og konfig-eksempler i beskrivelsen

[bjosttveit]

/publish

[github-actions]

PR release:

• <link rel="stylesheet" type="text/css" href="https://altinncdn.no/toolkits/altinn-app-frontend/4.16.0-pr.484.navigation.6869393d/altinn-app-frontend.css">
• <script src="https://altinncdn.no/toolkits/altinn-app-frontend/4.16.0-pr.484.navigation.6869393d/altinn-app-frontend.js"></script>

⚙️ Building...
✅ Done!

[bjosttveit]

/publish

[github-actions]

PR release:

• <link rel="stylesheet" type="text/css" href="https://altinncdn.no/toolkits/altinn-app-frontend/4.16.0-pr.502.navigation.c38f687c/altinn-app-frontend.css">
• <script src="https://altinncdn.no/toolkits/altinn-app-frontend/4.16.0-pr.502.navigation.c38f687c/altinn-app-frontend.js"></script>

⚙️ Building...
✅ Done!

[sonarqubecloud]

Quality Gate passed

Issues
32 New issues
0 Accepted issues

Measures
0 Security Hotspots
56.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud