---
source: cf92b6af918b
---

# Live data koppelen aan pagina's

Heb je een [databron](/nl/features/datasources) ingesteld? Dan is de volgende stap de waarden ervan op een pagina tonen. In de [pagina-editor](/nl/features/page-editor) kan dat op twee manieren:

- **Tekstlagen**: typ `/` in een tekstlaag om een of meer live velden, de tijd, het weer of contextwaarden in te voegen.
- **Groepen**: koppel een groep lagen aan een lijst (een array), zodat de opmaak zich voor elk item herhaalt (bijvoorbeeld vijf komende evenementen, elk op een eigen rij).

## Het idee in één minuut

Een databron bevat gestructureerde data, meestal een JSON-object met velden en arrays. Met koppelen wijs je een laag op je pagina naar een specifiek stukje van die data.

- Een **tekstlaag** kan vaste tekst combineren met een of meer **koppelchips**. Bijvoorbeeld: `Welkom, {firstName}!`, waarbij `{firstName}` een chip is die live wordt ingevuld.
- Een **groepslaag** is een container die zijn onderliggende lagen herhaalt voor elk item in een array. Bijvoorbeeld: een rij voor elke trein in een vertrekoverzicht.

Je typt nooit zelf `{{field}}`-syntax. Druk in een tekstlaag op `/` om het slash-menu te openen, klik door de data heen en kies het veld dat je wilt. Lumicast regelt de rest.

## Een tekstlaag koppelen

![Slash-menu in een tekstlaag](/nl/img/screenshots/page-editor-slash-menu.png)

Je opent het slash-menu in een tekstlaag op twee manieren:

1. **Typ `/`** ergens in de tekst. Het menu opent bij de cursor.
2. **Klik op `Dynamische data toevoegen`** in het onderdeel *Dynamische data* van het rechterpaneel. Lumicast gaat dan voor je de tekstlaag in en opent het menu aan het einde van de bestaande tekst.

Het menu toont alles wat je in de tekst kunt invoegen, in deze volgorde:

