Ajouter un badge de carrousel Nombre d’éléments

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 2 minutes de lecture

    • Comment créer un nombre d’éléments de carrousel dynamique (affiché dans le badge) où les éléments du carrousel sont contrôlés par un répéteur qui extrait ses données d’une ressource de données.

    Avant de commencer

    Rôle requis : workspace_admin ou ui_builder_admin

    Cette procédure utilise Générateur d'IU des composants pour créer des mises en page dynamiques et interactives. Pour en savoir plus sur la configuration des composants, consultez :
    Tableau 1. Composants utilisés dans cette procédure
    Composant Liens vers la documentation
    Carrousel

    Procédure

    1. Configurez Carrousel pour utiliser un répéteur qui extrait ses données d’une ressource de données.
    2. Pour créer un objet qui détermine les propriétés du badge, ouvrez la boîte de dialogue Paramètres de l’état du client de la page.
      Pointeur de la souris sur les paramètres d’état du client sélectionnés et sur la boîte de dialogue Modifier les paramètres d’état du client telle qu’elle apparaît pour la première fois
      1. Remplacez le nom par badgeConfigState puis, dans la liste déroulante Type , choisissez JSON.
        Boîte de dialogue Modifier les paramètres de l’état du client avec le nom changé en badgeConfigState et JSON sélectionné dans la liste déroulante Type
      2. Placez le pointeur de la souris sur la zone du champ Valeur initiale et sélectionnez Modifier.
      3. Choisissez l’objet de type JSON dans la liste déroulante.
      4. Sélectionnez Ajouter une propriété , puis ajoutez les propriétés de couleur, d’étiquette et de variante du badge.
        Fenêtre contextuelle Valeur initiale avec 3 propriétés ajoutées, couleur, étiquette et variante
      5. Sélectionnez Appliquer pour revenir à la boîte de dialogue Modifier les paramètres de l’état du client .
        Retourné à Modifier les paramètres de l’état du client avec les paramètres JSON badgeConfigState
      6. Fermez la boîte de dialogue.
        Plus tard, vous utiliserez un script pour mettre à jour les propriétés de cet objet une fois la ressource de données chargée.
    3. Pour définir la configuration du badge sur l’objet qui vient d’être créé, dans l’arborescence de contenu , sélectionnez le composant Carrousel .
      1. Dans l’onglet Configuration de votre composant Carrousel, placez le pointeur de la souris sur la propriété Configuration de badge et sélectionnez l’icône Lier les données ou utiliser des scripts .
        Configuration de badge de carrousel montrant les 3 paramètres ajoutés et le pointeur survolant le bouton Lier les données ou utiliser des scripts
      2. Dans la boîte de dialogue Lier les données à la configuration du badge , sélectionnez le type de données États du client.
      3. Sélectionnez badgeConfigState (3) et, pour l’ajouter à la zone de sortie de données, sélectionnez l’icône de flèche vers le haut.
        Lier les données à la boîte de dialogue de configuration de badge avec États du client sélectionnés dans les types de données et badgeConfigState 3 mis en surbrillance avec le pointeur survolant le bouton flèche vers le haut
      4. Sélectionnez Appliquer.
        Le paramètre badgeConfigState doit être ajouté à la configuration de badge de carrousel.
      Onglet Configuration du carrousel avec le champ Configuration de badge affichant badgeConfigState en plus des 3 paramètres ajoutés précédemment
    4. Ouvrez la boîte de dialogue Modifier le script client en sélectionnant Ajouter un nouveau Modifier le script client.
      Pointeur de la souris sur le bouton Ajouter un nouveau signe plus et sur la boîte de dialogue Modifier le script client qui s’affiche lorsque le bouton Ajouter nouveau est sélectionné
    5. Pour créer un script client qui met à jour la valeur du paramètre badgeClientState « label » sur le nombre d’éléments dans le carrousel, entrez : api.setState('badgeConfigState', {... api.state.badgeConfigState, « étiquette » : « nombre : ${api.data.look_up_multiple_records_1.results.length}'}) ;
      Modifier la boîte de dialogue du script client avec le script client ajouté
    6. Ajoutez un événement à la ressource de données afin que votre script client se déclenche à chaque mise à jour de la ressource de données.
      1. En bas à gauche, sélectionnez la ressource de données Rechercher plusieurs enregistrements 1 > Onglet Événements.
        Pointeur, dans la section Données et scripts, en survolant la ressource de données Rechercher plusieurs enregistrements 1 et Modifier la boîte de dialogue Rechercher plusieurs enregistrements 1 Onglet Événements sélectionné
      2. Sélectionnez Ajouter un mappage d’événements, sélectionnez Récupération des données réussie, puis sélectionnez Continuer.
      3. Sélectionnez Add handler, faites défiler vers le bas, sélectionnez le nouveau script client que vous avez créé, puis sélectionnez Continuer.
        Boîte de dialogue pour l’ajout du gestionnaire d’événements Nouveau script client 1
      4. Le moment du déclenchement doit être défini sur Toujours.
      5. Sélectionnez Continuer.
      6. Sélectionnez Ajouter et fermez la boîte de dialogue Modifier .
    7. Dans le coin supérieur droit, sélectionnez Enregistrer > sélectionner la flèche déroulante Aperçu > Ouvrir le chemin de l'URL.
      Affichage final montrant le titre suivi du nombre : 12
      Le titre de votre carrousel doit comporter un nombre de badges suivi du nombre d’éléments de carrousel.