模型定義、欄位和元件類型
- 適用對象:
- Experience Manager as a Cloud Service
- 主題:
- 開發
建立對象:
- 管理員
- 開發人員
透過範例瞭解通用編輯器可在屬性面板中編輯的欄位和元件型別。 瞭解如何建立模型定義並連結至元件,以裝備您自己的應用程式。
概觀
調整您自己的應用程式以與通用編輯器搭配使用時,您必須檢測元件,並定義元件可在編輯器的「屬性」面板中操作的欄位和元件型別。 若要這麼做,請建立模型並從元件連結至模型。
本檔案提供模型定義、欄位和可用元件型別的概觀,以及設定範例。
模型定義結構
若要透過通用編輯器中的屬性面板設定元件,模型定義必須存在且必須連結至元件。
模型定義是JSON結構,從模型的陣列開始。
[
{
"id": "model-id", // must be unique
"fields": [] // array of fields which shall be rendered in the properties panel
}
]
請參閱本檔案的 欄位 區段,以取得如何定義fields
陣列的詳細資訊。
您可以使用兩種方式將模型連結至元件:使用元件定義或透過檢測使用。
使用元件定義連結
這是將模型連結至元件的偏好方法。 如此可讓您集中維護元件定義中的連結,並啟用跨容器拖曳元件。
只要在component-definition.json
檔案的components
陣列中的元件物件中包含model
屬性即可。
如需詳細資訊,請參閱檔案元件定義。
使用檢測連結
若要搭配元件使用模型定義,可以使用data-aue-model
屬性。
<div data-aue-resource="urn:datasource:/content/path" data-aue-type="component" data-aue-model="model-id">Click me</div>
- 已透過檢測實作連結至模型的專案將照原樣繼續運作,無需變更。
- 如果您在元件定義以及檢測中定義模型,則一律會使用檢測。
載入模型定義
建立模型後,可作為外部檔案參照。
<script type="application/vnd.adobe.aue.model+json" src="<url-of-model-definition>"></script>
或者,您也可以線上上定義模型。
<script type="application/vnd.adobe.aue.model+json">
{ ... model definition ... }
</script>
欄位
欄位物件具有下列型別定義。
component
ComponentType
name
string
label
FieldLabel
description
FieldDescription
placeholder
string
value
FieldValue
valueType
ValueType
string
、string[]
、number
、date
、boolean
required
boolean
readOnly
boolean
hidden
boolean
multi
boolean
validation
ValidationType
raw
unknown
元件型別
以下是可用於呈現欄位的元件型別。
AEM標籤
AEM標籤元件型別會啟用AEM標籤選取器,其可用來將標籤附加至元件。
{
"id": "aem-tag-picker",
"fields": [
{
"component": "aem-tag",
"label": "AEM Tag Picker",
"name": "cq:tags",
"valueType": "string"
}
]
}

AEM內容
AEM內容元件型別會啟用AEM內容選擇器,可用來選取任何AEM資源。 與只能選取資產的參考元件不同,AEM內容元件可參考任何AEM內容。 它提供額外的驗證型別。
rootPath
string
{
"id": "aem-content-picker",
"fields": [
{
"component": "aem-content",
"name": "reference",
"value": "",
"label": "AEM Content Picker",
"valueType": "string",
"validation": {
"rootPath": "/content/refresh"
}
}
]
}

布林值
布林值元件型別會儲存簡單的true/false值,呈現為切換按鈕。 它提供額外的驗證型別。
customErrorMsg
string
{
"id": "boolean",
"fields": [
{
"component": "boolean",
"label": "Boolean",
"name": "boolean",
"valueType": "boolean"
}
]
}
{
"id": "another-boolean",
"fields": [
{
"component": "boolean",
"label": "Boolean",
"name": "boolean",
"valueType": "boolean",
"validation": {
"customErrorMsg": "Think, McFly. Think!"
}
}
]
}

