Data binding
Data binding allows you to associate any element of your application to a data source. You can bind a property, content, an action, etc. When the data changes, the associated element automatically reflects this change.
Here are some examples of data binding uses:
- Display the value of a user score
- Display an image from an Airtable database
- Trigger a condition based on text entered by the user
Data binding is present at all levels of your PandaSuite Studio interface. It always opens the same window, but the sources it offers adapt to where you start the binding.
Bind an element to data
In the Properties panel, click on the name of the property to bind. The data binding window opens with the sources that are always available:
- From a component: select any component in your application (it can be on another screen or even at the project level)
- From a data source: select a variable from the Datastore, an external source via the HTTP component, or a user-associated value via Firebase
- From project: access properties defined at the Project level, including the current date & time
- PandaSuite Identifier: unique identifier for the app installation on the device
- Random number: returns a random number between 0 and 1
You can transform the bound data using a function: count elements, extract an item by index, format a date, etc.
Below, the text block is bound to the value of the Text input component on the previous screen. As soon as the user enters their name, it appears in place of the lorem:
Sources adapt to the context
Depending on where you open the window, contextual sources can appear. A Collection / List repeats the same template for every row of your data; when you bind an element placed inside it, the window adds a source for the current row, and which one depends on the connected type.
Current Item
When the source is a Collection or a Multi-reference, the window adds Current Item: the row currently being displayed, as a Reference, a link to that row rather than a copy. Two things you can do with it:
- Open one of its fields (Name, Price, Photo…) to show that field’s value for this row. The window reads it for you By Id. This is what you do most of the time.
- Stop on the item itself to bind the reference: a stable handle to this row, to remember which item was selected, pass it to an action, or store it (a detail page, favorites).
Because it is a link and not a copy, a field always shows the up to date value, and a field that points to another collection is followed for you (see Following a reference).
Current Index
When the source is an Array, the window adds Current Index instead, even if each entry is a Key / Value object. It is the current row’s position, a number starting at 0. The two moves mirror Current Item, but what you get is more limited:
- Open one of its fields the same way. The window reads it for you By Index instead of By Id.
- Stop on the index itself to bind the number. You can store it, but it is a position, not a reference: it points to whatever sits at that spot, so it breaks if the list is reordered and you cannot follow it. For a stable handle (a detail page, favorites, By Id, a saved Reference), use a Collection source.
From the selected event
When you bind a value inside an action that is triggered by an event, and that event carries data, the window adds From the selected event. It gives you the data the event carries, for example the values a custom component sends when it fires, or the arguments an AI agent passes when it calls a tool on the D-ID Agent component. Use it so the action responds to exactly the item or value involved in the event.
From a previous action
An action list runs from top to bottom, and some actions produce something as they go. Take a photo on a Screenshot component hands you the image it just captured; an action of a custom component hands you whatever its manifest declares. When you bind a value inside an action, the window adds From a previous action and lists the producing actions placed above it, each one named after what it does, such as Result of Take a photo. Pick one, then walk its result the way you walk the data of an event.
Binding to a result is also what creates the wait. Producing a value does not pause anything on its own: the list waits because you asked for something that does not exist yet. The action you are editing waits for that result, and the actions below it wait with it rather than overtaking. Actions that consume nothing are never held up.
A result has to exist before it can be read, so Studio only offers the actions above the one you are editing. Move a consumer above its producer and the link breaks: PandaSuite never waits for an action that has not run, and never reorders your list for you. Deleting or moving a producer keeps the binding instead of quietly pointing it at whatever took that place, and the Actions panel flags the row: “A value of this action refers to a result that is no longer above it in the list.”
If a producing action fails, the actions that depend on its result do not run, while the independent actions of the list still do. Each run of a list also has its own results, so two taps in a row never read each other’s.
Example. On a button, add
Following a reference
A Reference does not store data itself: it points to an item in a collection, the same one or another. A Current Item coming from a Collection source is a reference to the displayed row, and a field can in turn point to an item in another collection. In both cases, opening a field follows the link for you: PandaSuite goes to the item it points to and reads the field there, so you never rebuild the connection by hand.
This is what makes a saved selection work. In Dynamic page from collection item, you store the chosen item as a Reference, so the detail view can bind straight to its fields.
To replace a reference with the full item it points to, use the Expand function.