UI 빌더 페이지에서 데이터를 동적으로 노출(고급 기능)
로 빌드UI 빌더하는 페이지와 테이블 및 데이터 간 ServiceNow 데이터를 동기화합니다. 페이지는 동기화된 데이터를 실시간으로 표시하고 사용자가 정보를 입력하면 데이터/테이블을 업데이트합니다.
에서 데이터 자원에 대해 알아보기 UI 빌더
UI 빌더데이터 자원을 ServiceNow 사용하여 테이블/데이터를 동기화합니다. 데이터 자원은 UI 빌더가 구성요소에 정보를 표시하는 데 사용하는 데이터를 가져옵니다. 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의 테이블 이름을 구성요소에 연결할 수 있습니다.테이블이라는 필수 필드가 있는 페이지가 있다고 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 빌더에 노출하고 구성요소에 연결할 수 있습니다. 여기에서 새 기록 저장과 같은 데이터로 작업을 수행하도록 구성요소를 구성합니다.
페이지가 데이터를 동기화하는 경우 구성요소와 같이 데이터가 필요한 페이지 부분에 연결합니다. 이는 올바른 퍼즐 조각이 올바른 위치에 맞는지 확인하는 것과 같습니다. 그런 다음 페이지의 해당 부분에서 데이터로 수행할 작업을 지시할 수 있습니다. 예를 들어 직원을 위한 새 출장 계획을 추가하는 데 사용할 수 있습니다.
UI 빌더 데이터 자원 속성
에서 데이터 자원 UI 빌더을 추가하는 것은 정보를 가져올 위치를 아는 도구를 추가하는 것과 같습니다. 데이터 자원 속성은 데이터를 페이지로 가져오는 방법을 데이터 자원에 알려주는 지침입니다.UI 빌더 이러한 속성은 데이터 자원에 가져올 데이터, 데이터를 구성하는 방법 및 따라야 할 조건을 알려줍니다. 예를 들어 이러한 속성을 사용하여 조회할 테이블, 데이터 정렬 방법 등을 지정할 수 있습니다. 이러한 속성은 데이터 자원이 올바르게 작동하도록 하고 필요한 데이터를 제공합니다.
- 즉시(즉시, 평가)
- 페이지나 구성요소가 로드되면 데이터가 자동으로 로드됩니다.
- 호출 시에만(명시적 평가)
- 사용자가 특정 작업을 수행할 때까지 데이터 로딩을 연기합니다. 예를 들어 버튼을 클릭하거나 필드에 데이터를 입력합니다.
UI 빌더 데이터 자원 스크립트
데이터 자원 스크립트는 특정 데이터 조각을 반환하기 위해 제공하는 UI 빌더 특수 지침입니다. 예를 들어 제품 목록을 처리하는 경우 스크립트는 데이터 자원에 재고가 있는 제품만 표시하거나 특정 순서로 정렬하도록 지시할 수 있습니다. 데이터 자원 스크립트를 사용하면 추가 규칙 또는 작업을 추가하는 등 정보 처리 방법을 UI 빌더 사용자 지정할 수 있습니다.