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

Liferay DXP 7.4+

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

前提条件

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
   

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

クライアント拡張の検討と修正

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 で、フロントエンドデータセットセルレンダラークライアント拡張機能の主要な構成（ type 、およびエクスポートされたレンダラーがデプロイメント時に配置される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 を定義します。 次に、クライアント拡張機能として使用するために関数をエクスポートします。

注

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にサインインします。 メールアドレス [e-mail] とパスワード testを使用してください。 プロンプトが表示されたら、パスワードを learnに変更します。

Liferay が起動したら、サンプル ワークスペースのクライアント拡張機能のフォルダーから次のコマンドを実行します。

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

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

注

Docker、Liferay PaaS、または Liferay SaaS の外部でセルフホストインスタンスを使用する場合、クライアント拡張機能をデプロイするために使用されるコマンドが変わります。 詳細については、「 Liferayインスタンスへのデプロイ 」を参照してください。

ヒント

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

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

STARTED liferaysamplefdscellrenderer_7.4.13 [1459]

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

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

注

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

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

1. 実行中のLiferayインスタンスで、 アプリケーションメニュー （）→ コントロールパネル → データセットに移動します。

2. 新しいデータ セットを追加するには、 追加 () をクリックします。

3. 新しいデータ セット フォームに次の値を入力します。

   • 名前: ユーザーデータセット

   • REST アプリケーション: /headless-admin-user/v1.0

   • RESTスキーマ: ユーザーアカウント

   • RESTエンドポイント: /v1.0/user-accounts

   

4. 保存をクリックします。

5. ユーザー データ セット をクリックして編集を開始します。

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

6. 可視化モード タブをクリックします。

7. テーブルビューを選択した状態で、 追加 () → データソースから割り当てをクリックします。

8. emailAddress、 familyName、 givenName、および jobTitle フィールドを選択し、 Saveをクリックします。

   

   givenName フィールドと familyName フィールドは、それぞれユーザーの名と姓を表します。

9. familyName 行で、 アクション () → 編集をクリックします。

10. レンダラー ドロップダウン メニューから、 Liferay サンプル フロントエンド データ セット セル レンダラーを選択します。

    

11. 保存をクリックします。

12. givenName 行で、 アクション () → 編集をクリックします。

13. レンダラー ドロップダウン メニューから、 Liferay サンプル フロントエンド データ セット セル レンダラーを選択します。

14. 保存をクリックします。

15. 詳細 タブをクリックし、 保存 をクリックして変更を確認します。

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

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

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

1. アプリケーション メニュー () → コントロール パネル → ユーザーと組織に移動します。

2. 追加 () をクリックします。

3. ユーザー フォームの必須フィールドに次の値を入力します。

   • スクリーンネーム: ジョセフグリーン

   • メールアドレス: [e-mail]

   • 名: ジョセフ

   • 姓: 緑

   • 役職: 開発者

   

4. [保存]をクリックします。

5. 任意のサイトの空白ページに移動します。

6. ページ上部の 編集 () をクリックします。

7. 左側の フラグメントとウィジェット メニューから、 コンテンツ表示 セクションまで下にスクロールし、 データ セット フラグメントをページにドラッグします。

   

8. データ セット フラグメントをクリックします。

9. 右側の設定メニューの「データ セット」フィールドの横にある 追加 () をクリックします。

10. データ セットとして ユーザー データ セット を選択します。

    

11. [保存]をクリックします。

データ セット フラグメントが更新され、ユーザーのデータ セットが表示されます。 新しいユーザーである Joseph Green の姓名は、データ セット セル レンダラー コードによって変更された値を使用して表示されます。

今後の流れ

Liferay でフロントエンド データ セット セル レンダラー クライアント拡張機能を正常に使用できました。 次に、 他の種類のフロントエンドクライアント拡張機能について学習します。

関連トピック

• フロントエンドデータセットセルレンダラーYAMLリファレンス
• Liferayのルックアンドフィールのカスタマイズ
• クライアント拡張との連携