페이지에 이벤트 바인딩

  • 릴리스 버전: Xanadu
  • 업데이트 날짜 2024년 08월 01일
  • 읽기4분
  • 페이지 이벤트 매핑을 사용하여 데이터 요소를 UI 빌더 바인딩하면 페이지에 이벤트 작업을 추가할 수 있습니다.

    시작하기 전에

    필요한 역할: ui_builder_admin

    이 태스크 정보

    다음 유형의 이벤트를 사용하여 이벤트를 페이지에 바인딩할 수 있습니다.
    • 페이지 이벤트 매핑입니다. 페이지에서 경보 알림을 추가, 제거 또는 삭제합니다.
    • 변형 이벤트 매핑. 페이지 변형에 대한 경보 알림을 추가, 제거 또는 지웁니다.
    • 디스패치된 이벤트입니다. 상위 이벤트 핸들러 뒤에 이벤트를 모델링하는 릴레이된 이벤트 매핑을 생성하려면, 페이지에 대해 디스패치된 이벤트를 생성합니다. 대상 상위 이벤트 핸들러를 선택하여 그 이후의 페이로드 필드를 모델링합니다.
    • 처리된 이벤트. 처리된 이벤트는 노출되어 다른 사용자가 사용할 수 있는 이벤트입니다. 처리된 이벤트를 만든 후에는 다른 사용자가 사용할 수 Page event mappings 있습니다. 수동으로 생성하는 페이로드 필드를 설정하거나 모달 대화 상자 열기 또는 닫기와 같이 처리된 이벤트에 대한 템플릿을 선택할 수도 있습니다.

    프로시저

    1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
    2. 작업할 경험을 열거나 다음을 선택하여 경험을 생성합니다. 작성 > 경험.
    3. 페이지를 열거나 만듭니다.
      에서 UI 빌더페이지를 만드는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 만들기를 참조하십시오.
    4. 콘텐츠 트리에서 페이지 본문을 강조 표시합니다.

      본문은 콘텐츠 트리의 최상위 라인입니다. 전체 페이지를 강조 표시하면 페이지 수준 이벤트를 추가할 수 있습니다.

      콘텐츠 트리의 본문 옵션을 가리키는 화살표입니다.
    5. 구성 패널에서 이벤트 탭을 선택합니다.
      이벤트 탭이 있는 구성 패널입니다.
    6. 다음 방법 중 하나로 이벤트 처리기를 추가합니다.
      이 이벤트 처리기를 추가하려면수행할 일
      페이지 이벤트 매핑 Page ready 소스 이벤트:
      1. 이벤트 처리기 추가를 선택합니다.
      2. 페이지에서 경보 알림을 추가, 제거 또는 지우려면 에서 Page-level event handlers이벤트 핸들러를 선택합니다. 페이지에서 경보 알림을 추가, 제거 또는 지울 수 있습니다.
      3. 페이지에 이벤트 처리기를 추가하려면 추가를 선택합니다.
      Page property changed 소스 이벤트:
      1. 새 이벤트 처리기 추가를 선택합니다.
      2. 에서 Page-level event handlers이벤트 핸들러를 선택합니다. 페이지에서 경보 알림을 추가, 제거 또는 지울 수 있습니다. 사용자가 페이지가 로드되고 있음을 확인할 수 있도록 로드 상태 설정을 선택하여 페이지에 Loading 이라는 단어를 표시할 수도 있습니다. 클라이언트 상태 매개 변수 업데이트를 선택하여 클라이언트 상태 이름을 변경할 수도 있습니다.
      3. 페이지에 이벤트 핸들러를 추가하려면 Add(추가)를 클릭합니다.
      변형 이벤트 매핑 변형 이벤트 매핑

      변형 이벤트 매핑을 수행하려면 변형 페이지가 있어야 합니다. 사용할 수 있는 변형 이벤트 매핑은 변형 페이지에 따라 다릅니다. 변형 페이지에 목록이 있는 경우 클릭한 행, 탐색 항목 등과 같은 항목에 대한 이벤트 핸들러를 추가합니다. 배리언트에 뷰포트가 있는 경우 다른 이벤트 핸들러를 설정해야 할 수 있습니다.

      1. Add event mappings(이벤트 매핑 추가)를 선택합니다. 예를 들어 Row clicked에 대한 새 이벤트 처리기를 추가할 수 있습니다.
      2. 사용 가능한 상속된 이벤트 핸들러 또는 로컬 이벤트 핸들러(예: UXR 앱 셸 데이터 소스) 목록에서 이벤트 핸들러를 선택합니다.
      3. 변형에 이벤트 핸들러를 추가하려면 추가를 선택합니다.

      변형 이벤트 핸들러 옵션입니다.

      • 이러한 이벤트 매핑은 sys_ux_screen 테이블에 있는 변형 기록에 있습니다.
      • 이러한 이벤트 매핑에 대한 소스 이벤트는 페이지에 대해 정의된 디스패치된 이벤트입니다.
      • 이러한 이벤트 매핑에 사용할 수 있는 핸들러는 캔버스 수준 이벤트, UXR 앱 셸 데이터 소스 및 상속된 데이터 자원의 작업입니다.
      • 이러한 이벤트 매핑은 페이지의 구성요소에서 디스패치된 이벤트가 사용자 세션 핸들러까지 릴레이되도록 릴레이로 사용됩니다.
      • 이러한 매핑은 구성요소의 디스패치된 이벤트를 다른 이벤트에 매핑한 경우 페이지 저장에 자동으로 생성됩니다. 예를 들어, 이벤트를 Link to destination 이벤트에 매핑 Button clicked 하면 이벤트를 생성하면 페이지를 저장한 후 이벤트에서 디스패치된 릴레이 이벤트와 변형 이벤트 매핑을 생성합니다.
      디스패치된 이벤트
      1. 디스패치된 이벤트를 선택합니다.
      2. +추가 아이콘을 선택합니다.
      3. Add an event(이벤트 추가) 화면에서 다음 작업을 수행합니다.
        • 이벤트의 레이블을 입력합니다.
        • 대상 상위 이벤트 핸들러를 선택합니다.
      4. 디스패치된 이벤트에 이벤트 핸들러를 추가하려면 Add(추가)를 선택합니다.

        이벤트 대화상자를 만듭니다.

      5. 생성한 새 이벤트 핸들러가 디스패치된 이벤트에 나타납니다. 다음 예제에서는 이벤트 처리기를 Link to destination 추가하는 방법을 보여 줍니다.

        디스패치된 이벤트에 추가된 이벤트 핸들러입니다.

      • 이러한 이벤트는 [sys_ux_event] 테이블에 있습니다. 페이지 정의 레코드에는 [sys_ux_event] 레코드에 대한 참조가 포함되어 있습니다.

      • 이러한 이벤트는 변형 이벤트 매핑의 소스 이벤트 역할을 합니다.

      • 페이지에 대해 디스패치된 이벤트를 새로 만들려면 +아이콘 추가를 선택합니다. . 이벤트 레이블을 구성하여 새 sys_ux_event의 이벤트 이름과 페이로드 필드를 자동으로 채웁니다.

      • 이러한 이벤트는 종종 릴레이 이벤트 매핑을 만드는 데 사용됩니다. 선택한 이벤트 후 페이로드 필드를 모델링하려면 선택할 Target parent event handler 수 있습니다. 디스패치된 이벤트에 대한 페이로드 필드를 수동으로 생성할 수도 있습니다.

      처리된 이벤트
      • 이러한 이벤트는 [sys_ux_event] 테이블에 저장됩니다. 페이지 정의 레코드에는 [sys_ux_event] 레코드에 대한 참조가 포함되어 있습니다.

      • 이러한 이벤트는 페이지 이벤트 매핑의 소스 이벤트 역할을 합니다.

      • 페이지에 대해 디스패치된 이벤트를 새로 만들려면 +아이콘 추가를 선택합니다. . 이러한 이벤트는 부모 이벤트 처리기 이후에 모델링되지 않습니다. 처리된 이벤트에 대한 페이로드 필드는 수동으로 생성됩니다. 기존 핸들러의 페이로드 필드를 템플릿으로 사용하려면 템플릿을 선택하고 필요에 따라 필드를 편집합니다.

    7. 저장을 선택합니다.
    8. 페이지를 미리 보고 설정한 데이터 자원 이벤트를 테스트하려면 미리 보기 버튼을 선택합니다..