UI 빌더 자습서

의 기본 UI 빌더 사항을 사용하여 My Tutorial이라는 페이지를 만드는 방법을 알아봅니다.

시작하기 전에

필요한 역할: ui_builder_admin

이 UI 빌더 자습서에서는 다음 작업을 수행하여 페이지를UI 빌더빌드합니다.

• 시작 UI 빌더.
• 작업 공간 또는 사용자 지정 포털 환경에 대한 페이지를 생성합니다. 페이지 만들기에 대한 자세한 내용은 을 참조하십시오 에서 페이지 생성 UI 빌더.
• 두 개의 열을 갖도록 페이지 레이아웃을 변경합니다. 자세한 내용은 UI 빌더 페이지에서 구성요소 구성 문서를 참조하십시오.
• 두 개의 컨테이너 구성요소를 추가하여 페이지를 빌드합니다.
• 컨텐츠 트리에서 컨테이너 구성요소의 이름을 바꿉니다.
• 첫 번째 컨테이너에 Heading 구성 요소와 Button 구성 요소를 추가합니다. 두 번째 컨테이너에 데이터 시각화 구성요소 를 추가합니다. 구성 요소에 대한 자세한 내용은 을 참조하십시오 구성요소를 사용하여 페이지 사용자 지정 UI 빌더.
• 다음과 같이 구성요소를 구성합니다.
  • 버튼을 ServiceNow® 웹 사이트에 연결합니다.
  • 데이터 시각화 구성요소를 데이터 소스에 연결하여 작업 데이터를 표시합니다. 데이터 자원에 대한 자세한 내용은 다음 문서를 참조하십시오 UI 빌더 페이지에서 데이터를 동적으로 노출(고급 기능).
• 페이지를 자주 저장하세요.
• 페이지를 미리 보고 브라우저에서 어떻게 보이는지 확인합니다.

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
   필터 탐색기에 UI Builder를 직접 입력할 수도 있습니다.

   그림 1. UI 빌더 시작

   

2. UI 빌더 홈페이지에서 작업하려는 경험을 선택합니다.
   작업할 경험이 나열되지 않으면 관리자에게 문의하여 경험에 액세스하거나 경험을 생성하십시오. 자세한 내용은 다음에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 문서를 참조하십시오.
3. 페이지를 작성합니다.

   작업

   수행 방법

   페이지 생성

   페이지 및 변형 섹션에서 + 아이콘을 선택합니다. 새 페이지 만들기를 선택합니다. 대신 처음부터 만들기를 선택합니다. 새 페이지의 이름을 입력합니다. 이름은 원하는 대로 지정할 수 있습니다. 이 예제에서는 My tutorial page를 입력할 수 있습니다. 경로 필드에는 페이지 이름을 기준으로 경로가 자동으로 입력됩니다. 이 예제에서 경로는 my-tutorial-page입니다. 경로는 페이지의 URL입니다. 이 경로는 원하는 대로 변경할 수 있지만 경로는 고유해야 합니다. 경로는 소문자여야 하며 공백이 없어야 합니다. URL 미리 보기에는 페이지의 경로가 표시됩니다. 계속을 선택합니다. (선택 사항) 페이지 URL에 매개변수를 추가합니다. Looks good(보기 좋음)을 선택합니다. 페이지 변형의 이름을 입력합니다. 이름은 원하는 대로 지정할 수 있습니다. 이 예에서는 My first page variant를 입력할 수 있습니다. + 잠재고객 추가를 선택하여 페이지 변형의 잠재고객을 추가합니다. 이 예제에서는 관리자를 선택합니다. 계속을 선택합니다. 다음 화면에서 응답 빌드를 선택합니다. 생성을 선택합니다. 페이지가 생성되면 페이지 편집기 화면이 나타납니다. URL 설정 및 변형 설정과 같은 고급 설정을 변경할 수 있습니다. 이 자습서에서는 이러한 고급 옵션을 건너뛸 수 있습니다. 고급 설정 변경에 대한 자세한 내용은 을 참조하십시오 UI 빌더 페이지 생성: 고급 설정. 그림 2. UI 빌더 페이지 편집기

   축하합니다! 튜토리얼 페이지를 생성했습니다! 페이지에 콘텐츠가 없습니다. 페이지에 구성요소를 추가하여 기능을 빌드합니다. 구성요소는 페이지의 구성요소입니다. UI 빌더 에는 페이지에 추가할 수 있는 많은 구성 요소가 함께 제공됩니다. 구성요소는 제목처럼 단순할 수도 있고 목록처럼 복잡할 수도 있습니다.