核取方塊群組
與布林值類似,核取方塊群組元件型別允許選取多個true/false專案,呈現為多個核取方塊。
{
"id": "checkbox-group",
"fields": [
{
"component": "checkbox-group",
"label": "Checkbox Group",
"name": "checkbox",
"valueType": "string[]",
"options": [
{ "name": "Option 1", "value": "option1" },
{ "name": "Option 2", "value": "option2" }
]
}
]
}

容器
容器元件型別允許將元件分組。 它提供額外設定。
collapsible
boolean
{
"id": "container",
"fields": [
{
"component": "container",
"label": "Container",
"name": "container",
"valueType": "string",
"collapsible": true,
"fields": [
{
"component": "text-input",
"label": "Simple Text 1",
"name": "text",
"valueType": "string"
},
{
"component": "text-input",
"label": "Simple Text 2",
"name": "text2",
"valueType": "string"
}
]
}
]
}

內容片段
內容片段選擇器可用來選取內容片段及其變數(如果需要)。 它提供額外設定。
variationName
string
此外,還提供其他驗證型別。
rootPath
string
[
{
"id": "aem-content-fragment",
"fields": [
{
"component": "aem-content-fragment",
"name": "picker",
"label": "Content Fragment Picker",
"valueType": "string",
"variationName": "contentFragmentVariation",
"validation": {
"rootPath": "/content/refresh"
}
}
]
}
]

日期時間
日期時間元件型別可指定日期、時間或其組合。 它提供其他設定。
displayFormat
string
valueFormat
string
此外,還提供其他驗證型別。
customErrorMsg
string
valueFormat
時將顯示的訊息{
"id": "date-time",
"fields": [
{
"component": "date-time",
"label": "Date & Time",
"name": "date",
"valueType": "date"
}
]
}
{
"id": "another-date-time",
"fields": [
{
"component": "date-time",
"valueType": "date-time",
"name": "field1",
"label": "Date Time",
"description": "This is a date time field that stores both date and time.",
"required": true,
"placeholder": "YYYY-MM-DD HH:mm:ss",
"displayFormat": null,
"valueFormat": null,
"validation": {
"customErrorMsg": "Marty! You have to come back with me!"
}
},
{
"component": "date-time",
"valueType": "date",
"name": "field2",
"label": "Another Date Time",
"description": "This is another date time field that only stores the date.",
"required": true,
"placeholder": "YYYY-MM-DD",
"displayFormat": null,
"valueFormat": null,
"validation": {
"customErrorMsg": "Back to the future!"
}
},
{
"component": "date-time",
"valueType": "time",
"name": "field3",
"label": "Yet Another Date Time",
"description": "This is another date time field that only stores the time.",
"required": true,
"placeholder": "HH:mm:ss",
"displayFormat": null,
"valueFormat": null,
"validation": {
"customErrorMsg": "Great Scott!"
}
}
]
}

體驗片段
體驗片段選擇器可用來選取體驗片段及其變數(如果需要)。 它提供額外設定。
variationName
string
此外,還提供其他驗證型別。
rootPath
string
[
{
"id": "experience-fragment",
"fields": [
{
"component": "aem-experience-fragment",
"valueType": "string",
"name": "experience-fragment",
"label": "experience-fragment",
"variationName": "experienceFragmentVariation",
"validation": {
"rootPath": "/content/refresh"
}
}
]
}
]

多選
多選元件型別會在下拉式選單中顯示多個可供選取的專案,包括將可選取元素分組的功能。
{
"id": "multiselect",
"fields": [
{
"component": "multiselect",
"name": "multiselect",
"label": "Multi Select",
"valueType": "string",
"options": [
{ "name": "Option 1", "value": "option1" },
{ "name": "Option 2", "value": "option2" }
]
}
]
}
{
"id": "multiselect-grouped",
"fields": [
{
"component": "multiselect",
"name": "property",
"label": "Multiselect field",
"valueType": "string",
"required": true,
"maxSize": 2,
"options": [
{
"name": "Theme",
"children": [
{ "name": "Light", "value": "light" },
{ "name": "Dark", "value": "dark" }
]
},
{
"name": "Type",
"children": [
{ "name": "Alpha", "value": "alpha" },
{ "name": "Beta", "value": "beta" },
{ "name": "Gamma", "value": "gamma" }
]
}
]
}
]
}


