# Data Binding & Expressions

**Data Binding** is the process of connecting your Data (Variables, API results) to your UI (Text, Images, Colors).

## How to Bind Data

In Digia, any property that supports dynamic data is marked with the **code icon** <mark style="color:orange;">\[<>]</mark>.

To bind a variable:

1. Click the icon to open the **Expression Editor** popover.
2. Select a variable from the list or write an **Expression** (see below).

## Expressions

Expressions allow you to manipulate data before displaying it.

### Syntax

You do not need to add any special delimiters. Simply write the JS-Like code that evaluates to the desired value.

### Rules

1. **Pure Functions**: Expressions must always return a value.
2. **No Side Effects**: You cannot change state, make API calls, or run async code inside an expression.
3. **JS-like**: You can use standard JavaScript operators (math, string concatenation, ternaries), but you cannot write multi-line blocks or use `if/else` statements (use ternary operators instead).

### Examples

* **Combine Strings**: `user.first_name + ' ' + user.last_name`
* **Math**: `cart.total * 1.1`
* **Conditionals**: `user.is_active ? 'Active' : 'Inactive'`

For a full list of available functions (Math, JSON parsing, Date formatting), check the **Logic & Interaction** section.

## Mocking & Preview Data

One of the challenges of building dynamic apps is that you don't always have the live data while designing. Digia handles this with **Preview Value**.

You can set a Preview Value for **any property** that supports expressions. Inside the **Expression Editor** popover, simply enter a mock value (like "John Doe" or "100"). Digia will use this value to render the widget at Design Time, so you can visualize your layout without needing live API data.

### Design Time vs. Runtime

* **Design Time (Preview)**: The data you see inside the Digia Studio canvas. This is fake/mock data so you can see what your design *will* look like.
  * *Example*: You might set a Text widget's preview value to "John Doe".
* **Runtime (Real)**: The data the user sees when they actually run the app.
  * *Example*: The Text widget shows the actual logged-in user's name.

> \[!IMPORTANT] Always set **Preview Values** for your variables! If you don't, your canvas might look empty or broken because the API hasn't actually run yet.