Définitions de modèles, champs et types de composants field-types
Découvrez les champs et les types de composants que l’éditeur universel peut modifier dans le panneau des propriétés avec des exemples. Découvrez comment instrumenter votre propre application en créant une définition de modèle et en établissant un lien vers le composant .
Vue d’ensemble overview
Lors de l’adaptation de vos propres applications à utiliser avec l’éditeur universel, vous devez instrumenter les composants et définir les champs et types de composants qu’ils peuvent manipuler dans le panneau Propriétés de l’éditeur. Pour ce faire, créez un modèle et liez-le à partir du composant.
Ce document offre un aperçu d’une définition de modèle et des champs, ainsi que des types de composants disponibles, avec des exemples de configurations.
Structure de définition du modèle model-structure
Pour configurer un composant via le panneau Propriétés dans l’éditeur universel, une définition de modèle doit exister et être liée au composant.
La définition du modèle est une structure JSON, commençant par un tableau de modèles .
[
{
"id": "model-id", // must be unique
"fields": [] // array of fields which shall be rendered in the properties panel
}
]
Voir la section Champs de ce document pour plus d’informations sur la définition de votre tableau de fields
.
Pour utiliser la définition de modèle avec un composant, l’attribut data-aue-model
peut être utilisé.
<div data-aue-resource="urn:datasource:/content/path" data-aue-type="component" data-aue-model="model-id">Click me</div>
Chargement d’une définition de modèle loading-model
Une fois un modèle créé, il peut être référencé en tant que fichier externe.
<script type="application/vnd.adobe.aue.model+json" src="<url-of-model-definition>"></script>
Vous pouvez également définir le modèle en ligne.
<script type="application/vnd.adobe.aue.model+json">
{ ... model definition ... }
</script>
Champs fields
Un objet de champ possède la définition de type suivante.
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
Types de composants component-types
Vous trouverez ci-dessous les types de composants qui peuvent être utilisés pour le rendu des champs.
aem-tag
aem-content
boolean
checkbox-group
container
aem-content-fragment
date-time
aem-experience-fragment
multiselect
number
radio-group
reference
richtext
select
tab
text
Balise AEM aem-tag
Un type de composant de balise AEM active un sélecteur de balises AEM, qui peut être utilisé pour joindre des balises au composant.
code language-json |
---|
|

Contenu AEM aem-content
Un type de composant de contenu AEM active un sélecteur de contenu AEM qui peut être utilisé pour sélectionner n’importe quelle ressource AEM. Contrairement au composant de référence qui ne peut sélectionner que des ressources, le composant de contenu AEM peut référencer n’importe quel contenu AEM. Il propose un type de validation supplémentaire.
rootPath
string
code language-json |
---|
|

Booléen boolean
Un type de composant booléen stocke une valeur true/false simple rendue sous la forme d’un bouton bascule. Il propose un type de validation supplémentaire.
customErrorMsg
string
code language-json |
---|
|
code language-json |
---|
|

Groupe de cases à cocher checkbox-group
Semblable à une valeur booléenne, un type de composant de groupe de cases à cocher permet la sélection de plusieurs éléments true/false, rendus sous la forme de plusieurs cases à cocher.
code language-json |
---|
|

Conteneur container
Un type de composant de conteneur permet de regrouper des composants. Il propose une configuration supplémentaire.
collapsible
boolean
code language-json |
---|
|

Fragment de contenu content-fragment
Le sélecteur de fragment de contenu peut être utilisé pour sélectionner un fragment de contenu et ses variantes (si nécessaire). Il propose une configuration supplémentaire.
variationName
string
Il propose également un type de validation supplémentaire.
rootPath
string
code language-json |
---|
|

Date et heure date-time
Un type de composant de date et d’heure permet de spécifier une date, une heure ou une combinaison de celles-ci. Il propose des configurations supplémentaires.
displayFormat
string
valueFormat
string
Il propose également un type de validation supplémentaire.
customErrorMsg
string
valueFormat
n’est pas satisfaitcode language-json |
---|
|
code language-json |
---|
|

Fragment d’expérience experience-fragment
Le sélecteur de fragment d’expérience peut être utilisé pour sélectionner un fragment d’expérience et ses variantes (si nécessaire). Il propose une configuration supplémentaire.
variationName
string
Il propose également un type de validation supplémentaire.
rootPath
string
code language-json |
---|
|

Sélection multiple multiselect
Un type de composant à sélection multiple présente plusieurs éléments à sélectionner dans une liste déroulante, notamment la possibilité de regrouper les éléments sélectionnables.
code language-json |
---|
|
code language-json |
---|
|


Nombre number
Un type de composant numérique permet la saisie d’un nombre. Il propose d’autres types de validation.
numberMin
number
numberMax
number
customErrorMsg
string
numberMin
ou numberMax
n’est pas atteintcode language-json |
---|
|
code language-json |
---|
|

Groupe de cases d’option radio-group
Un type de composant de groupe de cases d’option permet une sélection mutuellement exclusive parmi plusieurs options rendues sous la forme d’un groupe similaire à un groupe de cases à cocher.
code language-json |
---|
|

Référence reference
Un type de composant de référence active un sélecteur de ressources AEM, qui peut être utilisé pour sélectionner n’importe quelle ressource AEM à référencer. Contrairement au composant de contenu AEM 🔗, qui peut sélectionner n’importe quelle ressource AEM, le composant de référence ne peut référencer que des ressources. Il propose un type de validation supplémentaire.
Un type de composant de référence permet de faire référence à un autre objet de données de l’objet actif.
code language-json |
---|
|

Texte enrichi rich-text
Le texte enrichi permet une entrée de texte enrichi multiligne. Il propose d’autres types de validation.
maxSize
number
customErrorMsg
string
maxSize
code language-json |
---|
|
code language-json |
---|
|

Sélectionner select
Un type de composant de sélection permet de sélectionner une seule option dans une liste d’options prédéfinies dans un menu déroulant.
code language-json |
---|
|

Tabulation tab
Un type de composant Onglet permet de regrouper d’autres champs de saisie sur plusieurs onglets afin d’améliorer l’organisation de la disposition pour les auteurs.
Une définition de tab
peut être considérée comme un séparateur dans le tableau des fields
. Tout ce qui suit un tab
sera placé sur cet onglet jusqu’à ce qu’un nouvel tab
soit rencontré, après quoi les éléments suivants seront placés sur le nouvel onglet.
Si vous souhaitez que des éléments apparaissent au-dessus de tous les onglets, ils doivent être définis avant tout onglet.
code language-json |
---|
|

Texte text
Le texte permet une seule ligne de saisie de texte. Elle inclut des types de validation supplémentaires.
minLength
number
maxLength
number
regExp
string
customErrorMsg
string
minLength
, maxLength
et/ou regExp
code language-json |
---|
|
code language-json |
---|
|
