UI Builder 튜토리얼

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

시작하기 전에

필요한 역할: ui_builder_admin

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

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

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI Builder레이블이 표시됩니다.
   필터 탐색기에 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 Builder 페이지 생성: 고급 설정. 그림 2. 내 튜토리얼 페이지 생성

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

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

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

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

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

   

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

   작업

   수행 방법

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

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

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

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

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

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

   축하합니다! 튜토리얼을 완료했습니다 UI 빌더 .

결과

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