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