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

Créer et lier une valeur de paramètre d’état de client à un composant dans Générateur d'IU. En ajoutant des valeurs personnalisées à vos composants, ceux-ci 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 scripts et de paramètres d’état client. Commencez par créer un paramètre d’état de client, puis liez ce paramètre d’état de client à l’un des composants, tel qu’une étiquette. Ensuite, créez un script client et liez-le à 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 pour stocker des 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 Tous > 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.
   Consultez Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour en savoir plus 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 éléments à 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 .
   
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, le booléen et JSON. Par exemple, vous pouvez saisir 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 des données et sélectionnez l’icône de liaison de données dynamiques (icône
      
      Le modal de liaison de données s’affiche.

      

   4. Sélectionnez É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, puis Ouvrir.
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 des 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 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 pour vous assurer qu’ils sont connectés, sélectionnez Aperçu.
    Lorsque vous sélectionnez un composant, cela devrait modifier l’état du deuxième composant. Par exemple, sélectionnez le composant Bouton pour modifier le texte du composant Valeur d’étiquette de Valeur initiale en NOUVELLE VALEUR.

Résultats

Ce que vous avez fait dans cette procédure :

• Deux composants supplémentaires ont été ajoutés à votre page.
• Définissez un paramètre de l’é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éez un gestionnaire d’événements pour que le deuxième composant appelle le nouveau script client que vous venez de créer
• Sélectionnez le deuxième composant de sorte qu’il modifie l’état du premier composant.