Modul 6: Legge til kodelister

I denne modulen skal vi bygge videre på appen vår for å støtte enda flere av kravene til Sogndal kommune.

Temaer i denne modulen

• Radioknapper
• Avkrysningsbokser
• Nedtrekkslister
• Kodelister
• Gitea

Krav fra Sogndal kommune

I denne modulen skal vi jobbe med disse kravene fra kommunen:

Kommunen ønsker å samle inn følgende data om innflyttere:

• Arbeids- og bransjeerfaring
• Sektor (privat/offentlig)
• Bransje (standardliste med bransjer)

Oppgaver

I mange tjenester trenger vi å gi brukerne et sett med svaralternativer for et datafelt. Slike sett med svaralternativer kalles kodelister eller alternativer.

Du kan sette opp kodelister på tre måter i Altinn:

• Ved å legge til alternativer manuelt for komponenten i Altinn Studio.
• Ved å la komponenten hente alternativer fra JSON-fil med ferdige alternativer.
• Ved å generere alternativer dynamisk ved hjelp av kode.

I denne oppgaven skal vi se på de første to metodene.

Legg til de nye feltene i datamodellen

1. Gå til Datamodell.
2. Velg Legg til.
3. Velg Objekt.
4. Gi objektet navnet arbeidsforhold.
5. Gå til Felter-fanen.
6. Legg til tre tekstfelter med navnene sektor, bransje og aar_i_arbeidslivet.

Opprett en ny skjemaside for arbeidsforhold

1. Gå til Lage.
2. Opprett en ny side og kall den Arbeidsforhold.

Skjemaet du har laget skal nå ha tre sider.

Legg til radioknapper for sektor

Brukeren skal kunne velge mellom offentlig og privat sektor. Til det er det naturlig å bruke radioknapper.

1. Dra inn en komponent av typen Radioknapper øverst på den nye siden.
2. Under Tekst i egenskapene til komponenten du har lagt til, legg til ledeteksten Sektor. Nå bør skjemabyggeren se slik ut:

   

3. Nederst i tekstseksjonen kan man sette opp alternativer. Fanen Velg kodeliste er valgt som utgangspunkt. Velg fanen Sett opp egne alternativer for å legge til egne alternativer.
4. Velg Legg til alternativ. Du vil se at det dukker opp et alternativ under overskriften Radioknapp 1 med en generert verdi.
5. Klikk på Radioknapp 1.
6. Bytt ut verdien med offentlig. Dette er verdien som vil bli sendt til systemet når brukeren besvarer skjemaet.
7. Velg Ledetekst.
8. Fyll inn teksten Offentlig. Dette er teksten som brukeren vil se ved siden av radioknappen.
9. Gjenta stegene fra trinn 4 til trinn 8, men klikk på Radioknapp 2 i stedet for Radioknapp 1, og gi knappen verdien privat og ledeteksten Privat.

   

10. Nå mangler vi bare å koble komponenten til riktig felt i datamodellen. Åpne Datamodellknytninger, klikk på Radioknapper og velg arbeidsforhold.sektor.

Legg til avmerkingsbokser for bransje

Brukeren skal også kunne velge én eller flere bransjer. Siden det skal være mulig å velge mer enn ett alternativ, er det naturlig å bruke avmerkingsbokser. I stedet for å legge til alternativene manuelt, skal vi bruke en fil med en kodeliste. En kodelistefil er nyttig hvis vi for eksempel trenger å bruke de samme alternativene flere steder.

Slik bruker du en kodeliste til å lage en liste med avmerkingsbokser:

Legg til komponenten

1. Dra en komponent av typen Avmerkingsbokser inn på siden, etter radioknappkomponenten for sektor.
2. Under Tekst i egenskapene til komponenten du har lagt til, legg til ledeteksten Bransje. Nå bør skjemabyggeren se slik ut:

   

3. Gå til Datamodellknytninger, velg Avmerkingsbokser og koble komponenten til feltet arbeidsforhold.bransje.

