구성요소에 이벤트 바인딩

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

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

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

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

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

프로시저

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

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

   6. 버튼에 할당할 핸들러를 선택합니다.

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

      

   7. 계속을 선택합니다.
   8. 드롭다운에서 모달을 선택합니다.
   9. 추가를 선택하여 단추 구성 요소에 모달 이벤트 처리기를 추가합니다.
8. 저장을 클릭합니다.
9. 미리 보기를 선택하여 모달을 테스트합니다.
10. 생성한 모달을 트리거하려면 페이지에서 버튼을 클릭합니다.