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.

TIP
Si vous ne savez pas comment instrumenter votre application pour l’éditeur universel, consultez le document Présentation de l’éditeur universel pour les développeurs et développeuses AEM.

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.

Configuration
Type de valeur
Description
Requis
component
ComponentType
Rendu du composant
Oui
name
string
Propriété dans laquelle les données doivent être conservées
Oui
label
FieldLabel
Libellé du champ
Oui
description
FieldDescription
Description du champ
Non
placeholder
string
Espace réservé pour le champ
Non
value
FieldValue
Valeur par défaut
Non
valueType
ValueType
La validation standard peut être string, string[], number, date, boolean
Non
required
boolean
Le champ est-il obligatoire ?
Non
readOnly
boolean
Le champ est-il en lecture seule ?
Non
hidden
boolean
Le champ est-il masqué par défaut ?
Non
condition
RulesLogic
Règle d’affichage ou de masquage du champ selon une condition
Non
multi
boolean
Le champ est-il un champ multiple ?
Non
validation
ValidationType
Règle(s) de validation pour le champ
Non
raw
unknown
Données brutes pouvant être utilisées par le composant
Non

Types de composants component-types

Vous trouverez ci-dessous les types de composants qui peuvent être utilisés pour le rendu des champs.

Description
Type de composant
Balise AEM
aem-tag
Contenu AEM
aem-content
Booléen
boolean
Groupe de cases à cocher
checkbox-group
Conteneur
container
Fragment de contenu
aem-content-fragment
Date et heure
date-time
Fragment d’expérience
aem-experience-fragment
Sélection multiple
multiselect
Nombre
number
Groupe de cases d’option
radio-group
Référence
reference
Texte enrichi
richtext
Sélectionner
select
Tabulation
tab
Texte
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.

Exemple
code language-json
{
  "id": "aem-tag-picker",
  "fields": [
    {
      "component": "aem-tag",
      "label": "AEM Tag Picker",
      "name": "cq:tags",
      "valueType": "string"
    }
  ]
}
Capture d’écran
Capture d’écran du type de composant de balise AEM

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.

Type de validation
Type de valeur
Description
Requis
rootPath
string
Chemin d’accès que le sélecteur de contenu ouvre pour permettre à l’utilisateur de sélectionner le contenu AEM, ce qui limite la sélection à ce répertoire et à ses sous-répertoires.
Non
Exemple
code language-json
{
  "id": "aem-content-picker",
  "fields": [
    {
      "component": "aem-content",
      "name": "reference",
      "value": "",
      "label": "AEM Content Picker",
      "valueType": "string",
      "validation": {
            "rootPath": "/content/refresh"
        }
    }
  ]
}
Capture d’écran
Capture d’écran du type de composant de contenu AEM

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.

Type de validation
Type de valeur
Description
Requis
customErrorMsg
string
Message qui s’affichera si la valeur saisie n’est pas une valeur booléenne
Non
Exemple 1
code language-json
{
  "id": "boolean",
  "fields": [
    {
      "component": "boolean",
      "label": "Boolean",
      "name": "boolean",
      "valueType": "boolean"
    }
  ]
}
Exemple 2
code language-json
{
  "id": "another-boolean",
  "fields": [
    {
      "component": "boolean",
      "label": "Boolean",
      "name": "boolean",
      "valueType": "boolean",
      "validation": {
        "customErrorMsg": "Think, McFly. Think!"
      }
    }
  ]
}
Capture d’écran
Capture d’écran du type de composant booléen

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.

Exemple
code language-json
{
  "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" }
      ]
    }
  ]
}
Capture d’écran
Copie d’écran du type de composant de groupe de cases à cocher

Conteneur container

Un type de composant de conteneur permet de regrouper des composants. Il propose une configuration supplémentaire.

Configuration
Type de valeur
Description
Requis
collapsible
boolean
Le conteneur est-il réductible ?
Non
Exemple
code language-json
 {
  "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"
        }
      ]
    }
  ]
}
Capture d’écran
Capture d’écran du type de composant de conteneur

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.

Configuration
Type de valeur
Description
Requis
variationName
string
Nom de variable pour stocker la variation sélectionnée. Si elle n’est pas définie, aucun sélecteur de variation ne s’affiche
Non

Il propose également un type de validation supplémentaire.

Type de validation
Type de valeur
Description
Requis
rootPath
string
Chemin d’accès que le sélecteur de contenu ouvre pour que l’utilisateur puisse sélectionner le fragment de contenu, ce qui limite la sélection à ce répertoire et à ses sous-répertoires
Non
NOTE
L’éditeur universel valide les champs de fragment de contenu en fonction de leurs modèles ce qui vous permet d’appliquer des règles d’intégrité des données telles que des modèles d’expression régulière et des contraintes d’unicité.
Cela garantit que votre contenu répond aux besoins spécifiques de l’entreprise avant d’être publié.
Exemple 1
code language-json
[
  {
    "id": "aem-content-fragment",
    "fields": [
      {
        "component": "aem-content-fragment",
        "name": "picker",
        "label": "Content Fragment Picker",
        "valueType": "string",
        "variationName": "contentFragmentVariation",
        "validation": {
            "rootPath": "/content/refresh"
        }
      }
    ]
  }
]
Capture d’écran
Capture d’écran du sélecteur de fragment de contenu

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.

Configuration
Type de valeur
Description
Requis
displayFormat
string
Format d’affichage de la chaîne de date
Oui
valueFormat
string
Format de stockage de la chaîne de date
Oui

Il propose également un type de validation supplémentaire.

