Créer des affichages de cartes filtrées dynamiques

Créez une mise en page de carte interactive pour afficher les enregistrements, ajoutez une liste déroulante pour filtrer les cartes visibles par nom et configurez chaque carte pour ouvrir l’enregistrement complet dans une autre Générateur d'IU page lorsque cette option est sélectionnée.

Avant de commencer

Rôle requis : ui_builder_admin

Pourquoi et quand exécuter cette tâche

Cet exemple montre comment lier des données à des composants afin de pouvoir afficher des informations d’enregistrement dans des dispositions personnalisées. Par exemple, vous pouvez présenter des enregistrements sous forme de cartes sélectionnables plutôt que dans une vue de liste traditionnelle. Pour cette procédure, les données proviennent de la table Incident.

Figure 1. Aperçu final de la mise en page

1. Liste déroulante : filtre les cartes visibles par nom d’appelant.
2. Conteneur de base de carte : contient le contenu d’une carte individuelle et permet l’interaction par clic.
3. En-tête : affiche le numéro d’enregistrement.
4. Valeur de l’étiquette : affiche le nom de l’appelant avec une étiquette statique (« Appelant : »).
5. Texte stylisé : affiche la brève description de l’enregistrement.
6. Valeur en surbrillance : affiche le niveau de priorité de l’enregistrement avec le style de couleur appliqué par le biais d’un script.

Cette procédure utilise Générateur d'IU des composants pour créer des mises en page dynamiques et interactives. Pour en savoir plus sur la configuration des composants, consultez :

• Ajouter et configurer des composants
• Modules rapides du générateur d’IU : navigation dans la configuration des composants

Tableau 1. Composants utilisés dans cette procédure

Composant	Liens vers la documentation
Conteneur de base de carte	Directives d’utilisation Configuration UIB
Liste déroulante	Directives d’utilisation Configuration UIB
En-tête	Directives d’utilisation Configuration UIB
Valeur en surbrillance	Directives d’utilisation Configuration UIB
Valeur de l'étiquette	Directives d’utilisation Configuration UIB
Texte stylisé	Directives d’utilisation Configuration UIB

Procédure

Partie 1 : créer la mise en page de la carte

Ajoutez un répéteur lié à une ressource de données et créez les conteneurs de cartes qui affichent chaque enregistrement.

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. 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. Créez une ressource de données pour extraire des enregistrements de la table Incident.

   Les ressources de données exposent les données des tables et des enregistrements à la page. Dans cet exemple, nous ajoutons une ressource de données pour extraire des enregistrements de la table d’incidents afin de pouvoir les afficher à l’aide de composants. Pour plus d'informations, consultez Ajouter et configurer des ressources de données à une page.

   1. Dans le tiroir Données et scripts , sous Ressources de données, sélectionnez + Ajouter une ressource de données.
   2. Sélectionnez Rechercher plusieurs enregistrements , puis sélectionnez Ajouter.
   3. Sélectionnez l’ID de look_up_multiple_records_1 pour ouvrir le formulaire Détails des ressources de données .
   4. Remplacez le texte du champ Étiquette de ressource de données par Recherche d’incident.
      Le champ ID de ressource de données se remplit automatiquement.
   5. Sélectionnez Appliquer.
   6. Dans la boîte de dialogue de recherche Modifier l’incident , renseignez les champs :

      Champ	Action
      Table	Saisissez l’incident, puis sélectionnez-le dans la liste.
      Champs pour retour	Sélectionnez + Ajouter. Saisissez Appelant, sélectionnez-le pour l’ajouter à la colonne Sélectionné , puis effacez la zone de recherche. Répétez l’étape ci-dessus pour la priorité et la description courte. Sélectionnez Appliquer.
      Nombre maximal de résultats	Entrez 25.

      

   7. Sélectionnez le X en haut à droite pour fermer la boîte de dialogue.
   8. Sélectionnez Enregistrer.
5. Ajoutez une mise en page à colonne unique pour contenir les composants.
   1. Dans l’arborescence de contenu, sous Corps, sélectionnez + Ajouter du contenu.
   2. Sélectionnez Colonne unique , puis sélectionnez + Ajouter.
   3. Une fois la colonne 1 sélectionnée dans l’arborescence de contenu, accédez à Mise en page dans le panneau de configuration et définissez la direction sur Ligne.
      
