Søg i Septima Widget K

HTML ​

Tilføj indhold til din hjemmeside ud fra data. Det kan bruges til at vise forklaringer, billeder m.m. på siden ud fra indlæste data.

For at benytte denne kontrol kan der på div-elementet tilføjes en attribut, der fortæller hvilken nøgle, der skal benyttes for at hente de ønskede objekter, der ønskes vist i kortet.

Angiv div-elementet på denne måde: <div data-widget="..." data-widget-key="2277350"></div>, hvor data-widget-key indeholder nøglen.

Dette foregår på samme måde som for kommuneplan funktionen.

Det er ligeledes muligt at angive URL-parameteren widget-key med nøglen (for eksempel widget-key=2277350).

Options ​

Herunder findes en beskrivelse af de enkelte egenskaber, der kan angiver til denne funktion.

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.

html ​

  • Type: string

Angiver den URL, der skal benyttes til at finde et eller flere objekter. I URL'en er det muligt at angive {% raw %}<%= key %> eller <%= filter %>{% endraw %} substitueres de af værdier fra parameteren key eller keyfilter.

host ​

  • Type: string

Angiver den URL, der skal benyttes til at finde et eller flere objekter. I URL'en er det muligt at angive en template, hvor man eksempelvis skriver {% raw %}<%= key %>{% endraw %}, der substitueres de af værdier fra parameteren key.

type ​

  • Type: string
  • Default: geojson

Hvilket format kommer data i. Kan antage en af følgende værdier: "geojson", "esrijson", "json", "djangojson", "datasourcejson" samt "local". Ved "local" søges der i de features, der allerede er tilføjet til kortet.

dataType ​

  • Type: string
  • Default: jsonp

Hvordan returneres data. Kan antage en af følgende værdier: "jsonp" og "json". Brug "json", hvis servicen ligger på samme domæne eller leveres med CORS-header.

paramNames ​

  • Type: object

Det er muligt at angive en række parametre til den URL, der er angivet i host. I dette eksempel kan man enten kalde siden med denne widget med URL-parameteren =?planid=1234. Alternativt kan man på DIV elementet angivet attributten data-widget-planid="1234":

json
"paramNames": {
    "key": "planid"
}

template ​

  • Type: string | object
  • Default: ""

Her angives en html-skabelon for, hvorledes en eventuel tilhørende tekst skal præsenteres. Attributter fra data kan angives i html-skabelonen med følgende notation {% raw %}<%= attributnavn %>{% endraw %}. Læs mere om templates generelt her.

template_feature ​

  • Type: string Default: ""

Her angives en html-skabelon for, hvorledes hver feature, som host returnere, skal præsenteres. Attributter fra hver feature kan angives i html-skabelonen med følgende notation {% raw %}<%= attributnavn %>{% endraw %}. Læs mere om templates generelt her.

activateButton ​

  • Type: object

Aktivér HTML'en vha. en knap i kortet. "activateButton" kan indeholde "title", "className" og "html", der alle er optionelle. De har alle en brugbar default værdi. "title" bruges til at angive en tekst, der vises når musen holdes over knappen. "className" tilføjer en CSS-klasse til selve knappen. "html" erstatter indholdet af kanppen med det, der er angivet her. På denne måde er det muligt f.eks. at skifte ikon på knappen. Her er et eksempel på, hvordan "activateButton" kan angives:

json
"activateButton": {
  "title": "Vis signaturforklaring",
  "className": "my-style",
  "html": "<i class='mdi mdi-format-list-bulleted-type'></i>"
}

buttonIndex ​

  • Type: number
  • Default: 0

Hvis der er flere kompoenter med knapper i kortet, så bliver de tilføjet i en tilfældig rækkefølge. Ved at angive buttonIdex er det muligt at bestemme rækkefølgen. Laveste index kommer først. Hvis to knapper har samme index vil det være tilfældigt hvilken der kommer færst.

reloadInterval ​

  • Type: number

Genindlæs data med et fast interval. Intervallet angives i millisekunder og kan f.eks. bruges til at vise "live" data.

Eksempler ​

Eksempler, der bruger denne komponent: