구성요소에 이벤트 바인딩

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

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

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

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

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

프로시저

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

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

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

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

      

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