List

Listekomponenten kan brukes til å presentere innholdsrike data til bruker i tabellformat. Hver rad i tabellen er velgbar. Komponenten støtter søk, sortering og paginering.

Hvordan definere komponenten i skjema

Komponenten er av typen List. Eksempel på hvordan man kan definere kompoenten i layout.json:

{
    "id": "list-component",
    "type": "List",
    "textResourceBindings": {
        "title": "Hvem gjelder saken?"
    },
    "dataModelBindings": {
        "name": "SelectedItem",
        "profession": "SelectedItemProfession"
    },
    "bindingToShowInSummary": "SelectedItem",
    "dataListId": "people",
    "tableHeaders": {
        "name": "Navn",
        "age": "Alder",
        "profession": "Yrke"
    },
    "sortableColumns": [ "age" ],
    "pagination": {
        "alternatives": [ 5, 10 ],
        "default": 5
    },
    "required": true,
    "tableHeadersMobile": [ "name", "age" ]
},

Populering av tabell

Listekomponenten populeres med dynamiske data. Dataene defineres i en egen fil som implementerer interfacet IDataListProvider. Dette fungerer tilsvarende kodelister/options. Feltet dataListId må legges til på komponenten som definerer hvilken dataliste komponenten referer til. Dynamiske datalister kan enten være åpen eller sikret. Etter at du er laget ferdig din implementasjon reigstreres denne som en service i metoden RegisterCustomAppServices i filen Program.cs Eksempel på en klasse som implementerer interfacet IDataListProvider

public class ListCases : IDataListProvider
{
    public string Id { get; set; } = "people";

    public Task<DataList> GetDataListAsync(string language, Dictionary<string, string> keyValuePairs)
    {
        int start = 0;
        int count = 10;
        string search = "";

        if (keyValuePairs.ContainsKey("search") )
        {
            search = keyValuePairs["search"];
        }

        if (keyValuePairs.ContainsKey("size") && keyValuePairs.ContainsKey("page"))
        {
            string size = keyValuePairs["size"];
            string page = keyValuePairs["page"];

            start = int.Parse(size) * int.Parse(page);
            count = int.Parse(size);
        }

        List<ListItem> items = new List<ListItem>();

        items.Add(new ListItem { Name = "Caroline", Age = 28, Profession = "Utvikler" });
        items.Add(new ListItem { Name = "Kåre", Age = 37, Profession = "Sykepleier" });
        items.Add(new ListItem { Name = "Johanne", Age = 27, Profession = "Utvikler" });
        items.Add(new ListItem { Name = "Kari", Age = 56, Profession = "Snekker" });
        items.Add(new ListItem { Name = "Petter", Age = 19, Profession = "Personlig trener" });
        items.Add(new ListItem { Name = "Hans", Age = 80, Profession = "Pensjonist" });
        items.Add(new ListItem { Name = "Siri", Age = 28, Profession = "UX designer" });
        items.Add(new ListItem { Name = "Tiril", Age = 40, Profession = "Arkitekt" });
        items.Add(new ListItem { Name = "Karl", Age = 49, Profession = "Skuespiller" });
        items.Add(new ListItem { Name = "Mette", Age = 33, Profession = "Artist" });

        
        if (!String.IsNullOrEmpty(search))
        {
            items = items.Where(o => (o.Name == search)).ToList();
        }

        if (keyValuePairs.ContainsKey("sortDirection"))
        {
            string sortDirection = keyValuePairs["sortDirection"];
            if (sortDirection == "asc")
            {
                items = items.OrderBy(o => o.Age).ToList();
            }
            else if (sortDirection == "desc") 
            {
                items = items.OrderBy(o => o.Age).ToList();
                items.Reverse();
            }
        }
        
        DataListMetadata appListsMetaData = new DataListMetadata() { TotaltItemsCount = items.Count };
       
        List<object> objectList = new List<object>();
        items.ForEach(o => objectList.Add(o));

        int boundedCount = start + count > items.Count ? items.Count - start : count;
        return Task.FromResult(new DataList { ListItems = objectList.GetRange(start, boundedCount), _metaData = appListsMetaData });
    }
}

