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

  • 릴리스 버전: Yokohama
  • 업데이트 날짜 2025년 01월 30일
  • 읽기3분

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

    시작하기 전에

    필요한 역할: ui_builder_admin

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

    프로시저

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

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

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

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

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

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

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

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

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