--- sourceDocument: オーストラリアのカスタマーサービス管理 (CSM) sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/customer-service-management Release : - australia ft:locale : - ja-JP ft:publication_title : - オーストラリアのカスタマーサービス管理 (CSM) ft:clusterId : - csm bundleId : - csm workflow : - Customer and Industry --- # UI ビルダー でのガイダンスプレビューエクスペリエンスのカスタマイズ # UI ビルダー でのガイダンスプレビューエクスペリエンスのカスタマイズ {#ariaid-title1} * リリースバージョン: Australia * * 更新日 2026年03月12日 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：11分 UI ビルダー を使用して、コンテキストサイドパネルに表示される \[推奨アクション\] カードのプレビューをカスタマイズします。プレビューエクスペリエンスには、ヒント、アイコン、メッセージ、およびアクションボタンが含まれています。 ## 始める前に 必要なロール：sn_nb_action.next_best_action_author および ui_builder_admin、admin ## このタスクについて まず、ガイダンスプレビューエクスペリエンスの UI ページバリアントを作成します。ページテンプレートから UI ページバリアントを作成する場合は、カスタマイズ可能な基本構造から開始します。コンポーネントプロパティを使用すると、推奨事項カードのプレビューの外観を変更できます。 ## 手順 1. 移動先 すべて推奨アクションアクションタイプガイダンス. 2. \[ガイダンス\] リストからガイダンスを選択します。 3. プレビュー UI の作成 を選択して、ガイダンスプレビューエクスペリエンスの UI ページバリアントを作成します。 このページには、実行時に次の表に示すプロパティを持つ空の `customExpProps` コンテナーが含まれます。推奨アクションフレームワークは、 `customExpProps` オブジェクトをプロパティとしてカスタムエクスペリエンスに渡します。 {#customize-ra-preview-experience__table_eq3_zhc_xvb__entry__2} | プロパティ | 説明 | |-|-| | 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 または未定義の場合、関連性スコアコンポーネントはガイダンスカードで非表示になります。 | [表 : 1. プレビューエクスペリエンスのプロパティ] {#customize-ra-preview-experience__table_eq3_zhc_xvb} 次の例は、プレビューエクスペリエンスのプロパティとサンプル値を示しています。 "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 ビルダー のコンポーネントの操作](https://www.servicenow.com/docs/access?context=work-components&version=australia&pubname=australia-application-development&ft:locale=en-US)」を参照してください。 5. プレビューエクスペリエンスのプロパティをプレビュー UI にバインドします。 データバインディングは、UI ビルダー の構成パネルの \[構成\] タブにあります。詳細については、「[UI ビルダー のデータリソース](https://www.servicenow.com/docs/access?context=data-resources&version=australia&pubname=australia-application-development&ft:locale=en-US)」を参照してください。 6. プレビュー UI でコンポーネントにスクリプトを追加してバインドし、イベントハンドラーを使用してイベントをディスパッチして、対応するペイロードを含む推奨事項を実行またはスキップします。 次の表は、エージェントが実行するアクションに関して発行されるイベントのリストを示しています。 {#customize-ra-preview-experience__table_grp_flc_xvb__entry__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: { : }, 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: , actionInputs: api.context.props.customExpProps.actionInputs, formFieldInputs: {"":""}, 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": "", "payload": { } } | | LOG_SEARCH_RESULT_EVENT | 検索結果ログをキューに入れられたシグナルイベント \[sys_signal_event_queue\] テーブルに追加します。 api.emit(LOG_SEARCH_RESULT_EVENT, {actionData: {actionName: actionId}}) | [表 : 2. プレビューエクスペリエンスのイベント] {#customize-ra-preview-experience__table_grp_flc_xvb} 詳細については、「[クライアントスクリプトを定義してコンポーネントにバインドする](https://www.servicenow.com/docs/access?context=define-client-scripts&version=australia&pubname=australia-application-development&ft:locale=en-US)」を参照してください。