Extraire les données à partir 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 de données multitables pour présenter tous les incidents actifs et les problèmes 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 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. Créez une page à partir de zéro.
   Pour plus d’informations sur la création d’une page, voir Créer une page dans le 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, entrez multi-table.
   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 numéro , puis 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. Construire la condition Actif est vrai.
   8. Sélectionnez et.
   9. Construire 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, entrez problème et sélectionnez la table Problème .
   3. Dans le champ Trier, saisissez un numéro , puis sélectionnez Numéro.
   4. Dans Nom, entrez 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. Construire la condition Actif est vrai.
   8. Sélectionnez et.
   9. Construire 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 multi-tables .
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 Incidents et problèmes actifs 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, sous l’onglet Configurer , sélectionnez Aucun : configurer le composant manuellement.
   4. Dans Dimensionnement, définissez la largeur en entrant 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 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, sous l’onglet Configurer , placez le pointeur de la souris sur le champ Tableau de données et sélectionnez l’icône Lier les données.
       
    7. Sous Types de données , sélectionnez Ressource de données.
    8. Sélectionner Données multitables 1.
    9. Sélectionnez les données de > de sortie> GlideMultiDatasource_Query > getMultiDatasourceData.
    10. Double-cliquez (ou utilisez le raccourci clavier) sur la pilule des éléments .
        
        Vérifiez que la partie 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, 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 É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électionnez la valeur > les champs.
    8. Sélectionnez la pilule 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 avec un numéro d’incident ou de problème.
       
       Vérifiez que la partie 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 l’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, 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 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électionnez la valeur > les 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 partie 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 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électionnez la valeur > les champs.
    8. Sélectionnez la deuxième pilule 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 partie 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 se trouve en haut. Chaque carte contient un en-tête avec le numéro de l’incident ou du problème. Les cartes affichent également la description (le cas échéant) de l’incident ou du problème, ainsi que son état. Les données sont extraites avec succès 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.