UI 빌더 페이지에 탭 콘텐츠 추가

탭 구성요소를 사용하여 의 페이지에 UI 빌더탭 콘텐츠를 추가합니다.

페이지에 탭 구성요소를 추가하여 페이지에서 추가 탐색 UI 빌더 을 생성합니다. 탭 구성요소를 사용하여 페이지의 탭 내에 구성요소를 중첩합니다. 탭은 컨텐츠 상단의 가로 탭 또는 컨텐츠의 왼쪽 또는 오른쪽에 세로 탭으로 구성할 수 있습니다.

그림 1. 탭 구성요소 예

구성 패널에서 탭을 구성하여 페이지에 탭이 표시되는 방식을 재정렬할 수 있습니다.UI 빌더 탭에 사용자 지정 레이블과 아이콘을 추가하여 탭을 탐색할 때 고유한 시각적 식별자를 제공합니다. 이러한 변경 사항은 탭 구성요소를 편집할 때 실시간으로 볼 수 있습니다.

다음 유형의 탭 중 하나를 페이지에 추가할 수 있습니다 UI 빌더 .

• 빈 컨테이너 탭
• 반복자 탭
• 관련 목록 탭
• 페이지 모음 탭

탭 구성요소는 정적 탭, 반복 탭, 관련 목록 탭 및 페이지 모음 탭의 조합을 지원합니다. 또는 뷰포트 탭 모드를 사용하여 일련의 뷰포트를 추가할 수 있습니다.

빈 컨테이너 탭 추가

빈 컨테이너 탭을 사용하여 페이지에 정적 탭 세트를 수동으로 생성합니다.

시작하기 전에

필요한 역할: 관리자

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성 > 경험.
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 페이지 또는 페이지 변형을 만들거나 엽니다.
   에서 페이지를 UI 빌더생성하는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 만들기를 참조하십시오.
4. 스테이지에서 + 콘텐츠 추가 버튼을 선택하여 도구 상자를 엽니다.
   
5. 단일 열 레이아웃을 선택합니다.
6. 그런 다음 열에서 + 아이콘을 선택하여 도구 상자를 엽니다.
7. 페이지에 탭 구성요소를 추가합니다.
   

   페이지에 구성요소를 추가하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오 구성요소 추가 및 구성.

8. 스테이지에서 + 추가 탭 을 선택합니다.
   
9. 빈 컨테이너에서 시작을 선택합니다.
   
10. 다음을 선택합니다.
11. 양식에서 필드를 채웁니다.

    표 1. 탭 설정 양식

    필드	설명
    탭 레이블	페이지에 표시할 탭의 레이블입니다.
    아이콘	탭 레이블 옆에 표시할 아이콘입니다. 아이콘은 필요하지 않습니다.
    탭 숨기기	탭을 숨길지 표시할지 여부입니다.

12. 생성을 선택합니다.
    새 탭이 탭 구성요소에 표시됩니다.
13. 새 탭을 선택합니다.
14. + 아이콘을 선택합니다.
    
15. 탭에 추가할 구성요소를 선택합니다.
    구성요소는 콘텐츠 트리에서 중첩된 탭 아래에 표시됩니다. 자세한 내용은 구성요소 추가 및 구성 문서를 참조하십시오.

결과

페이지에 생성한 두 개의 탭이 표시됩니다. 각 탭을 선택하여 추가로 구성하거나, 스타일을 추가하거나, 이벤트 핸들러를 추가합니다. 스타일링에 대한 자세한 내용은 다음 문서를 참조하십시오 구성요소의 기본 모양 변경. 이벤트 핸들러 추가에 대한 자세한 내용은 다음 문서를 참조하십시오 UI 빌더 페이지에서 작업 관리.

반복자 탭 추가

탭 구성요소를 사용하여 탭을 데이터 배열에 연결하여 반복자 탭 세트를 만듭니다.

시작하기 전에

필요한 역할: 관리자

이 태스크 정보

반복자 탭을 사용하여 사용자가 제공한 데이터 배열을 기반으로 여러 탭을 생성할 수 있습니다. 아이콘, 레이블, 카운트 및 필드를 객체의 키로 전달할 수 있습니다. 레이블 키를 사용하여 탭에 이름을 추가합니다. 필드 키를 사용하여 정보를 반복자 탭으로 전달합니다. 데이터 브로커, 클라이언트 상태 또는 클라이언트 스크립트를 데이터 배열 공급자에 바인딩하여 올바른 스키마를 사용하여 객체 배열을 반환할 수 있습니다.

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성 > 경험.
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 페이지 또는 페이지 변형을 만들거나 엽니다.
   에서 페이지를 UI 빌더생성하는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 만들기를 참조하십시오.
4. 스테이지에서 + 콘텐츠 추가 버튼을 선택하여 도구 상자를 엽니다.
   
5. 단일 열 레이아웃을 선택합니다.
6. 그런 다음 열에서 + 아이콘을 선택하여 도구 상자를 엽니다.
7. 페이지에 탭 구성요소를 추가합니다.
   

   페이지에 구성요소를 추가하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오 구성요소 추가 및 구성.

8. 스테이지에서 + 추가 탭 을 선택합니다.
   
9. 반복자 사용을 선택합니다.
   
10. 다음을 선택합니다.
11. 자리 표시자 탭 레이블 필드에 반복자 탭의 레이블을 입력합니다.
    이 레이블은 첫 번째 반복자 탭에 할당되며 페이지 미리 보기에 표시되는 유일한 탭입니다.
12. 데이터 배열 필드에서 편집을 선택합니다.
    
