Grid

Grid-komponenten brukes til å visuelt oppstille komponenter i en tabellvisning

[
  {
    "id": "gjeld-grid",
    "type": "Grid",
    "textResourceBindings": {
      "title": "Totalfordeling av gjeld",
      "description": "Her skal du fylle ut fordelingen av all din gjeld, og hvilke typer den gjelder."
    },
    "rows": [
      {
        "header": true,
        "cells": [
          {
            "width": "25%",
            "columnOptions": {
              "alignText": "left",
              "textOverflow": {
                "lineWrap": true,
                "maxHeight": 1
              }
            }
          },
          { "text": "Fordeling" },
          { 
            "text": "Beløp",
            "columnOptions": {
              "width": "25%"
            }
          },
          { "text": "Innhentet og verifisert" }
        ]
      },
      {
        "cells": [
          { "text": "laan-bolig" },
          { "component": "fordeling-bolig" },
          { "component": "belop-bolig" },
          { "component": "innhentet-bolig" }
        ]
      },
      {
        "cells": [
          { "text": "laan-studie" },
          { "component": "fordeling-studie" },
          { "component": "belop-studie" },
          { "component": "innhentet-studie" }
        ]
      },
      {
        "cells": [
          { "text": "laan-kredittkort" },
          { "component": "fordeling-kredittkort" },
          { "component": "belop-kredittkort" },
          { "component": "innhentet-kredittkort" }
        ]
      },
      {
        "readOnly": true,
        "cells": [
          { 
            "text": "SUM",
            "alignText": "right"
          },
          { "component": "fordeling-total" },
          null,
          null
        ]
      }
    ]
  },
  {
    "id": "fordeling-bolig",
    "type": "Input",
    ...
  },
  {
    "id": "fordeling-studie",
    "type": "Input",
    ...
  },
  {
    "id": "fordeling-kredittkort",
    "type": "Input",
    ...
  },
  {
    "id": "belop-bolig",
    "type": "Input",
    "readOnly": true,
    ...
  },
  {
    "id": "belop-studie",
    "type": "Input",
    "readOnly": true,
    ...
  },
  {
    "id": "belop-kredittkort",
    "type": "Input",
    "readOnly": true,
    ...
  },
  {
    "id": "innhentet-bolig",
    "type": "Checkboxes",
    ...
  },
  {
    "id": "innhentet-studie",
    "type": "Checkboxes",
    ...
  },
  {
    "id": "innhentet-kredittkort",
    "type": "Checkboxes",
    ...
  },
  {
    "id": "fordeling-total",
    "type": "Input",
    "readOnly": true,
    ...
  }
]

Konfigurasjon

Grid-komponenten krever en konfigurasjon for rader og celler. For å starte med en 2x2 Grid med to kolonner og to rader, kan vi bruke følgende konfigurasjon:

{
  "id": "myGrid",
  "type": "Grid",
  "rows": [
    {
      "cells": [
        { "text": "Celle 1" },
        { "text": "Celle 2" }
      ]
    },
    {
      "cells": [
        { "text": "Celle 3" },
        { "text": "Celle 4" }
      ]
    }
  ]
}

Hver celle må være enten et objekt med en text-egenskap (for tekstceller), et objekt med en component-egenskap (refererer til andre komponenter), et objekt med en labelFrom-egenskap (tekstcelle som refererer til andre komponenter) eller null (for en tom celle). Hver rad må ha samme antall celler som alle andre rader.

Legg spesielt merke til at mobilvisningen av Grid bare viser komponentene. Det er viktig å være oppmerksom på at komponentene i cellene derfor må fungere frittstående også. Les mer om dette i fallgruver nedenfor.

Rader

For noen rader, vanligvis den første, kan du konfigurere en overskriftsrad. For å gjøre dette, legg til en header-egenskap til raden og sett den til true. Dette vil gjøre raden har en annen bakgrunnsfarge og gjøre teksten uthevet.

