フィルターコンポーネントのイベントハンドラーの構成

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間：3分

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

    始める前に

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

    必要なロール：ui_builder_admin、admin

    手順

    1. 関連する UI ビルダー ページを開きます。
      このページは技術ダッシュボードの場合があります。
    2. [UI ビルダーステータス] セクションに移動し、単純なアレイの初期値 [] を持つ JSON タイプの parFilters という名前のステータス変数を追加します。
      詳細については、「 クライアントステータスパラメーターを作成してコンポーネントにバインドする」を参照してください。
      UIB ページへの parFilters クライアントステータスパラメーターの追加。
    3. 初期値 {} を持つ、オブジェクト型の encodedQueries という名前の 2 番目の 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. 他のリストコンポーネントに対して前の 2 つの手順を繰り返します。
    14. ページを保存します。