Template

En template er en måde at styre den måde, data præsenteres eller transformeres på. Data har nogle attributter, og man vil gerne sammenstille disse attributter på en bestemt måde. Dette kan gøres med en template. Indholdet fra templaten kan f.eks. indsættes i en tom gemmensigtig <div>, og man kan dermed selv bestemme farver med mere.

For at få fat i en attribut fra data, benyttes <%= attributnavn %>. Det kunne f.eks. benyttes på denne måde:

html

<%= fornavn %> <%= efternavn %>

Hvilket tager værdierne fra attributterne "fornavn" og "efternavn", og adskiller dem med et mellemrum - for eksempel "Peter Petersen".

Da templates benyttes til at danne HTML med, kan man med fordel benytte sig af HTML kode i sin template. Her er et eksempel:

html

<strong><%= fornavn %></strong> <%= efternavn %>

Hvilket giver "<strong>Peter</strong> Petersen".

Man kan altså indsætte lige den HTML, man har lyst til herunder <br/>, <div> osv.

I Septima Widget er der nogle standard CSS-klasser, som man kan benytte sig af. Det kan for eksempel bruges til at tilføje en overskrift. Her er et simpelt eksempel, der vil kunne bruges i langt de fleste tilfælde:

html

<div class='widget-hoverbox-title'><%= navn %></div>
<div class='widget-hoverbox-sub'>
  <div><%= adresse %>, <%= postnr %> <%= by %></div>
  <div><a target='blank' href='<%= link %>'>Hjemmeside</a></div>
</div>

Bemærk

Hvis din konfiguration er en JSON-fil, så skal du bruge ' i stedet for " omkring attributværdierne i din HTML

Ovenstående syntaks er fra https://ejs.co/ hvor der kan læses mere om templates.

Template fra fil

En template angives typisk direkte i konfigurationen til en Widget. Men det er også muligt at placere indholdet til en template i en fil. Det gøres ved at tilføje en følgende oplysninger i stedet for den tekst, som man ellers ville angive som sin template som f.eks. her:

json

"template_info": {
  "url": "https://widget.cdn.septima.dk/3.14.10/data/templates/info19.html"
},

Fordelen ved at have templaten i en fil er dels at den er nemmere at overskue, specielt når den bliver mere kompleks. Men det er samtidig også nemmere at genbruge på tværs af konfigurationer. Det eneste krav er at browseren kan indlæse filen når den skal bruges.

Se et fungerende eksemple her.

Hvis templaten indeholder json til en Foruddefineret template, angives "dataType": "json" som her:

json

"template_info": {
  "url": "https://widget.cdn.septima.dk/3.14.10/data/templates/layerswitch46.json",
  "dataType": "json"
},

Se et fungerende eksemple her.

Parametre

Når en fil benyttes på denne måde, er det også muligt at angive en liste af parametre, der bliver tilgængelige for templaten. Dette kan gøre det nemmere at genbruge templates til flere ting. Dette er typisk hvis en template er næsten identisk, men med nogle få forskelle. Ved at bruge params som vist herunder, kan parametrene være med til at styre de små forskelle. Det kan f.eks. være en overskrift, der skal være afhængig af situationen.

json

"template_info": {
  "url": "https://widget.cdn.septima.dk/3.14.10/data/templates/info19.html",
  "params": {
    "heading": "Min overskrift"
  }
},

I templaten er alle parametre tilgængelige under _params som vist herunder:

html

<h1><%= _params.heading %></h1>

Foruddefinerede templates

For at gøre det nemmere at definere en template uden kendskab til HTML og CSS, findes der i Septima Widget en mulighed for at benytte nogle foruddefinerede templates namedtemplate. Fælles for alle foruddefinerede templates, er at konfigurationen til dem kan være den samme. Man skal blot definere hvordan overskriften skal vises, semt hvilke felter, der ellers skal vises. Herunder ses et eksemple på det.

json

"template_info": {
  "namedtemplate": "#popup001",
  "title": "navn",
  "includeAttr": [
    "adresse+', '+postnr+' '+by", 
    {
      "type": "link",
      "title": "Læs mere",
      "name": "hjemmeside"
    }
  ]
}

I eksempler herover angives navnet på den foruddefinerede template #popup001, hvilken attribut, der indeholder title samt en liste med hvilke andre felter, der skal vises. Det kan angives som en streng som her: "Adresse+', '+Postnr+' '+By" hvilket gør det muligt at angive ledetekster, enheder mv. omkring teksten. Hvis man vil have et klikbart link, skal det angives som vist i ovenstående.