{
  "header": true,
  "cells": [
    { "text": "Celle 1" },
    { "text": "Celle 2" }
  ]
}

En rad kan også bli konfigurert som skrivebeskyttet. Dette vil gjøre raden har en gul bakgrunnsfarge. For å konfigurere en rad som skrivebeskyttet, legg til en readOnly-egenskap til raden og sett den til true.

{
  "readOnly": true,
  "cells": [
    { "text": "Celle 3" },
    { "text": "Celle 4" }
  ]
}

Merk at komponenter inni en readOnly-rad ikke blir automatisk satt til readOnly. Hvis du vil gjøre en komponent skrivebeskyttet inni en readOnly-rad, må du konfigurere den slik manuelt.

Rader kan også skjules, og en hel rad vil automatisk skjules dersom følgende regler oppfylles:

1. Raden har minst en komponent-referanse (ikke bare tomme celler og tekst-celler)
2. Alle komponent-referansene i raden peker på komponenter som for tiden er skjult

Rader som bare har tekst-celler vil med andre ord aldri bli skjult, og selv om raden har tekst-celler blir ikke disse cellene regnet med når Grid-komponenten skal velge om raden skal skjules eller ikke.

Celler

Celler kan konfigureres til å vise tekst eller en annen komponent. For å konfigurere en celle som viser tekst, legg til en text-egenskap til cellen og sett den til teksten du vil vise. Du kan også angi en tekstressursnøkkel som teksten som skal vises i cellen. I tillegg er det mulig å inkludere help-egenskap som vil vise en hjelpetekst i tekstcellen. Alternativt kan du hente teksten fra en komponents tekstressurser ved å bruke labelFrom-egenskapen istedenfor text. Kan hente tekstressurser som title, description og help.
For å konfigurere en celle som viser en annen komponent, legg til en component-egenskap til cellen og sett den til id-en til komponenten du vil vise i cellen.

{
  "cells": [
    { "text": "Tekst i celle 1" },
    { "text": "tekstressurs.nokkel.celle2" },
    { "text": "Tekst in celle 3", "help": "Hjelpetekst i celle 3" },
    { "labelFrom": "minKomponent" },
    { "component": "minKomponent" }
  ]
}

I konfigurasjonen over er det en forutsetning at minKomponent er en komponent som er konfigurert et annet sted i layout-konfigurasjonen. Foreløpig er det støtte for følgende komponenter i Grid-komponenten:

• Button
• Checkboxes
• Custom (subject to the custom implementation)
• Datepicker
• Dropdown
• Header
• Image
• Input
• InstantiationButton
• MultipleSelect
• Paragraph
• PrintButton
• RadioButtons
• TextArea

Spesielt for RadioButtons og Checkboxes er at merkelappen som indikerer valget ikke blir vist dersom det bare finnes et valgalternativ å velge mellom.

Når komponenter vises i en tabell, vil de ikke vise title- og description-tekstressurser. Disse tekstressursene bør likevel settes på komponenten, da de vil bli brukt for tilgjengelighet og vil fortsatt bli vist når komponenten vises utenfor en Grid - som på mindre skjermer og i et sammendrag.

Bredder, tekst og justering

Det finnes flere opsjoner på en celle for å konfigurere bredde, tekst plassering, og anntall linjer som kan vises før resten av teksten skjules. Følgende opsjoner finnes:

• width - Bredden til kolonnen. Verdien kan inneholde en prosent, for eks.: "25%", eller "auto" (standardverdi). Bør settes på den første kolonnen, og vil da gjelde for alle celler i den kolonnen.
• alignText - Velg mellom "left", "center" eller "right" for å plassere teksten i cellen tilsvarende. Dette har ingen effekt for celler med komponenter, kun celler med tekst.
• textOverflow - Brukes for å kontrollere oppførsel når tekstinnhold er for stort til å vises i en celle. Har ingen effekt for celler med komponenter, kun celler med tekst.
  • lineWrap - Sett til false for å skru av skjuling av overflødig tekst. Standardverdi er true.
  • maxHeight - Setter et maks antall tillatte linjer før tekst skjules med utellatelsestegn (…). "maxHeight": 0 resulterer i å skru av skjuling av overflødig tekst.

