Søg i Septima Widget K
Listevisning
Vis data som en liste. Det er specielt anvendeligt hvis man gerne vil gøre sine data tilgængelig for synsbesværede og andre handicappede. Hvis listen vises sammen med et kort, er der interaktion mellem listen og kortet. Det betyder at når brugeren klikker på et objekt i kortet, scolles der til objektet i listen og der kommer en markering i listen. Hvis man klikker i listen, zoomes der til objektet i kortet.
Options
Herunder findes en beskrivelse af de enkelte egenskaber, der kan sættes på funktionen.
disable
- Type:
boolean
- Default:
false
Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol.
detach
- Type:
string
Angiv en reference til et alternativ html-element, som denne kontrol skal vises i. Det kan benyttes til at placere indholdet af en kontrol et andet sted på sin side. Hvis detach har værdien "abc"
, så skal der tlføjes et element til HTML'en på denne form: <div data-widget-detach="abc"/>
. Hvis elementet ikke findes, så fungerer kontrollen, som hvis detach ikke var angivet.
css
- Type:
string | string[]
Angiv en sti til en css-fil, der skal loades efter denne kontrol. Herved vil det være muligt at lave en brugertilpasset style af kontrollen.
className
- Type:
string
Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden.
title
- Type:
string
Gør elementet mere tilgængeligt
showlist
- Type:
boolean
- Default:
true
Kan sættes til false
hvis funktionalitet omkring listevisningen vil bibeholdes, men selve listen skal være skjult. Det er f.eks. til download af CSV fil.
showheader
- Type:
boolean
- Default:
false
Skal der vises en overskrift for listen. Hvis der er flere lister, kommer der en overskrift for hver liste. Hvis listen er tom, skjules overskriften.
Som default vises lagets "navn" (der der er angivet i "name"). Hvis man ønsker en alternativ overskrift, kan det styres ved at tilføje template_table_header
til laget ellse ved at angive showheaderTemplate
her. I denne template kan man skrive en fast tekst/HTML, som vises over listen.
Hvis man ønsker at få vist antallet af rækker i listen i overskriften, skal man blot tilføje et HTML-element med class='widget-table-header-count'
til template_table_header
/showheaderTemplate
. Indholdet af dette element vil blive erstattet af et tal, der siger hvor mange rækker der er vist.
showheaderTemplate
- Type:
string
Hvis showheader
er angivet, er det her muligt at angive en alternativ måde overskriften skal vises på. Templaten bliver kaldt med alle parametre fra laget. Det betyder at man f.eks. kan agive {% raw %}<h1><%= name %></h1>
{% endraw %} for at få vist en overskrift med et H1 element. Men det er herved også muligt at indsætte ikoner og meget mere.
showheaderCollapsed
- Type:
boolean
Kan bruges når showheader
er true
. Hvis den er angivet, vil det være muligt for brugeren at folde de enkelte lister sammen. Hvis showheaderCollapsed
er true
er listerne foldet sammen fra start, mens de er foldet ud hvis showheaderCollapsed
er false
. Som default er det ikke muligt for brugeren at folde listerne sammen.
showheaderCollapsedAccordion
- Type:
boolean
- Default:
false
Kan bruges når showheader
er true
og showheader
er angivet. Hvis showheaderCollapsedAccordion
er true
, vil de enkelte lister fungere som en accordion. Det betyder at der kun vises én liste ad gangen. Når brugeren folder en liste ud, så foldes de andre sammen.
updateHeaderOnFilterChange
- Type:
boolean
- Default:
false
Kan bruges når showheader
er true
og template_table_header
er angivet på laget. Hvis updateHeaderOnFilterChange
er true
, vil templaten blive kaldt hver gang filteret opdateres. Herved kan overskriften på listen være afhænig af det aktuelle filter.
downloadCSV
- Type:
boolean | string
- Default:
false
Kan bruges når showheader
er true
. Vis en download-knap i overskriften for en liste. Når brugeren trykker på knappen, så hentes data som en CSV-fil. Hvis downloadCSV
er en tekst, så vil teksten blive vist på knappen i stedet for det ikon, der default vises.
download
- Type:
object
Download funktionen gør det muligt at hente data som CSV eller PDF (tabelform) og konfigureres som et objekt med forskelige parametre. Hvis man blot vil have en knap, der downloader data som CSV, så tilføjes:
json
"download": {
"type": "csv",
"button": true
}
Kanppen tilføjes i overskriften over listen og kræver derfor at showheader
er true
.
Men det er også muligt at angive:
button
- kan have værdien true
hvorved der vises en knap med et ikon. Hvis button
er en tekst, så vil teksten blive vist på knappen i stedet for det ikon, der default vises.
filename
- navnet på den fil, der hentes. Default er det, der er angivet i name
på laget, men ellers liste
.
type
- pt. understøttes csv
og pdf
. csv
er default.
seperator
- for "type": "csv"
, hvilken seperator skal benyttes. Default er ,
.
onLoad
- Downloader data med det samme. Det bruges typisk hvis en widget tilføjes dynamisk eller hvis en widget er skjult fra start.
format
- for "type": "pdf"
, hvilket format pdf-dokumentet skal have. Det kan f.eks. være a4
.
orientation
- for "type": "pdf"
, landscale
eller portrait
.
json
"download": {
"button": true,
"filename": "liste",
"format": "csv",
"seperator": ",",
"onLoad": false
}
zoomOnClick
- Type:
boolean
- Default:
true
Skal der zoomes i kortet, når man klikker i listen (kun aktuel, når kortet er vist).
zoomOnMapClick
- Type:
boolean
- Default:
false
Skal der zoomes i kortet, når man klikker på en feature i kortet.
mapFilter
- Type:
boolean
- Default:
false
Skal listen kun vise de features, der er synlige i kortet (kun aktuel, når kortet er vist).
emptyText
- Type:
string
Den tekst, der vises hvis listen er helt tom. Som default vises der ikke noget og listen er ofte også altid synlig. Men hvis man bruger filter
eller mapFilter
så kan der opstå situationer hvor listen ikke viser noget.
clickToggle
- Type:
boolean
- Default:
false
Når man klikke på et element, der allerede er valgt i listen, så fravælges elementet i listen og i kortet.
scrollToMap
- Type:
boolean
- Default:
false
Når man klikke på et element i listen, så scrolles der til kortet, så man kan se, hvad der er klikket på. Dette er specielt anvendeligt, når listen ligger under eller over kortet.
tabindex
- Type:
boolean
- Default:
false
Sæt til true
hvis man skal kunne tabulere sig frem og tilbage i listen. Dette gør at der kommer en "outline" på listeelementet når det kommer i fokus. Dette kan gøre listen mere tilgængelig.
zoomOptions
- Type:
object
Hvis angivet, så zoomes der til objektet når det er valgt. Det er muligt at angive, hvordan der skal zoomes til objektet i kortet. Læs mere om zoomOptions her.
countSelector
- Type:
string
Angiv en selector, der vælger det element, hvor det samlede antal viste rækker i tabellen, skal sættes ind i. Det kan f.eks. være "countSelector": "#count-placeholder"
.
Eksempler
Eksempler, der bruger denne komponent: