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

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

Liferay 7.4以降

フロントエンドデータセット (FDS) セルレンダラークライアント拡張機能を使用して、データセットの表示をカスタマイズできます。このタイプを使用すると、データセット内の情報を処理し、表示用に別途デプロイされた関数で表示できます。

注記

テーブルビューのセルのみが、セルレンダラークライアント拡張機能で完全に設定可能です。

サンプルワークスペースからクライアント拡張機能を開始します。

前提条件

サポートされているバージョンの 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

これで、最初のフロントエンドデータセットセルレンダラークライアント拡張機能をデプロイするためのツールが揃いました。

クライアント拡張機能を検査および変更する

FDSセルレンダラークライアント拡張機能は、サンプルワークスペースの client-extensions/liferay-sample-fds-cell-renderer/ フォルダにあります。 client-extension.yaml ファイルに定義されています。

liferay-sample-fds-cell-renderer:
    name: Liferay Sample Frontend Data Set Cell Renderer
    type: fdsCellRenderer
    url: index.*.js

クライアント拡張機能には、ID liferay-sample-fds-cell-renderer があり、 タイプ や、デプロイ時にエクスポートされたレンダラーが配置される URL など、フロントエンドデータセットセルレンダラークライアント拡張機能のキー構成が含まれています。利用可能なプロパティの詳細については、 YAML 設定リファレンスを参照してください。

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

assemble:
    - from: build/static
      into: static

これは、 build/static/ フォルダーで作成されたすべてのファイルが、ビルドされたクライアント拡張機能 .zip ファイルに静的リソースとして含まれる必要があることを指定します。付属の tsconfig.json および webpack.config.js ファイルには、クライアント拡張機能のエントリポイント src/index.ts から build/static/ フォルダーに JavaScript をビルドするための定型構成が含まれています。

index.ts ファイルには、次の JavaScript コードが含まれています。

const fdsCellRenderer: FDSTableCellHTMLElementBuilder = ({itemData, value}) => {
    const element = document.createElement('div');

    element.innerHTML =
        value === 'Green' ? '🍏' : `${itemData.title} is ${value.toString()}`;

    return element;
};

export default fdsCellRenderer;

これは、データセットセルのデータ(値)を取得し、その値に応じてinnerHTMLプロパティを設定する関数fdsCellRendererを定義しています：既存の(文字列)値と連結されたタイトルセルのデータ、または値がGreenの場合は緑色のリンゴのアイコン(ፏ)のいずれかです。そして、その関数をクライアント拡張機能として使用できるようにエクスポートします。

注記

itemData 属性は、Liferay DXP 2025.Q3 以降でのみ利用可能です。このコード例では、行全体のすべてのセルのデータへのアクセスが許可されます。たとえば、 タイトル セルの値などです。

innerHTML プロパティが設定される前の行に、 Joseph という値を持つ任意の値をニックネーム Joe に短縮するコードを追加します。

if (value === 'Joseph')
{
    value = 'Joe';
}

次の行で、 itemData.title の値を、代わりに itemData.jobTitleに変更し、「is」という単語をコロン (: ) に置き換えます。

element.innerHTML =
    value === 'Green' ? '🍏' : `${itemData.jobTitle}: ${value.toString()}`;

次に、クライアント拡張機能をデプロイします。

データセットセルレンダラーをデプロイする

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/ フォルダにデプロイされます。

注記

クライアント拡張機能をデプロイするために使用するコマンドは、Docker、Liferay PaaS、またはLiferay SaaS以外の自己ホスト型インスタンスを使用する場合に変更されます。詳細については、 Liferayインスタンスへのデプロイを参照してください。

ヒント

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

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

STARTED liferaysamplefdscellrenderer_7.4.13 [1459]

カスタムデータセットセルレンダラーがデプロイされたので、それを使用するデータセットを作成してデータを入力します。

ユーザーのデータセットを作成する

注記

現在、フロントエンドデータセットセルレンダラークライアント拡張機能は、ベータ機能フラグの背後にあります。この機能を使用するには、事前にその機能フラグを有効にする必要があります。

クライアント拡張機能を使用してセルをレンダリングするデータセットを作成します。

実行中の Liferay インスタンスで、 アプリケーションメニュー () → コントロールパネル → データセット に移動します。
をクリックして () を追加し、新しいデータセットを追加します。
新しいデータセットのフォームに以下の値を入力してください。
- 名前: ユーザーデータセット
- RESTアプリケーション: /headless-admin-user/v1.0
- RESTスキーマ: UserAccount
- RESTエンドポイント: /v1.0/user-accounts
をクリックして保存します。
ユーザーデータセット をクリックして編集を開始します。

または、データセットエントリの横にある アクション () をクリックし、編集を選択します。
表示モード タブをクリックします。
テーブルビューを選択した状態で、追加 () → データソースから割り当て をクリックします。
emailAddress、 familyName、 givenName、および jobTitle フィールドを選択し、保存をクリックします。

givenName と familyName フィールドは、それぞれユーザーの名と姓を表します。
familyName の行で、 Actions () → Edit をクリックします。
Renderer ドロップダウンメニューから Liferay Sample Frontend Data Set Cell Renderer を選択します。
をクリックして保存します。
givenName の行で、 Actions () → Edit をクリックします。
Renderer ドロップダウンメニューから Liferay Sample Frontend Data Set Cell Renderer を選択します。
をクリックして保存します。
詳細タブをクリックし、保存をクリックして変更を確定します。

これで、データセットは新しいクライアント拡張機能を使用して、ユーザーの姓と名を表示するようになりました。

データセットをページに表示する

次に、データセットに表示するユーザーを追加します。

アプリケーションメニュー () → コントロールパネル → ユーザーと組織 に移動します。
をクリックして （を追加）します。
ユーザーフォームの必須項目に以下の値を入力してください。
- スクリーンネーム: josephgreen
- メールアドレス: josephgreen@liferay.com
- 名: ジョセフ
- 姓: グリーン
- 職種: 開発者
をクリックして保存します。
任意のサイトで空白ページに移動します。
ページ上部の編集 () をクリックします。
左側の フラグメントとウィジェット メニューから、 コンテンツ表示 セクションまでスクロールし、 データセット フラグメントをページにドラッグします。
データセット フラグメントをクリックします。
右側の設定メニューにある「データセット」フィールドの横にある「追加（）」をクリックします。
データセットとして、 ユーザーデータセット を選択します。
をクリックして保存します。