구성요소에 모달 추가

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

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

모달은 클릭되는 단추와 같은 이벤트에 의해 이벤트 핸들러가 트리거될 때 나타나는 화면입니다. 다음 절차에서는 단추 구성 요소에 Confirm 모달 및 연결된 이벤트 처리기를 추가하는 방법의 예를 보여 줍니다.

프로시저

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

      모달 유형	설명
      경보	경보 모달은 구성요소 작업과 관련된 정보를 제공합니다. 예를 들어 사용자가 삭제 버튼을 누르면 삭제 동작을 실행 취소할 수 없음을 사용자에게 알리는 경고 팝업을 표시할 수 있습니다.
      확인	확인 모달은 사용자에게 구성요소 작업을 확인하도록 요청합니다. 예를 들어 사용자가 삭제 버튼을 누르면 데이터 삭제를 확인해야 합니다. 기본 및 보조 버튼 레이블 필드에서 예/취소와 같은 확인 옵션을 선택할 수 있습니다.
      확인 및 삭제	확인 및 삭제 모달은 일반적으로 콘텐츠 삭제 또는 지우기와 관련된 보다 지시문적입니다. 이를 통해 사용자는 작업의 심각성을 알 수 있으며 작업을 계속 진행할지 여부를 묻습니다.
      사용자 지정	사용자 지정 모달은 레이아웃을 사용하여 모달에서 원하는 정보를 완전히 설계할 수 있도록 합니다. 레이아웃은 또한 모달 화면 내에 정보가 있는 위치를 결정합니다. 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. 저장을 클릭합니다.