フロントエンドデータセットフィルタクライアント拡張機能の使用

Liferay DXP 2024.Q2+/Portal GA120+

フロントエンドのデータセットフィルタクライアント拡張機能は、カスタマイズ可能なフィルタインターフェースを作成するためのJavaScript関数を定義します。 これらのエクステンションをデータセットに追加し、カスタマイズされたフィルタリング機能を提供することで、ユーザーエクスペリエンスを向上させます。

前提条件

1. サポートされているバージョンの Java をインストールしてください。

   注

   サポートされているJDK、データベース、環境については、互換性マトリックスを確認してください。 推奨される JVM 設定については、 JVM 構成 を参照してください。

2. サンプルワークスペースをダウンロードし、解凍します。

   curl -o com.liferay.sample.workspace-latest.zip https://repository.liferay.com/nexus/service/local/artifact/maven/content\?r\=liferay-public-releases\&g\=com.liferay.workspace\&a\=com.liferay.sample.workspace\&\v\=LATEST\&p\=zip
   

   unzip com.liferay.sample.workspace-latest.zip
   

これで、クライアント拡張機能を介して最初のカスタムフィルターをデプロイするためのツールが揃いました。

カスタムフィルターの確認と変更

フロントエンドデータセットフィルタクライアント拡張機能は、サンプルワークスペースの client-extensions/liferay-sample-fds-filter/ フォルダにあります。 client-extension.yaml ファイルに定義されています。

liferay-sample-fds-filter:
    name: Liferay Sample FDS Filter
    type: fdsFilter
    url: index.*.js

クライアント拡張機能には、ID liferay-sample-fds-filter が付与されており、JavaScript リソースファイルの場所を定義するプロパティ type および url を含む、カスタム要素クライアント拡張機能のキー構成が含まれています。

また、assembleブロックが含まれています。

assemble:
    - from: build/static
      into: static

これは、 build/static フォルダー内のすべてのものが、ビルドされたクライアント拡張機能 .zip ファイルに静的リソースとして含まれる必要があることを指定します。 クライアント拡張機能内のJavaScriptファイルは、Liferayでは静的リソースとして使用されます。

コードを理解する

src/index.ts ファイルでは、カスタマイズ可能なフィルタ インターフェイスを提供する 3 つの主要な JavaScript 関数が定義されています。 descriptionBuilder、 htmlElementBuilder、および oDataQueryBuilderです。これらはそれぞれ、フィルタの状態を記述し、フィルタの UI をレンダリングし、OData クエリを構築する役割を担います。

descriptionBuilder() 関数は、フィルタの内部状態 (selectedData) を受け取り、人間が読める文字列として返します。 ここでは、ユーザーが入力したODataクエリ文字列が返されます。

function descriptionBuilder(selectedData: FilterData): string {
	return selectedData;
}

htmlElementBuilder() 関数は、フィルターを設定する際にユーザーに表示される UI をレンダリングします。 ODataクエリ文字列用の入力フィールド、送信ボタンを作成し、 setFilter コールバックを使用してフィルターの状態を更新するイベントハンドラーをボタンにアタッチします。

これは div 要素を作成し、クラス名 dropdown-itemを割り当て、入力フィールドとボタンをこの div に追加し、最後に div を返します。

	const div = document.createElement('div');
	div.className = 'dropdown-item';

	div.appendChild(input);
	div.appendChild(button);

	return div;

oDataQueryBuilder() 関数は、フィルタの内部状態 (selectedData) を受け取り、データセットをフィルタリングするための OData クエリ文字列として返します。

function oDataQueryBuilder(selectedData: FilterData): string {
	return selectedData;
}

次に、上記で定義された 3 つの主要機能を組み込んだ FDSFilter インターフェースを実装するオブジェクト fdsFilter が作成されます。 そして、このオブジェクトはモジュールのデフォルトエクスポートとしてエクスポートされます。

