カタログアイテムコンポーネントインスタンスの構成

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間：11分

    • ユーザーが Web サイトに埋め込み、Web サイトからアイテムまたはサービスを要求できるように、カタログアイテムコンポーネントインスタンスを構成します。

    始める前に

    カタログアイテムコンポーネントのインスタンスを構成するには、次のセットアップが必要です。

    必要なロール:sn_embeddable_core.emb_admin

    手順

    1. 移動先 すべて > Web 埋め込み可能 > ホームページ.
    2. ホームページで、[モジュールの作成] を選択するか、既存のモジュールを使用します。
      モジュールの作成の詳細については、「 モジュールを作成」を参照してください。
    3. モジュールページの [コンポーネント] タブで、カタログアイテムコンポーネントインスタンスを既存または新しいグループに追加します。
      グループを作成してからコンポーネントインスタンスを追加する方法の詳細については、「 グループの作成とコンポーネントインスタンスの追加」を参照してください。
    4. オプション: [ 静的プレビューを表示 ] オプションを切り替えて、ライブプレビューが利用できないときにコンポーネントの視覚的表現を表示します。
      注:
      有効にすると、グローバルプロパティまたはコンポーネントプロパティへの変更は [プレビュー] タブにリアルタイムで表示されません。
    5. カタログアイテムコンポーネントのインスタンスプロパティを構成します。
      • [プレビュー] タブには、コンポーネントプロパティで設定された選択肢に従ってリアルタイムデータが表示されます。
      • カタログアイテムコンポーネントインスタンスに関連するコンポーネントプロパティの説明については、「 カタログアイテムのコンポーネントプロパティ」を参照してください。
    6. [ CORS ルール ] タブを選択して、CORS ルールを構成します。
      CORS ルールの構成の詳細については、「 ServiceNowコンポーネントを埋め込む前に CORS (クロスオリジンリソース共有) ルールを構成する」を参照してください。
    7. [ コンポーネント ] タブを選択します。
      アプリケーションスコープに関するメッセージが表示された場合は、スコープを [カスタマーサービスの Web コンポーネント ] に変更して、レコードを編集できるようにします。
    8. [ 埋め込みコードの取得] を選択します。
      グローバルコードとコンポーネントコードの両方を表示するポップアップウィンドウが表示されます。
    9. [グローバル コード] タブで、生成されたコードを確認し、[ グローバル コードのコピー] を選択します。
      グローバルコードは、サードパーティのウェブページに一度だけ追加する必要があります。
      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 埋め込み可能 におけるイベントハンドラーの詳細については、「カタログアイテムコンポーネントのイベントハンドラー」を参照してください。
    11. [コンポーネントコード] タブで、生成されたコードを確認し、[コンポーネントコードをコピー (Copy component code)] を選択します。
      この生成されたコードには、イベントハンドラーも含まれます。
      <!--  
    Module: Demo module
    Group: Group 1
    Instance: Catalog item 1
-->
<sn-embedx-catalog-item-form
	sys-id="56c62944c30102003d3b7bfaa2d3ae36"
	confirmation-text="Request submitted successfully!"
	confirmation-sub-text="Estimated resolution in 24 hours"
	reference-number-label="Reference Number :"
	primary-button-label="View details"
	secondary-button-label="Browse services">
</sn-embedx-catalog-item-form>
<!--
 The component also includes the following additional properties:
 hide-reference-number
 hide-primary-button
 hide-secondary-button
 hide-record-created-confirmation
 hide-errors
 hide-notifications
-->

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

	/* Uncomment this code for the default behaviour of the Catalog item component.

	// Get the catalog item record id from the current URL.
	// Optionally, get query to pre fill the form.
	const currentURL = new URL(window.location.href);
	const urlParams = new URLSearchParams(currentURL.search);
	const account = urlParams.get('emb_account');
	const preferred_language = urlParams.get('emb_preferred_language');
	// Update the sysId of the component property.
	// Optionally, update the prefill fields property
	const prefillConfig = {
			account: account,
			preferred_language: preferred_language
	};
	setProperties(snEmbedxCatalogItemForm,{
		prefillFields: prefillConfig
	});
*/

	getEmbeddables(["sn-embedx-catalog-item-form"]);

	const eventHandlers = {
		'SN_EMBEDX_CATALOG_ITEM_FORM#RECORD_CREATION_FAILED' : (e) => {
			// This event is dispatched if the record creation has failed.
		},
		'SN_EMBEDX_CATALOG_ITEM_FORM#COMPONENT_NOTIFICATION_SENT' : (e) => {
			// This event is dispatched when the component provides a notification for the end user.
			var {items} = e.detail.payload;
			console.log(items);
		},
		'SN_EMBEDX_CATALOG_ITEM_FORM#COMPONENT_READY' : (e) => {
			// This event is dispatched when a component is ready and usable.
		},
		'SN_EMBEDX_CATALOG_ITEM_FORM#RECORD_CREATION_SUCCEEDED' : (e) => {
			// This event is dispatched if the record was successfully created.
			var {table, record_sys_id} = e.detail.payload;
			console.log(table, record_sys_id);
		},
		'SN_EMBEDX_CATALOG_ITEM_FORM#BUTTON_CLICKED' : (e) => {
			// This event is dispatched if any button is clicked on the confirmation message.
			var {table, record_sys_id, button_variant} = e.detail.payload;
			var primaryURL =  '/caseview'; // Replace with the URL of the case view page
			var secondaryURL = '/browse'; // Replace with the URL of the secondary page

			if(button_variant == 'primary') {
				// Construct the URL for the Case View component with URL parameters
				const caseViewURL = primaryURL+'?emb_table='+table+'&emb_recordid='+record_sys_id;
				open(caseViewURL,'_self'); // Open case record when primary button is clicked
			}
			else {
				// Open the Case View component in the same tab
				open(secondaryURL,'_self');
			}
		},
		'SN_EMBEDX_CATALOG_ITEM_FORM#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);
		}
	};

	setEvents(snEmbedxCatalogItemForm, eventHandlers);
</script>

    タスクの結果

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

    次のタスク

    サードパーティ Web サイトにカタログアイテムコンポーネントインスタンスを埋め込む