페이지 및 페이지 변형 관리 UI 빌더
페이지가 어떤 위치에 UI 빌더있는지 알아보십시오. 열 레이아웃 및 구성요소와 같은 페이지의 구성 요소를 UI 빌더 이해합니다.
UI 빌더 퀵 스타트
의 열 레이아웃 및 구성요소 UI 빌더
열 레이아웃과 구성요소는 페이지의 구성요소 UI 빌더 입니다. 페이지에 열 레이아웃과 구성요소를 추가하여 작업 공간 또는 포털 환경을 구축하거나 사용자 지정합니다. 예를 들어 열 레이아웃을 추가하고 열 내에 사용자가 요청을 제출할 수 있는 버튼 구성요소를 배치합니다.
열 레이아웃, 열 및 구성요소를 추가하고 스테이지 또는 콘텐츠 트리에서 이들 사이를 이동할 수 있습니다.
열 레이아웃에는 하나 이상의 열이 포함될 수 있습니다. 열에는 구성요소가 포함될 수 있습니다. 열 레이아웃, 열 및 구성요소의 시각적 스타일을 변경하여 사용자 고유의 환경으로 만듭니다.
| 유형 | 설명 |
|---|---|
| 열 레이아웃 | 1개에서 6개의 열이 있는 유연한 컨테이너입니다. 열 레이아웃을 추가하여 페이지의 구조와 프레임워크를 제공합니다. |
| 열 | 구성요소로 열을 채웁니다. |
| 구성요소 | 단추, 목록 및 양식과 같은 페이지의 기본 요소입니다. |
| 모달 | 모달을 사용하여 페이지 상단에 렌더링되고 작업이 필요한 페이지 유형을 UI 빌더 생성합니다. |
| 팝오버 | 팝오버는 이벤트에 의해 트리거될 때 페이지 위에 UI 빌더 나타나는 컨테이너 유형입니다. 팝오버 구성요소를 사용하여 페이지와 관련된 추가 정보 또는 작업을 표시할 수 있습니다. |
UI 빌더 페이지 생성
UI 빌더 페이지를 생성하여 페이지 환경을 처음부터 구축하거나 페이지 템플릿을 사용합니다. 한 번에 하나의 구성요소씩 페이지를 빌드합니다. 미리 정의된 페이지 템플릿 중 하나를 사용하는 경우 기본 구조에서 시작하여 필요에 맞게 사용자 지정할 수 있습니다.
페이지 이름을 지정합니다 UI 빌더 . 경로를 설정합니다(또는 페이지 이름에 따라 자동으로 추가되는 기본 경로를 유지). 페이지 이름을 기반으로 기본 경로가 추가됩니다. 사용자 고유의 경로를 만들 수도 있지만 경로는 고유해야 합니다. URL 미리보기에는 페이지의 경로가 표시됩니다.
애플리케이션 범위는 애플리케이션 파일 및 데이터에 대한 접근 권한을 확인하고 제한하여 애플리케이션을 보호합니다. 애플리케이션 범위는 기본적으로 사용자가 현재 .Now Platform® 애플리케이션 범위에 대한 자세한 내용은 다음 문서를 참조하십시오 보안 및 역할에 대해 알아보기.
UI 빌더 페이지 템플릿을 사용하여 미리 정의된 페이지 템플릿을 기반으로 페이지를 만든 다음 필요에 맞게 페이지를 사용자 지정합니다. 페이지 템플릿을 참조하거나 복사할 수 있습니다. 자세한 내용은 템플릿에서 페이지 생성 문서를 참조하십시오.
UI 빌더 페이지 생성: 고급 설정
페이지에 필수 매개변수를 UI 빌더 추가합니다. 필수 매개변수는 sys_id, 테이블 또는 쿼리와 같이 페이지에 필요한 데이터 조각입니다. 필수 매개변수는 필수 매개변수의 값에 바인딩할 수 있으므로 구성요소에 유용합니다. 예를 들어 URL 필드에 테이블 매개변수를 추가한 다음 데이터를 해당 테이블에 바인딩할 수 있습니다. 테이블이 참조되면 페이지의 모든 구성요소에 테이블 데이터가 노출됩니다. 필수 매개변수는 페이지에 추가하면 URL에 표시됩니다. 다음 예제에서는 table이라는 필수 매개 변수가 추가되었습니다. URL에 추가된 것을 볼 수 있습니다.
페이지에 선택적 매개변수를 UI 빌더 추가합니다. 선택적 매개변수는 페이지의 URL에 추가할 수 있는 데이터 중 선택사항입니다. 필수 매개변수와 달리 선택적 매개변수는 제공된 순서에 관계없이 항상 작동하는 이름 및 값 쌍입니다.
페이지 변형의 대상 및 조건 설정을 UI 빌더 지정합니다. 페이지를 만들 때 에서는 UI 빌더 기본적으로 페이지의 변형도 생성합니다. 페이지 변형은 사용자 기준을 사용하여 다양한 대상의 경험을 타게팅할 수 있는 동일한 경로에 있는 페이지의 변형입니다. 예를 들어 관리자를 위한 페이지와 관리자의 부하 직원에 대한 해당 페이지의 변형이 있습니다. 변형 생성에 대한 자세한 내용은 을 참조하십시오 페이지 변형 생성.
대상에 대한 자세한 내용은 을 참조하십시오 대상에 대해 자세히 알아보기.
의 테스트 값 UI 빌더
테스트 목적으로 테스트 데이터를 페이지로 가져오는 방법으로 페이지에 테스트 값을 UI 빌더 추가합니다. 예를 들어 테이블을 필수 매개변수로 추가하는 경우 인시던트의 테스트 값을 추가하고 데이터 자원을 바인딩하여 해당 테이블의 인시던트에 대한 테스트 데이터를 가져올 수 있습니다.
데이터를 표시할 테스트 값을 가져오려면 데이터 자원을 추가한 다음 URL의 테스트 값에 기록을 바인딩하도록 데이터 자원을 구성합니다. 예를 들어 인시던트를 테스트 값으로 추가할 수 있습니다. 그런 다음 단일 기록 조회라는 데이터 자원을 추가합니다. 다음 이미지와 같이 테이블 필드에서 인시던트 테스트 값을 context.props.table 테이블에 동적으로 바인딩합니다.
기존 UI 빌더 페이지 보기
역할 설정에 따라 경험의 모든 UI 빌더 페이지에서 작업할 수 있습니다. 경험의 경험 뷰에서 작업하려는 페이지의 이름을 클릭합니다.
페이지 편집기에서 헤더의 드롭다운을 선택하여 다른 페이지 변형 을 엽니다.
UI 빌더 페이지 변형 생성
변형을 사용하면 사용자 기준을 사용하여 다양한 콘텐츠로 다양한 잠재고객을 타깃팅할 수 있습니다. 예를 들어 에이전트용 홈페이지와 동일한 URL 경로에 있는 관리자를 위한 변형 페이지를 만들 수 있습니다.
각 UI 빌더 페이지 변형의 대상을 설정합니다. 대상에 따라 페이지 변형 사용자가 달라집니다. 예를 들어 출장 요청 페이지를 만드는 경우 관리자가 직원 출장 요청을 관리할 수 있도록 해당 페이지의 변형을 생성합니다. 관리자 역할의 모든 사용자에 대해 관리자 페이지의 대상을 설정합니다. 직원은 해당 변형을 볼 수 없습니다. 대상에 대한 자세한 내용은 을 참조하십시오 대상에 대해 자세히 알아보기.
자세한 내용은 페이지 변형 생성 문서를 참조하십시오.
UI 빌더 페이지 설정 편집
경험 뷰에서 UI 빌더설정을 선택하여 언제든지 페이지 설정을 변경할 수 있습니다UI 빌더. 페이지를 생성한 후 페이지의 이름, 경로 및 매개변수를 변경할 수 있습니다.
자세한 내용은 페이지 편집 문서를 참조하십시오.
UI 빌더 콘텐츠 트리
콘텐츠 트리에서 구성요소를 클릭하면 스테이지의 구성요소가 강조 표시되므로 구성, 스타일링, 이벤트, 데이터 등을 추가할 수 있습니다. 콘텐츠 트리에서 항목을 끌어 페이지를 재구성할 수 있습니다.
페이지에 구성요소를 추가할 때 구성요소 레이블을 추가하는 것이 중요합니다. 구성요소 레이블은 컨텐츠 트리에서 컨텐츠 트리의 각 구성요소에 레이블 ID를 적용하는 데 사용됩니다. 적절하게 레이블이 지정되면 컨텐츠 트리에서 구성요소를 훨씬 쉽게 식별할 수 있습니다.
UI 빌더 도구
UI 빌더 도구 상자를 사용하여 페이지에 레이아웃과 구성요소를 추가합니다. 스테이지에서 UI 빌더+ 콘텐츠 추가 또는 + 아이콘을 선택하여 도구 상자에 액세스합니다.
도구 상자를 검색하여 페이지에 추가할 UI 빌더 레이아웃과 구성요소를 찾습니다.
정보 아이콘 
선택하여 레이아웃 또는 구성요소에 대한 간략한 설명을 봅니다. 도구 설명을 보려면 구성요소가 사전 설정을 사용할 수 있거나 여러 구성요소와 함께 제공되는 경우 구성요소 탭에 다른 색상이 표시됩니다.
UI 빌더 스테이지
스테이지는 편집기에서 UI 빌더 가장 큰 영역이며 페이지를 구성하는 데 사용됩니다. + 버튼을 선택하거나 구성요소 창에서 페이지로 끌어 여기에 열 레이아웃과 구성요소를 추가합니다.
스테이지에서 본문, 열 레이아웃 및 열은 자홍색으로 윤곽선이 표시됩니다. 구성요소는 파란색 윤곽선으로 표시됩니다.
트리 항목 아이콘을 사용하여 콘텐츠의 다른 레이어로 이동합니다. 예를 들어 열을 선택하면 상위 열 레이아웃 또는 열 내의 구성요소로 쉽게 이동할 수 있습니다.
열 레이아웃 또는 구성요소에서 복제 및 삭제와 같은 옵션에 대한 메뉴 아이콘을 선택합니다.
스테이지에서 변경한 내용은 오른쪽의 스타일 패널에 반영됩니다. [스타일] 패널에서 변경한 내용은 스테이지의 요소를 즉시 업데이트합니다.
에서 스테이지 크기 조정 UI 빌더
편집기에서 UI 빌더 너비 드롭다운을 선택하여 스테이지의 크기를 조정합니다.
다음에서 실행 취소 및 다시 실행 UI 빌더
페이지에서 변경한 UI 빌더 내용을 실행 취소하고 다시 실행합니다. 페이지 레이아웃, 구성요소, 스타일 또는 레이아웃에 대해 수행한 작업을 되돌립니다.
undo 및 redo 기능은 헤더 도구 모음에서 찾을 수 있습니다. 실행 취소( 
) 또는 다시 실행( 
) 버튼을 선택하여 작업을 되돌릴 수 있습니다. 실행 취소 드롭다운을 클릭하여 여러 단계 뒤로 이동할 수도 있습니다. 데이터 셸프에서 변경한 내용을 실행 취소하거나 다시 실행할 수 없습니다.
실행 취소 드롭다운을 선택하여 이전 20개 작업을 실행 취소할 수 있습니다.
UI 빌더 구성 패널
구성 패널을 사용하여 이벤트 핸들러를 정렬, 스타일 지정 및 설정하는 등의 구성요소 작업을 수행합니다.
- 구성 탭을 선택하여 구성요소를 구성합니다. 각 구성 요소에는 구성 요소의 필요한 부분을 제어할 수 있는 다양한 구성 옵션이 있습니다. 예를 들어 버튼 구성요소는 단순하며 모양, 레이블 및 몇 가지 속성만 구성할 수 있습니다. 목록 구성 요소는 더 복잡하며 편집 가능한 수십 개의 목록 매개 변수를 포함합니다.
- 구성 패널에서 스타일 탭을 선택하여 구성요소에 스타일을 추가합니다. 표준 기반 CSS(Cascading Style Sheet)를 사용하여 구성요소의 비주얼 스타일을 변경할 수 있습니다. 예를 들어 배경색, 테두리 또는 기타 CSS 스타일을 추가하거나 변경합니다.
자세한 내용은 구성요소의 기본 모양 변경 문서를 참조하십시오. - 이벤트 탭을 선택하여 구성요소, 페이지, 데이터 자원 및 선언적 작업에 작업을 추가하는 이벤트를 구성합니다. 페이지에 구성요소를 추가할 때 해당 구성요소 UI 빌더 는 작업을 수행하도록 구성되지 않습니다. 예를 들어 버튼 구성요소는 정적이며, 기록 삭제와 같은 이벤트 작업을 바인딩할 때까지 아무 작업도 수행하지 않습니다.
자세한 내용은 UI 빌더 페이지에서 작업 관리(고급 기능) 문서를 참조하십시오. - 열 layouts는 구성 요소가 페이지에서 정렬되는 방식을 제어합니다. 페이지에 열 레이아웃 UI 빌더 을 추가할 때 원하는 레이아웃 디자인 방법을 구성할 수 있습니다. 레이아웃의 열에 구성요소를 추가한 후 고급 방식으로 요소를 구성할 수 있습니다. 예를 들어 콘텐츠를 정당화하고, 항목을 정렬하고, 열 레이아웃, 열 및 구성요소의 높이, 너비, 여백, 배경, 테두리 및 안쪽 여백을 설정할 수 있습니다. CSS 그리드는 가장 강력한 레이아웃 시스템입니다. CSS 그리드는 2차원 그리드 위에 구축되어 페이지를 만드는 방법을 제어할 수 있습니다.
자세한 내용은 UI 빌더 페이지에서 구성요소 구성 문서를 참조하십시오.
UI 빌더 페이지를 열어 미리 보기
페이지를 미리 보고 UI 빌더 페이지가 웹 페이지로 어떻게 보이는지 확인합니다.
버튼을 사용하여 모달, 뷰포트, 구성요소, 데이터 자원 및 동적 데이터를 포함하여 현재 작업 중인 변형을 테스트합니다. 페이지 변형을 미리 보는 것은 경험을 빌드하는 동안 페이지 변형의 모양과 기능을 확인하는 데 유용합니다.
페이지를 미리 보는 또 다른 방법은 서버에서 URL 경로를 요청하는 것입니다. 이 메서드를 사용하여 사용자가 페이지를 열 때 변형을 볼 수 있는지 테스트합니다. 미리 보기 옆에 있는 드롭다운 화살표를 선택하고 URL 경로 열기를 선택합니다
또는 미리 보기 > URL 경로 열기 
자세한 내용은 환경을 보고 테스트 UI 빌더 하는 방법 알아보기 문서를 참조하십시오.
의 개발자 편집 UI 빌더
메뉴에서 플랫폼의 개발자로 페이지를 편집 UI 빌더 합니다. 이 옵션을 사용하면 페이지의 플랫폼 수준 상세 정보를 변경하고 페이지에서 벗어날 UI 빌더수 있습니다. 개발자로서 적절한 역할이 있어야 합니다.