--- 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 de détail de conseil dans Générateur d'IU # Personnaliser une expérience de détail 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) 3 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 fiche Actions recommandées à l'aide Générateur d'IUde . L'expérience détaillée peut inclure des éléments tels que des entrées utilisateur et des actions d'exploration approfondie. ## 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étaillée 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. En configurant les composants et en utilisant leurs propriétés, 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 à la ToutActions recommandéesTypes d'actionsConseils. 2. Sélectionnez un conseil dans la liste Conseils. 3. Cliquez sur Créer une interface utilisateur détaillée pour créer une variante de page d'interface utilisateur d'une expérience détaillée 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 | Les entrées requises pour effectuer le conseil. | | guidanceOutputs | Les sorties du conseil. | | statut | État du conseil. | | guidanceMessage | Le message pour l'expérience détaillée. | | guidanceActions | Les actions de conseil dans la vue de détail. | | Messages d'erreur | 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": { "task": { "name": "task", "value": "a473d057cc3f1110f877c24a7dd07ec6" }, "knowledge": { "name": "knowledge", "value": "e97ee81eff6002009b20ffffffffffe0" }, "guidance_input_form_fields": { "additional_comments": { "label": "Additional Comments", "maxLength": "255", "hint": "This item may help you!", "name": "additional_comments", "recordValue": { "displayValue": "test", "value": "test" }, "dictionary": { "type": "string", "dependentField": null, "dependentTable": null, "name": "additional_comments", "label": "Additional Comments", "canWrite": true, "canRead": true, "internalType": "string", "isMandatory": false, "isReadonly": false, "attributes": { "name": "edge_encryption_enabled", "value": true } } } } }, "guidanceOutputs": { "attached_article": "kb_knowledge", "meta": [ { "varName": "attached_article", "varType": "reference", "varTableName": "kb_knowledge", "varlabel": "Attached Article", "varDefaultValue": "", "varOrder": "100", "varActive": "true", "varDisplayValue": "" } ] }, "status": "completed", "guidanceMessage": "You can attach this article to the case.", "guidanceActions": [ { "label": "Dismiss", "actionId": "skip", "variant": "secondary" }, { "label": "Attach Article", "action_sys_id": "f18738c8a4f70110f87726cbf49777ae", "variant": "primary", "isExecuted": true, "completionMessage": "KB Article was shared", "action_behaviour": "contextual_side_panel", "primary": true } ], "errorMessage": "This action couldn't be completed." } 4. Cliquez sur Modifier les détails 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'aspect de l'expérience détaillée. 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 de détails personnalisés. Les liaisons de données se trouvent dans l'onglet Configuration du panneau de configuration de .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étaillée personnalisée pour répartir les événements à l'aide d'un gestionnaire d'événements pour exécuter, ignorer ou marquer comme terminé 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 sur laquelle l'utilisateur clique. Cet événement transmet l'action cliqué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 le conseil. 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 | Retourne au nœud précédent dans une arborescence de décision. api.emit( 'GO_BACK_GUIDANCE' ); | [Tableau 2. Détailler les événements d'expérience] {#customize-ra-detail-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). {#customize-ra-detail-experience__steps_b33_gzj_wvb}