Binding Live Data to Pages

Once you've set up a Data Source, the next step is showing its values on a page. This guide covers the two ways to do that in the Page Editor:

• Text layers — insert one or more live fields into a block of text
• Groups — repeat a layout for each item in a list (e.g. show 5 upcoming events, one row per event)

The idea in one minute

A data source holds structured data — usually a JSON object with fields and arrays. Binding is how you point a layer on your page at a specific piece of that data.

• A text layer can mix static text with one or more live fields. Example: "Welcome, {firstName}!"
• A group layer is a container that repeats its children over an array. Example: show a row for every train in a departures list.

You never type syntax by hand. You click a button, browse the data in a tree view, and pick the field you want. Lumicast handles the rest.

Binding a text layer

1. Select a text layer on the canvas.
2. In the right panel, find the Datasource section.
3. Click + Insert Field. A picker opens.
4. Choose a data source from the dropdown at the top.
5. Browse the JSON tree and click the field you want to display. The Selected Path input shows the path (e.g. forecast.today.temperature).
6. Check the preview at the bottom of the modal — it shows the live value this field currently resolves to.
7. Click Insert.

The field gets inserted at your cursor position inside the text layer. You can type static text around it, add more fields, and style everything normally.

Mixing static text and fields

You can insert as many fields as you want into the same text layer and mix them with plain text:

Hello {firstName}, the weather in {city} is {condition}.

Each inserted field appears as a small card below the text input, so you can see at a glance what the layer is bound to, edit the path, or remove it.

Binding an array of strings

If the field you pick is an array of strings (e.g. a list of tags), the picker shows an Array Separator option. This is the character used to join the items into one string.

Common choices:

Separator	Result
, (default)	news, sports, weather
•	news • sports • weather
\n (newline)	One item per line

For arrays of objects (e.g. a list of events), use a Group instead.

Formatting the value

Under the Datasource section, the Transformers section lets you reshape the value before it's shown. See Transformers for the full list — common ones are Date format (for turning a timestamp into HH:mm), Uppercase, and Max length.

Binding a group to a list

Use a group when you want to display a list of things — upcoming meetings, train departures, leaderboard rows, menu items.

A group isn't an element you add; it's created by selecting existing layers and grouping them. The workflow is: design one row, group it, bind the group to an array, then point each layer at the right field on the current item.

1. Build one row

Add the layers that make up a single row of your list. For a departures board that's typically a text layer for the time, another for the destination, and maybe one for the platform. Size and style them as you want a single row to look.

2. Group the layers

Select all the layers for that row — shift-click them in the canvas or layers panel — and group them. The group appears as a new parent in the layers panel.

3. Bind the group to an array

1. Select the group itself (click it in the layers panel, or its edge in the canvas).
2. In the right panel, click Bind Group Datasource.
3. Pick a data source and select an array in the JSON tree — for example, departures in an NS data source. Only arrays and objects are selectable here; you can't bind a group to a single value.
4. Confirm.

Lumicast now repeats everything inside the group, once per item in that array.

4. Point each layer at the right field

With the group bound, each layer inside it needs to know which field of the current item to show — the time for this row, the destination for this row, etc.

1. Select a text layer inside the group.
2. In the Datasource section you'll see a second button: + Insert Group Field (shown in green).
3. Click it. The picker opens, but now the tree shows the structure of one item from the group's array.
4. Pick the field you want (e.g. time, destination, platform).

Each repeated row automatically gets its own data — you don't have to number the rows or write indexes. If the group is bound to departures and a layer reads destination, each row shows that row's destination.

Which button to use

• Insert Field (primary colour) — picks from the whole data source, same value on every row. Use for headers, totals, or labels.
• Insert Group Field (green) — picks from the current row's item. Use for anything that should change per row.

Controlling how the group repeats

With the group selected, the Repeat Settings control how the list is laid out:

Setting	What it does
Direction	Stack rows vertically or lay them out horizontally
Gap	Space between items (px)
Items	Maximum number of items to show
Skip	Skip the first N items
Step	Only show every Nth item (e.g. step 2 shows 1st, 3rd, 5th…)
Cycle interval	Rotate through items over time in pages, in seconds
Wrap around	When cycling, jump back to the start after the last page

Cycle interval is useful when you have more items than fit on screen. If a group has room for 5 rows but the data has 30 items, set the cycle interval to (for example) 8 seconds and the group will show items 1–5, then 6–10, then 11–15, and so on.

Cycle variables

When a group uses Cycle interval, two special variables become available inside text layers in that group:

Variable	What it shows
%CYCLE_PAGE%	The current page number (1, 2, 3…)
%CYCLE_TOTAL%	The total number of pages

Insert them via the Datasource section's extra buttons. Typical use: a small label that says Page 2 of 6.

Practical examples

Weather header

• Text layer bound to a weather data source.
• Content: "It's {currentConditions} and {temperature}° in {city}"
• Three Insert Field picks, static text in between.

Train departures board

• A Group bound to departures (the array of next trains).
• Inside the group: three text layers.
  • Time: Insert Group Field → plannedDateTime, with a Date format transformer (HH:mm).
  • Destination: Insert Group Field → direction.
  • Platform: Insert Group Field → plannedTrack.
• Direction: vertical. Items: 6. Cycle interval: 10s.

Meeting room list with a page counter

• Group bound to rooms, with a cycle interval so it pages through all rooms.
• Inside the group: a child text layer for the room name, bound with Insert Group Field.
• Outside the group: a small text layer showing Page %CYCLE_PAGE% of %CYCLE_TOTAL%.

Checking it works

Pages are always live — as soon as you bind a field, the canvas shows the real value. If something looks wrong:

• Check the preview value shown in the picker modal — it's exactly what the path resolves to right now.
• Make sure you used Insert Group Field (not Insert Field) for anything that should change per row.
• Open Data Sources and check the source's last-update status. If it's failing, the layer will show an empty value.