Definiciones del modelo, campos y tipos de componentes field-types
Obtenga información acerca de los campos y los tipos de componentes que el Editor universal puede editar en el carril de propiedades con ejemplos. Descubra cómo puede instrumentar su propia aplicación creando una definición de modelo y vinculándola al componente.
Información general overview
Al adaptar sus propias aplicaciones para utilizarlas con el editor universal, debe instrumentar los componentes y definir qué campos y tipos de componentes pueden manipular en el carril de propiedades del editor. Para ello, cree un modelo y vincúlelo a él desde el componente.
Este documento proporciona información general sobre la definición de un modelo, los campos y los tipos de componentes disponibles, así como configuraciones de ejemplo.
Estructura de definición de modelo model-structure
Para configurar un componente a través del carril de propiedades en el Editor universal, debe existir una definición de modelo y estar vinculada al componente.
La definición del modelo es una estructura JSON que comienza con una matriz de modelos.
[
{
"id": "model-id", // must be unique
"fields": [] // array of fields which shall be rendered in the properties rail
}
]
Consulte la sección Campos de este documento para obtener más información sobre cómo definir la matriz fields.
Para usar la definición del modelo con un componente, se puede usar el atributo data-aue-model.
<div data-aue-resource="urn:datasource:/content/path" data-aue-type="component" data-aue-model="model-id">Click me</div>
Carga de una definición de modelo loading-model
Una vez creado un modelo, se puede hacer referencia a él como un archivo externo.
<script type="application/vnd.adobe.aue.model+json" src="<url-of-model-definition>"></script>
También puede definir el modelo en línea.
<script type="application/vnd.adobe.aue.model+json">
{ ... model definition ... }
</script>
Campos fields
Un objeto de campo tiene la siguiente definición de tipo.
componentComponentTypenamestringlabelFieldLabeldescriptionFieldDescriptionplaceholderstringvalueFieldValuevalueTypeValueTypestring, string[], number, date, booleanrequiredbooleanreadOnlybooleanhiddenbooleanmultibooleanvalidationValidationTyperawunknownTipos de componentes component-types
A continuación se indican los tipos de componentes que se pueden utilizar para procesar campos.
aem-tagaem-contentbooleancheckbox-groupcontaineraem-content-fragmentdate-timemultiselectnumberradio-groupreferencerichtextselecttabtextAEM Etiqueta de aem-tag
AEM AEM Un tipo de componente de etiqueta de habilita un selector de etiquetas de, que se puede utilizar para adjuntar etiquetas al componente.
| code language-json |
|---|
|
AEM Contenido de aem-content
AEM AEM Un tipo de componente de contenido de habilita un selector de contenido de la aplicación, que se puede utilizar para establecer referencias de contenido.
| code language-json |
|---|
|
Booleano boolean
Un tipo de componente booleano almacena un valor true/false simple procesado como alternancia. Ofrece un tipo de validación adicional.
customErrorMsgstring| code language-json |
|---|
|
| code language-json |
|---|
|
Grupo de casillas de verificación checkbox-group
Similar a un booleano, un tipo de componente de grupo de casillas de verificación permite la selección de varios elementos true/false, representados como varias casillas de verificación.
| code language-json |
|---|
|
Contenedor container
Un tipo de componente contenedor permite agrupar componentes. Ofrece una configuración adicional.
collapsibleboolean| code language-json |
|---|
|
Fragmento de contenido content-fragment
El selector de fragmentos de contenido se puede usar para seleccionar un fragmento de contenido y sus variaciones (si es necesario). Ofrece una configuración adicional.
variationNamestring| code language-json |
|---|
|
Fecha y hora date-time
Un tipo de componente de fecha y hora permite especificar una fecha, una hora o una combinación de ambas. Ofrece configuraciones adicionales.
displayFormatstringvalueFormatstringTambién ofrece un tipo de validación adicional.
customErrorMsgstringvalueFormat| code language-json |
|---|
|
| code language-json |
|---|
|
Fragmento de experiencias experience-fragment
El selector Fragmento de experiencia se puede usar para seleccionar un Fragmento de experiencia y sus variaciones (si es necesario). Ofrece una configuración adicional.
variationNamestring| code language-json |
|---|
|
Multiselect multiselect
Un tipo de componente de selección múltiple presenta varios elementos para su selección en una lista desplegable, incluida la capacidad de agrupar los elementos seleccionables.
| code language-json |
|---|
|
| code language-json |
|---|
|
Número number
Un tipo de componente numérico permite introducir un número. Ofrece tipos de validación adicionales.
numberMinnumbernumberMaxnumbercustomErrorMsgstringnumberMin o numberMax no se cumplen| code language-json |
|---|
|
| code language-json |
|---|
|
Grupo de radio radio-group
Un tipo de componente de grupo de radio permite una selección mutuamente excluyente de varias opciones representadas como un grupo similar a un grupo de casillas de verificación.
| code language-json |
|---|
|
Referencia reference
Un tipo de componente de referencia permite hacer referencia a otro objeto de datos del objeto actual.
| code language-json |
|---|
|
Texto enriquecido rich-text
El texto enriquecido permite la entrada de texto enriquecido multilínea. Ofrece tipos de validación adicionales.
maxSizenumbercustomErrorMsgstringmaxSize| code language-json |
|---|
|
| code language-json |
|---|
|
Seleccionar select
Un tipo de componente Seleccionar permite seleccionar una sola opción de una lista de opciones predefinidas en un menú desplegable.
| code language-json |
|---|
|
Pestaña tab
Un tipo de componente de pestaña le permite agrupar otros campos de entrada en varias pestañas para mejorar la organización del diseño para los autores.
Una definición de tab se puede considerar como un separador en la matriz de fields. Todo lo que venga después de tab se colocará en esa ficha hasta que se encuentre un nuevo(a) tab, después de lo cual se colocarán los siguientes elementos en la nueva ficha.
Si desea que los elementos aparezcan encima de todas las pestañas, deben definirse antes que las pestañas.
| code language-json |
|---|
|
Texto text
El texto permite introducir una sola línea de texto. Incluye tipos de validación adicionales.
minLengthnumbermaxLengthnumberregExpstringcustomErrorMsgstringminLength, maxLength o regExp| code language-json |
|---|
|
| code language-json |
|---|
|
