ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

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

Liferay DXP 2024.Q2+/ポータル GA120+

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

前提条件

サポートされているバージョンの Javaをインストールします。

注

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

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

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 SaaSにデプロイするには、Liferay Cloud コマンドラインツールを使用して lcp deployを実行します。

ヒント

ワークスペース内のすべてのクライアント拡張機能を同時にデプロイするには、 client-extensions/ フォルダーからコマンドを実行します。

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

STARTED liferaysamplecustomelement1_7.4.13

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

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

ベータ機能

重要

現在、この機能はベータ機能フラグ (LPS-164563) によってサポートされています。

まず環境を設定します。

LPS-164563 ベータ機能フラグを有効にします。
Minium テンプレートを使用してサイトを作成します。

これにより、データセットに表示される製品がデータベースに入力されます。
次の設定を使用してデータセットを作成します。

項目コンテント

名前 Products

REST アプリケーション /headless-commerce-admin-catalog/v1.0

REST スキーマ Product

REST エンドポイント /v1.0/products
Products データセットをクリックして編集を開始します。

または、データセットの横にある アクション () をクリックし、編集 () を選択します。
可視化モード タブを選択します。
追加 () をクリックし、 catalogId、 id、および name フィールドを選択します。

これにより、データセットに表示されるテーブル視覚化モードに 3 つのフィールドが追加されます。
フィルター タブを選択します。
追加 () をクリックし、 クライアント拡張を選択します。次の設定を使用して情報を入力します。

項目コンテント

名前 Filter by Name

次の項目で絞り込む name

クライアント拡張 Liferay Sample FDS Filter

ヒント

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

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

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

データセットをコンテンツページに追加します。

新しいページを作成しますまたは編集を開始します。
左側のフラグメントとウィジェットメニューで、フラグメントの下のデータセットを検索します。フラグメントを編集領域にドラッグアンドドロップします。
フラグメントをクリックします。右側の [全般] タブには、データセットを選択できるフィールドがあります。追加 () をクリックし、製品データセットを選択します。
ページを公開します。

フィルターをテストするには、次のページに移動します。

ページ名の横にある アクション () をクリックし、表示 () を選択します。
フィルター をクリックし、検索バーの下にある 名前でフィルター オプションを選択します。
検索フィールドを選択し、 name eq 'Piston'と入力して、 [送信]をクリックします。

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