• 미리 보기 탭에는 구성요소 속성에 설정된 선택 항목에 따라 실시간 데이터가 표시됩니다.
• 케이스 뷰 구성요소 인스턴스와 관련된 구성요소 속성에 대한 설명은 다음 문서를 참조하십시오 케이스 뷰의 구성요소 속성.

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: Case view 1
-->
<sn-embedx-case-view
	table="sn_customerservice_case"
	table-view-for-related-list="4006fee3d7600200e5982cf65e6103de"
	header-configuration-id="1db45f9118520210f8775b8843daf927"
	action-configuration-id="b226535518520210f8775b8843daf9fb"
	playbook-stage-orientation="horizontal"
	visible-horizontal-playbook-stages="5"
	playbook-activity-view-mode="focused"
	sys-id="aa5ca024d7700200e5982cf65e61030e">
</sn-embedx-case-view>
<!--
 The component also includes the following additional properties:
 hide-activity
 hide-attachments
 hide-actions
 hide-all-related-lists
 show-custom-tab
 hide-errors
 hide-playbook-process-tab
 selected-playbook-context-id
 selected-stage-context-id
 selected-activity-context-id
 hide-playbook-stages
-->

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

	/* Uncomment this code for the default behaviour of the Case View component.

	// Get the record id and table from the current URL for a standard case.
	// Optionally, get playbook experience ID, playbook context ID, stage context ID,
	// and activity context ID for playbook case.
	const currentURL = new URL(window.location.href);
	const urlParams = new URLSearchParams(currentURL.search);
	const tableName = urlParams.get('emb_table');
	const sysRecordId = urlParams.get('emb_recordid');
	const playbookExperience = urlParams.get('emb_playbook_experience');
	const playbookContextId = urlParams.get('emb_playbook_context_id');
	const stageContextId = urlParams.get('emb_stage_context_id');
	const activityContextId = urlParams.get('emb_activity_context_id');

	// Update the sysId and table properties of the componentProperties object.
	// Optionally, update the playbook experience ID, playbook context ID,
	// stage context ID, and activity context ID for the playbook case view as well.
	setProperties(snEmbedxCaseView,{
		table:tableName,
		sysId:sysRecordId,
		playbookExperience:playbookExperience,
		selectedPlaybookContextId:playbookContextId,
		selectedStageContextId:stageContextId,
		selectedActivityContextId:activityContextId
	});
	*/

	getEmbeddables(["sn-embedx-case-view"]);

	const eventHandlers = {
		'SN_EMBEDX_CASE_VIEW#COMPONENT_READY' : (e) => {
			// This event is dispatched when a component is ready and usable.
		},
		'SN_EMBEDX_CASE_VIEW#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_CASE_VIEW#CASE_COMMENT_ADDED' : (e) => {
			// This event is dispatched when a comment is added in the activity stream.
		}
	};

	setEvents(snEmbedxCaseView, eventHandlers);
</script>