---
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


---

# Créer un mappage d'événements du complément UX

# Créer un mappage d'événements du complément UX {#ariaid-title1}

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

Connectez un bouton à un modal à l'aide du mappage d'événements du complément UX afin qu'un bouton d'action ouvre un modal personnalisé.

## Avant de commencer

Effectuez les actions suivantes :

* [Créer une action de formulaire](https://servicenow-prod.fluidtopics.net/j18CtiMUZQtyjMorlLy75A "Ajoutez un bouton d’action de formulaire à votre espace de travail configurable.")
* [Activer Customer Service Management](https://www.servicenow.com/docs/access?context=t_ActivateCustomerService&version=xanadu&pubname=xanadu-customer-service-management&ft:locale=en-US)
* Ouvrez votre page d'enregistrement dans UIB ou [créez une variante de page dans UIB](https://www.servicenow.com/docs/access?context=create-variant&version=xanadu&pubname=xanadu-application-development&ft:locale=en-US)
* [Concevoir votre variante de page dans UIB](https://servicenow-prod.fluidtopics.net/SakL0CbX8Nyq199ANmYDfg#design-a-page-variant-in-uib "Configurez une variante de page du générateur d’IU à transmettre d’un modal d’espace de travail à la variante. Cette étape fait partie du processus de configuration d’un bouton d’action pour ouvrir une fenêtre modale personnalisée.")
* [Configurer votre variante de page en tant que modal dans UIB](https://servicenow-prod.fluidtopics.net/9l1THDvppTp54cozJG1aqw#configure-a-page-variant-as-a-modal-in-uib "Définissez votre variante de page pour qu’elle s’affiche en tant que fenêtre modale à l’aide des configurations du générateur d’IU. Cette étape fait partie du processus de configuration d’un bouton d’action pour ouvrir un modal personnalisé.")
{#create-a-ux-add-on-event-mapping__ul_gbv_jqm_d1c}

Rôle requis : administrateur

## Procédure

1. Ouvrez le mappage \<instance-name\>.service-now.com/sys_ux_addon_event_mapping_list.do d'événements de complément dans votre navigateur.
2. Créez un nouvel enregistrement en sélectionnant Nouveau.
3. Entrez un nom pour votre carte.
4. Sélectionnez ui_action_bar pour le champ ID de l'élément source.
5. Sélectionnez le nom de votre action déclarative pour le champ Action déclarative source.
6. Définissez le macroponent sur le macroponent de l'enregistrement de l'espace de travail à l'aide du sysID copié à partir de la définition de page de l'enregistrement.  
   Pour plus d'informations, consultez [Configurer une variante de page en tant que modal dans UIB](https://servicenow-prod.fluidtopics.net/9l1THDvppTp54cozJG1aqw#configure-a-page-variant-as-a-modal-in-uib "Définissez votre variante de page pour qu’elle s’affiche en tant que fenêtre modale à l’aide des configurations du générateur d’IU. Cette étape fait partie du processus de configuration d’un bouton d’action pour ouvrir un modal personnalisé.").
7. Déclenchez l'événement pour ouvrir un modal en sélectionnant \[Page d'enregistrement\] Ouvrir le modal dans le champ Événement cible.
8. Définissez les champs à envoyer au modal en collant l'objet JSON dans le champ Mappage de la charge utile cible.  

       {
       	"type": "MAP_CONTAINER",
       	"container": {
       		"route": {
       			"type": "EVENT_PAYLOAD_BINDING",
       			"binding": {
       				"address": ["route"]
       			}
       		},
       		"size": {
       			"type": "EVENT_PAYLOAD_BINDING",
       			"binding": {
       				"address": ["size"]
       			}
       		},
       		"fields": {
       			"type": "EVENT_PAYLOAD_BINDING",
       			"binding": {
       				"address": ["fields"]
       			}
       		},
       		"params": {
       			"type": "EVENT_PAYLOAD_BINDING",
       			"binding": {
       				"address": ["params"]
       			}
       		}
       	}
       }

9. Sélectionnez Soumettre.