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

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

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

    시작하기 전에

    필요한 역할: ui_builder_admin

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

    프로시저

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

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

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

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

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

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

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

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

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