Filter コンポーネントのイベントハンドラーの構成

  • リリースバージョン: Yokohama
  • 更新日 2025年01月30日
  • 所要時間：3分

    • テクニカルダッシュボードで、フィルターコンポーネントの特別なクライアントスクリプトベースのイベントハンドラーを構成して、リストまたはデータの可視化が続くようにします。インラインダッシュボードのフィルターのイベントハンドラーを構成する必要はありません。

    始める前に

    この手順は、次のタスクが完了していることを前提としています。
    1. フィルターコンポーネントと、少なくとも 1 つのデータ可視化またはリストコンポーネントを UI ビルダー ページに追加しました。フィルターは、複数のデータ可視化またはリストに適用できます。
    2. フィルターコンポーネントに対して、ソースとなるフィルターとフィルターするデータ (該当する場合) を設定しました。Filter コンポーネントがリストをフィルタリングする場合は、リストコンポーネントがフィルタリングするデータとして表示するテーブルを指定しておきます。
    3. データ可視化コンポーネントのデータソースを構成しました。
    4. リストコンポーネントのテーブルを指定しました。

    必要なロール：ui_builder_admin、admin

    手順

    1. 関連する UI ビルダー ページを開きます。
      このページはテクニカルダッシュボードの場合があります。
    2. [UI ビルダー ステータス] セクションに移動し、単純なアレイの初期値 [] を持つ JSON タイプの parFilters という名前のステータス変数を追加します。
      詳細については、「 クライアントステータスパラメーターを作成してコンポーネントにバインドする」を参照してください。
      UIB ページに parFilters クライアントステータスパラメーターを追加します。
    3. 初期値 {} を持つ JSON タイプの encodedQueries という名前の 2 番目の状態変数を追加します。
    4. [クライアントスクリプト] セクションに移動し、「Apply PAR Filters」などの名前と、次のコンテンツまたはそれに相当する機能を持つカスタムスクリプトを作成します。 
      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 ビルダーで、Filter コンポーネントを選択します。
    9. 構成パネルで [ イベント ] タブを選択し、作成したページスクリプト (この例では [PAR フィルターの適用] ) をイベントハンドラーとして追加します。

      [PAR フィルターを適用] スクリプトをフィルター適用イベントハンドラーとして追加します。
    10. UI ビルダーで、リストコンポーネントが存在する場合はそれを選択します。
    11. [固定フィルターの編集] を選択し、このプロパティ [fixedQuery] を動的バインディング式 @state.encodedQueries.<list-datasource> として設定します。
      <list-datasource> をリストコンポーネントのデータソースに置き換えます。たとえば、リストにインシデント [incident] テーブルのレコードが表示されている場合は、「 @state.encodedQueries.incident」と入力します。
      リスト構成パネルの固定フィルターフィールドで、fixedQuery プロパティを encodedQueries クライアントステータスパラメーターにバインドします。
    12. 他のリストコンポーネントについても、前の 2 つの手順を繰り返します。
    13. ページを保存します。