객체 목록 구성요소 인스턴스 구성
사용자가 웹 사이트에 포함하여 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: Object list 1 --> <sn-embedx-object-list type="default" table="sn_customerservice_case" action-config="6316ec1355dd422a8ebfdeb6336b1179" child-records-per-load="10" max-cell-characters="500" records-per-page='[10,20,50]' visible-page-range="5" footer-text="View All" max-top-records="20" header-size="md"> </sn-embedx-object-list> <!-- The component also includes the following additional properties: hide-header hide-record-count hide-search hide-filters disable-column-selection hide-actions max-columns-displayed hide-record-links show-reference-record-links disable-column-highlighting shade-alternate-rows hide-child-record-count disable-quick-edit disable-cell-wrapping disable-cell-editing hide-errors limit-records-fetched hide-page-size-control disable-cell-filtering disable-column-sorting disable-column-filtering disable-column-grouping show-condition-builder hide-refresh-button disable-title-wrap disable-column-resizing disable-column-drag-and-drop disable-row-drag-and-drop expand-groups-by-default hide-toggle-all-groups-button hide-when-empty edit-query default-filter columns list-view nest-by default-group-by list-title subtitle highlighted-value-config --> <script type="module"> import { getEmbeddables, setEvents, setProperties } from 'https://demo.servicenow.com/uxasset/externals/sn_embeddable_core/index.jsdbx'; const snEmbedxObjectList = document.querySelector('sn-embedx-object-list'); /* Uncomment this code to set Object list properties using URL parameters. // Get the table, query, view or nestby from the URL parameters to dynamically set the component properties. For related list, get sysRecordID to use it in filter. const currentURL = new URL(window.location.href); const urlParams = new URLSearchParams(currentURL.search); const tableName = urlParams.get('emb_table'); const filter = urlParams.get('emb_filter'); const view = urlParams.get('emb_view'); const nestby = urlParams.get('emb_nestby'); const sysRecordId = urlParams.get('emb_recordid'); // Update the table, filter, view or nestby properties of the component setProperties(snEmbedxObjectList, { table: tableName, editQuery: filter || '<fieldname>=' + sysRecordId, listView: view, nestBy: nestby }); */ getEmbeddables(["sn-embedx-object-list"]); const eventHandlers = { 'SN_EMBEDX_OBJECT_LIST#FOOTER_LINK_SELECTED' : (e) => { // This event is dispatched when footer link is selected var {table, view, edit_query, nest_by} = e.detail.payload; // the logic to construct the URL for the Record View component. Add your portal URL here. const objectListURL = '/objectlist?emb_table=' + table + '&emb_query=' + edit_query + '&emb_view=' + view + '&emb_nestby=' + nest_by; // Open the Record List component in the same tab open(objectListURL, '_self'); }, 'SN_EMBEDX_OBJECT_LIST#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_OBJECT_LIST#RECORD_SELECTED' : (e) => { // This event is dispatched when a record is selected. var {table, record_sys_id} = e.detail.payload; var RecordViewURL; if(table == 'sn_customerservice_case'){ RecordViewURL = '/caseview?emb_table=' + table + '&emb_recordid=' + record_sys_id; } else { RecordViewURL = '/recordview?emb_table=' + table + '&emb_recordid=' + record_sys_id; } open(RecordViewURL, '_self'); }, 'SN_EMBEDX_OBJECT_LIST#COMPONENT_READY' : (e) => { // This event is dispatched when a component is ready and usable. } }; setEvents(snEmbedxObjectList, eventHandlers); </script>
결과
전역 및 구성요소 코드를 외부 공급업체 관리자와 공유하여 외부 공급업체 웹 사이트에 객체 목록 구성요소 인스턴스를 포함할 준비가 되었습니다.