Data binding

Data binding allows you to associate any element of your application to a data source. You can bind a property, a content, an action etc... When the data changes value, 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 a text entered by the user....

Data binding is present at all levels of your PandaSuite Studio interface.

Bind an element

Click on the property name of the object. In the data binding window, select among several data sources:

From a component: select any component in your application (it can be on another screen or even at the project level)
From a database: select a variable from the PandaSuite database, an external source via the HTTP component or the Firebase user database through the Session component.
Random number: returns a random number between 0 and 1
Current date & time : retrieve the current date and time in universal timestamp format

You can change this data using a function. There are many functions : for example, the count function allows you to count the number of elements in an array or the number of characters in a text and the By Index function to find the element of a list from its index.

Below the text block is "blinded" with the value of the component Text input located in the previous screen. As soon as the user enters his first name, it appears instead of the lorem :