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

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間：5分

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

    始める前に

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

    このタスクについて

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

    手順

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

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

      {
    "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. UI ビルダーで [詳細を編集] を選択します。
      UI ページバリアントが UI ビルダー で開くので、そこでコンポーネントを追加および構成して、詳細エクスペリエンスのルックアンドフィールをカスタマイズできます。詳細については、「UI ビルダー のコンポーネントの操作」を参照してください。
    5. プレビューエクスペリエンスのプロパティをカスタムの詳細 UI にバインドします。
      データバインディングは、UI ビルダー の構成パネルの [構成] タブにあります。詳細については、「UI ビルダー のデータリソース」を参照してください。
    6. カスタムの詳細 UI でコンポーネントにスクリプトを追加してバインドし、イベントハンドラーを使用してイベントをディスパッチして、対応するペイロードを含む推奨事項を実行、スキップ、または完了としてマークします。
      表 : 2. 詳細エクスペリエンスのイベント
      処理されるイベント 説明
      GUIDANCE_ACTION_CLICKED 選択されているアクション。このイベントは、選択されたアクションをペイロードに渡します。
      api.emit( 
  ‘GUIDANCE_ACTION_CLICKED’,{ 
        model: {
               fields: [{'name': 'input',
               'value':  '100'}]
               },
        action: api.context.props.guidanceActions.find(action => action.label == "guidance action label"); 
    } 
);
      注:
      応答の guideActions[n] プロパティに、適用するアクションのインデックス番号を指定します。
      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’
);
      ACTION_TRIGGERED_PROPAGATION ガイダンスアクションの UI 固有の動作を追加できます。このイベントは、このイベントを処理できる親にペイロードの詳細を伝達します。
      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": {}

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