| Categorie | Wat erin zit |
|---|---|
| **Databronveld** | Klik door naar elke [databron](/nl/features/datasources) in deze werkomgeving en vervolgens door de JSON-structuur. Bovenaan een databron kun je ook **Laatst bijgewerkt** kiezen: het moment waarop die voor het laatst is opgehaald. |
| **Groepveld** | Alleen zichtbaar als de laag in een [gekoppelde groep](#een-groep-aan-een-lijst-koppelen) staat. Klik door naar de velden van de huidige rij. |
| **Tijd / datum** | Tijd, tijd (12 uur), tijd met seconden, datum, datum + tijd, dag, korte dag, maand, korte maand, jaar. Het voorbeeld toont de live waarde. |
| **Begroeting / Aftellen** | Een begroeting die met het tijdstip meegaat (goedemorgen / goedemiddag / goedenavond) en een teller die aftelt naar (of optelt vanaf) een datum. |
| **Weer** | Temperatuur, gevoelstemperatuur, weersomstandigheden, windsnelheid, luchtvochtigheid, zonsopkomst, zonsondergang, uv-index. Bepaald op basis van de locatie van het scherm. |
| **Groepscontext** | Rijnummer, huidige pagina, totaal aantal pagina's. Alleen binnen een gekoppelde groep. |
| **Context** | Schermnaam, naam van de werkomgeving, organisatienaam. |

Kies een onderdeel en Lumicast voegt op de cursorpositie een **chip** in. De chip toont de live waarde, zowel op het canvas als op het scherm. Vaste tekst rond de chip blijft gewone tekst. Je kunt voor, na of tussen chips typen, en je kunt zoveel chips in één tekstlaag zetten als je wilt.

### Filteren en navigeren met het toetsenbord

Terwijl het menu open is, filter je de zichtbare items door te typen. Met `↑ / ↓` verplaats je de selectie, met `Enter` kies je, met `Backspace` (bij een leeg filter) ga je een stap terug en met `Esc` sluit je het menu zonder je getypte tekst aan te passen.

### Een chip bewerken of verwijderen

Klik op een chip om het **bubbelmenu** te openen:

![Bubbelmenu van een chip](/nl/img/screenshots/page-editor-chip-bubble.png)

Wat je in het bubbelmenu ziet, hangt af van de chip:

- **Databronchips**: tonen de naam van de databron en het veldpad, met een knop **Bewerken** die het slash-menu opnieuw opent vanaf het bovenliggende pad van de chip. Kies een veld op hetzelfde niveau om te wisselen, klik dieper door of ga met **Terug** naar het begin om een heel andere databron te kiezen.
- **Datum- en tijdchips**: kies een standaardnotatie (`HH:mm`, `DD-MM-YYYY`, relatief, …) of kies *Aangepast* en typ je eigen [Day.js-notatie](https://day.js.org/docs/en/display/format).
- **Temperatuur / gevoelstemperatuur**: wissel tussen °C, °F en K.
- **Rijnummer**: wissel tussen nummering vanaf 0 en vanaf 1.
- **Laatst bijgewerkt**: kies een notatie voor het moment waarop de databron voor het laatst is opgehaald.
- **Aftellen**: kies de doeldatum, een lange of korte stijl, welke eenheden je toont en of de teller na de doeldatum doortelt.
- **Schermnaam / naam werkomgeving / organisatienaam, huidige pagina, totaal aantal pagina's**: alleen een label, niets in te stellen.

Wil je een chip verwijderen? Selecteer hem (klik erop) en druk op **Delete** of **Backspace**. Chips zijn ondeelbaar: je kunt er niet in typen.

### Chips opmaken

Een chip neemt het lettertype, de grootte, het gewicht, de kleur en eventuele andere [transformaties](/nl/features/page-editor#transformaties) over van het tekstdeel waarin je hem hebt ingevoegd. Je kunt een chip ook later anders opmaken: selecteer hem en pas in het rechterpaneel lettertype, kleur, vet of cursief toe, net als bij gewone tekst.

### Een array van tekstwaarden koppelen

De meeste databronvelden bevatten één waarde, maar sommige zijn **arrays van tekstwaarden** (bijvoorbeeld een lijst met tags). Kies je zo'n veld, dan voegt de chip de items standaard samen met `, `.

Gebruik voor arrays van **objecten** (bijvoorbeeld een lijst met evenementen) een [groep](#een-groep-aan-een-lijst-koppelen). Eén chip kan geen meerdere rijen met objectdata tonen.

### De waarde opmaken

In het onderdeel *Tekst* van het rechterpaneel vind je **Teksttransformaties**. Transformaties gelden voor het tekstdeel waarop ze staan (dus voor gewone tekst *én* voor chips daarin). Zie [Transformaties](/nl/features/page-editor#transformaties) voor het volledige overzicht.

Datum- en temperatuurchips hebben in het bubbelmenu hun eigen instellingen voor notatie en eenheid. Een extra transformatie is daar meestal niet nodig.

## Een groep aan een lijst koppelen

![Herhaalinstellingen van een groep](/nl/img/screenshots/page-editor-group.png)

Gebruik een groep als je een **lijst** wilt tonen: komende vergaderingen, treinvertrekken, de rijen van een ranglijst of items op een menukaart.

Een groep voeg je niet als element toe. Je maakt hem door bestaande lagen te selecteren en te groeperen. De werkwijze: ontwerp één rij, groepeer die, koppel de groep aan een array en wijs dan elke laag naar het juiste veld van het huidige item.

### 1. Bouw één rij

Voeg de lagen toe die samen één rij van je lijst vormen. Voor een vertrekbord is dat meestal een tekstlaag voor de tijd, een voor de bestemming en eventueel een voor het spoor. Geef ze de grootte en opmaak die één rij moet krijgen.

### 2. Groepeer de lagen

Selecteer alle lagen van die rij (shift-klik ze op het canvas of in het lagenpaneel) en **groepeer** ze. De groep verschijnt als nieuwe bovenliggende laag in het lagenpaneel.

### 3. Koppel de groep aan een array

1. Selecteer de **groep** zelf (klik erop in het lagenpaneel, of op de rand ervan op het canvas).
2. Klik in het rechterpaneel, in het onderdeel *Databron verbinden*, op **Databron verbinden**.
3. Kies een databron en selecteer een **array** in de JSON-structuur, bijvoorbeeld `departures` in een NS-databron. Hier kun je alleen arrays en objecten selecteren; een groep kun je niet aan één losse waarde koppelen.
4. Klik op **Wijzigingen toepassen**.

Lumicast herhaalt nu alles in de groep, één keer voor elk item in die array.

### 4. Wijs elke laag naar het juiste veld

Nu de groep gekoppeld is, moet elke laag erin weten welk veld van het huidige item hij toont: de tijd van deze rij, de bestemming van deze rij, enzovoort.

1. Klik in een tekstlaag **binnen** de groep.
2. Typ `/` om het slash-menu te openen.
3. Kies **Groepveld**. De kiezer opent met de structuur van **één item** uit de array van de groep.
4. Kies het veld dat je wilt (bijvoorbeeld `time`, `destination`, `platform`).

Elke herhaalde rij krijgt automatisch zijn eigen data. Je hoeft geen rijen te nummeren of indexen te schrijven. Is de groep gekoppeld aan `departures` en leest een laag `destination`, dan toont elke rij de bestemming van die rij.

::: tip Databronveld of groepveld
- **Databronveld**: kiest uit een hele databron. Op elke rij dezelfde waarde. Gebruik het voor kopteksten, totalen of labels buiten de groep.
- **Groepveld**: kiest uit het item van de huidige rij. Gebruik het voor alles wat per rij moet verschillen. Alleen zichtbaar als de laag in een gekoppelde groep staat.
:::

### Bepalen hoe de groep herhaalt

Zodra de groep gekoppeld is, toont hetzelfde onderdeel *Databron verbinden* de instellingen die bepalen hoe de lijst wordt opgemaakt:

| Instelling | Wat het doet |
|---|---|
| **Richting** | Rijen onder elkaar of naast elkaar plaatsen |
| **Tussenruimte (px)** | Ruimte tussen de items, in pixels |
| **Items** | Hoeveel items er tegelijk te zien zijn. Leeg toont ze allemaal |
| **Stap** | Hoeveel items de groep per keer doorschuift. Leeg schuift een hele pagina door (de waarde bij **Items**) |
| **Overslaan** | De eerste N items overslaan |
| **Cyclusinterval (s)** | Aantal seconden voordat de groep doorschuift naar de volgende items. Leeg of `0` schuift niet door |
| **Rondom herhalen** | Alleen zichtbaar als er een cyclusinterval is ingesteld. Vult de laatste pagina aan met items van het begin van de lijst, in plaats van hem half leeg te laten |

**Cyclusinterval (s)** is handig als je meer items hebt dan er op het scherm passen. Is er in een groep ruimte voor 5 rijen maar bevat de data 30 items, zet **Items** dan op 5 en het cyclusinterval op (bijvoorbeeld) 8 seconden. De groep toont dan items 1–5, daarna 6–10, daarna 11–15, enzovoort, en begint na de laatste pagina weer opnieuw.

### Variabelen voor groepscontext

Staat een laag in een gekoppelde groep, dan verschijnen er drie extra onderdelen in het slash-menu:

| Chip | Wat het toont |
|---|---|
| **Rijnummer** | Het nummer van de huidige rij (in het bubbelmenu te wisselen tussen nummering vanaf 0 en vanaf 1) |
| **Huidige pagina** | Het nummer van de huidige pagina als er een *Cyclusinterval (s)* is ingesteld (1, 2, 3…) |
| **Totaal aantal pagina's** | Het totale aantal pagina's als er een *Cyclusinterval (s)* is ingesteld |

Typisch gebruik van deze cyclusvariabelen: een klein label met `Pagina 2 van 6`. Een tekstlaag met een van deze chips verschijnt één keer en wordt niet op elke rij herhaald.

## Praktijkvoorbeelden

### Weerkop

Een tekstlaag met: `Het is <weersomstandigheden> en <temperatuur> in <stad>`.

- `<weersomstandigheden>`: slash-menu → *Weersomstandigheden*.
- `<temperatuur>`: slash-menu → *Temperatuur* (wissel de eenheid in het bubbelmenu van de chip).
- `<stad>`: slash-menu → *Databronveld* → je weerdatabron → `name`.

### Vertrekbord voor treinen

Een **groep** gekoppeld aan `departures` (de array met de volgende treinen). In de groep staan drie tekstlagen:

- Tijd: slash-menu → *Groepveld* → `plannedDateTime`. Klik op de chip → notatie `HH:mm`.
- Bestemming: slash-menu → *Groepveld* → `direction`.
- Spoor: slash-menu → *Groepveld* → `plannedTrack`.

Herhaalinstellingen van de groep: *Richting* verticaal, *Items* 6, *Cyclusinterval (s)* 10.

### Overzicht van vergaderruimtes met paginateller

Een groep gekoppeld aan `rooms`, met een cyclusinterval zodat alle ruimtes in pagina's voorbijkomen.

- In de groep: een tekstlaag met een chip *Groepveld* → `name`.
- Ook in de groep: een kleine tekstlaag met twee chips, *Huidige pagina* en *Totaal aantal pagina's*, met de vaste tekst `Pagina` / `van` eromheen. Die verschijnt één keer, niet op elke rij.

## Controleren of het werkt

Pagina's zijn altijd live: zodra je een chip invoegt, toont het canvas de echte waarde. Klopt er iets niet?

- Klik op de chip om het bubbelmenu te openen en controleer of hij naar de juiste plek wijst.
- Controleer of je **Groepveld** (en niet Databronveld) hebt gebruikt voor alles wat per rij moet verschillen.
- Open **Data koppelingen** en bekijk de status van de laatste update van de databron. Mislukt het ophalen, dan blijft de chip leeg.