Le composant Saisie de texte

Le composant Saisie de texte permet d'afficher un champ pour que l'utilisateur écrive un texte. Ce texte peut être réutilisé ailleurs dans l'application, être envoyé dans une base de données ou servir pour déclencher une action.

Insérer un champ de saisie

Insérez le composant Saisie de texte.

Dans les propriétés, personnalisez l'apparence (taille, alignement, couleur) et ajoutez un message générique si vous le souhaitez.

Vous avez le choix entre plusieurs types de texte qui personnalisent le format d'affichage de ce texte : 

• Texte
• Zone de texte
• Mot de passe
• Email
• Nombre
• Téléphone
• URL
• Date

Valider la saisie

Une fois que l'utilisateur a complété le champ, il faut ajouter une action pour valider la saisie. Vous avez deux possibilités : 

• Valider automatiquement la saisie
• Créer un bouton de validation

Valider automatiquement

Pour valider automatiquement, il suffit d'activer l'option  Validation en direct dans les propriétés du composant.

Créer un bouton de validation 

Pour créer un bouton de validation, insérez un bouton et ajoutez une action. 

Sélectionnez l'événement Simple tap / Clique et l'action Agir sur un composant. Sélectionnez le composant Saisie de Texte et l'action Valider.

Afficher le texte saisi 

Vous pouvez réutiliser le texte validé par l'utilisateur dans l'application. 

Insérez un bloc de texte et personnalisez le style. Ajoutez un data binding sur le Contenu : Depuis un composant > Saisie de texte.

Ajouter une action conditionnelle

Il est possible de déclencher des actions en fonction du texte saisi par l'utilisateur grâce aux Conditions.

En fonction de la valeur saisie

Imaginons une application d'apprentissage de l'anglais. L'utilisateur doit saisir le mot ananas pour obtenir une bonne réponse. Un message en pop-up lui indique si la réponse est bonne ou mauvaise. Vous avez besoin de créer une condition Si le texte est ananas et une autre Si le texte n'est pas ananas et associer les bonnes actions. 

Insérez le composant Condition et dans les propriétés, créez les deux conditions en utilisant la valeur du composant Saisie de texte.

Ajoutez une action pour évaluer ces conditions. 

Avec le composant Conditions, ajoutez des actions pour ouvrir les bonnes pop-up en fonction de chaque condition

Ajoutez une action Evaluation {condition} > Agir sur un composant > Pop up > Ouvrir la pop up.

En fonction du statut de validation

Via le composant Condition, vous avez également accès à d'autres paramètres : 

• Est vide
• Est valide
• Est validé

Stocker / envoyer la donnée

Les données saisies par l'utilisateur sont locales : lorsque l'application est fermée, ce texte disparaît.  

Il est possible de stocker cette donnée localement pour qu'elle reste persistante grâce à une variable et à la base de données PandaSuite, l'envoyer sur un autre service grâce au composant HTTP ou l'associer à une session utilisateur via le composant Firebase session.