Ajouter des répéteurs aux composants

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

    • Dans Générateur d'IU, utilisez des répéteurs pour répéter un ou plusieurs composants avec des résultats provenant d’une ressource de données.

    Avant de commencer

    Rôle requis : ui_builder_admin

    Pourquoi et quand exécuter cette tâche

    Le composant répéteur agit comme une boucle de base qui répète les données que vous fournissez dans plusieurs composants au sein de Générateur d'IU. Les répéteurs utilisent un tableau ou un tableau d’objets. Par exemple, le tableau [{"task » : « A"},{"task » : « B"}] répète le contenu à l’intérieur deux fois. Les répéteurs vous permettent de lier des valeurs à une propriété de tableau de données. @item.value. {property_name} Lie les valeurs au composant à l’intérieur des répéteurs. Si vous souhaitez lier une tâche, vous pouvez la lier en tant que @item.value.task, et le répéteur affiche la valeur correcte.

    Les composants à l’intérieur d’un répéteur répètent le nombre d’éléments dans la source de données, que la sortie du composant soit dynamique ou non. Par exemple, supposons que vous placez un composant d’en-tête à l’intérieur d’un répéteur avec trois éléments de données, mais que vous ne modifiez pas le champ Étiquette. Vous voyez alors trois instances de l’en-tête avec la même étiquette de sortie.

    Procédure

    1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
    2. Ouvrez une expérience pour y 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. Ouvrez l’éditeur de la page sur laquelle vous souhaitez ajouter le répéteur.
      Si vous n’avez pas créé de page pour votre expérience, consultez la section Créer une page dans Générateur d'IU pour en savoir plus sur la création d’une page.
    4. Connectez une ressource de données à votre page.

      Par exemple, ajoutez la ressource de données Rechercher plusieurs enregistrements à votre page. Consultez Ajouter et configurer des ressources de données à une page pour plus d’informations sur la connexion d’une ressource de données.

      1. Dans le tiroir des ressources de données, sélectionnez + Ajouter une ressource de données.
      2. Dans le modal, recherchez la ressource de données Rechercher plusieurs enregistrements et sélectionnez Ajouter.
      3. Dans le champ Table , saisissez Incident.
      4. Dans le champ Nombre maximal de résultats , saisissez 5.

        La ressource de données Rechercher plusieurs enregistrements est configurée.

        Configuration des ressources de données avec table d’incidents sélectionnée, champs de renvoi « ouvert » et « description brève » ajoutés, nombre maximal de résultats défini sur 5.
      5. Fermer la fenêtre modale.
    5. Sélectionnez un conteneur existant ou créez une disposition en colonne.
      Consultez Organiser les composants dans les pages du générateur d'IU pour plus d'informations.
    6. Ajoutez le composant répéteur à votre page.
      Flèche pointant vers le composant de répéteur dans la boîte à outils.

      Pour plus d’informations sur l’ajout de composants, reportez-vous à la section Ajouter et configurer des composants.

    7. Dans l’onglet Configurer , sélectionnez Aucun : configurer le composant manuellement.
    8. Dans l’onglet Configurer , ajoutez un tableau qui définit les données pour les composants répétés.
      1. Pointez sur le tableau de données et sélectionnez l’icône Lier les données (icône Liaison dynamique des données).
      2. Sous Types de données, sélectionnez Ressource de données.
      3. Dans la colonne suivante, sélectionnez 1 pastille Rechercher plusieurs enregistrements .
      4. Sous la vue Pastille, double-cliquez ou faites glisser les résultats pour ajouter la sortie @data.look_up_multiple_records_1.results .
      5. Sélectionnez Appliquer.

        Les résultats de la ressource de données sont liés au composant de répéteur. Dans le répéteur, un composant représente chaque résultat.

        Configuration de liaison de données avec @data.look_up_multiple_records_1.results ajoutée
    9. Sous le répéteur que vous avez ajouté à l’étape précédente, sélectionnez + Ajouter du contenu.
      Arborescence de contenu avec une flèche noire pointant vers le lien Ajouter du contenu sous le composant de répéteur.
    10. Ajoutez un composant d’en-tête .
    11. Dans l’onglet Configurer , sélectionnez Aucun : configurer le composant manuellement.
    12. Configurez le composant que vous avez imbriqué dans le répéteur.

      Par exemple, lier displayValue au composant. Consultez Connecter les données à vos composants pour plus d'informations.

      1. Déplacez votre curseur sur le champ Étiquette et sélectionnez l’icône Lier les données (icône Liaison dynamique des données).
      2. Sous Data types (Types de données), sélectionnez Repeater (Répéteur).
      3. Dans la vue Pastille, sélectionnez la pastille de valeur .
      4. Dans la colonne suivante, sélectionnez la pastille numérique .
      5. Dans la colonne suivante, double-cliquez ou faites glisser displayValue pour ajouter la sortie @item.value.number.displayValue .
      6. Sélectionnez Appliquer.

        La displayValue est liée au composant En-tête.

        Configuration de liaison de données avec @item.value.number.displayValue ajoutée
    13. Sélectionnez Enregistrer.

      Le composant que vous avez lié à la ressource de données apparaît sur l’étape et est répété cinq fois, une fois pour chaque résultat renvoyé par la table Incident.

      Composant d’en-tête affiché cinq fois, chacune avec une valeur d’affichage différente de la table Incident.
    14. Affichez et testez votre page en sélectionnant le bouton Aperçu .
      Un onglet s’ouvre pour afficher l’aperçu de la page avec les données répétées.

      L’aperçu de la page affiche toutes les données des composants répétés.