6. Ajoutez et configurez un répéteur sur votre page avec liaison de données.

   La liaison de données est le processus d’association de données exposées par une ressource de données à un composant. Dans cet exemple, nous lions les résultats de notre ressource de données de recherche d’incidents à la propriété Data array du composant de répéteur. Pour plus d'informations, consultez Connecter les composants de données.

   1. Dans l’arborescence de contenu, sous la colonne 1, sélectionnez + Ajouter du contenu.
   2. Entrez Répéteur, puis sélectionnez-le dans la boîte à outils, puis sélectionnez Ajouter.
   3. Sélectionnez Annuler pour fermer la fenêtre prédéfinie.
   4. En maintenant le répéteur 1 sélectionné, dans le panneau de configuration, passez la souris sur le champ Tableau de données et sélectionnez l’icône de liaison des données .
      
   5. Dans la boîte de dialogue Lier les données au tableau de données , sous Types de données, sélectionnez Ressource de données.
   6. Sélectionnez la pastille de recherche d’incident , puis double-cliquez ou faites glisser la pastille de résultats pour la déplacer vers la zone ci-dessus.

      Figure 2. Lier les données au tableau de données

      

   7. Sélectionnez Appliquer pour confirmer la liaison.
   8. Dans le panneau de configuration, sélectionnez l’onglet Styles , sélectionnez Activer les styles, puis renseignez les champs :

      Champ	Valeur
      Type	Grille
      Colonnes	4
      Écart	S

   9. Sélectionnez Enregistrer.
7. Créez l’affichage de la carte.
   1. Dans l’arborescence de contenu, sous Répéteur 1, sélectionnez + Ajouter du contenu.
   2. Saisissez Conteneur de base de carte, sélectionnez le composant, puis sélectionnez + Ajouter.
   3. Dans le panneau de configuration, sélectionnez l’onglet Configurer , puis définissez l’interaction sur Cliquer.
   4. Dans le panneau de configuration, sélectionnez l’onglet Styles et définissez la largeur sur 300px.
   5. Définissez la hauteur sur 200px.
      

Partie 2 : Ajouter des composants et lier des données

Ajoutez des composants à chaque carte et configurez-les pour afficher les détails de l’enregistrement en liant les champs appropriés.

8. Ajoutez des composants au conteneur de base de carte.
   1. Dans l’arborescence de contenu, sous Conteneur de base de carte 1, sélectionnez + Ajouter du contenu.
   2. Ajoutez les composants suivants dans l’ordre indiqué ci-dessous et modifiez chacun d’eux dans le panneau de configuration :
      Conseil :

      Pour conserver tous les composants imbriqués dans le conteneur de base de carte, ajoutez le premier composant, puis utilisez Ajouter après à partir de l’icône de configuration pour chacun des composants suivants.

      Si une fenêtre prédéfinie apparaît, sélectionnez Annuler pour la fermer.

      1. En-tête : aucune configuration initiale requise
      2. Valeur de l’étiquette : dans l’onglet Configurer , dans le champ Étiquette , saisissez Appelant :
      3. Texte stylisé : dans l’onglet Configurer , définissez la balise HTML sur Paragraphe
      4. Valeur en surbrillance : dans l’onglet Styles , définissez la largeur sur 100px

      

   3. Sélectionnez Enregistrer.
9. Liez les données des enregistrements d’incidents aux composants que nous avons ajoutés à l’étape précédente.

   Composant	Champ	Chemin d'accès
   En-tête	Étiquette	valeur > nombre > displayValue
   Valeur de l'étiquette	Valeur	valeur > caller_id > displayValue
   Texte stylisé	Texte	valeur > short_description > displayValue
   Valeur en surbrillance	Étiquette	valeur > priorité > displayValue

   1. Dans l’arborescence de contenu, sélectionnez le composant répertorié dans la table.
   2. Dans le panneau de configuration, sous l’onglet Configurer, survolez le champ spécifié et sélectionnez l’icône de liaison des données .
   3. Dans le modal de liaison de données :
      • Sur la gauche, sélectionnez Répéteur sous Data types (Types de données).
      • Sur la droite, en mode Pastille, suivez le chemin indiqué dans la table en sélectionnant chaque pastille dans l’ordre (par exemple, pour En-tête, sélectionnez valeur, puis numéro, puis displayValue).
   4. Lorsque vous atteignez la dernière pastille (displayValue), double-cliquez ou faites-la glisser pour la déplacer vers la zone au-dessus, puis sélectionnez Appliquer.
   5. Répétez le processus pour chaque ligne du tableau.

      

   6. Sélectionnez Enregistrer.
10. Utilisez un script pour définir la couleur de la priorité pour chaque enregistrement.
    1. Dans l’arborescence de contenu, sélectionnez Valeur en surbrillance 1.
    2. Dans le panneau de configuration, dans l’onglet Configurer, passez la souris sur Couleur et sélectionnez l’icône de liaison des données .
    3. Sélectionnez l’icône Utiliser un script en haut à droite.
    4. Remplacez le code existant par ce qui suit :

       function getPriorityColor(record) {
           let priority = record.api.item.value.priority.value;
       
           switch (priority) {
               case '1':
                   return 'critical';
               case '2':
                   return 'high';
               case '3':
                   return 'moderate';
               case '4':
                   return 'low';
               case '5':
                   return 'gray';
               default:
                   return 'gray';
           }
       }

    5. Sélectionnez Appliquer.

    Vérifiez que la valeur en surbrillance change de couleur en fonction de la priorité de l’enregistrement.

    

