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

  • Rversion finale: Washingtondc
  • Mis à jour 1 févr. 2024
  • 2 minutes de lecture

    • Personnalisez l’aperçu d’une carte Recommended Actions qui s’affiche dans le panneau latéral contextuel à l’aide Générateur d'IUde . L’expérience d’aperçu comprend une astuce, 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 avec 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 à la Tous > Actions recommandées > Types d'actions > Conseils.
    2. Sélectionnez un conseil dans la liste Conseils.
    3. Cliquez sur Créer un aperçu de l’interface utilisateur pour créer une variante de page d’interface utilisateur d’une expérience d’aperçu de conseil.

      Cette page comprend un conteneur vide avec les propriétés répertoriées dans la table suivante. Le cadre de travail Recommended Actions transmet l’objet customExpProps en tant que propriété à l’expérience personnalisée.

      Tableau 1. Propriétés de l’expérience d’aperçu
      Propriété Description
      sysId ID de la recommandation.
      nom Titre de l’expérience d’aperçu.
      description Message pour l’expérience d’aperçu.
      Conseil de recommandation Texte qui indique à l’agent pourquoi une recommandation est suggérée.
      callToActions (Appel à l’action) Paramètres de l’action de conseil.
      actionTypeLabel Étiquette pour le type d’action recommandé.
      icône Icône de la carte de recommandation.
      Étiquette d’état d’action 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 de conseil.
      errorMessage Message d’erreur à afficher lorsque la recommandation ne s’affiche pas.

      L’exemple suivant montre les propriétés et les exemples de valeurs pour l’expérience d’aperçu.

      "customExpProps": { 
       "sysId": "05831457cc3f1110f877c24a7dd07eb0", 
       "name": "Eclipse configuration for Android development\n\t\t", 
       "description": "<p>Please review this article and attach</p>", 
       "recommendationHint": "This item may help you!", 
       "callToActions": [ 
            { 
            "label": "Review and attach article", 
            "name": "review_and_attach_article", 
            "id": "f18738c8a4f70110f87726cbf49777ae", 
            "actionBehavior": "contextual_side_panel", 
            "primary": "true", 
            "order": "100", 
            "completionMessage": "KB Article was shared." 
            } 
        ],   
       "actionTypeLabel": "Guidance", 
       "icon": "lightbulb-outline", 
       "actionStateLabel": "New", 
       "actionStateValue": "new", 
       "previewFields": [ 
            { 
            "label": "Number", 
            "name": "knowledge.number", 
            "value": { 
            "type": "string", 
            "value": "KB0000033" 
             } 
          }, 
       ], 
      "errorMessage": "This action couldn’t be completed." 
}
    4. Cliquez sur Modifier l’aperçu dans UI Builder.
      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 Travailler avec des composants dans UI Builder.
    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 Configuration du panneau de configuration dans Générateur d'IU. Pour plus d’informations, consultez Ressources de données dans UI Builder.
    6. Ajoutez et liez des scripts aux composants dans votre interface utilisateur d’aperçu pour répartir des événements à l’aide d’un gestionnaire d’événements pour exécuter ou ignorer une recommandation avec une charge utile correspondante.
      Tableau 2. Prévisualiser les événements d’expérience
      Événements traités Description
      ON_SINGLE_CLICK_ACTION Initie et termine l’action lorsqu’un agent clique sur le bouton d’action. Cet événement transmet les paramètres suivants dans la charge utile :
      api.emit( 
    ‘ON_SINGLE_CLICK_ACTION‘, { 
        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] 
    }
)
      ON_DRILL_DOWN_ACTION Développe l’action et affiche plus d’actions ou d’informations après qu’un agent a cliqué sur le bouton d’action primaire. Cet événement transmet les paramètres suivants dans la charge utile :
      api.emit( 
    ‘ON_DRILL_DOWN_ACTION‘, { 
        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] 
     }
)
      DISMISS_ACTION_CLICK Annule l’action.
      api.emit( 
    ‘DISMISS_ACTION_CLICK‘, { 
         sysId: api.context.props.customExpProps.sysId
    }
)

      Pour plus d’informations, consultez Définir et lier des scripts clients à des composants.