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 panel 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 panel de propiedades del editor. Para ello, cree un modelo y estableciendo el vínculo con é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 panel de propiedades del 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 panel
}
]
Consulte la sección Campos de este documento para obtener más información sobre cómo definir la matriz fields.
Puede vincular un modelo a un componente de dos maneras: usando la definición de componente o a través de la instrumentación.
Vinculación con la definición del componente component-definition
Este es el método preferido para vincular el modelo al componente. Al hacerlo, puede mantener el vínculo de forma centralizada en la definición del componente, lo que permite arrastrar componentes entre distintos contenedores.
Solo hay que incluir la propiedad model en el objeto de componente en la matriz components del archivo component-definition.json.
Para obtener más información, consulte el documento Definición de componente.
Vinculación a través de la instrumentación instrumentation
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>
- Los proyectos que hayan implementado el vínculo al modelo a través de la instrumentación seguirán funcionando tal cual sin necesidad de cambios.
- Si define el modelo en la definición de componente así como en la instrumentación, se utilizará siempre la instrumentación.
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>
De forma alternativa, 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.
componentComponentTypelabelFieldLabeldescriptionFieldDescriptionvalueFieldValuevalueTypeValueTypestring, string[], number, date o booleanrequiredbooleanreadOnlybooleanhiddenbooleanmultibooleanTenga en cuenta que no se permite anidar contenedores para campos múltiples en el panel de propiedades
validationValidationTyperawunknowncampo Nombre y anidamiento nesting
El campo name puede señalar directamente a una propiedad del recurso actual o, en el caso de los componentes de cq:Pages, también puede utilizar una ruta de acceso a una propiedad anidada. Por ejemplo:
"name": "teaser/image/fileReference"
tipos 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-timeaem-experience-fragmentmultiselectnumberradio-groupreferencerichtextselecttabtextEtiqueta de AEM aem-tag
El tipo de componente de etiquetas de AEM habilita un selector de etiquetas de AEM que se puede utilizar para adjuntar etiquetas al componente.
| code language-json |
|---|
|
Contenido de AEM aem-content
Un tipo de componente de contenido de AEM habilita un selector de contenido de AEM, que se puede utilizar para seleccionar cualquier recurso de AEM. A diferencia del componente de referencia, que solo puede seleccionar recursos, el componente de contenido de AEM puede hacer referencia a cualquier contenido de AEM. Ofrece un tipo de validación adicional.
rootPathstring| code language-json |
|---|
|
Booleano boolean
Un tipo de componente booleano almacena un valor true/false simple procesado como conmutador. 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, incluida la compatibilidad con varios campos. Ofrece una configuración adicional. Tenga en cuenta que no se permite anidar contenedores para campos múltiples en el panel de propiedades
collapsibleboolean| code language-json |
|---|
|
| 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.
variationNamestringTambién ofrece un tipo de validación adicional.
rootPathstring| 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 experiencia 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.
variationNamestringTambién ofrece un tipo de validación adicional.
rootPathstring| code language-json |
|---|
|
Selección múltiple 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 opciones 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 habilita un selector de recursos AEM, que se puede utilizar para seleccionar cualquier recurso de AEM al que hacer referencia. A diferencia del componente de contenido de AEM, que puede seleccionar cualquier recurso de AEM, el componente de referencia solo puede hacer referencia a recursos. Ofrece un tipo de validación adicional.
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.
| code language-json |
|---|
|
Seleccionar select
Un tipo de componente de selección 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 pestaña hasta que se encuentre un nuevo tab, tras lo cual los siguientes elementos se situarán en la nueva pestaña.
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 |
|---|
|
