구성요소에 모달 추가

에서 모달 UI 빌더을 추가하는 방법을 알아보십시오. 모달은 구성요소를 클릭할 때 나타나는 창입니다. 예를 들어 삭제 버튼 구성요소를 클릭하면 모달이 표시되어 사용자에게 기록 삭제를 확인하라는 메시지가 표시될 수 있습니다.

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

모달은 버튼 클릭과 같은 이벤트에 의해 이벤트 핸들러가 트리거될 때 나타나는 화면입니다. 다음 절차에서는 확인 모달 및 관련 이벤트 핸들러를 버튼 구성 요소에 추가하는 방법의 예를 보여 줍니다.

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 작업할 경험을 열거나 다음을 선택하여 경험을 생성합니다. 작성 > 경험.
   경험 생성에 대한 자세한 내용은 을 참조하십시오 다음에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 페이지 또는 페이지 변형을 열거나 만듭니다.
   에서 UI 빌더페이지를 만드는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 만들기를 참조하십시오.
4. 페이지에 모달을 추가합니다.
   1. 컨텐츠 트리에서 모달 및 팝오버 옆에 있는+ 아이콘을 선택합니다.
      
   2. 확인과 같은 모달 유형을 선택합니다.
      

      모달 유형	설명
      경보	경보 모달은 구성요소 작업과 관련된 정보를 제공합니다. 예를 들어 사용자가 삭제 버튼을 누르면 삭제 작업을 실행 취소할 수 없음을 사용자에게 알리는 경고 팝업이 표시될 수 있습니다.
      확인	확인 모달은 사용자에게 구성요소 작업을 확인하도록 요청합니다. 예를 들어 사용자가 삭제 단추를 누르면 사용자는 데이터 삭제를 확인해야 합니다. 기본 및 보조 버튼 레이블 필드에서 확인 옵션(예/취소)을 선택할 수 있습니다.
      확인 및 삭제	확인 및 파괴 모달은 일반적으로 콘텐츠 삭제 또는 지우기와 관련하여 더 지시적입니다. 사용자에게 작업의 심각성을 알리고 작업을 계속 진행할지 여부를 묻습니다.
      사용자 지정	사용자 지정 모달은 레이아웃을 사용하여 모달에서 원하는 정보를 완전히 디자인할 수 있습니다. 레이아웃은 모달 화면 내에서 정보가 있는 위치도 결정합니다. CSS 스타일시트(CSS) 스타일을 사용하여 배경색과 같은 모달의 시각적 모양을 변경할 수 있습니다.
      Iframe	iframe을 사용하여 URL 및 데이터의 기존 iframe 콘텐츠를 사용하는 모달로 콘텐츠를 가져옵니다.
      모달 뷰포트	클라이언트 스크립트를 사용하여 이벤트 바인딩을 통해 뷰포트 모달에 컨텐츠를 동적으로 전달합니다. 이벤트를 구성요소에 바인딩하는 방법에 대한 자세한 내용은 을 참조하십시오 구성요소에 이벤트 바인딩 .

   3. 테이블에 표시된 대로 모달을 구성합니다.

      모달의 요구 사항에 따라 각 모달을 다르게 구성합니다. 모달에 들어갈 정보, 모달의 크기, 모양 등을 변경합니다. 모달 열기 또는 닫기와 같은 모달에 대한 작업을 수행하는 이벤트 핸들러를 모달에 추가할 수 있습니다.

      모달	구성
      경보	모달의 제목인 헤더를 추가합니다. 모달에 표시할 컨텐츠를 작성합니다. 컨텐츠는 사용자에게 경보가 무엇인지 알려줍니다. 버튼 레이블에 대한 텍스트를 추가합니다. OK,Yes 등 원하는 것은 무엇이든 될 수 있습니다. 화면에서 모달의 크기를 선택합니다. 작게, 중간, 크게 또는 전체 화면을 선택합니다. 기본 동작에 따라 모달을 닫을지 여부에 따라 기본 단추 동작 방지를 사용하거나 사용하지 않도록 설정합니다. 모달 컨텐츠 로드 연기 사용 또는 사용 안 함. 비활성화하면 모달이 페이지와 함께 로드됩니다. 사용하도록 설정하면 페이지가 로드될 때 모달이 로드되지 않습니다. 선택 이벤트 > 이벤트 매핑 추가 모달에 이벤트 핸들러를 추가합니다. 모달에 적용할 이벤트 처리기를 선택한 다음, 추가 를 선택하여 페이지에 추가합니다. 상속된 이벤트 처리기 또는 페이지 수준 이벤트 처리기 중에서 선택합니다. 이벤트 핸들러는 모달 열기 또는 닫기와 같은 작업을 수행합니다. 모달 유형에 따라 앱 셸 데이터 소스, GraphQL의 사용자 세션 또는 변환의 사용자 세션에 대한 데이터를 새로 고칠 수 있습니다.
      확인	모달의 제목인 헤더를 추가합니다. 모달에 표시할 컨텐츠를 작성합니다. 컨텐츠는 사용자에게 경보가 무엇인지 알려줍니다. 기본 버튼에 대한 텍스트를 추가합니다. 기본 버튼은 사용자를 위한 기본 작업 버튼입니다(예, 추가 등). 보조 버튼에 대한 텍스트를 추가합니다. 보조 버튼은 일반적으로 취소, 아니요 등과 같이 사용자가 선택할 수 없습니다. 화면에서 모달의 크기를 선택합니다. 작게, 중간, 크게 또는 전체 화면을 선택합니다. 기본 작업에 따라 모달을 닫을지 여부에 따라 기본 버튼 작업 방지를 사용하거나 사용하지 않도록 설정합니다. 기본 작업에 따라 모달을 닫을지 여부에 따라 기본 보조 버튼 작업 방지를 사용하거나 사용하지 않도록 설정합니다. 모달 컨텐츠 로드 연기 사용 또는 사용 안 함. 비활성화하면 모달이 페이지와 함께 로드됩니다. 사용하도록 설정하면 페이지가 로드될 때 모달이 로드되지 않습니다. 선택 이벤트 > 이벤트 매핑 추가 모달에 이벤트 핸들러를 추가합니다. 모달에 적용할 이벤트 핸들러를 선택합니다. 상속된 이벤트 처리기 또는 페이지 수준 이벤트 처리기 중에서 선택합니다. 이벤트 핸들러는 모달 열기 또는 닫기와 같은 작업을 수행합니다. 모달 유형에 따라 앱 셸 데이터 소스, GraphQL의 사용자 세션 또는 변환의 사용자 세션에 대한 데이터를 새로 고칠 수 있습니다.
      확인 또는 삭제	모달의 제목인 헤더를 추가합니다. 모달에 표시할 컨텐츠를 작성합니다. 컨텐츠는 사용자에게 경보가 무엇인지 알려줍니다. 기본 버튼에 대한 텍스트를 추가합니다. 기본은 삭제 또는 지우기와 같은 사용자의 기본 작업 버튼입니다. 보조 버튼에 대한 텍스트를 추가합니다. 보조 버튼은 일반적으로 취소, 아니요 등과 같이 사용자가 선택할 수 없습니다. 화면에서 모달의 크기를 선택합니다. 작게, 중간, 크게 또는 전체 화면을 선택합니다. 기본 작업에 따라 모달을 닫을지 여부에 따라 기본 버튼 작업 방지를 사용하거나 사용하지 않도록 설정합니다. 기본 작업에 따라 모달을 닫을지 여부에 따라 기본 보조 버튼 작업 방지를 사용하거나 사용하지 않도록 설정합니다. 모달 컨텐츠 로드 연기 사용 또는 사용 안 함. 비활성화하면 모달이 페이지와 함께 로드됩니다. 사용하도록 설정하면 페이지가 로드될 때 모달이 로드되지 않습니다. 선택 이벤트 > 이벤트 매핑 추가 모달에 이벤트 핸들러를 추가합니다. 모달에 적용할 이벤트 핸들러를 선택합니다. 상속된 이벤트 처리기 또는 페이지 수준 이벤트 처리기 중에서 선택합니다. 이벤트 핸들러는 모달 열기 또는 닫기와 같은 작업을 수행합니다. 모달 유형에 따라 앱 셸 데이터 소스, GraphQL의 사용자 세션 또는 변환의 사용자 세션에 대한 데이터를 새로 고칠 수 있습니다.
      사용자 지정	모달의 레이아웃을 선택합니다. 플렉스박스 또는 CSS 그리드 레이아웃을 사용할 수 있습니다. 이러한 레이아웃을 사용하면 원하는 대로 모달에 콘텐츠를 추가할 수 있습니다. 스타일 옵션을 사용하여 모달의 모양을 변경합니다. 배경색 및 패딩과 같은 표준 CSS 스타일을 모달에 적용할 수 있습니다. 스타일링에 대한 자세한 내용은 을 참조하십시오 구성요소의 기본 모양 변경. 사용자 지정 모달 내의 컨테이너에 구성요소를 추가합니다. 선택 이벤트 > 이벤트 매핑 추가 모달에 이벤트 핸들러를 추가합니다. 모달에 적용할 이벤트 핸들러를 선택합니다. 상속된 이벤트 처리기 또는 페이지 수준 이벤트 처리기 중에서 선택합니다. 이벤트 핸들러는 모달 열기 또는 닫기와 같은 작업을 수행합니다. 모달 유형에 따라 앱 셸 데이터 소스, GraphQL의 사용자 세션 또는 변환의 사용자 세션에 대한 데이터를 새로 고칠 수 있습니다.
      Iframe	모달의 제목인 헤더를 추가합니다. 기존 iframe 콘텐츠를 가리키는 소스 URL을 추가합니다. iframe으로 만들 매개변수와 초기 데이터를 설정합니다. 화면에서 모달의 크기를 선택합니다. 작게, 중간, 크게 또는 전체 화면을 선택합니다. 샌드박스 사용 안 함을 켜면 allow-forms, allow-modals, allow-popups, allow-presentation, allow-same-origin, allow-scripts 및 allow-downloads 옵션이 해제됩니다. 샌드박스 사용 안 함을 해제하여 allow-scripts 옵션만 해제합니다. 모달 컨텐츠 로드 연기 사용 또는 사용 안 함. 비활성화하면 모달이 페이지와 함께 로드됩니다. 사용하도록 설정하면 페이지가 로드될 때 모달이 로드되지 않습니다. 선택 이벤트 > 이벤트 매핑 추가 모달에 이벤트 핸들러를 추가합니다. 모달에 적용할 이벤트 핸들러를 선택합니다. 상속된 이벤트 처리기 또는 페이지 수준 이벤트 처리기 중에서 선택합니다. 이벤트 핸들러는 모달 열기 또는 닫기와 같은 작업을 수행합니다. 모달 유형에 따라 앱 셸 데이터 소스, GraphQL의 사용자 세션 또는 변환의 사용자 세션에 대한 데이터를 새로 고칠 수 있습니다.
      모달 뷰포트	화면에서 모달의 크기를 선택합니다. 작게, 중간, 크게 또는 전체 화면을 선택합니다. 패딩 숨기기를 활성화하거나 비활성화합니다. 닫기 단추 숨기기를 사용하거나 사용하지 않도록 설정합니다. 사용하도록 설정하면 닫기 버튼이 모달에 표시되지 않습니다. 모달 컨텐츠 로드 연기 사용 또는 사용 안 함. 비활성화하면 모달이 페이지와 함께 로드됩니다. 사용하도록 설정하면 페이지가 로드될 때 모달이 로드되지 않습니다. 선택 이벤트 > 이벤트 매핑 추가 모달에 이벤트 핸들러를 추가합니다. 모달에 적용할 이벤트 핸들러를 선택합니다. 상속된 이벤트 처리기 또는 페이지 수준 이벤트 처리기 중에서 선택합니다. 이벤트 핸들러는 모달 열기 또는 닫기와 같은 작업을 수행합니다. 모달 유형에 따라 앱 셸 데이터 소스, GraphQL의 사용자 세션 또는 변환의 사용자 세션에 대한 데이터를 새로 고칠 수 있습니다. 모달 뷰포트 내에서 뷰포트 구성요소를 선택합니다. 구성 탭에서 + 추가 를 선택하여 뷰포트에 페이지 컬렉션을 추가합니다. 목록에서 페이지 컬렉션을 선택하고 추가를 클릭합니다.

5. 방금 추가한 모달을 트리거하는 구성요소를 페이지에 버튼 구성요소와 같이 추가합니다.
   자세한 내용은 구성요소 추가 및 구성 문서를 참조하십시오.
6. 구성 패널에서 이벤트 탭을 선택합니다.
7. + 이벤트 처리기 추가를 선택합니다.
   
8. 모달 대화 상자 열기 또는 닫기를 선택합니다.
9. 모달 드롭다운을 사용하여 이전 단계에서 생성한 모달을 선택합니다.
10. 추가를 클릭합니다.
    
11. 모달 구성을 마쳤으면 모달을 닫습니다.

    컨텐츠 트리에서 생성하는 모달이 페이지 구조의 본문 위에 있는 것을 볼 수 있습니다.

    
12. 저장을 클릭합니다.