---
sourceDocument: Gestion du service clientèle Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/customer-service-management

 Release :

    - xanadu

ft:locale :

    - fr-FR

ft:publication_title :

    - Gestion du service clientèle Xanadu

ft:clusterId :

    - csm

bundleId :

    - csm

workflow :

    - Customer and Industry


---

# Personnaliser une expérience d'aperçu de conseil dans Générateur d'IU

# Personnaliser une expérience d'aperçu de conseil dans Générateur d'IU {#ariaid-title1}

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

Personnalisez l'aperçu d'une carte Actions recommandées qui s'affiche dans le panneau latéral contextuel à l'aide Générateur d'IUde . L'expérience d'aperçu comprend un conseil, une icône, un message et un bouton d'action.

## Avant de commencer

Rôle requis : sn_nb_action.next_best_action_author et ui_builder_admin, admin

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

Vous commencez par créer une variante de page d'interface utilisateur d'une expérience d'aperçu de conseil. Lorsque vous créez une variante de page d'interface utilisateur à partir d'un modèle de page, vous commencez avec une structure de base que vous pouvez personnaliser. À l'aide des propriétés du composant, vous pouvez modifier l'apparence de l'aperçu de votre carte de recommandation.

## Procédure

1. Accédez à la ToutActions recommandéesTypes d'actionsConseils.
2. Sélectionnez un conseil dans la liste Conseils.
3. Cliquez sur Créer une interface utilisateur d'aperçu pour créer une variante de page d'interface utilisateur d'une expérience d'aperçu de conseil.  
   Cette page comprend un conteneur vide avec les propriétés répertoriées dans la table suivante. Le cadre de travail Recommended Actions transmet l'objet `customExpProps` comme une propriété à l'expérience personnalisée.
   {#customize-ra-preview-experience__table_eq3_zhc_xvb__entry__2}

   | Propriété | Description |
   |-|-|
   | sysId | ID de la recommandation. |
   | nom | Titre de l'expérience d'aperçu. |
   | description | Message pour l'expérience d'aperçu. |
   | Conseil de recommandation | Texte qui indique à l'agent pourquoi une recommandation est suggérée. |
   | callToActions (appel à l'action) | Paramètres de l'action de conseil. |
   | actionTypeLabel | Étiquette pour le type d'action recommandée. |
   | icône | Icône de la carte de recommandation. |
   | actionStateLabel (en anglais seulement) | Nom externe de l'état de l'action. |
   | actionStateValue | Nom interne de l'état de l'action. |
   | previewFields | Champs à afficher dans l'expérience d'aperçu des conseils. |
   | errorMessage | Message d'erreur à afficher lorsque la recommandation ne s'affiche pas. |
   [Tableau 1. Prévisualiser les propriétés de l'expérience]

   {#customize-ra-preview-experience__table_eq3_zhc_xvb}

   L'exemple suivant montre les propriétés et les exemples de valeurs de l'expérience de préversion.

       "customExpProps": { 
              "sysId": "05831457cc3f1110f877c24a7dd07eb0", 
              "name": "Eclipse configuration for Android development\n\t\t", 
              "description": "<p>Please review this article and attach</p>", 
              "recommendationHint": "This item may help you!", 
              "callToActions": [ 
                   { 
                   "label": "Review and attach article", 
                   "name": "review_and_attach_article", 
                   "id": "f18738c8a4f70110f87726cbf49777ae", 
                   "actionBehavior": "contextual_side_panel", 
                   "primary": "true", 
                   "order": "100", 
                   "completionMessage": "KB Article was shared." 
                   } 
               ],   
              "actionTypeLabel": "Guidance", 
              "icon": "lightbulb-outline", 
              "actionStateLabel": "New", 
              "actionStateValue": "new", 
              "previewFields": [ 
                   { 
                   "label": "Number", 
                   "name": "knowledge.number", 
                   "value": { 
                   "type": "string", 
                   "value": "KB0000033" 
                    } 
                 }, 
              ], 
             "errorMessage": "This action couldn't be completed." 
       }

4. Cliquez sur Modifier l'aperçu dans Générateur d'IU.  
   La variante de page de l'interface utilisateur s'ouvre dans Générateur d'IU, où vous pouvez ajouter et configurer des composants pour personnaliser l'apparence de l'expérience d'aperçu. Pour plus d'informations, consultez [Utilisation de composants dans le générateur d'IU](https://www.servicenow.com/docs/access?context=work-components&version=xanadu&pubname=xanadu-application-development&ft:locale=en-US).
5. Liez les propriétés de l'expérience d'aperçu à votre interface utilisateur d'aperçu.  
   Les liaisons de données se trouvent dans l'onglet Configuration du panneau de configuration dans Générateur d'IU. Pour plus d'informations, consultez [Ressources de données dans le générateur d'IU](https://www.servicenow.com/docs/access?context=data-resources&version=xanadu&pubname=xanadu-application-development&ft:locale=en-US).
6. Ajoutez et liez des scripts aux composants dans votre interface utilisateur d'aperçu pour répartir des événements à l'aide d'un gestionnaire d'événements pour exécuter ou ignorer une recommandation avec une charge utile correspondante.  
   {#customize-ra-preview-experience__table_grp_flc_xvb__entry__2}

   | Événements traités | Description |
   |-|-|
   | ON_SINGLE_CLICK_ACTION | Initie et termine l'action lorsqu'un agent clique sur le bouton d'action. Cet événement transmet les paramètres suivants dans la charge utile : api.emit( 'ON_SINGLE_CLICK_ACTION', { sysId: api.context.props.customExpProps.sysId, name: api.context.props.customExpProps.name, actionStateValue: api.context.props.customExpProps.actionStateValue, actionMetadata: api.context.props.customExpProps.callToActions[0] } ) |
   | ON_DRILL_DOWN_ACTION | Développe l'action et affiche plus d'actions ou d'informations dès qu'un agent clique sur le bouton d'action primaire. Cet événement transmet les paramètres suivants dans la charge utile : api.emit( 'ON_DRILL_DOWN_ACTION', { sysId: api.context.props.customExpProps.sysId, name: api.context.props.customExpProps.name, actionStateValue: api.context.props.customExpProps.actionStateValue, actionMetadata: api.context.props.customExpProps.callToActions[0] } ) |
   | DISMISS_ACTION_CLICK | Annule l'action. api.emit( 'DISMISS_ACTION_CLICK', { sysId: api.context.props.customExpProps.sysId } ) |
   [Tableau 2. Prévisualiser les événements d'expérience]

   {#customize-ra-preview-experience__table_grp_flc_xvb}

   Pour plus d'informations, consultez [Définir des scripts clients et les lier aux composants](https://www.servicenow.com/docs/access?context=define-client-scripts&version=xanadu&pubname=xanadu-application-development&ft:locale=en-US).