Skip to content
PandaSuite Docs

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:

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. Use it so the action responds to exactly the item or value involved in the event.

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.

Learn more