4. 페이지의 레이아웃을 2열 레이아웃으로 변경합니다.
   레이아웃에 대한 자세한 내용은 을 참조하십시오 UI 빌더 페이지에서 구성요소 구성.

   작업	수행 방법
   페이지 레이아웃을 두 개의 열로 변경	콘텐츠 트리의 본문 수준을 선택하여 페이지를 강조 표시합니다. 콘텐츠 트리에서 + 콘텐츠 추가 를 선택합니다. 2개 열 레이아웃을 선택합니다. 2개 열 레이아웃이 나타납니다.

5. 왼쪽 열에 제목 구성 요소와 버튼 구성 요소를 추가합니다.

   작업	수행 방법
   왼쪽 열 컨테이너에 제목 구성요소 추가	다양한 방법으로 페이지에 구성요소를 추가할 수 있습니다. 페이지에 구성 요소를 추가하는 방법에 대한 자세한 내용은 표 1을 참조하십시오. 왼쪽 열 가운데에 있는 + 단추를 선택합니다. 검색 필드에 Heading 을 입력합니다. 제목 구성요소를 선택하여 컨테이너에 추가합니다. 제목 구성요소는 페이지에 텍스트나 제목을 추가하는 방법입니다. 구성 패널의 사전 설정 목록에서 없음 을 선택합니다. 구성 패널에서 구성요소 이름을 선택하여 구성요소 레이블 과 구성요소 ID를 확인합니다. 고유하다면 원하는 대로 변경할 수 있습니다. 적용을 선택합니다. 제목 구성요소를 구성합니다. 구성 요소 작성자는 구성 요소를 설정하는 데 필요한 적절한 속성을 노출하도록 구성 요소를 구성합니다. 스타일을 Header-primary로 설정합니다. Style은 글꼴, 굵기 및 색과 같은 제목 텍스트의 클래스를 변경합니다. 예를 들어 헤더 보조를 선택하면 텍스트가 더 작아집니다. 제목이 두 개인 경우 제목 크기가 다르고 두 번째 제목을 기본 제목보다 작게 하려는 경우에 유용합니다. My Tutorial 을 레이블 필드의 제목 텍스트로 입력합니다. 레벨을 1로 둡니다.
   왼쪽 열 컨테이너에 단추 구성요소 추가 및 구성	페이지에 버튼 구성 요소를 추가합니다. 텍스트와 모양을 변경하여 버튼을 구성합니다. 그런 다음 단추에 대한 이벤트 처리기를 추가하여 단추를 클릭할 때 수행되는 작업을 변경합니다. 이벤트 핸들러는 홈 페이지에 연결 ServiceNow® 하기 위해 버튼에 작업을 추가합니다. 따라서 버튼을 ServiceNow® 클릭하면 브라우저의 새 탭에서 홈 페이지가 열립니다. 구성 요소 구성에 대한 자세한 내용은 구성 요소를 참조하십시오. 이전 섹션에서 추가한 제목 구성요소의 아래쪽 가장자리에서 + 를 선택합니다. 검색 필드에 Button 을 입력합니다. 목록에서 버튼 구성요소를 선택합니다. 페이지에 구성 요소를 추가하는 방법에 대한 자세한 내용은 표 1을 참조하십시오. 구성 패널에서 구성요소 이름을 선택하여 구성요소 레이블 과 구성요소 ID를 확인합니다. 고유하다면 원하는 대로 변경할 수 있습니다. 버튼 구성요소를 다음과 같이 구성합니다. 레이블 필드에 홈페이지 를 입력하여 버튼 이름을 변경합니다. 크기를 크게 변경합니다. 아이콘 검색 필드에 home을 입력합니다. 홈 외곽선을 선택합니다. 버튼에 적용되는 작업을 구성하는 이벤트 핸들러를 추가합니다. 구성 패널에서 이벤트 탭을 선택합니다. 단추 클릭됨에서 + 새 이벤트 처리기 추가를 선택합니다. Inherited event handlers(상속된 이벤트 처리기)에서 Link to destination(대상에 연결)을 선택합니다. 목적지 선택을 클릭합니다. 대상 선택 화면에서 외부 URL을 선택합니다. URL을 입력합니다. 이 자습서에서는 https://www.servicenow.com Select OK를 입력합니다. 추가를 선택합니다. 이벤트 처리기에 대한 자세한 내용은 을 참조하십시오 UI 빌더 페이지에서 작업 관리(고급 기능). 저장을 선택합니다. 작업하는 동안 페이지를 자주 저장하는 것이 좋습니다. 미리 보기를 선택합니다. 이전 단계에서 만든 단추를 테스트합니다.

   페이지에 대한 제목 및 버튼 구성요소를 추가하고 구성했습니다.

   

