필터 구성요소에 대한 이벤트 핸들러 구성

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 2분

    • 기술 대시보드에서 필터 구성요소에 대한 특수 클라이언트 스크립트 기반 이벤트 핸들러를 구성하여 목록 또는 데이터 시각화가 뒤따를 수 있도록 합니다. 인라인 대시보드의 필터에 대한 이벤트 핸들러는 구성할 필요가 없습니다.

    시작하기 전에

    이 절차에서는 다음 작업이 완료되었다고 가정합니다.
    1. 필터 구성요소 UI 빌더 와 하나 이상의 데이터 시각화 또는 목록 구성요소를 페이지에 추가했습니다. 필터는 여러 데이터 시각화 또는 목록에 적용할 수 있습니다.
    2. 필터 구성요소에 대해 소스에 대한 필터와 필터링할 데이터(해당하는 경우)를 구성했습니다. 필터 구성요소가 목록을 필터링해야 하는 경우 목록 구성요소가 필터링할 데이터로 표시하는 테이블을 지정했습니다.
    3. 데이터 시각화 구성요소에 대한 데이터 소스를 구성했습니다.
    4. 목록 구성요소에 대한 테이블을 지정했습니다.

    필요한 역할: ui_builder_admin, admin

    프로시저

    1. 관련 UI 빌더 페이지를 엽니다.
      이 페이지는 기술 대시보드일 수 있습니다.
    2. 상태 섹션으로 이동하여 UI 빌더 간단한 배열 초기 값 []을 사용하여 JSON 유형의 parFilters라는 상태 변수를 추가합니다.
      자세한 내용은 구성 요소에 클라이언트 상태 매개변수 만들기 및 바인딩 섹션을 참조하세요.
      UIB 페이지에 parFilters 클라이언트 상태 매개변수 추가.
    3. 초기 값이 {}인 Object 형식의 encodedQueries라는 두 번째 JSON 상태 변수를 추가합니다.
    4. 클라이언트 스크립트 섹션으로 이동하여 "PAR 필터 적용"과 같은 이름의 사용자 지정 스크립트와 다음 내용 또는 이와 동등한 기능을 생성합니다. 
      function handler({ api, event, helpers, imports }) {
	const mergePARFiltersV2 = imports["global.mergePARFilters"]().v2;
	const { appliedFilters } = event.payload;
	api.setState("parFilters", ({ currentValue, api }) => {
		const { parFilters, encodedQueries } = mergePARFiltersV2(
			currentValue,
			appliedFilters
		);
		api.setState("encodedQueries", encodedQueries);
		return parFilters;
	});
}
    5. 클라이언트 스크립트 섹션에서 클라이언트 스크립트 포함 탭을 엽니다.

      UIB 페이지의 클라이언트 스크립트 창에 있는 클라이언트 스크립트 포함 탭.
    6. 스크립트 포함 추가 필드에서 mergePARFilters를 선택하고 추가를 클릭합니다.

      mergePARFilters 스크립트 포함 추가.
    7. 데이터, 클라이언트 상태 및 클라이언트 스크립트를 구성하기 위한 창을 닫습니다.
    8. UI 빌더에서 필터 구성요소를 선택합니다.
    9. 구성 패널에서 이벤트 탭을 선택하고 만든 페이지 스크립트(예에서는 PAR 필터 적용)를 이벤트 핸들러로 추가합니다.

      PAR 필터 적용 스크립트를 필터 적용 이벤트 핸들러로 추가합니다.
    10. UI 빌더에서 기록 목록 구성요소가 있는 경우 이를 선택합니다.
    11. 구성 패널에서 기록 목록의 프레젠테이션 목록 하위 구성요소를 엽니다.
    12. 데이터 섹션에서 고정 필터 편집을 선택하고 이 속성 [fixedQuery]를 동적 바인딩 표현식 @state.encodedQueries.<list-datasource>로 설정합니다.
      <list-datasource>를 목록 구성요소의 데이터 소스로 바꿉니다. 예를 들어 목록에 인시던트 [incident] 테이블의 기록이 표시되는 경우 @state.encodedQueries.incident를 입력합니다.
      목록 구성 패널의 고정 필터 필드에서 fixedQuery 속성을 encodedQueries 클라이언트 상태 매개변수에 바인딩합니다.
    13. 다른 목록 구성요소에 대해 이전 두 단계를 반복합니다.
    14. 페이지를 저장합니다.