데이터 시각화 구성요소 인스턴스 구성

호주 고객 서비스 관리

Release

australia

ft:locale

ko-KR

ft:publication_title

호주 고객 서비스 관리

ft:clusterId

csm

bundleId

csm

workflow

Customer and Industry

데이터 시각화 구성요소 인스턴스 구성

릴리스 버전: Australia

업데이트 날짜 2026년 03월 12일

소요 시간: 11분

사용자가 웹 사이트에 임베드하여 테이블에서 직접 ServiceNow 단일 점수, 원형 차트, 도넛형 차트 또는 반원 도넛형 차트 형태로 정보를 표시할 수 있도록 데이터 시각화 구성요소 인스턴스를 구성합니다.

시작하기 전에

데이터 시각화 구성요소 인스턴스를 구성하려면 다음 설정이 있어야 합니다.

인스턴스에서 활성화합니다 Web Embeddables . 자세한 내용은 Web Embeddables 활성화 문서를 참조하십시오.
사용자 지정 URL을 인스턴스 URL로 설정.
OIDC(OpenID Connect) 인증 또는 비 OIDC 인증을 사용하여 구성요소를 인증합니다 ServiceNow . 자세한 내용은 OIDC를 사용하여 구성요소 인증 ServiceNow 및 구성요소에 대한 ServiceNow 비 OIDC 인증 문서를 참조하십시오.

필요한 역할: sn_embeddable_core.emb_admin

프로시저

다음으로 이동 모두 > Web Embeddable > 홈페이지.
홈페이지에서 모듈 만들기를 선택하거나 기존 모듈을 사용합니다.
새 모듈 생성에 대한 자세한 내용은 다음 문서를 참조하십시오 모듈 생성.
모듈 페이지의 구성요소 탭에서 데이터 시각화 구성요소 인스턴스를 기존 또는 새 그룹에 추가합니다.
그룹을 만든 다음 구성 요소 인스턴스를 추가하는 방법에 대한 자세한 내용은 을 참조하십시오 그룹 생성 및 구성요소 인스턴스 추가.
데이터 시각화 구성요소 인스턴스 속성을 구성합니다.
- 미리 보기 탭에는 구성요소 속성에 설정된 선택 항목에 따라 실시간 데이터가 표시됩니다.
- 데이터 시각화 구성 요소 인스턴스와 관련된 구성 요소 속성에 대한 설명은 문서를 참조하십시오 데이터 시각화를 위한 구성요소 속성.
CORS 규칙 탭을 선택하여 CORS 규칙을 구성합니다.
CORS 규칙 구성에 대한 자세한 내용은 다음 문서를 참조하십시오 구성요소를 포함 ServiceNow 하기 전에 CORS(Cross-Origin Resource Sharing) 규칙 구성.
구성 요소 탭을 선택합니다.
애플리케이션 범위에 대한 메시지가 나타나면 범위를 고객 서비스용 웹 구성 요소로 변경하여 기록을 편집할 수 있도록 합니다.
Embed 코드 가져오기를 선택합니다.
전역 코드와 구성요소 코드가 모두 표시되는 팝업 창이 나타납니다.

전역 코드 탭에서 생성된 코드를 검토하고 전역 코드 복사를 선택합니다.

전역 코드는 외부 공급업체 웹 페이지에 한 번만 추가해야 합니다.

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 Embeddables에 대한 자세한 내용은 다음 문서를 참조하십시오 데이터 시각화 구성요소의 이벤트 핸들러.

구성요소 코드 탭에서 생성된 코드를 검토하고 구성요소 코드 복사를 선택합니다.

생성된 구성요소 코드에는 이벤트 핸들러 및 도넛형 차트에 대한 구성도 포함됩니다.

<!--  
    Module: Demo module
    Group: Group 1
    Instance: Data visualization 1
