Saisie de texte

Le composant Saisie de texte permet à l'utilisateur de saisir un texte. Son contenu peut être affiché ailleurs dans l'application ou servir pour déclencher une condition.

Insérer un champ de texte

Insérez le composant Saisie de texte.

Dans la fenêtre Propriétés, personnalisez l'apparence (taille, alignement, couleur) et ajoutez un message générique si vous le souhaitez.

Pour valider la saisie, vous avez le choix entre activer la saisie automatique (option  Validation en direct) ou bien de créer un bouton de validation (action Agir sur un composant > Saisie de Texte > Valider).

Afficher le texte saisi dans l'application

Récupérez la donnée saisie par l'utilisateur et affichez la ailleurs dans votre application.

Trouver l'identifiant du composant

Pour récupérer la donnée, double-cliquez sur le nom du composant dans la fenêtre Propriétés et collez la formule ainsi obtenue

Par exemple : 

Text-input9142 -> 5f903e615ccbd73fda000453

5f903e615ccbd73fda000453 est l'identifiant de ce composant (ID_COMPONENT)

Afficher la donnée du composant

Insérez un bloc de texte et personnalisez le style de la police.

Au lieu d'un texte statique, nous allons nous connecter au composant pour afficher la donnée rentrée par l'utilisateur.

Dans la fenêtre Propriétés, cliquez sur l'icône Données dynamiques et sur le bouton Ajouter.

Remplacer  my-bind par : 

[data:ID_COMPONENT(/inputValue)]

Déclencher une action en fonction de la donnée

Cette fonctionnalité est particulièrement utile dans le domaine de l'éducation. Vous pouvez déclencher une action en fonction du texte, par exemple pour valider s'il s'agit ou non de la bonne réponse.

Pour cela vous utilisez le composant Condition. Il vous faut créer 2 conditions "Si le texte saisi est le bon" & "Si le texte saisi n'est pas correct" et attribuer les actions en conséquence.

Prenons l'exemple d'une app d'apprentissage de l'anglais. L'utilisateur doit taper la traduction de "pineapple" : "ananas". En fonction de sa réponse, la pop-up "Bonne réponse" ou la pop-up "Mauvaise réponse" s'ouvre.

Créer les conditions

Insérez le composant Condition et depuis la fenêtre Propriétés, créez la condition "Si la réponse est ananas".

Voici les paramètres de l'expression : 

Donnée : [data:ID_COMPONENT(/inputValue)]
Fonction : Equal
Valeur : ananas

Créez une deuxième condition "Si la réponse n'est pas ananas" et choisissez la formule Not equal.

Donnée : [data:ID_COMPONENT(/inputValue)] 
Fonction : Not equal 
Valeur : ananas

Préparez vos 2 pop-ups qui signalent la bonne et la mauvaise réponse à votre utilisateur.

Evaluer les conditions

Maintenant que vos conditions sont prêtes, il vous faut créer l'action pour les évaluer. En effet, nous n'avons pas choisi l'évaluation automatique pour que l'utilisateur ait le temps de taper sa réponse et de la confirmer.

Sélectionnez le bouton et créez une action au tap : Agir sur un composant > Evaluer la condition pour chacune des 2 conditions.

Déclencher en fonction de la condition

Maintenant en fonction de l'évaluation, il faut attribuer les bonnes actions.

Sélectionnez le composant Condition et ouvrez la fenêtre Actions.

Choisissez pour chacune des conditions Agir sur un composant > Pop up > Ouvrir la pop up.

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