フラグメント設定タイプのリファレンス
以下はフラグメントに使用可能な構成タイプです。 フラグメントを構成可能にする方法の詳細については、 フラグメントへの構成オプションの追加 を参照してください。
以下は実装できる構成可能なフラグメントタイプです。
textselectcheckboxcolorPicker(Liferay 7.4+ で利用可能)長さ(Liferay 7.4+ U44/GA44 で利用可能)itemSelectorurl(Liferay 7.4以降で利用可能)videoSelector（Liferay 7.4+で使用可能）collectionSelectorcolorPaletteナビゲーションメニューセレクター(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進コード値に変換されます。
-
カラーピッカーにデフォルト値が定義されていない場合は、 デフォルト ドロップダウン メニューをクリックして、現在のスタイル ブックから任意の色を選択します。 これは、値を選択する際の［スタイルブックの値］ボタンと同じように機能します。
使用しているテーマにスタイルブック のトークン定義がない場合、ページ上のカラーピッカー構成は [カラーパレット](#color-palette configuration) 構成に置き換えられます。
この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>
コンテンツの特定の部分にアクセスする必要がある場合は、 name 属性と Object サフィックス (この場合はitemSelector1Object) を使用して、フラグメント内の Java オブジェクトにアクセスすることもできます。 以下の例では、ブログエントリのタイトル、説明、コンテンツ本文をレンダリングします。
<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 コードの抜粋では、コレクション name は collection であるため、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>
色 whiteを選択した場合、 h3 タグの見出しのクラスは text-whiteになります。
ナビゲーションメニューセレクターの構成
Liferay DXP 2024.Q1/ポータル 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 フラグメント をダウンロードして、フラグメント セットにインポートします。 フラグメントのインポートの詳細については、 フラグメントの管理 を参照してください。
条件付きフィールドの表示設定
ライフレイ DXP 2025年第2四半期
この機能は、Liferay DXP 2025.Q3 で一般公開されました。 Liferay DXP 2025.Q2では、リリース機能フラグ（LPD-46393）で利用可能でした。 詳細については、 リリース機能フラグ を参照してください。
同じフィールドセット内の他のフィールドの値に基づいて、フラグメント構成内のフィールドの可視性を制御できます。 フィールドの可視性は依存関係によって決定され、1 つのフィールドの可視性は別のフィールドの値に依存する場合があります。 依存関係でサポートされているフィールド タイプは、 テキスト、 選択、および チェックボックスです。
フィールド依存関係を作成するには、フィールドの typeOptions内に依存関係キーを追加します。 比較するフィールドを指定し、条件の タイプ を 等しい または 等しくない に設定して、 値 フィールドの比較方法を定義します。
次の例は、2 つの選択フィールド subscriptionPlan と additionalFeaturesを示しています。 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 フィールドは非表示のままになります。
依存関係オブジェクト内に複数の依存関係を追加して、他のフィールドの値に基づいて可視性を制御できます。