13. JSON 편집기에서 데이터 배열을 구성합니다.

    키	데이터 유형	설명
    아이콘	문자열	에 나타나는 아이콘의 이름입니다 UI 빌더.
    레이블	문자열	필수입니다. 에 있는 UI 빌더탭의 표시 이름입니다.
    카운트	번호	탭 레이블에 제공할 값입니다. 레이블에 표시될 데이터 브로커 또는 클라이언트 스크립트에 동적으로 바인딩합니다.
    필드	객체	정보를 저장하고 탭의 구성요소에 전달하는 데 사용할 수 있는 객체입니다.

14. 적용을 선택합니다.
    데이터 배열 필드에 데이터 배열 구성이 표시됩니다.

    

15. 생성을 선택합니다.
    새 반복자 탭 이 페이지와 컨텐츠 트리에 나타납니다 .

    

16. 저장을 선택합니다.
17. 반복자 탭에 구성요소를 추가합니다.
18. 반복자 탭이 페이지에 올바르게 표시되는지 확인합니다.

관련 목록 탭 추가

관련 목록에 연결하여 페이지에서 탭 세트를 생성합니다.

시작하기 전에

필요한 역할: 관리자

이 태스크 정보

관련 목록 탭은 페이지가 표시하는 기록에 따라 탭을 자동으로 채웁니다. 예를 들어 기본적으로 사용자 테이블의 관련 목록은 역할, 그룹, 위임자 및 가시성 도메인입니다. 페이지에 사용자 기록이 표시되는 경우 관련 목록 탭을 생성하면 이러한 관련 목록 4개가 모두 페이지에 탭으로 추가됩니다. 페이지를 미리 보고 추가된 관련 목록을 볼 수 있습니다. 관련 목록 탭을 생성하려면 기록 컨트롤러가 필요합니다. 페이지에 컨트롤러를 추가하려면 자세한 내용을 참조하십시오 컨트롤러를 사용하여 페이지에 데이터 UI 빌더 바인딩(고급 기능) .

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성 > 경험.
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 페이지 또는 페이지 변형을 만들거나 엽니다.
   에서 페이지를 UI 빌더생성하는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 만들기를 참조하십시오.
4. 스테이지에서 + 콘텐츠 추가 버튼을 선택하여 도구 상자를 엽니다.
   
5. 단일 열 레이아웃을 선택합니다.
6. 그런 다음 열에서 + 아이콘을 선택하여 도구 상자를 엽니다.
7. 페이지에 탭 구성요소를 추가합니다.
   

   페이지에 구성요소를 추가하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오 구성요소 추가 및 구성.

8. 스테이지에서 + 추가 탭 을 선택합니다.
   
9. 기록에 대한 관련 목록 표시를 선택합니다.
   
10. 다음을 선택합니다.
11. 양식에서 필드를 채웁니다.

    표 2. 탭 설정 양식

    필드	설명
    자리 표시자 탭 레이블	페이지의 미리 보기 탭에 표시할 자리 표시자 레이블입니다.
    탭 숨기기	탭을 숨기거나 표시할지 여부입니다.
    기록 컨트롤러	관련 목록이 있는 기록 컨트롤러입니다.

12. 생성을 선택합니다.
    새 관련 목록 탭이 구성 패널의 탭 섹션에 표시됩니다. 페이지 미리 보기에는 하나의 자리 표시자 탭만 나타납니다. 컨텐츠 트리의 관련 목록 탭 옆에 있는 녹색 아이콘은 페이지에 표시되는 탭 수를 보여줍니다.

    

13. 저장을 선택합니다.
14. 웹 선택하여 페이지를 보고 테스트합니다.

페이지 모음 탭 추가

페이지 모음 탭을 사용하여 의 UI 빌더여러 페이지에서 동일한 탭을 다시 만듭니다.

시작하기 전에

필요한 역할: 관리자

이 태스크 정보

페이지 컬렉션은 전역적으로 사용 가능한 미리 빌드된 페이지 그룹입니다. 페이지 컬렉션 탭을 사용하여 페이지 컬렉션의 각 페이지를 탭으로 렌더링합니다. 기존 페이지 컬렉션을 선택하거나 직접 만들 수 있습니다. 페이지 컬렉션을 추가하려면 컨트롤러가 필요합니다. 페이지 컬렉션에 대한 자세한 내용은 다음 문서를 참조하십시오 페이지 수집.

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성 > 경험.
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 페이지 또는 페이지 변형을 만들거나 엽니다.
   에서 페이지를 UI 빌더생성하는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 만들기를 참조하십시오.
4. 스테이지에서 + 콘텐츠 추가 버튼을 선택하여 도구 상자를 엽니다.
   
5. 단일 열 레이아웃을 선택합니다.
6. 그런 다음 열에서 + 아이콘을 선택하여 도구 상자를 엽니다.
7. 페이지에 탭 구성요소를 추가합니다.
   

   페이지에 구성요소를 추가하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오 구성요소 추가 및 구성.

8. 스테이지에서 + 추가 탭 을 선택합니다.
   
9. 페이지 컬렉션 추가를 선택합니다.
   
10. 다음을 선택합니다.
11. 목록에서 페이지 컬렉션을 선택하거나 + 컬렉션 생성을 선택하여 컬렉션을 생성합니다.
    고유한 페이지 컬렉션을 생성하려면 다음 문서를 참조하십시오 여러 UI 페이지에서 페이지 컬렉션 생성.

    

12. 추가를 선택합니다.
    새 페이지 모음 탭이 구성 패널의 탭 섹션에 표시됩니다. 페이지 미리 보기에는 하나의 자리 표시자 탭만 표시됩니다.

    

13. 저장을 선택합니다.
14. 선택하여 페이지를 보고 테스트합니다. .