Følgende foruddefinerede templates findes:

#card001
#card002

Begge kan bruges i både Info og Table. Find eksempler ved at søge på navnet på templaten, f.eks. "card001".

Fordelen ved de foruddefinerede templates er at det er nemt at overskie hvad der bliver vist. Ulempen er dog at det er begrænset hvad du kan.

Se et fungerende eksemple med en popup, der bruger en foruddefineret template her. Den samme template kan dog også bruges til listevisning, dog skal der tilføjes lidt CSS som det er gjort i eksemplet her.

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

namedtemplate

Type: string

Kan være #card001 eller #card002. Er ikke valgt som default.

title

Type: string

Angiv hvad overskriften skal indeholde. Ved at angive "attributnavn" vises værdien fra kolonne som overskrift. Det er også muligt at kombinere to eller flere kolonner samt tilføje en tekst som f.eks. her:

json

  "title": "'Navn: ' + fornavn + ' ' + efternavn",

subtitle

Type: string

Mulighed for at angive hvad der skal stå som "underoverskrift" på sammen måde som title.

image

Type: string

Kan angives hvis der ønskers et billede vist. Bemærk at det skal være en komplet URL, der kan komme direkte fra data eller den kan opbygges på samme måde som title med en kombination af en tekst og kolonner fra data.

icon

Type: string | object

Det er muligt at få vist et ikon. Det kan enten være et ikon, der hentes som et billede fra en URL som her:

json

"icon": "https://septima.dk/myicon.png"

Men det er også muligt at få et ikon, der er dannet ud fra en features_style på samme måde som en legendConfig som her:

json

"icon": {
  "style": {
    "geometryType": "Point",
    "namedstyle": "#parking"
  }
}

cssicon

Type: object

Det er muligt at få vist et vilkårligt ikon fra Google Icons. Find det ikon, der ønskes benyttet og find navnet på det. Herefter indsættes det som vist herunder:

json

"cssicon": {
  "name": "'home'",
  "size": "'1.5rem'",
  "type": "'Icons Rounded Filled'",
  "color": "antalborn < 700 ? '#017786' : 'black'"
}

Bemærk at alle værdier kan være styret af data, som f.eks. color er i ovenstående eksempel.

includeAttr

Type: array

Den simple måde at få vist indholdet af nogle kolonner fra data. Angiv en liste med kolonner, der skal vises.

Men det er også muligt at angive en mere sammensat liste af kolonner ved f.eks. at angive flere kolonner på denne måde:

json

"includeAttr": [
  "vejnavn + ' ' + husnummer",
  "postnr + ' ' + by"
]

Derudover er det også muligt at angive et objekt, der beskriver hvad indholdet er. Dette objekt giver flere muligheder når man f.eks. skal vise links eller kun vil vise en kolonne hvis et bestemt forhold er gældende. Herunder ses et eksempel:

json

"includeAttr": [
  {
    "condition": "breddegrad && laengdegrad",
    "type": "link",
    "icon": "public",
    "title": "'Find vej (Google Maps)'",
    "name": "'https://www.google.dk/maps/search/' + breddegrad + '+' + laengdegrad"
  }
]

Herunder beskrives hvilke egenskaber dette objekt kan have:

condition - Default er true. Angiv et udtryk, der skal være opfyldt før denne oplysing vises.
icon - Ikon fra Google Icons. Bemærk at navnet skal sættes direkte ind og kan ikke være afhængig af data.
name - Værdien, der skal vises.
tag - Default er div, men det kan bruges til at gøre HTML'en mere semantisk korrekt.
type - Default er text, men kan også være link, når det man gerne vil vise er et link
title - Benyttes kun når type er link. Vædien er den tekst, der står på linket.
target - Benyttes kun når type er link. Default er _self memn kan også være _blank eller et vilkårligt navn. Hvis den er noget andet end _self, åbnes linket i et nyt vindue.

auto

Type: boolean
Default: false

Kan sættes til true for at vise alle kolonner fra data.

includeAttr

Type: array

Benyttes kun hvis auto er sat til true. Benyttes til at fortælle, hvilke kolonner, der ikke skal vises.

Hjælpefunktioner

Når man benytter en template, kan alle globale JavaSript funktioner på ens side anvendes. Det kan f.eks. være replace på en tekst eller funktioner som 'window.location'. Derudover findes der enkete indbyggede hjælpefunktioner, der kan gøre genereringen af templates nemmere. Herunder kan du læse om de indbyggede funktioner.

_getRandomColor (opacity, key)

Denne funktion kan f.eks. bruges til at danne en style med tilfældige farver. Som her:

