Ajouter des répéteurs aux composants

  • Rversion finale: Yokohama
  • Mis à jour 30 janv. 2025
  • 3 minutes de lecture

    • Dans , utilisez Générateur d'IUdes 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 repeater agit comme une boucle de base qui répète les données que vous fournissez dans plusieurs composants dans 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.valeur. {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 Tout > 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 rubrique 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 la table d’incidents sélectionnée, les champs de renvoi « ouvert » et « description brève » ajoutés, le nombre maximal de résultats est défini sur 5.
      5. Fermez le modal.
    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 de 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 : configurez 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 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 la pastille Rechercher plusieurs enregistrements 1 .
      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 du répéteur. Dans le répéteur, un composant représente chaque résultat.

        Configuration de liaison des 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 En-tête .
    11. Dans l’onglet Configurer , sélectionnez Aucun : configurez le composant manuellement.
    12. Configurez le composant que vous avez imbriqué dans le répéteur.

      Par exemple, lier la valeur 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 Types de données, sélectionnez Répéteur.
      3. Sous 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 valeur displayValue est liée au composant En-tête.

        Configuration de liaison des données avec @item.value.number.displayValeur 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.

      Le composant d’en-tête s’affiche cinq fois, chacune avec une valeur d’affichage différente de celle 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.