UI ビルダー でのガイダンスプレビューエクスペリエンスのカスタマイズ

  • リリースバージョン: Yokohama
  • 更新日 2025年01月30日
  • 所要時間：6分

    • UI ビルダー を使用して、コンテキストサイドパネルに表示される [推奨アクション] カードのプレビューをカスタマイズします。プレビューエクスペリエンスには、ヒント、アイコン、メッセージ、およびアクションボタンが含まれています。

    始める前に

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

    このタスクについて

    まず、ガイダンスプレビューエクスペリエンスの UI ページバリアントを作成します。ページテンプレートから UI ページバリアントを作成する場合は、カスタマイズ可能な基本構造から開始します。コンポーネントプロパティを使用すると、推奨事項カードのプレビューの外観を変更できます。

    手順

    1. 次のように移動する。 All (すべて) > 推奨アクション > アクションタイプ > ガイダンス.
    2. [ガイダンス] リストからガイダンスを選択します。
    3. プレビュー UI の作成 を選択して、ガイダンスプレビューエクスペリエンスの UI ページバリアントを作成します。

      このページには、次の表にリストされているプロパティを持つ空のコンテナーが含まれています。推奨アクションフレームワークは、customExpProps オブジェクトをプロパティとしてカスタムエクスペリエンスに渡します。

      表 : 1. プレビューエクスペリエンスのプロパティ
      プロパティ 説明
      sysId 推奨事項の ID。
      name プレビューエクスペリエンスのタイトル。
      description プレビューエクスペリエンスのメッセージ。
      recommendationHint 推奨事項が提案されている理由をエージェントに伝えるテキスト。
      callToActions ガイダンスアクションの設定。
      actionTypeLabel 推奨アクションタイプのラベル。
      icon 推奨事項カードのアイコン。
      actionStateLabel アクションステータスの外部名。
      actionStateValue アクションステータスの内部名。
      previewFields ガイダンスプレビューエクスペリエンスに表示するフィールド。
      errorMessage 推奨事項の表示に失敗した場合に表示するエラーメッセージ。

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

      "customExpProps": {
        "sysId": "e8421a2a436f0210f81d92621ab8f2da",
        "name": "Attach and share article",
        "description": null,
        "recommendationHint": "Knowledge",
        "callToActions": [
            {
                "label": "",
                "name": "",
                "id": "1e8392aa436f0210f81d92621ab8f291",
                "actionBehavior": "contextual_side_panel",
                "primary": "true",
                "order": "100",
                "completionMessage": "Knowledge article successfully attached."
            }
        ],
        "recommendationAction": "",
        "actionTypeLabel": "Guidance",
        "icon": "magnifying-glass-sparkle-outline",
        "actionStateLabel": "New",
        "actionStateValue": "new",
        "previewFields": null,
        "attributes": "",
        "errorMessage": "",
        "ariaHidden": false,
        "useCase": "search",
        "actionInputs": {},
        "actionTypeSysId": "",
        "actionId": "",
        "table": "sn_customerservice_case",
        "tableSysId": "",
        "renderer": "sn-guidance-experience-connected",
        "secondaryCallToAction": {},
        "isGenius": false,
        "contextSysId": "",
        "actionConfigurations": {},
        "isFullSearchView": false
    }
    4. UI ビルダーで [プレビューを編集] を選択します。
      UI ページバリアントが UI ビルダー で開くので、そこでコンポーネントを追加および構成して、プレビューエクスペリエンスのルックアンドフィールをカスタマイズできます。詳細については、「UI ビルダー のコンポーネントの操作」を参照してください。
    5. プレビューエクスペリエンスのプロパティをプレビュー UI にバインドします。
      データバインディングは、UI ビルダー の構成パネルの [構成] タブにあります。詳細については、「UI ビルダー のデータリソース」を参照してください。
    6. プレビュー UI でコンポーネントにスクリプトを追加してバインドし、イベントハンドラーを使用してイベントをディスパッチして、対応するペイロードを含む推奨事項を実行またはスキップします。
      表 : 2. プレビューエクスペリエンスのイベント
      処理されるイベント 説明
      ON_SINGLE_CLICK_ACTION エージェントがアクションボタンを選択すると、アクションが開始されて完了します。このイベントは、ペイロードで次のパラメーターを渡します。
      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 エージェントがプライマリアクションボタンを選択した後に、アクションを展開し、より多くのアクションまたは情報を表示します。このイベントは、ペイロードで次のパラメーターを渡します。
      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 アクションをキャンセルします。
      api.emit( 
    ‘DISMISS_ACTION_CLICK‘, { 
         sysId: api.context.props.customExpProps.sysId
    }
)
      ACTION_TRIGGERED_PROPAGATION ユーザーがガイダンスアクションの UI 固有の動作を追加できるようにします。このイベントは、このイベントを処理できる親にペイロードの詳細を伝達します。
      api.emit(
    ‘SN_NEXT_BEST_ACTION_LIST_CONNECTED#ACTION_TRIGGERED_PROPAGATION' ‘, {
   "actionSysId": api.context.props.customExpProps.actionId
   "actionName": api.context.props.customExpProps.actionConfigurations[api.context.props.customExpProps.actionId ][“actionName”]
   "actionType": "guidance",
   "eventName": "<eventName>",
   "payload": {
   }
}

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