Créer un compteur 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 client pour implémenter la fonctionnalité de sorte que le nombre augmente ou diminue lorsque les boutons sont sélectionnés.

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 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é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 : configurer 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 un bouton.
   2. Bouton Sélectionner iconique.

      

   3. Dans le panneau de configuration, sélectionnez Aucun : configurer 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 sur l’icône de bouton 1 dans l’arborescence de contenu, en sélectionnant l’icône Menu et en sélectionnant Ajouter après.

   

   1. Dans Rechercher, tapez bouton comme vous l’avez fait à l’étape précédente.
   2. Sélectionnez le bouton d’icône 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 une autre icône cette fois-ci, celle nommée Flèche carrée vers le bas Remplir.

      

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 du client en accédant à Données et scripts, en pointant vers Paramètres de l’état du client et en sélectionnant l’icône Ajouter nouveau (plus).
    1. Modifiez le nom en saisissant le nombre.
    2. Remplacez le type par Nombre.
    3. Définissez la valeur initiale en entrant le nombre 0.
    4. Sélectionnez le X pour fermer la fenêtre.

       

11. Liez 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 pilule de comptage .
    5. Sélectionnez Appliquer.

       

       Le champ Texte se transforme en Nombre.

12. Configurez maintenant les boutons pour augmenter ou diminuer le nombre.
    1. Sélectionnez le bouton supérieur de 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 pilule de comptage .
    9. Sélectionnez l’onglet Formules .
    10. Dans la liste, sélectionnez Mathématiques.
    11. Double-cliquez sur la pilule ADD .
    12. Dans la pilule de droite en haut, supprimez le texte et saisissez 1.

        

    13. Sélectionnez Appliquer.
    14. Sélectionnez Ajouter.
13. Configurez maintenant le deuxième bouton en suivant le même processus que celui que vous avez utilisé pour le premier bouton, mais sélectionnez la pilule SUB au lieu de la pilule ADD.
    1. Sélectionnez le bouton du bas de 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 pilule de comptage .
    9. Sélectionnez l’onglet Formules .
    10. Dans la liste, sélectionnez Mathématiques.
    11. Double-cliquez sur la pilule SUB .
    12. Dans la pilule 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 diminuer.

    

Résultats

Vous avez ajouté un composant de bouton pour augmenter le nombre d’une unité et un autre composant de bouton pour le réduire d’une unité. Vous avez ajouté le composant de texte stylisé pour afficher le nombre à mesure qu’il augmente et diminue.

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

Pour plus d’informations techniques sur le composant texte stylisé, reportez-vous à la rubrique Vue d’ensemble du texte stylisé.