Créer et lier un paramètre d’état de client à un composant (fonctionnalité avancée)

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 de paramètres d’état client et de scripts. Commencez par créer un paramètre d’état client, puis liez le paramètre d’état client à l’un des composants, tel qu’une étiquette. Ensuite, vous créez un script client et vous 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 du client 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 de stockage d’informations spécifiques à la page.

Par exemple, vous pouvez ajouter un bouton et un composant d’étiquette à votre page. Le bouton modifie la valeur de l’étiquette, par exemple en changeant 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 dans laquelle 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 de l’é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 valeurs booléennes et JSON. Par exemple, vous pouvez entrer le nom en tant que dynamic_label_value, le type en tant que chaîne et la valeur initiale en tant que valeur initiale.

   
8. Liez la valeur du paramètre d’é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 dynamique des données (
      
      Le modal 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. Liez la valeur de l’état du client à un composant et créez un script pour connecter le second composant au premier.
    1. Dans le volet gauche, sélectionnez l’icône + en regard de Scripts clients.
       
    2. Entrez un nom de script décrivant 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 l’éditeur de code Now, 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éé, puis 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 afin de vous assurer qu’ils sont connectés, sélectionnez Aperçu.
    Lorsque vous sélectionnez un composant, cela doit changer l’état du deuxième composant. Par exemple, sélectionnez le composant Bouton pour modifier le texte du composant de valeur d’étiquette de Valeur initiale à NOUVELLE VALEUR.

Résultats

Ce que vous avez fait dans cette procédure :

• Deux composants ont été ajoutés à votre page.
• Définissez un paramètre d’état du client ayant une valeur initiale.
• Lier le paramètre d’état du client au premier composant.
• A créé un script client qui met à jour une valeur définie par le paramètre d’état du client.
• Création d’un gestionnaire d’événements pour le deuxième composant afin d’appeler le nouveau script client que vous venez de créer
• Sélectionnez le deuxième composant afin qu’il modifie l’état du premier composant.