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

データセットの視覚化モード

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

重要

現在、この機能はリリース機能フラグ (LPS-164563) によって保護されています。

データセット内のデータ表示をカスタマイズするには、データセットマネージャーを使用してフィールドを選択し、視覚化モードを管理します。視覚化モードには、テーブル、リスト、およびカードの 3 つがあります。

テーブル視覚化モードを使用すると、任意の数のフィールドを追加およびカスタマイズし、それらのレンダリング方法を選択できます。リストとカードでは、フィールドにマッピングできる要素の数が制限されます。

視覚化モードを設定したら、データセットフラグメントを含むページにアクセスし、 表示オプションの表示を使用して、希望するモードを選択します。

データを表として表示する

テーブル視覚化モードを使用して、フィールドを列に追加、削除、並べ替え、編集、マッピングし、データセットフラグメントにデータをテーブルとして表示します。

テーブル視覚化モードを設定するには、

グローバルメニュー () を開き、 コントロールパネル タブを選択して、オブジェクトの下の データセット をクリックします。
アクセスするデータセットの名前を選択します。

または、データセットエントリの横にある [アクション] () をクリックし、 [編集]を選択します。
可視化モード タブを選択します。
テーブル タブを選択します。
追加 () をクリックしてテーブルにフィールドを追加します。
表示するフィールドを選択します。

1 つ以上のフィールドを選択します。検索バーを使用して特定のフィールドを検索したり、検索バーを空のままにして利用可能なすべてのフィールドを表示したりすることもできます。
[保存]をクリックします。

フィールドを配置したら、左側のドラッグアイコンを使用してフィールドを目的の位置にドラッグアンドドロップすることで、フィールドの順序を変更できます。

フィールドをドラッグアンドドロップして順序を変更します。

視覚化モードへのフィールドの追加

視覚化モードにフィールドを追加する場合、名前でフィールドを手動で追加するか、ツリー構造から使用可能なフィールドを選択できます。追加されたフィールドがデータセットに表示されます。

追加 () をクリックして、フィールドを手動で追加するか、エンドポイントのデータソースを使用して追加するかを選択します。

新しいフィールドを手動で追加するか、生成されたツリー選択から追加するかを選択します。

ツリービューでデータソースを選択する

データソースから割り当てを選択すると、追加できるフィールドを含むツリー構造が表示されます。

（1）構造のレベルを移動し、フィールドの横にあるチェックボックスをクリックして視覚化モードに追加します。グレー表示されているチェックボックスは、選択した視覚化モードではそのフィールドが使用できないことを示します。

（2）または、上部の検索バーを使用することもできます。一致するフィールドのみが表示され、検索クエリに関連するフィールドが強調表示されます。構造全体を再度表示するには、検索フィールドをクリアするか、検索バーの末尾にある x をクリックします。

（3）すべての選択を一度に解除するには、 「すべて選択解除」 をクリックします。

ツリー構造から利用可能なフィールドを選択します。

新しいフィールドを保存してウィンドウを閉じるには、保存をクリックします。追加内容を破棄して閉じるには、右上隅の キャンセル または x をクリックします。

手動でフィールドを追加する

「フィールドを手動で追加」を選択すると、テキスト入力が表示されます。ツリー構造から選択するときに表示されない場合でも、名前で任意のフィールドを追加できます。これにより、オブジェクトフィールドに含まれるフィールド、またはエンドポイントスキーマで宣言されていないフィールドの通常の制限が回避されます。

注

選択したエンドポイントの API と正しいフィールド名をすでに理解している必要があります。フィールド名は入力時に検証されないので、正しく入力してください。

名前を入力してフィールドを手動で追加します。

手動で追加されたフィールドは、データソースから選択されたフィールドと同じように視覚化モードのフィールドに表示されます。適切な配列表記を使用して配列フィールドまたは配列要素を追加したり、 を使用してネストされたフィールドを追加したりすることもできます。 親フィールド名と子フィールド名を区切ります (例: student.studentId)。

配列フィールドの追加

他のフィールドと同様に、配列フィールドを視覚化モードに追加できます。

スカラー配列情報を持つフィールド (例: ブログ投稿に適用されたタグのリスト) は、テーブル視覚化モードでは値がコンマで区切られて表示されます。リスト/カード視覚化モードでは、値は区切りなしで連結されます。
複雑な配列情報 (オブジェクトエントリなど) を持つフィールドは、テーブル視覚化モードではツリービューの任意のレベルで選択できます。リスト/カード視覚化モードでは、子フィールドのみを選択できます。

複雑な配列フィールドでは、名前の後に []* 表記を使用します (例: organizationBriefs[]*)。複雑な配列に属するフィールドは、親フィールドと子フィールド間の [] 表記で識別されます (例: organizationBriefs[]name)。

この表記法は、複雑な配列フィールドと子フィールドを識別するために使用されます。

