オブジェクトリストコンポーネントインスタンスの構成
オブジェクトリストコンポーネントのインスタンスを構成して、ユーザーが Web サイトに埋め込み、任意の ServiceNow テーブルの情報を表示できるようにします。このコンポーネントを使用すると、列の選択、フィルタリング、ソート、およびページネーションのオプションを構成できます。
始める前に
オブジェクトリストコンポーネントのインスタンスを構成するには、次のセットアップが必要です。
- インスタンスで Web 埋め込み可能 を有効にします。詳細については、「Web 埋め込み可能 のアクティブ化」を参照してください。
- カスタム URL をインスタンス URL として設定。
- OpenID Connect (OIDC) 認証または非 OIDC 認証を使用して、 ServiceNow コンポーネントを認証します。詳細については、「OIDC を使用した ServiceNow コンポーネントの認証」と「ServiceNow コンポーネントの非 OIDC 認証」を参照してください。
必要なロール:sn_embeddable_core.emb_admin
手順
- 移動先 すべて > Web 埋め込み可能 > ホームページ.
-
ホームページで、[モジュールの作成] を選択するか、既存のモジュールを使用します。
新しいモジュールの作成の詳細については、「 モジュールを作成」を参照してください。
-
モジュールページの [コンポーネント] タブで、オブジェクトリストコンポーネントインスタンスを既存または新しいグループに追加します。
グループを作成してからコンポーネントインスタンスを追加する方法の詳細については、「 グループの作成とコンポーネントインスタンスの追加」を参照してください。
- オプション:
[ 静的プレビューを表示 ] オプションを切り替えて、ライブプレビューが利用できないときにコンポーネントの視覚的表現を表示します。
注:有効にすると、グローバルプロパティまたはコンポーネントプロパティへの変更は [プレビュー] タブにリアルタイムで表示されません。
-
オブジェクトリストコンポーネントのインスタンスプロパティを構成します。
- [プレビュー] タブには、コンポーネントプロパティで設定された選択肢に従ってリアルタイムデータが表示されます。
- オブジェクトリストコンポーネントインスタンスに関連するコンポーネントプロパティの説明については、「 オブジェクトリストのコンポーネントプロパティ」を参照してください。
-
[ CORS ルール ] タブを選択して、CORS ルールを構成します。
CORS ルールの構成の詳細については、「 ServiceNowコンポーネントを埋め込む前に CORS (クロスオリジンリソース共有) ルールを構成する」を参照してください。
-
[コンポーネント] タブを選択します。
アプリケーションスコープに関するメッセージが表示された場合は、スコープを [カスタマーサービスの Web コンポーネント ] に変更して、レコードを編集できるようにします。
-
[埋め込みコードの取得] を選択します。
グローバルコードとコンポーネントコードの両方を表示するポップアップウィンドウが表示されます。
-
[グローバル コード] タブで、生成されたコードを確認し、[ グローバル コードのコピー] を選択します。
グローバル コードは、サードパーティの 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(); - オプション:
[コンポーネント コード] タブで、[ イベント ハンドラーを有効にする ] 切り替えスイッチをスライドさせて、Web ページでのユーザー操作によってトリガーされたイベントを処理します。
注:イベントハンドラーを有効にすると、コンポーネントコードも変更されます。Web 埋め込み可能 におけるイベントハンドラーの詳細については、「オブジェクトリストコンポーネントのイベントハンドラー」を参照してください。
-
[コンポーネントコード] タブで、生成されたコードを確認し、[コンポーネントコードをコピー (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>
タスクの結果
グローバルコードとコンポーネントコードをサードパーティアドミニストレーターと共有して、オブジェクトリストコンポーネントインスタンスをサードパーティ Web サイトに埋め込む準備ができました。