구성요소를 사용하여 페이지 사용자 지정 UI 빌더
구성요소가 UI 빌더무엇인지 알아봅니다. 또한 UI 빌더 내에서 구성요소가 작동하는 방식도 확인합니다.
구성요소는 페이지의 기본 요소입니다 UI 빌더 . 버튼 및 레이블과 같은 핵심 요소부터 목록 및 양식과 같은 보다 복잡한 경험 구성요소까지 다양한 구성요소가 있습니다.
이러한 구성요소를 UI 빌더 페이지에 추가하여 작업 공간 또는 포털 환경을 구축하거나 사용자 지정할 수 있습니다. 예를 들어 사용자가 자신의 출장 요청 활동을 볼 수 있도록 활동 스트림 구성요소를 페이지에 추가합니다.
다음과 같은 방법으로 페이지에 구성요소를 UI 빌더 추가할 수 있습니다.
| 위치 | 예제 |
|---|---|
| 페이지에서 UI 빌더 직접(옵션 1) | 콘텐츠 추가(더하기) 아이콘을 선택하고 구성요소 탭을 선택한 다음 구성요소를 선택합니다. |
| 페이지에서 직접 UI 빌더 (옵션 2) | 열 레이아웃 또는 구성요소에서 이전 추가(더하기) 또는 뒤에 추가(더하기) 아이콘을 선택한 다음 구성요소를 선택합니다. |
| 의 콘텐츠 트리에서 UI 빌더 | 콘텐츠 트리에서 + 콘텐츠 추가 를 선택한 다음, 구성요소를 선택합니다. |
| 의 페이지 위 부동 메뉴에서 UI 빌더 | 열 레이아웃 또는 구성요소에서 메뉴 아이콘을 선택하고 이전 추가 또는 이후 추가를 선택한 다음 구성요소를 선택합니다. |
의 열 레이아웃 UI 빌더
먼저 페이지에 열 레이아웃과 열 UI 빌더 을 추가합니다. 그런 다음 열 레이아웃의 열에 구성요소를 추가하여 페이지를 빌드하고 사용자 지정합니다. 열 레이아웃은 목록 및 제목과 같은 구성요소를 추가하는 화면의 정의된 부분으로 생각하십시오. 한 페이지에 원하는 만큼 열 레이아웃 UI 빌더 을 지정할 수 있으며, 모든 열 레이아웃에는 최대 6개의 열이 있습니다. 여러 구성요소를 단일 열에 추가할 수 있습니다. 콘텐츠 트리에서 페이지의 구조를 봅니다.
자세한 내용은 열 레이아웃 문서를 참조하십시오.
의 구성요소 구성 UI 빌더
- 구성요소 속성을 구성합니다.
- CSS 스타일 재정의 추가.
- 구성요소에 대한 이벤트 핸들러 를 설정합니다.
- 구성 탭
- 구성요소 속성은 각 구성요소에 따라 다릅니다. 버튼, 제목 및 레이블과 같은 단순한 요소의 경우와 마찬가지로 구성요소 구성은 간단할 수 있습니다. 목록 및 양식과 같은 구성요소에는 상당한 구성이 필요합니다. 아이콘 및 이미지 구성요소의 경우 다양한 옵션 중에서 선택하거나 사용자 지정 아이콘 또는 이미지를 사용합니다. 의 로우코드 JSON 편집기를 사용하여 UI 빌더구성요소 속성을 수정할 수 있습니다. 구성요소 구성에 대한 자세한 내용은 다음을 참조하십시오. 넥스트 경험 구성요소.
- 구성요소 구성 탭의 각 속성에 대해 다음 옵션 중에서 선택할 수 있습니다.
- 정적: 목록의 데이터를 사용하거나 고유한 데이터를 입력합니다. 데이터가 외부 데이터 소스에 연결되지 않습니다.
- 동적 데이터 바인딩: 구성요소 속성을 데이터 자원, 페이지 속성 또는 클라이언트 상태에 바인딩하는 방법입니다.
- 스크립트: JavaScript 코드를 입력하여 속성 값을 채웁니다.
- 스타일 탭
- 개별 구성요소의 CSS 스타일시트 스타일을 변경할 수 있습니다. 색상 테두리, 글꼴 크기 등을 변경합니다.
- 이벤트 탭
- 페이지 수준 및 변형 수준 이벤트 매핑을 구성합니다. 또한 변형에 대해 디스패치된 이벤트와 처리된 이벤트를 추가합니다. 더 복잡한 경험 구성요소는 데이터 자원에서 제공하는 동적 데이터에 크게 의존합니다. 동적 데이터를 구성요소에 바인딩하는 것은 중요한 기능입니다. 페이지의 테이블, 기록 또는 기타 요소에서 데이터를 동적으로 노출합니다. 데이터를 노출하면 구성요소를 다시 사용할 수 있습니다. 또한 구성 필드를 가리키면 각 필드의 아이콘, 데이터 또는 스크립팅 옵션을 볼 수 있습니다.
페이지에서 구성요소를 추가하고 구성하면 스테이지에 작업이 표시됩니다. 변경한 후에도 스테이지에 업데이트가 로드되지 않으면 메뉴 열기 아이콘을 선택한 다음 개발자 > 스테이지 다시 로드를 선택합니다. 스테이지를 다시 로드하면 변경 내용이 표시되지만 저장되지는 않습니다. 작업을 저장하려면 오른쪽 상단의 저장 을 선택합니다.
의 구성요소 사전 설정 UI 빌더
구성요소 사전 설정을 사용하여 호환되는 페이지의 구성요소를 자동으로 구성합니다. UI 빌더 페이지 템플릿에는 사전 설정이 구성요소 구성 값을 정의하는 데 사용하는 컨트롤러가 포함되어 있습니다. 자세한 내용은 사전 설정을 사용하여 구성요소 자동 구성 문서를 참조하십시오.
구성요소 속성 섹션
구성요소 속성은 유사한 속성의 섹션으로 그룹화됩니다. 속성 제목의 오른쪽에 있는 화살표를 선택하여 섹션을 열고 닫습니다. UI 빌더 관리자는 UI 정책에 따라 표시하거나 숨길 구성요소 구성 속성을 선택할 수 있습니다.
구성요소 수식 편집기
구성 패널의 구성요소 수식 편집기를 사용하여 UI 빌더 수식을 바인딩하거나 수정합니다. 텍스트, 데이터 바인딩 및/또는 수식을 입력할 수 있습니다. 수식은 세 가지 입력 유형의 조합으로 구성될 수 있습니다. 구성요소 수식 편집기는 논리, 산술, 비교, 부정 및 함수 변환 유형을 지원합니다.
구성요소 수식 편집기에 추가된 각 함수는 자동으로 완성됩니다. 구성요소 수식 편집기는 각 함수에 필요한 매개변수를 알 수 있도록 함수의 각 입력에 대한 레이블을 표시합니다. 구성요소 수식 편집기에서 지원되는 함수에 대한 자세한 내용은 다음 문서를 참조하십시오 구성요소 수식 편집기에서 UI 빌더 지원되는 함수.
구성요소 ID
구성요소를 참조하는 방법으로 스크립트를 추가하거나 데이터를 구성요소에 바인딩할 때 구성요소 ID를 사용합니다. 구성요소 ID는 페이지에 구성요소를 추가할 때 구성요소 레이블을 기반으로 자동으로 생성됩니다. 구성요소 ID는 고유한 구성요소인 한 원하는 대로 변경할 수 있습니다. 구성 패널에서 구성요소 이름을 선택하여 구성요소 ID를 확인합니다.
구성요소 가시성
구성 패널에서 눈 아이콘을 선택하여 구성요소 가시성을 설정합니다. 구성요소 가시성은 구성요소를 보는 사람이 아니라 구성요소 자체의 속성을 기반으로 합니다. 조건에 따라 구성요소를 표시하거나 숨길 수 있습니다. 예를 들어 링크가 끊어진 경우 이미지를 숨깁니다.
동적 데이터 바인딩을 기반으로 또는 스크립팅된 속성 값을 편집하여 가시성을 설정할 수 있습니다.
테스트 값을 설정하여 가시성이 true, false 또는 none으로 설정될 때 발생하는 일을 테스트합니다.
구성요소 복제
페이지에 이름과 ID를 제외한 구성된 구성요소 UI 빌더 의 정확한 사본을 생성합니다. 중복된 구성요소는 모든 속성, 바인딩 및 이벤트를 복사합니다. 자세한 내용은 구성요소 복제 문서를 참조하십시오.