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

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 :

• Ajouter et configurer des composants
• Modules rapides du générateur d’IU : navigation dans la configuration des composants

Tableau 1. Composants utilisés dans cette procédure

Composant	Liens vers la documentation
Carrousel	Directives d’utilisation Configuration UIB

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.
   
   1. Remplacez le nom par badgeConfigState puis, dans la liste déroulante Type , choisissez JSON.
      
   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.
      
   5. Sélectionnez Appliquer pour revenir à la boîte de dialogue Modifier les paramètres de l’état du client .
      
   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 .
      
   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.
      
   4. Sélectionnez Appliquer.
      Le paramètre badgeConfigState doit être ajouté à la configuration de badge de carrousel.
   
4. Ouvrez la boîte de dialogue Modifier le script client en sélectionnant Ajouter un nouveau Modifier le script client.
   
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}'}) ;
   
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.
      
   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.
      
   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.
   
   Le titre de votre carrousel doit comporter un nombre de badges suivi du nombre d’éléments de carrousel.