Laste opp og koble til kodelisten til komponenten

1. Last ned kodelisten.
2. Åpne siden der du la til Bransje og klikk på Bransje.
3. Under Tekst i egenskapene for Bransje, sjekk at fanen Velg kodeliste er valgt.
4. Trykk på knappen med teksten Last opp din egen kodeliste.
5. Finn frem til filen du nettopp lastet ned. Den har navnet industri.json.
6. Velg filen, og trykk på Åpne.
7. Velg industri fra nedtrekkslisten som vist under.

   

Nå skal avmerkingsboksene være klare.

Legg til en nedtrekksliste for antall år i arbeidslivet

Det siste vi skal gjøre i denne modulen er å legge til en nedtrekksliste hvor brukerne kan si noe om hvor lenge de har vært i arbeid. Listen skal ha følgende alternativer:

Til denne komponenten skal vi også bruke en kodelistefil, men denne gangen skal vi kode alternativene selv.

Legg til komponenten og del endringene

1. Fra Komponenter-panelet, dra inn komponenten som heter Nedtrekksliste og legg den til rett etter avmerkingsboksene.
2. Gi komponenten ledeteksten Antall år i arbeidslivet. Skjemaet skal nå se slik ut:

   

3. Legg til en datamodellknytning til feltet arbeidsforhold.aar_i_arbeidslivet.
4. Klikk på Last opp dine endringer for å dele arbeidet du har gjort. Den røde prikken viser at du har gjort endringer som ikke er delt.

   

5. Skriv en kort tekst om hva du har oppdatert. Hvis det er flere som jobber på samme app, blir det lettere for dem å vite hva du har jobbet med. Dette er frivillig.
6. Velg Del endringer for å lagre teksten og laste opp endringene dine. Etter en liten stund skal du få en beskjed om at appen er oppdatert, og den røde prikken skal forsvinne.

Legg til kodelisten i repositoriet

1. Klikk på profilikonet og gå til repositoriet i Gitea.
2. Gå til mappen App/options. Her vil du se at filen industri.json fra forrige steg er listet opp.
3. Velg Add file og deretter Ny fil.
4. Skriv inn filnavnet aar_i_arbeidslivet.json. Husk filtypen .json. Uten den vil ikke Studio finne filen når vi skal koble kodelisten til komponenten etterpå.
5. Kopier koden under og lim den inn i tekstområdet der det står Ny fil.

   [
       {
           "label": "0 – 5 år",
           "value": "0-5"
       },
       {
           "label": "5 – 10 år",
           "value": "5-10"
       },
       {
           "label": "10 – 20 år",
           "value": "10-20"
       },
       {
           "label": "20 år eller mer",
           "value": "20+"
       }
   ]
   

6. Velg Commit endringer nederst på siden. Det kan hende du får en melding fra Gitea om at filen inneholder tvetydige tegn, men den kan du trygt ignorere.

Koble kodelisten til komponenten

1. I Altinn Studio ser du nå en rød prikk ved knappen Hent endringer. Det betyr at det er gjort endringer i filsystemet (mappen du har lagt til i Gitea), som du må synkronisere med Studio.

   

2. Klikk på knappen. Du vil få en bekreftelse på at du har fått siste versjon og prikken forsvinner.
3. Klikk på komponenten Antall år i arbeidslivet og legg til den nye kodelisten på samme måte som du gjorde da du la til kodeliste for bransje.

Nå skal din app ha fått en nedtrekksliste med alternativene som er spesifisert i kodelisten.

Nyttig dokumentasjon

Se kodelisteguiden for å se hvordan kodelister settes opp i appkoden.

Oppsummering

I denne modulen har du lagt til en gruppe med radioknapper, en gruppe med avkrysningsbokser og en nedtrekksliste. Du har også satt opp svaralternativer manuelt i Studio og ved hjelp av JSON-filer i Gitea.