---
sourceDocument: Interface utilisateur de la Now Platform Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/platform-user-interface

 Release :

    - xanadu

ft:locale :

    - fr-FR

ft:publication_title :

    - Interface utilisateur de la Now Platform Xanadu

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Afficher un composant dans un modal

# Afficher un composant dans un modal {#ariaid-title1}

* Rversion finale: Xanadu
* 
* Mis à jour 1 août 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute de lecture

Utilisez une action d'interface utilisateur pour lancer un composant personnalisé dans un modal afin qu'un agent n'ait pas à naviguer vers un autre écran pour accomplir une tâche.

## Avant de commencer

Rôle requis : workspace_admin

## Pourquoi et quand exécuter cette tâche

Lancez un composant personnalisé dans une fenêtre modale afin qu'un agent n'ait pas à quitter l'écran actuel. Par exemple, vous pouvez lancer un modal contenant les informations de contact du client nommé dans un enregistrement ouvert afin qu'un agent puisse demander aux appelants de confirmer leur identité. L'exemple suivant montre une liste dans un modal.

## Procédure

1. Développez et déployez un composant personnalisé sur votre instance.  
   Pour plus d'informations, reportez-vous à [la section Composants personnalisés](https://www.servicenow.com/docs/access?context=custom-components&version=xanadu&pubname=xanadu-application-development&ft:locale=en-US).
2. Créer une entrée dans le modal de scripting enregistré.
   1. Dans le navigateur de filtre, saisissez sys_aw_registered_scripting_modal.liste pour ouvrir cette table.
   2. Cliquez sur Nouveau.
   3. Utilisez l'icône de recherche (icône ![de recherche]()) pour sélectionner un composant, dans ce cas, utilisez sn-workspace-header.
   4. Saisissez le nom de l'API, dans ce cas showHeader.
   5. L'API publique est remplie automatiquement :  
   6. Cliquez sur Enregistrer.
   {#set-up-ui-action-render-custom-component__substeps_t2h_fk5_pjb}
3. Créez votre action d'interface utilisateur pour afficher votre composant dans un modal.
   1. Créez une nouvelle action d'interface utilisateur pour la table appropriée et, dans l'onglet Espace de travail , sélectionnez le bouton Formulaire d'espace de travail ou le bouton Menu Espace de travail en fonction de la façon dont vous souhaitez que l'action d'interface utilisateur apparaisse et de l'endroit où vous souhaitez que l'action d'interface utilisateur apparaisse.  
      Pour en savoir plus sur la création d'une action d'interface utilisateur, reportez-vous à la section [Configurer des actions d'interface utilisateur personnalisées dans legacy workspace](https://servicenow-prod.fluidtopics.net/u8DNSR8ofxl3RTLPSvgXdA "Configurez des actions d’interface utilisateur à personnaliser legacy workspace pour votre organisation. Les actions d’interface utilisateur incluent des boutons personnalisés, des éléments de menu et la limitation de l’accès aux formulaires en fonction du rôle d’un utilisateur.").

      ![Bouton ou menu du formulaire d’espace de travail]()  
      Lorsque vous cochez l'une des cases, la zone de texte Script client de l'espace de travail s'affiche.
   2. Entrez le code suivant dans la zone de texte Script client de l'espace de travail :  

          function onClick(g_form) {
            g_modal.global.showHeader({
              title: 'Test custom modal',
              confirmTitle:'YES',
              params: {
                primaryValue: 'THIS IS A PRIMARY VALUE',
                secondaryItems:{}
              }
            }).then(function(result){
              alert('confirm:'+result);
            }, function(error) {
              alert('cancel:'+error);
            });
          }

   {#set-up-ui-action-render-custom-component__substeps_i5y_fp5_pjb}
4. Testez maintenant l'action d'interface utilisateur en ouvrant un enregistrement à Espace de travail partir de la table que vous avez sélectionnée lors de la création de cette action d'interface utilisateur.  
   L'action d'interface utilisateur doit apparaître dans le volet Formulaire.