Mettre à jour l’état d’un composant à l’aide des paramètres de l’état du client

Créez et liez une valeur de paramètre d’état client à un composant dans Générateur d'IU. En ajoutant des valeurs personnalisées à vos composants, ces composants peuvent ensuite être automatiquement mis à jour via un script.

Avant de commencer

Rôle requis : ui_builder_admin

Pourquoi et quand exécuter cette tâche

Vous pouvez ajouter deux composants à une page, puis les connecter à l’aide des paramètres d’état du client et des scripts. Commencez par créer un paramètre d’état client, puis liez-le à l’un des composants, tel qu’une étiquette. Ensuite, vous créez un script client et le liez à un deuxième composant, tel qu’un bouton, à l’aide d’un gestionnaire d’événements. Lorsque vous créez le gestionnaire d’événements, liez-lui la valeur du paramètre d’état du client pour connecter les deux composants. Si vous cliquez sur un composant, l’état de l’autre composant est modifié. Les états clients sont utiles car vous pouvez ajouter des valeurs personnalisées à vos composants qui peuvent être automatiquement mises à jour via un script. Considérez un état client comme une catégorie pour stocker des informations spécifiques à la page.

Par exemple, vous pouvez ajouter un composant de bouton et d’étiquette à votre page. Le bouton modifie la valeur de l’étiquette, par exemple la couleur du texte.

Procédure

1. Accédez à la Tout > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant Créer > Expérience.
   Consultez la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations sur la création d’expériences.
3. Créez ou ouvrez une page.
   Pour plus d'informations, consultez Gérer les Générateur d'IU pages et les variantes de page.
4. Ajoutez deux composants à votre page.
   Pour plus d'informations, consultez Ajouter et configurer des composants.
5. Pour définir un paramètre d’état du client avec une valeur associée, sélectionnez Paramètres d’état du client dans le panneau inférieur gauche.
   
6. Sélectionnez + Ajouter.
   
7. Entrez un nom pour le nom de l’état du client, le type et la valeur initiale.

   L’état du client prend en charge les chaînes, les nombres, les booléens et JSON. Par exemple, vous pouvez entrer le nom sous la forme dynamic_label_value, le type sous la forme Chaîne et la valeur initiale sous la forme Valeur initiale.

   
8. Liez la valeur du paramètre de l’état du client à votre composant.
   1. Sélectionnez le composant auquel vous souhaitez lier le paramètre d’état du client.
   2. Ouvrez le panneau de configuration et sélectionnez l’onglet Configurer .
   3. Pointez sur le champ auquel vous souhaitez lier les données et sélectionnez l’icône de liaison de données dynamiques (icône de ).
      
      La fenêtre modale de liaison de données s’affiche.

      

   4. Sélectionnez les états du client dans l’onglet Types de données .
   5. Double-cliquez sur le script client que vous souhaitez lier au composant.
      
   6. Sélectionnez Appliquer.
      
9. Sélectionnez Enregistrer.
10. Lier la valeur de l’état du client à un composant et créer un script pour connecter le deuxième composant au premier.
    1. Dans le volet gauche, sélectionnez l’icône + en regard de Scripts clients.
       
    2. Entrez un nom de script qui décrit la tâche.
       Par exemple, vous pouvez entrer Mettre à jour la valeur de l’étiquette , car c’est ce que vous voulez que le script fasse.
    3. Dans Now Code Editor, ajoutez votre script.

       Supposons que vous choisissiez une API à appeler et les paramètres de l’API, tels qu’un état et une valeur. Par exemple, vous pouvez appeler api.setState et inclure le dynamic_label_value comme premier paramètre, et une NOUVELLE VALEUR comme deuxième paramètre.

       
11. Ajoutez un gestionnaire d’événements à votre deuxième composant pour appeler le nouveau script client que vous avez créé.
    1. Sélectionnez le composant de votre page auquel vous souhaitez lier le script.
    2. Sélectionnez l'onglet Événements.
    3. Sélectionnez + Ajouter un nouveau gestionnaire d’événements.
    4. Dans la section Scripts des gestionnaires d’événements, sélectionnez le script que vous avez créé et sélectionnez + pour l’ajouter en tant que gestionnaire d’événements pour le composant.
       
12. Sélectionnez Enregistrer.
13. Pour prévisualiser votre page et tester les composants pour vous assurer qu’ils sont connectés, sélectionnez Aperçu.
    Lorsque vous sélectionnez un composant, l’état du second doit être modifié. Par exemple, sélectionnez le composant Bouton pour modifier le texte du composant Valeur de l’étiquette de Valeur initiale à NOUVELLE VALEUR.

Résultats

Ce que vous avez fait dans cette procédure :

• Ajoutez deux composants à votre page.
• Définition d’un paramètre d’état du client qui avait une valeur initiale.
• Lier le paramètre d’état du client au premier composant.
• Création d’un script client qui met à jour une valeur définie par le paramètre d’état du client.
• Un gestionnaire d’événements a été créé pour le deuxième composant afin d’appeler le nouveau script client que vous venez de créer
• A sélectionné le deuxième composant afin qu’il modifie l’état du premier composant.