Type de validation
Type de valeur
Description
Requis
customErrorMsg
string
Message qui s’affichera si valueFormat n’est pas satisfait
Non
Exemple 1
code language-json
{
  "id": "date-time",
  "fields": [
    {
      "component": "date-time",
      "label": "Date & Time",
      "name": "date",
      "valueType": "date"
    }
  ]
}
Exemple 2
code language-json
{
  "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!"
      }
    }
  ]
}
Capture d’écran
Capture d’écran du type de composant Date et heure

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.

Configuration
Type de valeur
Description
Requis
variationName
string
Nom de variable pour stocker la variation sélectionnée. Si elle n’est pas définie, aucun sélecteur de variation ne s’affiche
Non

Il propose également un type de validation supplémentaire.

Type de validation
Type de valeur
Description
Requis
rootPath
string
Chemin d’accès que le sélecteur de contenu ouvre pour que l’utilisateur puisse sélectionner le fragment d’expérience, ce qui limite la sélection à ce répertoire et à ses sous-répertoires
Non
Exemple 1
code language-json
[
  {
    "id": "experience-fragment",
    "fields": [
      {
        "component": "aem-experience-fragment",
        "valueType": "string",
        "name": "experience-fragment",
        "label": "experience-fragment",
        "variationName": "experienceFragmentVariation",
        "validation": {
            "rootPath": "/content/refresh"
        }
      }
    ]
  }
]
Capture d’écran
Capture d’écran du sélecteur de fragment d’expérience

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.

Exemple 1
code language-json
{
  "id": "multiselect",
  "fields": [
    {
      "component": "multiselect",
      "name": "multiselect",
      "label": "Multi Select",
      "valueType": "string",
      "options": [
        { "name": "Option 1", "value": "option1" },
        { "name": "Option 2", "value": "option2" }
      ]
    }
  ]
}
Exemple 2
code language-json
{
  "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" }
          ]
        }
      ]
    }
  ]
}
Captures d’écran
Capture d’écran du type de composant à sélection multiple
Capture d’écran du type de composant à sélection multiple avec regroupement

Nombre number

Un type de composant numérique permet la saisie d’un nombre. Il propose d’autres types de validation.

Type de validation
Type de valeur
Description
Requis
numberMin
number
Nombre minimum autorisé
Non
numberMax
number
Nombre maximum autorisé
Non
customErrorMsg
string
Message qui s’affichera si numberMin ou numberMax n’est pas atteint
Non
Exemple 1
code language-json
{
  "id": "number",
  "fields": [
    {
      "component": "number",
      "name": "number",
      "label": "Number",
      "valueType": "number",
      "value": 0
    }
  ]
}
Exemple 2
code language-json
{
  "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."
      }
    }
  ]
}
Capture d’écran
Capture d’écran du type de composant numérique

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.

Exemple
code language-json
{
  "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" }
      ]
    }
  ]
}
Capture d’écran
Capture d’écran du type de composant de groupe radio

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.

Exemple
code language-json
{
  "id": "reference",
  "fields": [
    {
      "component": "reference",
      "label": "Reference",
      "name": "reference",
      "valueType": "string"
    }
  ]
}
Capture d’écran
Capture d’écran du type de composant de référence

Texte enrichi rich-text

Le texte enrichi permet une entrée de texte enrichi multiligne. Il propose d’autres types de validation.

Type de validation
Type de valeur
Description
Requis
maxSize
number
Nombre maximal de caractères autorisés
Non
customErrorMsg
string
Message qui s’affichera en cas de dépassement de la maxSize
Non
Exemple 1
code language-json
{
  "id": "richtext",
  "fields": [
    {
      "component": "richtext",
      "name": "rte",
      "label": "Rich Text",
      "valueType": "string"
    }
  ]
}
Exemple 2
code language-json
{
  "id": "another-richtext",
  "fields": [
    {
      "component": "richtext",
      "name": "rte",
      "label": "Rich Text",
      "valueType": "string",
      "validation": {
        "maxSize": 1000,
        "customErrorMsg": "That's about as funny as a screen door on a battleship."
      }
    }
  ]
}
Capture d’écran
Capture d’écran du type de composant de zone de texte

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.

Exemple
code language-json
{
  "id": "select",
  "fields": [
    {
      "component": "select",
      "label": "Select",
      "name": "select",
      "valueType": "string",
      "options": [
        { "name": "Option 1", "value": "option1" },
        { "name": "Option 2", "value": "option2" }
      ]
    }
  ]
}
Capture d’écran
Capture d’écran du type de composant sélectionné

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.

Exemple
code language-json
{
  "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"
    }
  ]
}
Capture d’écran
Capture d’écran du type de composant Onglet

Texte text

Le texte permet une seule ligne de saisie de texte. Elle inclut des types de validation supplémentaires.

Type de validation
Type de valeur
Description
Requis
minLength
number
Nombre minimum de caractères autorisés
Non
maxLength
number
Nombre maximal de caractères autorisés
Non
regExp
string
Expression régulière à laquelle le texte saisi doit correspondre
Non
customErrorMsg
string
Message qui s’affiche en cas de violation des règles minLength, maxLength et/ou regExp
Non
Exemple 1
code language-json
{
  "id": "simpletext",
  "fields": [
    {
      "component": "text",
      "name": "text",
      "label": "Simple Text",
      "valueType": "string"
    }
  ]
}
Exemple 2
code language-json
{
  "id": "another simpletext",
  "fields": [
    {
      "component": "text",
      "name": "text",
      "label": "Simple Text",
      "valueType": "string",
      "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?"
      }
    }
  ]
}
Capture d’écran
Capture d’écran du type de composant de texte
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab