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, stocké dans le Datastore ou servir pour déclencher une action.
À la saisie de texte, le clavier de l’appareil s’ouvre automatiquement (sur mobile, tablette et ordinateur). Sur borne tactile, il est nécessaire de lui associer un clavier virtuel.
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
- 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 Tape clic 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. Dans son Contenu, cliquez sur Insérer de la donnée, cliquez sur la nouvelle étiquette et choisissez Depuis un composant. Cliquez sur la Saisie de texte (Sélection interactive), puis choisissez Valeur de saisie.
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 un quiz sur les plantes, en anglais. L’utilisateur doit saisir le mot tulip 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 tulip et une autre Si le texte n’est pas tulip 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.
Sur le bouton de validation, ajoutez une action Agir sur un composant > Condition > Évaluer toutes les conditions.
Avec le composant Conditions, ajoutez des actions pour ouvrir les bonnes pop-up en fonction de chaque condition.
Pour chaque condition, choisissez le déclencheur Évaluation Si {condition} est vrai, puis l’action 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.
Pour rendre la donnée persistante, stockez-la dans une variable du Datastore :
- Créez une variable de type Texte dans le Datastore.
- Sur le bouton de validation (ou via Validation en direct), ajoutez l’action Agir sur une source de données > Datastore > Créer/Modifier une donnée (Local).
- Choisissez la variable comme Cible, utilisez la fonction Définir, puis liez la Valeur au composant Saisie de texte.
Vous pouvez également envoyer la donnée vers un service externe via le composant HTTP, ou l’associer à une session utilisateur via le composant Firebase session.
Formulaire d'incident
Ajoutez ce template en quelques clics à votre compte. Modifiez et personnalisez-le en toute liberté.
→ Ajouter ce template à votre compte