フラグメント設定タイプのリファレンス¶
このリファレンスには、フラグメントに使用可能な構成タイプがリストされています。 フラグメントを構成可能にする方法の詳細は、 フラグメントへの構成オプションの追加 を参照してください。
以下は実装できる 5 つの構成可能なフラグメントタイプです。
checkboxcolorPaletteitemSelector(Liferay DXP 7.3+ で使用可能)selecttextvideoSelector(Liferay DXP 7.4+ で使用可能+)collectionSelector(Liferay DXP 7.3+ で使用可能)
注釈
FreeMarker コンテキストに挿入された設定値は、JSON ファイルで指定された定義済みの datatype 値に従います。 たとえば、dataTypeが String の場合、configuration.[name-value]?is_string は trueとなります。
チェックボックスの設定¶
次の JSON 構成は、ブール値の選択が必要な場合に実装できるチェックボックスを作成します。
{
"fieldSets": [
{
"fields": [
{
"name": "hideBody",
"label": "Hide Body",
"description": "hide-body",
"type": "checkbox",
"defaultValue": false
}
...
]
}
]
}
カラーパレットの設定¶
次の JSON 構成は、色を選択する必要がある場合に実装できるカラー セレクターを作成します。
{
"fieldSets": [
{
"fields": [
{
"name": "textColor",
"label": "Text color",
"type": "colorPalette",
"dataType": "object",
"defaultValue": {
"cssClass": "white",
"rgbValue": "rgb(255,255,255)"
}
}
...
]
}
]
}
colorPalette タイプは、cssClass および rgbValue の 2 つの値を持つオブジェクトを格納します。
たとえば、上記のスニペットを実装すると、次のように FreeMarker コンテキストで使用できます。
<h3 class="text-${configuration.textColor.cssClass}">Example</h3>
白を選択した場合、 h3 タグの見出しはクラス text-white' を持ちます。
アイテムセレクターの設定¶
次の構成は、フラグメントに含める既存のコンテンツ (デフォルトでは、Web コンテンツの記事、ブログエントリー、またはドキュメント) を 1 つ選択できるセレクターを作成します。
{
"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"
}
}]
}]
}
次の例では、ストラクチャー metadataset-structure-key-2 を使用している img または jpg MIME タイプのドキュメントのみを選択できることを指定しています。
{
"fieldSets": [{
"fields": [{
"label": "select-content",
"name": "itemSelector1",
"type": "itemSelector",
"typeOptions": {
"itemType" : "com.liferay.portal.kernel.repository.model.FileEntry",
"itemSubtype": "metadataset-structure-key-2",
"mimeTypes": ["img/jpg"]
}
}]
}]
}
次の例では、ブログエントリーのみを選択できるように指定しています。
{
"fieldSets": [{
"fields": [{
"label": "select-content",
"name": "itemSelector1",
"type": "itemSelector",
"typeOptions": {
"itemType" : "com.liferay.blogs.model.BlogsEntry",
}
}]
}]
}
その後、Web コンテンツ記事に次の HTML スニペットを使用して、フラグメント内のコンテンツをレンダリングできます。
<div class="fragment_name">
[#if configuration.itemSelector1.content??]
${configuration.itemSelector1.content}
[/#if]
</div>
また、コンテンツの特定の部分にアクセスする必要がある場合には、[name-of-field]Object ( 下の例では itemSelector1Object ) というキーの下で、フラグメント内の Java オブジェクトにアクセスすることができます。 次の例は、Web コンテンツの記事のタイトル、説明、および本文をレンダリングします。
<div class="fragment_name">
[#if configuration.itemSelector1.content??]
${itemSelector1Object.getTitle()}
${itemSelector1Object.getDescription()}
${itemSelector1Object.getContent()}
[/#if]
</div>
選択設定¶
次の 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": "buttonText",
"label": "Button Text",
"description": "button-text",
"type": "text",
"typeOptions": {
"placeholder": "Placeholder"
},
"dataType": "string",
"defaultValue": "Go Somewhere"
}
...
]
}
]
}
ビデオセレクター¶
対応可能：Liferay DXP/Portal 7.4以降
videoSelector 型を使用すると、 External Video フラグメントを別のフラグメントに取り込むためのビデオセレクタを作成することができます。
{
"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/Portal 7.3以降
collectionSelector の設定タイプを使用すると、 Collection またはコレクションプロバイダーを含むフラグメントを開発することが可能です。 collectionSelector は、手動コレクションと動的コレクションの両方で使用することができます。
注釈
コレクションプロバイダーは、開発者がより高度な基準で特定のコレクションを作成することを可能にします。 詳しくは、開発者向けドキュメント Info Framework の Creating an Information List Provider をご覧ください。
次のJSON設定は、 collectionSelectorを使用する方法を示しています。
{
"fieldSets": [
{
"label": "Collection",
"fields": [
{
"name": "collection",
"type": "collectionSelector"
}
]
}
]
}
このフラグメント設定を、以下のHTMLコードサンプルで使用することで、コレクション項目を一覧表示することができます。 collectionObjectListはコンテントページエディタで選択されたコレクションを表します。
このコレクションをHTMLから参照するには、JSONの設定でコレクションの名前 と ObjectListサフィックスを使用します。 先のJSONコードの抜粋では、コレクションの名前 は コレクション なので、HTMLでは 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 コンテンツとブログの両方を含むコレクションは、コレクションタイプが アセット であるため、コレクションセレクターからフィルタリングされます。
ちなみに
設定には itemTime の他に、itemSubtype を指定することができます。 itemSubtypeはアセットclassPKに対応します。