--- 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étaillée de conseil dans le Générateur d'IU # Personnaliser une expérience détaillée 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) 2 minutes de lecture Personnalisez l'apparence de votre expérience détaillée dans le panneau latéral contextuel ou dans un sous-onglet de la carte Actions recommandées à l'aide Générateur d'IU de . L'expérience détaillée peut inclure des éléments tels que les entrées de l'utilisateur et les actions d'exploration. ## 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 de détails 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 configurant les composants et en utilisant les propriétés des composants, vous pouvez modifier l'apparence de votre expérience détaillée dans le panneau latéral contextuel ou dans un sous-onglet. ## 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étaillée pour créer une variante de page d'interface utilisateur d'une expérience de détails de conseil. Cette page comprend un conteneur vide avec les propriétés répertoriées dans la table suivante.{#customize-ra-detail-experience__table_eq3_zhc_xvb__entry__2} | Propriété | Description | |-|-| | guidanceInputs | Entrées requises pour appliquer le conseil. | | guidanceOutputs | Les résultats du conseil. | | statut | État de la guidance. | | guidanceMessage | Message pour l'expérience détaillée. | | guidanceActions | Les actions de conseil dans la vue de détail. | | errorMessages | Message d'erreur à afficher lorsque la recommandation ne s'affiche pas. | [Tableau 1. Propriétés de l'expérience détaillée] {#customize-ra-detail-experience__table_eq3_zhc_xvb} L'exemple suivant montre les propriétés et leurs exemples de valeurs pour l'expérience détaillée. { "guidanceInputs": {}, "guidanceOutputs": { "meta": [] }, "status": "waiting", "guidanceMessage": "", "guidanceActions": [ { "label": "Attach", "action_sys_id": "1e8392aa436f0210f81d92621ab8f291", "variant": "primary", "isExecuted": false, "completionMessage": "Knowledge article successfully attached.", "action_behaviour": "contextual_side_panel", "primary": true } ], "errorMessage": "", "actionConfigurations": {}, "guidanceId": "", "tableName": "sn_customerservice_case", "bare": true, "scrollable": "none" } 4. Sélectionnez Modifier les détails 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étaillée. 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 de détails personnalisée. 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 personnalisée pour répartir les événements à l'aide d'un gestionnaire d'événements pour exécuter, ignorer ou marquer comme terminée une recommandation avec une charge utile correspondante. {#customize-ra-detail-experience__table_grp_flc_xvb__entry__2} | Événements traités | Description | |-|-| | GUIDANCE_ACTION_CLICKED | L'action sélectionnée. Cet événement transmet l'action sélectionnée à la charge utile. api.emit( 'GUIDANCE_ACTION_CLICKED',{ model: { fields: [{'name': 'input', 'value': '100'}] }, action: api.context.props.guidanceActions.find(action => action.label == "guidance action label"); } ); Remarque : Dans la propriété `guidanceActions[n]` de la réponse, indiquez le numéro d'index de l'action que vous souhaitez appliquer. | | SKIP_GUIDANCE | Ignore les conseils. api.emit( 'SKIP_GUIDANCE' ); | | GUIDANCE_MESSAGE_PUBLISHED | Transmet les données à une application en amont. api.emit( 'SN_GUIDANCE_EXPERIENCE_CONNECTED#GUIDANCE_MESSAGE_PUBLISHED', { name:'decision-tree-payload' jsonPayload: jsonObject } ); | | GUIDANCE_MARK_COMPLETE | Marque un conseil personnalisé comme terminé. api.emit( 'GUIDANCE_MARK_COMPLETE' ); | | GO_BACK_GUIDANCE | Permet de revenir au nœud précédent dans une arborescence de décision. api.emit( 'GO_BACK_GUIDANCE' ); | | ACTION_TRIGGERED_PROPAGATION | Vous permet 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', { "actionSysId":api.context.props.guidanceId, "actionName": api.context.props.actionConfigurations[api.context.props.guidanceId]["actionName"] "actionType": "guidance", "eventName": "", "payload": {} | [Tableau 2. Détailler les événements d'expérience] {#customize-ra-detail-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). {#customize-ra-detail-experience__steps_b33_gzj_wvb}