6. 컨테이너에 데이터 시각화 구성요소를 추가합니다.
   데이터 시각화 구성요소에는 시각적으로 표시하는 데이터가 포함되어 있습니다. 데이터 시각화 구성요소 매개변수를 구성합니다. 그런 다음 여기에 데이터 자원을 추가합니다.

   작업

   수행 방법

   오른쪽 열 컨테이너에 데이터 시각화 구성요소 추가 및 구성

   다양한 방법으로 페이지에 구성요소를 추가할 수 있습니다. 페이지에 구성 요소를 추가하는 방법에 대한 자세한 내용은 표 1을 참조하십시오. 오른쪽 열 가운데에 있는 + 단추를 선택합니다. 검색 필드에 데이터 시각화 구성요소가 표시될 때까지 데이터 시각화를 입력한 다음, 구성요소를 선택하여 페이지에 추가합니다. 구성 패널에서 구성요소 이름을 선택하여 구성요소 레이블 과 구성요소 ID를 확인합니다. 고유하다면 원하는 대로 변경할 수 있습니다. 데이터 시각화 구성요소에 데이터 자원을 추가하여 고객 계정 데이터를 가져옵니다. 데이터 시각화 구성요소를 선택한 다음 구성 탭을 선택합니다. 데이터 원본 추가를 선택합니다. 검색 필드에 작업 [task] 를 입력하고 인스턴스에서 UI 빌더 사용할 수 있는 작업을 찾습니다. 이 원본 추가를 선택합니다. 데이터 시각화 유형 드롭다운을 선택하고 다이얼을 선택합니다. 데이터에 가장 적합한 다양한 시각화 유형을 선택할 수 있습니다. 구성 패널에서 헤더 및 테두리를 선택합니다. 차트 제목 필드에 내 작업을 입력합니다.

   오른쪽 열에 데이터 시각화 구성요소를 추가하고 구성했습니다. 또한 고객 계정 데이터를 가져오는 데이터 자원도 추가했습니다.
7. 새 페이지를 마지막으로 한 번 저장합니다.

   작업	수행 방법
   페이지 저장	의 맨 오른쪽 모서리 UI 빌더에서 저장을 선택합니다. 이제 페이지를 저장했으므로 언제든지 경험에서 액세스할 수 있습니다.

8. 이제 페이지를 미리 보고 브라우저에서 어떻게 보이는지 확인합니다.

   작업	수행 방법
   페이지 미리 보기	헤더에서 UI 빌더미리 보기를 선택합니다. 페이지의 왼쪽 열에 있는 제목을 참조하십시오. 홈페이지 단추를 선택합니다. ServiceNow® 홈 페이지가 다른 브라우저 탭에서 열립니다. 브라우저 탭을 닫고 미리보기 페이지로 돌아갑니다. 페이지의 오른쪽 열에서 고객 계정 데이터 시각화를 참조하십시오. 그림 3. 튜토리얼 페이지 미리 보기

   축하합니다! 자습서를 완료했습니다 UI 빌더 .

결과

1. 에서 UI 빌더페이지를 생성했습니다.
2. 두 개의 열을 갖도록 페이지 레이아웃을 변경했습니다.
3. 제목 구성요소를 왼쪽 열에 제목으로 추가했습니다.
   • 제목의 텍스트를 변경했습니다.
   • 제목의 레이블을 변경했습니다.
4. 제목 구성요소 아래에 버튼 구성요소를 추가했습니다.
   • 버튼을 구성했습니다.
   • 버튼에 대한 이벤트 핸들러를 추가했습니다.
   • 웹 페이지에 대한 링크를 설정하는 이벤트 핸들러를 추가했습니다. 버튼을 클릭하면 웹 페이지가 열립니다.
5. 오른쪽 열의 레이블을 변경했습니다.
6. 데이터 시각화 구성요소를 추가했습니다.
   • 데이터 시각화 구성요소를 구성했습니다.
   • 작업 데이터를 가져오기 위해 데이터 자원을 추가했습니다.
7. 새 페이지를 저장했습니다.
8. 페이지를 미리 보았습니다.