UI ビルダー でのガイダンスプレビューエクスペリエンスのカスタマイズ
UI ビルダー を使用して、コンテキストサイドパネルに表示される [推奨アクション] カードのプレビューをカスタマイズします。プレビューエクスペリエンスには、ヒント、アイコン、メッセージ、およびアクションボタンが含まれています。
始める前に
必要なロール：sn_nb_action.next_best_action_author および ui_builder_admin、admin
このタスクについて
まず、ガイダンスプレビューエクスペリエンスの UI ページバリアントを作成します。ページテンプレートから UI ページバリアントを作成する場合は、カスタマイズ可能な基本構造から開始します。コンポーネントプロパティを使用すると、推奨事項カードのプレビューの外観を変更できます。
手順
- 移動先 すべて > 推奨アクション > アクションタイプ > ガイダンス.
- [ガイダンス] リストからガイダンスを選択します。
-
[プレビュー UI を作成 (Create preview UI)] をクリックして、ガイダンスプレビューエクスペリエンスの UI ページバリアントを作成します。
このページには、次の表にリストされているプロパティを持つ空のコンテナーが含まれています。推奨アクションフレームワークは、
customExpPropsオブジェクトをプロパティとしてカスタムエクスペリエンスに渡します。表 : 1. プレビューエクスペリエンスのプロパティ プロパティ 説明 sysId 推奨事項の ID。 name プレビューエクスペリエンスのタイトル。 description プレビューエクスペリエンスのメッセージ。 recommendationHint 推奨事項が提案されている理由をエージェントに伝えるテキスト。 callToActions ガイダンスアクションの設定。 actionTypeLabel 推奨アクションタイプのラベル。 icon 推奨事項カードのアイコン。 actionStateLabel アクションステータスの外部名。 actionStateValue アクションステータスの内部名。 previewFields ガイダンスプレビューエクスペリエンスに表示するフィールド。 errorMessage 推奨事項の表示に失敗した場合に表示するエラーメッセージ。 次の例は、プレビューエクスペリエンスのプロパティとサンプル値を示しています。
"customExpProps": { "sysId": "05831457cc3f1110f877c24a7dd07eb0", "name": "Eclipse configuration for Android development\n\t\t", "description": "<p>Please review this article and attach</p>", "recommendationHint": "This item may help you!", "callToActions": [ { "label": "Review and attach article", "name": "review_and_attach_article", "id": "f18738c8a4f70110f87726cbf49777ae", "actionBehavior": "contextual_side_panel", "primary": "true", "order": "100", "completionMessage": "KB Article was shared." } ], "actionTypeLabel": "Guidance", "icon": "lightbulb-outline", "actionStateLabel": "New", "actionStateValue": "new", "previewFields": [ { "label": "Number", "name": "knowledge.number", "value": { "type": "string", "value": "KB0000033" } }, ], "errorMessage": "This action couldn’t be completed." } -
[UI ビルダーでプレビューを編集] をクリックします。
UI ページバリアントが UI ビルダー で開くので、そこでコンポーネントを追加および構成して、プレビューエクスペリエンスのルックアンドフィールをカスタマイズできます。詳細については、「UI ビルダー のコンポーネントの操作」を参照してください。
- プレビューエクスペリエンスのプロパティをプレビュー UI にバインドします。
-
プレビュー 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 } )詳細については、「クライアントスクリプトを定義してコンポーネントにバインドする」を参照してください。