diff --git a/content/app/app-dev-course/modul2/_index.en.md b/content/app/app-dev-course/modul2/_index.en.md
index 92fa6b92df5..56211128ca0 100644
--- a/content/app/app-dev-course/modul2/_index.en.md
+++ b/content/app/app-dev-course/modul2/_index.en.md
@@ -243,8 +243,8 @@ The service should run on your local computer with local test and you should be
### Solution
If you did not manage to complete all the steps, we have an [example solution](https://altinn.studio/repos/ttd/tilflytter-sogndal-lf/src/branch/bolk/2) that you can use as inspiration.
-
+
-
+
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/content/app/app-dev-course/modul2/_index.nb.md b/content/app/app-dev-course/modul2/_index.nb.md
index 3a007d5defd..3a321c80747 100644
--- a/content/app/app-dev-course/modul2/_index.nb.md
+++ b/content/app/app-dev-course/modul2/_index.nb.md
@@ -9,7 +9,7 @@ weight: 20
I denne modulen skal du videreutvikle applikasjonen du laget i [modul 1](../modul1) med blant annet en ny side, dynamisk skjuling av sider, sporvalg og forhåndsutfylling.
-Deler av modul 2 kan gjøres i Altinn Studio Designer, men noe må utføres med [lokal utvikling](/nb/app/getting-started/local-dev).
+Deler av modul 2 kan gjøres i [Altinn Studio Designer](/nb/app/getting-started/ui-editor/) (Designer), men noe må utføres med [lokal utvikling](/nb/app/getting-started/local-dev).
**Temaer som dekkes i denne modulen:**
@@ -55,7 +55,6 @@ Bilde av Sogndals kommunevåpen som kan benyttes i applikasjonen:
1. Legg til en ny side. Gi den et passende navn og sørg for at den vises før skjemasiden du opprettet i modul 1.
2. [Legg til bilde](/nb/app/development/ux/components/images/#legge-til-bilder-i-applikasjonen) av Sogndals kommunevåpen.
3. Legg til tekst i henhold til [skisse](/app/app-dev-course/modul2/infoside_tilflyttere.pdf).
-
### Nyttig dokumentasjon
- [Formatering av tekst i en applikasjon](/nb/app/development/ux/texts/#formatering-av-tekster)
@@ -65,9 +64,10 @@ Bilde av Sogndals kommunevåpen som kan benyttes i applikasjonen:
- [Administrere rekkefølge på flere sider](/nb/app/development/ux/pages/navigation/#rekkefølge)
### Forståelsessjekk
-(Klikk på spørsmålet for å se løsningen.)
{{% expandbold "Hvilken fil i applikasjonsrepoet må redigeres dersom du manuelt ønsker å endre siderekkefølgen på eksisterende sider?" %}}
+
+
I `App/ui/Settings.json` ligger siderekkefølgen beskrevet.
For å justere på siderekkefølgen, må listen beskrevet under `pages.order` endres til å representere ønsket siderekkefølge.
Se [Administrere rekkefølge på flere sider](/nb/app/development/ux/pages/navigation/#rekkefølge).
@@ -76,6 +76,8 @@ Se [Administrere rekkefølge på flere sider](/nb/app/development/ux/pages/navig
{{% expandbold "Hvis du ønsker å gi en side et annet navn, men ikke har Altinn Studio tilgjengelig, hvilke filer må oppdateres med det nye filnavnet?" %}}
+
+
- `App/ui/layouts/.json`: endre filnavnet (``) på siden som skal bytte navn.
- `App/ui/Settings.json`: endre navnet på siden under `pages.order`.
{{% /expandbold %}}
@@ -83,12 +85,14 @@ Se [Administrere rekkefølge på flere sider](/nb/app/development/ux/pages/navig
{{% expandbold "Hvordan oppnår du at teksten bryter dersom tekststrengen ikke er lang nok til å naturlig brytes?" %}}
+
+
Alle tekstressurser støtter markdown og dermed html-notasjon, så ved å benytte `
` vil man kunne tvinge tekstbrytning.
{{% /expandbold %}}
{{% /expandlarge %}}
-{{% expandlarge id="innfore-sporvalg" header="Alternativ arbeidsflyt" %}}
+{{% expandlarge id="sporvalg" header="Alternativ arbeidsflyt" %}}
I mange tilfeller er det ikke aktuelt å svare på alle spørsmål i et skjema, kanskje fordi svaret sier seg selv, eller fordi det ikke er relevant basert på noe man har svart tidligere i skjemaet. Da kan sporvalg være en god løsning.
Ved hjelp av sporvalg kan man styre hvilke sider i en applikasjon som er synlige for brukeren.
@@ -99,7 +103,9 @@ I denne oppgaven skal du sette opp sporvalg i applikasjonen basert på kravene f
En bruker som ikke oppfyller kravene for skjemaet skal stoppes så tidlig som mulig i arbeidsflyten.
På infosiden er det ønskelig at brukeren skal oppgi om skjemaet gjelder dem eller ikke.
- Hvordan dette gjøres er fritt fram. Feltet `Innflytter.KanBrukeSkjema` i datamodellen er mulig å benytte til dette formålet.
+
+Hvordan svaret innhentes er valgfritt. Merk at en komponent må knyttes til et felt i datamodellen for å kunne lagre verdier.
+ Feltet `Innflytter.KanBrukeSkjema` i datamodellen kan benyttes til dette formålet.
Basert på svaret skal brukeren sendes videre til ett av følgende spor:
@@ -133,16 +139,17 @@ https://www.sogndal.kommune.no/
- [Formatering av tekst](/nb/app/development/ux/texts/#formatering-av-tekster)
### Forståelsessjekk
-(Klikk på spørsmålet for å se løsning.)
{{% expandbold "Dersom man har sporvalg på et senere tidspunkt i en arbeidsflyt og en sluttbruker endrer et valg, hva skjer med skjemadataen man tidligere har fylt ut, dersom siden skjules for sluttbrukeren?" %}}
+
+
Dersom du har denne typen logikk i en applikasjon der man kan fortsette til innsending for flere spor, bør dataen på siden(e) som nå blir skjult for bruker nullstilles.
{{% /expandbold %}}
{{% /expandlarge %}}
-{{% expandlarge id="prefill-expandable" header="Forhåndsutfylling av personopplysninger" %}}
+{{% expandlarge id="prefill" header="Forhåndsutfylling av personopplysninger" %}}
En av fordelene til Altinn er at man allerede har metadata om både personer og virksomheter tilgjengelig. Ved hjelp av forhåndsutfylling kan man hente ned data om brukerne og presentere den i utfylte felter, slik at de slipper å fylle dem ut selv. Typiske forhåndsutfyllingsverdier vil være navn, adresse, e-post osv.
@@ -169,70 +176,80 @@ I denne oppgaven flyttes fokus tilbake til den første datainnsamlingssiden, og
3. Opprett [egendefinert forhåndsutfylling](/nb/app/development/data/prefill/custom) for alder basert på personnummer. Husk at alder ikke skal kunne endres av bruker.
{{% expandbold "Kodehjelp: Beregning av alder fra personnummer" %}}
+
Denne funksjonen kan brukes til å beregne alder fra personnummeret.
+
```cs
private static int CalculateAge(string sosialSecNumber)
-{
- int MAX_D_NUMBER = 71;
- int MIN_D_NUMBER = 41;
- int MAX_TEST_NUMBER = 92;
- int MIN_TEST_NUMBER = 81;
- int START_D_NUMBER = 40;
- int START_TEST_NUMBER = 80;
- string stringDay = sosialSecNumber.Substring(0, 2);
- string stringMonth = sosialSecNumber.Substring(2, 2);
- string stringYear = sosialSecNumber.Substring(4, 2);
- string stringIndivid = sosialSecNumber.Substring(6, 3);
- int day = int.Parse(stringDay);
- int month = int.Parse(stringMonth);
- int year = int.Parse(stringYear);
- int individ = int.Parse(stringIndivid);
- // Get day if D-number
- if (MAX_D_NUMBER >= day && MIN_D_NUMBER <= day)
- {
- day -= START_D_NUMBER;
- }
- // Get month if TestUser-number
- if (MAX_TEST_NUMBER >= month && MIN_TEST_NUMBER <= month)
- {
- month -= START_TEST_NUMBER;
- }
- // find century
- if (year > 54 && (individ >= 500 && individ < 750))
- {
- // 1855-1899
- year += 1800;
- }
- else if (year > 39 && (individ >= 900 && individ < 1000))
{
- // 1940-1999
- year += 1900;
- }
- else if (year < 40 && (individ >= 500 && individ < 1000))
- {
- // 2000-2039
- year += 2000;
- }
- else
- {
- year += 1900;
- }
- // calculate age
- int age = DateTime.Now.Year - year;
- if (DateTime.Now.Month < month)
- {
- age -= 1;
- }
- else if (DateTime.Now.Month == month)
- {
- if (DateTime.Now.Day < day)
+ int MAX_D_NUMBER = 71;
+ int MIN_D_NUMBER = 41;
+ int MAX_TEST_NUMBER = 92;
+ int MIN_TEST_NUMBER = 81;
+ int START_D_NUMBER = 40;
+ int START_TEST_NUMBER = 80;
+
+ string stringDay = sosialSecNumber.Substring(0, 2);
+ string stringMonth = sosialSecNumber.Substring(2, 2);
+ string stringYear = sosialSecNumber.Substring(4, 2);
+ string stringIndivid = sosialSecNumber.Substring(6, 3);
+
+ int day = int.Parse(stringDay);
+ int month = int.Parse(stringMonth);
+ int year = int.Parse(stringYear);
+ int individ = int.Parse(stringIndivid);
+
+ // Get day if D-number
+ if (MAX_D_NUMBER >= day && MIN_D_NUMBER <= day)
+ {
+ day -= START_D_NUMBER;
+ }
+
+ // Get month if TestUser-number
+ if (MAX_TEST_NUMBER >= month && MIN_TEST_NUMBER <= month)
+ {
+ month -= START_TEST_NUMBER;
+ }
+
+ // find century
+ if (year > 54 && (individ >= 500 && individ < 750))
+ {
+ // 1855-1899
+ year += 1800;
+ }
+ else if (year > 39 && (individ >= 900 && individ < 1000))
+ {
+ // 1940-1999
+ year += 1900;
+ }
+ else if (year < 40 && (individ >= 500 && individ < 1000))
+ {
+ // 2000-2039
+ year += 2000;
+ }
+ else
+ {
+ year += 1900;
+ }
+
+ // calculate age
+ int age = DateTime.Now.Year - year;
+
+ if (DateTime.Now.Month < month)
{
age -= 1;
}
+ else if (DateTime.Now.Month == month)
+ {
+ if (DateTime.Now.Day < day)
+ {
+ age -= 1;
+ }
+ }
+
+ return age;
}
- return age;
-}
```
{{% /expandbold %}}
@@ -248,19 +265,22 @@ private static int CalculateAge(string sosialSecNumber)
### Forståelsessjekk
-(Klikk på spørsmålet for å se løsningen.)
{{% expandbold "Er det mulig å endre en forhåndsutfylt verdi når den først er satt?" %}}
+
+
Ja. Dersom man ikke gjør noen endringer vil en standardkomponent med forhåndsutfylt data være redigerbar.
{{% /expandbold %}}
{{% expandbold "Hvordan kan man hindre at en forhåndsutfylt verdi endres av sluttbrukeren?" %}}
+
+
Komponenten kan settes til `readOnly` på én av to måter:
1\. I Altinn Studio Designer ved å huke av ved "Det skal ikke være mulig å svare (read only)" for den aktuelle komponenten:
-![Altinn Studio innstilling for 'read only'. Bilde]()
+![Altinn Studio innstilling for 'read only'. Bilde]()
2\. Sette egenskapen `readOnly` til `true` for komponenten i json-filen til siden:
```json{linenos=false,hl_lines=["13"]}
@@ -292,6 +312,7 @@ Alternativt kan man kjøre valideringer av dataen på serversiden for å verifis
{{% expandbold "Ikke alle norske innbyggere har et fødselsnummer, noen får tildelt et D-nummer. Hvordan må koden din justeres for å ta hensyn til dette dersom alder skal baseres på et fødselsnummer eller D-nummer som sluttbruker selv taster inn?" %}}
+
{{% notice info %}}
Et [D-nummer](https://jusleksikon.no/wiki/F%C3%B8dselsnummer#D-nummer) er ellevesifret, som ordinære fødselsnummer, og består av en modifisert sekssifret fødselsdato og et femsifret personnummer. Fødselsdatoen modifiseres ved at _det legges til 4 på det første sifferet_: En person født 1. januar 1980 får dermed fødselsdato 410180, mens en som er født 31. januar 1980 får 710180.
@@ -328,7 +349,6 @@ public static string GetDOB(string fOrDNumber){
{{% /expandlarge %}}
## Oppsummering
-
I denne modulen har du utvidet applikasjonen din med mer funksjonalitet i form av å
legge til flere sider, sette opp sporvalg for å styre brukerflyten og sette opp forhåndsutfylling av skjemafelter
både med tilgjengelige datakilder i Altinn og egendefinert kode.
@@ -338,26 +358,556 @@ bekrefte at riktige felter blir forhåndsutfylt.
-{{% expandlarge id="solution" header="Løsningsforslag" %}}
+{{}}
-Kildekode: [modul 2](https://altinn.studio/repos/testdep/flyttemelding-sogndal/src/branch/modul2)
-(Kildekode [tidligere versjon modul 2](https://altinn.studio/repos/ttd/tilflytter-sogndal-lf/src/branch/bolk/2))
+{{% markdown %}}
+[Kildekode modul 2](https://altinn.studio/repos/testdep/flyttemelding-sogndal/src/branch/modul2)
+[(Kildekode tidligere versjon modul 2)](https://altinn.studio/repos/ttd/tilflytter-sogndal-lf/src/branch/bolk/2)
-{{% expandbold "Legge til infoside" %}}
+### Legge til infoside
-
-{{% /expandbold %}}
+I dette steget er det lagt til en enkel infoside med bilde og tekst.
-{{% expandbold "Alternativ arbeidsflyt" %}}
-
-{{% /expandbold %}}
+
+
+{{% /markdown %}}
+
+{{}}
+
+{{}}
+
+
+
+#### Komponenter
+
+{{% notice info %}}
+Se *Kode* for sidestilling av komponenter.
+{{% /notice %}}
+
+
+
+#### Bilde
+
+I denne løsningen er bildet lastet ned og lagret i mappen`/App/wwwroot` (mappen `wwwroot` ble også opprettet).
+ Et alternativ er å bruke en ekstern URL for bildet som kilde.
+
+{{% expandbold "Legg til mappe wwwroot og last opp bilde i Designer" %}}
+
+
+Naviger til repository (klikk logo øverst i høyre hjørne eller tre prikker til høyre på menylinjen) og velg "Last opp fil" fra menyen "Add file".
+
+
+
+I feltet "Legg til mappe" fyller du inn `/App/wwwroot`.
+ Last opp bildet og legg til en beskrivende commit-melding.
+ Klikk "Commit endringer" for å lagre.
+
+
+
+
+
-{{% expandbold "Forhåndsutfylling" %}}
-
{{% /expandbold %}}
-{{% /expandlarge %}}
+
+
+
+#### Tekst
+
+Både overskrift og beskrivelse er lagt til som "Paragraf" (underkategori av "Tekst") og formatert med markdown.
+
+
+
+
+
+{{}}
+{{}}
+
+
+
+#### Infoside - komponenter og innstillinger
+
+Sidestilling av bilde og overskrift er gjort ved hjelp av `grid` (markert).
+
+```json{linenos=false,hl_lines=["17-19", "30-32"]}
+// Fil: /App/ui/layouts/info.json
+
+{
+ "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json",
+ "data": {
+ "layout": [
+ {
+ "id": "kommune-logo",
+ "type": "Image",
+ "image": {
+ "src": {
+ "nb": "wwwroot/kommune-logo.png"
+ },
+ "width": "100%",
+ "align": "center"
+ },
+ "grid": {
+ "xs": 2
+ },
+ "textResourceBindings": {
+ "altTextImg": "kommune-logo.altTextImg"
+ }
+ },
+ {
+ "id": "overskrift",
+ "type": "Paragraph",
+ "textResourceBindings": {
+ "title": "info.overskrift.title"
+ },
+ "grid": {
+ "xs": 7
+ }
+ },
+ {
+ "id": "beskrivelse",
+ "type": "Paragraph",
+ "textResourceBindings": {
+ "title": "info.beskrivelse.title"
+ }
+ },
+ {
+ "id": "NavigationButtons-hateTR",
+ "type": "NavigationButtons",
+ "componentType": "NavigationButtons",
+ "dataModelBindings": {},
+ "showBackButton": true,
+ "textResourceBindings": {
+ "next": "navigation.next",
+ "back": "navigation.back"
+ }
+ }
+ ]
+ }
+}
+```
+
+#### Tekstressurser (nb)
+```json
+// Fil: /App/config/texts/resource.nb.json
+
+{
+ "language": "nb",
+ "resources": [
+ ...
+ {
+ "id": "info.overskrift.title",
+ "value": "# Skjema for informasjonsinnsamling for fremtidige tilflyttere"
+ },
+ {
+ "id": "info.beskrivelse.title",
+ "value": "
Opplysningene du oppgir i dette skjemaet vil benyttes til å skreddersy en pakke med kommunale tilbud til deg og de du eventuelt flytter til kommunen sammen med.\n
\nDu skal ikke bruke dette skjemaet hvis:\n* Du er allerede bosatt i Sogndal kommune\n* Du bor i en annen kommune og har ingen planer om å flytte\n* Du skal flytte til Sogndal, men **ikke** i løpet av de neste 12 månedene."
+ },
+ {
+ "id": "kommune-logo.altTextImg",
+ "value": "Sogndal kommunevåpen. Bilde"
+ }
+ ]
+}
+```
+{{}}
+{{}}
+
+{{% gray-divider-line %}}
+
+{{% markdown %}}
+
+### Alternativ arbeidsflyt
+
+I denne løsningen er det valgt å legge til en komponent for radioknapper på info-siden hvor brukeren skal angi om de oppfyller kravene for å bruke skjemaet.
+ Det er valgt å forhåndsmarkere alternativet 'Nei' så brukeren må gjøre et aktivt valg for å bruke skjemaet.
+
+ Som alternativ til radioknapper kan man bruke avkrysningsboks eller nedrekksfelt.
+
+
+
+Det er lagt til en ny side som brukere sendes til dersom de ikke bekrefter at de oppfyller kravene (spor 1).
+
+
+
+{{% /markdown %}}
+
+{{}}
+{{}}
+
+{{% notice info %}}
+Se *Kode* for logikk ved veivalg.
+{{% /notice %}}
+
+#### Radioknapper info-side
+
+
+
+
+
+![]()
+
+#### Ny side
+
+Ny side for *Spor 1*.
+
+
+
+
+
+{{}}
+
+{{}}
+
+
+
+#### Radioknapper
+
+```json{linenos=false,hl_lines=["8-29"]}
+// Fil: /App/ui/layouts/info.json
+
+{
+ "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json",
+ "data": {
+ "layout": [
+ ...
+ {
+ "id": "bekreftelse",
+ "type": "RadioButtons",
+ "required": true,
+ "textResourceBindings": {
+ "title": "info.bekreft"
+ },
+ "dataModelBindings": {
+ "simpleBinding": "Innflytter.KanBrukeSkjema"
+ },
+ "options": [
+ {
+ "label": "info.ja",
+ "value": "true"
+ },
+ {
+ "label": "info.nei",
+ "value": "false"
+ }
+ ],
+ "preselectedOptionIndex": 1
+ },
+ ...
+ ]
+ }
+}
+```
+
+#### Ny side 'Ikke for deg' og logikk ved veivalg
+
+Det er lagt til en ny side som skal vises dersom brukeren ikke oppfyller kravene for å bruke tjenesten.
+Logikk for å skjule siden er lagt til ved hjelp av egenskapen `hidden` (se markering i koden).
+ Når det krysses av for at man oppfyller kravene for å bruke tjenesten.Siden blir skjult når verdien til komponenten med id `bekreftelse` (som er radioknapper) er lik `true`, altså
+
+```json{linenos=false,hl_lines="6-13"}
+// Fil: /App/ui/layouts/ikke-for-deg.json
+
+{
+ "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json",
+ "data": {
+ "hidden": [
+ "equals",
+ [
+ "component",
+ "bekreftelse"
+ ],
+ true
+ ],
+ "layout": [
+ {
+ "id": "ikke-for-deg",
+ "type": "Paragraph",
+ "textResourceBindings": {
+ "title": "ikke-for-deg.info"
+ }
+ },
+ {
+ "id": "NavigationButtons-azt7sj",
+ "type": "NavigationButtons",
+ "componentType": "NavigationButtons",
+ "dataModelBindings": {},
+ "showBackButton": true,
+ "textResourceBindings": {
+ "back": "navigation.back"
+ }
+ }
+ ]
+ }
+}
+```
+
+Tilsvarende logikk er lagt til for skjemasiden.
+ Denne siden vil skjules dersom verdien til `bekreftelse`-komponenten er satt til `false`, altså når det krysses av for at man *ikke* oppfyller kravene for tjenesten.
+
+```json{linenos=false,hl_lines=["6-13"]}
+// Fil: /App/ui/layouts/innflytterPersonalia.json
+
+{
+ "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json",
+ "data": {
+ "hidden": [
+ "equals",
+ [
+ "component",
+ "bekreftelse"
+ ],
+ false
+ ],
+ "layout": [
+ ...
+```
+
+#### Ekskludere side fra pdf
+
+Siden 'Ikke for deg' ønsker vi ikke å inkludere dersom det skal genereres en pdf-fil.
+ Dette kan stilles inn med egenskapen `excludeFromPdf` i `Settings.json`.
+
+```json{linenos=false,hl_lines="10"}
+// Fil: /App/Settings.json
+
+{
+ "$schema": "https://altinncdn.no/schemas/json/layout/layoutSettings.schema.v1.json",
+ "pages": {
+ "order": [
+ "info",
+ "innflytterPersonalia",
+ "ikke-for-deg"
+ ],
+ "excludeFromPdf": ["ikke-for-deg"]
+ }
+}
+```
+
+#### Tekstressurser (nb)
+
+Nye tekstressurser som er lagt til.
+
+```json{linenos=false,hl_lines=["7-22"]}
+// Fil: /App/config/texts/resource.nb.json
+
+{
+ "language": "nb",
+ "resources": [
+ ...
+ {
+ "id": "info.bekreft",
+ "value": "**Jeg møter kriteriene for å bruke appen.**"
+ },
+ {
+ "id": "info.ja",
+ "value": "Ja"
+ },
+ {
+ "id": "info.nei",
+ "value": "Nei"
+ },
+ {
+ "id": "ikke-for-deg.info",
+ "value": "### Dette skjemaet er ikke for deg.
\n[Se en oversikt over tilbud i kommunen her](https://www.sogndal.kommune.no)."
+ }
+ ]
+}
+```
+
+{{}}
+{{}}
+
+{{% gray-divider-line %}}
+
+Forhåndsutfylling
+
+{{% markdown %}}
+
+Under er et eksempel på hvordan datasiden kan se ut med forhåndsutfylt informasjon.
+ I tillegg til forhåndsutfylling er flere av komponentene sidestilt og det er lagt til en 'Send inn'-knapp.
+
+
+
+![]()
+
+{{% /markdown %}}
+
+{{}}
+{{}}
+
+{{% notice info %}}
+Se *Kode* for forhåndsutfylling og sidestilling av komponenter.
+{{% /notice %}}
+
+
+
+For felt som det ikke skal være mulig å endre (navn og alder) må det hukes av for dette:
+
+
+
+Det er lagt til en 'Send inn'-knapp for skjemaet:
+
+
+
+{{}}
+{{}}
+
+#### Oppdatert dataside
+
+Komponentene for navn og alder er satt til `readOnly`, noen av komponentene er sidestilt og det er lagt til en ny knapp.
+ Koden under viser et eksempel med noen av komponentene der endringer er markert.
+ For en fullstendig løsning, se [kildekode for modul 2](https://altinn.studio/repos/testdep/flyttemelding-sogndal/src/branch/modul2).
+
+```json{linenos=false,hl_lines=["22", "26-28", "37", "41-43", "47-54"]}
+// Fil: /App/ui/layouts/innflytterPersonalia.json
+
+{
+ "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json",
+ "data": {
+ "hidden": [
+ "equals",
+ [
+ "component",
+ "bekreftelse"
+ ],
+ false
+ ],
+ "layout": [
+ {
+ "id": "firstName",
+ "type": "Input",
+ "dataModelBindings": {
+ "simpleBinding": "Innflytter.Fornavn"
+ },
+ "required": false,
+ "readOnly": true,
+ "textResourceBindings": {
+ "title": "firstName"
+ },
+ "grid": {
+ "xs": 6
+ }
+ },
+ {
+ "id": "middleName",
+ "type": "Input",
+ "dataModelBindings": {
+ "simpleBinding": "Innflytter.Mellomnavn"
+ },
+ "required": false,
+ "readOnly": true,
+ "textResourceBindings": {
+ "title": "middleName"
+ },
+ "grid": {
+ "xs": 6
+ }
+ },
+
+ ...
+
+ {
+ "id": "send-inn",
+ "type": "Button",
+ "textResourceBindings": {
+ "title": "button.send-inn"
+ }
+ },
+ ...
+ ]
+ }
+}
+```
+
+#### Forhåndsutfylling
+
+Forhåndsutfylling av personalia (unntatt alder) er konfigurert i den nyopprettet filen `datamodel.prefill.json`:
+
+```json{linenos=false,hl_lines=[""]}
+// Fil: /App/models/datamodel.prefill.json
+
+{
+ "$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"
+ }
+}
+```
+
+#### Beregning og forhåndsutfylling av alder
+
+For egendefinert forhåndsutfylling av alder er det opprettet en fil `InstantiationProcessor.cs` i mappen `logic/Instantiation` (mappen `Instantiation` er også opprettet).
+ Metoden `DataCreation` henter personnummer fra instansen og bruker det til å beregne alder ved hjelp av metoden `CalculateAge` (utelatt, se kodehjelp under [Forhåndsutfylling](#prefill) i oppgaveteksten).
+ Alderen blir så tilordnet datafeltet `skjema.Innflytter.Alder`.
+
+```csharp{linenos=false,hl_lines=[""]}
+// Fil: App/logic/Instantiation/InstantiationProcessor.cs
+
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using Altinn.App.Core.Features;
+using Altinn.App.Models;
+using Altinn.Platform.Storage.Interface.Models;
+
+namespace Altinn.App.AppLogic.Instantiation;
+
+public class InstantiationProcessor : IInstantiationProcessor
+{
+ public async Task DataCreation(Instance instance, object data, Dictionary prefill)
+ {
+ Skjema skjema = (Skjema)data;
+ string personNumber = instance.InstanceOwner.PersonNumber;
+ skjema.Innflytter.Alder = CalculateAge(personNumber);
+ await Task.CompletedTask;
+ }
+
+ // Kode for hjelpemetoden CalculateAge()
+}
+```
+
+Datatypen for `skjema` er gitt av datamodellen `datamodel.xsd`:
+
+```xml{linenos=false,hl_lines="4"}
+
+
+
+
+
+
+ ...
+```
+
+Til slutt må implementeringen registreres i `Program.cs` for at koden skal kjøre:
+
+```csharp{linenos=false,hl_lines="7"}
+// Fil: /App/Program.cs
+...
+
+void RegisterCustomAppServices(IServiceCollection services, IConfiguration config, IWebHostEnvironment env)
+{
+ // Register your apps custom service implementations here.
+ services.AddTransient();
+}
+
+...
+```
+
+{{}}
+{{}}
+{{}}
-[<< Forrige modul](../modul1/) | [Neste modul >>](../modul3/)
+{{% center %}}
+[<< Forrige modul](../modul1/) [Neste modul >>](../modul3/)
+{{% /center %}}
\ No newline at end of file
diff --git a/content/app/app-dev-course/modul2/data-screenshot.png b/content/app/app-dev-course/modul2/data-screenshot_OLD.png
similarity index 100%
rename from content/app/app-dev-course/modul2/data-screenshot.png
rename to content/app/app-dev-course/modul2/data-screenshot_OLD.png
diff --git a/content/app/app-dev-course/modul2/ikke-for-deg-screenshot.png b/content/app/app-dev-course/modul2/ikke-for-deg-screenshot_OLD.png
similarity index 100%
rename from content/app/app-dev-course/modul2/ikke-for-deg-screenshot.png
rename to content/app/app-dev-course/modul2/ikke-for-deg-screenshot_OLD.png
diff --git a/content/app/app-dev-course/modul2/images-settings-example.png b/content/app/app-dev-course/modul2/images-settings-example.png
deleted file mode 100644
index 9be99f689f2..00000000000
Binary files a/content/app/app-dev-course/modul2/images-settings-example.png and /dev/null differ
diff --git a/content/app/app-dev-course/modul2/infopage-screenshot.png b/content/app/app-dev-course/modul2/infopage-screenshot_OLD.png
similarity index 100%
rename from content/app/app-dev-course/modul2/infopage-screenshot.png
rename to content/app/app-dev-course/modul2/infopage-screenshot_OLD.png
diff --git a/content/app/app-dev-course/modul2/screenshot-add-file-filled.png b/content/app/app-dev-course/modul2/screenshot-add-file-filled.png
new file mode 100644
index 00000000000..2b9726e3dba
Binary files /dev/null and b/content/app/app-dev-course/modul2/screenshot-add-file-filled.png differ
diff --git a/content/app/app-dev-course/modul2/screenshot-add-file.png b/content/app/app-dev-course/modul2/screenshot-add-file.png
new file mode 100644
index 00000000000..0a457a055b1
Binary files /dev/null and b/content/app/app-dev-course/modul2/screenshot-add-file.png differ
diff --git a/content/app/app-dev-course/modul2/screenshot-data-page-components.png b/content/app/app-dev-course/modul2/screenshot-data-page-components.png
new file mode 100644
index 00000000000..466e2ef9f60
Binary files /dev/null and b/content/app/app-dev-course/modul2/screenshot-data-page-components.png differ
diff --git a/content/app/app-dev-course/modul2/screenshot-description-settings.png b/content/app/app-dev-course/modul2/screenshot-description-settings.png
new file mode 100644
index 00000000000..639c5afcbd3
Binary files /dev/null and b/content/app/app-dev-course/modul2/screenshot-description-settings.png differ
diff --git a/content/app/app-dev-course/modul2/screenshot-heading-settings.png b/content/app/app-dev-course/modul2/screenshot-heading-settings.png
new file mode 100644
index 00000000000..80e02f4baf2
Binary files /dev/null and b/content/app/app-dev-course/modul2/screenshot-heading-settings.png differ
diff --git a/content/app/app-dev-course/modul2/screenshot-ikke-for-deg-layout.png b/content/app/app-dev-course/modul2/screenshot-ikke-for-deg-layout.png
new file mode 100644
index 00000000000..10be2c27bad
Binary files /dev/null and b/content/app/app-dev-course/modul2/screenshot-ikke-for-deg-layout.png differ
diff --git a/content/app/app-dev-course/modul2/screenshot-ikke-for-deg-tekst.png b/content/app/app-dev-course/modul2/screenshot-ikke-for-deg-tekst.png
new file mode 100644
index 00000000000..44f8301e61a
Binary files /dev/null and b/content/app/app-dev-course/modul2/screenshot-ikke-for-deg-tekst.png differ
diff --git a/content/app/app-dev-course/modul2/screenshot-image-settings-ext-url.png b/content/app/app-dev-course/modul2/screenshot-image-settings-ext-url.png
new file mode 100644
index 00000000000..3abbb192a59
Binary files /dev/null and b/content/app/app-dev-course/modul2/screenshot-image-settings-ext-url.png differ
diff --git a/content/app/app-dev-course/modul2/screenshot-image-settings-wwwroot.png b/content/app/app-dev-course/modul2/screenshot-image-settings-wwwroot.png
new file mode 100644
index 00000000000..8e1e7ff33bc
Binary files /dev/null and b/content/app/app-dev-course/modul2/screenshot-image-settings-wwwroot.png differ
diff --git a/content/app/app-dev-course/modul2/screenshot-info-page-1.png b/content/app/app-dev-course/modul2/screenshot-info-page-1.png
new file mode 100644
index 00000000000..2769f293169
Binary files /dev/null and b/content/app/app-dev-course/modul2/screenshot-info-page-1.png differ
diff --git a/content/app/app-dev-course/modul2/screenshot-info-page-layout-1.png b/content/app/app-dev-course/modul2/screenshot-info-page-layout-1.png
new file mode 100644
index 00000000000..dff88bbd5b4
Binary files /dev/null and b/content/app/app-dev-course/modul2/screenshot-info-page-layout-1.png differ
diff --git a/content/app/app-dev-course/modul2/screenshot-info-page-layout-2.png b/content/app/app-dev-course/modul2/screenshot-info-page-layout-2.png
new file mode 100644
index 00000000000..bb2d754b8f1
Binary files /dev/null and b/content/app/app-dev-course/modul2/screenshot-info-page-layout-2.png differ
diff --git a/content/app/app-dev-course/modul2/screenshot-radio-buttons-settings.png b/content/app/app-dev-course/modul2/screenshot-radio-buttons-settings.png
new file mode 100644
index 00000000000..a074817b370
Binary files /dev/null and b/content/app/app-dev-course/modul2/screenshot-radio-buttons-settings.png differ
diff --git a/content/app/app-dev-course/modul2/readonly-asd.png b/content/app/app-dev-course/modul2/screenshot-readonly-setting.png
similarity index 100%
rename from content/app/app-dev-course/modul2/readonly-asd.png
rename to content/app/app-dev-course/modul2/screenshot-readonly-setting.png
diff --git a/content/app/app-dev-course/modul2/screenshot-repository-add-file.png b/content/app/app-dev-course/modul2/screenshot-repository-add-file.png
new file mode 100644
index 00000000000..5005feb9ef4
Binary files /dev/null and b/content/app/app-dev-course/modul2/screenshot-repository-add-file.png differ
diff --git a/content/app/app-dev-course/modul2/screenshot-send-inn-button-settings.png b/content/app/app-dev-course/modul2/screenshot-send-inn-button-settings.png
new file mode 100644
index 00000000000..dbcba2ddacc
Binary files /dev/null and b/content/app/app-dev-course/modul2/screenshot-send-inn-button-settings.png differ
diff --git a/content/app/app-dev-course/the-goon-dodgeball.gif b/content/app/app-dev-course/the-goon-dodgeball.gif
deleted file mode 100644
index f2188d49eaa..00000000000
Binary files a/content/app/app-dev-course/the-goon-dodgeball.gif and /dev/null differ