Template

En template er en måde at styre den måde, data pæ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:

<%= 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:

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

<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 underscore.js 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:

"template_info": {
  "url": "https://widget.cdn.septima.dk/3.8.4/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 er 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.

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

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

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

"template_info": {
  "namedtemplate": "#popup001",
  "title": "navn",
  "includeAttr": [
    "Adresse+', '+Postnr+' '+By",
    {
      "type": "link",
      "title": "Læs mere",
      "name": "SE_MERE"
    }
  ]
}

I eksempler herover angives navnet på den foruddefinerede template (der findes pt. kun den ene) #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.

Fordeln 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 er 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.

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:

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

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

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

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

_formatArea (area, decimals)

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.

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:

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

_formatDistance (length, decimals)

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.

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:

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

data

• Type: object

Data skal være et JSON object.