Extraire les données de plusieurs sources

Découvrez comment obtenir des données de différentes sources à utiliser dans un seul composant.

Avant de commencer

Rôle requis : ui_builder_admin

Pourquoi et quand exécuter cette tâche

Placez le composant du conteneur de base de carte dans un répéteur et utilisez la configuration des données multitables pour présenter tous les incidents actifs et problèmes créés au cours des deux dernières années.

Procédure

1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience pour travailler ou créer une expérience en sélectionnant Créer une 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. Créer une page à partir de zéro.
   Pour plus d’informations sur la création d’une page, consultez Créer une page dans Générateur d’IU.
4. Ajoutez une ressource de données multitable.
   1. Dans l’étagère de données, sélectionnez + Ajouter une ressource de données.
      
   2. Dans Rechercher, saisissez multitable.
   3. Sélectionnez Données multitables.
      
   4. Sélectionnez Ajouter.
5. Configurez la première source de données.
   1. Dans Sources de données, sélectionnez + Ajouter.
      
   2. Dans Table, saisissez Incident et sélectionnez la table Incident .
   3. Dans le champ Trier, saisissez un nombre et sélectionnez Numéro.
   4. Dans Nom, saisissez Incident.
   5. Dans les champs Retour, ajoutez Numéro, État, Description et Actif.
      
   6. Sélectionnez Modifier les conditions.
   7. Créer la condition Active is true (Actif est vrai).
   8. Sélectionnez et.
   9. Créer la condition Créé le 2 dernières années.
      
   10. Sélectionnez Appliquer.
   11. Sélectionnez Appliquer.
6. Configurez la deuxième source de données.
   1. Dans Sources de données, sélectionnez + Ajouter.
   2. Dans Table, saisissez le problème et sélectionnez la table Problème .
   3. Dans le champ Trier, saisissez un nombre et sélectionnez Numéro.
   4. Dans Nom, saisissez Problème.
   5. Dans les champs Retour, ajoutez Numéro, État, Description et Actif.
      Lors de la création d’une ressource de données multitable, chaque source de données doit avoir les mêmes champs de retour spécifiés et dans le même ordre. Cela permet de s’assurer que les données affichées sur la page sont cohérentes et précises.

      

   6. Sélectionnez Modifier les conditions.
   7. Créer la condition Active is true (Actif est vrai).
   8. Sélectionnez et.
   9. Créer la condition Créé le 2 dernières années.
   10. Sélectionnez Appliquer.
   11. Sélectionnez Appliquer.
   12. Sélectionnez le X pour fermer la fenêtre contextuelle Modifier les données multitables .
7. Sélectionnez Enregistrer.
8. Ajoutez le composant d’en-tête.
   1. Dans l’arborescence de contenu, sélectionnez + Ajouter du contenu sous Corps.
   2. Dans Rechercher , entrez l’en-tête.
   3. Sélectionnez le composant En-tête .
   4. Dans le panneau de configuration, sous l’onglet Configurer , sélectionnez Aucun : configurer le composant manuellement.
   5. Dans Étiquette, supprimez le texte par défaut et saisissez les incidents actifs et problèmes créés au cours des deux dernières années.
      
   6. Sélectionnez Enregistrer.
9. Ajoutez un conteneur.
   1. Dans l’arborescence de contenu, sélectionnez + Ajouter du contenu sous l’en-tête 1.
   2. Dans l’onglet Mises en page , dans la section Avancé , sélectionnez Flexbox.
      
   3. Dans le panneau de configuration, sous l’onglet Configurer , sélectionnez Aucun : configurer le composant manuellement.
   4. Dans Dimensionnement, définissez la largeur en saisissant 300.
      
   5. Sélectionnez Enregistrer.
10. Ajoutez le composant de répéteur.
    1. Dans l’arborescence de contenu, sélectionnez + Ajouter du contenu sous Conteneur 1.
    2. Dans Rechercher , entrez le répéteur.
    3. Sélectionnez le composant Répéteur .
    4. Dans le panneau de configuration, sous l’onglet Configurer , sélectionnez Aucun : configurer le composant manuellement.
    5. Sélectionnez Enregistrer.
    6. Dans le panneau de configuration, dans l’onglet Configurer , passez la souris sur le champ Tableau de données et sélectionnez l’icône de liaison des données.
       
    7. Sous Types de données , sélectionnez la ressource de données.
    8. Sélectionner les données multitables 1.
    9. Sélectionner sortie > données > GlideMultiDatasource_Query > getMultiDatasourceData.
    10. Double-cliquez (ou utilisez le raccourci clavier) sur la pastille des éléments .
        
        Vérifiez que la section supérieure est exacte.

        

    11. Sélectionnez Appliquer.
    12. Sélectionnez Enregistrer.
