diff --git a/content/app/app-dev-course-v2/modul2/index.en.md b/content/app/app-dev-course-v2/modul2/index.en.md index 273a429c5ed..e37095b54df 100644 --- a/content/app/app-dev-course-v2/modul2/index.en.md +++ b/content/app/app-dev-course-v2/modul2/index.en.md @@ -59,8 +59,7 @@ Ja, en standardkomponent med forhåndsutfylt data vil i utgangspunktet være red {{% expandsmall id="m2t2q2" header="Hvordan kan man hindre at en forhåndsutfylt verdi endres av sluttbrukeren?" %}} -Komponenten kan settes til `readOnly` ved å huke av ved "Det skal ikke være mulig å svare (read only)" for den aktuelle komponenten i Altinn Studio: -![Altinn Studio innstilling for 'read only'. Bilde]() +Komponenten kan settes til `readOnly` ved å huke av ved "Det skal ikke være mulig å svare (read only)" for den aktuelle komponenten i Altinn Studio. Alternativt kan man kjøre valideringer av dataen på serversiden for å verifisere at dataen i feltet matcher dataen fra forhåndsutfyllingskilden. Dette kan gjøres i prosesserings- eller valideringslogikken til applikasjonen. diff --git a/content/app/app-dev-course-v2/modul2/index.nb.md b/content/app/app-dev-course-v2/modul2/index.nb.md index 273a429c5ed..e37095b54df 100644 --- a/content/app/app-dev-course-v2/modul2/index.nb.md +++ b/content/app/app-dev-course-v2/modul2/index.nb.md @@ -59,8 +59,7 @@ Ja, en standardkomponent med forhåndsutfylt data vil i utgangspunktet være red {{% expandsmall id="m2t2q2" header="Hvordan kan man hindre at en forhåndsutfylt verdi endres av sluttbrukeren?" %}} -Komponenten kan settes til `readOnly` ved å huke av ved "Det skal ikke være mulig å svare (read only)" for den aktuelle komponenten i Altinn Studio: -![Altinn Studio innstilling for 'read only'. Bilde]() +Komponenten kan settes til `readOnly` ved å huke av ved "Det skal ikke være mulig å svare (read only)" for den aktuelle komponenten i Altinn Studio. Alternativt kan man kjøre valideringer av dataen på serversiden for å verifisere at dataen i feltet matcher dataen fra forhåndsutfyllingskilden. Dette kan gjøres i prosesserings- eller valideringslogikken til applikasjonen. diff --git a/content/app/app-dev-course-v2/modul4/_index.en.md b/content/app/app-dev-course-v2/modul4/_index.en.md index 911049a47ba..9d5614c448d 100644 --- a/content/app/app-dev-course-v2/modul4/_index.en.md +++ b/content/app/app-dev-course-v2/modul4/_index.en.md @@ -6,7 +6,7 @@ tags: [apps, training, options, kodelister, dynamikk ] weight: 40 --- -I denne modulen skal du utvide applikasjonen du har laget i foregående moduler for å støtte enda fler av [kravene til Sogndal kommune](../case/#krav-fra-kommunen). +I denne modulen skal du utvide applikasjonen du har laget i foregående moduler for å støtte enda fler av [kravene til Sogndal kommune](../case/#requirements-from-the-municipality). **Temaer som dekkes i denne modulen:** diff --git a/content/app/app-dev-course-v2/modul4/_index.nb.md b/content/app/app-dev-course-v2/modul4/_index.nb.md index 911049a47ba..c9f3436ad83 100644 --- a/content/app/app-dev-course-v2/modul4/_index.nb.md +++ b/content/app/app-dev-course-v2/modul4/_index.nb.md @@ -8,6 +8,7 @@ weight: 40 I denne modulen skal du utvide applikasjonen du har laget i foregående moduler for å støtte enda fler av [kravene til Sogndal kommune](../case/#krav-fra-kommunen). + **Temaer som dekkes i denne modulen:** - Kodelister/Options diff --git a/content/app/app-dev-course/modul1/_index.en.md b/content/app/app-dev-course/modul1/_index.en.md index 8f6e6515579..ccb812ec637 100644 --- a/content/app/app-dev-course/modul1/_index.en.md +++ b/content/app/app-dev-course/modul1/_index.en.md @@ -166,6 +166,7 @@ App/config/texts/resources.en.json ```json { + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/text-resources/text-resources.schema.v1.json", "language": "en", "resources": [] } @@ -237,7 +238,7 @@ You will find the field name connected to the component under `dataModelBindings App/ui/layouts/{page}.json {{< /code-title >}} -```json{linenos=false,hl_lines="7"} +```json {linenos=false,hl_lines="7"} { ... @@ -269,7 +270,7 @@ The solution is to change the `type` field from `Input` to `TextArea` (highlight App/ui/layouts/{page}.json {{< /code-title >}} -```json{linenos=false,hl_lines="3"} +```json {linenos=false,hl_lines="3"} { "id": "mellomnavn", "type": "TextArea", @@ -323,6 +324,7 @@ App/config/texts/resource.nb.json ```json { + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/text-resources/text-resources.schema.v1.json", "language": "nb", "resources": [ { @@ -422,7 +424,7 @@ App/ui/layouts/innflytterPersonalia.json ```json { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4//schemas/json/layout/layout.schema.v1.json", "data": { "layout": [ { @@ -474,8 +476,8 @@ App/ui/layouts/innflytterPersonalia.json } }, { - "id": "addressComponent", - "type": "AddressComponent", + "id": "address", + "type": "Address", "dataModelBindings": { "address": "Innflytter.Adresse.Gateadresse", "zipCode": "Innflytter.Adresse.Postnr", @@ -512,10 +514,7 @@ App/ui/layouts/innflytterPersonalia.json { "id": "NavigationButtons-yxdxMR", "type": "NavigationButtons", - "componentType": "NavigationButtons", - "dataModelBindings": {}, - "showBackButton": true, - "textResourceBindings": {} + "showBackButton": true } ] } diff --git a/content/app/app-dev-course/modul1/_index.nb.md b/content/app/app-dev-course/modul1/_index.nb.md index 59e3e3b6140..4579ef5209b 100644 --- a/content/app/app-dev-course/modul1/_index.nb.md +++ b/content/app/app-dev-course/modul1/_index.nb.md @@ -167,6 +167,7 @@ App/config/texts/resources.en.json ```json { + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/text-resources/text-resources.schema.v1.json", "language": "en", "resources": [] } @@ -237,7 +238,7 @@ Navnet på feltet som komponenten er koblet til finner du under `dataModelBindin App/ui/layouts/{page}.json {{< /code-title >}} -```json{linenos=false,hl_lines="7"} +```json {linenos=false,hl_lines="7"} { ... @@ -269,7 +270,7 @@ Løsningen er å endre `type`-feltet fra `Input` til `TextArea` (markert). App/ui/layouts/{page}.json {{< /code-title >}} -```json{linenos=false,hl_lines="3"} +```json {linenos=false,hl_lines="3"} { "id": "mellomnavn", "type": "TextArea", @@ -422,7 +423,7 @@ App/ui/layouts/innflytterPersonalia.json ```json { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4//schemas/json/layout/layout.schema.v1.json", "data": { "layout": [ { @@ -474,8 +475,8 @@ App/ui/layouts/innflytterPersonalia.json } }, { - "id": "addressComponent", - "type": "AddressComponent", + "id": "address", + "type": "Address", "dataModelBindings": { "address": "Innflytter.Adresse.Gateadresse", "zipCode": "Innflytter.Adresse.Postnr", @@ -512,10 +513,7 @@ App/ui/layouts/innflytterPersonalia.json { "id": "NavigationButtons-yxdxMR", "type": "NavigationButtons", - "componentType": "NavigationButtons", - "dataModelBindings": {}, - "showBackButton": true, - "textResourceBindings": {} + "showBackButton": true } ] } diff --git a/content/app/app-dev-course/modul2/_index.en.md b/content/app/app-dev-course/modul2/_index.en.md index 2158b11910d..80a632ed364 100644 --- a/content/app/app-dev-course/modul2/_index.en.md +++ b/content/app/app-dev-course/modul2/_index.en.md @@ -260,9 +260,9 @@ You can set the component to `readOnly` in one of two ways: App/ui/layouts/{page}.json {{< /code-title >}} -```json{linenos=false,hl_lines=["12"]} +```json {linenos=false,hl_lines=["12"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", "data": { "layout": [ { @@ -395,9 +395,9 @@ We have placed the image and heading side by side using the `grid` property (hig App/ui/layouts/info.json {{< /code-title >}} -```json{linenos=false,hl_lines=["15-17", "28-30"]} +```json {linenos=false,hl_lines=["15-17", "28-30"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", "data": { "layout": [ { @@ -437,8 +437,6 @@ App/ui/layouts/info.json { "id": "NavigationButtons-hateTR", "type": "NavigationButtons", - "componentType": "NavigationButtons", - "dataModelBindings": {}, "showBackButton": true, "textResourceBindings": { "next": "navigation.next", @@ -458,6 +456,7 @@ App/config/texts/resource.nb.json ```json { + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/text-resources/text-resources.schema.v1.json", "language": "nb", "resources": [ ... @@ -528,9 +527,9 @@ New page for *Track 1*. App/ui/layouts/info.json {{< /code-title >}} -```json{linenos=false,hl_lines=["6-27"]} +```json {linenos=false,hl_lines=["6-27"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", "data": { "layout": [ ... @@ -575,9 +574,9 @@ As an option, you can test the value of the field directly (`["dataModel", "Innf App/ui/layouts/ikke-for-deg.json {{< /code-title >}} -```json{linenos=false,hl_lines="4-11"} +```json {linenos=false,hl_lines="4-11"} { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", "data": { "hidden": [ "equals", @@ -598,8 +597,6 @@ App/ui/layouts/ikke-for-deg.json { "id": "NavigationButtons-azt7sj", "type": "NavigationButtons", - "componentType": "NavigationButtons", - "dataModelBindings": {}, "showBackButton": true, "textResourceBindings": { "back": "navigation.back" @@ -617,9 +614,9 @@ This page will be hidden when the option for *not* meeting the service requireme App/ui/layouts/innflytterPersonalia.json {{< /code-title >}} -```json{linenos=false,hl_lines=["4-11"]} +```json {linenos=false,hl_lines=["4-11"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", "data": { "hidden": [ "equals", @@ -645,9 +642,9 @@ Configure the `excludeFromPdf` property in `Settings.json` to exclude pages from App/Settings.json {{< /code-title >}} -```json{linenos=false,hl_lines="9"} +```json {linenos=false,hl_lines="9"} { - "$schema": "https://altinncdn.no/schemas/json/layout/layoutSettings.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json", "pages": { "order": [ "info", @@ -667,8 +664,9 @@ New text resources: App/config/texts/resource.nb.json {{< /code-title >}} -```json{linenos=false,hl_lines=["5-20"]} +```json {linenos=false,hl_lines=["5-20"]} { + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/text-resources/text-resources.schema.v1.json", "language": "nb", "resources": [ ... @@ -741,9 +739,9 @@ For a complete solution, please refer to the [Module 2 source code](https://alti App/ui/layouts/innflytterPersonalia.json {{< /code-title >}} -```json{linenos=false,hl_lines=["20", "24-26", "35", "39-41", "45-52"]} +```json {linenos=false,hl_lines=["20", "24-26", "35", "39-41", "45-52"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", "data": { "hidden": [ "equals", @@ -808,21 +806,20 @@ We have created a prefill file, `datamodel.prefill.json`, and configured prefill App/models/datamodel.prefill.json {{< /code-title >}} -```json{linenos=false,hl_lines=[""]} +```json {linenos=false,hl_lines=[""]} { - "$schema": "https://altinncdn.no/schemas/json/prefill/prefill.schema.v1.json", - "allowOverwrite": true, - "ER": { - }, - "DSF": { - "FirstName": "Innflytter.Fornavn", - "MiddleName": "Innflytter.Mellomnavn", - "LastName": "Innflytter.Etternavn", - "TelephoneNumber": "Innflytter.Kontaktinformasjon.Telefonnummer" - }, - "UserProfile": { - "Email": "Innflytter.Kontaktinformasjon.Epost" - } + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/prefill/prefill.schema.v1.json", + "allowOverwrite": true, + "ER": {}, + "DSF": { + "FirstName": "Innflytter.Fornavn", + "MiddleName": "Innflytter.Mellomnavn", + "LastName": "Innflytter.Etternavn", + "TelephoneNumber": "Innflytter.Kontaktinformasjon.Telefonnummer" + }, + "UserProfile": { + "Email": "Innflytter.Kontaktinformasjon.Epost" + } } ``` diff --git a/content/app/app-dev-course/modul2/_index.nb.md b/content/app/app-dev-course/modul2/_index.nb.md index 813b28b8858..e5782949dde 100644 --- a/content/app/app-dev-course/modul2/_index.nb.md +++ b/content/app/app-dev-course/modul2/_index.nb.md @@ -267,9 +267,9 @@ Komponenten kan settes til `readOnly` på én av to måter: App/ui/layouts/{page}.json {{< /code-title >}} -```json{linenos=false,hl_lines=["12"]} +```json {linenos=false,hl_lines=["12"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", "data": { "layout": [ { @@ -403,9 +403,9 @@ Vi har plassert bildet og overskriften ved siden av hverandre ved hjelp av `grid App/ui/layouts/info.json {{< /code-title >}} -```json{linenos=false,hl_lines=["15-17", "28-30"]} +```json {linenos=false,hl_lines=["15-17", "28-30"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", "data": { "layout": [ { @@ -445,8 +445,6 @@ App/ui/layouts/info.json { "id": "NavigationButtons-hateTR", "type": "NavigationButtons", - "componentType": "NavigationButtons", - "dataModelBindings": {}, "showBackButton": true, "textResourceBindings": { "next": "navigation.next", @@ -466,6 +464,7 @@ App/config/texts/resource.nb.json ```json { + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/text-resources/text-resources.schema.v1.json", "language": "nb", "resources": [ ... @@ -534,9 +533,9 @@ Ny side for *Spor 1*. App/ui/layouts/info.json {{< /code-title >}} -```json{linenos=false,hl_lines=["6-27"]} +```json {linenos=false,hl_lines=["6-27"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", "data": { "layout": [ ... @@ -581,9 +580,9 @@ Som et alternativ kan du teste verdien til feltet direkte (`["dataModel", "Innfl App/ui/layouts/ikke-for-deg.json {{< /code-title >}} -```json{linenos=false,hl_lines="4-11"} +```json {linenos=false,hl_lines="4-11"} { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", "data": { "hidden": [ "equals", @@ -604,8 +603,6 @@ App/ui/layouts/ikke-for-deg.json { "id": "NavigationButtons-azt7sj", "type": "NavigationButtons", - "componentType": "NavigationButtons", - "dataModelBindings": {}, "showBackButton": true, "textResourceBindings": { "back": "navigation.back" @@ -623,9 +620,9 @@ Tilsvarende logikk er lagt til for skjemasiden. App/ui/layouts/innflytterPersonalia.json {{< /code-title >}} -```json{linenos=false,hl_lines=["4-11"]} +```json {linenos=false,hl_lines=["4-11"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", "data": { "hidden": [ "equals", @@ -651,9 +648,9 @@ Vi ønsker ikke å inkludere siden 'Ikke for deg' dersom det skal genereres en p App/Settings.json {{< /code-title >}} -```json{linenos=false,hl_lines="9"} +```json {linenos=false,hl_lines="9"} { - "$schema": "https://altinncdn.no/schemas/json/layout/layoutSettings.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json", "pages": { "order": [ "info", @@ -673,8 +670,9 @@ Nye tekstressurser: App/config/texts/resource.nb.json {{< /code-title >}} -```json{linenos=false,hl_lines=["5-20"]} +```json {linenos=false,hl_lines=["6-21"]} { + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/text-resources/text-resources.schema.v1.json", "language": "nb", "resources": [ ... @@ -747,9 +745,9 @@ Koden under viser et eksempel med noen av de endrede komponentene. App/ui/layouts/innflytterPersonalia.json {{< /code-title >}} -```json{linenos=false,hl_lines=["20", "24-26", "35", "39-41", "45-52"]} +```json {linenos=false,hl_lines=["20", "24-26", "35", "39-41", "45-52"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", "data": { "hidden": [ "equals", @@ -814,21 +812,20 @@ Vi har opprettet filen `datamodel.prefill.json` og konfigurert forhåndsutfyllin App/models/datamodel.prefill.json {{< /code-title >}} -```json{linenos=false,hl_lines=[""]} +```json {linenos=false,hl_lines=[""]} { - "$schema": "https://altinncdn.no/schemas/json/prefill/prefill.schema.v1.json", - "allowOverwrite": true, - "ER": { - }, - "DSF": { - "FirstName": "Innflytter.Fornavn", - "MiddleName": "Innflytter.Mellomnavn", - "LastName": "Innflytter.Etternavn", - "TelephoneNumber": "Innflytter.Kontaktinformasjon.Telefonnummer" - }, - "UserProfile": { - "Email": "Innflytter.Kontaktinformasjon.Epost" - } + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/prefill/prefill.schema.v1.json", + "allowOverwrite": true, + "ER": {}, + "DSF": { + "FirstName": "Innflytter.Fornavn", + "MiddleName": "Innflytter.Mellomnavn", + "LastName": "Innflytter.Etternavn", + "TelephoneNumber": "Innflytter.Kontaktinformasjon.Telefonnummer" + }, + "UserProfile": { + "Email": "Innflytter.Kontaktinformasjon.Epost", + } } ``` diff --git a/content/app/app-dev-course/modul4/_index.en.md b/content/app/app-dev-course/modul4/_index.en.md index 02c8f44ddff..677f1cf1db0 100644 --- a/content/app/app-dev-course/modul4/_index.en.md +++ b/content/app/app-dev-course/modul4/_index.en.md @@ -166,9 +166,9 @@ The service should run on your local computer with localtest and it should be po App/ui/layouts/Arbeidsforhold.json {{< /code-title >}} -```json{linenos=false,hl_lines="5-23"} +```json {linenos=false,hl_lines="5-23"} { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", "data": { "layout": [ { @@ -276,7 +276,7 @@ To send a query parameter with the Industry component, we add a mapping to the c App/ui/layouts/arbeidsforhold.json {{< /code-title >}} -```json{linenos=false,hl_lines="13-15"} +```json {linenos=false,hl_lines="13-15"} ... { "id": "Checkboxes-bransje", @@ -386,7 +386,7 @@ App/Program.cs App/ui/layouts/arbeidsforhold.json {{< /code-title >}} -```json{hl_lines="8"} +```json {hl_lines="8"} ... { "id": "info-it-kompteanse", diff --git a/content/app/app-dev-course/modul4/_index.nb.md b/content/app/app-dev-course/modul4/_index.nb.md index 86bd29b2c3a..01c31b35d1b 100644 --- a/content/app/app-dev-course/modul4/_index.nb.md +++ b/content/app/app-dev-course/modul4/_index.nb.md @@ -169,9 +169,9 @@ og du skal kunne validere at komponentene presenterer forventede dataverdier. App/ui/layouts/Arbeidsforhold.json {{< /code-title >}} -```json{linenos=false,hl_lines="5-23"} +```json {linenos=false,hl_lines="5-23"} { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", "data": { "layout": [ { @@ -279,7 +279,7 @@ App/Program.cs App/ui/layouts/arbeidsforhold.json {{< /code-title >}} -```json{linenos=false,hl_lines="13-15"} +```json {linenos=false,hl_lines="13-15"} ... { "id": "Checkboxes-bransje", @@ -390,7 +390,7 @@ App/Program.cs App/ui/layouts/arbeidsforhold.json {{< /code-title >}} -```json{hl_lines="8"} +```json {hl_lines="8"} ... { "id": "info-it-kompteanse", diff --git a/content/app/app-dev-course/modul5/_index.en.md b/content/app/app-dev-course/modul5/_index.en.md index 6e81e501a6c..67474dfa36e 100644 --- a/content/app/app-dev-course/modul5/_index.en.md +++ b/content/app/app-dev-course/modul5/_index.en.md @@ -263,6 +263,7 @@ App/config/texts/resources.nb.json ```json { + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/text-resources/text-resources.schema.v1.json", "language": "nb", "resources": [ ... @@ -288,6 +289,7 @@ App/config/texts/resources.nb.json ```json { + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/text-resources/text-resources.schema.v1.json", "language": "nb", "resources": [ ... diff --git a/content/app/app-dev-course/modul5/_index.nb.md b/content/app/app-dev-course/modul5/_index.nb.md index 87d4d7a3547..79454e172c1 100644 --- a/content/app/app-dev-course/modul5/_index.nb.md +++ b/content/app/app-dev-course/modul5/_index.nb.md @@ -268,6 +268,7 @@ App/config/texts/resources.nb.json ```json { + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/text-resources/text-resources.schema.v1.json", "language": "nb", "resources": [ ... @@ -293,6 +294,7 @@ App/config/texts/resources.nb.json ```json { + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/text-resources/text-resources.schema.v1.json", "language": "nb", "resources": [ ... diff --git a/content/app/app-dev-course/modul6/_index.en.md b/content/app/app-dev-course/modul6/_index.en.md index fe2b5a74969..8a72f7dc397 100644 --- a/content/app/app-dev-course/modul6/_index.en.md +++ b/content/app/app-dev-course/modul6/_index.en.md @@ -148,44 +148,49 @@ App/ui/layouts/innflytterPersonalia.json {{< /code-title >}} ```json -... - { - "id": "tidligere-bosteder-overskrift", - "type": "Header", - "size": "M", - "textResourceBindings": { - "title": "innflytterPersonalia.tidligere-bosteder-overskrift.title" - } - }, - { - "id": "Group-tidligere-bosteder", - "type": "Group", - "maxCount": 10, - "dataModelBindings": { - "group": "Innflytter.TidligereBosteder" - }, - "textResourceBindings": { - "add_button": "innflytterPersonalia.AddressComponent-adresse" - }, - "children": [ - "AddressComponent-tidligere-bosted" - ] - }, - { - "id": "AddressComponent-tidligere-bosted", - "type": "AddressComponent", - "dataModelBindings": { - "address": "Innflytter.TidligereBosteder.Gateadresse", - "zipCode": "Innflytter.TidligereBosteder.Postnr", - "postPlace": "Innflytter.TidligereBosteder.Poststed" - }, - "simplified": true, - "required": true, - "textResourceBindings": { - "title": "innflytterPersonalia.AddressComponent-tidligere-bosted.title" - } - }, -... +{ + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4//schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "tidligere-bosteder-overskrift", + "type": "Header", + "size": "M", + "textResourceBindings": { + "title": "innflytterPersonalia.tidligere-bosteder-overskrift.title" + } + }, + { + "id": "Group-tidligere-bosteder", + "type": "RepeatingGroup", + "maxCount": 10, + "dataModelBindings": { + "group": "Innflytter.TidligereBosteder" + }, + "textResourceBindings": { + "add_button": "innflytterPersonalia.Address-adresse" + }, + "children": [ + "Address-tidligere-bosted" + ] + }, + { + "id": "Address-tidligere-bosted", + "type": "Address", + "dataModelBindings": { + "address": "Innflytter.TidligereBosteder.Gateadresse", + "zipCode": "Innflytter.TidligereBosteder.Postnr", + "postPlace": "Innflytter.TidligereBosteder.Poststed" + }, + "simplified": true, + "required": true, + "textResourceBindings": { + "title": "innflytterPersonalia.Address-tidligere-bosted.title" + } + } + ] + } +} ``` **The following text resources have been added:** @@ -196,22 +201,22 @@ App/config/texts/resources.nb.json ```json { - "language": "nb", - "resources": [ - ... - { - "id": "innflytterPersonalia.AddressComponent-adresse", - "value": "adresse" - }, - { - "id": "innflytterPersonalia.AddressComponent-tidligere-bosted.title", - "value": "Tidligere bosted" - }, - { - "id": "innflytterPersonalia.tidligere-bosteder-overskrift.title", - "value": "Tidligere bosteder" - } - ] + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/text-resources/text-resources.schema.v1.json", + "language": "nb", + "resources": [ + { + "id": "innflytterPersonalia.Address-adresse", + "value": "adresse" + }, + { + "id": "innflytterPersonalia.Address-tidligere-bosted.title", + "value": "Tidligere bosted" + }, + { + "id": "innflytterPersonalia.tidligere-bosteder-overskrift.title", + "value": "Tidligere bosteder" + } + ] } ``` @@ -223,32 +228,6 @@ App/config/texts/resources.nb.json ![Validation postal code ok. Screenshot](./postal-code-validation-ok-screenshot.png "Validation postal code ok") -* **Add a validation trigger to the address component:** - -{{< code-title >}} -App/ui/layouts/innflytterPersonalia.json -{{< /code-title >}} - -```json{hl_lines="15"} -... - { - "id": "AddressComponent-tidligere-bosted", - "type": "AddressComponent", - "dataModelBindings": { - "address": "Innflytter.TidligereBosteder.Gateadresse", - "zipCode": "Innflytter.TidligereBosteder.Postnr", - "postPlace": "Innflytter.TidligereBosteder.Poststed" - }, - "simplified": true, - "required": true, - "textResourceBindings": { - "title": "innflytterPersonalia.AddressComponent-tidligere-bosted.title" - }, - "triggers": ["validation"] - }, -... -``` - * **Add validation logic in the `ValidateData` method in `InstanceValidation.cs`:** {{< code-title >}} @@ -294,14 +273,15 @@ App/config/texts/resources.nb.json ```json { - "language": "nb", - "resources": [ - ... - { - "id": "Innflytter.TidligereBosteder.validation_message", - "value": "Vi er beæret over å motta en '1337' innbygger til Sogndal kommune! Du må imidlertid bekrefte din uovertruffenhet ved å legge til en 🌟 i adressefeltet for å gå videre." - } - ] + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/text-resources/text-resources.schema.v1.json", + "language": "nb", + "resources": [ + ..., + { + "id": "Innflytter.TidligereBosteder.validation_message", + "value": "Vi er beæret over å motta en '1337' innbygger til Sogndal kommune! Du må imidlertid bekrefte din uovertruffenhet ved å legge til en 🌟 i adressefeltet for å gå videre." + } + ] } ``` diff --git a/content/app/app-dev-course/modul6/_index.nb.md b/content/app/app-dev-course/modul6/_index.nb.md index db11db03766..45305005db7 100644 --- a/content/app/app-dev-course/modul6/_index.nb.md +++ b/content/app/app-dev-course/modul6/_index.nb.md @@ -153,44 +153,49 @@ App/ui/layouts/innflytterPersonalia.json {{< /code-title >}} ```json -... - { +{ + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4//schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { "id": "tidligere-bosteder-overskrift", "type": "Header", "size": "M", "textResourceBindings": { - "title": "innflytterPersonalia.tidligere-bosteder-overskrift.title" + "title": "innflytterPersonalia.tidligere-bosteder-overskrift.title" } - }, - { + }, + { "id": "Group-tidligere-bosteder", - "type": "Group", + "type": "RepeatingGroup", "maxCount": 10, "dataModelBindings": { - "group": "Innflytter.TidligereBosteder" + "group": "Innflytter.TidligereBosteder" }, "textResourceBindings": { - "add_button": "innflytterPersonalia.AddressComponent-adresse" + "add_button": "innflytterPersonalia.Address-adresse" }, "children": [ - "AddressComponent-tidligere-bosted" + "Address-tidligere-bosted" ] - }, - { - "id": "AddressComponent-tidligere-bosted", - "type": "AddressComponent", + }, + { + "id": "Address-tidligere-bosted", + "type": "Address", "dataModelBindings": { - "address": "Innflytter.TidligereBosteder.Gateadresse", - "zipCode": "Innflytter.TidligereBosteder.Postnr", - "postPlace": "Innflytter.TidligereBosteder.Poststed" + "address": "Innflytter.TidligereBosteder.Gateadresse", + "zipCode": "Innflytter.TidligereBosteder.Postnr", + "postPlace": "Innflytter.TidligereBosteder.Poststed" }, "simplified": true, "required": true, "textResourceBindings": { - "title": "innflytterPersonalia.AddressComponent-tidligere-bosted.title" + "title": "innflytterPersonalia.Address-tidligere-bosted.title" } - }, -... + } + ] + } +} ``` **Følgende tekstressurser er lagt til:** @@ -201,22 +206,22 @@ App/config/texts/resources.nb.json ```json { - "language": "nb", - "resources": [ - ... - { - "id": "innflytterPersonalia.AddressComponent-adresse", - "value": "adresse" - }, - { - "id": "innflytterPersonalia.AddressComponent-tidligere-bosted.title", - "value": "Tidligere bosted" - }, - { - "id": "innflytterPersonalia.tidligere-bosteder-overskrift.title", - "value": "Tidligere bosteder" - } - ] + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/text-resources/text-resources.schema.v1.json", + "language": "nb", + "resources": [ + { + "id": "innflytterPersonalia.Address-adresse", + "value": "adresse" + }, + { + "id": "innflytterPersonalia.Address-tidligere-bosted.title", + "value": "Tidligere bosted" + }, + { + "id": "innflytterPersonalia.tidligere-bosteder-overskrift.title", + "value": "Tidligere bosteder" + } + ] } ``` @@ -228,32 +233,6 @@ App/config/texts/resources.nb.json ![Validering postnummer ok. Skjermbilde](./postal-code-validation-ok-screenshot.png "Validering postnummer ok") -* **Legg til en validerings-trigger på adressekomponenten:** - -{{< code-title >}} -App/ui/layouts/innflytterPersonalia.json -{{< /code-title >}} - -```json{hl_lines="15"} -... - { - "id": "AddressComponent-tidligere-bosted", - "type": "AddressComponent", - "dataModelBindings": { - "address": "Innflytter.TidligereBosteder.Gateadresse", - "zipCode": "Innflytter.TidligereBosteder.Postnr", - "postPlace": "Innflytter.TidligereBosteder.Poststed" - }, - "simplified": true, - "required": true, - "textResourceBindings": { - "title": "innflytterPersonalia.AddressComponent-tidligere-bosted.title" - }, - "triggers": ["validation"] - }, -... -``` - * **Legg til valideringslogikk i metoden `ValidateData` i `InstanceValidation.cs`:** {{< code-title >}} @@ -299,14 +278,15 @@ App/config/texts/resources.nb.json ```json { - "language": "nb", - "resources": [ - ... - { - "id": "Innflytter.TidligereBosteder.validation_message", - "value": "Vi er beæret over å motta en '1337' innbygger til Sogndal kommune! Du må imidlertid bekrefte din uovertruffenhet ved å legge til en 🌟 i adressefeltet for å gå videre." - } - ] + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/text-resources/text-resources.schema.v1.json", + "language": "nb", + "resources": [ + ..., + { + "id": "Innflytter.TidligereBosteder.validation_message", + "value": "Vi er beæret over å motta en '1337' innbygger til Sogndal kommune! Du må imidlertid bekrefte din uovertruffenhet ved å legge til en 🌟 i adressefeltet for å gå videre." + } + ] } ``` diff --git a/content/app/app-dev-course/modul7/_index.nb.md b/content/app/app-dev-course/modul7/_index.nb.md index 4edb016cf38..993d28f1ccb 100644 --- a/content/app/app-dev-course/modul7/_index.nb.md +++ b/content/app/app-dev-course/modul7/_index.nb.md @@ -197,36 +197,40 @@ App/ui/layouts/oppsummering.json {{< /code-title >}} ```json -[ - ... - { - "id": "arbeidsforhold-group", - "type": "Group", - "textResourceBindings": { - "title": "Arbeid" - }, - "children": ["summary9", "summary10", "summary11"] - }, - { - "id": "summary9", - "type": "Summary", - "componentRef": "RadioButtons-sektor", - "pageRef": "Arbeidsforhold" - }, - { - "id": "summary10", - "type": "Summary", - "componentRef": "Checkboxes-bransje", - "pageRef": "Arbeidsforhold" - }, - { - "id": "summary11", - "type": "Summary", - "componentRef": "Dropdown-years-in-workforce", - "pageRef": "Arbeidsforhold" - }, - ... -] +{ + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "arbeidsforhold-group", + "type": "Group", + "textResourceBindings": { + "title": "Arbeid" + }, + "children": [ + "summary9", + "summary10", + "summary11" + ] + }, + { + "id": "summary9", + "type": "Summary", + "componentRef": "RadioButtons-sektor" + }, + { + "id": "summary10", + "type": "Summary", + "componentRef": "Checkboxes-bransje" + }, + { + "id": "summary11", + "type": "Summary", + "componentRef": "Dropdown-years-in-workforce" + } + ] + } +} ``` * Legg til en innsendingsknapp med teksten 'Bekreft' og fjern innsendingsknappen fra siden `Arbeidsforhold.json`. @@ -237,27 +241,30 @@ App/ui/layouts/oppsummering.json {{< /code-title >}} ```json -[ - ... - { - "id": "panelinfo", - "type": "Panel", - "textResourceBindings": { - "title": "MERK", - "body": "preview.warning" - }, - "variant": "warning", - "showIcon": true - }, - { - "id": "preview-confirm", - "type": "Button", - "textResourceBindings": { - "title": "button.confirm" - } - }, - ... -] +{ + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "panelinfo", + "type": "Panel", + "textResourceBindings": { + "title": "MERK", + "body": "preview.warning" + }, + "variant": "warning", + "showIcon": true + }, + { + "id": "preview-confirm", + "type": "Button", + "textResourceBindings": { + "title": "button.confirm" + } + } + ] + } +} ``` Fullstendig løsning: [oppsummering.json](https://altinn.studio/repos/tss/flyttemelding-sogndal/src/branch/modul7/App/ui/layouts/oppsummering.json) @@ -270,14 +277,14 @@ App/ui/layouts/innflytterPersonalia.json ```json -// addressComponent +// address "textResourceBindings": { "summaryTitle": "Adresse" } -// AddressComponent-tidligere-bosted +// Address-tidligere-bosted "textResourceBindings": { - "summaryTitle": "innflytterPersonalia.AddressComponent-tidligere-bosted.title" + "summaryTitle": "innflytterPersonalia.Address-tidligere-bosted.title" } ``` @@ -290,9 +297,9 @@ Merk at hvis siden er lagt til i Studio Designer vil den dukke opp under `pages` App/ui/Settings.json {{< /code-title >}} -```json{hl_lines=[9,13]} +```json {hl_lines=[9,13]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layoutSettings.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json", "pages": { "order": [ "info", @@ -316,6 +323,7 @@ App/config/texts/resources.nb.json ```json { + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/text-resources/text-resources.schema.v1.json", "language": "nb", "resources": [ ... @@ -379,7 +387,7 @@ App/ui/layout-sets.json ```json { - ... + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout-sets.schema.v1.json", "sets": [ { "id": "stateless", @@ -402,7 +410,7 @@ App/ui/stateless/Settings.json ```json { - ... + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json", "pages": { "order": [ "info", @@ -418,7 +426,7 @@ App/ui/statefull/Settings.json ```json { - ... + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json", "pages": { "order": [ "innflytterPersonalia", @@ -440,7 +448,7 @@ Legg til `"onEntry": { "show": "stateless" }`. App/config/applicationmetadata.json {{< /code-title >}} -```json{hl_lines=10} +```json {hl_lines=10} { "id": "ttd/flyttemelding-sogndal", "org": "ttd", @@ -465,7 +473,7 @@ Vi har brukt uttrykk på knappene for å bestemme hvilken knapp som skal vises/s App/ui/stateless/layouts/info.json {{< /code-title >}} -```json{hl_lines=[9,17]} +```json {hl_lines=[9,17]} [ ... { @@ -505,6 +513,7 @@ App/config/texts/resource.nb.json ```json { + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/text-resources/text-resources.schema.v1.json", "language": "nb", "resources": [ ... diff --git a/content/app/development/configuration/stateless/_index.en.md b/content/app/development/configuration/stateless/_index.en.md index b0ea52618fb..1d9518b4d54 100644 --- a/content/app/development/configuration/stateless/_index.en.md +++ b/content/app/development/configuration/stateless/_index.en.md @@ -193,7 +193,7 @@ Example of a calculation which populates the data model mentioned in the example ```c# public async Task ProcessDataRead(Instance instance, Guid? dataId, object data) { - if (instance.GetType() == typeof(StatelessV1)) + if (data.GetType() == typeof(StatelessV1)) { StatelessV1 form = (StatelessV1) data; // Here you can do what you want, for ex. an API-call diff --git a/content/app/development/configuration/stateless/_index.nb.md b/content/app/development/configuration/stateless/_index.nb.md index e27982fd5b8..c70a2ace671 100644 --- a/content/app/development/configuration/stateless/_index.nb.md +++ b/content/app/development/configuration/stateless/_index.nb.md @@ -192,7 +192,7 @@ Eksempel på en kalkulering som populerer datamodellen nevnt i eksempelet over: ```c# public async Task ProcessDataRead(Instance instance, Guid? dataId, object data) { - if (instance.GetType() == typeof(StatelessV1)) + if (data.GetType() == typeof(StatelessV1)) { StatelessV1 form = (StatelessV1) data; // Her kan du gjøre det du ønsker, f.eks et API-kall diff --git a/content/app/development/data/options/_index.en.md b/content/app/development/data/options/_index.en.md index fc3371731c8..c2ae516ffb3 100644 --- a/content/app/development/data/options/_index.en.md +++ b/content/app/development/data/options/_index.en.md @@ -222,7 +222,7 @@ var options = new AppOptions Descriptions and help texts used in options based on repeating groups can be set up with dynamic text-resources in the same way as labels, described in -[options based on repeating groups](dynamic-codelists). +[options based on repeating groups](repeating-group-codelists). ```json { diff --git a/content/app/development/data/options/_index.nb.md b/content/app/development/data/options/_index.nb.md index 61bcb7ae28d..736ae68dfe9 100644 --- a/content/app/development/data/options/_index.nb.md +++ b/content/app/development/data/options/_index.nb.md @@ -212,7 +212,7 @@ var options = new AppOptions Beskrivelser og hjelpetekster som brukes i options basert på repeterende grupper kan settes opp med dynamiske text-ressurser på samme måte som `label`, som er beskrevet i -[options basert på repeterende grupper](dynamic-codelists). +[options basert på repeterende grupper](repeating-group-codelists). ```json { diff --git a/content/app/development/data/options/repeating-group-codelists/_index.en.md b/content/app/development/data/options/repeating-group-codelists/_index.en.md index 9242238b4cc..d95cf0ba03d 100644 --- a/content/app/development/data/options/repeating-group-codelists/_index.en.md +++ b/content/app/development/data/options/repeating-group-codelists/_index.en.md @@ -1,8 +1,7 @@ --- title: Code lists based on repeating groups from the data model -linktitle: Code lists based on repeating groups from the data model +linktitle: From repeating groups description: How to configure code lists that gets it's values from a repeating group from the datamodel? -toc: true weight: 150 --- diff --git a/content/app/development/data/options/repeating-group-codelists/_index.nb.md b/content/app/development/data/options/repeating-group-codelists/_index.nb.md index 553d6727f72..bfafc5c1cb4 100644 --- a/content/app/development/data/options/repeating-group-codelists/_index.nb.md +++ b/content/app/development/data/options/repeating-group-codelists/_index.nb.md @@ -1,8 +1,7 @@ --- -title: Dynamiske kodelister fra repeterede grupper i datamodellen -linktitle: Dynamiske kodelister fra repeterende grupper i datamodellen +title: Kodelister fra repeterede grupper i datamodellen +linktitle: Fra repeterende grupper description: Hvordan konfigurere kodelister som får verdiene sine basert på verdier hentet fra en repeterende gruppe i datamodellen? -toc: true weight: 150 --- diff --git a/content/app/development/process/tasks/signing/_index.en.md b/content/app/development/process/tasks/signing/_index.en.md index 4c11037e78c..9f74aa06b0d 100644 --- a/content/app/development/process/tasks/signing/_index.en.md +++ b/content/app/development/process/tasks/signing/_index.en.md @@ -146,7 +146,7 @@ If you have a v3 application without a layout set, see [Layout-sets](../../../ux Create a new folder in `App/ui/` with a name that describes this layout set, for example, _signing_. In this folder, create the file `Settings.json` and a folder named `layouts`. -In the `layouts` folder, create files that define how pages in this layout set should look. The only component that a signing layout must have is an [`ActionButton`](../../../ux/components/ActionButton/) with `"action": "sign"`, which defines that when the user presses this, they perform the sign action, advancing the process. +In the `layouts` folder, create files that define how pages in this layout set should look. The only component that a signing layout must have is an [`ActionButton`](../../../ux/components/actionbutton/) with `"action": "sign"`, which defines that when the user presses this, they perform the sign action, advancing the process. An example of a simple layout with a read-only text field and a signing button may look like this: diff --git a/content/app/development/process/tasks/signing/_index.nb.md b/content/app/development/process/tasks/signing/_index.nb.md index f5a9c90c08d..bb5984dcc55 100644 --- a/content/app/development/process/tasks/signing/_index.nb.md +++ b/content/app/development/process/tasks/signing/_index.nb.md @@ -144,7 +144,7 @@ Hvis du har en v3 applikasjon uten layoutset se [Flere skjema i samme app (layou Opprett en ny mappe i `App/ui/` med navnet som beskriver denne layoutseten, f.eks. _signering_. I denne mappen oppretter du så filen `Settings.json` og en mappe med navn `layouts`. -I `layouts` mappen opprettes filer som definerer hvordan sider i dette layoutsettet skal se ut. Det eneste komponenten som en signering layout må ha er en [`ActionButton`](../../../ux/components/ActionButton/) med `"action": "sign"` som definerer at når brukeren trykker på denne så utfører han action sign når han flytter prosessen videre. +I `layouts` mappen opprettes filer som definerer hvordan sider i dette layoutsettet skal se ut. Det eneste komponenten som en signering layout må ha er en [`ActionButton`](../../../ux/components/actionbutton/) med `"action": "sign"` som definerer at når brukeren trykker på denne så utfører han action sign når han flytter prosessen videre. Eksempel på en enkel layout med et read only tekst felt og en signerings knapp kan se sånn her ut: diff --git a/content/app/development/ux/components/button-group/_index.en.md b/content/app/development/ux/components/button-group/_index.en.md index f6a821450c2..1782b9ddb7a 100644 --- a/content/app/development/ux/components/button-group/_index.en.md +++ b/content/app/development/ux/components/button-group/_index.en.md @@ -9,31 +9,37 @@ weight: 10 ## Example ```json -... - -{ - "id": "button-group-1", - "type": "ButtonGroup", - "children": ["nav-buttons", "submit-button"] -}, { - "id": "nav-buttons", - "type": "NavigationButtons", - "textResourceBindings": { - "next": "Next", - "back": "Back" - }, - "showBackButton": true -}, -{ - "id": "submit-button", - "type": "Button", - "textResourceBindings": { - "title": "Submit" + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "button-group1", + "type": "ButtonGroup", + "children": [ + "nav-buttons", + "submit-button" + ] + }, + { + "id": "nav-buttons", + "type": "NavigationButtons", + "textResourceBindings": { + "next": "Next", + "back": "Back" + }, + "showBackButton": true + }, + { + "id": "submit-button", + "type": "Button", + "textResourceBindings": { + "title": "Submit" + } + } + ] } } - -... ``` ## Configuration diff --git a/content/app/development/ux/components/button-group/_index.nb.md b/content/app/development/ux/components/button-group/_index.nb.md index 62264233d65..1bc43392c15 100644 --- a/content/app/development/ux/components/button-group/_index.nb.md +++ b/content/app/development/ux/components/button-group/_index.nb.md @@ -9,31 +9,37 @@ weight: 10 ## Eksempel ```json -... - -{ - "id": "button-group-1", - "type": "ButtonGroup", - "children": ["nav-buttons", "submit-button"] -}, { - "id": "nav-buttons", - "type": "NavigationButtons", - "textResourceBindings": { - "next": "Neste", - "back": "Tilbake" - }, - "showBackButton": true -}, -{ - "id": "submit-button", - "type": "Button", - "textResourceBindings": { - "title": "Send inn" + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "button-group1", + "type": "ButtonGroup", + "children": [ + "nav-buttons", + "submit-button" + ] + }, + { + "id": "nav-buttons", + "type": "NavigationButtons", + "textResourceBindings": { + "next": "Neste", + "back": "Tilbake" + }, + "showBackButton": true + }, + { + "id": "submit-button", + "type": "Button", + "textResourceBindings": { + "title": "Send inn" + } + } + ] } } - -... ``` ## Konfigurasjon diff --git a/content/app/development/ux/components/likert/_index.en.md b/content/app/development/ux/components/likert/_index.en.md index 57bc2020386..982f6869183 100644 --- a/content/app/development/ux/components/likert/_index.en.md +++ b/content/app/development/ux/components/likert/_index.en.md @@ -161,15 +161,15 @@ This can be done in the text resource files: ```json [ { - "id": "question-1", + "id": "question1", "value": "Gjør du leksene dine?" }, { - "id": "question-2", + "id": "question2", "value": "Fungerer kalkulatoren din?" }, { - "id": "question-3", + "id": "question3", "value": "Er pulten din ryddig?" }, { diff --git a/content/app/development/ux/components/likert/_index.nb.md b/content/app/development/ux/components/likert/_index.nb.md index 2e73e70bd33..141828c0d0a 100644 --- a/content/app/development/ux/components/likert/_index.nb.md +++ b/content/app/development/ux/components/likert/_index.nb.md @@ -160,15 +160,15 @@ Dette kan gjøres i tekst-ressursfilene: ```json [ { - "id": "question-1", + "id": "question1", "value": "Gjør du leksene dine?" }, { - "id": "question-2", + "id": "question2", "value": "Fungerer kalkulatoren din?" }, { - "id": "question-3", + "id": "question3", "value": "Er pulten din ryddig?" }, { diff --git a/content/app/development/ux/fields/grouping/repeating/_index.en.md b/content/app/development/ux/fields/grouping/repeating/_index.en.md index 60283399078..5746821a1f4 100644 --- a/content/app/development/ux/fields/grouping/repeating/_index.en.md +++ b/content/app/development/ux/fields/grouping/repeating/_index.en.md @@ -27,56 +27,58 @@ Below is a form with a repeating group that: {{% expandlarge id="full-example" header="Show configuration for this screenshot" %}} ```json {linenos=inline} -[ - { - "id": "gruppe", - "type": "RepeatingGroup", - "children": [ - "avkrysningsboks", - "adresse" - ], - "maxCount": 3, - "dataModelBindings": { - "group": "GruppeListe" - } - }, - { - "id": "avkrysningsboks", - "type": "Checkboxes", - "textResourceBindings": { - "title": "Avkrysningsboks" - }, - "dataModelBindings": { - "simpleBinding": "GruppeListe.Avkrysning" - }, - "options": [ +{ + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ { - "label": "Navn", - "value": "Verdi1" + "id": "gruppe", + "type": "RepeatingGroup", + "children": [ + "avkrysningsboks", + "adresse" + ], + "maxCount": 3, + "dataModelBindings": { + "group": "GruppeListe" + } }, { - "label": "Adresse", - "value": "Verdi2" + "id": "avkrysningsboks", + "type": "Checkboxes", + "textResourceBindings": { + "title": "Avkrysningsboks" + }, + "dataModelBindings": { + "simpleBinding": "GruppeListe.Avkrysning" + }, + "options": [ + { + "label": "Navn", + "value": "Verdi1" + }, + { + "label": "Adresse", + "value": "Verdi2" + } + ], + "required": true + }, + { + "id": "adresse", + "type": "Address", + "dataModelBindings": { + "address": "GruppeListe.Adresse", + "zipCode": "GruppeListe.Postnr", + "postPlace": "GruppeListe.Poststed" + }, + "simplified": true, + "readOnly": false, + "required": true } - ], - "required": true - }, - { - "id": "adresse", - "type": "AddressComponent", - "textResourceBindings": { - "title": "Adresse" - }, - "dataModelBindings": { - "address": "GruppeListe.Adresse", - "zipCode": "GruppeListe.Postnr", - "postPlace": "GruppeListe.Poststed" - }, - "simplified": true, - "readOnly": false, - "required": true + ] } -] +} ``` {{% /expandlarge %}} @@ -169,9 +171,6 @@ Below is a form with a repeating group that: { "id": "addresse", "type": "AddressComponent", - "textResourceBindings": { - "title": "Adresse" - }, "dataModelBindings": { "address": "GruppeListe.Adresse", "zipCode": "GruppeListe.Postnr", diff --git a/content/app/development/ux/fields/grouping/repeating/_index.nb.md b/content/app/development/ux/fields/grouping/repeating/_index.nb.md index 9bcbe59c45a..d792c6a4253 100644 --- a/content/app/development/ux/fields/grouping/repeating/_index.nb.md +++ b/content/app/development/ux/fields/grouping/repeating/_index.nb.md @@ -27,57 +27,58 @@ Under vises et skjema med en repeterende gruppe som: {{% expandlarge id="full-example" header="Vis konfigurasjonen for dette skjermskuddet" %}} ```json {linenos=inline} -[ - { - "id": "gruppe", - "type": "RepeatingGroup", - "children": [ - "avkrysningsboks", - "adresse" - ], - "maxCount": 3, - "dataModelBindings": { - "group": "GruppeListe" - } - }, - { - "id": "avkrysningsboks", - "type": "Checkboxes", - "textResourceBindings": { - "title": "Avkrysningsboks" - }, - "dataModelBindings": { - "simpleBinding": "GruppeListe.Avkrysning" - }, - "options": [ +{ + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ { - "label": "Navn", - "value": "Verdi1" + "id": "gruppe", + "type": "RepeatingGroup", + "children": [ + "avkrysningsboks", + "adresse" + ], + "maxCount": 3, + "dataModelBindings": { + "group": "GruppeListe" + } }, { - "label": "Adresse", - "value": "Verdi2" + "id": "avkrysningsboks", + "type": "Checkboxes", + "textResourceBindings": { + "title": "Avkrysningsboks" + }, + "dataModelBindings": { + "simpleBinding": "GruppeListe.Avkrysning" + }, + "options": [ + { + "label": "Navn", + "value": "Verdi1" + }, + { + "label": "Adresse", + "value": "Verdi2" + } + ], + "required": true + }, + { + "id": "adresse", + "type": "Address", + "dataModelBindings": { + "address": "GruppeListe.Adresse", + "zipCode": "GruppeListe.Postnr", + "postPlace": "GruppeListe.Poststed" + }, + "simplified": true, + "readOnly": false, + "required": true } - ], - "required": true - }, - { - "id": "adresse", - "type": "AddressComponent", - "textResourceBindings": { - "title": "Adresse" - }, - "dataModelBindings": { - "address": "GruppeListe.Adresse", - "zipCode": "GruppeListe.Postnr", - "postPlace": "GruppeListe.Poststed" - }, - "simplified": true, - "readOnly": false, - "required": true + ] } -] - +} ``` {{% /expandlarge %}} @@ -171,9 +172,6 @@ Under vises et skjema med en repeterende gruppe som: { "id": "addresse", "type": "AddressComponent", - "textResourceBindings": { - "title": "Adresse" - }, "dataModelBindings": { "address": "GruppeListe.Adresse", "zipCode": "GruppeListe.Postnr", diff --git a/content/app/development/ux/fields/settings/_index.en.md b/content/app/development/ux/fields/settings/_index.en.md index 17af7d33ccb..aa14721036f 100644 --- a/content/app/development/ux/fields/settings/_index.en.md +++ b/content/app/development/ux/fields/settings/_index.en.md @@ -28,7 +28,7 @@ Default behaviour can be overwritten by changing the settings of the field. This ```json { { - "id": "input-felt-1", + "id": "input-felt1", "type": "Input", ... "labelSettings": { @@ -52,7 +52,7 @@ You can now include the maxLength property in input fields to specify the maximu ```json { { - "id": "input-felt-1", + "id": "input-felt1", "type": "Input", ... "maxLength": 10 @@ -64,7 +64,7 @@ To validate the number of characters entered, you must also include the `maxLeng ## Configuring automatic save while typing -`Input` components, `TextArea` components and `AddressComponent` automatically save changes while the user +`Input` components, `TextArea` components and `Address` (`AddressComponent` in v3) automatically save changes while the user is typing. By default, this happens 400 milliseconds after the user last stopped typing. At this point validation and triggers will execute as well. In cases where validations and triggers are resource intensive, it might be necessary to increase the delay before saving automatically - or disable it altogether. @@ -75,7 +75,7 @@ example below, data is saved 2 seconds after the user stopped typing. ```json {hl_lines=[6]} { { - "id": "input-field-1", + "id": "input-field1", "type": "Input", ... "saveWhileTyping": 2000 diff --git a/content/app/development/ux/fields/settings/_index.nb.md b/content/app/development/ux/fields/settings/_index.nb.md index f21ef2492bc..21a93ae7850 100644 --- a/content/app/development/ux/fields/settings/_index.nb.md +++ b/content/app/development/ux/fields/settings/_index.nb.md @@ -29,7 +29,7 @@ på en komponent i form layout. ```json { { - "id": "input-felt-1", + "id": "input-felt1", "type": "Input", ... "labelSettings": { @@ -54,7 +54,7 @@ Dette vil gi en tellevisning som angir antall gjenværende tegn. Her er eksmpel ```json { { - "id": "input-felt-1", + "id": "input-felt1", "type": "Input", ... "maxLength": 10 @@ -69,7 +69,7 @@ For å validere antall tegn må du også inkludere `maxLength`-egenskapen i data ## Konfigurasjon av automatisk lagring -`Input`-komponenter, `TextArea`-komponenter og `AddressComponent` lagrer automatisk endringer når brukeren +`Input`-komponenter, `TextArea`-komponenter og `Address` (`AddressComponent` i v3) lagrer automatisk endringer når brukeren skriver. I utgangspunktet skjer dette 400 millisekunder etter brukeren sist stoppet å skrive. Når lagring av feltet starter, vil også valideringer og triggere kjøres. I tilfeller hvor disse valideringene og triggere bruker mye resursser kan det være ønskelig å øke tiden det tar det før data i feltet lagres automatisk - eller at denne funksjonaliteten @@ -81,7 +81,7 @@ ta 2 sekunder fra brukeren slutter å skrive i feltet til dataene lagres. ```json {hl_lines=[6]} { { - "id": "input-felt-1", + "id": "input-felt1", "type": "Input", ... "saveWhileTyping": 2000 diff --git a/content/app/development/ux/pages/navigation/_index.en.md b/content/app/development/ux/pages/navigation/_index.en.md index 5a945165da6..a787f73181e 100644 --- a/content/app/development/ux/pages/navigation/_index.en.md +++ b/content/app/development/ux/pages/navigation/_index.en.md @@ -84,7 +84,7 @@ The Navigation Bar is added to all layout files. Configuration example: ```json { - "id": "navbar-page-1", + "id": "navbar-page1", "type": "NavigationBar" } ``` @@ -93,7 +93,7 @@ It can also be configured to display Navigation Bar mobile also in desktop viewp ```json { - "id": "navbar-page-1", + "id": "navbar-page1", "type": "NavigationBar", "compact": true } @@ -150,7 +150,7 @@ In version 4 of app frontend, the `NavigationButtons` component have properties ```json {linenos=false,hl_lines=[5,6,7,8]} { - "id": "nav-buttons-1", + "id": "nav-buttons1", "type": "NavigationButtons", "textResourceBindings": {...}, "validateOnNext": { @@ -174,7 +174,7 @@ Similarly, the `NavigationBar` component have the `validateOnForward` and `valid ```json {linenos=false,hl_lines=[4,5,6,7]} { - "id": "nav-1", + "id": "nav1", "type": "NavigationBar", "validateOnForward": { "page": "current", @@ -190,7 +190,7 @@ In version 3 of app frontend, add a trigger to the navigation button component: ```json {linenos=false,hl_lines=[7]} { - "id": "nav-buttons-1", + "id": "nav-buttons1", "type": "NavigationButtons", "textResourceBindings": { "next": "Neste", diff --git a/content/app/development/ux/pages/navigation/_index.nb.md b/content/app/development/ux/pages/navigation/_index.nb.md index 2b377238019..73c1317257e 100644 --- a/content/app/development/ux/pages/navigation/_index.nb.md +++ b/content/app/development/ux/pages/navigation/_index.nb.md @@ -84,7 +84,7 @@ Navigasjonsbar legges inn i alle layoutfiler der den skal brukes. Eksempel på k ```json { - "id": "navbar-page-1", + "id": "navbar-page1", "type": "NavigationBar" } ``` @@ -93,7 +93,7 @@ Det er også mulighet å konfigurere komponenten NavigationBar til å vise alle ```json { - "id": "navbar-page-1", + "id": "navbar-page1", "type": "NavigationBar", "compact": true } @@ -152,7 +152,7 @@ I versjon 4 av app frontend, har `NavigationButtons`-komponenten egenskapene `va ```json {linenos=false,hl_lines=[5,6,7,8]} { - "id": "nav-buttons-1", + "id": "nav-buttons1", "type": "NavigationButtons", "textResourceBindings": {...}, "validateOnNext": { @@ -176,7 +176,7 @@ Tilsvarende, har `NavigationBar`-komponenten egenskapene `validateOnForward` og ```json {linenos=false,hl_lines=[4,5,6,7]} { - "id": "nav-1", + "id": "nav1", "type": "NavigationBar", "validateOnForward": { "page": "current", @@ -191,7 +191,7 @@ I versjon 3 av app frontend kan du legge til en trigger på navigasjonsknappen: ```json {linenos=false,hl_lines=[7]} { - "id": "nav-buttons-1", + "id": "nav-buttons1", "type": "NavigationButtons", "textResourceBindings": { "next": "Neste", diff --git a/content/app/development/ux/pages/summary/_index.en.md b/content/app/development/ux/pages/summary/_index.en.md index c0af9700af1..722185a1943 100644 --- a/content/app/development/ux/pages/summary/_index.en.md +++ b/content/app/development/ux/pages/summary/_index.en.md @@ -16,15 +16,21 @@ Setup must be done manually as of today. Support for setup through Altinn Studio Display of summary is set up in the same manner as the other form components in a form. You can choose to have the summary on it's own page, or on the same page as other form components. -The summary component is very simple, and refers to the _component_ that is to be summarized and the _page_ this is on. Example: +The summary component is very simple, and refers to the _component_ that is to be summarized. Example: -```json {hl_lines=[4]} +```json {hl_lines=[8]} { - "id": "summary-1", - "type": "Summary", - "componentRef": "", - "pageRef": "" -}, + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "summary1", + "type": "Summary", + "componentRef": "" + } + ] + } +} ``` The component displays a summary of data from the specified component. In addition, the user gets the opportunity to @@ -32,35 +38,34 @@ return to the relevant component/page to make changes. The display differs depending on which form component the summary refers to. -Note: PDF-generating does not support a summary page, so it has to be excluded by changing `ui/Settings.json` -```json -"pages": - { - "excludeFromPdf": [ "name-of-summary-page" ] - } -``` - ### Text resources for summary As stated above, the summary component offers a brief summary of data from another component. However, the following text resources set in the reference component will not be used in the reference component itself but rather in the summary component: - The `summaryTitle` field in `textResourceBindings` can be utilized to set a label/title specifically for the summary. If this field is set, it will take precedence over the `title`-field. - The `summaryAccessibleTitle` field in `textResourceBindings` can be used to define the aria-label for the edit button. By default, the summaryTitle (or title) field is used, but this field allows customization for accessibility purposes in the summary component. -```json {hl_lines=[12, 13]} +```json {hl_lines=[15,16]} { - "id": "summary-1", - "type": "Summary", - "componentRef": "", - "pageRef": "", -}, -{ - "id": "", - "type": "Input", - "textResourceBindings": { - "title": "", - "summaryTitle": "Tittel i sammendrag", - "summaryAccessibleTitle": "Aria-label på redigerknapp i sammendrag" - } + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "summary1", + "type": "Summary", + "componentRef": "" + }, + { + "id": "", + "type": "Input", + "textResourceBindings": { + "title": "", + "summaryTitle": "Tittel i sammendrag", + "summaryAccessibleTitle": "Aria-label på redigerknapp i sammendrag" + }, + ... + } + ] + } } ``` @@ -95,28 +100,33 @@ Pointing to a `Group` component will display a summary for all components in tha It is also possible to exclude certain (child) components from displaying in the group summary by using the `excludedChildren` property. This property should be set to an array with component IDs to exclude. -```json {hl_lines=[13, 21]} +```json {hl_lines=[14, 22]} { - "id": "main-group", - "type": "Group", - "textResourceBindings": { - "title": "Hovedgruppe" - }, - "dataModelBindings": { - "group": "model.mainGroup" - }, - "children": [ - "child1", - "child2", - "child3" - ] -}, -{ - "id": "summary-of-group", - "type": "Summary", - "componentRef": "main-group", - "pageRef": "FormLayout", - "excludedChildren": ["child3"] + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "main-group", + "type": "Group", + "textResourceBindings": { + "title": "Hovedgruppe" + }, + "children": [ + "child1", + "child2", + "child3" + ] + }, + { + "id": "summary-of-group", + "type": "Summary", + "componentRef": "main-group", + "excludedChildren": [ + "child3" + ] + } + ] + } } ``` @@ -131,58 +141,68 @@ To support summary display of nested groups, the following setup must be done in - Set `"largeGroup": true` on the summary component #### Example -With the following setup of a nested group in layout: +With the following setup of a nested repeating group in layout: ```json { - "id": "main-group", - "type": "Group", - "textResourceBindings": { - "title": "Hovedgruppe" - }, - "dataModelBindings": { - "group": "model.mainGroup" - }, - "children": [ - "nested-group-1" - ], - ... // remaining setup of component -}, -{ - "id": "nested-group-1", - "type": "Group", - "textResourceBindings": { - "title": "Undergruppe" - }, - "dataModelBindings": { - "group": "model.mainGroup.subGroup" - }, - "children": [ - "input-field-1" - ], - ... // remaining setup of component -}, -{ - "id": "input-field-1", - "type": "Input", - "textResourceBindings": { - "title": "Skriv inn noe her" - }, - "dataModelBindings": { - "group": "model.mainGroup.subGroup.field1" - }, - ... // remaining setup of component + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "main-group", + "type": "RepeatingGroup", + "textResourceBindings": { + "title": "Hovedgruppe" + }, + "dataModelBindings": { + "group": "model.mainGroup" + }, + "children": [ + "nested-group1" + ] + }, + { + "id": "nested-group1", + "type": "RepeatingGroup", + "textResourceBindings": { + "title": "Undergruppe" + }, + "dataModelBindings": { + "group": "model.mainGroup.subGroup" + }, + "children": [ + "input-field1" + ] + }, + { + "id": "input-field1", + "type": "Input", + "textResourceBindings": { + "title": "Skriv inn noe her" + }, + "dataModelBindings": { + "group": "model.mainGroup.subGroup.field1" + } + } + ] + } } ``` Set up the summary in the following manner: -```json {hl_lines=[6]} +```json {hl_lines=[9]} { - "id": "summary-1", - "type": "Summary", - "componentRef": "main-group", - "pageRef": "FormLayout", - "largeGroup": true, + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "summary1", + "type": "Summary", + "componentRef": "main-group", + "largeGroup": true + } + ] + } } ``` @@ -200,35 +220,39 @@ the group component. See the example below. ```json { - "id": "personalia-group", - "type": "Group", - "textResourceBindings": { - "title": "Personalia" - }, - "children": [ - "summary-1", - "summary-2", - "summary-3" - ] -}, -{ - "id": "summary-1", - "type": "Summary", - "componentRef": "d566c79c-3e3e-445b-be25-a404508f6607", - "pageRef": "personalia" -}, -{ - "id": "summary-2", - "type": "Summary", - "componentRef": "22a60bf0-d5b7-4b45-9ac9-c266b6ad3716", - "pageRef": "personalia" -}, -{ - "id": "summary-3", - "type": "Summary", - "componentRef": "d497737b-67b2-4e03-87a9-43f58579c938", - "pageRef": "personalia" -}, + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "personalia-group", + "type": "Group", + "textResourceBindings": { + "title": "Personalia" + }, + "children": [ + "summary1", + "summary2", + "summary3" + ] + }, + { + "id": "summary1", + "type": "Summary", + "componentRef": "d566c79c-3e3e-445b-be25-a404508f6607" + }, + { + "id": "summary2", + "type": "Summary", + "componentRef": "22a60bf0-d5b7-4b45-9ac9-c266b6ad3716" + }, + { + "id": "summary3", + "type": "Summary", + "componentRef": "d497737b-67b2-4e03-87a9-43f58579c938" + } + ] + } +} ``` ## Example on summary page @@ -240,7 +264,7 @@ when needed. ```json { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", "data": { "layout": [ { @@ -257,28 +281,25 @@ when needed. "title": "Personalia" }, "children": [ - "summary-1", - "summary-2", - "summary-3" + "summary1", + "summary2", + "summary3" ] }, { "id": "summary1", "type": "Summary", - "componentRef": "d566c79c-3e3e-445b-be25-a404508f6607", - "pageRef": "personalia" + "componentRef": "d566c79c-3e3e-445b-be25-a404508f6607" }, { "id": "summary2", "type": "Summary", - "componentRef": "22a60bf0-d5b7-4b45-9ac9-c266b6ad3716", - "pageRef": "personalia" + "componentRef": "22a60bf0-d5b7-4b45-9ac9-c266b6ad3716" }, { "id": "summary3", "type": "Summary", - "componentRef": "d497737b-67b2-4e03-87a9-43f58579c938", - "pageRef": "personalia" + "componentRef": "d497737b-67b2-4e03-87a9-43f58579c938" }, { "id": "drugs-group", @@ -287,47 +308,41 @@ when needed. "title": "Rus- og dopingmidler" }, "children": [ - "summary-4", - "summary-5", - "summary-6", - "summary-7" + "summary4", + "summary5", + "summary6", + "summary7" ] }, { "id": "summary4", "type": "Summary", - "componentRef": "064c0033-8996-4825-85fc-2a19fe654400", - "pageRef": "drugs" + "componentRef": "064c0033-8996-4825-85fc-2a19fe654400" }, { "id": "summary5", "type": "Summary", - "componentRef": "7f22e523-3f6d-4371-a5dd-233dc41af824", - "pageRef": "drugs" + "componentRef": "7f22e523-3f6d-4371-a5dd-233dc41af824" }, { "id": "summary6", "type": "Summary", - "componentRef": "18a7c709-ae2f-48b3-b6f6-bd631f5d8d56", - "pageRef": "drugs" + "componentRef": "18a7c709-ae2f-48b3-b6f6-bd631f5d8d56" }, { "id": "summary7", "type": "Summary", - "componentRef": "b7417cf9-f806-4835-a3d1-424c8d094d5f", - "pageRef": "drugs" + "componentRef": "b7417cf9-f806-4835-a3d1-424c8d094d5f" }, { "id": "summary-group1", "type": "Summary", - "componentRef": "arbeidserfaring-group", - "pageRef": "work" + "componentRef": "arbeidserfaring-group" }, { "id": "summary8", "type": "Summary", - "componentRef": "25f720db-5784-4c95-a530-43f0bf523466", - "pageRef": "attachment" + "componentRef": "25f720db-5784-4c95-a530-43f0bf523466" }, { "id": "button1", diff --git a/content/app/development/ux/pages/summary/_index.nb.md b/content/app/development/ux/pages/summary/_index.nb.md index e95f7d19631..723851668f3 100644 --- a/content/app/development/ux/pages/summary/_index.nb.md +++ b/content/app/development/ux/pages/summary/_index.nb.md @@ -16,15 +16,21 @@ Oppsett må gjøres manuelt inntil videre. Støtte for oppsett via Altinn Studio Visning av oppsummering settes opp på samme måte som øvrige skjema-komponenter i et skjema. Man kan velge å ha oppsummeringen på en egen side, eller på samme side som andre skjema-komponenter. -Oppsummerings-komponenten er meget enkel, og refererer til _komponent_ som skal oppsummeres, og _siden_ denne ligger på. Eksempel: +Oppsummerings-komponenten er meget enkel, og refererer til _komponent_ som skal oppsummeres. Eksempel: -```json {hl_lines=[4]} +```json {hl_lines=[8]} { - "id": "summary-1", - "type": "Summary", - "componentRef": "", - "pageRef": "" -}, + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "summary1", + "type": "Summary", + "componentRef": "" + } + ] + } +} ``` Komponenten viser oppsummering av data fra den spesifiserte komponenten. I tillegg får sluttbruker mulighet @@ -32,35 +38,34 @@ til å gå tilbake til den aktuelle komponenten/siden for å gjøre endringer. Visningen er litt forskjellig avhengig av hva slags skjemakomponent oppsummeringen refererer til. -Merk: PDF-generering støtter ikke oppsummering side, så må den ekskluderes ved å endre `ui/Settings.json` -```json -"pages": - { - "excludeFromPdf": [ "navn-til-oppsummering-side" ] - } -``` - ### Tekstressurser Som nevnt tidligere, gir oppsummeringskomponenten et sammendrag over data fra en annen komponent. Men følgende tekstressurser som er satt i referansekomponenten er kun ment for oppsummeringskomponenten: - Feltet `summaryTitle` kan brukes til å angi en egen label/tittel i oppsummeringen. Hvis dette feltet er satt, vil det overstyre `title`-feltet. - Feltet `summaryAccessibleTitle` kan brukes til å egendefinere `aria-label` for redigeringsknappen i oppsummeringen. Hvis dette feltet er satt, vil det overstyre `summaryTitle`- og `title`-feltet. -```json {hl_lines=[12, 13]} +```json {hl_lines=[15,16]} { - "id": "summary-1", - "type": "Summary", - "componentRef": "", - "pageRef": "", -}, -{ - "id": "", - "type": "Input", - "textResourceBindings": { - "title": "", - "summaryTitle": "Tittel i sammendrag", - "summaryAccessibleTitle": "Aria-label på redigerknapp i sammendrag" - } + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "summary1", + "type": "Summary", + "componentRef": "" + }, + { + "id": "", + "type": "Input", + "textResourceBindings": { + "title": "", + "summaryTitle": "Tittel i sammendrag", + "summaryAccessibleTitle": "Aria-label på redigerknapp i sammendrag" + }, + ... + } + ] + } } ``` @@ -95,28 +100,33 @@ Peker man på en `Group`-komponent vil en oppsummering vises for alle under-komp Det er også mulig å ekskludere enkelte under-komponenter fra å vise i uppsummeringen ved å bruke `excludedChildren`-egenskapen. Denne egenskapen skal innholde en liste over komponent-IDer man ikke ønsker vist. -```json {hl_lines=[13, 21]} +```json {hl_lines=[14, 22]} { - "id": "main-group", - "type": "Group", - "textResourceBindings": { - "title": "Hovedgruppe" - }, - "dataModelBindings": { - "group": "model.mainGroup" - }, - "children": [ - "child1", - "child2", - "child3" - ] -}, -{ - "id": "summary-of-group", - "type": "Summary", - "componentRef": "main-group", - "pageRef": "FormLayout", - "excludedChildren": ["child3"] + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "main-group", + "type": "Group", + "textResourceBindings": { + "title": "Hovedgruppe" + }, + "children": [ + "child1", + "child2", + "child3" + ] + }, + { + "id": "summary-of-group", + "type": "Summary", + "componentRef": "main-group", + "excludedChildren": [ + "child3" + ] + } + ] + } } ``` @@ -135,54 +145,64 @@ Med følgende oppsett av gruppe i gruppe i layout: ```json { - "id": "main-group", - "type": "Group", - "textResourceBindings": { - "title": "Hovedgruppe" - }, - "dataModelBindings": { - "group": "model.mainGroup" - }, - "children": [ - "nested-group-1" - ], - ... // resterende oppsett av komponent -}, -{ - "id": "nested-group-1", - "type": "Group", - "textResourceBindings": { - "title": "Undergruppe" - }, - "dataModelBindings": { - "group": "model.mainGroup.subGroup" - }, - "children": [ - "input-field-1" - ], - ... // resterende oppsett av komponent -}, -{ - "id": "input-field-1", - "type": "Input", - "textResourceBindings": { - "title": "Skriv inn noe her" - }, - "dataModelBindings": { - "group": "model.mainGroup.subGroup.field1" - }, - ... // resterende oppsett av komponent + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "main-group", + "type": "RepeatingGroup", + "textResourceBindings": { + "title": "Hovedgruppe" + }, + "dataModelBindings": { + "group": "model.mainGroup" + }, + "children": [ + "nested-group1" + ] + }, + { + "id": "nested-group1", + "type": "RepeatingGroup", + "textResourceBindings": { + "title": "Undergruppe" + }, + "dataModelBindings": { + "group": "model.mainGroup.subGroup" + }, + "children": [ + "input-field1" + ] + }, + { + "id": "input-field1", + "type": "Input", + "textResourceBindings": { + "title": "Skriv inn noe her" + }, + "dataModelBindings": { + "group": "model.mainGroup.subGroup.field1" + } + } + ] + } } ``` Setter man opp oppsummering på følgende måte: -```json {hl_lines=[6]} +```json {hl_lines=[9]} { - "id": "summary-1", - "type": "Summary", - "componentRef": "main-group", - "pageRef": "FormLayout", - "largeGroup": true, + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "summary1", + "type": "Summary", + "componentRef": "main-group", + "largeGroup": true + } + ] + } } ``` @@ -200,35 +220,39 @@ gruppe-komponenten. Se eksempel under. ```json { - "id": "personalia-group", - "type": "Group", - "textResourceBindings": { - "title": "Personalia" - }, - "children": [ - "summary-1", - "summary-2", - "summary-3" - ] -}, -{ - "id": "summary-1", - "type": "Summary", - "componentRef": "d566c79c-3e3e-445b-be25-a404508f6607", - "pageRef": "personalia" -}, -{ - "id": "summary-2", - "type": "Summary", - "componentRef": "22a60bf0-d5b7-4b45-9ac9-c266b6ad3716", - "pageRef": "personalia" -}, -{ - "id": "summary-3", - "type": "Summary", - "componentRef": "d497737b-67b2-4e03-87a9-43f58579c938", - "pageRef": "personalia" -}, + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "personalia-group", + "type": "Group", + "textResourceBindings": { + "title": "Personalia" + }, + "children": [ + "summary1", + "summary2", + "summary3" + ] + }, + { + "id": "summary1", + "type": "Summary", + "componentRef": "d566c79c-3e3e-445b-be25-a404508f6607" + }, + { + "id": "summary2", + "type": "Summary", + "componentRef": "22a60bf0-d5b7-4b45-9ac9-c266b6ad3716" + }, + { + "id": "summary3", + "type": "Summary", + "componentRef": "d497737b-67b2-4e03-87a9-43f58579c938" + } + ] + } +} ``` ## Eksempel på oppsummeringsside @@ -240,7 +264,7 @@ ved behov. ```json { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", "data": { "layout": [ { @@ -257,28 +281,25 @@ ved behov. "title": "Personalia" }, "children": [ - "summary-1", - "summary-2", - "summary-3" + "summary1", + "summary2", + "summary3" ] }, { "id": "summary1", "type": "Summary", - "componentRef": "d566c79c-3e3e-445b-be25-a404508f6607", - "pageRef": "personalia" + "componentRef": "d566c79c-3e3e-445b-be25-a404508f6607" }, { "id": "summary2", "type": "Summary", - "componentRef": "22a60bf0-d5b7-4b45-9ac9-c266b6ad3716", - "pageRef": "personalia" + "componentRef": "22a60bf0-d5b7-4b45-9ac9-c266b6ad3716" }, { "id": "summary3", "type": "Summary", - "componentRef": "d497737b-67b2-4e03-87a9-43f58579c938", - "pageRef": "personalia" + "componentRef": "d497737b-67b2-4e03-87a9-43f58579c938" }, { "id": "drugs-group", @@ -287,47 +308,41 @@ ved behov. "title": "Rus- og dopingmidler" }, "children": [ - "summary-4", - "summary-5", - "summary-6", - "summary-7" + "summary4", + "summary5", + "summary6", + "summary7" ] }, { "id": "summary4", "type": "Summary", - "componentRef": "064c0033-8996-4825-85fc-2a19fe654400", - "pageRef": "drugs" + "componentRef": "064c0033-8996-4825-85fc-2a19fe654400" }, { "id": "summary5", "type": "Summary", - "componentRef": "7f22e523-3f6d-4371-a5dd-233dc41af824", - "pageRef": "drugs" + "componentRef": "7f22e523-3f6d-4371-a5dd-233dc41af824" }, { "id": "summary6", "type": "Summary", - "componentRef": "18a7c709-ae2f-48b3-b6f6-bd631f5d8d56", - "pageRef": "drugs" + "componentRef": "18a7c709-ae2f-48b3-b6f6-bd631f5d8d56" }, { "id": "summary7", "type": "Summary", - "componentRef": "b7417cf9-f806-4835-a3d1-424c8d094d5f", - "pageRef": "drugs" + "componentRef": "b7417cf9-f806-4835-a3d1-424c8d094d5f" }, { "id": "summary-group1", "type": "Summary", - "componentRef": "arbeidserfaring-group", - "pageRef": "work" + "componentRef": "arbeidserfaring-group" }, { "id": "summary8", "type": "Summary", - "componentRef": "25f720db-5784-4c95-a530-43f0bf523466", - "pageRef": "attachment" + "componentRef": "25f720db-5784-4c95-a530-43f0bf523466" }, { "id": "button1", diff --git a/content/app/development/ux/pdf/_index.en.md b/content/app/development/ux/pdf/_index.en.md index 14fe4989561..b013cd3f32e 100644 --- a/content/app/development/ux/pdf/_index.en.md +++ b/content/app/development/ux/pdf/_index.en.md @@ -79,12 +79,13 @@ Modify the `PdfHandler.cs` file under `App/logic/Print`. Add a list of page names to exclude called `excludeFromPdf` under `pages`: -```json {linenos=false,hl_lines=["3-5"]} +```json {linenos=false,hl_lines=["5"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layoutSettings.schema.v1.json", - "pages": { - "excludeFromPdf": ["page2"] - } + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json", + "pages": { + "order": ["page1", "page2"], + "excludeFromPdf": ["page2"] + } } ``` @@ -111,12 +112,15 @@ public async Task FormatPdf(LayoutSettings layoutSettings, objec Add a list of component IDs to exclude called `excludeFromPdf` under `components`: -```json {linenos=false,hl_lines=["3-5"]} +```json {linenos=false,hl_lines=["7"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layoutSettings.schema.v1.json", - "components": { - "excludeFromPdf": ["image-component-id"] - } + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json", + "pages": { + "order": ["page1"] + }, + "components": { + "excludeFromPdf": ["image-component-id"] + } } ``` @@ -144,12 +148,15 @@ The required format is: `componentId-`. ### 1. Settings.json -```json {linenos=false,hl_lines=["3-5"]} +```json {linenos=false,hl_lines=["7"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layoutSettings.schema.v1.json", - "components": { - "excludeFromPdf": ["ownerId-1"] - } + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json", + "pages": { + "order": ["page1"] + }, + "components": { + "excludeFromPdf": ["ownerId-1"] + } } ``` @@ -181,12 +188,13 @@ This method is only available in version 7.5 and higher. This method lets you fully customize the generated PDF by using a layout file to specify what it should contain. To use this method you need to create a new layout file for the PDF and set `pdfLayoutName` in `Settings.json` to point to that file: -```json {linenos=false,hl_lines=["3-5"]} +```json {linenos=false,hl_lines=["5"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layoutSettings.schema.v1.json", - "pages": { - "pdfLayoutName": "myPdfLayout" - } + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json", + "pages": { + "order": ["page1"], + "pdfLayoutName": "myPdfLayout" + } } ``` @@ -206,25 +214,25 @@ The automatic layout includes a front page with instance information like sender ```json {linenos=false,hl_lines=["5-17"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", - "data": { - "layout": [ - { - "id": "pdf-instance", - "type": "InstanceInformation", - "elements": { - "dateSent": true, - "sender": true, - "receiver": true, - "referenceNumber": true - }, - "pageBreak": { - "breakAfter": "always" - } - } - ... - ] - } + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "pdf-instance", + "type": "InstanceInformation", + "elements": { + "dateSent": true, + "sender": true, + "receiver": true, + "referenceNumber": true + }, + "pageBreak": { + "breakAfter": "always" + } + }, + ... + ] + } } ``` @@ -234,19 +242,25 @@ The automatic layout includes a front page with instance information like sender You can specify that a component should start on a new page or that a page break should occur immediately following a component using the `pageBreak` property. This property can be applied to any component. In the example below it is applied to a header to have a different section start on a new page: -```json {linenos=false,hl_lines=["9-12"]} +```json {linenos=false,hl_lines=["12-15"]} { - "id": "pdf-header", - "type": "Header", - "textResourceBindings": { - "title": "This is a new section" - }, - "dataModelBindings": {}, - "size": "L", - "pageBreak": { - "breakBefore": "always", - "breakAfter": "avoid" - } + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "pdf-header", + "type": "Header", + "textResourceBindings": { + "title": "This is a new section" + }, + "size": "L", + "pageBreak": { + "breakBefore": "always", + "breakAfter": "avoid" + } + } + ] + } } ``` @@ -257,14 +271,22 @@ You can specify that a component should start on a new page or that a page break It is possible to exclude child components from a group by using the `excludedChildren` property on a `Summary` component pointing to a `Group` component. This is done by adding the child component ID to the list of excluded components like in the following example: -```json {linenos=false,hl_lines=["6"]} +```json {linenos=false,hl_lines=["10"]} { - "id": "pdf-group-summary", - "type": "Summary", - "componentRef": "some-group-component", - "pageRef": "Form", - "excludedChildren": ["some-child-component"] -}, + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "pdf-group-summary", + "type": "Summary", + "componentRef": "some-group-component", + "excludedChildren": [ + "some-child-component" + ] + } + ] + } +} ``` {{% /expandlarge %}} diff --git a/content/app/development/ux/pdf/_index.nb.md b/content/app/development/ux/pdf/_index.nb.md index 8ad69775b6e..ae1849c54ce 100644 --- a/content/app/development/ux/pdf/_index.nb.md +++ b/content/app/development/ux/pdf/_index.nb.md @@ -80,12 +80,13 @@ Endre `PdfHandler.cs`-filen under `App/logic/Print`-mappen. Legg til en liste med sidenavn som skal eksluderes på `excludeFromPdf` under `pages`: -```json {linenos=false,hl_lines=["3-5"]} +```json {linenos=false,hl_lines=["5"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layoutSettings.schema.v1.json", - "pages": { - "excludeFromPdf": ["side2"] - } + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json", + "pages": { + "order": ["side1", "side2"], + "excludeFromPdf": ["side2"] + } } ``` @@ -112,12 +113,15 @@ public async Task FormatPdf(LayoutSettings layoutSettings, objec Legg til en liste over komponent-ID-er som skal ekskluderes på `excludeFromPdf` under `components`: -```json {linenos=false,hl_lines=["3-5"]} +```json {linenos=false,hl_lines=["7"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layoutSettings.schema.v1.json", - "components": { - "excludeFromPdf": ["bilde-komponent-id"] - } + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json", + "pages": { + "order": ["side1"] + }, + "components": { + "excludeFromPdf": ["bilde-komponent-id"] + } } ``` @@ -145,12 +149,15 @@ Formatet er: `komponentID-`. ### 1. Settings.json -```json {linenos=false,hl_lines=["3-5"]} +```json {linenos=false,hl_lines=["7"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layoutSettings.schema.v1.json", - "components": { - "excludeFromPdf": ["komponent-i-gruppe-1"] - } + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json", + "pages": { + "order": ["side1"] + }, + "components": { + "excludeFromPdf": ["komponent-i-gruppe-1"] + } } ``` @@ -182,12 +189,13 @@ Denne metoden er kun tilgjengelig i versjon 7.5 og høyere. Denne metoden lar deg spesifisere en helt egendefinert PDF ved å definere en layout-fil som bestemmer hva den skal inneholde. For å ta i bruk denne metoden må du opprette en ny layout-fil for PDF-en og sette `pdfLayoutName` i `Settings.json` til å peke til den filen: -```json {linenos=false,hl_lines=["3-5"]} +```json {linenos=false,hl_lines=["5"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layoutSettings.schema.v1.json", - "pages": { - "pdfLayoutName": "minPdfLayout" - } + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layoutSettings.schema.v1.json", + "pages": { + "order": ["side1"], + "pdfLayoutName": "minPdfLayout" + } } ``` @@ -207,25 +215,25 @@ Den automatiske PDF-layouten inkluder en forside med instans-informasjon som avs ```json {linenos=false,hl_lines=["5-17"]} { - "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", - "data": { - "layout": [ - { - "id": "pdf-instans", - "type": "InstanceInformation", - "elements": { - "dateSent": true, - "sender": true, - "receiver": true, - "referenceNumber": true - }, - "pageBreak": { - "breakAfter": true - } - } - ... - ] - } + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "pdf-instance", + "type": "InstanceInformation", + "elements": { + "dateSent": true, + "sender": true, + "receiver": true, + "referenceNumber": true + }, + "pageBreak": { + "breakAfter": "always" + } + }, + ... + ] + } } ``` @@ -235,19 +243,25 @@ Den automatiske PDF-layouten inkluder en forside med instans-informasjon som avs Du kan spesifisere at en komponent skal starte på en ny side eller at et sideskift skal komme rett etter en komponent ved å bruke `pageBreak`-egenskapen. Denne egenskapen er tilgjengelig på alle komponenter. I eksempelet under brukes det på en overskrift for å sørge for at den starter på en ny side: -```json {linenos=false,hl_lines=["9-12"]} +```json {linenos=false,hl_lines=["12-15"]} { - "id": "pdf-overskrift", - "type": "Header", - "textResourceBindings": { - "title": "Dette er en ny seksjon" - }, - "dataModelBindings": {}, - "size": "L", - "pageBreak": { - "breakBefore": "always", - "breakAfter": "avoid" - } + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "pdf-header", + "type": "Header", + "textResourceBindings": { + "title": "Dette er en ny seksjon" + }, + "size": "L", + "pageBreak": { + "breakBefore": "always", + "breakAfter": "avoid" + } + } + ] + } } ``` @@ -258,14 +272,22 @@ Du kan spesifisere at en komponent skal starte på en ny side eller at et sidesk Det er mulig å ekskludere enkeltkomponenter inne i en gruppe ved å bruke `excludedChildren`-egenskapen på en `Summary`-komponent som refererer til en `Group`-komponent. Dette gjøres ved å legge ID-en til komponenten i listen over ekskluderte komponenter som i eksempelet under: -```json {linenos=false,hl_lines=["6"]} +```json {linenos=false,hl_lines=["10"]} { - "id": "pdf-group-summary", - "type": "Summary", - "componentRef": "en-gruppe-komponent", - "pageRef": "Form", - "excludedChildren": ["en-komponent-i-gruppen"] -}, + "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "pdf-group-summary", + "type": "Summary", + "componentRef": "en-gruppe-komponent", + "excludedChildren": [ + "en-komponent-i-gruppen" + ] + } + ] + } +} ``` {{% /expandlarge %}} diff --git a/content/app/development/ux/styling/_index.en.md b/content/app/development/ux/styling/_index.en.md index ef00ea2ccda..8d31a81fd89 100644 --- a/content/app/development/ux/styling/_index.en.md +++ b/content/app/development/ux/styling/_index.en.md @@ -32,7 +32,7 @@ been set to cover half the screen (some props are removed for readability): ```json { { - "id": "input-felt-1", + "id": "input-felt1", "type": "Input", ... "grid": { @@ -40,7 +40,7 @@ been set to cover half the screen (some props are removed for readability): } }, { - "id": "input-felt-2", + "id": "input-felt2", "type": "Input", ... "grid": { @@ -64,7 +64,7 @@ If you in the example above wanted the components to take up the whole width of ```json { { - "id": "input-felt-1", + "id": "input-felt1", "type": "Input", ... "grid": { @@ -74,7 +74,7 @@ If you in the example above wanted the components to take up the whole width of } }, { - "id": "input-felt-2", + "id": "input-felt2", "type": "Input", ... "grid": { @@ -113,7 +113,7 @@ Here, you will have the opportunity to control the width of both the outer grid ```json { { - "id": "input-felt-1", + "id": "input-felt1", "type": "Input", ... "grid": { @@ -148,7 +148,7 @@ such a layout on the smallest screens, so feel free to use `md`. ```json { { - "id": "input-felt-1", + "id": "input-felt1", "type": "Input", ... "grid": { diff --git a/content/app/development/ux/styling/_index.nb.md b/content/app/development/ux/styling/_index.nb.md index 4226ca7ee54..5a24b6968ed 100644 --- a/content/app/development/ux/styling/_index.nb.md +++ b/content/app/development/ux/styling/_index.nb.md @@ -30,7 +30,7 @@ For å sidestille komponenter horisontalt må man gjøre noen små endringer i f ```json { { - "id": "input-felt-1", + "id": "input-felt1", "type": "Input", ... "grid": { @@ -38,7 +38,7 @@ For å sidestille komponenter horisontalt må man gjøre noen små endringer i f } }, { - "id": "input-felt-2", + "id": "input-felt2", "type": "Input", ... "grid": { @@ -62,7 +62,7 @@ Om man i eksempelet over hadde ønsket at komponentene skulle ta hele bredden fr ```json { { - "id": "input-felt-1", + "id": "input-felt1", "type": "Input", ... "grid": { @@ -72,7 +72,7 @@ Om man i eksempelet over hadde ønsket at komponentene skulle ta hele bredden fr } }, { - "id": "input-felt-2", + "id": "input-felt2", "type": "Input", ... "grid": { @@ -111,7 +111,7 @@ Her vil det da være mulig å styre bredden til både ytterste grid og den inner ```json { { - "id": "input-felt-1", + "id": "input-felt1", "type": "Input", ... "grid": { @@ -145,7 +145,7 @@ et slikt layout på de minste skjermene, så bruk gjerne `md` ```json { { - "id": "input-felt-1", + "id": "input-felt1", "type": "Input", ... "grid": { diff --git a/content/app/guides/design/prototype/FigmaTeaser3.gif b/content/app/guides/design/prototype/FigmaTeaser3.gif deleted file mode 100644 index a41d815a017..00000000000 Binary files a/content/app/guides/design/prototype/FigmaTeaser3.gif and /dev/null differ diff --git a/content/app/guides/design/prototype/_index.en.md b/content/app/guides/design/prototype/_index.en.md index a6e1adcdb36..5370c862e45 100644 --- a/content/app/guides/design/prototype/_index.en.md +++ b/content/app/guides/design/prototype/_index.en.md @@ -4,7 +4,7 @@ description: By using the Figma Community file Altinn Studio Komponenter you can weight: 3 --- -![Prototyping in Figma](FigmaTeaser3.gif "Prototyping in Figma") +![Prototyping in Figma](figmaPrototype.gif "Prototyping in Figma") The Altinn Studio Komponenter is a collection of examples and components that you can use to create a prototype of your app within Figma. diff --git a/content/app/guides/design/prototype/_index.nb.md b/content/app/guides/design/prototype/_index.nb.md index b57c1dc60e0..b373405db2a 100644 --- a/content/app/guides/design/prototype/_index.nb.md +++ b/content/app/guides/design/prototype/_index.nb.md @@ -4,8 +4,8 @@ description: Ved hjelp av Altinns Prototype-kit kan du lage en klikkbar prototyp weight: 3 --- -![Prototyping in Figma](FigmaTeaser3.gif "Prototyping in Figma") -![Alt text](content/app/guides/design/prototype/figmaPrototype.gif "Title") +![Prototyping in Figma](figmaPrototype.gif "Prototyping in Figma") + Altinn Prototype-kit er en samling av sidemaler og komponenter du kan bruke til å lage en prototype i Figma av Altinn-skjemaet ditt. diff --git a/content/community/changelog/app-frontend/stricter-schema/_index.en.md b/content/community/changelog/app-frontend/stricter-schema/_index.en.md index 68657113e32..85a045397c0 100644 --- a/content/community/changelog/app-frontend/stricter-schema/_index.en.md +++ b/content/community/changelog/app-frontend/stricter-schema/_index.en.md @@ -59,8 +59,7 @@ The **dataModelBindings** may however be safely omitted entirely if the componen ## A component warns about an unsupported property in textResourceBindings The **textResourceBindings** property now only supports a certain set of properties, and text resource bindings that are not implemented/handles anywhere in the app frontend will cause a validation error. The supported properties for -each component type should now be listed in suggestions by Visual Studio Code. A common issue is setting the **title** -property on an **AddressComponent**. The Address component does not currently support any text resource bindings. +each component type should now be listed in suggestions by Visual Studio Code. ## A component warns about dataModelBindings Binding a component to the data model only makes sense for form components that can store data. The entire property diff --git a/content/community/changelog/app-frontend/stricter-schema/_index.nb.md b/content/community/changelog/app-frontend/stricter-schema/_index.nb.md index 98f092e1165..3db6cafb8f8 100644 --- a/content/community/changelog/app-frontend/stricter-schema/_index.nb.md +++ b/content/community/changelog/app-frontend/stricter-schema/_index.nb.md @@ -59,8 +59,7 @@ repeterende gruppe. ## En komponent advarer om en ikke-støttet egenskap i textResourceBindings **textResourceBindings**-egenskapen støtter nå bare et visst sett med egenskaper, og tekstressursbindinger som ikke er implementert/håndteres noe sted i appens frontend vil føre til en valideringsfeil. De støttede egenskapene for hver -komponenttype bør nå være oppført i forslagene fra Visual Studio Code. Et vanlig problem er å sette **title**-egenskapen -på en **AddressComponent**. Adressekomponenten støtter for øyeblikket ikke noen tekstressursbindinger. +komponenttype bør nå være oppført i forslagene fra Visual Studio Code. ## En komponent advarer om dataModelBindings Å binde en komponent til datamodellen gir bare mening for skjemakomponenter som kan lagre data. Hele egenskapen kan diff --git a/content/community/changelog/app-frontend/v4/_index.en.md b/content/community/changelog/app-frontend/v4/_index.en.md index d9bf091527e..97881cce33b 100644 --- a/content/community/changelog/app-frontend/v4/_index.en.md +++ b/content/community/changelog/app-frontend/v4/_index.en.md @@ -353,7 +353,7 @@ Example of old to new config: "group": "Questions" }, "children": [ - "my-likert-id", + "my-likert-id" ], "edit": { "mode": "likert", @@ -451,7 +451,7 @@ The old configuration for triggering validation on page change was the following ```json {linenos=false,hl_lines=[5]} { - "id": "nav-buttons-1", + "id": "nav-buttons1", "type": "NavigationButtons", "textResourceBindings": {...}, "triggers": ["validatePage"] @@ -464,7 +464,7 @@ To achieve the same result in v4, you instead use the new `validateOnNext` prope ```json {linenos=false,hl_lines=[5,6,7,8]} { - "id": "nav-buttons-1", + "id": "nav-buttons1", "type": "NavigationButtons", "textResourceBindings": {...}, "validateOnNext": {