페이지에 모드리스 대화 상자 UI 빌더 추가

  • 릴리스 버전: Xanadu
  • 업데이트 날짜 2024년 08월 01일
  • 읽기3분

    • 에서 모덜리스 대화 상자를 UI 빌더추가하는 방법을 알아봅니다. 모덜리스 대화 상자는 페이지 위에 콘텐츠를 포함하는 부동 창입니다.

    시작하기 전에

    필요한 역할: ui_builder_admin

    다음 단계에서는 첨부 파일 구성요소가 포함된 모덜리스 대화 상자를 열도록 버튼을 구성하는 프로세스를 안내합니다.
    주:
    여기에 설명된 절차는 모덜리스 대화 상자를 사용하는 방법의 한 가지 예일 뿐입니다. 무한한 가능성이 있습니다. 비즈니스 요구 사항에 맞게 모덜리스 대화 상자를 추가하고 구성합니다.

    프로시저

    1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
    2. 작업할 경험을 열거나 다음을 선택하여 경험을 생성합니다. 작성 > 경험.
      경험 생성에 대한 자세한 내용은 을 참조하십시오 다음에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
    3. 페이지 변형을 열거나 만듭니다.
      에서 UI 빌더페이지를 만드는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 만들기를 참조하십시오.
    4. 콘텐츠 트리에서 모덜리스 대화 상자로 마우스를 이동하고, + 아이콘을 선택하고, 모덜리스 대화 상자 구성 요소를 선택합니다.
      + 아이콘이 선택되고 모드리스 대화 상자 구성요소가 포함된 창이 열린 컨텐츠 트리에 표시되는 모덜리스 대화 상자 옵션입니다.
    5. 모덜리스 대화 상자가 스테이지에 자동으로 나타나지 않으면 콘텐츠 트리에서 모드리스 대화 상자 기본값 이라는 새 모덜리스 대화 상자를 선택합니다.
    6. 구성 패널 구성 탭에서 모덜리스 대화 상자와 함께 자동으로 추가된 사전 설정(예: 너비, 높이, 위치 및 드래그 사용 설정)을 봅니다.
      사전 설정을 표시하는 구성 탭이 있는 모드리스 대화 상자 구성 패널입니다.

      필요한 경우 이러한 사전 설정 속성을 모두 편집할 수 있습니다.

      주:
      모덜리스 대화 상자 고급 속성에 대한 자세한 내용은 ServiceNow Developer 사이트를 참조하십시오.
    7. 데이터 리소스 서랍에서 모드리스 대화 상자 컨트롤러가 자동으로 추가되었습니다.
      데이터 자원 서랍의 모드리스 대화 상자 컨트롤러를 가리키는 검은색 화살표입니다.
    8. 콘텐츠 트리의 모드리스 대화 상자 기본 > 작업에서 + 콘텐츠 추가를 선택하여 모드리스 대화 상자 헤더에 콘텐츠를 추가합니다.
    9. Stylized text 구성요소를 검색하여 선택합니다.
    10. 스타일화된 텍스트 구성 패널에서 없음을 선택하여 구성요소를 수동으로 구성합니다.
      없음 옵션을 가리키는 검은색 화살표가 있는 스타일화된 텍스트 구성 패널입니다.

      기록 부제목 사전 설정이 자동으로 추가된 경우 드롭다운 화살표를 선택하고 없음을 선택한 다음 구성 탭에서 제거를 선택합니다.

      사전 설정 드롭다운과 없음 옵션을 가리키는 검은색 화살표가 있는 스타일화된 텍스트 구성요소 구성 패널입니다.
    11. 아직 열지 않은 경우 구성을 선택하여 구성 탭을 엽니다.
    12. Text(텍스트)에서 샘플 텍스트를 제거하고 Add Attachments(첨부 파일 추가)를 입력합니다.
      텍스트 필드를 가리키는 검은색 화살표가 있는 스타일 텍스트 구성 탭입니다.
    13. UI 빌더 헤더에서 저장 을 선택합니다.
    14. 콘텐츠 트리의 모드리스 대화 상자 기본값 > 콘텐츠 > 컨테이너에서 + 콘텐츠 추가를 선택하여 모드리스 대화 상자 본문에 콘텐츠를 추가합니다.
    15. 첨부 파일 구성요소를 선택합니다.
    16. 첨부 파일 구성 패널에서 아직 선택하지 않은 경우 첨부 파일 기록 및 적용을 선택하여 사전 설정으로 구성요소를 구성합니다.
      첨부 파일 기록 사전 설정 옵션을 가리키는 검은색 화살표가 있는 첨부 파일 구성요소 구성 패널입니다.

      첨부 파일 구성요소 구성에 대한 자세한 내용은 ServiceNow Developer 사이트를 참조하십시오.

    17. 모덜리스 대화 상자 바닥글에 콘텐츠를 추가할 수 있지만 이 예제에서는 바닥글을 비워 둡니다.
    18. 저장을 선택합니다.
      콘텐츠 트리에서 모덜리스 대화 상자와 모든 구성요소가 페이지 구조의 본문 위에 나열되어 있습니다. 또한 최소화된 대화 상자 드롭다운 구성 요소가 페이지에 자동으로 추가되고 콘텐츠 트리의 본문 아래에 나열되어 모덜리스 대화 상자 헤더의 최소화 아이콘에 대한 기능을 제공합니다.

      모덜리스 대화 상자 기본 구성 요소, 본문 및 최소화된 대화 상자 드롭다운 구성 요소를 가리키는 검은색 화살표가 있는 콘텐츠 트리입니다.

    19. 콘텐츠 트리에서 본문을 선택합니다.
    20. 버튼 구성요소를 추가하고 모덜리스 대화 상자를 열도록 구성합니다.
      1. 콘텐츠 트리에서 본문 옆에 있는 메뉴 아이콘을 선택하고 콘텐츠 추가를 선택합니다.
      2. Layouts(레이아웃) 탭에서 Single column(단일 열)을 선택합니다.
        단일 열을 포함하는 새 열 레이아웃이 페이지 하단에 추가됩니다.
      3. 스테이지의 새 열 레이아웃에서 + 아이콘을 선택합니다.
        열의 + 아이콘을 가리키는 검은색 화살표가 있는 단일 열 레이아웃입니다.
      4. Button bare 구성 요소를 검색하여 선택합니다.
        용어 버튼이 포함된 검색 필드를 가리키는 검은색 화살표와 버튼 기본 구성요소를 가리키는 또 다른 검은색 화살표로 표시된 도구 상자입니다.
      5. 구성 패널의 구성 탭에서 없음 을 선택하여 구성요소를 수동으로 구성합니다.
      6. 구성 패널에서 이벤트 탭을 선택합니다.
      7. + 이벤트 처리기 추가를 선택합니다.
        버튼 기본 구성 패널은 이벤트 탭을 가리키는 하나의 검은색 화살표와 + 이벤트 핸들러 추가 옵션을 가리키는 두 번째 검은색 화살표로 표시됩니다.
      8. 왼쪽 목록에서 모드리스 대화 상자 열기 를 선택합니다(목록에서 아래로 스크롤해야 할 수 있음).
      9. 최소화된 제목에 첨부 파일을 입력합니다.
      10. 모드리스 대화 상자에서모드리스 대화 상자 기본값을 선택합니다.
        여기에서 구성할 수 있는 다른 옵션(제목 및 범주 포함)이 있습니다.
      11. 추가를 선택합니다.
        모덜리스 대화 상자 열기 옵션, 최소화된 제목 필드, 모덜리스 대화 상자 필드 및 추가 버튼을 가리키는 검은색 화살표가 있는 이벤트 핸들러 창입니다.
      12. 구성 탭을 선택합니다.
      13. 레이블에 첨부 파일 추가를 입력합니다.
        레이블 필드를 가리키는 검은색 화살표가 있는 기본 구성요소 구성 탭입니다.
    21. 저장을 선택합니다.
    22. 헤더에서 미리 보기UI 빌더 옆에 있는 드롭다운 화살표를 선택하고 목록에서 URL 경로 열기 를 선택합니다.
    23. 첨부 파일 추가 단추를 선택하여 모덜리스 대화 상자를 테스트합니다.
      모덜리스 대화 상자는 맨 위에 제목이 있고 아래에 첨부 파일 구성요소가 있는 기본 페이지 위에 열립니다.
    24. 최소화 기능을 테스트하려면 모덜리스 대화 상자에서 최소화 아이콘을 선택합니다.
      최소화 아이콘을 가리키는 검은색 화살표가 있는 모덜리스 대화 상자 제목입니다.
      모덜리스 대화 상자가 최소화되며 최소화됨 대화 상자 드롭다운에서 액세스할 수 있습니다.
    25. 최소화된 대화 상자 아이콘을 선택한 다음, 첨부 파일을 선택하여 모덜리스 대화 상자 창을 다시 엽니다.
      초안 이메일 옵션을 보여주는 드롭다운으로 최소화된 대화 상자 구성요소가 선택되었습니다.