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

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

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:
    - 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)

これによりクライアント拡張機能がビルドされ、zipファイルがLiferayの deploy/ フォルダにデプロイされます。

注記

クライアント拡張機能を Liferay SaaS にデプロイするには、Liferay Cloud コマンドラインツール を使用して lcp deploy を実行します。

ヒント

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

Liferayインスタンスのコンソールでデプロイメントを確認してください。

STARTED liferaysamplecustomelement1_7.4.13

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

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

ベータ版機能

重要

現在、この機能は ベータ機能フラグ (LPS-164563) の背後にあります。

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

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

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

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

    Miniumテンプレートをベースにサイトを作成します。

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

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

    商品を表示するためのデータセットを作成します。

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

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

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

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

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

    テーブル表示モードに、catalogId、id、およびnameフィールドを追加します。

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

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

    分野コンテンツ
    名前Filter by Name
    フィルター条件name
    クライアント拡張機能Liferay Sample FDS Filter

    データセットにLiferay Sample FDS Filterクライアント拡張機能を追加します。

    ヒント

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

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

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

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

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

    製品データセットを選択し、データセットフラグメントを使用して表示します。

  4. ページを公開する。

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

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

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

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

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

    ODataクエリを使用して、製品を名前で絞り込みます。

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

Capability:
Development and Tooling
Resource Type:
Official Documentation
Feature:
Frontend Client Extensions
Deployment Approach:
Liferay SaaS
Liferay Self-Hosted