フラグメント設定タイプのリファレンス
フラグメントで使用可能な構成タイプを以下に示します。 フラグメントを構成可能にする方法の詳細については、 フラグメントへの構成オプションの追加 を参照してください。
以下は実装できる構成可能なフラグメントタイプです。
textselectcheckboxcolorPicker(Liferay 7.4+ で利用可能)長さ(Liferay 7.4+ U44/GA44 で利用可能)itemSelectorurl(Liferay 7.4以降で利用可能)videoSelector（Liferay 7.4+で使用可能）collectionSelectorcolorPalettenavigationMenuSelector(Liferay 7.4以降で利用可能)
FreeMarker コンテキストに挿入された構成値は、JSON ファイルで指定された定義済みの データ型 値を尊重します。 例えば、 dataType が Stringの場合、 configuration.[name-value]?is_string は true となります。
テキスト設定
このJSON設定は、テキストを手動で追加するための入力テキストフィールドを作成します。
{
"fieldSets": [
{
"fields": [
{
"name": "buttonText",
"label": "Button Text",
"description": "button-text",
"type": "text",
"typeOptions": {
"placeholder": "Placeholder"
},
"dataType": "string",
"defaultValue": "Go Somewhere"
}
]
}
]
}
選択設定
このJSON設定は、定義済みのオプションを選択するためのセレクターを作成します。
{
"fieldSets": [
{
"fields": [
{
"name": "numberOfFeatures",
"label": "Number Of Features",
"description": "number-of-features",
"type": "select",
"dataType": "int",
"typeOptions": {
"validValues": [
{"value": "1"},
{"value": "2"},
{"value": "3"}
]
},
"defaultValue": "3"
}
]
}
]
}
チェックボックスの設定
このJSON設定では、ブール値を選択するためのチェックボックスを作成します。
{
"fieldSets": [
{
"fields": [
{
"name": "hideBody",
"label": "Hide Body",
"description": "hide-body",
"type": "checkbox",
"defaultValue": false
}
]
}
]
}
カラーピッカーの設定
Liferay DXP 7.4+
カラーピッカーのJSON設定により、任意の色を選択できる柔軟なカラーセレクターが作成されます。 色を選択するには、以下の方法を使用できます。
-
左側の色をクリックして、カラーピッカーから色を選択してください。
-
色の16進コードをテキストボックスに入力します。
-
スタイルブックの値 をクリックすると、現在の スタイルブック で定義されている定義済みの色のメニューが開きます。 これにより、ボタンをもう一度押してリンクを解除するまで、フィールドの値が選択されたトークンにリンクされます。 トークン値のリンクを解除すると、選択した色が再び同等の16進コード値に変換されます。
-
カラーピッカーにデフォルト値が定義されていない場合は、 デフォルト ドロップダウンメニューをクリックして、現在のスタイルブックから任意の色を選択してください。 これは、値を選択する際の［スタイルブックの値］ボタンと同じように機能します。
使用しているテーマにスタイルブックのトークン定義がない場合、ページ上のカラーピッカーの設定はカラーパレットの設定に置き換えられます。
このJSON設定は、headingColorというカラーピッカーフィールドを作成します。
{
"fieldSets": [
{
"fields": [
{
"name": "headingColor",
"label": "Heading Color",
"description": "heading-color",
"type": "colorPicker",
"defaultValue": "#FF0000"
}
]
}
]
}
colorPickerタイプは、設定された名前で選択されたカラー値を保持するオブジェクトを格納します。 フラグメントのHTMLでこのオブジェクトを参照する方法は次のとおりです。
<div class="fragment_69">
<h1 style="color: ${configuration.headingColor}">
This text's color is configurable.
</h1>
</div>
フラグメントがレンダリングされると、選択された色がトークン ${configuration.OBJECT_NAME} を置き換えます。 値のタイプは、色の選択方法によって異なります。
- 色を直接選んだ場合は、対応する16進コードの値に置き換わります。
- 現在のスタイルブックから色を選択した場合、リンク先のトークンのCSS変数（例えば、
var(--danger)）に置き換えられます。 - 現在のテーマに使用できるトークン定義がない場合（そのため、 カラーパレット が代わりに使用されます）、CSS カラーに置き換えられます（たとえば、
rgb(255, 0, 0)）。
長さ構成
Liferay 7.4 U44 および GA44+
長さ 設定タイプは、数値を入力して定義済みの単位を選択したり、幅、余白、パディングなどの設定に独自の単位を指定したりできるフィールドを作成します。
この JSON サンプルは、 長さ 構成タイプを使用するフィールドを示しています。 これには、名前、ラベル、デフォルト値を定義するプロパティが含まれます。
{
"fieldSets": [
{
"fields": [
{
"defaultValue": "300px",
"label": "size",
"name": "size",
"type": "length"
}
]
}
]
}
ユーザーインターフェースでは、利用可能な単位から選択するか、カスタム単位を指定できます。
アイテムセレクターの設定
Liferay DXP 7.3+
この設定では、フラグメントに含める既存のコンテンツ（デフォルトでは、ドキュメント、Webコンテンツ記事、ブログエントリ、カテゴリ、製品、またはナレッジベース記事）を1つ選択するためのセレクターが作成されます。
itemSelector 構成を持つフラグメントが Collection Display内に配置されると、コレクションアイテムが自動的に選択されたコンテンツになります。 コレクション表示機能がコンテンツを動的に決定するため、手動選択は無効になっています。
{
"fieldSets": [
{
"fields": [
{
"label": "select-content",
"name": "itemSelector1",
"type": "itemSelector",
"typeOptions": {
"enableSelectTemplate": true
}
}
]
}
]
}
特定の種類のコンテンツのみを選択するための、より高度な設定を行うことができます。 以下の構成では、Web コンテンツの記事のみを選択できることを指定しています。 オプションのプロパティ itemSubtype を選択するには、選択した Web コンテンツ記事が構造 article-structure-key-15 を使用する必要があります。
{
"fieldSets": [
{
"fields": [
{
"label": "select-content",
"name": "itemSelector1",
"type": "itemSelector",
"typeOptions": {
"itemType": "com.liferay.journal.model.JournalArticle",
"itemSubtype": "article-structure-key-15"
}
}
]
}
]
}
この例では、 image/png MIMEタイプ（.png ファイル）を持つドキュメントのみを選択できることを指定しています。
{
"fieldSets": [
{
"fields": [
{
"label": "select-content",
"name": "itemSelector1",
"type": "itemSelector",
"typeOptions": {
"itemType": "com.liferay.portal.kernel.repository.model.FileEntry",
"mimeTypes": [
"image/png"
]
}
}
]
}
]
}
次の例では、ブログエントリーのみを選択できるように指定しています。
{
"fieldSets": [
{
"fields": [
{
"label": "select-content",
"name": "itemSelector1",
"type": "itemSelector",
"typeOptions": {
"itemType": "com.liferay.blogs.model.BlogsEntry"
}
}
]
}
]
}
ブログ記事の場合は、以下のHTMLスニペットを使用してフラグメント内にコンテンツをレンダリングできます。
<div class="fragment_name">
[#if configuration.itemSelector1.content??]
${configuration.itemSelector1.content}
[/#if]
</div>
コンテンツの特定の部分にアクセスする必要がある場合は、フラグメント内の Java オブジェクトに name 属性と Object サフィックス (この場合はitemSelector1Object) を使用してアクセスすることもできます。 以下の例は、ブログ記事のタイトル、説明、および本文を表示するものです。
<div class="fragment_name">
[#if configuration.itemSelector1.content??]
${itemSelector1Object.getTitle()}
${itemSelector1Object.getDescription()}
${itemSelector1Object.getContent()}
[/#if]
</div>
アイテムセレクター構成を持つフラグメントをコレクション表示ウィジェットに配置すると、コレクションアイテムが選択されたコンテンツとして自動的にマッピングされます。
URL設定
この設定により、フラグメントのマークアップで使用するURL専用のフィールドが追加されます。
{
"fieldSets": [
{
"fields": [
{
"label": "My URL",
"name": "myURL",
"type": "url"
}
]
}
]
}
この構成でフラグメントを設定すると、URL を手動で入力するか (URL)、同じサイトの別のページを選択してその完全な URL (ページ ) を使用できます。
以下は、上記のJSONに含まれるURL設定を使用してハイパーリンクを作成するHTMLフラグメントの例です。
<div class="fragment_1">
<a href=${configuration.myURL}>Click this link!</a>
</div>
ビデオセレクター
Liferay DXP 7.4+
videoSelector タイプを使用すると、 外部ビデオ フラグメントを別のフラグメントに組み込むビデオセレクタを作成できます。
{
"fieldSets": [
{
"fields": [
{
"label": "My Video Selector",
"name": "myVideoConfig",
"type": "videoSelector"
}
]
}
]
}
これは、デフォルトでビデオが埋め込まれているフラグメントが必要な場合に便利です。 以下のJSON設定サンプルは、カードフラグメントに外部ビデオセレクターを組み込む方法を示しています。
{
"fieldSets": [
{
"fields": [
{
"label": "Video",
"name": "video",
"type": "videoSelector"
}
]
},
{
"configurationRole": "style",
"fields": [
{
"dataType": "string",
"defaultValue": "w-100",
"label": "image-size",
"name": "imageSize",
"type": "select",
"typeOptions": {
"validValues": [
{
"label": "fit",
"value": "w-100"
},
{
"label": "original-size",
"value": "w-0"
}
]
}
}
]
}
]
}
コレクションセレクター
Liferay DXP 7.3+
collectionSelector 構成タイプを使用すると、 コレクション または コレクションプロバイダ を含むフラグメントを開発できます。 collectionSelector は、手動コレクションと動的コレクションの両方で使用することができます。
開発者は、コレクションプロバイダーを使用して、最近のコンテンツや最も閲覧されたアイテムなど、高度な基準に基づいてアイテムをグループ化できます。 グループ化すると、 情報テンプレート を使用して、これらのアイテムがページ上でどのように表示されるかをカスタマイズできます。
次のJSON設定は、collectionSelectorを使用する方法を示しています。
{
"fieldSets": [
{
"label": "Collection",
"fields": [
{
"name": "collection",
"type": "collectionSelector"
}
]
}
]
}
このフラグメント構成を以下のFreeMarkerコードと組み合わせて使用することで、コレクションアイテムを一覧表示できます。 collectionObjectList は、 コンテンツ ページ エディター で選択されたコレクションを表します。
FreeMarker でこのコレクションを参照するには、JSON 設定でコレクション 名 と ObjectList サフィックスを使用します。 前の JSON コード抜粋では、コレクション の名前 は コレクション なので、FreeMarker は collectionObjectList を使用してコレクションを参照します。
<div class="fragment_310">
<h1>
List of Items:
</h1>
<ul>
[#if collectionObjectList??]
[#list collectionObjectList as item]
<li>${item.title}</li>
[/#list]
[/#if]
</ul>
</div>
コレクションセレクターのフィルタリング
collectionSelector 設定で itemType を使用してコレクションセレクタをフィルタリングできます。 例えば、Webコンテンツとブログを含む異なるコレクションがある場合、コレクションセレクターを制限して、ブログコレクションのみを表示することができます。 このJSONサンプルは、この設定を説明するものです。
{
"fieldSets": [
{
"label": "Collection",
"fields": [
{
"name": "collection",
"type": "collectionSelector",
"typeOptions": {
"itemType": "com.liferay.blogs.model.BlogsEntry"
}
}
]
}
]
}
このサンプル構成を使用すると、コレクションタイプが アセット であるため、Web コンテンツとブログの両方を含むコレクションはコレクションセレクターから除外されます。
itemTypeに加えて、設定で itemSubtype を指定できます。 itemSubtype は、アセット classPK に対応します。
返却されるコレクションアイテムの最大数を定義する
デフォルトでは、アイテムの最大数に制限を設けない場合、コレクション内のすべてのアイテムが返されます。 JSON設定で numberOfItems を使用してこの制限を設定できます。
{
"fieldSets": [
{
"label": "Collection",
"fields": [
{
"name": "collection",
"type": "collectionSelector",
"typeOptions": {
"numberOfItems": 3
}
}
]
}
]
}
カラーパレットの設定
カラーパレットJSON 構成は、色を選択する必要がある場合に実装できるカラー セレクターを作成します。 カラーピッカー設定とは異なり、現在使用されている スタイルブックのカラーシステムで設定されているテーマカラーに基づくオプションのみを提供します。
この設定では、textColorというカラーパレットフィールドが作成されます。
{
"fieldSets": [
{
"fields": [
{
"name": "textColor",
"label": "Text color",
"type": "colorPalette",
"dataType": "object",
"defaultValue": {
"color": "white"
}
}
]
}
]
}
colorPalette 型は、値 color を持つオブジェクトを格納します。
例えば、上記のコードスニペットを実装すれば、FreeMarkerで使用できます。
<h3 class="text-${configuration.textColor.color}">Example</h3>
色を 白にすると、 h3 タグの見出しにはクラス text-white が付きます。
ナビゲーションメニューセレクターの設定
Liferay DXP 2024.Q1/Portal GA112
navigationMenuSelector 構成タイプを使用すると、フラグメント HTML エディタを介して FreeMarker 変数にアクセスし、カスタムナビゲーション メニューをレンダリングするためのマークアップを定義できます。
フラグメント HTML エディタで FreeMarker 変数を使用するには、まず navigationMenuSelector を 構成タイプ として設定します。 以下のJSONスニペットを参考にしてください。
"fieldSets": [
{
"fields": [
{
"label": "source",
"name": "source",
"type": "navigationMenuSelector"
}
]
}
]
これで、 [name]Object の下にある FreeMarker 変数にアクセスできるようになります。 この例では、 sourceObject.navItems は、 sourceObject の下にある navItems リストを返します。 設定で使用されていた名前が source だったため、オブジェクトは sourceObject と呼ばれます。
ナビゲーションメニューセレクター構成タイプで使用可能な変数は以下のとおりです。
| 値 | 使用 |
|---|---|
branchNavItems | ナビゲーションメニューの階層構造を表します。 |
navItems | 表示するナビゲーション項目をそれぞれ表す NavItem オブジェクトのリスト。 |
rootLayoutLevel | 階層構造におけるレベルを定義します。 |
rootLayoutType | 現在のページとの関連でルートレイアウトをどのように解釈するかを指定します（絶対、相対、または選択）。 |
navigationMenuSelector タイプをより詳しく見るには、 navigation-menu フラグメント をダウンロードしてフラグメント セットにインポートします。 フラグメントのインポートについて詳しくは、 フラグメントの管理 を参照してください。
条件付きフィールド表示設定
Liferay DXP 2025.Q2
この機能は、Liferay DXP 2025.Q3で一般提供が開始されました。 Liferay DXP 2025.Q2では、リリース機能フラグ（LPD-46393）の背後で利用可能でした。 詳細については、 リリース機能フラグ を参照してください。
フラグメント構成内のフィールドの表示/非表示は、同じフィールドセット内の他のフィールドの値に基づいて制御できます。 フィールドの可視性は依存関係によって決定され、あるフィールドの可視性は別のフィールドの値に依存する場合があります。 依存関係でサポートされているフィールドタイプは、 テキスト、 セレクト、および チェックボックス です。
フィールドの依存関係を作成するには、フィールドの typeOptions 内に依存関係キーを追加します。 比較するフィールドを指定し、コンディションのタイプを equalまたはnot-equalに設定して、値フィールドの比較方法を定義します。
次の例は、 subscriptionPlan と additionalFeatures という 2 つの選択フィールドを示しています。 additionalFeatures の表示は、 subscriptionPlan の値に依存します。
{
"fieldSets": [
{
"fields": [
{
"dataType": "string",
"defaultValue": "standard",
"label": "Subscription Plan",
"name": "subscriptionPlan",
"type": "select",
"typeOptions": {
"validValues": [
{"value": "basic", "label": "Basic Plan"},
{"value": "standard", "label": "Standard Plan"},
{"value": "premium", "label": "Premium Plan"}
]
}
},
{
"dataType": "string",
"defaultValue": "no",
"label": "Additional Features",
"name": "additionalFeatures",
"type": "select",
"typeOptions": {
"dependency": {
"subscriptionPlan": {
"type": "equal",
"value": "premium"
}
},
"validValues": [
{"value": "1", "label": "Priority Support"},
{"value": "2", "label": "Extra Storage"},
{"value": "3", "label": "Custom Reports"}
]
}
}
]
}
]
}
可視性依存性は次のように定義されます。
"typeOptions": {
"dependency": {
"subscriptionPlan": {
"type": "equal",
"value": "premium"
}
}
}
この場合、 additionalFeatures フィールドは、 subscriptionPlan フィールドが Premium Plan に設定されている場合にのみ表示されます。 ユーザーが別のサブスクリプションプランを選択した場合、 additionalFeatures フィールドは非表示のままになります。
依存関係オブジェクト内に複数の依存関係を追加することで、他のフィールドの値に基づいて表示/非表示を制御できます。