UI Builder 페이지에 동적으로 데이터 노출(고급 기능)
를 사용하여 UI 빌더빌드하는 페이지와 함께 테이블과 데이터 간에 ServiceNow 데이터를 동기화합니다. 페이지는 동기화된 데이터를 실시간으로 표시하고 사용자가 정보를 입력하면 데이터/테이블을 업데이트합니다.
의 데이터 자원에 대한 학습 UI 빌더
UI 빌더데이터 자원을 사용하여 테이블/데이터를 동기화합니다ServiceNow. 데이터 자원은 UI Builder가 구성요소에 정보를 표시하는 데 사용하는 데이터를 가져옵니다. UI 빌더 구성요소는 데이터 자원을 사용하여 서로 다른 경험 간에 데이터를 동기화합니다. 데이터 자원은 구성요소의 데이터를 동적으로 만들기 때문에 모든 페이지에 대한 데이터를 다시 만들 필요가 없습니다.
데이터 자원은 데이터 자원 서랍에서 찾을 수 있습니다. 데이터 자원 서랍에서는 페이지에 대한 데이터 자원을 추가하고 구성할 수 있습니다. 데이터 자원을 구성한 후에는 페이지의 구성요소와 ServiceNow 테이블/데이터 간에 데이터를 동기화할 수 있습니다.
- 데이터 리소스: 경험의 일부인 데이터 리소스입니다
- 구성/이벤트: 환경을 위해 구성된 데이터 자원 및 이벤트
- 미리 보기: 데이터 리소스에서 반환된 정보에 대한 JSON
구성요소, 기타 데이터 자원, 클라이언트 스크립트, 클라이언트 상태 및 이벤트에 대한 구성 속성을 이러한 데이터 자원에 바인딩할 수 있습니다.
데이터 자원의 필터에 대한 조건을 설정합니다. 자세한 내용은 구성요소에 데이터 연결 문서를 참조하십시오.
에서 데이터 자원이 작동하는 방식 UI 빌더
데이터 자원은 Glide, GraphQL 및 REST API에서 데이터를 가져온 다음 페이지의 구성요소에서 사용하기 위해 변환합니다 UI 빌더 .
구성요소는 상속된 데이터 자원 인스턴스와 로컬 데이터 자원 인스턴스를 모두 사용합니다. 상속된 데이터 자원은 페이지에 자동으로 로드 UI 빌더 되며, 로컬 데이터 자원 인스턴스를 추가하고 구성할 수 있습니다. 데이터 자원은 올바른 데이터가 검색되도록 지정된 입력 값을 기반으로 평가됩니다. 상속된 데이터 자원과 로컬 데이터 자원에 대한 자세한 내용은 을 참조하십시오 에서 상속된 데이터 자원과 로컬 데이터 자원 비교 UI 빌더.
의 로컬 데이터 자원 UI 빌더
사용 중인 애플리케이션에 따라 다른 데이터 자원이 표시됩니다. 전역 애플리케이션을 선택하면 서버 데이터 아래에 Configurable Workspace 애플리케이션을 선택할 때와 다른 데이터 자원이 CSM 표시됩니다.
에서 데이터 바인딩 사용 UI 빌더
데이터 바인딩을 사용하면 페이지와 구성요소를 데이터 자원에 동기화하여 동적 페이지를 만들 수 있습니다. 구성요소에 데이터를 바인딩하여 백엔드에서 데이터를 가져오고, 필드 매개변수를 사용하여 URL에서 속성을 가져올 수 있습니다. URL 매개변수를 변경하면 매개변수에 따라 다른 데이터를 표시하는 동적 페이지를 만들 수 있습니다.
다음과 같은 방법으로 데이터를 구성요소에 바인딩할 수 있습니다.
- 컨텍스트 바인딩
URL 매개변수를 사용하여 URL의 일부를 페이지의 속성과 연결합니다. 예를 들어
@context.props.table과 같은 @context 구문을 사용하여 URL의 테이블 이름을 구성요소에 연결할 수 있습니다.table이라는 필수 필드가 있는 페이지가 있다고 상상해 보십시오UI 빌더. 페이지의 URL은 /demo/page/<table-name>과 같을 수 있습니다. <table-name>은인시던트와 같은 것일 수 있습니다. 데이터는 부모 데이터 리소스에서 제공되거나 페이지와 관련된 로컬 속성일 수도 있습니다.구성요소 속성, 기타 데이터 자원 속성 또는 이벤트 세부 정보를 페이지 속성에 연결하려면
@context.props.table바인딩을 사용합니다. 컨텍스트 바인딩을 사용하는 경우 URL에 테스트 값을 제공하거나 페이지 구성에서 해당 속성에 대한 고정 값을 설정해야 합니다.- 데이터 자원 바인딩
데이터 자원을 사용하여 인스턴스의 백엔드에서 데이터(예: 클라이언트 상태, GraphQL 또는 REST API)를 가져옵니다. 이러한 데이터 원본에는 페이지의 요소에 UI 빌더 연결할 수 있는 속성이 있습니다.
예를 들어 기록 조회 데이터 자원을 사용하는 경우 버튼 구성요소에서 활용할 수 있습니다. "label" 속성에서
@data.lookup_record_1.result.number.displayValue와 같은 데이터 표현식을 사용할 수 있습니다.- 구성요소 바인딩
- 구성요소 바인딩을 사용하여 한 구성요소를 다른 구성요소에 연결합니다. 페이지에 목록 메뉴 구성 요소가 있다고 가정해 UI 빌더 보겠습니다. 목록 메뉴는 현재 선택한 목록을 동일한 페이지의 다른 구성요소에 표시합니다. 이러한 다른 구성요소는
@elements.list_menu_1.selectedListId와 같은 표현식을 사용하여 데이터에 연결하여 데이터에 액세스할 수 있습니다. - 클라이언트 상태 매개변수 바인딩
클라이언트 상태 매개변수 바인딩을 사용하여 클라이언트 측 애플리케이션과 UI 빌더 구성요소 간에 데이터를 연결하고 동기화합니다. 매개 변수 바인딩을 사용하면 클라이언트 상태가 구성 요소의 데이터를 자동으로 업데이트할 수 있으며 그 반대의 경우도 마찬가지입니다.
@state구문을 사용하여 상태 속성을 클라이언트 상태 매개변수에 바인딩합니다.
에서 사용할 수 있는 데이터 소스의 유형 UI 빌더
테이블에 표시된 다음과 같은 데이터 자원 유형을 사용할 수 있습니다.
| 데이터 자원 유형 | 설명 |
|---|---|
| 컨트롤러 | 데이터 및 이벤트 논리를 캡슐화하고 구성요소에 대한 사전 설정을 활성화합니다. |
| GraphQL | 실행되는 GraphQL 쿼리 및 변형입니다. |
| 변환 | 입력 데이터를 다른 형식으로 변환하는 스크립트입니다. |
| 클라이언트 상태 | 클라이언트 정보, 도메인별 상태 또는 논리, 사용자 기본 설정 등을 포함하는 클라이언트 측 데이터 자원입니다. |
| 복합 | 여러 데이터 자원을 포함하는 재사용 가능한 단일 데이터 자원입니다. |
| REST | REST API 요청을 통해 만들어지는 데이터 자원입니다. |
에서 상속된 데이터 자원과 로컬 데이터 자원 비교 UI 빌더
상속된 데이터 자원은 응용 프로그램과 같은 페이지의 주변 부분 UI 빌더 에서 정보를 공유합니다. 페이지가 큰 프레임에 있고 프레임이나 그 주변의 다른 부분에서 일부 정보를 얻는다고 상상해 보십시오. 퍼즐 조각을 함께 연결하는 것처럼 페이지의 속성에 연결하여 이 정보를 사용할 수 있습니다. 프레임에서 이 정보를 가져오는 경우 직접 다시 가져올 필요가 없습니다.
로컬 데이터 자원은 페이지에 직접 추가하는 항목입니다 UI 빌더 . 출장 요청 페이지를 만든다고 가정해 보겠습니다. 직원이 자신의 정보에 연결된 출장을 요청할 수 있도록 직원 데이터를 목록 구성요소에 동기화할 수 있습니다.
이러한 데이터 자원을 사용하려면 앱에서 가져오거나 플랫폼에서 생성하십시오 ServiceNow . 그런 다음 UI 빌더에서 이러한 리소스를 구성 요소에 사용할 수 있도록 합니다. 다음으로, 데이터를 구성 요소에 연결하여 작업할 수 있도록 합니다. 예를 들어 기록 세트가 있고, 이를 UI Builder에 노출하고, 구성요소에 연결할 수 있습니다. 그런 다음 새 기록 저장과 같이 데이터로 작업을 수행하도록 구성요소를 구성합니다.
페이지가 데이터를 동기화하면 구성 요소와 같이 데이터가 필요한 페이지 부분에 연결합니다. 올바른 퍼즐 조각이 올바른 위치에 맞는지 확인하는 것과 같습니다. 그런 다음 페이지의 해당 부분에 데이터로 수행할 작업을 지정할 수 있습니다. 예를 들어 직원을 위한 새 출장 계획을 추가하는 데 사용할 수 있습니다.
UI 빌더 데이터 자원 속성
에서 데이터 리소스를 UI 빌더추가하는 것은 정보를 어디서 가져와야 하는지 알고 있는 도구를 추가하는 것과 같습니다. 데이터 자원 속성은 데이터를 UI 빌더 페이지로 가져오는 방법을 데이터 자원에 알려주는 지침입니다. 이러한 속성은 가져올 데이터, 구성 방법 및 따라야 할 조건을 데이터 자원에 알려줍니다. 예를 들어 이러한 속성을 사용하여 살펴볼 테이블, 데이터를 정렬하는 방법 등을 지정할 수 있습니다. 이러한 속성은 데이터 리소스가 올바르게 작동하도록 하고 필요한 데이터를 제공합니다.
UI 빌더 데이터 자원 스크립트
데이터 자원 스크립트는 특정 데이터를 반환하기 위해 제공하는 UI 빌더 특수 명령입니다. 예를 들어 제품 목록을 처리하는 경우 스크립트는 재고가 있는 제품만 표시하거나 특정 순서로 정렬하도록 데이터 리소스에 지시할 수 있습니다. 데이터 자원 스크립트를 사용하면 추가 규칙 또는 작업 추가와 같은 정보 처리 방법을 UI 빌더 사용자 지정할 수 있습니다.