Mettre à jour les données du formulaire

Cliquer sur les boutons dans les formulaires déclenchait généralement l’exécution du bloc Faire . Une nouvelle fonctionnalité appelée Utiliser pour la mise à jour locale est disponible pour l'action Cliquer (Click) d'un composant Bouton . Il vous permet de mettre à jour le formulaire sans exécuter le bloc Faire .

Tutoriel

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

1. Ouvrez le Concepteur de formulaires à partir de l'activité Créer un formulaire (Create Form) .

2. Faites glisser et déposez plusieurs composants du Panel ou tout autre composant de votre choix.

   Dans cet exemple, chaque composant de panneau représente une page différente du formulaire, collectant des informations différentes.

3. Faites glisser et déposez un composant Caché (de la catégorie Données ). Ceci est utilisé pour suivre le numéro de panneau actuel.

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

   

   
   

4. Accédez à chaque composant du panneau (Panel) > onglet Conditionnel (Conditional ) et définissez les conditions d'affichage du panneau.

   Dans cet exemple, chaque panneau ne s'affiche que lorsque stepId est égal au numéro du panneau. Pour y parvenir :

   • Dans la section Conditions simples (Simple conditions) > Ce composant devrait afficher le champ (Ce composant devrait afficher le champ), sélectionnez True.
   • Dans le champ Lorsque le composant de formulaire , sélectionnez StepId.
   • Dans le champ A la valeur ( Has the value ), saisissez le numéro du panneau (par exemple, premier panneau —1, deuxième panneau —2, et ainsi de suite).
   
   

   

   
   

5. À l'intérieur de chaque composant Panel , faites glisser et déposez les composants Button , comme suit :

   • Pour le premier panneau, ajoutez un composant Button pour accéder au deuxième panneau (par exemple, Next Step).
   • Pour le dernier panneau, ajoutez un composant Button pour accéder au panneau précédent (par exemple, Prev Step).
   • Pour les panneaux intermédiaires, ajoutez deux composants Button : un pour accéder au panneau précédent et un pour accéder au suivant.
6. Accédez à chaque onglet Affichage ( Display ) de chaque bouton. Définissez le bouton Action sur Click. La case Utiliser pour la mise à jour locale ( Use for Local Update ) s'affiche. Il s'agit de la fonctionnalité qui permet la navigation entre les panneaux de formulaire en cliquant sur un bouton, sans exécuter le bloc Faire .
7. Cochez la case Utiliser pour la mise à jour locale . L'éditeur de code Update Data Logic (Update Data Logic ) s'affiche.

8. Utilisez l'extrait de code JavaScript prédéfini et entrez les données que vous souhaitez mettre à jour entre les accolades. Assurez-vous d'utiliser les noms de clé de champ des composants de formulaire que vous souhaitez mettre à jour (ceux définis à l'étape 3).

   L'extrait de code JavaScript a le modèle suivant : instance.emit('updateData', {[field_key_name]:[field_key_update_value]});, où [field_key_name] représente la clé de champ du composant et [field_key_update_value] représente la nouvelle valeur du composant.

   Pour cet exemple, utilisez les extraits de code 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