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

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();

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