Mettre à jour les données du formulaire

Clicking buttons in forms usually triggered the execution of the Do block. A new functionality called Use for Local Update is available for the Click action of a Button component. It allows you to update the form without executing the Do block.

Tutoriel

Le tutoriel suivant explique comment créer des boutons pour naviguer entre plusieurs pages d'un formulaire.

1. Open the Form Designer from the Create Form activity.

2. Glissez-déposez plusieurs composants de Panneau ou tout autre composant de votre choix. Dans cet exemple, chaque composant du panneau représente une page différente du formulaire, collectant différentes informations.

3. Drag and drop a Hidden component (from the Data category). This is used to track the current panel number.

   Pour cet exemple, définissez le composant Libellé sur StepId. Par défaut, le nom de la Clé de champ est défini sur stepId.

   

4. Accédez à chaque composant du Panneau > onglet Conditionnel et définissez les conditions d'affichage du panneau. Dans cet exemple, chaque panneau s’affiche uniquement lorsque stepId est égal au numéro de panneau. Pour ce faire :

   • Dans la section Conditions simples > Ce composant doit s'afficher , sélectionnez True.

   • Dans le champ Quand le composant de formulaire , sélectionnez StepId.

   • Dans le champ Contient la valeur , saisissez le numéro du panneau (par exemple, premier panneau—1, deuxième panneau—2, etc.).

     

5. Inside each Panel component, drag and drop Button components, as follows:

   • For the first panel, add one Button component to navigate to the second panel (e.g, Next Step).
   • For the last panel, add one Button component to navigate to the previous panel (e.g., Prev Step).
   • For the in-between panels, add two Button components: one to navigate to the previous panel, and one to navigate to the next one.

6. Navigate to each button Display tab. Set the button Action to Click. The Use for Local Update checkbox is displayed. This is the feature that allows the navigation between form panels on button click, without executing the Do block.

7. Check the Use for Local Update box. The Update Data Logic code editor is displayed.

8. Utilisez l'extrait JavaScript prédéfini et entrez les données que vous souhaitez mettre à jour entre les crochets. Assurez-vous d'utiliser les noms de Clé de champ des composants de formulaire que vous souhaitez mettre à jour. L'extrait JavaScript suit le modèle suivant : instance.emit('updateData', {[field_key_name]:[field_key_update_value]});, où [field_key_name] représente la clé du champ du composant, et [field_key_update_value] représente la nouvelle valeur du composant. Pour cet exemple, utilisez les extraits suivants :

   • Pour les boutons Next Step :instance.emit('updateData', {stepId:X});et remplacez X par le numéro du panneau suivant (par exemple, pour le bouton du deuxième panneau, utilisez instance.emit('updateData', {stepId:3});)
   • Pour les boutons Prev Step :instance.emit('updateData', {stepId:Y});et remplacez Y par le numéro du panneau précédent (par exemple, pour le bouton du deuxième panneau, utilisez instance.emit('updateData', {stepId:1});)

Exemple de workflow

Pour vérifier le workflow complet ou pour avoir une référence future, téléchargez l’ exemple XAML