--- sourceDocument: Gestion du service à la clientèle de Yokohama sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/yokohama/customer-service-management Release : - yokohama ft:locale : - fr-FR ft:publication_title : - Gestion du service à la clientèle de Yokohama ft:clusterId : - csm bundleId : - csm workflow : - Customer and Industry --- # Personnaliser une expérience d'aperçu de conseil dans le Générateur d'IU # Personnaliser une expérience d'aperçu de conseil dans le Générateur d'IU {#ariaid-title1} * Rversion finale: Yokohama * * Mis à jour 30 janv. 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 minutes de lecture Personnalisez un aperçu d'une carte Actions recommandées qui s'affiche dans le panneau latéral contextuel à l'aide de Générateur d'IU. 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 par une structure de base que vous pouvez personnaliser. En utilisant les propriétés du composant, vous pouvez modifier l'apparence de l'aperçu de votre carte de recommandation. ## Procédure 1. Accédez à TousActions recommandéesTypes d'actionsConseils. 2. Sélectionnez un conseil dans la liste Conseils. 3. Sélectionnez 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 inclut un conteneur `customExpProps` vide avec les propriétés répertoriées dans la table suivante pendant l'exécution. Le cadre de travail Actions recommandées transmet l'objet `customExpProps` en tant que 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 en avant-première. | | description | Message pour l'expérience d'aperçu. | | Conseil recommandé | Texte qui indique à l'agent pourquoi une recommandation est suggérée. | | callToActions | 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 | Nom externe de l'état de l'action. | | actionStateValue | Nom interne de l'état de l'action. | | Champs d'aperçu | Champs à afficher dans l'expérience d'aperçu des conseils. | | errorMessage | Message d'erreur à afficher lorsque la recommandation ne s'affiche pas. | | ariaHidden | Dans la liste groupée Actions recommandées, le composant sn-carousel transmet cette propriété à chaque carte pour déterminer si le contenu est masqué dans le carrousel. Si la carte est masquée, vous pouvez utiliser cette valeur pour définir aria-hidden ou désactiver tout composant actionnable sur vrai et éviter les problèmes d'accessibilité. | | useCase | Onglet Rechercher/RA où les conseils sont rendus. | | actionInputs | Entrées de conseil. | | actionTypeSysId | ID système du type de recommandation. | | actionId | ID système de la recommandation. | | Table | Table de contexte Actions recommandées. | | tableSysId | Enregistrement de la table de contexte Actions recommandées sys_id. | | rendu | Composant chargé de rendre l'expérience détaillée | | secondaryCallToAction | Actions secondaires à afficher sur la carte. | | isGenius | Est une carte de résultat Genius, utilisée dans le résultat Genius de l'onglet Rechercher. | | contextSysId | sysId de contexte Actions recommandées. | | actionConfigurations | Valeur de propriété actionConfigurations d'actions recommandées. | | isFullSearchView | Si la recherche s'affiche dans la vue de recherche complète de la vue du panneau latéral, la valeur est vrai. | | contextInputs (en anglais) | Valeur de propriété contextInput d'actions recommandées. Pour obtenir la syntaxe prédéfinie, accédez à Tous les \> Actions recommandéesContexteEntrées de contextes et copiez le format JSON des entrées de contexte. | [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 pour l'expérience d'aperçu. "customExpProps": { "sysId": "e8421a2a436f0210f81d92621ab8f2da", "name": "Attach and share article", "description": null, "recommendationHint": "Knowledge", "callToActions": [ { "label": "", "name": "", "id": "1e8392aa436f0210f81d92621ab8f291", "actionBehavior": "contextual_side_panel", "primary": "true", "order": "100", "completionMessage": "Knowledge article successfully attached." } ], "recommendationAction": "", "actionTypeLabel": "Guidance", "icon": "magnifying-glass-sparkle-outline", "actionStateLabel": "New", "actionStateValue": "new", "previewFields": null, "attributes": "", "errorMessage": "", "ariaHidden": false, "useCase": "search", "actionInputs": {}, "actionTypeSysId": "", "actionId": "", "table": "sn_customerservice_case", "tableSysId": "", "renderer": "sn-guidance-experience-connected", "secondaryCallToAction": {}, "isGenius": false, "contextSysId": "", "actionConfigurations": {}, "isFullSearchView": false } 4. Sélectionnez Modifier l'aperçu dans Générateur d'IU. La variante de page d'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 des composants dans le générateur d'IU](https://www.servicenow.com/docs/access?context=work-components&version=yokohama&pubname=yokohama-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 Config 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=yokohama&pubname=yokohama-application-development&ft:locale=en-US). 6. Ajoutez et liez des scripts aux composants de votre interface utilisateur d'aperçu pour répartir les événements à l'aide d'un gestionnaire d'événements pour exécuter ou ignorer une recommandation avec une charge utile correspondante. La table suivante affiche la liste des événements émis par rapport aux actions effectuées par un agent : {#customize-ra-preview-experience__table_grp_flc_xvb__entry__2} | Événements traités | Description | |-|-| | ON_SINGLE_CLICK_ACTION_INITIER | Lance et termine l'action lorsqu'un agent sélectionne le bouton d'action. Cet événement transmet les paramètres suivants dans la charge utile : api.emit( 'ON_SINGLE_CLICK_ACTION_INITIATE', { 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] , table: api.context.props.customExpProps.table, tableSysId: api.context.props.customExpProps.tableSysId, contextSysId: api.context.props.customExpProps.contextSysId, actionType: api.context.props.customExpProps.actionTypeSysId, actionInputs: api.context.props.customExpProps.actionInputs, formFieldInputs: { : }, actionId: api.context.props.customExpProps.actionId, name: api.context.props.customExpProps.name, actionMetadata: api.context.props.customExpProps.callToActions[0], actionStateValue: api.context.props.customExpProps.actionStateValue, } ) `formFieldInputs` contient les `actionsInputs`, qui doivent être mises à jour lorsque l'événement est émis. | | ON_DRILL_DOWN_ACTION_INITIATE | Développe l'action et affiche plus d'actions ou d'informations après qu'un agent a sélectionné le bouton d'action primaire. Cet événement transmet les paramètres suivants dans la charge utile : api.emit( 'ON_DRILL_DOWN_ACTION_INITIATE ', { table: api.context.props.customExpProps.table, tableSysId: api.context.props.customExpProps.tableSysId, actionType: , actionInputs: api.context.props.customExpProps.actionInputs, formFieldInputs: {"":""}, actionId: api.context.props.customExpProps.actionId, 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], renderer: api.context.props.customExpProps.renderer, contextSysId: api.context.props.customExpProps.contextSysId, sysId: api.context.props.customExpProps.sysId, name: api.context.props.customExpProps.name } ) | | DISMISS_ACTION_CLICK | Annule l'action. api.emit( 'DISMISS_ACTION_CLICK', { sysId: api.context.props.customExpProps.sysId } ) | | ACTION_TRIGGERED_PROPAGATION | Permet à l'utilisateur d'ajouter un comportement spécifique à l'interface utilisateur pour les actions de conseil. Cet événement propage les détails de la charge utile vers le parent où cet événement peut être géré. api.emit( 'SN_NEXT_BEST_ACTION_LIST_CONNECTED#ACTION_TRIGGERED_PROPAGATION' ', { "actionSysId": api.context.props.customExpProps.actionId "actionName": api.context.props.customExpProps.actionConfigurations[api.context.props.customExpProps.actionId ]["actionName"] "actionType": "guidance", "eventName": "", "payload": { } } | [Tableau 2. Prévisualiser les événements d'expérience] {#customize-ra-preview-experience__table_grp_flc_xvb} Pour plus d'informations, consultez [Définition et liaison de scripts clients à des composants](https://www.servicenow.com/docs/access?context=define-client-scripts&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US).