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

에서 열기, 닫기 또는 최소화 UI 빌더와 같은 모덜리스 대화 이벤트를 추가하고 구성하는 방법을 알아봅니다. 모덜리스 대화 상자는 페이지 위에 콘텐츠를 포함하는 부동 창입니다.

시작하기 전에

필요한 역할: ui_builder_admin

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI Builder레이블이 표시됩니다.
2. 작업할 환경을 열거나 + 만들기를 선택하여 환경을 만듭니다.
   경험 생성에 대한 자세한 내용은 을 참조하십시오 에서 사용자가 애플리케이션과 상호작용하는 방법 구성 UI 빌더 .
3. 페이지 변형을 열거나 생성합니다.
   에서 페이지를 UI 빌더만드는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 만들기를 참조하십시오.
4. 페이지에 모덜리스 대화 상자를 추가합니다.
   모덜리스 대화 상자를 만드는 방법에 대한 자세한 내용은 을 참조하십시오 페이지에 모덜리스 대화 상자 UI 빌더 추가.
5. 페이지에 버튼과 같은 구성요소를 추가하여 모덜리스 대화 상자에서 작업을 수행합니다.
   모덜리스 대화 상자와 상호 작용하는 단추를 만드는 방법에 대한 자세한 내용은 을 참조하십시오 페이지에 모덜리스 대화 상자 UI 빌더 추가.
6. 컨텐츠 트리 또는 스테이지에서 버튼 구성요소를 선택합니다.
7. 구성 패널에서 Events 탭을 선택합니다.
8. + 이벤트 처리기 추가를 선택합니다.
   