11. Ajoutez le composant du conteneur de base de carte dans le répéteur.
    1. Dans l’arborescence de contenu, sélectionnez + Ajouter du contenu sous Répéteur 1.
    2. Localisez et sélectionnez le composant Conteneur de base de carte .
    3. Dans le panneau de configuration, sous l’onglet Configurer , sélectionnez Aucun : configurer le composant manuellement.
    4. Sélectionnez l’onglet Styles .
    5. Pour ajouter un peu d’espace autour des cartes, allez dans Espacement, sélectionnez Marge, puis sélectionnez M (pour moyen).
       
    6. Sélectionnez Enregistrer.
12. Ajoutez le composant d’en-tête dans le conteneur de base de carte.
    1. Dans l’arborescence de contenu, sélectionnez + Ajouter du contenu sous Conteneur de base de carte 1.
    2. Localisez et sélectionnez le composant En-tête .
    3. Dans le panneau de configuration, sous l’onglet Configurer , sélectionnez Aucun : configurer le composant manuellement.
    4. Dans le panneau de configuration, sous l’onglet Configurer , supprimez le texte par défaut dans l’étiquette.
    5. Pointez sur le champ Étiquette et sélectionnez l’icône de liaison des données.
    6. Sous Data types (Types de données ), sélectionnez Repeater (Répéteur).
    7. Sélectionner valide > champs.
    8. Sélectionnez la pastille supérieure et, dans la dernière colonne, vérifiez displayValue avec un numéro d’incident ou de problème.
    9. Double-cliquez (ou utilisez le raccourci clavier) sur la pastille displayValue contenant un numéro d’incident ou de problème.
       
       Vérifiez que la section supérieure est exacte.

       

    10. Sélectionnez Appliquer.
    11. Dans l’onglet Configurer , sélectionnez l’option Masquer la marge inférieure .
        
    12. Sélectionnez Enregistrer.
13. Ajoutez le premier composant de texte stylisé pour afficher la description de l’incident ou du problème.
    1. Dans l’arborescence de contenu, pointez sur Titre 2, sélectionnez l’icône de menu (trois points verticaux), puis sélectionnez Ajouter après.
       
    2. Localisez et sélectionnez le composant Texte stylisé .
    3. Dans le panneau de configuration, sous l’onglet Configurer , sélectionnez Aucun : configurer le composant manuellement.
    4. Dans le panneau de configuration, sous l’onglet Configurer , supprimez le texte par défaut dans le texte.
    5. Pointez sur le champ Texte et sélectionnez l’icône de liaison des données.
    6. Sous Data types (Types de données ), sélectionnez Repeater (Répéteur).
    7. Sélectionner valide > champs.
    8. Sélectionnez la troisième pastille de la liste et dans la dernière colonne, vérifiez que displayValue ne contient aucune information.
    9. Double-cliquez (ou utilisez le raccourci clavier) sur la pastille displayValue sans valeur.
       
       Vérifiez que la section supérieure est exacte.

       

    10. Sélectionnez Appliquer.
    11. Pour réduire la taille du texte, accédez à l’onglet Configurer et remplacez la balise HTML par Paragraphe.
    12. Sélectionnez Enregistrer.
14. Ajoutez le deuxième composant de texte stylisé pour afficher l’état de l’incident ou du problème.
    1. Dans l’arborescence de contenu, pointez sur Texte stylisé 1, sélectionnez l’icône de menu (trois points verticaux), puis sélectionnez Ajouter après.
    2. Localisez et sélectionnez le composant Texte stylisé .
    3. Dans le panneau de configuration, sous l’onglet Configurer , sélectionnez Aucun : configurer le composant manuellement.
    4. Dans le panneau de configuration, sous l’onglet Configurer , supprimez le texte par défaut dans le texte.
    5. Pointez sur le champ Texte et sélectionnez l’icône de liaison des données.
    6. Sous Data types (Types de données ), sélectionnez Repeater (Répéteur).
    7. Sélectionner valide > champs.
    8. Sélectionnez la deuxième pastille de la liste et, dans la dernière colonne, vérifiez que la displayValue contient un état tel que Resolved ou In Progress (En cours).
    9. Double-cliquez (ou utilisez le raccourci clavier) sur la pastille displayValue avec une valeur d’état.
       
       Vérifiez que la section supérieure est exacte.

       

    10. Sélectionnez Appliquer.
    11. Pour réduire la taille du texte, accédez à l’onglet Configurer et remplacez la balise HTML par Paragraphe.
    12. Sélectionnez Enregistrer.
15. Sélectionnez Aperçu.
    L’en-tête de la page est en haut. Chaque carte contient un en-tête avec le numéro d’incident ou de problème. Les cartes affichent également la description (le cas échéant) de l’incident ou du problème et son état. Les données sont extraites avec succès à partir de deux sources : la table des incidents et la table des problèmes.

    

16. Sélectionnez le X pour fermer la superposition de l’aperçu.