구성요소에 모달 추가

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

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

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

프로시저

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

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

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

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

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

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

    컨텐츠 트리에서 생성한 모달이 페이지 구조의 본문 위에 위치합니다.

    
12. 저장을 클릭합니다.