UI ビルダー でのガイダンスプレビューエクスペリエンスのカスタマイズ
UI ビルダー を使用して、コンテキストサイドパネルに表示される [推奨アクション] カードのプレビューをカスタマイズします。プレビューエクスペリエンスには、ヒント、アイコン、メッセージ、およびアクションボタンが含まれています。
始める前に
必要なロール：sn_nb_action.next_best_action_author および ui_builder_admin、admin
このタスクについて
まず、ガイダンスプレビューエクスペリエンスの UI ページバリアントを作成します。ページテンプレートから UI ページバリアントを作成する場合は、カスタマイズ可能な基本構造から開始します。コンポーネントプロパティを使用すると、推奨事項カードのプレビューの外観を変更できます。
手順
- 移動先 すべて > 推奨アクション > アクションタイプ > ガイダンス.
- [ガイダンス] リストからガイダンスを選択します。
-
プレビュー UI の作成 を選択して、ガイダンスプレビューエクスペリエンスの UI ページバリアントを作成します。
このページには、実行時に次の表に示すプロパティを持つ空の
customExpPropsコンテナーが含まれます。推奨アクションフレームワークは、customExpPropsオブジェクトをプロパティとしてカスタムエクスペリエンスに渡します。表 : 1. プレビューエクスペリエンスのプロパティ プロパティ 説明 sysId 推奨事項の ID。 name プレビューエクスペリエンスのタイトル。 description プレビューエクスペリエンスのメッセージ。 recommendationHint 推奨事項が提案されている理由をエージェントに伝えるテキスト。 callToActions ガイダンスアクションの設定。 actionTypeLabel 推奨アクションタイプのラベル。 icon 推奨事項カードのアイコン。 actionStateLabel アクションステータスの外部名。 actionStateValue アクションステータスの内部名。 previewFields ガイダンスプレビューエクスペリエンスに表示するフィールド。 errorMessage 推奨事項の表示に失敗した場合に表示するエラーメッセージ。 ariaHidden [推奨アクション] グループリストでは、sn-carousel コンポーネントがこのプロパティを各カードに渡して、カルーセル内でコンテンツが非表示になっているかどうかを判断します。カードが非表示になっている場合は、この値を使用して aria-hidden を設定するか、アクション可能なコンポーネントを true に無効にして、アクセシビリティの問題を回避できます。 useCase ガイダンスがレンダリングされる [検索/RA] タブ。 actionInputs ガイダンス入力。 アクションタイプSysID 推奨タイプの Sys ID。 actionId 推奨事項の Sys ID。 テーブル 推奨アクションコンテキストテーブル。 tableSysId 推奨アクションコンテキストテーブルレコード sys_id。 レンダラー 詳細なエクスペリエンスのレンダリングを担当するコンポーネント セカンダリコールトゥアクション カードに表示されるセカンダリアクション。 ジーニアス [検索] タブの Genius 結果で使用される Genius 結果カードです。 contextSysId 推奨アクションコンテキスト sysId。 actionConfigurations 推奨アクションの actionConfigurations プロパティ値。デフォルトでは、[値] フィールドは空です。 isFullSearchView サイドパネルビューの完全検索ビューに検索が表示されている場合、値は true です。 contextInputs 推奨アクションの contextInput プロパティの値です。事前定義された構文を取得するには、次に移動します すべての> > 推奨アクション > コンテキスト > コンテキスト入力 をクリックし、コンテキスト入力の JSON 形式をコピーします。 関連性スコアを検索 ユースケースが 検索であるが提案アクションではない場合に、ガイダンスカードに表示される検索結果の関連性スコア。値が null または未定義の場合、関連性スコアコンポーネントはガイダンスカードで非表示になります。次の例は、プレビューエクスペリエンスのプロパティとサンプル値を示しています。
"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 } -
[UI ビルダーでプレビューを編集] を選択します。
UI ページバリアントが UI ビルダー で開くので、そこでコンポーネントを追加および構成して、プレビューエクスペリエンスのルックアンドフィールをカスタマイズできます。詳細については、「UI ビルダー のコンポーネントの操作」を参照してください。
- プレビューエクスペリエンスのプロパティをプレビュー UI にバインドします。
-
プレビュー UI でコンポーネントにスクリプトを追加してバインドし、イベントハンドラーを使用してイベントをディスパッチして、対応するペイロードを含む推奨事項を実行またはスキップします。
次の表は、エージェントが実行するアクションに関して発行されるイベントのリストを示しています。
表 : 2. プレビューエクスペリエンスのイベント 処理されるイベント 説明 ON_SINGLE_CLICK_ACTION_開始 エージェントがアクションボタンを選択すると、アクションが開始されて完了します。このイベントは、ペイロードで次のパラメーターを渡します。 api.emit( ‘ON_SINGLE_CLICK_ACTION_INITIATE‘, { 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] , table: api.context.props.customExpProps.table, tableSysId: api.context.props.customExpProps.tableSysId, contextSysId: api.context.props.customExpProps.contextSysId, actionType: api.context.props.customExpProps.actionTypeSysId, actionInputs: api.context.props.customExpProps.actionInputs, formFieldInputs: { <actionInputs key>: <actionInputs value> }, actionId: api.context.props.customExpProps.actionId, name: api.context.props.customExpProps.name, actionMetadata: api.context.props.customExpProps.callToActions[0], actionStateValue: api.context.props.customExpProps.actionStateValue, } )formFieldInputsにはactionInputsが含まれており、イベントの発行時に更新する必要があります。ON_DRILL_DOWN_ACTION_INITIATE エージェントがプライマリアクションボタンを選択した後に、アクションを展開し、より多くのアクションまたは情報を表示します。このイベントは、ペイロードで次のパラメーターを渡します。 api.emit( ‘ON_DRILL_DOWN_ACTION_INITIATE ‘, { table: api.context.props.customExpProps.table, tableSysId: api.context.props.customExpProps.tableSysId, actionType: <sys_id for "Guidance" action type/ e38f55b9b72120107d472397ee11a9be>, actionInputs: api.context.props.customExpProps.actionInputs, formFieldInputs: {"<actionInputs Key>":"<new value which needs to be set>"}, actionId: api.context.props.customExpProps.actionId, 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], renderer: api.context.props.customExpProps.renderer, contextSysId: api.context.props.customExpProps.contextSysId, sysId: api.context.props.customExpProps.sysId, name: api.context.props.customExpProps.name } )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": { } }LOG_SEARCH_RESULT_EVENT 検索結果ログをキューに入れられたシグナルイベント [sys_signal_event_queue] テーブルに追加します。 api.emit(LOG_SEARCH_RESULT_EVENT, {actionData: {actionName: actionId}})詳細については、「クライアントスクリプトを定義してコンポーネントにバインドする」を参照してください。