For å registrere eksemplet over som en service legger man til services.AddTransient<IDataListProvider, ListCases>(); i metoden RegisterCustomAppServices i filen Program.cs Her blir listen laget i koden, men her kan man istedet kalle på et annet API som returnerer data man vil vise i tabellen. Hvis dette APIet støtter sortering og paginering kan man videresende disse verdiene til APIet slik at man ikke henter unødvendig data.

Kolonner

Hvilke kolonner tabellen skal bestå av defineres med feltet tableHeaders. Dette feltet er et objekt. Nøkler i objektet skal tilsvare felter i modellen du har som representerer en rad. I eksempelet over er det ListItem med name, age og profession. Verdiene knyttet til hver nøkkel er teksten som vises i header. For å støtte flere språk kan man bruke referanser til nøkler i språkfilene her. Det er innholdet her som vil stå i header av tabellen. Du må selv sørge for at dataene i tabellen populeres i samme rekkefølge, slik at innholdet i cellene stemmer med header.

Sortering

I layout.json definerer du hvilke kolonner som skal være sorterbare gjennom feltet sortableColumns. Dette er en array av strings, og strings du bruker her må også være en nøkkel i feltet tableHeaders. Dette gjør at de valgte kolonnene får en pil som viser hvilken retning kolonnen er sortert, og kolonnen som styrer sortering nå blir markert. Selve sorteringslogikken må man selv implementere. Metoden GetDataListAsync tar inn parameteren keyValuePairs som inneholder sortDirection og sortColumn til dette formålet. For eksempel direkte i metoden GetDataListAsync slik som gjort i eksempelet over, eller ved å videresende sortDirection.

Paginering

For å definere paginering bruker du feltet pagination som har et objekt som verdi. I dette objektet defineres alternatives som er en array med number som representerer hvilke valg brukeren har for antall rader i listen. I tillegg definerer du default som er default på hvor mange rader som vises i listen. På samme måte som med sortering må pagineringslogikken implementeres slik at riktige data vises, dette gjennom verdiene size og page fra keuValuePairs.

Søk

For at en bruker skal kunne søke i listen/tabellen må man legge til et tekstfelt av typen søk. Dette tekstfeltet knyttes til et felt i datamodellen, og videre bruker man denne verdien i datamodellen til søk. I listekomponenten må man legge til feltet mapping. Den kan se sånn her ut, hvor soknad.navn er et felt i datamodellen:

"mapping": {
    "soknad.navn": "search"
}

Verdien på soknad.navn vil da bli sendt i keyValuePairs med key search. OBS! Dette kan selvfølgelig brukes til andre ting enn søk.

Data lagret i datamodellen

Valgt rad må lagres i datamodellen, hver kolonne/celle må lagres i eget felt i datamodellen. Dette defineres gjennom dataModelBindings:

"dataModelBindings": {
    "name": "SelectedItem",
    "profession": "SelectedItemProfession"
},

Her er SelectedItem og SelectedItemProfession felter i datamodellen, og name og profession er properties i modellen som brukes for å beskrive en rad. I eksempelet som er vist her er det laget en datamodell som representerer en rad, og den ser slik ut:

public class ListItem
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Profession { get; set; }
}

Komponenten i oppsummering

Dersom man ønsker å vise listekomponenten i oppsummering av skjema vil det vises enkelt med kun en verdi fra valgt rad. Dette defineres med property bindingToShowInSummary, og vil se slik ut:

Sikrede datalister

På samme måte som med kodelister kan man for datalister også sikre listene dersom de inneholder sensitive data. Da benytter man interfacet IInstanceDataListProvider, og tillegg må man legge til en secure boolean på komponenten.

Mobilvisning

Tabell i mobilvisning er ganske komprimert, og man kan derfor velge hvilke felter per rad man vil vise på mobil. Det gjør man med feltet tableHeadersMobile som er en array med strings som representerer de headerverdiene man vil vise på mobil.