Binding Data to UI

Binding means connecting data to a UI component. Once you bind, the data shows up on screen, and when the data changes, the screen updates on its own. This is the core technique that makes your design come alive in Layerz.

Binding a value to a component

Select a component and connect the data you want to display from the Inspector.

• Bind a Label's text to a title field, and it shows that value.
• Bind a Toggle's state to a done field, and the data decides whether it's on or off.
• You can bind an Image to image-type data.

Input components like Text Field, Slider, and Toggle bind two-way. The data not only appears on screen, but whatever the user enters or adjusts is also written back to the data.

Binding an array to a List

The most powerful binding is connecting an array to a List.

1. Select the List and bind array data (for example, a Todo array).
2. Cells repeat automatically, one per array item.
3. Bind the components inside a cell (Label, Toggle, etc.) to each item's fields.

In the editor, mirror cells appear to preview the array count, so you can immediately see how the real data will fill in.

Data sources

You can pull the data you bind from three scopes.

• Project — data shared across the whole project
• Screen — data that belongs to the current screen
• Cell — the item data for each individual List cell

Comparison bindings

You can also bind the result of a comparison (true/false) instead of the value itself. When creating a binding, turn on Comparison and pick the value to compare against and an operator — the Bool result feeds the property.

The classic example is list selection: bind a cell's checkmark image's Hidden to the comparison cell's id ≠ selected id, and the checkmark appears only on the selected item, updating automatically whenever the selection changes. It's conditional UI without an Action Flow.

Text comparisons support not contains, is empty, and is not empty in addition to equals, ≠, and contains. is empty / is not empty are unary operators that need no comparison value, and leaving the comparison value blank compares against the empty string — handy for UI like "hide when there's no value".

Date Display Formats

When you bind a date value to a text property like a Label, you can pick a display format. Choose Date Format from the binding row's menu.

• Date only / time only / date + time — standard combinations from short to complete
• Relative time — shown relative to now, like "2 hours ago" or "yesterday" (full and short variants)