Utilisation des paramètres de l’é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 Tous > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience pour travailler ou créer une expérience en sélectionnant Créer une 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 ouvrir une page.
4. Ajoutez une mise en page de 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 le 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 Remplir vers le haut.

      

8. Ajoutez le troisième composant en pointant vers 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 le bouton comme vous l’avez fait à l’étape précédente.
   2. Sélectionnez le 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 autre icône, celle nommée Flèche carrée Remplissage vers le bas.

      

9. Sélectionnez Enregistrer.
   Le composant de texte stylisé et les deux composants iconiques du bouton sont enregistrés et apparaissent sur l’étape.

   

10. Ajoutez un paramètre d’état du client en accédant à Données et scripts, en pointant vers Paramètres d’é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 Numéro.
    3. Définissez la valeur initiale en entrant le chiffre 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 Data types (Types de données ), sélectionnez Client states (É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 d’état du client.
    5. Dans Nom du paramètre d’é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 Data types (Types de données ), sélectionnez Client states (É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 pastille SUB au lieu de la pastille AJOUTER.
    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 d’état du client.
    5. Dans Nom du paramètre d’é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 Data types (Types de données ), sélectionnez Client states (É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 (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 de uns et un autre composant de bouton pour le diminuer de un. Vous avez ajouté le composant de texte stylisé pour afficher le nombre au fur et à mesure qu’il augmente et diminue.

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

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