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

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

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

그림 1. 탭 구성요소 예

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

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

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

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

빈 컨테이너 탭 추가

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

시작하기 전에

필요한 역할: admin

프로시저

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

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

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

    표 1. 탭 설정 양식

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

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

결과

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

반복자 탭 추가

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

시작하기 전에

필요한 역할: admin

이 태스크 정보

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

프로시저

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. 을 클릭하여 반복자 탭이 페이지에 올바르게 표시되는지 확인합니다.

관련 목록 탭 추가

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

시작하기 전에

필요한 역할: admin

이 태스크 정보

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

프로시저

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

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

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

    표 2. 탭 설정 양식

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

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

    

13. 저장을 선택합니다.
14. 

페이지 모음 탭 추가

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

시작하기 전에

필요한 역할: admin

이 태스크 정보

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

프로시저

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

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

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

    

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

    

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