Partie 3 : Ajouter un filtrage avec liste déroulante

Configurez un événement de liste déroulante pour mettre à jour un paramètre d’état du client et actualiser la ressource de données, en filtrant l’affichage de la carte.

11. Créez un paramètre d’état de client pour suivre les sélections de l’utilisateur.
    Le paramètre d’état du client peut être modifié par des composants lorsqu’ils déclenchent des événements. Pour plus d'informations, consultez Paramètres de l'état du client.
    1. Dans le tiroir Données et scripts , à côté de Paramètres de l’état du client, sélectionnez l’icône + .
    2. Dans la boîte de dialogue Modifier les paramètres de l’état du client , renseignez les champs :
       • Nom : selected_caller
       • Type : chaîne
       • Valeur initiale : vide
    3. Sélectionnez Appliquer.
12. Modifiez la ressource de données pour utiliser le paramètre d’état du client comme une valeur conditionnelle.
    1. Dans le tiroir Données et scripts , sélectionnez la ressource de données de recherche d’incident .
    2. Sélectionnez Modifier les conditions.
       
    3. Dans la boîte de dialogue Conditions , entrez Appelant dans le premier champ et sélectionnez-le dans la liste.
    4. Laissez le deuxième champ tel quel.
    5. Placez le pointeur de la souris sur le troisième champ et sélectionnez l’icône de liaison des données.
    6. Dans le modal de liaison de données, sélectionnez États clients, puis double-cliquez ou faites glisser la pastille selected_caller pour la déplacer vers la zone au-dessus.
    7. Sélectionnez Appliquer pour confirmer la liaison.
    8. Sélectionnez Appliquer pour enregistrer la condition.
       
    9. Sélectionnez le X en haut à droite pour fermer la boîte de dialogue Recherche d’incident .
13. Créez une deuxième ressource de données pour interroger les utilisateurs à partir de la table Utilisateur.
    1. Dans le tiroir Données et scripts , sélectionnez le +, puis sélectionnez la ressource de données.
    2. Sélectionnez Rechercher plusieurs enregistrements , puis sélectionnez Ajouter.
    3. Sélectionnez l’ID de look_up_multiple_records_1 pour ouvrir le formulaire Détails des ressources de données .
       
    4. Remplacez le texte du champ Étiquette de ressource de données par sys_user_lookup.
       Le champ ID de ressource de données se remplit automatiquement.
    5. Sélectionnez Appliquer.
    6. Dans la boîte de dialogue Modifier sys_user_lookup , renseignez les champs suivants :

       Champ	Action
       Table	Saisissez l’utilisateur (sys_user), puis sélectionnez-le dans la liste.
       Champs pour retour	Sélectionnez + Ajouter. Saisissez un nom, puis sélectionnez-le dans la liste pour l’ajouter à la colonne Sélectionné . Sélectionnez Appliquer.
       Trier par	Saisissez un nom, puis sélectionnez-le dans la liste.
       Nombre maximal de résultats	Entrez 250.

    7. Sélectionnez le X en haut à droite pour fermer la boîte de dialogue.
    8. Sélectionnez Enregistrer.
    Cette ressource de données recherche des utilisateurs à partir de la table Utilisateur. Nous référencerons ces données pour remplir la liste déroulante à l’étape suivante.
14. Ajoutez et configurez un composant de liste déroulante.
    1. Dans l’arborescence de contenu, placez le pointeur de la souris sur la mise en page de colonne 1 et sélectionnez l’icône Configurer.
    2. Sélectionnez Ajouter avant.
    3. Recherchez une liste déroulante, sélectionnez-la dans la boîte à outils, puis sélectionnez Ajouter.
    4. Dans le panneau de configuration, accédez à l’onglet spécifié et configurez les champs suivants :

       Onglet	Action
       Configurer	Dans le champ de texte Espace réservé : Entrée Sélectionner un appelant.
       Configurer	Dans le champ Variante : sélectionnez Primaire.
       Configurer	Dans le champ Éléments de la liste : Passez la souris sur le champ et sélectionnez l’icône de liaison des données. Dans le modal de liaison de données, sélectionnez l’icône Utiliser un script . Remplacez le code existant par ce qui suit : Conseil : Vous pouvez sélectionner l’icône de format du code pour rendre le code plus lisible. function evaluateProperty({ api, helpers }) { const userArray = api.data.sys_user_lookup.results; let outputArray = []; for (let i = 0; i < userArray.length; i++) { const obj = { 'id': `${userArray[i]._row_data.uniqueValue}`, 'label': `${userArray[i].name.displayValue}` }; outputArray.push(obj); } return outputArray; } Sélectionnez Appliquer.
       Styles	Largeur : Entrez 200.
       Styles	Marge intérieure : Sélectionnez Marge intérieure, puis choisissez M dans la liste.