數字
數字元件型別允許輸入數字。 它提供額外的驗證型別。
numberMin
number
numberMax
number
customErrorMsg
string
numberMin
或numberMax
時將顯示的訊息{
"id": "number",
"fields": [
{
"component": "number",
"name": "number",
"label": "Number",
"valueType": "number",
"value": 0
}
]
}
{
"id": "another-number",
"fields": [
{
"component": "number",
"valueType": "number",
"name": "field1",
"label": "Number Field",
"description": "This is a number field.",
"required": true,
"placeholder": null,
"validation": {
"numberMin": 0,
"numberMax": 88,
"customErrorMsg": "You also need 1.21 gigawatts."
}
}
]
}

選項按鈕群組
單選按鈕群組元件型別允許從多個選項中進行互斥選取,這些選項呈現為類似於核取方塊群組的群組。
{
"id": "radio-group",
"fields": [
{
"component": "radio-group",
"label": "Radio Group",
"name": "radio",
"valueType": "string",
"options": [
{ "name": "Option 1", "value": "option1" },
{ "name": "Option 2", "value": "option2" }
]
}
]
}

參考
參考元件型別會啟用AEM資產選取器,其可用來選取要參考的任何AEM資產。 與可選取任何AEM資源的AEM內容元件不同,參考元件只能參考資產。 它提供額外的驗證型別。
參照元件型別允許參照目前物件中的其他資料物件。
{
"id": "reference",
"fields": [
{
"component": "reference",
"label": "Reference",
"name": "reference",
"valueType": "string"
}
]
}

RTF 文字
RTF允許多行RTF輸入。
{
"id": "richtext",
"fields": [
{
"component": "richtext",
"name": "rte",
"label": "Rich Text",
"valueType": "string"
}
]
}

選取
選取元件型別可讓您從下拉式選單中的預先定義選項清單中選取單一選項。
{
"id": "select",
"fields": [
{
"component": "select",
"label": "Select",
"name": "select",
"valueType": "string",
"options": [
{ "name": "Option 1", "value": "option1" },
{ "name": "Option 2", "value": "option2" }
]
}
]
}

定位符號
索引標籤元件型別可讓您將其他輸入欄位分組在多個索引標籤上,以改善作者的版面配置組織。
可以將tab
定義視為fields
陣列中的分隔符號。 tab
之後的所有專案都將放在該索引標籤上,直到遇到新的tab
為止,之後下列專案將放在該新索引標籤上。
如果您希望專案出現在所有標籤的上方,必須在任何標籤之前定義它們。
{
"id": "tab",
"fields": [
{
"component": "tab",
"label": "Tab 1",
"name": "tab1"
},
{
"component": "text-input",
"label": "Text 1",
"name": "text1",
"valueType": "string"
},
{
"component": "tab",
"label": "Tab 2",
"name": "tab2"
},
{
"component": "text-input",
"label": "Text 2",
"name": "text2",
"valueType": "string"
}
]
}

文字
文字允許單行文字輸入。 它包含其他驗證型別。
minLength
number
maxLength
number
regExp
string
customErrorMsg
string
minLength
、maxLength
和/或regExp
時將顯示的訊息{
"id": "simpletext",
"fields": [
{
"component": "text",
"name": "text",
"label": "Simple Text",
"valueType": "string"
}
]
}
{
"id": "another simpletext",
"fields": [
{
"component": "text",
"name": "text",
"label": "Simple Text",
"valueType": "string",
"valueFormat": "regexp",
"description": "This is a text input with validation.",
"required": true,
"validation": {
"minLength": 1955,
"maxLength": 1985,
"regExp": "^foo:.*",
"customErrorMsg": "Why don't you make like a tree and get outta here?"
}
}
]
}
