---
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) 所要時間：5分

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

## 始める前に

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

## このタスクについて

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

## 手順

1. 移動先 すべて推奨アクションアクションタイプガイダンス.
2. \[ガイダンス\] リストからガイダンスを選択します。
3. \[詳細 UI を作成\] を選択して、ガイダンス詳細エクスペリエンスの UI ページバリアントを作成します。  
   このページには、次の表にリストされているプロパティを持つ空のコンテナが含まれています。{#customize-ra-detail-experience__table_eq3_zhc_xvb__entry__2}

   | プロパティ | 説明 |
   |-|-|
   | guidanceInputs | ガイダンスを実行するために必要な入力。 |
   | guidanceOutputs | ガイダンスの出力。 |
   | status | ガイダンスのステータス。 |
   | guidanceMessage | 詳細エクスペリエンスのメッセージ。 |
   | guidanceActions | 詳細ビューのガイダンスアクション。 |
   | errorMessage | 推奨事項の表示に失敗した場合に表示するエラーメッセージ。 |
   [表 : 1. 詳細エクスペリエンスのプロパティ]

   {#customize-ra-detail-experience__table_eq3_zhc_xvb}

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

       {
           "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 ビルダー のコンポーネントの操作](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-detail-experience__table_grp_flc_xvb__entry__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"); } ); 注: 応答の `guidanceActions[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": {} |
   [表 : 2. 詳細エクスペリエンスのイベント]

   {#customize-ra-detail-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)」を参照してください。
{#customize-ra-detail-experience__steps_b33_gzj_wvb}