-->
<sn-embedx-visualization-donut
	sort-by="value"
	data-labels-type="value"
	data-sources='[{"allowRealTime":true,"dataCategories":["trend","group","simple"],"filterQuery":"active=true^sys_updated_onONLast 7 days@javascript:gs.beginningOfLast7Days()@javascript:gs.endOfLast7Days()","id":"dGFibGVzbl9jdXN0b21lcnNlcnZpY2VfY2FzZTE3MjU0MjYxODczODc=","isDatabaseView":false,"label":"Case","preferredVisualizations":["d24d53f60350de7a652caf3188a46ed2"],"reportSourceSysId":null,"sourceType":"table","tableOrViewName":"sn_customerservice_case"}]'
	metrics='[{"aggregateFunction":"COUNT","axisId":"primary","dataSource":"dGFibGVzbl9jdXN0b21lcnNlcnZpY2VfY2FzZTE3MjU0MjYxODczODc=","id":"ZEdGaWJHVnpibDlqZFhOMGIyMWxjbk5sY25acFkyVmZZMkZ6WlRFM01qVTBNall4T0Rjek9EYz0xNzI1NDI2MTg4NjYx","numberFormat":{"customFormat":false}}]'
	group-by='[{"disableRanges":false,"groupBy":[{"dataSource":"dGFibGVzbl9jdXN0b21lcnNlcnZpY2VfY2FzZTE3MjU0MjYxODczODc=","groupByField":"state","isChoice":true,"isPaBucket":false,"isRange":false}],"hideZeroValues":true,"maxNumberOfGroups":"ALL","numberOfGroupsBasedOn":"NO_OF_GROUP_BASED_ON_PER_METRIC","showOthers":false}]'
	additional-group-by-config='[{"id":"state","label":"State"},{"id":"account","label":"Account"}]'
	truncation-type="end"
	show-register
	register-position="bottom"
	register-orientation="horizontal"
	legend-horizontal-alignment="center"
	ranges-config='null'
	color-config='null'
	show-header
	header-color='null'
	title-color='null'
	sort-by-order="desc"
	empty-state-illustration="no-data"
	empty-state-heading="No data available."
	empty-state-heading-level="3"
	empty-state-content="There are no scores available for the selected criteria. Contact your admin for more info."
	empty-state-alignment="vertical-centered"
	number-of-periods="3"
	period="M"
	user-info='"@context.session.user"'
	shared-context='null'
	colors='{}'>
</sn-embedx-visualization-donut>
<!--
 The component also includes the following additional properties:
 show-border
 drilldown-label
 show-data-labels
 max-label-size
 show-register-on-same-line
 show-register-value
 legend-max-item-width
 legend-expand-to-fit
 show-register-percentage
 wrap-title
 show-header-separator
 header-title
 description
 refresh-request
 show-additional-group-by-selector
 show-metric-label
 show-total-value
 enable-click-and-stay
 show-data-table
 enable-custom-empty-state
 apply-date-range
 show-absolute-period
 score-type
 start-time
 end-time
 use-current-date-for-end
 show-extended-error-messages
 auto-aggregate-periods
-->

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

	getEmbeddables(["sn-embedx-visualization-donut"]);

	const eventHandlers = {
		'NOW_VIS_WRAPPER#PROPERTY_OVERRIDE' : (e) => {
			// Dispatched when the visualization overrides its property. For example when the user selects a different group by from the alternative group by selection
			var {properties} = e.detail.payload;
			console.log(properties);
		},
		'NOW_VIS_WRAPPER#SELECTED' : (e) => {
			// Dispatched when the user selects/de-selects element on data visualizations, typically to filter other content on the page
			var {title, type, isSelected, params, data} = e.detail.payload;
			console.log(title, type, isSelected, params, data);
		},
		'NOW_VIS_WRAPPER#CLICKED' : (e) => {
			// Dispatched when the visualization is clicked
			var {title, type, params, data} = e.detail.payload;
			console.log(title, type, params, data);
		}
	};

	setEvents(snEmbedxVisualizationDonut, eventHandlers);
</script>

결과

전역 및 구성요소 코드를 외부 공급업체 관리자와 공유하여 외부 공급업체 웹 사이트에 데이터 시각화 구성요소 인스턴스를 포함할 준비가 되었습니다.

다음에 수행할 작업

외부 공급업체 웹 사이트에 데이터 시각화 구성요소 인스턴스 포함