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

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 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 Tout > 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 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.

      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.
    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.
    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.
      Tableau 2. Détailler les événements d’expérience
      É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’
);

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