전역 및 구성요소 코드에서 사용할 수 있는 Web Embeddables 함수

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 5분

    • ServiceNow Embeddables API를 사용하면 구성요소를 외부 웹사이트에 통합할 ServiceNow 수 있습니다. 이러한 기능은 초기화, 인증, 구성 요소 관리 및 이벤트 처리에 필수적인 기능을 제공합니다.

    전역 코드

    포함 스크립트에는 다음 메서드가 전역 코드의 일부로 포함됩니다. 다음 상세 정보는 작동 방식을 이해하는 데 도움이 됩니다.
    Init 메서드
    • 목적: 구성 설정으로 포함 가능한 프레임워크를 초기화합니다.
    • 사용 패턴: 
      await init({
	theme: 'fad87d2ca304121029a4d1aed31e610f', //sys_id of theme,
	baseURL: 'https://demo.servicenow.com',
	authCallback: getTokenCallBack, // Authentication callback function 
       locale: 'ja', // Language/locale for components
       interceptSessionTimeout: true, // Handle session timeouts (default: true)
	// cacheComponents: [ //Pre-cache component for performance  "sn-embedx-case-form", "sn-embedx-case-list", "sn-embedx-case-view" ]
});
    • 매개변수:
      • authCallback (함수): 현재 사용자에 대한 인증 토큰을 반환합니다.
      • baseURL (문자열): 인스턴스의 기본 URL입니다 ServiceNow .
      • locale (문자열, 선택 사항): 인증된 사용자에 대해 사용자의 언어 기본 설정을 ServiceNow 업데이트하는 언어/로캘 설정(예: 'en', 'es')입니다.
      • theme (문자열): 적용할 테마의 sys_id입니다.
      • interceptSessionTimeout (부울, 선택 사항): 세션 시간 제한 처리를 사용하도록 설정합니다. 기본적으로 true로 설정됩니다.
      • cacheComponents (배열, 선택 사항): 사전 캐시할 구성 요소 태그 이름의 목록입니다.
    • 주요 동작:
      • 다른 포함 가능 함수 전에 호출해야 합니다.
      • 필요한 자원을 로드하고 연결을 설정합니다.
      • 선택적으로 세션 관리를 위한 인터셉터를 설정합니다.
      • 로케일이 제공된 경우 인증된 사용자에 대한 사용자의 언어 기본 설정을 업데이트합니다.
      • 성능 향상을 위해 지정된 구성요소를 사전 캐시합니다.
    로그인()
    • 목적: 인스턴스에서 사용자를 ServiceNow 인증합니다.
    • 사용 패턴:
      await login();
    • 주요 동작:
      • 초기화 중에 제공된 authCallback 함수를 호출합니다.
      • 반환된 토큰으로 인증 - 성공 시 이벤트를 디스패치합니다 SN_EMBEDDABLES_LOGIN_SUCCESS .
    • 전제 조건: init() 는 먼저 유효한 authCallback을 사용하여 호출되어야 합니다. - authCallback 함수는 올바른 인증 토큰을 반환해야 합니다.
    로그아웃()
    • 목적: 세션에서 ServiceNow 사용자를 로그아웃합니다.
    • 사용 패턴: 
      await logout();
    • 주요 동작: 성공 시 이벤트를 디스패치합니다 SN_EMBEDDABLES_LOGOUT_SUCCESS .
    • 필수 구성 요소: 유효한 baseURL을 사용하여 init() 를 먼저 호출해야 합니다. - 사용자가 로그인해야 합니다.

    구성요소 코드

    포함 스크립트에는 구성요소 코드의 일부로 다음 메서드가 포함되어 있습니다. 다음 상세 정보는 작동 방식을 이해하는 데 도움이 됩니다.
    getEmbeddables
    • 목적: 지정된 포함 가능 구성요소를 로드하고 초기화합니다.
    • 사용 패턴: 
      // Load components by providing array of component tag names
getEmbeddables(["sn-embedx-case-view", "sn-embedx-case-form"]);
    • 매개변수: components (배열): 로드할 구성요소 태그 이름의 배열
    setProperties(componentElement, 속성)
    • 목적: 포함 가능한 구성요소 인스턴스의 속성을 설정합니다.
    • 사용 패턴:
      const caseViewComponent = document.querySelector('sn-embedx-case-view');
setProperties(snEmbedxCaseView,{
		table:sn_customerservice_case,
		sysId:221a69cd3b411300b5c42479b3efc480,
		playbookExperience:playbookExperience,
		selectedPlaybookContextId:85d9f349ff766210e9d3ffffffffffce,
		selectedStageContextId:9da56770ff7a2210e9d3ffffffffffd9,
		selectedActivityContextId:5d8bf1805d8bf8205d8b54d05d8be070 });
    • 매개변수: componentElm (HTMLElement): 구성요소 DOM 요소 - properties (객체): 설정할 속성의 키-값 쌍입니다.
    setEvents(componentElement, eventHandlers)
    • 목적: 이벤트 수신기를 포함 가능한 구성요소에 연결합니다.
    • 사용 패턴: 
      const caseViewComponent = document.querySelector('sn-embedx-case-view');
const eventHandlers = {'
'SN_EMBEDX_CASE_VIEW#COMPONENT_READY': (e) => { 
console.log('Component is ready and usable'); }, 
'SN_EMBEDX_CASE_VIEW#COMPONENT_ERROR': (e) => { const 
{ errorMessage, errorType } = e.detail.payload;
console.log('Component error:', errorMessage, errorType); },
};
setEvents(caseViewComponent, eventHandlers);
    • 매개변수: componentElm (HTML 요소): 구성요소 DOM 요소 - eventHandlers (객체): 키가 이벤트 이름이고 값이 핸들러 함수인 키-값 쌍입니다.

    주요 고려 사항

    다음은 이를 효과적으로 구현하는 데 도움이 되는 몇 가지 주요 고려 사항입니다.
    • init()를 먼저 호출해야 합니다. 이는 다른 모든 기능의 기초를 설정합니다.
    • 구성요소 수명주기에 이벤트 핸들러를 사용합니다. 또한 구성 요소 준비 상태 및 오류를 모니터링합니다.
    • 자주 사용되는 구성요소를 캐시합니다. 성능 향상을 위해 init()에서 cacheComponents를 사용합니다.
    • 구현