Personnaliser une expérience détaillée de conseil dans Générateur d'IU

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

    • Personnalisez l’apparence de votre expérience de détail dans le panneau latéral contextuel ou dans un sous-onglet de la carte 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 vers le bas.

    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 avec une structure de base que vous pouvez personnaliser. En configurant les composants et en utilisant leurs propriétés, vous pouvez changer 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. 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.
      Tableau 1. Propriétés de l’expérience détaillée
      Propriété Description
      guidanceInputs Entrées requises pour exécuter le conseil.
      guidanceOutputs Sorties du conseil.
      statut L’état du conseil.
      guidanceMessage Le message pour l’expérience détaillée.
      guidanceActions Les actions de conseil dans la vue détaillée.
      messages d’erreur Message d’erreur à afficher lorsque la recommandation ne s’affiche pas.

      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 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’aspect et la convivialité de l’expérience détaillée. 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 de détail 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 UI Builder.
    6. Ajoutez et liez des scripts aux composants dans votre interface utilisateur détaillée personnalisée pour répartir des é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.
      Tableau 2. Détailler les événements d’expérience
      Événements traités Description
      GUIDANCE_ACTION_CLICKED L’action sur laquelle l’utilisateur a cliqué. Cet événement transmet l’action sur laquelle vous avez cliqué à la charge utile.
      api.emit( 
  ‘GUIDANCE_ACTION_CLICKED’,{ 
        model: {
               fields: [{'name': 'input',
               'value':  '100'}]
               },
        action: api.context.props.guidanceActions[n] 
    } 
);
      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 Revient au nœud précédent dans une arborescence de décision.
      api.emit(
   ‘GO_BACK_GUIDANCE’
);

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