UI 페이지 API - ServiceNow Fluent
UI 페이지 API는 양식, 대화 상자, 목록 및 기타 UI 구성요소를 표시하는 사용자 지정 사용자 인터페이스(UI) 페이지[sys_ui_page]를 정의합니다.
UI 페이지는 웹 페이지로 표시되며 대시보드에서 사용하기 위해 위젯에 추가할 수 있습니다. UI 페이지에 대한 일반적인 정보는 다음 문서를 참조하십시오 UI pages.
UI 페이지 API를 사용하여 간단한 React 애플리케이션을 개발할 수 있습니다. src/client 디렉터리에서 페이지의 HTML, 클라이언트 스크립트 및 스타일을 정의하는 정적 컨텐츠 파일을 추가합니다. UiPage 객체에서 페이지의 HTML 엔트리포인트(index.html)를 참조합니다. 자세한 내용은 React를 사용한 사용자 인터페이스 개발 문서를 참조하십시오.
UiPage 객체
사용자 지정 사용자 인터페이스용 UI 페이지 [sys_ui_page]를 만듭니다.
| 이름 | 유형 | 설명 |
|---|---|---|
| $id | 문자열 또는 숫자 | 필수 메타데이터 객체의 고유 ID입니다. 애플리케이션을 빌드할 때 이 ID는 고유한 sys_id으로 해시됩니다. 자세한 내용은 ServiceNow Fluent 언어 구성 문서를 참조하십시오. 형식: |
| 엔드포인트 | 문자열 | 필수 웹 페이지에 액세스하기 위한 엔드포인트입니다. 엔드포인트 값에는 공백을 포함할 수 없습니다. 형식: |
| 설명 | 문자열 | 사용자 인터페이스와 그 용도에 대한 설명입니다. |
| 직접 | 부울 | UI 페이지에 대해 표준 HTML, CSS 및 JavaScript를 생략할지 여부를 나타내는 플래그입니다. React UI 페이지의 경우 이 속성을 예로 설정합니다.유효한 값은 다음과 같습니다.
기본값: false |
| HTML | 문자열 | 페이지가 표시될 때 렌더링되는 내용을 정의하는 본문 HTML 코드입니다. 여기에는 정적 XHTML, Jelly로 정의된 동적으로 생성된 콘텐츠 또는 호출 스크립트 포함 및 UI 매크로가 포함될 수 있습니다. 이 속성은 React 개발을 위해 index.html 파일을 임포트하는 별칭, HTML이 포함된 애플리케이션의 다른 파일에 대한 참조 또는 인라인 JavaScript를 지원합니다. 주: React 개발 및 가져온 HTML에서 UiPage 객체의 html 속성은 단방향 동기화만 지원합니다. 소스 코드에서 UI 페이지의 HTML을 정의한 후 소스 코드 외부에서 HTML을 수정하면 해당 변경 내용이 동기화되지 않고 소스 코드에 반영되지 않습니다. 체재:
|
| 범주 | 문자열 | UI 페이지의 유형입니다. 유효한 값은 다음과 같습니다.
|
| clientScript | 스크립트 | 버튼으로 호출되는 함수와 같이 브라우저에서 실행되는 스크립트입니다. 이 스크립트는 페이지가 로드된 후 필드 또는 기타 대화형 DHTML 기능에 포커스를 설정하는 등 필요한 클라이언트 측 처리를 처리합니다. 이 속성은 인라인 JavaScript 또는 스크립트가 포함된 애플리케이션의 다른 파일에 대한 참조를 지원합니다. UI 페이지에 대한 클라이언트 스크립트는 체재:
|
| 처리 중인 스크립트 | 스크립트 | 페이지가 제출될 때 서버에서 실행되는 스크립트로, 페이지에 <g:ui_form/> 또는 <g:form/> 태그로 정의된 양식이 있는 경우에 유용합니다. 이 속성은 JavaScript 모듈의 함수, 스크립트가 포함된 애플리케이션의 다른 파일에 대한 참조 또는 인라인 JavaScript를 지원합니다.체재:
|
| $meta | 객체 | 애플리케이션 메타데이터의 메타데이터입니다. installMethod 속성을 사용하면 애플리케이션 메타데이터를 특정 상황에서만 로드되는 출력 디렉터리에 매핑할 수 있습니다. installMethod에 유효한 값:
|
React를 사용한 UI 개발의 이 예제에서 페이지의 HTML은 src/client 디렉토리의 index.html 파일에서 가져옵니다.
//incident-manager.now.ts
import '@servicenow/sdk/global'
import { UiPage } from '@servicenow/sdk/core'
import incidentPage from '../../client/index.html'
UiPage({
$id: Now.ID['incident-manager-page'],
endpoint: '<scope>_incident_manager.do',
description: 'Incident Response Manager UI Page',
category: 'general',
html: incidentPage,
direct: true,
})index.html 파일에서 ]]> 태그는<![CDATA[<script> 구성 요소 코드가 포함된 src/client 디렉터리의 main.jsx 파일을 참조합니다.
//index.html
<html>
<head>
<title>Incident Response Manager</title>
<!-- Initialize globals and Include ServiceNow's required scripts -->
<sdk:now-ux-globals></sdk:now-ux-globals>
<!-- Include your React entry point -->
<script src="./main.jsx" type="module"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>