의 이벤트 페이로드 UI 빌더

  • 릴리스 버전: Yokohama
  • 업데이트 날짜 2025년 01월 30일
  • 읽기2분
  • 이벤트 페이로드를 사용하여 데이터를 작업에 연결합니다.

    이벤트 페이로드는 선택한 이벤트가 트리거될 때 구성요소에서 보내는 데이터 조각입니다. 이벤트에서 보낸 데이터에는 이벤트 유형, 타임스탬프, 사용자 작업 또는 SysID와 같은 자원 데이터가 포함될 수 있습니다. 의 UI 빌더 이벤트 페이로드를 사용하여 페이지의 구성요소 간에 정보를 공유할 수 있습니다.

    이벤트 핸들러를 구성할 때 이 페이로드 데이터를 사용하여 결과 상호 작용을 내보낸 데이터에 연결할 수 있습니다. 예를 들어 SysID를 페이지의 다른 구성요소에 전달하여 지정된 기록과 관련된 정보를 표시할 수 있습니다.

    선택한 구성요소에 사용 가능한 이벤트 페이로드가 포함된 빨간색 상자입니다.

    각 구성요소와 이벤트에는 고유한 페이로드 옵션 세트가 있습니다. 이벤트 페이로드가 각 구성요소에 대해 제대로 정의되지 않을 수 있습니다. 이 경우에는 콘솔이 console.log(event.payload)와 같은 페이로드를 기록하도록 클라이언트 스크립트를 정의합니다.

    페이로드로 이벤트를 생성하여 구성 요소 간에 정보를 공유합니다.

    UI 빌더 이벤트 페이로드를 사용하여 페이지의 구성요소 간에 정보를 공유합니다.

    시작하기 전에

    필요한 역할: ui_builder_admin

    프로시저

    1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
    2. 를 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성 > 경험.
    3. 페이지를 만들거나 엽니다.
      에서 UI 빌더페이지를 생성하는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 생성 단원을 참조하십시오.
    4. 데이터 시각화 구성요소와 같이 이벤트가 있는 구성요소를 추가합니다.
      페이지에 구성요소를 추가하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오 구성요소 추가 및 구성.
    5. 구성요소에 이벤트 핸들러를 추가하려면 이벤트 탭을 선택합니다.
      구성 요소에 이벤트 처리기를 추가하는 방법에 대한 자세한 내용은 을 참조하십시오 UI 빌더 페이지에서 작업 관리.
      1. 구성요소에 대한 이벤트 핸들러를 설정하는 프로세스를 시작하려면 이벤트 매핑 추가를 클릭합니다.
        이벤트 매핑 추가 옵션을 가리키는 화살표입니다.
      2. 목록에서 구성하려는 이벤트 매핑을 선택합니다.
        데이터 시각화 구성요소에 사용할 수 있는 이벤트 매핑 목록입니다.
      3. 계속을 선택합니다.
      4. 이벤트 핸들러 미리 보기 섹션에서 구성요소에 바인딩할 이벤트 핸들러를 선택합니다.
        목록에서 행을 클릭하면 경보 알림을 지웁니다. 목록에서 선택한 클라이언트 상태 매개변수 핸들러를 업데이트합니다.
      5. 계속을 선택합니다.
      6. Client State Parameter Name(클라이언트 상태 매개변수 이름) 드롭다운에서 Create a new client state(새 클라이언트 상태 매개변수 생성) 드롭다운을 선택합니다.
      7. 이름 필드에 이름을 입력합니다.
      8. 유형 드롭다운에서 클라이언트 상태 매개변수 유형을 선택합니다.
      9. 초기 값 필드에 값을 입력합니다.
      10. 이벤트 필드 트리거 후 사용할 값에서 데이터 바인딩 아이콘을 선택합니다.
        이벤트 트리거 후 사용할 값 필드의 데이터 바인딩 아이콘을 가리키는 화살표입니다.
      11. 트리거된 이벤트에 바인딩할 값을 선택합니다.
        데이터 모달 바인딩
      12. 적용을 선택합니다.
      13. 추가를 선택합니다.
        데이터 핸들러는 이벤트 탭의 이벤트 매핑 아래에 나타납니다.

        데이터 시각화 구성요소에 대해 구성된 이벤트 핸들러를 가리키는 화살표입니다.

    6. 클라이언트 상태 매개변수를 바인딩할 구성요소를 선택합니다. 이 예에서는 제목 구성요소를 사용합니다.
    7. 클라이언트 상태 매개변수를 바인딩하려는 필드에서 데이터 바인딩 아이콘을 선택합니다.
      제목 구성요소의 레이블 필드에 있는 바인딩 데이터 아이콘을 가리키는 화살표입니다.
    8. 클라이언트 상태를 선택합니다.
    9. 바인딩하려는 클라이언트 상태 매개변수 옆에 있는 화살표를 선택합니다.
      클라이언트 상태 매개변수를 레이블 필드에 바인딩하는 화살표를 가리키는 화살표입니다.
    10. 적용을 선택합니다.
    11. 저장을 선택합니다.
    12. 미리 보기를 선택하여 방금 구성한 이벤트인지 테스트합니다.