15. Configurez la liste déroulante avec des événements afin qu’elle puisse modifier le paramètre d’état du client que nous avons créé.
    1. Une fois la liste déroulante 1 sélectionnée dans l’arborescence de contenu, sélectionnez l’onglet Événements dans le panneau de configuration, puis sélectionnez Ajouter un mappage d’événements.
    2. Sélectionnez l’événement Éléments sélectionnés modifiés , puis sélectionnez Continuer.
    3. Sélectionnez le gestionnaire de paramètres Définir l’état du client , puis sélectionnez Continuer.
    4. Définissez les propriétés suivantes :

       Champ	Action
       Nom de paramètre de l'état du client	Sélectionnez selected_caller dans la liste.
       Valeur à utiliser après l'événement déclencheur	Passez la souris sur le champ et sélectionnez l’icône de liaison des données. Sous la vue Pastille, double-cliquez ou faites glisser la pastille de valeur pour la déplacer vers la zone au-dessus. Sélectionnez Appliquer pour confirmer la liaison. Sélectionnez Ajouter.

    5. Dans l’onglet Événements du panneau de configuration, sélectionnez Ajouter un gestionnaire sous l’événement que nous avons ajouté à l’étape précédente.
    6. Localisez la recherche d’incident (1), sélectionnez le gestionnaire ACTUALISATION , puis sélectionnez Continuer.
       
    7. Sélectionnez Ajouter.
    8. Sélectionnez Enregistrer.
    Après avoir configuré la liste déroulante, la sélection d’un appelant met à jour le paramètre d’état du client selected_caller et actualise la ressource de données pour afficher les enregistrements de cet appelant.

Partie 4 : Activer la navigation dans les enregistrements

Configurez chaque carte de sorte que sa sélection ouvre la page d’enregistrement à l’aide du sys_id des données du répéteur.

16. Créez une autre page dans votre expérience qui ouvre l’enregistrement.
    1. Revenez à la vue de l’expérience en sélectionnant le nom de votre expérience (par exemple, « Expérience de démonstration ») en haut à gauche.
    2. Sélectionnez le + en regard de Pages, puis sélectionnez Créer une nouvelle page.
    3. Placez le pointeur de la souris sur le modèle d’enregistrement standard et sélectionnez Utiliser un modèle.
    4. Nommez la page d’enregistrement d’incident de votre page et sélectionnez Continuer.
    5. Sélectionnez Looks Good (Tout semble correct), puis sélectionnez Create (Créer).
17. Revenez à votre page d’origine en sélectionnant le nom de votre expérience en haut à gauche, puis en choisissant votre page dans la vue d’expérience.
18. Ajoutez un événement aux cartes afin que la sélection d’une carte ouvre son enregistrement sur la page que nous avons créée.
    1. Sélectionnez le conteneur de base de carte 1 dans l’arborescence de contenu.
    2. Dans le panneau de configuration, sélectionnez l’onglet Événements , puis sélectionnez Ajouter un mappage d’événements.
    3. Sélectionnez l’événement Carte cliquée , puis sélectionnez Continuer.
    4. Sélectionnez le gestionnaire Ouvrir la page ou l’URL , puis sélectionnez Continuer.
    5. Sélectionnez des pages dans l’expérience actuelle.
    6. Sélectionnez la page d’enregistrement d’incident.
    7. Renseignez les champs du formulaire :

       Champ	Action
       table	Entrer l’incident
       sysId	Placez le pointeur de la souris sur le champ sysId et sélectionnez l’icône de liaison des données. Localisez les types de données à gauche et sélectionnez Répéteur. Dans la vue Pastille, sélectionnez la valeur, puis _row_data, puis double-cliquez sur uniqueValue. Sélectionnez Appliquer.

    8. Sélectionnez Sélectionner.
       
    9. Cochez la case pour activer la propriété Ouvrir dans un nouvel onglet .
    10. Sélectionnez Ajouter.
    11. Sélectionnez Enregistrer.
19. Prévisualisez et testez la page.
    1. Sélectionnez Aperçu.
    2. Dans la liste déroulante, sélectionnez un utilisateur tel que « Fred Luddy », « Carol Coughlin » ou « Bow Ruggeri » pour filtrer les cartes.
       Remarque :

       Certains utilisateurs n’ont pas d’enregistrements d’incidents associés, donc la sélection de ces utilisateurs n’entraînera aucun affichage de carte.
    3. Sélectionnez une carte pour afficher l’enregistrement complet dans un nouvel onglet.