Extraire les données de plusieurs sources

Découvrez comment obtenir des données de différentes sources pour les 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 de données multi-tables pour présenter tous les incidents et problèmes actifs créés au cours des deux dernières années.

Procédure

1. Accédez à la Tout > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience pour 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. Créez 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 multitables.
   1. Dans l’étagère des données, sélectionnez + Ajouter une ressource de données.
      
   2. Dans Rechercher, saisissez multitable.
   3. Sélectionner les 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 Nombre, État, Description et Actif.
      
   6. Sélectionnez Modifier les conditions.
   7. Générer la condition Actif est défini sur vrai.
   8. Sélectionnez et.
   9. Créer la condition Créé au cours des 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, entrez 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 Nombre, É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. Générer la condition Actif est défini sur vrai.
   8. Sélectionnez et.
   9. Créer la condition Créé au cours des 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, dans l’onglet Configurer , sélectionnez Aucun : configurer le composant manuellement.
   5. Dans Étiquette, supprimez le texte par défaut et saisissez 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 En-tête 1.
   2. Dans l’onglet Mises en page , dans la section Avancé , sélectionnez Flexbox.
      
   3. Dans le panneau de configuration, dans 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, dans 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 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 de 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, dans 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. Recherchez et sélectionnez le composant En-tête .
    3. Dans le panneau de configuration, dans l’onglet Configurer , sélectionnez Aucun : configurer le composant manuellement.
    4. Dans le panneau de configuration, dans l’onglet Configurer , supprimez le texte par défaut dans Étiquette.
    5. Pointez sur le champ Étiquette et sélectionnez l’icône de liaison des données.
    6. Sous Types de données , sélectionnez Répéteur.
    7. Sélectionner valide > champs.
    8. Sélectionnez la pastille supérieure et, dans la dernière colonne, recherchez 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 En-tête 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, dans l’onglet Configurer , sélectionnez Aucun : configurer le composant manuellement.
    4. Dans le panneau de configuration, dans l’onglet Configurer , supprimez le texte par défaut dans Texte.
    5. Pointez sur le champ Texte et sélectionnez l’icône de liaison des données.
    6. Sous Types de données , sélectionnez 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 la 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, dans l’onglet Configurer , sélectionnez Aucun : configurer le composant manuellement.
    4. Dans le panneau de configuration, dans l’onglet Configurer , supprimez le texte par défaut dans Texte.
    5. Pointez sur le champ Texte et sélectionnez l’icône de liaison des données.
    6. Sous Types de données , sélectionnez 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 displayValue contient un état tel que Résolu ou 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 de deux sources : la table d’incidents et la table de problèmes.

    

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