Utilisation des paramètres d’état du client dans Générateur d'IU

Créez un compteur simple en ajoutant le composant de texte stylisé et deux boutons à une page d’expérience. Utilisez un paramètre d’état du client pour implémenter la fonctionnalité de sorte que lorsque les boutons sont sélectionnés, le nombre augmente ou diminue.

Avant de commencer

Rôle requis : ui_builder_admin

Procédure

1. Accédez à la Tout > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience pour 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éer une page dans Générateur d'IU ou ouvrez une page.
4. Ajoutez une mise en page en colonne en sélectionnant + Ajouter du contenu dans l’arborescence de contenu sous Corps.
5. Dans l’onglet Mises en page , sélectionnez Deux colonnes.
6. Ajoutez le premier composant en sélectionnant + Ajouter du contenu dans l’arborescence de contenu sous la colonne 1.

   

   1. Dans Rechercher, tapez sty.
   2. Sélectionnez le composant Texte stylisé .

      

   3. Dans le panneau de configuration, sélectionnez Aucun : configurez le composant manuellement.

      

7. Ajoutez le deuxième composant en sélectionnant + Ajouter du contenu dans l’arborescence de contenu sous la colonne 2.
   1. Dans Rechercher, tapez le bouton.
   2. Bouton Sélectionner iconique.

      

   3. Dans le panneau de configuration, sélectionnez Aucun : configurez le composant manuellement.
   4. Dans Icône, sélectionnez Flèche carrée vers le haut Remplir.

      

8. Ajoutez le troisième composant en pointant vers le bouton d’icône 1 dans l’arborescence de contenu, en sélectionnant l’icône Menu , puis en sélectionnant Ajouter après.

   

   1. Dans Rechercher, tapez le bouton comme vous l’avez fait à l’étape précédente.
   2. Sélectionnez Bouton iconique comme vous l’avez fait à l’étape précédente.
   3. Dans le panneau de configuration, sélectionnez Aucun : configurez le composant manuellement comme vous l’avez fait à l’étape précédente.
   4. Dans Icône, sélectionnez cette fois une icône différente, celle nommée Flèche carrée Remplissage vers le bas.

      

9. Sélectionnez Enregistrer.
   Le composant de texte stylisé et les deux composants d’icône de bouton sont enregistrés et apparaissent sur la scène.

   

10. Ajoutez un paramètre d’état client en accédant à Données et scripts, en pointant vers Paramètres d’état client et en sélectionnant l’icône Ajouter nouveau (plus).
    1. Changez le nom en saisissant le nombre.
    2. Remplacez le type par numéro.
    3. Définissez la valeur initiale en saisissant le nombre 0.
    4. Sélectionnez le X pour fermer la fenêtre.

       

11. Lier le composant de texte stylisé au paramètre d’état du client.
    1. Sélectionnez le composant de texte stylisé sur l’étape.
    2. Dans le panneau de configuration, pointez sur le champ Texte et sélectionnez l’icône Lier les données ou utiliser des scripts .

       

    3. Dans l’onglet Types de données , sélectionnez États du client.
    4. Double-cliquez sur la pastille de comptage .
    5. Sélectionnez Appliquer.

       

       Le champ Texte change pour compter.

12. Configurez maintenant les boutons pour augmenter ou diminuer le nombre.
    1. Sélectionnez le bouton supérieur sur l’étape.
    2. Dans le panneau de configuration, sélectionnez l’onglet Événements .
    3. Sélectionnez + Ajouter un gestionnaire d’événements.
    4. Sous Gestionnaires d’événements au niveau de la page, sélectionnez Mettre à jour le paramètre de l’état du client.
    5. Dans Nom du paramètre de l’état du client, sélectionnez nombre.
    6. Pointez sur le champ Nouvelle valeur et sélectionnez l’icône Lier les données ou utiliser des scripts .

       

    7. Dans l’onglet Types de données , sélectionnez États du client.
    8. Double-cliquez sur la pastille de comptage .
    9. Sélectionnez l’onglet Formules .
    10. Dans la liste, sélectionnez Math.
    11. Double-cliquez sur la pastille ADR .
    12. Dans la pastille de droite en haut, supprimez le texte et entrez 1.

        

    13. Sélectionnez Appliquer.
    14. Sélectionnez Ajouter.
13. Configurez maintenant le deuxième bouton en suivant le même processus que vous avez utilisé pour le premier bouton, mais sélectionnez la pilule SUB au lieu de la pastille ADD.
    1. Sélectionnez le bouton inférieur sur l’étape.
    2. Dans le panneau de configuration, sélectionnez l’onglet Événements .
    3. Sélectionnez + Ajouter un gestionnaire d’événements.
    4. Sous Gestionnaires d’événements au niveau de la page, sélectionnez Mettre à jour le paramètre de l’état du client.
    5. Dans Nom du paramètre de l’état du client, sélectionnez nombre.
    6. Pointez sur le champ Nouvelle valeur et sélectionnez l’icône Lier les données ou utiliser des scripts .
    7. Dans l’onglet Types de données , sélectionnez États du client.
    8. Double-cliquez sur la pastille de comptage .
    9. Sélectionnez l’onglet Formules .
    10. Dans la liste, sélectionnez Math.
    11. Double-cliquez sur la pastille SUB .
    12. Dans la pastille de droite en haut, supprimez le texte et tapez 1.
    13. Sélectionnez Appliquer.
    14. Sélectionnez Ajouter.
14. Testez le compteur en sélectionnant Aperçu.
15. Sélectionnez le bouton flèche vers le haut pour augmenter le nombre et le bouton flèche vers le bas pour le réduire.

    

Résultats

Vous avez ajouté un composant de bouton pour augmenter le nombre d’unités et un autre composant de bouton pour le diminuer d’une unité. Vous avez ajouté le composant de texte stylisé pour afficher le nombre au fur et à mesure qu’il augmentait et diminuait.

Pour des informations techniques détaillées sur le composant de bouton, consultez Vue d’ensemble du bouton et API.

Pour des informations techniques détaillées sur le composant de texte stylisé, voir Vue d’ensemble du texte stylisé.