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 [<>].

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.