페이지에 Tabs 구성 요소를 추가하여 페이지에 추가 탐색 UI 빌더 을 만듭니다. 탭 구성 요소를 사용하여 페이지의 탭 내에 구성 요소를 중첩합니다. 탭은 콘텐츠 상단의 가로 탭 또는 콘텐츠의 왼쪽 또는 오른쪽에 있는 세로 탭으로 구성할 수 있습니다. 그림 1. 탭 구성요소 예
구성 패널에서 탭을 구성하여 페이지에 표시되는 UI 빌더 방식을 재정렬할 수 있습니다. 탭에 사용자 지정 레이블과 아이콘을 추가하여 탭 간 탐색을 위한 고유한 시각적 식별자를 제공합니다.
다음 유형의 탭 중 하나를 페이지에 추가할 수 있습니다 UI 빌더 .
빈 컨테이너 탭
반복자 탭
관련 목록 탭
페이지 모음 탭
탭 구성요소는 정적 탭, 반복된 탭, 관련 목록 탭 및 페이지 모음 탭의 모든 조합을 지원합니다. 또는 뷰포트 탭 모드를 사용하여 일련의 뷰포트를 추가할 수 있습니다.
빈 컨테이너 탭 추가
빈 컨테이너 탭을 사용하여 페이지에 정적 탭 세트를 수동으로 생성합니다.
시작하기 전에
필요한 역할: admin
프로시저
다음으로 이동 모두 > Now Experience 프레임워크 > UI Builder레이블이 표시됩니다.
페이지에 구성 요소를 추가하는 방법에 대한 자세한 내용은 을 참조하십시오 구성요소 추가 및 구성.
스테이지에서 + 탭 추가 를 선택합니다.
빈 컨테이너에서 시작을 선택합니다.
다음을 선택합니다.
양식의 필드에 내용을 입력합니다.
표 1. 탭 설정 양식
필드
설명
탭 레이블
페이지에 표시할 탭의 레이블입니다.
아이콘
탭 레이블 옆에 표시할 아이콘입니다. 아이콘은 필요하지 않습니다.
탭 숨기기
탭을 숨기거나 표시할지 여부입니다.
생성을 선택합니다.
탭 구성요소에 새 탭이 표시됩니다.
새 탭을 선택합니다.
+ 아이콘을 선택합니다.
탭에 추가할 구성요소를 선택합니다.
구성요소는 컨텐츠 트리에서 중첩된 탭 아래에 표시됩니다. 자세한 내용은 구성요소 추가 및 구성 문서를 참조하십시오.
결과
페이지에는 사용자가 만든 두 개의 탭이 표시됩니다. 각 탭을 선택하여 추가로 구성하거나, 스타일을 추가하거나, 이벤트 핸들러를 추가합니다. 스타일 지정에 대한 자세한 내용은 을 참조하십시오 구성요소의 기본 모양 변경. 이벤트 처리기 추가에 대한 자세한 내용은 을 참조하십시오 UI Builder 페이지에서 작업 관리(고급 기능).
반복자 탭 추가
Tabs 구성요소를 사용하여 탭을 데이터 배열에 연결하여 반복자 탭 세트를 만듭니다.
시작하기 전에
필요한 역할: admin
이 태스크 정보
반복자 탭을 사용하여 사용자가 제공한 데이터 배열을 기반으로 여러 탭을 만들 수 있습니다. 아이콘, 레이블, 개수 및 필드를 객체의 키로 전달할 수 있습니다. 레이블 키를 사용하여 탭에 이름을 추가합니다. 필드 키를 사용하여 정보를 반복자 탭에 전달합니다. 데이터 브로커, 클라이언트 상태 또는 클라이언트 스크립트를 데이터 배열 공급자에 바인딩하여 올바른 스키마를 가진 객체 배열을 반환할 수 있습니다.
프로시저
다음으로 이동 모두 > Now Experience 프레임워크 > UI Builder레이블이 표시됩니다.
페이지에 구성 요소를 추가하는 방법에 대한 자세한 내용은 을 참조하십시오 구성요소 추가 및 구성.
스테이지에서 + 탭 추가 를 선택합니다.
반복자 사용을 선택합니다.
다음을 선택합니다.
자리 표시자 탭 레이블 필드에 반복자 탭의 레이블을 입력합니다.
이 레이블은 첫 번째 반복자 탭에 할당되며 페이지 미리 보기에 표시되는 유일한 탭입니다.
데이터 배열 필드에서 편집을 선택합니다.
JSON 편집기에서 데이터 배열을 구성합니다.
키
데이터 유형
설명
icon
문자열
에 나타나는 UI 빌더아이콘의 이름입니다.
레이블
문자열
필수 요소. 에 있는 UI 빌더탭의 표시 이름입니다.
개수
번호
탭 레이블에 제공할 값입니다. 레이블에 표시될 데이터 브로커 또는 클라이언트 스크립트에 동적으로 바인딩합니다.
필드
객체
정보를 저장하고 탭의 구성요소에 전달하는 데 사용할 수 있는 객체입니다.
적용을 선택합니다.
데이터 배열 필드에는 데이터 배열 구성이 표시됩니다.
생성을 선택합니다.
새 반복자 탭 이 페이지와 컨텐츠 트리에 나타납니다 . 페이지를 편집할 때는 자리 표시자 탭만 나타납니다.
저장을 선택합니다.
을 클릭하여 페이지에 반복자 탭이 표시되는지 확인합니다.
관련 목록 탭 추가
관련 목록에 연결하여 페이지에 탭 세트를 생성합니다.
시작하기 전에
필요한 역할: admin
이 태스크 정보
관련 목록 탭은 페이지가 표시하는 기록에 따라 탭을 자동으로 채웁니다. 예를 들어 기본적으로 사용자 테이블에 대한 관련 목록은 역할, 그룹, 위임자 및 표시 여부 도메인입니다. 페이지에 사용자 기록이 표시되는 경우 관련 목록 탭을 생성하면 이러한 관련 목록 네 개가 모두 페이지의 탭으로 추가됩니다. 페이지를 미리 보고 추가된 관련 목록을 볼 수 있습니다. 관련 목록 탭을 만들려면 기록 컨트롤러가 필요합니다. 페이지에 컨트롤러를 추가하려면 자세한 내용을 참조하십시오 컨트롤러를 사용하여 UI Builder 페이지에 데이터 바인딩(고급 기능) .
프로시저
다음으로 이동 모두 > Now Experience 프레임워크 > UI Builder레이블이 표시됩니다.
새 페이지 모음 탭이 구성 패널의 탭 섹션에 표시됩니다. 페이지 미리 보기에는 자리 표시자 탭이 하나만 표시됩니다.
저장을 선택합니다.
선택하여 페이지를 보고 테스트합니다.
여러 UI 페이지에 걸쳐 페이지 컬렉션 생성
경험 전반에 걸쳐 사용할 수 있는 탭 형식의 컨텐츠를 수용할 페이지 컬렉션을 생성합니다.
시작하기 전에
필요한 역할: admin
이 태스크 정보
페이지 컬렉션을 사용하여 의 탭 구성 요소를 UI 빌더사용하여 경험에서 탭이 있는 컨텐츠를 생성합니다.
페이지 컬렉션 내의 페이지는 상위 페이지의 URL 매개변수 또는 데이터 자원에 액세스할 수 없습니다. 페이지 컬렉션의 페이지에 대한 조건을 설정하여 특정 대상에게 표시할 페이지를 정의할 수 있습니다. 페이지 템플릿은 페이지 컬렉션 내에서 지원되지 않습니다.
프로시저
+ 컬렉션 만들기를 클릭합니다.
양식의 필드에 내용을 입력합니다.
표 3. 페이지 모음 양식 생성
필드
설명
이름
페이지 모음을 내부적으로 추적하는 이름입니다.
컨트롤러
페이지 컬렉션에 대한 데이터를 정의하는 컨트롤러입니다.
앱 셸 UI
페이지 컬렉션과 함께 사용할 앱 셸 UI의 유형입니다. 앱 셸은 웹 페이지의 기능과 유사한 페이지 콘텐츠의 래퍼입니다. 앱 셸은 회사 로고, 사용자 기본 설정, 검색 아이콘 등의 항목을 표시할 수 있습니다. 자세한 내용은 앱 셸을 사용하여 UI 경험 정의 문서를 참조하십시오.
설명
페이지 컬렉션을 찾는 데 도움이 되는 간단한 설명입니다. 페이지 빌더가 페이지 컬렉션에 포함되는 컨텐츠를 이해하는 데 도움이 되는 설명을 작성합니다.
애플리케이션 범위
애플리케이션 범위는 페이지 컬렉션이 속한 애플리케이션을 정의합니다. 다른 애플리케이션 범위에서 페이지 컬렉션을 만들려면 플랫폼에서 애플리케이션 범위를 변경한 다음 에서 페이지 컬렉션을 UI 빌더만듭니다.
생성을 클릭합니다.
페이지 모음 편집을 클릭합니다.
새 탭이 열리고 페이지 컬렉션 편집 화면이 표시됩니다.
편집 시작을 클릭합니다.
페이지 만들기를 클릭합니다.
이름 필드에 페이지의 고유한 이름을 입력합니다.
경로 필드에서 페이지의 경로를 지정합니다. UI 빌더 는 이전 단계에서 입력한 이름을 기반으로 기본 경로를 생성합니다.
주:
애플리케이션 범위는 기본적으로 사용자가 속한 범위로 설정됩니다. 응용 프로그램 범위에 대한 자세한 내용은 을 참조하십시오 보안 및 역할에 대해 알아보기.
생성을 클릭합니다.
옵션: 필수 및 선택적 매개변수와 파생 설정과 같은 고급 설정을 설정합니다.
필요한 매개변수 추가를 선택하여 페이지 URL에 필수 매개변수를 추가합니다.
필수 매개변수는 sys_id, 테이블 또는 쿼리와 같이 페이지에 필요한 데이터 조각입니다. 필수 매개변수는 필수 매개변수의 값에 바인딩할 수 있으므로 구성요소에 유용합니다. 자세한 내용은 페이지 및 페이지 변형 관리 UI 빌더 문서를 참조하십시오.
선택적 매개 변수 추가를 선택하여 페이지의 URL에 추가하려는 선택적 데이터 조각을 추가합니다.
필수 매개 변수와 달리 선택적 매개 변수는 제공된 순서에 관계없이 작동하는 항상 이름 및 값 쌍입니다. 자세한 내용은 페이지 및 페이지 변형 관리 UI 빌더 문서를 참조하십시오.
URL에서 필수 또는 선택적 매개변수를 클릭하고 테스트 값 필드에 인시던트와 같은 값을 입력합니다.
테스트 방법으로 페이지에 테스트 값을 추가하여 데이터를 페이지에 채웁니다. 예를 들어, 테이블을 필수 매개변수로 추가하는 경우 인시던트의 테스트 값을 추가하여 해당 테이블의 인시던트에 대한 테스트 데이터를 가져올 수 있습니다. 테스트 값에 대한 자세한 내용은 을 참조하십시오 페이지의 테스트 값.
변형 탭을 선택하여 페이지의 대상 및 조건 설정을 지정합니다.
페이지를 만들 때 에서는 UI 빌더 기본적으로 페이지의 변형도 생성합니다. 페이지 변형은 사용자 기준을 사용하여 다양한 대상에 대한 경험을 타깃팅할 수 있는 동일한 경로에 있는 페이지의 변형입니다. 예를 들어 관리자를 위한 페이지와 관리자의 부하 직원에 대한 페이지의 변형이 있습니다. 변형 만들기에 대한 자세한 내용은 을 참조하십시오 페이지 변형 작성.
을 클릭하여 페이지에 반복자 탭이 표시되는지 확인합니다.
