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

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

시작하기 전에

이 절차에서는 다음 작업이 완료되었다고 가정합니다.

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

필요한 역할: ui_builder_admin, admin

프로시저

1. 관련 UI 빌더 페이지를 엽니다.
   이 페이지는 기술 대시보드일 수 있습니다.
2. UI 빌더 상태 섹션으로 이동하여 간단한 배열 초기 값 []을 사용하여 JSON 형식의 parFilters라는 상태 변수를 추가합니다.
   자세한 내용은 구성 요소에 클라이언트 상태 매개 변수 만들기 및 바인딩을 참조하세요.
   
   
3. 초기 값이 {}인 JSON 형식의 encodedQueries라는 두 번째 상태 변수를 추가합니다.
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. 클라이언트 스크립트 섹션에서 클라이언트 스크립트 포함 탭을 엽니다.
   
   
   
6. 스크립트 포함 추가 필드에서 mergePARFilters를 선택하고 추가를 클릭합니다.
   
   
   
7. 데이터, 클라이언트 상태 및 클라이언트 스크립트를 구성하기 위한 창을 닫습니다.
8. 에서 UI 빌더필터 구성 요소를 선택합니다.
9. 구성 패널에서 이벤트 탭을 선택하고 만든 페이지 스크립트(이 예에서는 PAR 필터 적용)를 이벤트 핸들러로 추가합니다.
   
   
   
10. 에서 UI 빌더목록 구성요소(있는 경우)를 선택합니다.
11. 고정 필터 편집을 선택하고 이 속성 [fixedQuery]를 동적 바인딩 식 @state.encodedQueries.<list-datasource>로 설정합니다.
    <list-datasource>를 목록 구성요소의 데이터 소스로 바꿉니다. 예를 들어 목록에 인시던트 [incident] 테이블의 기록이 표시되는 경우 @state.encodedQueries.incident를 입력합니다.
    
    
12. 다른 목록 구성요소에 대해 앞의 두 단계를 반복합니다.
13. 페이지를 저장합니다.