Pages
How to set up an app with multiple pages, tracks, summary or multiple layouts.
Multiple layout pages can easily be set up in Altinn Studio, if you want to do it manually, see Setup. There are also some configuration options that are not available in Altinn Studio but must be set manually; for that, see Settings.
Setup
Layout pages are placed in the ui/layouts
folder in the app, to configure the order of the layout pages, see Navigation. If you have multiple process steps that require layouts, the structure is slightly different; in that case see Layout sets.
|- App/
|- ui/
|- layouts/
|- side1.json
|- side2.json
|- side3.json
|- Settings.json
Settings
There are several different settings that can be configured for your pages.
These settings are configured in the Settings.json
file seen in the folder structure above and lie in the pages
object.
If you use layout sets there is a separate file for each layout set.
{
"$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json",
"pages": {
"order": [
"Info",
"Form",
"Summary"
],
"excludeFromPdf": [
"Info",
"Summary"
],
"hideCloseButton": false,
"showLanguageSelector": false,
"showExpandWidthButton": false,
"showProgress": true,
"pdfLayoutName": "PDFLayout"
},
...
}
The available settings are the following:
Property | Type | Value |
---|---|---|
hideCloseButton | Boolean | Whether or not the close button in the upper right corner should be hidden. |
showLanguageSelector | Boolean | Whether or not the language selector should be visible. Allows the user to switch language after opening the form. |
showExpandWidthButton | Boolean | Whether or not the expand width button should be visible. Allows the user to expand the width of the page to fill the browser window. |
showProgress | Boolean | see Navigation |
pdfLayoutName | String | see PDF |
order | Array | see Navigation |
excludeFromPdf | Array | see PDF |
expandedWidth | Boolean | see Expanded form width |
Expanded form width
For å få en side til å automatisk utvide seg til full bredde av nettleservinduet når den åpnes, kan du legge til
egenskapen expandedWidth
for en layout. Dette setter standardtilstanden til siden til å være utvidet.
Du kan sette expandedWidth på tre nivåer: i filen layout-sets.json
, i filen Settings.json
og i en spesifikk side sin
layout-fil. Dersom du setter expandedWidth
på flere nivåer, vil den spesifikke verdien overskrive de generelle.
layout-sets.json
:
{
"$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout-sets.schema.v1.json",
"uiSettings": {
"expandedWidth": true
},
"sets": [
...
]
}
Settings.json
:
{
"$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json",
"pages": {
"order": [
...
],
"expandedWidth": true,
...
},
"components": {
...
}
}
Layout-fil:
{
"$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
"data": {
"expandedWidth": true,
"layout": [
components...
],
}
}
- Navigation between pages
How to set up navigation between pages.
- Tracks
How to add dynamic tracks in the app.
- Summary view
How to set up the display of a summary of the completed form.
- Layout sets
How to set up multiple layouts or forms in the same app.