Modul 4
Legge til kodelister manuelt, programmatisk og dynamisk
I denne modulen skal du utvide applikasjonen du har laget i foregående moduler for å støtte enda fler av kravene til Sogndal kommune.
Temaer som dekkes i denne modulen:
- Kodelister/Options
- Dynamiske uttrykk
Oppgaver
Oppsummering
I denne modulen har du lagt til nedtrekksliste, radioknapp og avkrysningsbokser og lagt inn alternativer for disse komponentene manuelt og med dynamiske og statiske kodelister. I tillegg har du lagt til dynamikk som viser ulike alternativer basert på tidligere valg.
Tjenesten skal kunne kjøres opp på din lokale maskin med localtest og du skal kunne validere at komponentene presenterer forventede dataverdier.
Husk å pushe de lokale endringene dine så de blir tilgjengelig i Altinn Studio.
Løsningsforslag
Legg til komponenter i Altinn Studio Designer, legg til en passende ledetekst og knytt komponenten til riktig felt i datamodellen.
Legge til alternativer manuelt: Fyll in felter i Altinn Studio Designer. I koden ser det ut som følger:
App/ui/layouts/Arbeidsforhold.json{
"$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
"data": {
"layout": [
{
"id": "RadioButtons-sektor",
"type": "RadioButtons",
"dataModelBindings": {
"simpleBinding": "Innflytter.Arbeidsinformasjon.Sektor"
},
"required": true,
"options": [
{
"label": "arbeidsforhold.sektor.offentlig",
"value": "offentlig"
},
{
"label": "arbeidsforhold.sektor.privat",
"value": "privat"
}
],
"textResourceBindings": {
"title": "arbeidsforhold-sektor.title"
}
},
...
]
}
}
Legge til statisk kodeliste for bransje: Legg filen
industry.jsoniApp/options.Legge til dynamisk kodeliste for år i arbeidslivet:
App/options/YearsInWorkForceOptionsProvider.csusing Altinn.App.Core.Features;
using Altinn.App.Core.Models;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace Altinn.App.AppLogic.Options
{
public class YearsInWorkForceOptionsProvider : IAppOptionsProvider
{
public string Id { get; set; } = "years-in-work-force";
public Task<AppOptions> GetAppOptionsAsync(string language, Dictionary<string, string> keyValuePairs)
{
var options = new AppOptions
{
Options = new List<AppOption>
{
new() {
Label = "0 - 5 år",
Value = "0-5"
},
new() {
Label = "5 - 10 år",
Value = "5-10"
},
new() {
Label = "10 - 20 år",
Value = "10-20"
},
new() {
Label = "20+ år",
Value = "20+"
}
}
};
return Task.FromResult(options);
}
}
}
- Registrere dynamisk kodeliste:
App/Program.cs...
{
// Register your apps custom service implementations here.
services.AddTransient<IInstantiationProcessor, InstantiationProcessor>();
services.AddTransient<IAppOptionsProvider, YearsInWorkForceOptionsProvider>();
...
}
- For å sende en spørreparameter med Bransje-komponenten legger vi til en mapping på komponenten knyttet til feltet
Sektori datamodellen:
App/ui/layouts/arbeidsforhold.json...
{
"id": "Checkboxes-bransje",
"type": "Checkboxes",
"dataModelBindings": {
"simpleBinding": "Innflytter.Arbeidsinformasjon.Bransje"
},
"required": true,
"textResourceBindings": {
"title": "arbeidsforhold-bransje.title"
},
"optionsId": "industry",
"mapping": {
"Innflytter.Arbeidsinformasjon.Sektor": "sektor"
}
},
...
- Dynamisk kodeliste for Bransje med svaralternativer som avhenger av verdien for
sektor:
App/options/IndustryOptions.csusing Altinn.App.Core.Features;
using Altinn.App.Core.Models;
using Newtonsoft.Json;
using System.Collections.Generic;
using System.IO;
using System.Threading.Tasks;
namespace Altinn.App.AppLogic.Options
{
public class IndustryOptions : IAppOptionsProvider
{
public string Id { get; set; } = "industry";
private List<AppOption> _privateOptions = null;
public Task<AppOptions> GetAppOptionsAsync(string language, Dictionary<string, string> keyValuePairs)
{
string sektor = keyValuePairs.GetValueOrDefault("sektor");
if (sektor == "offentlig")
{
var offentligeOptions = new AppOptions
{
Options = new List<AppOption>
{
new() {
Label = "Stat",
Value = "stat"
},
new() {
Label = "Kommune",
Value = "kommune"
},
}
};
return Task.FromResult(offentligeOptions);
}
else
{
if (_privateOptions == null)
{
using (StreamReader r = new("./options/industry.json"))
{
string json = r.ReadToEnd();
_privateOptions = JsonConvert.DeserializeObject<List<AppOption>>(json);
}
}
return Task.FromResult(new AppOptions { Options = _privateOptions });
}
}
}
}
- Kodelisten registreres i
Program.cs:
App/Program.cs{
...
// Register your apps custom service implementations here.
services.AddTransient<IInstantiationProcessor, InstantiationProcessor>();
services.AddTransient<IAppOptionsProvider, YearsInWorkForceOptionsProvider>();
services.AddTransient<IAppOptionsProvider, IndustryOptions>();
...
}
- Legg til komponent for visning av tekst. Det er lagt til logikk på komponenten som skjuler den dersom “IKT (data/IT)” ikke er valgt. Verdien
491for feltet er hentet fra filenindustry.json.
‘Send inn’-knappen er også flyttet til denne siden.
App/ui/layouts/arbeidsforhold.json...
{
"id": "info-it-kompteanse",
"type": "Paragraph",
"textResourceBindings": {
"title": "arbeid.it-kompetanse"
},
"hidden": ["notContains", ["component", "Checkboxes-bransje"], "491"],
"dataModelBindings": {}
},
{
"id": "send-inn",
"type": "Button",
"textResourceBindings": {
"title": "button.send-inn"
}
},
...
- Legg til tekstressurs:
App/config/texts/resource.nb.json...
{
"id": "arbeid.it-kompetanse",
"value": "#### Vi ser at du besitter kompetanse vi trenger i kommunen. <br><br> [Se en oversikt over våre ledige stillinger her.](https://sogndal.easycruit.com/index.html)"
},
...