Walkthrough : Construire un formulaire de saisie de données

Créer un formulaire de saisie sur une étape à l'aide de widgets de saisie* Enregistrer les données de saisie dans des variables et un tableau* Examiner les enregistrements d'un tableau sur une étape

Dans cet exercice, vous apprendrez à stocker des données dans une application et à stocker des données d'entrée d'une application dans un tableau.

À la fin des deux exercices, vous aurez une application de saisie de données qui ressemblera à ceci :

Exercice 1 : Enregistrer les données d'entrée dans l'application

Dans cet exercice, vous allez créer une étape de base qui enregistre les données d'entrée dans des variables.

Créer une nouvelle application

1. Dans l'onglet Apps, cliquez sur Apps.
2. Cliquez sur + Créer une application dans le coin supérieur droit.
3. Nommez l'application "Formulaire de saisie - Exemple". Vous pouvez éventuellement ajouter une description pour que les autres utilisateurs sachent à quoi sert cette application.
4. Cliquez sur + Créer.

Sur la page des détails de l'application, vous pouvez soit cliquer sur Modifier dans le coin supérieur droit, soit cliquer sur le nom de l'étape sans titre pour accéder à l'éditeur d'application.

Ajouter des widgets de saisie avec des sources de données variables

1. Cliquez sur l'onglet Entrées et sélectionnez Case à cocher.
2. Dans le volet latéral, nommez l'étiquette: "Ordre de travail terminé".
3. Sous Source de données, cliquez sur la case vide, puis sur Ajouter une variable.
4. Nommez la variable "Ordre de travail terminé" et définissez la valeur par défaut sur non. Cliquez sur + Créer.

La configuration du widget ressemblera à ceci :

1. Ajoutez un widget de sélection de date dans l'onglet Inputs.
2. Dans le volet latéral, nommez l'étiquette: "Date completed".
3. Sous Datasource, cliquez sur la case vide, puis sur + Add variable.
4. Nommez la variable "Date completed" et cliquez sur + Create.

La configuration du widget ressemblera à ceci :

Créer un déclencheur pour enregistrer les données saisies

1. Cliquez sur l'onglet Boutons et sélectionnez Soumettre.
2. Dans le volet latéral, cliquez sur le signe + à côté de Déclencheurs.
3. Intitulez le déclencheur "Enregistrer les données de l'application".
4. Dans la section Then, sélectionnez App dans le menu déroulant. Sélectionnez ensuite Save All App Data (Enregistrer toutes les données de l'application). Cliquez sur Enregistrer.

Vous disposez à présent d'une étape de saisie de données de base qui utilise des variables pour stocker des valeurs. Voici à quoi ressemble l'application lorsque vous la testez en mode développeur :

Remarquez que les variables stockent les données des compléments, que vous pouvez voir sous l'écran de l'étape.

Exercice 2 : Stocker les données d'entrée dans un tableau

Dans cet exercice, vous allez créer une étape de saisie de données qui enregistre les valeurs dans un tableau de bons de travail. Vous pourrez également visualiser les enregistrements dans le tableau à partir de l'étape de l'application.1. Ajoutez une nouvelle étape et nommez-la "Exercice 2".

Ajoutez le tableau à l'application

1. Cliquez sur l'onglet Enregistrements et sélectionnez + Ajouter un tableau.
2. Sélectionnez le tableau Bons de travail, puis cliquez sur Ajouter.
3. Cliquez sur l'icône + en regard de Record Placeholder.
4. Nommez le caractère générique de l'enregistrement : "Bons de travail actuels". Cliquez sur Add record placeholder (Ajouter un enregistrement).

Créer les entrées du formulaire de données

1. Cliquez sur Inputs et sélectionnez Single select.
2. Dans le volet latéral, nommez le widget : "Produit".
3. Sous Options de données, cliquez sur le champ Datasource vide, puis sur + Ajouter une variable.
4. Nommez la variable "Produit", puis cliquez sur + Créer.
5. Dans Selection Options, ajoutez les options suivantes :
6. Cadre de bicyclette
7. Roue
8. Transmission

1. Ajoutez un widget de saisie de nombres à l'étape.
2. Nommez l'étiquette : "Quantité".
3. Sous Options de données, cliquez sur le champ Source de données vide, puis sur + Ajouter une variable.
4. Nommez la variable "Produit" et cliquez sur + Créer.
5. Sous Règles de validation, cliquez sur + pour ajouter une règle.
6. Sélectionnez Greater Than et tapez "0" comme valeur statique.

Créer un bouton déclencheur pour stocker les valeurs d'entrée

1. Ajoutez un bouton à l'étape.
2. Dans le volet latéral, ajoutez le texte : "Créer un bon de travail".
3. Sous Déclencheurs, cliquez sur +.
4. Nommez le déclencheur : "Stocker les valeurs d'entrée dans un nouvel enregistrement de bon de travail".
5. Ajoutez les actions suivantes au déclencheur :
6. Enregistrements de la table → Créer un enregistrement → Expression : RANDOMSTRING() → Bons de travail actuels
7. Manipulation de données → Store → Variable → Product → Table record → Current Work Orders → Product
8. Manipulation de données → Store → Variable → Quantity → Table record→ Current Work Orders → Quantity

Visualiser le tableau des bons de travail au cours d'une étape

1. Cliquez sur Embed (Intégrer) et sélectionnez Interactive Table (Tableau interactif).
2. Dans le volet latéral sous Datasource, sélectionnez Tulip Table.
3. Dans le menu déroulant suivant, sélectionnez la table Work Orders.
4. Sous Linked Placeholder, sélectionnez Current Work Orders.
5. Sous Fields (Champs), ajoutez les champs suivants
6. ID
7. Produit
8. Quantité
9. Date de création
10. Statut
11. Couleur

1. Cliquez et faites glisser les carrés autour du widget pour ajuster les dimensions et voir tous les champs.

Vous disposez à présent d'un formulaire de saisie de données qui stocke des variables dans un espace réservé d'enregistrement et crée un enregistrement de table à partir de l'espace réservé actuel. Voici à quoi ressemble l'étape lorsque vous la testez en mode développeur :

Si vous tapez "0" dans la quantité, vous remarquerez un message d'erreur qui invite l'utilisateur à saisir une valeur acceptable. Cela est possible grâce à la règle de validation que vous avez définie sur le widget.

Prochaines étapes

Maintenant que vous avez créé un formulaire de saisie de données, apprenez à créer des applications ou à visualiser des données :

• Marche à suivre : Créez votre première application
• Marche à suivre : Créez votre première analyse