カタログ参照コンポーネントインスタンスの構成

移動先すべて > Web 埋め込み可能 > ホームページ.

ホームページで、[モジュールの作成] を選択するか、既存のモジュールを使用します。

新しいモジュールの作成の詳細については、「モジュールを作成」を参照してください。

モジュールページの [コンポーネント] タブで、カタログ参照コンポーネントインスタンスを既存または新しいグループに追加します。

グループを作成してからコンポーネントインスタンスを追加する方法の詳細については、「グループの作成とコンポーネントインスタンスの追加」を参照してください。

オプション: [ 静的プレビューを表示 ] オプションを切り替えて、ライブプレビューが利用できないときにコンポーネントの視覚的表現を表示します。

注:

有効にすると、グローバルプロパティまたはコンポーネントプロパティへの変更は [プレビュー] タブにリアルタイムで表示されません。

カタログ参照コンポーネントインスタンスのプロパティを構成します。

[プレビュー] タブには、コンポーネントプロパティで設定された選択肢に従ってリアルタイムデータが表示されます。
Catalog Browse コンポーネントに関連するコンポーネントプロパティの説明については、「カタログ参照のコンポーネントプロパティ」を参照してください。

[ 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: Catalog browse 1
-->
<sn-embedx-catalog-browse selection-type="catalog"></sn-embedx-catalog-browse>
<!--
 The component also includes the following additional properties:
 select-catalogs
 select-categories
 hide-price
 hide-navigation-panel
 hide-popular-requests
 hide-recent-requests
-->

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

	getEmbeddables(["sn-embedx-catalog-browse"]);

	const eventHandlers = {
		'CATALOG_BROWSE#COMPONENT_READY' : (e) => {
			// This event is dispatched when a component is ready and usable.
		},
		'CATALOG_BROWSE#CATALOG_ITEM_SELECTED' : (e) => {
			// This event is dispatched when a catalog item is selected.
			var {catalog_item_details} = e.detail.payload;
			// Logic to construct the URL based on the catalog item details
			let redirectURL;
			const type = catalog_item_details.type;

			if (type === 'catalog_item' || type === 'record_producer') {
				redirectURL = '/catalog_form?emb_recordid=' + catalog_item_details.sys_id;
			} else if (type === 'content_item') {
				const content_type = catalog_item_details.content_type;
				if (content_type === 'kb') {
					redirectURL = '/article_view?emb_recordid=' + catalog_item_details.kb_article;
				} else if (content_type === 'external') {
					redirectURL = catalog_item_details.url;
				} else if (content_type === 'dynamic') {
					const dynamicContentItemDetails = catalog_item_details.dynamicContentItemDetails;
					// Check for 'Playbook' dynamic content type
					if(dynamicContentItemDetails.dynamicContentType === 'c0e6a71443923110f6669c7385b8f20a')
						redirectURL = '/playbook_intake?emb_playbook_title=' + dynamicContentItemDetails.content.title + '&emb_table=' + dynamicContentItemDetails.content.table + '&emb_record_generator=' + dynamicContentItemDetails.content.query + '&emb_playbook_experience=' + dynamicContentItemDetails.content.playbook_experience;
				}
			}
			// Redirect to the respective component page
			open(redirectURL, '_self');
		},
		'CATALOG_BROWSE#COMPONENT_EMPTY' : (e) => {
			// This event is dispatched when a component has nothing to display.
		},
		'CATALOG_BROWSE#COMPONENT_ERROR' : (e) => {
			// This event is dispatched when a component encounters an error.
			var {errorMessage, errorType} = e.detail.payload;
			console.log(errorMessage, errorType);
		}
	};

	setEvents(snEmbedxCatalogBrowse, eventHandlers);
</script>

カタログ参照コンポーネントインスタンスの構成

オーストラリアのカスタマーサービス管理 (CSM)

カタログ参照コンポーネントインスタンスの構成

始める前に

手順

タスクの結果

次のタスク