Data binding (liaison de données)
Le data binding (liaison de données) permet d’associer n’importe quel élément de votre application à une source de données. Vous pouvez lier une propriété, un contenu, une action, etc. Lorsque la donnée change de valeur, l’élément associé 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ées Airtable
- Déclencher une condition en fonction d’un texte saisi par l’utilisateur
Le data binding est présent à tous les niveaux de votre interface PandaSuite Studio. Il ouvre toujours la même fenêtre, mais les sources qu’elle propose s’adaptent à l’endroit où vous démarrez la liaison.
Lier un élément à une donnée
Dans le panneau Propriétés, cliquez sur le nom de la propriété à lier. La fenêtre de data binding s’ouvre avec les sources toujours disponibles :
- Depuis un composant : sélectionnez n’importe quel composant de votre application (il peut être sur un autre écran ou même au niveau du projet)
- Depuis une source de données : choisissez une variable du Datastore, une source externe via le composant HTTP ou une donnée associée à un utilisateur via Firebase
- Depuis le projet : accédez aux propriétés définies au niveau du Projet, dont la date et heure actuelles
- Identifiant PandaSuite : identifiant unique de l’installation de l’application sur l’appareil
- Nombre aléatoire : retourne un nombre aléatoire entre 0 et 1
Vous pouvez transformer la donnée liée à l’aide d’une fonction : compter des éléments, extraire un item par index, formater une date, etc.
Ci-dessous le bloc de texte est “bindé” avec la valeur du composant Saisie de texte situé dans l’écran précédent. Dès que l’utilisateur saisit son prénom, celui-ci apparaît à la place du lorem :
Les sources s’adaptent au contexte
Selon l’endroit où vous ouvrez la fenêtre, des sources contextuelles peuvent apparaître. Une Collection / Liste répète le même gabarit pour chaque ligne de vos données ; lorsque vous liez un élément placé à l’intérieur, la fenêtre ajoute une source pour la ligne courante, et laquelle dépend du type connecté.
Élément courant
Quand la source est une Collection ou une Multi-référence, la fenêtre ajoute Élément courant : la ligne en cours d’affichage, sous forme de Référence, un lien vers cette ligne plutôt qu’une copie. Deux choses possibles :
- Ouvrez l’un de ses champs (Name, Price, Photo…) pour afficher la valeur de ce champ pour cette ligne. La fenêtre le lit pour vous By Id. C’est ce que vous faites la plupart du temps.
- Arrêtez-vous sur l’élément lui-même pour lier la référence : une poignée stable vers cette ligne, pour mémoriser quel élément a été sélectionné, le transmettre à une action ou le stocker (page de détail, favoris).
Comme c’est un lien et non une copie, un champ affiche toujours la valeur à jour, et un champ qui pointe vers une autre collection est suivi pour vous (voir Suivre une référence).
Index courant
Quand la source est un Tableau, la fenêtre ajoute Index courant à la place, même si chaque élément est un objet Clé / Valeur. C’est la position de la ligne courante, un nombre à partir de 0. Les deux gestes sont les mêmes que pour Élément courant, mais ce que vous obtenez est plus limité :
- Ouvrez l’un de ses champs de la même façon. La fenêtre le lit pour vous By Index au lieu de By Id.
- Arrêtez-vous sur l’index lui-même pour lier le nombre. Vous pouvez le stocker, mais c’est une position, pas une référence : il désigne ce qui se trouve à cet emplacement, donc il casse si la liste est réordonnée et vous ne pouvez pas le suivre. Pour une poignée stable (page de détail, favoris, By Id, une Référence sauvegardée), utilisez une source Collection.
Depuis l’événement
Lorsque vous liez une valeur à l’intérieur d’une action déclenchée par un événement, et que cet événement transporte une donnée, la fenêtre ajoute Depuis l’événement. Elle vous donne la donnée portée par l’événement, par exemple les valeurs qu’un composant custom envoie lorsqu’il se déclenche, ou les arguments qu’un agent IA transmet lorsqu’il appelle un tool du composant Agent D-ID. Utilisez-la pour que l’action réagisse précisément à l’élément ou à la valeur concernés par l’événement.
Depuis une action précédente
Une liste d’actions s’exécute de haut en bas, et certaines actions produisent quelque chose au passage. Prendre une photo sur un composant Screenshot vous remet l’image qu’elle vient de capturer ; une action d’un composant custom vous remet ce que son manifeste déclare. Lorsque vous liez une valeur à l’intérieur d’une action, la fenêtre ajoute Depuis une action précédente et liste les actions productrices situées au-dessus d’elle, chacune nommée d’après ce qu’elle fait, par exemple Résultat de Prendre une photo. Choisissez-en une, puis parcourez son résultat comme vous parcourez les données d’un événement.
Lier un résultat est aussi ce qui crée l’attente. Produire une valeur ne met rien en pause en soi : la liste attend parce que vous avez demandé quelque chose qui n’existe pas encore. L’action que vous modifiez attend ce résultat, et les actions situées en dessous attendent avec elle plutôt que de la doubler. Les actions qui ne consomment rien ne sont jamais retenues.
Un résultat doit exister avant d’être lu, donc Studio ne propose que les actions situées au-dessus de celle que vous modifiez. Déplacez une action consommatrice au-dessus de sa productrice et le lien casse : PandaSuite n’attend jamais une action qui n’a pas été exécutée, et ne réordonne jamais votre liste à votre place. Supprimer ou déplacer une action productrice conserve la liaison au lieu de la faire pointer discrètement vers ce qui a pris sa place, et le panneau Actions signale la ligne : « Une valeur de cette action vise un résultat qui n’est plus au-dessus d’elle dans la liste. »
Si une action productrice échoue, les actions qui dépendent de son résultat ne s’exécutent pas, tandis que les actions indépendantes de la liste s’exécutent quand même. Chaque exécution d’une liste a par ailleurs ses propres résultats : deux appuis successifs ne lisent jamais celui de l’autre.
Exemple. Sur un bouton, ajoutez
Suivre une référence
Une Référence ne stocke pas la donnée elle-même : elle pointe vers un élément d’une collection, la même ou une autre. Un Élément courant issu d’une source Collection est une référence vers la ligne affichée, et un champ peut à son tour pointer vers un élément d’une autre collection. Dans les deux cas, ouvrir un champ suit le lien pour vous : PandaSuite va chercher l’élément pointé et y lit le champ, sans que vous ayez à reconstruire la liaison à la main.
C’est ce qui fait fonctionner une sélection mémorisée. Dans Créer une page dynamique, vous stockez l’élément choisi sous forme de Référence, pour que la vue de détail puisse lier directement ses champs.
Pour remplacer une référence par l’élément complet qu’elle désigne, utilisez la fonction Expand.