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

Rversion finale: Australia

Mis à jour 12 mars 2026

5 minutes de lecture

Personnalisez un aperçu d’une carte Actions recommandées qui s’affiche dans le panneau latéral contextuel à l’aide Générateur d'IU de . 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

Accédez à la Tous > Actions recommandées > Types d'actions > Conseils.
Sélectionnez un conseil dans la liste Conseils.

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 des actions recommandées transmet l’objet customExpProps en tant que propriété à l’expérience personnalisée.

Tableau 1. Prévisualiser les propriétés de l’expérience
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 en cas d’échec de l’affichage de la recommandation.
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 guidage.
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 responsable de la restitution de 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 du contexte Actions recommandées.
actionConfigurations	Valeur de la propriété actionConfigurations d’actions recommandées. Le champ Valeur est vide par défaut.
isFullSearchView	Si la recherche s’affiche dans la vue de recherche complète ou la vue de panneau latéral, la valeur est définie sur vrai.
entrées contextuelles	Valeur de la propriété contextInput Actions recommandées. Pour obtenir la syntaxe prédéfinie, accédez à Tous les > > Actions recommandées > Contexte > Entrées de contextes et copiez le format JSON des entrées de contexte.
Score de pertinence de la recherche	Score de pertinence d’un résultat de recherche qui s’affiche sur la carte de conseil lorsque le cas d’utilisation est `la recherche` mais pas les actions suggérées. Si la valeur est nulle ou indéfinie, le composant du score de pertinence est masqué sur la carte de conseil.

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
    }

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

Ajoutez et liez des scripts à des composants de votre interface utilisateur d’aperçu pour répartir des événements à l’aide d’un gestionnaire d’événements afin d’exécuter ou d’ignorer une recommandation avec une charge utile correspondante.

La table suivante répertorie la liste des événements émis pour les actions effectuées par un agent :

Tableau 2. Prévisualiser les événements d’expérience
É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: { <actionInputs key>: <actionInputs value> }, 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: <sys_id for "Guidance" action type/ e38f55b9b72120107d472397ee11a9be>, actionInputs: api.context.props.customExpProps.actionInputs, formFieldInputs: {"<actionInputs Key>":"<new value which needs to be set>"}, 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": "<eventName>", "payload": { } }`
LOG_SEARCH_RESULT_EVENT	Ajoute les journaux des résultats de recherche à la table Événements de signal en file d’attente [sys_signal_event_queue]. `api.emit(LOG_SEARCH_RESULT_EVENT, {actionData: {actionName: actionId}})`

Pour plus d’informations, consultez Définition et liaison de scripts clients à des composants.