Data binding

Le data binding (liaison de données) permet de lier un élément de votre interface utilisateur (UI) à une donnée. Lorsque cette donnée change de valeur, l'élément lié à cette donnée reflète automatiquement ce changement.

Voici quelques exemples d'utilisations du data binding : 

  • Afficher la valeur d'un score utilisateur
  • Afficher une image issue d'une base de donnée Airtable 
  • Déclencher une condition en fonction d'un texte saisi par l'utilisateur
  • ....

Sources du data binding

La donnée peut être issue de nombreuses sources : 

  • le fournisseur de données
  • une base de données ou un service externe via le composant HTTP
  • une variable (date du jour....)
  • un composant (Saisie de texte...)
  • ou un événement 

Par exemple sur un bloc de texte, il est possible de "binder" la source du texte. Ici, le texte Lorem (qui correspond au prénom de l'utilisateur) sera automatiquement remplacé par le texte saisi par l'utilisateur dans un composant Saisie de texte (dans l'écran précédent, Quel est ton prénom ?).

Paramétrer le data binding

Le data binding associe plusieurs éléments :

  • l'objet cible du binding (par exemple, un bloc de texte)
  • la propriété de cet objet cible (par exemple, sa source)
  • la source du binding (par exemple, la valeur du composant Saisie de Texte)
  • le chemin pour accéder à cette donnée au sein son contexte (par exemple, le champ Titre de ma base de données) 

L'icône  Data Binding apparaît dans la fenêtre Propriétés de chaque objet. Sélectionnez l'objet cible et cliquez sur cette icône : vous voyez apparaître la liste des propriétés de cet objet que vous pouvez "binder".

Désormais il vous reste à paramétrer la source du binding et son chemin d'accès. La formule permet de cibler une donnée d'un contexte, et son chemin d'accès. Elle permet également modifier cette donnée à l'aide d'une fonction. Il existe de nombreuses fonctions : par exemple, la fonction count permet de compter le nombre d'éléments et la fonction getByIndex de retrouver l'élément d'une liste à partir de son index.

Voici un exemple de formule :

[data:5c17856107aa3906ad000b89(/properties/@getById:[data:5c17856107aa3906ad000b89(rowId)]/name)]

Pour retrouver l'identifiant d'un composant, double-cliquez sur le nom de ce composant depuis la fenêtre Propriétés et collez votre saisie dans un bloc notes externe.

💡 Les formules actuellement utilisées pour le data binding restent techniques et font appel à des identifiants. Pour construire ces formules, nous vous invitons à vous référer aux articles correspondants depuis votre centre d'aide. Une nouvelle interface de PandaSuite Studio est en cours de préparation, elle simplifiera la mise en place de ces formules.  

Vous avez encore besoin d'aide ? Contactez-nous Contactez-nous