json

"fillcolor": "<%= _getRandomColor() %>"

Funktionen returnerer en RGBA farve på denne form: rgba(255,0,0,1).

opacity

Type: number
Default: 1

For at styre gennemsigtigheden på farven, er det muligt at angive en opacity, der kan have en værdi mellem 0 og 1. Resultatet bliver at opacity i RGBA farven ændres. Her er et eksempel:

json

"fillcolor": "<%= _getRandomColor(0.6) %>"

key

Type: string

Hvis man gerne vil bruge den samme tilfælge farve flere steder, f.eks. alle features med en bestemt egenskab. Det kunne f.eks. være at alle ejendomme med samme BFE nummer, skal have samme farve. Dette gøres ved at angive en hvilken attribut, der styrer om to features skal have den samme farve:

json

"fillcolor": "<%= _getRandomColor(1, bfe) %>"

Hvis to features har det samme BFE nummer, så vil de nu få den samme farve.

_formatJSON (data)

Hvis ens template bruges til at danne en JSON, som f.eks. ved features-template og data allerede indeholder noget af den JSON, som man ønsker at benytte, kan man bruge _formatJSON til at formatere data korrekt. I dette tilfælde er det geometrien, der ligger direkte på data:

json

"features_template": "{ 'type': 'Feature', 'properties': { 'source': 'cvr', 'type': 'produktionsenhed','id': '<%= pnummer %>', 'navn': '<%= navn %>'}, 'geometry': <%= _formatJSON(geometri) %>}",

_formatArea (area, decimals, locale)

Hvis man står med et areal og gerne vil have det nemt formateret, kan denne funktion benyttes. Funktionen returnerer et objekt, der har area og unit. Det kan bruges til at vise arealet på en læsbar måde.

Brug decimals til at angive hvor mange decimaler arealet skal vises med.

Benyt locale til at styre hvordan f.eks. komma og tusindtalsseparator vises. Default er da-DK.

Dette er både til at vise i en Info-boks, men det kan også bruges til labels i kortet. Når en polygon vises i kortet, er det muligt at benytte _area som label. Det kan gøres på denne måde:

json

  "text": "<% if (_area) { const resp = _formatArea(_area); print(resp.area + resp.unit); } %>"

_formatDistance (length, decimals, locale)

Hvis man står med et afstand og gerne vil have det nemt formateret, kan denne funktion benyttes. Funktionen returnerer et objekt, der har distance og unit. Det kan bruges til at vise en afstand på en læsbar måde.

Brug decimals til at angive hvor mange decimaler afstanden skal vises med.

Benyt locale til at styre hvordan f.eks. komma og tusindtalsseparator vises. Default er da-DK.

Dette er både til at vise i en Info-boks, men det kan også bruges til labels i kortet. Når en linje vises i kortet, er det muligt at benytte _length som label. Det kan gøres på denne måde:

json

  "text": "<% if (_length) { const resp = _formatDistance(_length); print(resp.distance + resp.unit); } %>"

_formatTime (seconds, locale)

Hvis man står med et antal sekunder og gerne vil have det nemt formateret, kan denne funktion benyttes. Funktionen returnerer et objekt, der har h (timer), m (minutter) og s (sekunder). Det kan bruges til at vise tid på en læsbar måde.

Benyt locale til at styre hvordan f.eks. komma og tusindtalsseparator vises. Default er da-DK.

_transform (geojson, options)

Har samme interface som transform i WidgetAPI. Kan bruges til at transformerer en geometri til en anden projektion. Det kan f.eks. være i forbindelse med links til Google Maps.

data

Type: object

Data skal være et JSON object.

Layer

Template ​

Template fra fil ​

Parametre ​

Foruddefinerede templates ​

namedtemplate ​

title ​

subtitle ​

image ​

icon ​

cssicon ​

includeAttr ​

auto ​

includeAttr ​

Hjælpefunktioner ​

_getRandomColor (opacity, key) ​

opacity ​

key ​

_formatJSON (data) ​

_formatArea (area, decimals, locale) ​

_formatDistance (length, decimals, locale) ​

_formatTime (seconds, locale) ​

_transform (geojson, options) ​

data ​

Template

Template fra fil

Parametre

Foruddefinerede templates

namedtemplate

title

subtitle

image

icon

cssicon

includeAttr

auto

includeAttr

Hjælpefunktioner

_getRandomColor (opacity, key)

opacity

key

_formatJSON (data)

_formatArea (area, decimals, locale)

_formatDistance (length, decimals, locale)

_formatTime (seconds, locale)

_transform (geojson, options)

data