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:

"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.

"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:

• Data fra Excel listeintet kortexcel

  Det er muligt at læse en Excel fil direkte og få data vist. Hvis geometrien findes i en kolonne i form af WKT eller to kolonner med hhv. x og y, kan det benyttes til at få vist i et kort

• Filter uden kort filterlisteintet kort

  Hvis en liste med oplysninger er lang, kan det godt være uoverskuelige at finde det, man søger. Med filtre kan brugeren nemt finde frem til det ønskede uden brug af kort.

• Kommuneplan liste listevisning

  Vis en liste med kommuneplaner og få et link til visning af yderligere oplysinger

• Listevisning listeinfo

  Få vist en tabel med data. Data kan for eksempel komme fra din egen service eller fra en offentlig tjeneste. Tabellen kan knyttes til et kort, så de samme data vises i kortet og i tabellen. Der er interaktion mellem kortet og tabellen, så det er muligt at klikke på en række i tabellen og zoome hen til objektet i kortet.

• Listevisning eksempel listezoom

  Listevisningen er stylet på en alternativ måde, der gør det nemmere at vise mange data men samtidig have overblikket.

• Listevisning med info listeinfo

  Brug listevisningen i kombination med info - men med forskellg indhold

• Listevisning med knap liste

  I listen vises en knap, som man skal trykke på for at zoome og markere objektet i kortet. Ved at bruge en knap, øger det tilgængeligheden på siden, og gør det nemmere at navigere for personer, der ikke kan bruge en mus. Det er dog stadig muligt at klikke på en feature i kortet og få den markeret i listen.

• Listevisning med lokalplaner listeplaner

  Få vist en liste med lokalplener hentet direkte fra Plandata.dk. Tabellen kan knyttes til et kort, så de samme data vises i kortet og i tabellen. Der er interaktion mellem kortet og tabellen, så det er muligt at klikke på en række i tabellen og zoome hen til objektet i kortet.

• Listevisningen afhængig af zoom liste

  Vis én liste når man er zoomet langt ud og en anden når man er zoomet langt ind.

• Standard visning af lister liste

  Nem måde at få en pæn visning en liste

• Standard visning af lister liste

  Nem måde at få en pæn visning en liste

• Tilgængelig listevisning listetilgængelighed

  Gør listevisningen tilgængelig ved at tilpasse template og CSS til det aktuelle formål

• Widget uden kort listeintet kort

  Med Septima Widget er det muligt at oprette widgets, der ikke indeholder kort, men alligevel bruge de bagvedliggende data.