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

position ​

  • Type: string
  • Default: undefined

Gør det muligt at placeringen af listen i forhold til kortet. Som default placeres listen som et element uden for kortet. Her kan man selv styre placeringen vha. CSS. Men det er også muligt nemt at få placeret listen ved siden af kortet når der er plads til det. Det gøres ved at sætte position til enten right eller left for at placere listen automatisk til hhv. højre eller venstre. Derudver sørger Widget for at lave listen med horisontal scroll under kortet når der ikke er så meget plads.

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 &lt;h1&gt;<%= name %>&lt;/h1&gt; 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
}

hover ​

  • Type: boolean
  • Default: true

Som default er Hover effekt tilføjet til listen. Det betyder at rækken i listen får en markering når musen føres over rækken. Dette kan slås fra ved at sætte hover til false.

click ​

  • Type: boolean
  • Default: true

Som default er det muligt at klikke på en række i listen og række vælges. Dette kan slås fra ved at sætte click til false.

clickToggle ​

  • Type: boolean
  • Default: false

Når man klikke på en række, der allerede er valgt i listen, så fravælges elementet i listen og i kortet.

zoomOnClick ​

  • Type: boolean
  • Default: true

Skal der zoomes i kortet, når man klikker i listen (kun aktuel, når kortet er vist). Dette kræver at click er true.

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.

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: