구성요소 추가 및 구성
페이지에 구성 요소를 UI 빌더추가하는 방법을 알아봅니다. 구성요소를 추가하여 페이지를 빌드합니다.
시작하기 전에
필요한 역할: ui_builder_admin
이 태스크 정보
구성 요소는 에서 사용자 지정 페이지를 UI 빌더만드는 데 사용되는 구성 요소입니다. 페이지에 구성요소를 추가하는 방법을 알아보세요. 페이지에 구성요소를 추가한 후에는 구성요소를 구성해야 합니다. 구성 요소 구성에 대한 자세한 내용은 개발자 사이트의 구성 요소 설명서를ServiceNow 참조하십시오.
프로시저
-
페이지에 구성요소를 추가합니다.
UI 빌더 에는 선택할 수 있는 구성요소 라이브러리가 함께 제공됩니다. 구성요소를 페이지의 구성요소로 추가합니다. 예를 들어 제목, 데이터 시각화 등을 추가할 수 있습니다. 다음 표에서는 페이지에 구성 요소를 추가할 수 있는 여러 가지 방법을 보여 줍니다.
구성요소를 추가하려면 수행 방법 페이지에서 직접 페이지에서 + 를 선택하고 도구 상자에서 구성 요소를 선택합니다. 구성요소를 검색하거나 목록을 스크롤할 수 있습니다. 페이지 위의 플로팅 메뉴 구성요소 위에 있는 부동 메뉴를 선택합니다. - 다음 앞에 추가 또는 이후에 추가를 선택합니다.
- 도구 상자에서 구성 요소를 선택합니다.
컨텐츠 트리 다음 두 가지 방법으로 컨텐츠 트리에서 구성요소를 추가할 수 있습니다. - 콘텐츠 트리의 컨테이너 아래에 +구성 요소 추가 를 선택합니다. 그런 다음 도구 상자에서 구성 요소를 선택합니다.
- 콘텐츠 트리의 컨테이너 위로 마우스 장치를 이동하고, 메뉴 아이콘을 선택하고, 구성 요소 추가를 선택합니다. 그런 다음 도구 상자에서 구성 요소를 선택합니다.
-
이제 방금 추가한 구성요소의 속성을 구성합니다.
구성요소를 구성한다는 것은 필요에 맞게 사용자 지정하는 것을 의미합니다. 구성 요소 구성에 대한 자세한 내용은 다음을 참조하십시오. Next Experience 구성요소레이블이 표시됩니다.
-
구성 가능한 JSON 속성이 있는 구성 요소의 경우 JSON 코드를 편집할 필요 없이 로우 코드 JSON 편집기를 사용하여 UI 빌더구성 요소 속성을 편집할 수 있습니다.
JSON 편집기 UI는 더미 데이터 또는 정의된 값에 정의되지 않은 속성을 포함하여 사용 가능한 모든 속성을 표시합니다. JSON 편집기 내에서 속성을 업데이트하거나 사용자 지정 속성을 추가할 수 있습니다. 구성 요소 구성에 대한 자세한 내용은 을 참조하십시오 Now 코드 편집기로 코드 편집(고급 기능).
주:로우 코드 JSON 편집기는 스키마가 있고 JSON 입력이 해당 스키마와 일치하는 속성에만 사용할 수 있습니다.로우 코드 JSON 편집기는 단순 객체, 단순 배열 속성, 복합 배열, 객체 배열을 지원하며 복잡한 객체를 부분적으로 지원합니다. 복잡한 배열의 경우 배열 항목의 위치를 추가, 삭제 또는 이동할 수 있습니다. 또한 설정되지 않은 항목 숨기기를 선택하여 비어 있거나 null 값이 있는 개체를 숨기면 편집 환경을 간소화할 수 있습니다.
-
컨테이너 구성 요소로 작업할 때 부동 패널을 사용하여 일부 스타일을 편집할 수 있습니다.
메뉴 아이콘을 선택하여 메뉴를 봅니다.
[레이아웃], [크기 조정] 또는 [간격] 옵션을 선택하여 가장 일반적인 옵션이 표시된 부동 패널을 엽니다. 필요에 따라 부동 패널을 다른 위치로 드래그합니다. 한 번에 하나의 플로팅 패널만 열 수 있습니다.
구성 요소 구성에 대한 자세한 내용은 다음을 참조하십시오. Next Experience 구성요소레이블이 표시됩니다. -
구성 가능한 JSON 속성이 있는 구성 요소의 경우 JSON 코드를 편집할 필요 없이 로우 코드 JSON 편집기를 사용하여 UI 빌더구성 요소 속성을 편집할 수 있습니다.
- 옵션:
페이지에 있는 구성 요소의 맨 위 또는 맨 아래에 있는 + 를 선택하여 페이지에 더 많은 구성 요소를 추가합니다( + 가 + 추가로 변경됨).
- 구성요소 맨 위에 있는 + 를 선택하여 기존 구성요소 앞에 구성요소를 추가하거나 구성요소 하단에 있는 + 를 선택하여 구성요소를 그 뒤에 삽입합니다.
- 구성요소 목록에서 구성요소를 끌어 기존 구성요소의 앞이나 뒤에 삽입합니다.
다음에 수행할 작업
페이지에 구성요소를 추가하고 구성했습니다. 자세한 내용은 UI Builder 페이지에 동적으로 데이터 노출(고급 기능) 문서를 참조하십시오. 의 UI 빌더 데이터 자원은 페이지가 구성요소에 컨텐츠를 표시하기 위해 가져오는 데이터입니다. 구성요소는 데이터 자원을 사용하여 다양한 환경에서 데이터와 구성을 재사용하고 구성요소를 페이지에서 동적으로 만듭니다.
구성요소 수식 편집기에서 UI 빌더 지원되는 함수
구성요소 수식 편집기에서 지원되는 다양한 함수에 UI 빌더 대해 알아봅니다.
다음 표에는 구성 요소 수식 편집기에서 사용할 수 있는 함수가 UI 빌더 나와 있습니다. 구성 요소 수식 편집기에 대한 자세한 내용은 을 참조하십시오 구성요소를 사용하여 페이지 사용자 지정 UI 빌더.
| 연산자 레이블 | 예시 조건 | 동등한 쿼리 연산자 | 예제 쿼리 | 예제 출력 |
|---|---|---|---|---|
| 모두 비어 있음 | [간단한 설명] [ALL_EMPTY] | ALL_EMPTY | short_descriptionALL_EMPTY | 간단한 설명 필드에 값이 없는 모든 기록입니다. |
| 모두 평등 | [간단한 설명] [ALL_EQ] [네트워크 스토리지 사용 불가] | ALL_EQ | short_description=네트워크 스토리지를 사용할 수 없음 | 간단한 설명 필드의 값이 "네트워크 저장소를 사용할 수 없음"과 같은 모든 기록. |
| 모두 보다 큼 | [임팩트] [ALL_GT] [2 - 보통] | > | 영향도>2 | 영향 필드 값이 3 - 낮음인 모든 기록 |
| 모두 크거나 같음 | [임팩트] [ALL_GTE] [2 - 보통] | >= | 영향도>=2 | 영향도 필드 값이 2 - 보통 또는 3 - 낮음인 모든 기록입니다. |
| 모두 보다 작음 | [재할당 횟수] [ALL_LT] [2] | < | reassignment_count<2 | 재할당 횟수 필드의 값이 2보다 작은(하지만 같지 않은) 모든 기록. |
| 모두 작거나 같음 | [재할당 횟수] [ALL_LTE] [2] | <= | reassignment_count<=2 | 재할당 횟수 필드의 값이 다음 중 하나인 모든 기록:
|
| 모두 같지 않음 | [임팩트] [ALL_NEQ] [1 - 높음] | != | 영향도!=1 | 영향도 필드의 값이 1 - 높음이 아닌 모든 기록. |
| 모두 비어 있지 않음 | [임팩트] [ALL_NOTEMPTY] | ALL_NOTEMPTY | impactALL_NOTEMPTY | 영향도 필드에 값이 있는 모든 기록입니다. |
| 모두 다음 중 하나가 아님 | [임팩트] [ALL_NOTONEOF] [1 - 높음, 2 - 보통] | ALL_NOTONEOF | impactALL_NOTONEOF1,2 | 영향 필드가 다음 값을 제외한 모든 값으로 채워지는 모든 기록:
|
| 의 모든 것 | [임팩트] [ALL_ONEOF] [1 - 높음, 2 - 보통] | ALL_ONEOF | impactALL_ONEOF1,2 | 영향 필드가 다음 값 중 하나로 채워지는 모든 기록:
|
| 모든 비어 있음 | [간단한 설명] [ANY_EMPTY] | ANY_EMPTY | short_descriptionANY_EMPTY | 간단한 설명 필드에 값이 없는 모든 기록입니다. |
| 모든 동일 | [간단한 설명] [ANY_EQ] [네트워크 스토리지 사용 불가] | ANY_EQ | short_description=네트워크 스토리지를 사용할 수 없음 | 간단한 설명 필드의 값이 "네트워크 저장소를 사용할 수 없음"과 같은 모든 기록. |
| 보다 큼 | [임팩트] [ANY_GT] [2 - 보통] | ANY_GT | impactANY_GT2 | 영향 필드의 값이 3 - 낮음인 모든 기록 |
| 크거나 같음 | [임팩트] [ANY_GTE] [2 - 보통] | ANY_GTE | impactANY_GTE2 | 영향 필드의 값이 2 - 보통 또는 3 - 낮음인 모든 기록. |
| 보다 작음 | [재할당 횟수] [ANY_LT] [2] | ANY_LT | reassignment_countANY_LT2 | 재할당 횟수 필드의 값이 2보다 작은(그러나 같지 않은) 모든 기록. |
| 작거나 같음 | [재할당 횟수] [ANY_LTE] [2] | ANY_LTE | reassignment_countANY_LTE2 | 재할당 횟수 필드의 값이 다음 중 하나인 모든 기록:
|
| 모두 같지 않음 | [임팩트] [ANY_NEQ] [1 - 높음] | ANY_NEQ | impactANY_NEQ1 | 영향도 필드의 값이 1 - 높음이 아닌 모든 기록. |
| 비어 있지 않은 모든 항목 | [임팩트] [ANY_NOTEMPTY] | ANY_NOTEMPTY | impactANY_NOTEMPTY | 영향 필드에 값이 있는 모든 기록입니다. |
| 중 하나 아님 | [임팩트] [ANY_NOTONEOF] [1 - 높음, 2 - 보통] | ANY_NOTONEOF | impactANY_NOTONEOF1,2 | 영향 필드가 다음 값을 제외한 모든 값으로 채워지는 모든 기록:
|
| 다음 중 하나 | [임팩트] [ANY_ONEOF] [1 - 높음, 2 - 보통] | ANY_ONEOF | impactANY_ONEOF1,2 | 영향 필드가 다음 값 중 하나로 채워지는 모든 기록:
|
| Concat | CONCAT(값) | Concat | CONCAT("환영합니다, ",@context.session.user.firstName) | 제공된 모든 문자열을 하나로 결합하는 새 문자열을 만듭니다. |
| 빈 | EMPTY(값) | 빈 | 비어 있음(@context.session.user.roles) | 값이 null이거나 정의되지 않은 경우 예를 반환합니다. |
| 경우 | IF(만약에, 그렇다면, else) | 경우 | IF(@context.props.bare,"베어 페이지","베어 페이지 아님") | 조건이 참이면 then 값을 반환합니다. 조건이 false이면 else 값을 반환합니다. |
| 렌 | LEN(목록) | 렌 | LEN([1,2,3])입니다. | 배열의 항목 수를 반환합니다. |
| 선택 | PICK (배열, 필드) | 선택 | PICK(@context.session.user.preferences,"이름") | 배열의 각 항목에 있는 필드에서 각 항목을 선택하는 새 배열을 만듭니다. 필드가 없으면 새 배열의 항목이 비어 있습니다. |
| 범위 | RANGE(시작, 종료) | 범위 | 범위(1,10) | 시작부터 시작하여 단계별로 증가하는 숫자 배열을 만듭니다. |
| 합계 | SUM(배열) | 합계 | 합계([1,2,3]) | 0부터 시작하여 배열에 있는 각 항목의 숫자 값을 더하고 결과 합계를 반환합니다 |
| 번역함 | TRANSLATE(텍스트) | 번역함 | TRANSLATE("복귀를 환영합니다") | 두 번째 인수에 지정된 문자가 세 번째 인수에 지정된 문자로 변환된 후 첫 번째 인수의 문자열을 반환합니다. |
| 비어 있는 경우 | [간단한 설명] [WHERE_EMPTY] | WHERE_EMPTY | short_descriptionWHERE_EMPTY | 간단한 설명 필드에 값이 없는 경우 기록을 추출합니다. |
| 동일 위치 | [간단한 설명] [WHERE_EQ] [네트워크 스토리지 사용 불가] | WHERE_EQ | short_descriptionWHERE_EQnetwork 스토리지를 사용할 수 없음 | 간단한 설명 필드가 "네트워크 저장소를 사용할 수 없음"과 같은 기록을 추출합니다. |
| 여기서 보다 큼 | [임팩트] [WHERE_GT] [2 - 보통] | WHERE_GT | impactWHERE_GT2 | 영향 필드의 값이 3 - 낮음인 기록 추출 |
| 크거나 같은 경우 | [임팩트] [WHERE_GTE] [2 - 보통] | WHERE_GTE | impactWHERE_GTE2 | 영향 필드의 값이 2 - 보통 또는 3 - 낮음인 기록을 추출합니다. |
| 여기서 보다 작음 | [재할당 횟수] [WHERE_LT] [2] | WHERE_LT | reassignment_countWHERE_LT2 | 재할당 횟수 필드의 값이 2보다 작은(하지만 같지 않은) 기록을 추출합니다. |
| 작거나 같은 경우 | [재할당 횟수] [WHERE_LTE] [2] | WHERE_LTE | reassignment_countWHERE_LTE2 | 재할당 횟수 필드의 값이 다음 중 하나인 기록을 추출합니다.
|
| 같지 않은 경우 | [임팩트] [WHERE_NEQ] [1 - 높음] | WHERE_NEQ | impactWHERE_NEQ1 | 영향도 필드의 값이 1 - 높음이 아닌 기록을 추출합니다. |
| 비어 있지 않은 경우 | [임팩트] [WHERE_NOTEMPTY] | WHERE_NOTEMPTY | impactWHERE_NOTEMPTY | 영향 필드에 값이 있는 기록을 추출합니다. |
| 다음 중 하나가 아닌 경우 | [임팩트] [WHERE_NOTONEOF] [1 - 높음, 2 - 보통] | WHERE_NOTONEOF | impactWHERE_NOTONEOF1,2 | 영향 필드가 다음 값을 제외한 모든 값으로 채워지는 기록을 추출합니다.
|
| 여기서 다음 중 하나 | [임팩트] [WHERE_ONEOF] [1 - 높음, 2 - 보통] | WHERE_ONEOF | impactWHERE_ONEOF1,2 | 영향 필드가 다음 값 중 하나로 채워지는 기록을 추출합니다.
|