구성요소에 이벤트 바인딩

구성요소에 이벤트 작업을 추가할 수 있도록 내부 UI 빌더 에 데이터 요소를 바인딩합니다.

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

각 구성 요소에는 바인딩되는 특정 이벤트가 있습니다. 예를 들어, 버튼 구성 요소에는 버튼 클릭 이벤트만 있는 반면 다른 구성 요소에는 연결된 여러 이벤트가 있을 수 있습니다.

일부 구성요소에는 적용되는 이벤트 동작이 없습니다. 제목 구성요소를 예로 들 수 있습니다. 많은 구성요소에서는 이벤트를 구성요소에 매핑하여 데이터 로드와 같은 작업을 수행해야 합니다.

페이지의 구성요소, 페이지 및 데이터 자원에 작업을 추가하려면 이벤트 핸들러를 추가하면 됩니다. 페이지에 추가하는 버튼 구성요소는 정적입니다. 이벤트 동작을 버튼에 바인딩하면 웹 페이지에 연결할 수 있습니다.

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI Builder레이블이 표시됩니다.
2. 작업할 환경을 열거나 + 만들기를 선택하여 환경을 만듭니다.
   자세한 내용은 에서 사용자가 애플리케이션과 상호작용하는 방법 구성 UI 빌더 문서를 참조하십시오.
3. 페이지를 만들거나 엽니다.
   에서 페이지를 UI 빌더만드는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 만들기를 참조하십시오.
4. 버튼과 같이 페이지에 바인딩할 수 있는 이벤트가 있는 구성요소를 추가합니다.
   페이지에 구성 요소를 추가하는 방법에 대한 자세한 내용은 을 참조하십시오 구성요소 추가 및 구성.
5. 구성 요소에 이벤트 핸들러를 추가하려면 이벤트 탭을 선택합니다.
   구성 요소에 이벤트 처리기를 추가하는 방법에 대한 자세한 내용은 을 참조하십시오 UI Builder 페이지에서 작업 관리(고급 기능).
   1. 구성 요소에 대한 이벤트 처리기 설정 프로세스를 시작하려면 + 이벤트 매핑 추가를 클릭합니다.
      
   2. 목록에서 구성할 이벤트 매핑을 선택합니다.
      
   3. 이벤트 핸들러 미리 보기 섹션에서 구성요소에 바인딩할 이벤트 핸들러를 선택합니다.
      
   4. 이벤트 처리기를 구성하고 완료되면 추가 를 클릭합니다.
      각 이벤트 처리기는 이벤트의 동작에 따라 다르게 구성합니다. 예를 들어, 버튼 구성요소에 대한 이벤트 핸들러를 추가하면 해당 버튼 동작이 수행하는 작업을 선택할 수 있습니다.
6. 옵션: 이벤트에 대한 모달을 팝업하려면 이벤트를 구성요소에 바인딩하기 전에 페이지에 모달을 추가합니다.
   모달은 구성요소를 클릭할 때 나타나는 확인 팝업입니다. 예를 들어 기록을 삭제하는 버튼 구성요소를 추가하면 사용자에게 기록 삭제를 확인할 것인지 확인하는 모달을 추가합니다. 자세한 내용은 구성요소에 모달 추가 문서를 참조하십시오.
   1. 컨텐츠 트리에서 모달 옆에 있는 + 아이콘을 선택합니다.
      
   2. 확인과 같은 모달 유형을 선택합니다.
      
   3. 모달을 구성합니다.
      모달의 텍스트, 모달의 버튼 이름, 모달 화면의 크기를 변경할 수 있습니다. 모달에 대한 동작을 설정할 수도 있습니다. 모달 구성을 마쳤으면 모달을 닫습니다. 생성한 모달은 컨텐츠 트리에서 페이지 구조의 본문 위에 있습니다.
7. 이벤트를 버튼 구성요소에 바인딩합니다.
   이벤트를 버튼에 바인딩하여 작업을 트리거합니다. 단추 구성요소를 선택하여 컨텐츠 트리 또는 페이지에서 다시 강조 표시합니다.
   1. 컨텐츠 트리에서 + 구성 요소 추가 를 선택합니다.
   2. 도구 상자에서 Button 구성 요소를 선택합니다.
   3. 사전 설정을 선택하라는 메시지가 표시되면 없음 을 선택합니다.
   4. Configuration(구성) 창에서 Events(이벤트)를 클릭합니다.
   5. + 이벤트 처리기 추가를 선택합니다.
      

      버튼 구성 요소에는 버튼 클릭 이벤트만 연결되어 있습니다. 다른 구성요소에는 둘 이상의 이벤트가 있을 수 있습니다.

   6. 구성요소에 할당할 작업을 선택합니다.

      예를 들어 버튼 구성 요소에 대한 이벤트 핸들러를 추가하려면 다른 대상에 연결하고 경고 알림을 추가할 수 있습니다. 이 예제에서는 모달 대화 상자 열기 또는 닫기를 선택하여 버튼이 이전에 만든 모달을 열도록 할 수 있습니다. 이 단추 시나리오에서는 이전에 만든 모달 대화 상자 확인 및 삭제 이벤트 처리기를 선택합니다.

      

   7. 사용자가 버튼 구성요소를 클릭하면 모달이 열리도록 모달 대화 상자 열기 선택기를 켭니다.
   8. 구성요소에 모달 이벤트 핸들러를 추가하려면 추가를 클릭하십시오.
8. 저장을 클릭합니다.
9. 미리 보기를 선택하여 모달을 테스트합니다.
10. 생성한 모달을 트리거하려면 페이지의 버튼을 클릭합니다.