Comment construire votre premier formulaire
  • 31 Oct 2023
  • 5 Minutes à lire
  • Contributeurs

Comment construire votre premier formulaire


Résumé de l’article

Comment construire votre premier Form Step

Apprenez à utiliser les étapes du formulaire dans le contexte de votre application entière.

:::(Warning) (Attention) A partir de la version 234, les étapes de formulaire ont été désactivées pour toutes les nouvelles instances de Tulip :: :

Dans cet article, vous apprendrez...

  • Comment mettre en place une étape de formulaire
  • Les différentes façons de capturer des données dans une étape de formulaire
  • Comment ajouter de la logique basée sur des réponses spécifiques dans le formulaire

:::(Info) (NOTE) Ce sujet est abordé dans le cours"Basic App Design and Logic" de l'Université Tulip ::: :

Dans Tulip, il y a deux types d'étapes que vous pouvez ajouter à une application :

  1. Une étape normale, qui correspond généralement à une étape individuelle dans un ensemble d'instructions papier. Les étapes normales permettent également un formatage extensible.
  2. Une étape formulaire, qui permet à un opérateur de saisir une série de détails sur le travail qu'il est en train d'effectuer.

L'étape normale met l'accent sur la facilité de lecture et de visualisation, tandis que l'étape formulaire permet à l'opérateur de saisir facilement des informations détaillées.

Les étapes de formulaire sont couramment utilisées pour remplacer les champs d'un bon de travail, les cases à cocher d'un rapport de défaut ou tout autre cas où les opérateurs ont besoin d'ajouter des données. Chaque fois qu'un opérateur utilise une feuille de calcul ou remplit un formulaire, il y a une opportunité pour une étape de formulaire.

Elles remplacent les formulaires comme celui-ci :

Et ils ressemblent à ceci :

Voici comment utiliser une étape de formulaire dans l'une de vos applications. Si vous souhaitez voir les étapes de formulaire dans le contexte d'un processus de fabrication normal, consultez ces guides étape par étape :

Options pour les champs de formulaire

Voici les différentes options du formulaire :

Booléen : Répondre à une question de type oui/non

Liste déroulante : Donne une liste d'options présélectionnées sous forme de boutons ou dans un sélecteur déroulant.

Multi-sélection : Permet de choisir plusieurs options dans une liste.

Texte : Tapez du texte

Nombre : Saisir un nombre (ou utiliser +/- pour l'incrémenter)

Image : Prenez une photo avec l'appareil photo par défaut de l'appareil ou un appareil photo USB. Cette image peut être utilisée lors d'étapes ultérieures ou dans le cadre d'analyses.

Modifier les champs du formulaire

Vous pouvez modifier les options suivantes dans chaque type de widget de formulaire :

Etiquette de saisie : L'étiquette dans le formulaire

Taille de la police : Taille de la police de l'étiquette

Font Color: Couleur de la police de l'étiquette

Font Style (Style de police) : Style de la police de l'étiquette

Variable : Variable qui stocke la valeur saisie par un opérateur.

Required (Obligatoire) : Indique si l'opérateur doit saisir une valeur avant que le formulaire puisse être soumis : Si l'opérateur doit saisir une valeur avant que le formulaire puisse être soumis

Pour plus de détails sur chaque widget de formulaire, consultez ce guide sur les widgets de formulaire.

Modifier la présentation du formulaire

Cliquez sur n'importe quel point de l'étape elle-même pour afficher une liste d'options permettant de modifier la présentation du formulaire dans le volet contextuel situé à droite de l'écran.

Vous pouvez modifier la fonctionnalité des boutons Annuler et Soumettre à l'aide des menus déroulants du volet contextuel. Vous verrez comment construire une logique plus complexe avec ces options dans la section suivante.

Ajoutez plusieurs colonnes, puis faites glisser chaque champ vers la nouvelle colonne afin de faire tenir un plus grand nombre de champs sur le formulaire.

Toutes les étapes du formulaire comprennent trois boutons en bas :

  • "Annuler", qui offre plusieurs options pour les déclencheurs
  • Menu
  • "Soumettre", qui offre plusieurs options pour les déclencheurs.

Utilisation de variables dans les formulaires

Imaginons que vous souhaitiez mettre en place une logique dynamique basée sur la réponse spécifique d'un formulaire.

Par exemple, si une personne effectue un contrôle de qualité et qu'elle sélectionne l'option "Retravailler" au lieu de "Rebut", vous voulez lui demander de placer la pièce dans la corbeille appropriée pour la retoucher.

C'est ici que vous aurez besoin d'une variable pour suivre la valeur d'un champ dans l'étape du formulaire.

Sélectionnez le champ, puis accédez à la section "Variable" dans le volet de contexte.

Cliquez sur le bouton "+" pour créer une nouvelle variable qui suivra la valeur du champ.

Vous pouvez ensuite modifier le nom de la variable dans le champ "Nom".

Comment remplir un formulaire

Plusieurs choses peuvent se produire lorsqu'un utilisateur est prêt à remplir un formulaire. L'opérateur doit appuyer sur le bouton "Soumettre" dans le coin inférieur droit ou sur le bouton "Annuler" dans le coin inférieur gauche.

Pour choisir ce qui se passe après qu'un opérateur a appuyé sur l'un de ces boutons, vous pouvez sélectionner des options au milieu du volet contextuel lorsque vous cliquez sur l'arrière-plan de l'étape du formulaire.

Voici quelques options pour le bouton "Soumettre" :

Passerà l'étape suivante - Par défaut, l'utilisateur passe à l'étape suivante.

Aller à l'étape... - Choisir une étape spécifique de l'application.

Terminer l'application - L'utilisateur a terminé l'application.

Action personnalisée - C'est ici que vous pouvez ajouter un déclencheur personnalisé basé sur une variable qui a été mise à jour dans le formulaire (ou toute autre variable).

Voir ici pour un guide plus complet sur les actions personnalisées.

Il n'y a que 2 façons d'effacer les valeurs de l'étape du formulaire :

  1. Terminer l'application
  2. Annuler l'application

Utilisation des champs de formulaire dans l'analyse

Vous pouvez analyser les données des formulaires avec ou sans variables.

Naviguez vers une analyse, puis choisissez la catégorie Axe des X dans la barre latérale gauche.

Cliquez sur le point de données existant.

Choisissez ensuite la catégorie "App forms".

Vous pourrez choisir n'importe quel champ de formulaire de l'ensemble de l'application.

Si vous choisissez de suivre le résultat d'un champ de formulaire dans une variable, vous pouvez également utiliser la variable dans la catégorie "Variables de l'application".

Une analyse de tableau peut afficher plusieurs champs de formulaire à la fois. Pour sélectionner plusieurs champs de formulaire, cliquez sur l'onglet "Opérations" dans le menu de gauche.

Cliquez sur le bouton "Ajouter une nouvelle opération", puis choisissez un champ de formulaire spécifique à ajouter.

Voici à quoi ressemblera le tableau.


Avez-vous trouvé ce que vous cherchiez ?

Vous pouvez également vous rendre sur community.tulip.co pour poser votre question ou voir si d'autres personnes ont rencontré une question similaire !


Cet article vous a-t-il été utile ?