ヒント

デフォルトのセルレンダラーは、表示されるときに完全な複雑な配列フィールドを JSON オブジェクトに変換します。また、セルレンダラークライアント拡張機能を使用して、フォーマットされていない JSON オブジェクトをよりユーザーフレンドリーな表示に変換することもできます。

テーブル内のフィールドの編集

視覚化モードにフィールドを追加した後、フィールドを編集してラベルを変更およびローカライズしたり、レンダラーを選択したり、並べ替え可能かどうかを定義したりできます。

フィールドを編集するには、フィールドの横にある アクション () をクリックし、編集を選択します。

フィールドのラベルを変更し、ローカライズし、レンダラーを選択し、並べ替え可能としてマークします。

ラベルの編集とローカライズ

フィールドの編集を開始したら、ラベルを変更してローカライズできます (1)。

ラベルフィールドの横にある フラグアイコン をクリックし、言語を選択します。
ラベルフィールド（2）に翻訳したテキストを入力します。

翻訳されたテキストは自動的に保存されます。

フラグの横にあるローカライズステータスラベルが 翻訳済み に変わり、ローカライズが成功したことが示されます。

注

ユーザーがポータルにそれぞれの言語を適用している場合は、ローカライズされたテキストが表示されます。

フィールドのレンダラーの選択

レンダラー（3）は、コンポーネントの表示方法をカスタマイズするための構造化された方法です。生の値を入力すると、レンダラーはそれに対して最も一般的な形式と UI を想定します。

重要

データが正しく表示されるためには、フィールドタイプが選択したレンダラーと互換性がある必要があります。

左下では、ステータス、日付、日時フィールドにデフォルトのレンダラーが適用されています。右側では、ステータス、日付、日時レンダラーがそれぞれのフィールドに適用されます。

レンダラーが適用されていない場合と適用されている場合のステータス、日付、日時フィールド。

フィールドをソート可能として定義する

フィールドが並べ替え可能としてマークされている場合、ユーザーはコンテンツページでデータセットフラグメントを使用しながら要素を並べ替えることができます。

最初は、ユーザーは整数フィールドに基づいてエントリを並べ替えることができます。ただし、並べ替え可能チェックボックスをオフにすると、整数フィールドをフィルターとして使用してエントリを並べ替えることができなくなります (以下を参照)。

データをリストまたはカードで表示する

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

注

リストとカードの視覚化モードは、これらのモードの要素に少なくとも 1 つのフィールドをマップするまで非表示になります。

リストとカードの視覚化モードを使用して、フィールドを視覚化モードの要素 (タイトル、説明、画像、シンボルなど) にマッピングし、データをデータセットフラグメントのリストまたはカードとして表示します。

グローバルメニュー () を開き、 コントロールパネル タブを選択して、オブジェクトの下の データセット をクリックします。
アクセスする データセット の名前をクリックします。

または、データセットエントリの横にある [アクション] () をクリックし、 [編集]を選択することもできます。
可視化モード タブを選択します。
リスト または カード タブを開きます。

両方の視覚化モードは同様に構成されています。唯一の違いはデータの表示方法です。
要素にフィールドを割り当てるには、追加 () をクリックし、追加方法を選択します。

使用可能なフィールドのツリービューから選択するには、 データソースから割り当て をクリックします。 フィールドを手動で割り当てる をクリックしてフィールド名を入力します。

使用可能な要素は、タイトル、説明、画像、シンボルです。画像要素はシンボル要素をオーバーライドするため、そのうちの 1 つだけを割り当てることに注意してください。

ヒント

Symbol要素を使用するには、Clay Icon Referenceのアイコン名に一致する値を持つテキスト型オブジェクト・フィールドを作成する必要があります。

たとえば、ショッピングカートのシンボルを使用する場合は、オブジェクト定義を作成し、テキストフィールドを追加して任意の名前を付け、オブジェクトエントリを作成するときにフィールドに ショッピングカート と入力します。フィールドをシンボル要素に割り当てると、ショッピングカートのシンボルが表示されます。

以下では、同じデータを画像を使用してカードで表示したものと、粘土アイコンをシンボルとして使用してリストとして表示したものを見ることができます。

同じデータで、画像を使用したカード視覚化モードと、粘土アイコンをシンボルとして使用したリスト視覚化モードを使用しています。

デフォルトの視覚化モードの定義

ページ内でデータセットフラグメントが使用されると最初に表示されるデフォルトの視覚化モードを定義できます。

グローバルメニュー () を開き、 コントロールパネル タブを選択して、オブジェクトの下の データセット をクリックします。
アクセスする データセット の名前をクリックします。

または、データセットエントリの横にある [アクション] () をクリックし、 [編集]を選択することもできます。
設定タブを選択します。
デフォルトの視覚化モードを選択します。