Ajouter des répéteurs aux composants

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 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 de répéteur 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 qu’il contient 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 placiez un composant 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 dans laquelle 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 l’article 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. Pour plus d’informations sur la connexion d’une ressource de données, reportez-vous à la rubrique Ajouter et configurer des ressources de données à une page

      1. Dans le tiroir des ressources de données, sélectionnez + Ajouter une ressource de données.
      2. Dans la fenêtre modale, 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 Incident sélectionnée, champs de renvoi « ouvert » et « description brève » ajoutés, nombre maximal de résultats défini à 5.
      5. Fermez la fenêtre modale.
    5. Sélectionnez un conteneur existant ou créez une mise en page 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 en savoir plus sur l’ajout de composants, reportez-vous à la section Ajouter et configurer des composants.

    7. Dans l’onglet Configurer , sélectionner 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 la pastille Rechercher plusieurs enregistrements 1 .
      4. Sous Vue Pilule, 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é
    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électionner Aucun : configurer le composant manuellement.
    12. Configurez le composant que vous avez imbriqué dans le répéteur.

      Par exemple, liez 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 Vue de la pilule, 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 des 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é de la table Incident.

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

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