---
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


---

# オブジェクトリストコンポーネントインスタンスの構成

# オブジェクトリストコンポーネントインスタンスの構成 {#ariaid-title1}

* リリースバージョン: Australia
* 
* 更新日 2026年03月12日
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：12分

オブジェクトリストコンポーネントのインスタンスを構成して、ユーザーが Web サイトに埋め込み、任意の ServiceNow テーブルの情報を表示できるようにします。このコンポーネントを使用すると、列の選択、フィルタリング、ソート、およびページネーションのオプションを構成できます。

## 始める前に

オブジェクトリストコンポーネントのインスタンスを構成するには、次のセットアップが必要です。

* インスタンスで Web 埋め込み可能 を有効にします。詳細については、「[Web 埋め込み可能 のアクティブ化](https://servicenow-prod.fluidtopics.net/3DKvoXXZsHZc4u08RQRTQQ "カスタマーサービス (sn_cx_components) の ServiceNow コンポーネント、ゲストの Web コンポーネント (sn_guest_component)、および Web 埋め込み可能コア (sn_embeddable_core) を有効にして、インスタンスで Web 埋め込み可能 を有効にすることができます。このアプリケーションは、まだインストールされていない関連プラグインを確立します。")」を参照してください。
* [カスタム URL をインスタンス URL として設定](https://servicenow-prod.fluidtopics.net/wS0HjuvEaanOh7TGO_kH7Q "使用するインスタンス構成に、ServiceNow URL の代わりにカスタム URL を追加します。このカスタム URL により、サードパーティの Cookie がオフになっている場合でも、ブラウザで埋め込みコンポーネントに引き続きアクセスできるようになります。")。
* OpenID Connect (OIDC) 認証または非 OIDC 認証を使用して、 ServiceNow コンポーネントを認証します。詳細については、「[OIDC を使用した ServiceNow コンポーネントの認証](https://servicenow-prod.fluidtopics.net/ddfwYpuYBuQ8FHVjg_URrA "OpenID Connect (OIDC) 認証を使用して自動ログインとログアウトを設定し、Web サイトや埋め込みコンポーネントで単一のログイン/ログアウトや同時ログイン/ログアウトを行えるようにします。")」と「[ServiceNow コンポーネントの非 OIDC 認証](https://servicenow-prod.fluidtopics.net/oUu5w6cTytujPpcjcjZshg "Web サイトで OpenID Connect (OIDC) 認証を使用しない場合は、JSON Web トークン (JWT) トークンを生成して ServiceNow コンポーネントを認証します。")」を参照してください。
{#we-config-object-list-comp__ul_brf_cqf_ccc}

必要なロール:sn_embeddable_core.emb_admin

## 手順

1. 移動先 すべてWeb 埋め込み可能ホームページ.
2. ホームページで、\[モジュールの作成\] を選択するか、既存のモジュールを使用します。  
   新しいモジュールの作成の詳細については、「 [モジュールを作成](https://servicenow-prod.fluidtopics.net/dDeTk~6YSf1NJjA_4gpmpQ "Web サイトで使用されるコンポーネントインスタンスを管理するためのモジュールを作成します。モジュールを作成するか、構築済みのモジュールを使用して要件に応じて編集することができます。")」を参照してください。
3. モジュールページの \[コンポーネント\] タブで、オブジェクトリストコンポーネントインスタンスを既存または新しいグループに追加します。  
   グループを作成してからコンポーネントインスタンスを追加する方法の詳細については、「 [グループの作成とコンポーネントインスタンスの追加](https://servicenow-prod.fluidtopics.net/TmdEAY0orFj5nCaIhB5y2A "ページやセクションなどのサードパーティの Web サイト構造をモデル化するグループを作成します。デフォルトのグループを使用するか、新しいグループを作成して、そのページまたはセクションのコンポーネントインスタンスを管理します。")」を参照してください。
4. **オプション:** \[ 静的プレビューを表示 \] オプションを切り替えて、ライブプレビューが利用できないときにコンポーネントの視覚的表現を表示します。  
   注:  
   有効にすると、グローバルプロパティまたはコンポーネントプロパティへの変更は \[プレビュー\] タブにリアルタイムで表示されません。
5. オブジェクトリストコンポーネントのインスタンスプロパティを構成します。  
   * \[プレビュー\] タブには、コンポーネントプロパティで設定された選択肢に従ってリアルタイムデータが表示されます。
   * オブジェクトリストコンポーネントインスタンスに関連するコンポーネントプロパティの説明については、「 [オブジェクトリストのコンポーネントプロパティ](https://servicenow-prod.fluidtopics.net/mtlGJWbxTCzphp7dJXA_Fg "コンポーネントプロパティを使用すると、サードパーティ Web サイトでのオブジェクトリストコンポーネントの動作を構成できます。")」を参照してください。
   {#we-config-object-list-comp__ul_jlw_yjw_cfc}
6. \[ CORS ルール \] タブを選択して、CORS ルールを構成します。  
   CORS ルールの構成の詳細については、「 [ServiceNowコンポーネントを埋め込む前に CORS (クロスオリジンリソース共有) ルールを構成する](https://servicenow-prod.fluidtopics.net/myQcJ8PC1kM9u7dlhnsbCw "ServiceNow コンポーネントと Web コンポーネントを埋め込む Web サイト間のクロスドメイン要求を有効にするように CORS ルールを設定します。")」を参照してください。
7. \[コンポーネント\] タブを選択します。  
   アプリケーションスコープに関するメッセージが表示された場合は、スコープを \[カスタマーサービスの Web コンポーネント \] に変更して、レコードを編集できるようにします。
8. \[埋め込みコードの取得\] を選択します。  
   グローバルコードとコンポーネントコードの両方を表示するポップアップウィンドウが表示されます。
9. \[グローバル コード\] タブで、生成されたコードを確認し、\[ グローバル コードのコピー\] を選択します。  
   グローバル コードは、サードパーティの Web ページに一度だけ追加する必要があります。

       import { init, login, logout, startGuestSession } from 'https://demo.servicenow.com/uxasset/externals/sn_embeddable_core/index.jsdbx';

       await init({
           theme: 'fad87d2ca304121029a4d1aed31e610f',  /* sys_id of the theme to use for the embeddable components in your website */
           baseURL: 'https://demo.servicenow.com', /* Base URL of the instance to be used for the embeddable components in your website */
           authCallback: getTokenCallBack, /* Function which returns the auth token for the current user, required for auth setup */
           module: '591800ffc1243610f87714367ed47c6a', /* Demo module */
           pageName: document.title, /* Uses the browser's document title as the page name in User analytics experience */
           guestTokenCallback: getGuestJWTTokenCallBack, /* Function which returns the guest token for the current user, required for guest validation setup */
           cacheComponents: [] /* Pre-caches resources for improved performance. Update component list as per your usage */
       });

       function getTokenCallBack() {
           var idToken; /* Get the id token for the current user */
           return Promise.resolve(idToken);
       }

       function getGuestJWTTokenCallBack() {
           var guestToken; /* Get the guest token for the current user */
           return Promise.resolve(guestToken);
       }

       /* Uncomment below function to handle guest session */
       // await startGuestSession();

       /* Uncomment below functions to handle login and logout once the user logs into your website */
       // await login();
       // await logout();

10. **オプション:** \[コンポーネント コード\] タブで、\[ イベント ハンドラーを有効にする \] 切り替えスイッチをスライドさせて、Web ページでのユーザー操作によってトリガーされたイベントを処理します。  
    注:  
    イベントハンドラーを有効にすると、コンポーネントコードも変更されます。Web 埋め込み可能 におけるイベントハンドラーの詳細については、「[オブジェクトリストコンポーネントのイベントハンドラー](https://servicenow-prod.fluidtopics.net/GDrQHv6N3fzbWCz0c_86qw "コンポーネントは、特定の条件が満たされたとき、またはユーザーのインタラクション時にイベントをトリガーします。このイベントを使用して、サードパーティ Web ページのコードを介してアクションを実行できます。")」を参照してください。
11. \[コンポーネントコード\] タブで、生成されたコードを確認し、\[コンポーネントコードをコピー (Copy component code)\] を選択します。  
    この生成されたコードには、イベントハンドラーも含まれます。

        <!--  
            Module: Demo module
            Group: Group 1
            Instance: Object list 1
        -->
        <sn-embedx-object-list
        	type="default"
        	table="sn_customerservice_case"
        	action-config="6316ec1355dd422a8ebfdeb6336b1179"
        	child-records-per-load="10"
        	max-cell-characters="500"
        	records-per-page='[10,20,50]'
        	visible-page-range="5"
        	footer-text="View All"
        	max-top-records="20"
        	header-size="md">
        </sn-embedx-object-list>
        <!--
         The component also includes the following additional properties:
         hide-header
         hide-record-count
         hide-search
         hide-filters
         disable-column-selection
         hide-actions
         max-columns-displayed
         hide-record-links
         show-reference-record-links
         disable-column-highlighting
         shade-alternate-rows
         hide-child-record-count
         disable-quick-edit
         disable-cell-wrapping
         disable-cell-editing
         hide-errors
         limit-records-fetched
         hide-page-size-control
         disable-cell-filtering
         disable-column-sorting
         disable-column-filtering
         disable-column-grouping
         show-condition-builder
         hide-refresh-button
         disable-title-wrap
         disable-column-resizing
         disable-column-drag-and-drop
         disable-row-drag-and-drop
         expand-groups-by-default
         hide-toggle-all-groups-button
         hide-when-empty
         edit-query
         default-filter
         columns
         list-view
         nest-by
         default-group-by
         list-title
         subtitle
         highlighted-value-config
        -->

        <script type="module">
        	import { getEmbeddables, setEvents, setProperties } from 'https://demo.servicenow.com/uxasset/externals/sn_embeddable_core/index.jsdbx';
        	
        	const snEmbedxObjectList = document.querySelector('sn-embedx-object-list');

        	/* Uncomment this code to set Object list properties using URL parameters.

        	// Get the table, query, view or nestby from the URL parameters to dynamically set the component properties. For related list, get sysRecordID to use it in filter.
        	const currentURL = new URL(window.location.href);
        	const urlParams = new URLSearchParams(currentURL.search);
        	const tableName = urlParams.get('emb_table');
        	const filter = urlParams.get('emb_filter');
        	const view = urlParams.get('emb_view');
        	const nestby = urlParams.get('emb_nestby');
        	const sysRecordId = urlParams.get('emb_recordid');

        	// Update the table, filter, view or nestby properties of the component
        	setProperties(snEmbedxObjectList, {
        		table: tableName,
        		editQuery: filter || '<fieldname>=' + sysRecordId,
        		listView: view,
        		nestBy: nestby
        	});
        */

        	getEmbeddables(["sn-embedx-object-list"]);

        	const eventHandlers = {
        		'SN_EMBEDX_OBJECT_LIST#FOOTER_LINK_SELECTED' : (e) => {
        			// This event is dispatched when footer link is selected
        			var {table, view, edit_query, nest_by} = e.detail.payload;
        	// the logic to construct the URL for the Record View component. Add your portal URL here.
        	const objectListURL = '/objectlist?emb_table=' + table + '&emb_query=' + edit_query + '&emb_view=' + view + '&emb_nestby=' + nest_by;
        	// Open the Record List component in the same tab
        	open(objectListURL, '_self');
        		},
        		'SN_EMBEDX_OBJECT_LIST#COMPONENT_ERROR' : (e) => {
        			// This event is dispatched when a property validation or internal error occurs.
        			var {errorMessage, errorType} = e.detail.payload;
        			console.log(errorMessage, errorType);
        		},
        		'SN_EMBEDX_OBJECT_LIST#RECORD_SELECTED' : (e) => {
        			// This event is dispatched when a record is selected.
        			var {table, record_sys_id} = e.detail.payload;

        			var RecordViewURL;
        			if(table == 'sn_customerservice_case'){
        				RecordViewURL = '/caseview?emb_table=' + table + '&emb_recordid=' + record_sys_id;
        			} else {
        				RecordViewURL = '/recordview?emb_table=' + table + '&emb_recordid=' + record_sys_id;
        			}
        			open(RecordViewURL, '_self');
        		},
        		'SN_EMBEDX_OBJECT_LIST#COMPONENT_READY' : (e) => {
        			// This event is dispatched when a component is ready and usable.
        		}
        	};

        	setEvents(snEmbedxObjectList, eventHandlers);
        </script>

{#we-config-object-list-comp__steps_iph_z3s_zft}

## タスクの結果

グローバルコードとコンポーネントコードをサードパーティアドミニストレーターと共有して、オブジェクトリストコンポーネントインスタンスをサードパーティ Web サイトに埋め込む準備ができました。

## 次のタスク

[サードパーティ Web サイトへのオブジェクトリストコンポーネントの埋め込み](https://servicenow-prod.fluidtopics.net/QOtMuGwYRaGBNn2HbQGCeQ "インスタンスで構成したオブジェクトリストコンポーネントのグローバルコードとコンポーネントコードを埋め込み、顧客がサードパーティの Web サイトでコンポーネントの使用を開始できるようにします。")
**関連資料**   

* [オブジェクトリストのコンポーネントプロパティ](https://servicenow-prod.fluidtopics.net/mtlGJWbxTCzphp7dJXA_Fg "コンポーネントプロパティを使用すると、サードパーティ Web サイトでのオブジェクトリストコンポーネントの動作を構成できます。")
* [オブジェクトリストコンポーネントのイベントハンドラー](https://servicenow-prod.fluidtopics.net/GDrQHv6N3fzbWCz0c_86qw "コンポーネントは、特定の条件が満たされたとき、またはユーザーのインタラクション時にイベントをトリガーします。このイベントを使用して、サードパーティ Web ページのコードを介してアクションを実行できます。")
* [オブジェクトリストコンポーネントのサンプルコード](https://servicenow-prod.fluidtopics.net/xSKy6NlNAu54LI6CyU_1HQ "イベントがトリガーされたときのアクションを定義するためのサンプルコードが用意されています。コンポーネントを Web ページに埋め込む前に、ユースケースのサンプルコードを更新します。")