モデル定義、フィールドおよびコンポーネントタイプ field-types
ユニバーサルエディターがプロパティパネルで編集できるフィールドとコンポーネントタイプの例について説明します。モデル定義を作成し、コンポーネントにリンクすることで、独自のアプリを実装する方法を理解します。
概要 overview
ユニバーサルエディターで使用する独自のアプリを適応させる場合は、コンポーネントを実装し、エディターのプロパティパネルで操作できるフィールドとコンポーネントタイプを定義する必要があります。これを行うには、モデルを作成し、コンポーネントからそのモデルにリンクします。
このドキュメントでは、モデル定義の概要、フィールドの概要および使用可能なコンポーネントタイプと設定例を説明します。
モデル定義構造 model-structure
ユニバーサルエディターのプロパティパネルを使用してコンポーネントを設定するには、モデル定義が存在し、そのコンポーネントにリンクされている必要があります。
モデル定義は、モデルの配列から始まる JSON 構造です。
[
{
"id": "model-id", // must be unique
"fields": [] // array of fields which shall be rendered in the properties panel
}
]
fields 配列を定義する方法について詳しくは、このドキュメントの フィールド の節を参照してください。
モデルをコンポーネントにリンクするには、コンポーネント定義または実装を使用の 2 つの方法があります。
コンポーネント定義を使用したリンク component-definition
モデルをコンポーネントにリンクするには、この方法をお勧めします。これにより、コンポーネント定義内でリンクを一元的に維持でき、コンテナ間でコンポーネントをドラッグできるようになります。
component-definition.json ファイルの components 配列のコンポーネントオブジェクトに model プロパティを含めるだけです。
詳しくは、コンポーネント定義のドキュメントを参照してください。
実装を使用したリンク instrumentation
コンポーネントでモデル定義を使用するには、data-aue-model 属性を使用できます。
<div data-aue-resource="urn:datasource:/content/path" data-aue-type="component" data-aue-model="model-id">Click me</div>
- 実装を介してモデルへのリンクを実装したプロジェクトは、変更を行わなくても、引き続きそのまま機能します。
- コンポーネント定義と実装の両方でモデルを定義する場合、実装が常に使用されます。
モデル定義の読み込み loading-model
モデルを作成した後は、外部ファイルとして参照できます。
<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>
フィールド fields
フィールドオブジェクトには次のタイプ定義があります。
componentComponentTypelabelFieldLabeldescriptionFieldDescriptionvalueFieldValuevalueとして定義されたものを保持します。 これにより、表示される内容が、バックエンドに保持される内容と一致することが保証されます。valueTypeValueTypestring、string[]、number、date、booleanrequiredbooleanreadOnlybooleanhiddenbooleanmultibooleanプロパティパネルのマルチフィールドでは、コンテナーのネストは許可されていない点に注意してください。
validationValidationTyperawunknown名前フィールドとネスト nesting
name フィールドは、現在のリソースのプロパティを直接指すことができます。または、cq:Pages のコンポーネントの場合は、ネストされたプロパティへのパスを使用することもできます。例:
"name": "teaser/image/fileReference"
コンポーネントタイプ component-types
次に、フィールドのレンダリングに使用できるコンポーネントタイプを示します。
aem-tagaem-contentbooleancheckbox-groupcontaineraem-content-fragmentdate-timeaem-experience-fragmentmultiselectnumberradio-groupreferencerichtextselecttabtexttextareaAEM タグ aem-tag
AEM タグコンポーネントタイプでは、AEM タグピッカーを使用して、コンポーネントにタグを付けることができます。
| code language-json |
|---|
|
AEM コンテンツ aem-content
AEM コンテンツコンポーネントタイプでは、AEM コンテンツピッカーを使用して、任意の AEM リソースを選択できます。アセットのみを選択できる参照コンポーネントとは異なり、AEM コンテンツコンポーネントは、任意の AEM コンテンツを参照できます。追加の検証タイプを提供します。
rootPathstring| code language-json |
|---|
|
ブーリアン boolean
ブーリアンのコンポーネントタイプは、切替スイッチとしてレンダリングされた単純な true/false 値を格納します。追加の検証タイプを提供します。
customErrorMsgstring| code language-json |
|---|
|
| code language-json |
|---|
|
チェックボックスグループ checkbox-group
ブール値と同様に、チェックボックスグループコンポーネントタイプでは、複数の true / false 項目を選択でき、複数のチェックボックスとしてレンダリングできます。
| code language-json |
|---|
|
コンテナ container
コンテナコンポーネントタイプを使用すると、複数のサポートなどコンポーネントをグループ化できます。追加の設定を提供します。プロパティパネルの複数フィールドでは、コンテナのネストは許可されていません
collapsibleboolean| code language-json |
|---|
|
| code language-json |
|---|
|
コンテンツフラグメント content-fragment
コンテンツフラグメントピッカーを使用すると、コンテンツフラグメントと(必要に応じて)そのバリエーションを選択できます。追加の設定を提供します。
variationNamestringまた、追加の検証タイプも提供します。
rootPathstring| code language-json |
|---|
|
日時 date-time
日時コンポーネントタイプを使用すると、日付、時刻、またはその組み合わせを指定できます。 追加の設定を提供します。
displayFormatstringvalueFormatstringまた、追加の検証タイプも提供します。
customErrorMsgstringvalueFormat が満たされない場合に表示するメッセージ| code language-json |
|---|
|
| code language-json |
|---|
|
エクスペリエンスフラグメント experience-fragment
エクスペリエンスフラグメントピッカーを使用すると、エクスペリエンスフラグメントと(必要に応じて)そのバリエーションを選択できます。追加の設定を提供します。
variationNamestringまた、追加の検証タイプも提供します。
rootPathstring| code language-json |
|---|
|
複数選択 multiselect
複数選択コンポーネントタイプでは、選択可能な要素をグループ化する機能など、ドロップダウンで選択する複数の項目が表示されます。
| code language-json |
|---|
|
| code language-json |
|---|
|
数値 number
数値コンポーネントタイプを使用すると、数値を入力できます。 追加の設定を提供します。
valueFormatstringlong (既定値)またはdoubleです。また、追加の検証タイプも提供されます。
numberMinnumbernumberMaxnumbercustomErrorMsgstringnumberMin または numberMax が満たされない場合に表示するメッセージ。| code language-json |
|---|
|
| code language-json |
|---|
|
ラジオグループ radio-group
ラジオグループコンポーネントタイプを使用すると、チェックボックスグループと同様のグループとしてレンダリングされる複数のオプションから、相互に排他的な選択を行うことができます。
| code language-json |
|---|
|
参照 reference
参照コンポーネントタイプでは、AEM アセットピッカーを使用して、参照する任意の AEM アセットを選択できます。任意の AEM リソースを選択できる AEM コンテンツコンポーネントとは異なり、参照コンポーネントは、アセットのみを参照できます。追加の検証タイプを提供します。
参照コンポーネントタイプを使用すると、現在のオブジェクトから別のデータオブジェクトへの参照が可能になります。
| code language-json |
|---|
|
リッチテキスト rich-text
リッチテキストを使用すると、複数行のリッチテキスト入力が可能になります。
| code language-json |
|---|
|
選択 select
選択コンポーネントタイプでは、ドロップダウンメニューの定義済みオプションのリストから 1 つのオプションを選択できます。
| code language-json |
|---|
|
タブ tab
タブコンポーネントタイプを使用すると、他の入力フィールドを複数のタブでグループ化して、作成者向けにレイアウト構成を改善することができます。
tab 定義は、fields の配列の区切り記号として見なすことができます。 tab より後のものはすべて、新しい tab が検出されるまでそのタブに配置され、それ以降は次の項目が新しいタブに配置されます。
すべてのタブに項目を表示する場合は、その項目をタブの前に定義する必要があります。
| code language-json |
|---|
|
テキスト text
テキストを使用すると、1 行のテキスト入力が可能になります。追加の検証タイプも含まれます。
minLengthnumbermaxLengthnumberregExpstringcustomErrorMsgstringminLength、maxLength、または regExp が違反の場合に表示されるメッセージ| code language-json |
|---|
|
| code language-json |
|---|
|
テキスト領域 textarea
テキスト領域では、複数のテキスト行を入力できます。
| code language-json |
|---|
|