이벤트를 페이지에 바인딩

  • 릴리스 버전: Zurich
  • 업데이트 날짜 2025년 07월 31일
  • 소요 시간: 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를 선택합니다. 페이지에서 경보 알림을 추가, 제거 또는 지울 수 있습니다. 사용자가 페이지가 로드되고 있음을 볼 수 있도록 로 딩 상태 설정을 선택하여 페이지에 로딩이라는 단어를 표시할 수도 있습니다. 클라이언트 상태 매개변수 업데이트를 선택하여 클라이언트 상태 이름을 변경할 수도 있습니다.
      3. 페이지에 이벤트 핸들러를 추가하려면 추가를 클릭합니다.
      변형 이벤트 매핑 변형 이벤트 매핑

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

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

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

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

        이벤트 대화 상자를 생성합니다.

      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. 페이지를 미리 보고 설정한 데이터 자원 이벤트를 테스트하려면 미리 보기 버튼을 선택합니다.