Personnaliser une expérience de détails de conseils dans le Générateur d'IU

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 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 de détail 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 à la Tous > Actions recommandées > Types d'actions > Conseils.
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étail de conseil.
   Cette page inclut un conteneur vide avec les propriétés répertoriées dans le tableau suivant.

   Tableau 1. Détailler les propriétés d’expérience

   Propriété	Description
   guidanceInputs	Entrées requises pour exécuter le conseil.
   guidanceOutputs	Les sorties du conseil.
   état	L’état de la guidance.
   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 en cas d’échec de la recommandation.

   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 le 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étaillée. Pour plus d’informations, consultez Utilisation de composants dans le générateur d’IU.
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 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.
6. Ajoutez et liez des scripts à des composants de votre interface utilisateur de détails personnalisée pour répartir des événements à l’aide d’un gestionnaire d’événements afin d’exécuter, d’ignorer ou de marquer comme terminée une recommandation avec une charge utile correspondante.

   Tableau 2. Détailler les événements d’expérience

   É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 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’ );
   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": "<eventName>", "payload": {}

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