Du can overstyre en kollonnes valg for alignText og textOverflow for en spesifikk text-celle, ved å legge attributtene til direkte i den valgte text-cellen.

Eksempel:

{
  "cells": [
    {
      "text": "Celle 1",
      "width": "25%",
      "alignText": "left",
      "textOverflow": {
        "lineWrap": false,
        "maxHeight": 0
      }
    },
    {
      "component": "minKomponent",
      "width": "75%"
    }
  ]
}

Mobilvisning

Grid-visningen av enkeltkomponenter er nyttig for å gi brukeren bedre oversikt over innholdet i en side og relaterte felter når skjermen er stor nok. En slik tabellvisning er derimot ikke optimal for mindre skjermer, derfor vil Grid-komponenten automatisk vise enkeltkomponentene (som om de ikke var del av en Grid) på mindre skjermer. Tekstceller og celler som bruker labelFrom vises ikke på mobil. Rekkefølgen til komponentene blir den samme som rekkefølgen til radene og cellene i Grid-konfigurasjonen (en og en rad av gangen). Rekkefølgen til enkeltkomponentene slik de er definert i layout-konfigurasjonen, har derfor ingen betydning.

Det samme gjelder også for visning av en Grid-komponent i et sammendrag, hvor de samme komponentene referert til i Grid vil vises som sammendrag av enkeltkomponenter, uten visning av tekst-celler og labelFrom-celler.

Fallgruver

Når du konfigurerer Grid-komponenten, kan det ved første øyekast se riktig ut å dele ledetekst og komponenter i ulike celler. På en stor skjerm vil dette se riktig ut, men det gir uventet oppførsel på mobil og ved bruk av skjermleser.

Som et eksempel, her er en vanlig fallgruve for Grid-konfigurasjonen:

[
  {
    "id": "grid-example",
    "type": "Grid",
    "textResourceBindings": {
      "title": "Innrapportering av verdier",
      "description": "Staten ønsker å vite om alt det verdifulle du har samlet på."
    },
    "rows": [
      {
        "header": true,
        "cells": [
          { "text": "Verdisak" },
          { "text": "Antall" }
        ]
      },
      {
        "cells": [
          { "text": "Frimerker" },
          { "component": "antall-frimerker" }
        ]
      },
      {
        "cells": [
          { "text": "10-øringer" },
          { "component": "antall-10oringer" }
        ]
      }
    ]
  },
  {
    "id": "antall-frimerker",
    "type": "Input",
    "dataModelBindings": {
      "simpleBinding": "Verdisaker.Frimerker.Antall"
    },
    "textResourceBindings": {
      "title": "Antall"
    }
  },
  {
    "id": "antall-10oringer",
    "type": "Input",
    "dataModelBindings": {
      "simpleBinding": "Verdisaker.10Oringer.Antall"
    },
    "textResourceBindings": {
      "title": "Antall"
    }
  }
]

I skjermbildet av denne konfigurasjonen vil det se riktig ut på en stor skjerm:

I dette eksempelet vil en bruker som navigerer til svarfeltet med en skjermleser, bare få opplest teksten “Antall”, uten å få vite hva feltet gjelder. Dette blir også tydelig på en mindre skjerm:

I mobilvisningen ser du bare komponentene. Tekstcellene vises ikke, og informasjonen i dem faller derfor bort for mobilbrukere.

Du kan løse dette på to måter:

1. Hvis teksten i cellen kan være den samme som ledeteksten til komponenten, anbefaler vi å bruke en beskrivende ledetekst og hente den inn i cellen med labelFrom i stedet for text.
2. Hvis teksten i cellen skal vise en annen tekst enn ledeteksten til komponentene, bruker du text i cellen. Her er det viktig at ledeteksten, og eventuell beskrivelse på komponentene, inneholder all informasjon brukeren trenger.