UI 빌더 방문 페이지 튜토리얼

  • 릴리스 버전: Washingtondc
  • 업데이트 날짜 2024년 02월 01일
  • 읽기6분
  • 레거시를 UI 빌더 사용하여 사용자 지정 방문 페이지를 생성하는 방법을 알아봅니다.

    시작하기 전에

    중요사항:
    이 페이지에 설명된 빌더는 CSM을 제외한 모든 작업 공간에서 방문 페이지를 빌드하고 편집하기 위한 것입니다. CSM 작업 공간에서 모든 페이지를 빌드하고 편집하는 새 UI Builder에 대한 자세한 내용은 UI Builder를 참조하십시오.
    이 작업은 방문 페이지만 생성할 수 있는 레거시 UI 빌더 와 관련이 있습니다. 새 버전의 UI Builder를 사용하여 구성 가능한 작업 공간을 생성합니다. 자세한 내용은 UI Builder를 참조하십시오.

    필요한 역할: workspace_admin 또는 ui_builder_admin

    이 태스크 정보

    방문 페이지를 만들기 전에 기존 방문 페이지를 탐색하여 작동 방식을 UI 빌더 살펴보겠습니다.

    프로시저

    1. 다음으로 이동 모두 > 워크플레이스 경험 > 관리 > 모든 워크플레이스 을 클릭하고 작업 공간을 클릭하여 엽니다.
    2. 열리는 페이지를 편집할 수 없는 경우 이 기록을 편집하려면 여기를 클릭하여 페이지를 편집할 수 있도록 하려면 여기 링크를 클릭하십시오.
    3. UI Builder에서 열기를 클릭합니다.
    4. 페이지 관리 창의 페이지 탭에서 인시던트 개요 방문 페이지를 클릭합니다.
      이 방문 페이지는 스테이지 창에 나타납니다. Configuration(구성) 창 위에 Status(상태 ) 및 Application(애플리케이션 ) 필드가 있는지 확인합니다. 활성 상태는 방문 페이지가 현재 사용 중임을 의미합니다. 애플리케이션 필드에는 ITSM에이전트 작업 공간에서 방문 페이지를 사용 중이라고 표시됩니다. 클릭한 경우:
      • 비활성화하면 상태가 비활성 으로 변경되고 방문 페이지가 더 이상 작업 공간에 표시되지 않습니다.

        비활성화 버튼은 활성화 버튼으로 대체되어 작업 공간에 방문 페이지를 게시할 수 있습니다.

        일반적으로 방문 페이지에서 작업할 때는 방문 페이지를 비활성화합니다. 예를 들어 현재 방문 페이지를 업데이트하려면 다음을 수행할 수 있습니다.
        1. 현재 방문 페이지를 복제합니다.
        2. 비활성 상태에서 작업합니다.
        3. 업데이트된 버전을 활성으로 만듭니다.
        4. 원래 버전을 비활성으로 설정합니다.
      • 저장 버튼을 사용하면 방문 페이지에 대한 변경 내용을 저장할 수 있습니다. 상태가 다음과 같은 경우:
        • 활성인 경우 변경 내용이 작업 공간에 즉시 표시됩니다.
        • 비활성 상태인 경우 변경 내용이 저장되지만 게시되지는 않습니다.
    5. 구성요소를 클릭하고 구성 창에서 구성 매개변수가 어떻게 변경되는지 확인합니다.
    6. 지금 발생을 클릭합니다.

      컨테이너는 네 개의 작은 구성요소 주위에 표시됩니다. Happening Now 는 컨테이너의 레이블입니다. Label(레이블) 아래의 Configuration(구성) 창을 확인합니다. 컨테이너는 다른 구성요소를 그룹화하는 방법입니다.

    7. 컨테이너가 강조 표시된 상태에서 테두리 표시 슬라이더를 오른쪽으로 밉니다.

      컨테이너를 표시하는 테두리가 나타납니다.

    8. 축소 가능 슬라이더를 오른쪽으로 밉니다.

      캐럿 아이콘( 축소 아이콘)이 컨테이너 위에 나타납니다. 에이전트는 캐럿을 클릭하여 컨테이너와 그 안에 있는 모든 항목을 축소할 수 있습니다.

    9. 구성 창의 오른쪽 위에 있는 오른쪽 화살표(>)를 클릭하여 창을 축소합니다.
    10. 스테이지 창에서 컨테이너를 클릭한 다음 해당 구성 아이콘( 구성 아이콘)을 클릭합니다.

      구성요소 팝업 창

      구성 창이 다시 열립니다.

      또한 구성 요소를 드래그하는 데 사용할 수 있는 이동 아이콘( Grab 구성 요소)을 확인할 수 있습니다. 아직은 그렇게하지 마십시오.

      구성 창의 축소됨 슬라이더는 컨테이너가 축소된 상태로 시작되고 에이전트가 클릭하여 컨테이너를 확장할 수 있는 아래쪽 화살표( 확장 아이콘)로 표시됨을 의미합니다.

      인터페이스의 다른 부분을 사용하는 방법을 살펴보았으므로 이제 랜딩 페이지를 만드는 방법을 살펴보겠습니다.

    새 방문 페이지 튜토리얼 생성

    새 방문 페이지를 생성합니다.

    프로시저

    1. 페이지 탭에서 더하기 아이콘(+)을 클릭하여 새 방문 페이지를 엽니다.

      새 페이지 생성

      다음을 클릭하여 새 페이지를 만들 수도 있습니다. 페이지 작업 > +새 페이지레이블이 표시됩니다.

    2. 좋습니다. 이 페이지에 대한 몇 가지 일반 정보를 가져옵시다. 모달에서 방문 페이지의 이름을 입력하고 방문 페이지 생성을 클릭합니다.

      이 제목은 방문 페이지가 아닌 스테이지 위에 나타납니다.

      방문 페이지 이름

    구성요소 추가 및 구성 자습서

    방문 페이지에서 구성요소를 추가하고 구성합니다.

    프로시저

    1. +구성 요소 추가 탭을 선택하고 이미지 구성 요소를 스테이지 창으로 드래그합니다.

      이미지에 대한 매개변수가 구성 창에 나타납니다.

    2. 데이터 시각화 구성요소를 이미지 아래로 끌어 놓습니다.

      구성요소가 스테이지 창에 나타나지 않습니다.

    3. 데이터 시각화 구성요소를 이미지 구성요소 위로 끌어 놓지는 않은 다음 이미지 구성요소의 가장자리 주위로 데이터 시각화 구성요소를 이동합니다.

      이미지 구성 요소의 측면은 데이터 시각화 구성 요소를 그 위로 이동할 때 강조 표시됩니다. 구성요소 끌기

    4. 데이터 시각화 구성요소를 이미지 왼쪽에 놓고 놓습니다.

      데이터 시각화 구성요소는 이미지 구성요소의 왼쪽에 나타납니다.

    5. 데이터 시각화 구성 요소 위에 있는 이동 아이콘( Grab 구성 요소)을 선택한 다음 잡고 이미지 구성 요소의 아래쪽 가장자리 위로 끌어 놓습니다.

      이제 방문 공간에서 구성 요소를 이동하는 방법을 알 수 있습니다. 데이터 시각화 구성요소가 비어 있습니다. 잘 보이도록 채워 봅시다.

    6. 구성 창의 보고서 필드에 incident를 입력합니다.

      가능한 항목의 자동 완성 목록이 나타납니다.

    7. 목록에서 우선순위별 오픈 인시던트를 선택합니다.
      해당 보고서가 구성 요소에서 열립니다.
    8. 구성 창에서 우선순위별 오픈 인시던 트를 삭제하고 PA 위젯 필드에 incident를 입력합니다.
      가능한 항목의 자동 완성 목록이 나타납니다. 이러한 항목은 (PA) 위젯입니다 퍼포먼스 분석 .

      구성요소에 데이터 시각화를 하나만 넣을 수 있습니다. 따라서 보고서 또는 PA 위젯을 표시할 수 있지만 둘 다 표시할 수는 없습니다. 보고서와 PA 위젯 모두에 대한 항목을 넣으면 보고서 UI 빌더 만 표시됩니다.

      이제 방문 페이지에서 구성요소를 추가하고 정렬하는 방법을 알게 되었습니다. 이제 그룹화하는 방법을 살펴보겠습니다.

    구성요소 그룹화 및 정렬 튜토리얼

    방문 페이지에서 구성요소를 그룹화하고 정렬합니다.

    프로시저

    1. Page actions(페이지 작업)를 클릭하고 Delete page(페이지 삭제)를 선택한 다음 삭제를 확인합니다.
    2. 데이터 시각화 구성요소를 선택하고 휴지통 아이콘( 휴지통 아이콘)을 클릭한 다음 구성요소 위에 있는 삭제 확인 표시 아이콘( 구성요소 삭제)을 클릭하여 제거합니다.
      이제 방문 페이지에서 구성요소를 삭제했습니다. 원하는 경우 이미지 구성 요소를 제거할 수도 있습니다.
    3. 컨테이너 구성요소를 스테이지 창으로 드래그합니다.
    4. 구성 요소 창에서 컨테이너의 레이블 필드에 값을 입력하고 컨테이너를 볼 수 있도록 테두리 표시 슬라이더를 오른쪽으로 밉니다.
    5. 레이블 필드에서 컨테이너에 제목을 추가합니다(예: 중요 목록).
    6. 목록 구성요소를 컨테이너로 드래그합니다.
    7. 구성요소 창의 테이블 필드에 기록 목록이 제공되는 테이블의 값(예: 인시던트)을 입력합니다.
    8. 다른 목록 구성요소를 컨테이너로 끌어다 놓습니다.

      목록을 컨테이너 내부 또는 외부에 놓을 수 있습니다. 용기 안에 떨어뜨립니다.

      컨테이너에 목록 추가

    9. 구성요소 창의 테이블 필드에 기록 목록이 제공되는 다른 테이블에 대한 값을 입력합니다(예: 작업).

      이제 컨테이너 구성 요소 내에 목록을 설명하는 레이블이 있는 두 개의 목록 구성 요소가 있습니다.

    10. 컨테이너 내부 또는 외부에 구성 요소를 계속 추가하고 이동 아이콘( 잡기 구성 요소)을 사용하여 구성 요소를 끌어 구성 요소를 추가, 삭제, 이동 및 그룹화하는 데 익숙해질 수 있습니다.
    11. 저장을 클릭합니다.

      실제 방문 페이지를 만드는 경우 활성화도 클릭합니다. 이 튜토리얼에서는 실제 방문 페이지를 만들지 않으므로, 이 연습용 방문 페이지를 삭제해 보겠습니다.

    방문 페이지 삭제 튜토리얼

    방문 페이지를 삭제합니다.

    프로시저

    1. 페이지 탭에서 방문 페이지를 선택합니다.
    2. 페이지 작업에서 페이지 삭제를 클릭합니다.

    다음에 수행할 작업

    이제 UI 빌더 사용 방법을 파악했습니다. 첫 번째 방문 페이지를 생성할 준비가 되었습니다.