MultipleSelect

MultipleSelect kan benyttes når brukeren kan velge blant flere valg

Bruk

MultipleSelect brukes ofte i skjemaer for å samle input fra brukeren, slik at de kan velge ett eller flere alternativer fra en lang liste med alternativer. MultipleSelect tilbyr også støtte for lokalt søk/filtrering. Som Checkbox-komponenten lagrer MultipleSelect valgene som en komma-separert liste.

Bruk MultipleSelect når:

• Brukere kan velge flere alternativer fra en liste.
• Når listen med alternativer er for lang til å vises som avkrysningsbokser.

Anatomi

Relatert

• For flervalg med få alternativer, bruk Avkrysningsbokser.
• For enkeltvalg med få alternativer, bruk radionkapper.
• For enkeltvalg med mang alternativer, bruk Dropdown.

Egenskaper

Følgende er en liste over tilgjengelige egenskaper for MultipleSelect. Listen er automatisk generert basert på komponentens JSON schema (se link).

JSON schema

Required properties: id,type

Konfigurering

Legg til komponent

{
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
  {
    "data": {
      "layout": [
        {
          "id": "MultipleSelect-id",
          "type": "MultipleSelect",
          "dataModelBindings": {
            "simpleBinding": ""
          }
        }
      ]
    }
  }
}

Tekst (textResourceBindings)

Du kan opprette en ny tekst ved å klikke på pluss-tegnet eller velge en eksisterende ved å klikke på forstørrelsesglasset. Se Legge til og endre tekster i en app for mer info.

Tekst kan legges til direkte som en tekststreng eller ved å oppgi nøkkelen til en tekstressurs.

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  "type": "Checkboxes",
  "textResourceBindings": {
          "title": "",
          "description": "",
          "help": "",
          "shortName": "",
          "tableTitle": ""
        }
}

Datamodell

For at det skal være mulig å lagre og manipulere informasjonen må komponenten kobles til et felt i en datamodell. Verdiene til alternativene lagres som streng.

Velg feltet du ønsker å koble komponenten til fra nedtrekksmenyen. Hvis det ikke er noen felter tilgjengelig må du først laste opp en datamodell.

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "dataModelBindings": {
    "simpleBinding": "MyDataModel.SomeField"
    }
}

Legge til alternativer

Alternativer (options) kan legges til manuelt eller ved hjelp av kodelister.

Manuelt (options)

Velg “Manuelt” og klikk “Legg til flere” for å til et nytt alternativ. Velg eller opprett ny tekst for å legge til etikett (label).

Alternativet kommer med en forhåndsutfylt verdi (value), som er dataen som lagres når brukeren gjør et valg. Endre verdien til det som passer.

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "options": [
          {
            "label": "Alternativ 1",
            "value": "1"
          }
        ]
}

Kodeliste (optionsId)

En kodeliste er en forhåndsdefinert liste med alternativer.

For å legge til alternativer fra en kodeliste, velg ‘Kodeliste’ og angi en kodeliste ID. For å bruke en egendefinert (dynamisk) kodeliste, klikk på “Bytt til egendefinert kodeliste”.

Om du ønsker å sikre dynamiske kodelister kan du huke av for dette:

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "optionsId": "land",
  "secure": true
}

Kilde (source)

En måte å legge til alternativer er å koble komponenten til en kodeliste basert på skjemadata lagret i selve appen. Dette gjør du ved å legge til en kilde (source); se dokumentasjon for hvordan dette konfigureres.

Innstillinger i Altinn Studio.

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "source": {
    "group": "some.group",
    "label": "dropdown.label",
    "value": "some.group[{0}].someField",
    "description": "",
    "helpText": ""
  }
}
...

Dokumentasjon for kodelister

• Koble en komponent til kodeliste
• Statiske kodelister
• Dynamiske kodelister
• Dynamiske kodelister fra repeterede grupper i datamodellen

Feltet skal være skrivebeskyttet (readOnly)

Egenskapen readOnly deaktiverer komponenten når huket av (true).

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "readOnly": true
}

Eksempel skrivebeskyttet komponent

Feltet skal være påkrevd (required)

Krever at det gjøres et valg når aktivert (true), det vil da vises en stjerne ved overskriften.

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "required": false
}

Forhåndsvalgt verdi (preselectedOptionsIndex)

Setter en forhåndsvalgt verdi. Alternativene er nullindeksert, så det første alternativet er 0, det andre 1, osv.

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "preselectedOptionsIndex": 0
}

Automatisk fullføring (autocomplete)

Automatisk fullføring (autocomplete) lar deg spesifisere om, og i hvilken grad, brukeragenten har tillatelse til å gi automatisert hjelp med utfylling av verdier i skjemafelter, samt gi veiledning til nettleseren om hvilken type informasjon som forventes i feltet.

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "autocomplete": "given-name"
  
}

Oppsummering (renderAsSummary)

Indikerer om feltet skal være med i oppsummering eller ikke (standard: false).

{
  "id": "komponent-id",
  ...
  "renderAsSummary": false
}

Feltet skal skjules (hidden)

Indikerer om feltet skal skjules eller ikke (standard: false).

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "hidden": false
}

Sideskift (pageBreak)

Indikerer om en sideskift skal legges til før eller etter komponenten. Kan være enten: auto (standard), always (alltid) eller avoid (unngå).

App/ui/layouts/{page}.json

{
  "id": "komponent-id",
  ...
  "pageBreak": {
    "breakBefore": "auto",
    "breakAfter": "auto"
  }
}

Horisontal justering med grid

grid-egenskapen kontrollerer horisontal justering av komponenten basert på en layout med 12 kolonner. Elementer tildeles brøkdeler av 12 som bestemmer deres bredde i forhold til skjermbredden. I eksemplet nedenfor setter vi komponentens bredde til 2/12 av skjermbredden for alle skjermstørrelser (fra xs og opp).

{
  "id": "komponent-id",
  ...
  "grid": {
      "xs": 2,
    }
}

Du kan også bruke grid for å sidestille komponenter.

Se Sidestilte komponenter (grid) for detaljer og eksempler.