const fdsFilter: FDSFilter<FilterData> = {
	descriptionBuilder,
	htmlElementBuilder,
	oDataQueryBuilder,
};

export default fdsFilter;

それでは、クライアント拡張機能をデプロイしてください。

カスタム要素クライアント拡張機能をLiferayにデプロイする

新しいLiferay インスタンスを起動し、以下を実行します。

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.132-ga132

http://localhost:8080 で Liferay にサインインしてください。 メールアドレス test@liferay.com とパスワード test を使用してください。 プロンプトが表示されたら、パスワードを learnに変更します。

Liferayが起動したら、サンプルワークスペース内のクライアント拡張機能のフォルダから以下のコマンドを実行してください。

../../gradlew clean deploy -Ddeploy.docker.container.id=$(docker ps -lq)

これにより、クライアント拡張が構築され、Liferayのdeploy/フォルダにzipをデプロイします。

Liferayインスタンスのコンソールでデプロイメントを確認します。

STARTED liferaysamplecustomelement1_7.4.13

クライアント拡張機能がデプロイされたので、フィルターが正しく機能しているかどうかを確認してください。

データセットにカスタムフィルターを追加する

ベータ機能

まずは環境設定から始めましょう。

1. LPS-164563 ベータ機能フラグ を有効にします。

2. Miniumテンプレートを使用してサイトを作成します。

   これにより、データセットに表示する製品がデータベースに登録されます。

   

3. これらの設定を使用してデータセット を作成します。

   項目	コンテント
   名前	Products
   REST アプリケーション	/headless-commerce-admin-catalog/v1.0
   REST スキーマ	Product
   REST エンドポイント	/v1.0/products

   

4. 製品 データセットをクリックして編集を開始します。

   または、データセットの横にある アクション （）をクリックし、 編集 （）を選択します。

5. 表示モード タブを選択します。

6. 追加 () をクリックし、 catalogId、 id、および name フィールドを選択します。

   これにより、データセットに表示されるテーブル表示モードに3つのフィールドが追加されます。

   

7. フィルター タブを選択します。

8. 追加 () をクリックし、 クライアント拡張機能 を選択します。 以下の設定を使用して情報を入力してください。

   項目	コンテント
   名前	Filter by Name
   次の項目で絞り込む	name
   クライアント拡張	Liferay Sample FDS Filter

   

   ヒント

   フィルターが異なるフィルター条件フィールド間で正しく機能するようにするには、フロントエンドのデータセットフィルタークライアント拡張機能を、さまざまなフィールド名を動的に処理できるようにコーディングする必要があります。 「フィルター条件」で選択されたフィールドはコードからアクセスできるため、フィルターを汎用的に適用でき、フィールドごとに個別のクライアント拡張機能を作成する必要がなくなります。

データセットをコンテンツページに追加する：

1. 新しいページを作成する または 編集を開始する 1 つ。

2. 左側の「フラグメントとウィジェット」メニューで、「フラグメント」の下にある「データセット」を検索します。 フラグメントを編集領域にドラッグ＆ドロップしてください。

3. フラグメントをクリックしてください。 右側の「一般」タブには、データセットを選択できるフィールドがあります。 追加 () をクリックし、 製品 データセットを選択します。

   

4. ページを公開する。

フィルターをテストするページに移動してください。

1. ページ名の横にある アクション () をクリックし、 表示 ( ) を選択します。

2. フィルター をクリックし、検索バーの下にある 名前でフィルター オプションを選択します。

3. 検索フィールドを選択し、 name eq 'Piston'と入力して、 送信 をクリックします。

   この表には、 ピストン という名前の製品のみが表示されます。

   

Liferayにフロントエンドデータセットフィルタクライアント拡張機能を正常にデプロイし、使用できるようになりました。 次に、データセットアクション を使用して を試して、データセットをさらにカスタマイズします。

関連トピック

• 外部アプリケーションの統合
• クライアント拡張機能UIリファレンス
• データセットの管理
• データセットフィルター