DocumentationAEM as a Cloud ServiceGuide de l’utilisateur

Définitions de modèles, champs et types de composants field-types

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Administration
  • Développeur

Découvrez les champs et les types de composants que l’éditeur universel peut modifier dans le rail des propriétés avec des exemples. Découvrez comment vous pouvez instrumenter votre propre application en créant une définition de modèle et en la liant au composant.

Vue d’ensemble overview

Lorsque vous adaptez vos propres applications pour les utiliser avec l’éditeur universel, vous devez instrumenter les composants et définir les champs et les types de composants qu’ils peuvent manipuler dans le rail des propriétés de l’éditeur. Pour ce faire, créez un modèle et liez-le à partir du composant.

Ce document présente la définition d’un modèle, ainsi que les champs et les types de composants disponibles, avec des exemples de configuration.

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

Structure de la définition de modèle model-structure

Pour configurer un composant via le rail de propriétés de l’éditeur universel, une définition de modèle doit exister et être liée au composant.

La définition de 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 rail
  }
]

Pour plus d’informations sur la définition de votre tableau fields, reportez-vous à la section Fields de ce document.

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 créé, un modèle 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 intégré.

<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é où 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
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 pour afficher ou masquer le champ en fonction d’une condition
Non
multi
boolean
Le champ est-il un champ multiple ?
Non
validation
ValidationType
Règle ou règles de validation du 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 que vous pouvez utiliser pour les champs de rendu.

Description
Type de composant
AEM balise
aem-tag
AEM Contenu
aem-content
Booléen
boolean
Groupe de cases à cocher
checkbox-group
Conteneur
container
Fragment de contenu
aem-content-fragment
Date Time
date-time
Multiselect
multiselect
Nombre
number
Groupe de cases d’option
radio-group
Référence
reference
Texte enrichi
richtext
Select
select
Onglet
tab
Texte
text

AEM balise aem-tag

Un type de composant de balise AEM active un sélecteur de balise AEM, qui peut être utilisé pour joindre des balises au composant.

Sample
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 définir des références de contenu.

Sample
code language-json 
{
  "id": "aem-content-picker",
  "fields": [
    {
      "component": "aem-content",
      "name": "reference",
      "value": "",
      "label": "AEM Content Picker",
      "valueType": "string"
    }
  ]
}
Capture d’écran
Capture d’écran du type de composant de contenu AEM

Booléen boolean

Un type de composant booléen stocke une simple valeur true/false rendue en tant que basculement. Il offre un type de validation supplémentaire.

Type de validation
Type de valeur
Description
Requis
customErrorMsg
string
Message qui s'affiche 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

Tout comme une valeur booléenne, un type de composant de groupe de cases à cocher permet de sélectionner plusieurs éléments true/false, rendus sous la forme de plusieurs cases à cocher.

Sample
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
Capture d’écran du type de composant de groupe de cases à cocher

Conteneur container

Un type de composant de conteneur permet le regroupement de composants. Il propose une configuration supplémentaire.

Configuration
Type de valeur
Description
Requis
collapsible
boolean
Le conteneur est-il réductible ?
Non
Sample
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 variations (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 non défini, aucun sélecteur de variation n’est affiché.
Non
Exemple 1
code language-json 
[
  {
    "id": "aem-content-fragment",
    "fields": [
      {
        "component": "aem-content-fragment",
        "name": "picker",
        "label": "Content Fragment Picker",
        "valueType": "string",
        "variationName": "contentFragmentVariation"
      }
    ]
  }
]
Capture d’écran
Capture d’écran du sélecteur de fragment de contenu

Heure de date 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 avec lequel afficher la chaîne de date
Oui
valueFormat
string
Format dans lequel stocker 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’affiche 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 d’heure de date

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 variations (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 non défini, aucun sélecteur de variation n’est affiché.
Non
Exemple 1
code language-json 
[
  {
    "id": "aem-experience-fragment",
    "fields": [
      {
        "component": "aem-experience-fragment",
        "name": "picker",
        "label": "Experience Fragment Picker",
        "valueType": "string",
        "variationName": "experienceFragmentVariation"
      }
    ]
  }
]
Capture d’écran
Capture d’écran du sélecteur de fragment d’expérience

Multisélection 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 multi-select
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 offre des types de validation supplémentaires.

Type de validation
Type de valeur
Description
Requis
numberMin
number
Nombre minimum autorisé
Non
numberMax
number
Nombre maximal autorisé
Non
customErrorMsg
string
Message qui s’affichera si numberMin ou numberMax n’est pas satisfait
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 de plusieurs options rendues sous la forme d’un groupe semblable à un groupe de cases à cocher.

Sample
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 permet une référence à un autre objet de données de l’objet actif.

Sample
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 saisie de texte enrichi multiligne. Il offre des types de validation supplémentaires.

Type de validation
Type de valeur
Description
Requis
maxSize
number
Nombre maximal de caractères autorisés
Non
customErrorMsg
string
Message qui s’affiche si maxSize est dépassé
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 Zone de texte

Sélectionner select

Un type de composant sélectionné permet de sélectionner une seule option dans une liste d’options prédéfinies d’un menu déroulant.

Sample
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 Onglets vous permet de regrouper d’autres champs de saisie sur plusieurs onglets afin d’améliorer l’organisation de la mise en page pour les auteurs.

Une définition tab peut être considérée comme un séparateur dans le tableau de fields. Tout ce qui suit un tab est placé sur cet onglet jusqu’à ce qu’un nouvel tab soit rencontré, où les éléments suivants seront placés sur le nouvel onglet.

Si vous souhaitez que les éléments apparaissent au-dessus de tous les onglets, ils doivent être définis avant les onglets.

Sample
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 comprend 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 d’entrée doit correspondre
Non
customErrorMsg
string
Message qui s’affichera si minLength, maxLength et/ou regExp sont enfreints
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