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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digia.tech/data-and-state/data-binding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.