9. 이벤트 핸들러 미리 보기 창에서 버튼에 할당할 동작을 선택합니다.
   5개의 모덜리스 대화 상자 이벤트 처리기를 사용할 수 있습니다.

   

   주:

   이벤트 핸들러의 경우, 스크립트 편집기에서 작업하려면 모드 드롭다운에서 스크립트를 선택합니다.

   모덜리스 대화 상자 이벤트 처리기를 추가하려면	수행 방법
   모드리스 대화 상자 열기	모덜리스 대화 상자를 엽니다. 예를 들어 이메일 작성이라는 단추를 추가하고 이메일 작성기(미니) 구성 요소가 포함된 모덜리스 대화 상자를 열도록 단추를 구성합니다. 제목: 모덜리스 대화 상자의 제목을 입력합니다. 최소화된 제목: 사용자가 페이지에서 최소화된 대화 상자 드롭다운 아이콘을 선택할 때 표시되는 제목을 입력합니다. 범주: 모덜리스 대화 상자를 그룹화할 범주 이름을 입력합니다. 모덜리스 대화 상자: 열려는 모덜리스 대화 상자를 선택합니다. 단일 인스턴스: 사용자가 모덜리스 대화 상자의 인스턴스를 하나만 열 수 있도록 하려면 이 옵션을 선택합니다. 사용자가 모덜리스 대화 상자의 여러 인스턴스를 열 수 있도록 하려면 이 옵션을 선택하지 않은 상태로 둡니다. 예를 들어 단추가 이메일 작성기(mini) 구성 요소가 포함된 모덜리스 대화 상자를 열고 단일 인스턴스 옵션을 선택하지 않으면 사용자는 여러 모덜리스 대화 상자 창을 열어 이메일 메시지를 작성할 수 있습니다. 모덜리스 대화 상자 인스턴스 ID: 단일 인스턴스 옵션을 선택하는 경우 클릭 시 열어야 하는 모덜리스 대화 상자 인스턴스 ID를 지정합니다. 마우스를 필드 위로 이동하고 데이터 바인딩 아이콘을 선택합니다. 데이터 형식에서 모드리스 대화 상자를 선택합니다. instanceID 알약을 맨 위 섹션으로 끌어다 놓고 적용을 선택합니다. 트리거 시기 (고급 옵션): 구성 요소(이 예에서는 단추)가 항상 모덜리스 대화 상자를 열도록 하려면 항상을 선택합니다. 조건 부를 선택하여 이벤트 핸들러 조건을 추가합니다. 이벤트 처리기 조건에 대한 자세한 내용은 을 참조하십시오 구성요소 수식 편집기에서 UI 빌더 지원되는 함수.
   모드리스 대화 상자 닫기	모덜리스 대화 상자를 닫습니다. 모덜리스 대화 상자 창 외부에서 모덜리스 대화 상자를 닫도록 단추와 같은 구성 요소를 구성하려면 이 옵션을 사용합니다. 모덜리스 대화 상자 인스턴스 ID: 클릭 시 닫아야 하는 모덜리스 대화 상자 인스턴스 ID를 지정합니다. 트리거 시기 (고급 옵션): 구성 요소(이 예에서는 단추)가 항상 모덜리스 대화 상자를 닫도록 하려면 항상을 선택합니다. 조건 부를 선택하여 이벤트 핸들러 조건을 추가합니다. 이벤트 처리기 조건에 대한 자세한 내용은 을 참조하십시오 구성요소 수식 편집기에서 UI 빌더 지원되는 함수.
   모드리스 대화 상자 최소화	열린 모덜리스 대화 상자를 최소화합니다. 모덜리스 대화 상자 창 외부에서 모덜리스 대화 상자를 최소화하도록 단추와 같은 구성 요소를 구성하려면 이 옵션을 사용합니다. 모덜리스 대화 상자 인스턴스 ID: 클릭 시 최소화해야 하는 모덜리스 대화 상자 인스턴스 ID를 지정합니다. 트리거 시기 (고급 옵션): 구성 요소(이 예에서는 단추)가 항상 모덜리스 대화 상자를 최소화하도록 하려면 항상을 선택합니다. 조건 부를 선택하여 이벤트 핸들러 조건을 추가합니다. 이벤트 처리기 조건에 대한 자세한 내용은 을 참조하십시오 구성요소 수식 편집기에서 UI 빌더 지원되는 함수.
   모드리스 대화 상자 업데이트	모덜리스 대화 상자에서 지정된 필드를 업데이트합니다. 예를 들어 모덜리스 대화 상자의 바닥글에 제목 업데이트라는 단추를 추가하고 모덜리스 대화 상자에서 구성 요소의 제목을 업데이트하도록 단추를 구성합니다. 제목: 단추를 선택할 때 추가해야 하는 모덜리스 대화 상자에 대한 새 제목 텍스트를 입력합니다. 최소화된 제목: 단추를 선택할 때 추가해야 하는 최소화된 새 제목 텍스트를 입력합니다. 범주: 단추를 선택할 때 추가해야 하는 새 범주 이름을 입력합니다. 모덜리스 대화 상자: 업데이트할 모덜리스 대화 상자를 선택합니다. 모덜리스 대화 상자 인스턴스 ID: 클릭 시 업데이트해야 하는 모덜리스 대화 상자 인스턴스 ID를 지정합니다. 더티 여부: 모덜리스 대화 상자를 더티로 표시하려면 이 옵션을 선택합니다. 트리거 시기 (고급 옵션): 구성 요소(이 예에서는 단추)가 모덜리스 대화 상자를 항상 업데이트하도록 하려면 항상을 선택합니다. 조건 부를 선택하여 이벤트 핸들러 조건을 추가합니다. 이벤트 처리기 조건에 대한 자세한 내용은 을 참조하십시오 구성요소 수식 편집기에서 UI 빌더 지원되는 함수.
   더티 모드리스 대화 상자	모덜리스 대화 상자를 더티로 표시합니다. 모덜리스 대화 상자 인스턴스 ID에서 더티로 표시할 모덜리스 대화 상자 인스턴스 ID를 지정합니다. 트리거 시기 (고급 옵션): 구성 요소(이 예에서는 버튼)가 항상 더티로 표시되도록 하려면 항상을 선택합니다. 조건 부를 선택하여 이벤트 핸들러 조건을 추가합니다. 이벤트 처리기 조건에 대한 자세한 내용은 을 참조하십시오 구성요소 수식 편집기에서 UI 빌더 지원되는 함수.

10. 추가를 선택합니다.

결과

구성된 이벤트 핸들러가 구성요소의 구성 패널 Events 탭에 표시됩니다.