UI ビルダー でのガイダンス詳細エクスペリエンスのカスタマイズ

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む6読むのに数分

    • UI ビルダー を使用して、コンテキストサイドパネルまたは [推奨アクション] カードのサブタブでの詳細エクスペリエンスの表示方法をカスタマイズします。詳細エクスペリエンスには、ユーザー入力やドリルダウンアクションなどを含めることができます。

    始める前に

    必要なロール：sn_nb_action.next_best_action_author および ui_builder_admin、admin

    このタスクについて

    まず、ガイダンス詳細エクスペリエンスの UI ページバリアントを作成します。ページテンプレートから UI ページバリアントを作成する場合は、カスタマイズ可能な基本構造から開始します。コンポーネントを構成し、コンポーネントプロパティを使用することで、コンテキストサイドパネルまたはサブタブでの詳細エクスペリエンスの表示方法を変更できます。

    手順

    1. 移動先 すべて > 推奨アクション > アクションタイプ > ガイダンス.
    2. [ガイダンス] リストからガイダンスを選択します。
    3. [詳細 UI を作成 (Create detail UI)] をクリックして、ガイダンス詳細エクスペリエンスの UI ページバリアントを作成します。
      このページには、次の表にリストされているプロパティを持つ空のコンテナーが含まれています。
      表 : 1. 詳細エクスペリエンスのプロパティ
      プロパティ 説明
      guidanceInputs ガイダンスを実行するために必要な入力。
      guidanceOutputs ガイダンスの出力。
      status ガイダンスのステータス。
      guidanceMessage 詳細エクスペリエンスのメッセージ。
      guidanceActions 詳細ビューのガイダンスアクション。
      errorMessage 推奨事項の表示に失敗した場合に表示するエラーメッセージ。

      次の例は、詳細エクスペリエンスのプロパティとサンプル値を示しています。

      {
  "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. [UI Builder で詳細を編集 (Edit detail in UI Builder)] をクリックします。
      UI ページバリアントが UI ビルダー で開くので、そこでコンポーネントを追加および構成して、詳細エクスペリエンスのルックアンドフィールをカスタマイズできます。詳細については、「Working with components in the UI Builder (UI Builder のコンポーネントの操作)」を参照してください。
    5. プレビューエクスペリエンスのプロパティをカスタムの詳細 UI にバインドします。
      データバインディングは、UI ビルダー の構成パネルの [構成] タブにあります。詳細については、「Data resources in UI Builder (UI Builder のデータリソース)」を参照してください。
    6. カスタムの詳細 UI でコンポーネントにスクリプトを追加してバインドし、イベントハンドラーを使用してイベントをディスパッチして、対応するペイロードを含む推奨事項を実行、スキップ、または完了としてマークします。
      表 : 2. 詳細エクスペリエンスのイベント
      処理されるイベント 説明
      GUIDANCE_ACTION_CLICKED クリックされたアクション。このイベントは、クリックされたアクションをペイロードに渡します。
      api.emit( 
  ‘GUIDANCE_ACTION_CLICKED’,{ 
        model: {
               fields: [{'name': 'input',
               'value':  '100'}]
               },
        action: api.context.props.guidanceActions[1] 
    } 
);
      SKIP_GUIDANCE ガイダンスをスキップします。
      api.emit(
   ‘SKIP_GUIDANCE’
);
      GUIDANCE_MESSAGE_PUBLISHED データをアップストリームアプリケーションに渡します。
      api.emit( 
  ‘SN_GUIDANCE_EXPERIENCE_CONNECTED#GUIDANCE_MESSAGE_PUBLISHED’,
    { 
     name:'decision-tree-payload'
     jsonPayload: jsonObject
    } 
);
      GUIDANCE_MARK_COMPLETE カスタムガイダンスを完了としてマークします。
      api.emit(
  'GUIDANCE_MARK_COMPLETE'
);
      GO_BACK_GUIDANCE 意思決定ツリーの前のノードに戻ります。
      api.emit(
   ‘GO_BACK_GUIDANCE’
);

      詳細については、「クライアントスクリプトを定義してコンポーネントにバインドする」を参照してください。