Adobe recomienda utilizar la captura de datos moderna y ampliable Componentes principales para crear un nuevo Forms adaptable o adición de Forms adaptable a páginas de AEM Sites. Estos componentes representan un avance significativo en la creación de Forms adaptable, lo que garantiza experiencias de usuario impresionantes. Este artículo describe un enfoque más antiguo para crear Forms adaptable mediante componentes de base.
Versión | Vínculo del artículo |
---|---|
AEM as a Cloud Service | Haga clic aquí |
AEM 6.5 | Este artículo |
Crear un formulario adaptable mediante un esquema JSON como modelo de formulario requiere una comprensión básica del esquema JSON. Se recomienda leer el siguiente contenido antes de este artículo.
Adobe Experience Manager Forms admite la creación de un formulario adaptable mediante un esquema JSON existente como modelo de formulario. Este esquema JSON representa la estructura en la que el sistema back-end de su organización produce o consume datos. El esquema JSON que utilice debe cumplir con las especificaciones v4.
Las funciones principales del uso de un esquema JSON son:
Un esquema JSON consta de tipos de elementos simples y complejos. Los elementos tienen atributos que agregan reglas al elemento. Cuando estos elementos y atributos se arrastran a un formulario adaptable, se asignan automáticamente al componente del formulario adaptable correspondiente.
Esta asignación de elementos JSON con componentes del formulario adaptable se produce de la siguiente forma:
"birthDate": {
"type": "string",
"format": "date",
"pattern": "date{DD MMMM, YYYY}",
"aem:affKeyword": [
"DOB",
"Date of Birth"
],
"description": "Date of birth in DD MMMM, YYYY",
"aem:afProperties": {
"displayPictureClause": "date{DD MMMM, YYYY}",
"displayPatternType": "date{DD MMMM, YYYY}",
"validationPatternType": "date{DD MMMM, YYYY}",
"validatePictureClause": "date{DD MMMM, YYYY}",
"validatePictureClauseMessage": "Date must be in DD MMMM, YYYY format."
}
Elemento, propiedades o atributos JSON. | Componente de formulario adaptable |
---|---|
Propiedades de cadena con restricción enum y enumNames. Sintaxis.
|
Componente desplegable:
|
Propiedad de la cadena con restricción de formato. Por ejemplo, correo electrónico y fecha. Sintaxis.
|
|
|
Campo de texto |
propiedad numérica |
Campo numérico con subtipo ajustado en flotante |
propiedad entera |
Campo numérico con subtipo ajustado en entero |
propiedad booleana |
Cambio |
propiedad de objeto |
Panel |
propiedad de matriz | Panel repetible con el mínimo y máximo igual a minItems y maxItems respectivamente. Solo es compatible con matrices homogéneas. Por lo tanto, la restricción de elementos debe ser un objeto y no una matriz. |
El formulario adaptable utiliza la información disponible en el esquema JSON para asignar cada campo generado. En particular:
title
sirve como etiqueta para los componentes del formulario adaptable.description
se define como una descripción larga para un componente del formulario adaptable.default
sirve como valor inicial de un campo del formulario adaptable.maxLength
se establece como atributo maxlength
del componente del campo de texto.minimum
, maximum
, exclusiveMinimum
y exclusiveMaximum
se utilizan para el componente Cuadro numérico.DatePicker component
, se facilitan las propiedades de esquema JSON adicionales minDate
y maxDate
.minItems
y maxItems
se utilizan para restringir el número de elementos/campos que se pueden agregar o quitar de un componente de panel.readOnly
define el atributo readonly
de un componente del formulario adaptable.required
marca el campo del formulario adaptable como obligatorio, mientras que en el panel (donde el tipo es un objeto), los datos JSON finales enviados poseen campos con el valor vacío correspondiente a ese objeto.pattern
se ajusta como el patrón de validación (expresión regular) en el formulario adaptable.Este es un ejemplo de esquema JSON.
{
"$schema": "https://json-schema.org/draft-04/schema#",
"definitions": {
"employee": {
"type": "object",
"properties": {
"userName": {
"type": "string"
},
"dateOfBirth": {
"type": "string",
"format": "date"
},
"email": {
"type": "string",
"format": "email"
},
"language": {
"type": "string"
},
"personalDetails": {
"$ref": "#/definitions/personalDetails"
},
"projectDetails": {
"$ref": "#/definitions/projectDetails"
}
},
"required": [
"userName",
"dateOfBirth",
"language"
]
},
"personalDetails": {
"type": "object",
"properties": {
"GeneralDetails": {
"$ref": "#/definitions/GeneralDetails"
},
"Family": {
"$ref": "#/definitions/Family"
},
"Income": {
"$ref": "#/definitions/Income"
}
}
},
"projectDetails": {
"type": "array",
"items": {
"properties": {
"name": {
"type": "string"
},
"age": {
"type": "number"
},
"projects": {
"$ref": "#/definitions/projects"
}
}
},
"minItems": 1,
"maxItems": 4
},
"projects": {
"type": "array",
"items": {
"properties": {
"name": {
"type": "string"
},
"age": {
"type": "number"
},
"projectsAdditional": {
"$ref": "#/definitions/projectsAdditional"
}
}
},
"minItems": 1,
"maxItems": 4
},
"projectsAdditional": {
"type": "array",
"items": {
"properties": {
"Additional_name": {
"type": "string"
},
"Additional_areacode": {
"type": "number"
}
}
},
"minItems": 1,
"maxItems": 4
},
"GeneralDetails": {
"type": "object",
"properties": {
"age": {
"type": "number"
},
"married": {
"type": "boolean"
},
"phone": {
"type": "number",
"aem:afProperties": {
"sling:resourceType": "/libs/fd/af/components/guidetelephone",
"guideNodeClass": "guideTelephone"
}
},
"address": {
"type": "string"
}
}
},
"Family": {
"type": "object",
"properties": {
"spouse": {
"$ref": "#/definitions/spouse"
},
"kids": {
"$ref": "#/definitions/kids"
}
}
},
"Income": {
"type": "object",
"properties": {
"monthly": {
"type": "number"
},
"yearly": {
"type": "number"
}
}
},
"spouse": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"Income": {
"$ref": "#/definitions/Income"
}
}
},
"kids": {
"type": "array",
"items": {
"properties": {
"name": {
"type": "string"
},
"age": {
"type": "number"
}
}
},
"minItems": 1,
"maxItems": 4
}
},
"type": "object",
"properties": {
"employee": {
"$ref": "#/definitions/employee"
}
}
}
Las claves de definición se utilizan para identificar esquemas reutilizables. Las definiciones de esquema reutilizables se utilizan para crear fragmentos. Es similar a identificar tipos complejos en XSD. A continuación, se muestra un ejemplo de un esquema JSON con definiciones:
{
"$schema": "https://json-schema.org/draft-04/schema#",
"definitions": {
"address": {
"type": "object",
"properties": {
"street_address": { "type": "string" },
"city": { "type": "string" },
"state": { "type": "string" }
},
"required": ["street_address", "city", "state"]
}
},
"type": "object",
"properties": {
"billing_address": { "$ref": "#/definitions/address" },
"shipping_address": { "$ref": "#/definitions/address" }
}
}
El ejemplo anterior define un registro de cliente en el que cada cliente tiene una dirección de envío y de facturación. La estructura de ambas direcciones es la misma (las direcciones tienen una dirección de calle, una ciudad y un estado), por lo que no se recomienda duplicar las direcciones. También facilita la el hecho de agregar o eliminar campos para cualquier cambio futuro.
Puede usar la propiedad aem:afProperties para preconfigurar el campo del esquema JSON y asignarlo a un componente de formulario adaptable personalizado. A continuación se muestra un ejemplo:
{
"properties": {
"sizeInMB": {
"type": "integer",
"minimum": 16,
"maximum": 512,
"aem:afProperties" : {
"sling:resourceType" : "/apps/fd/af/components/guideTextBox",
"guideNodeClass" : "guideTextBox"
}
}
},
"required": [ "sizeInMB" ],
"additionalProperties": false
}
JavaScript es el lenguaje de expresión de los formularios adaptables. Todas las expresiones son expresiones JavaScript válidas y utilizan API de modelos de scripts de formularios adaptables. Puede preconfigurar los objetos de formulario para evaluar una expresión en un evento de formulario.
Utilice la propiedad aem:afproperties para preconfigurar expresiones de formularios adaptables o scripts para los componentes de formularios adaptables. Por ejemplo, cuando se activa el evento initialize, el siguiente código establece el valor del campo phone e imprime un valor en el registro:
"telephone": {
"type": "string",
"pattern": "/\\d{10}/",
"aem:affKeyword": ["phone", "telephone","mobile phone", "work phone", "home phone", "telephone number", "telephone no", "phone number"],
"description": "Telephone Number",
"aem:afProperties" : {
"sling:resourceType" : "fd/af/components/guidetelephone",
"guideNodeClass" : "guideTelephone",
"events": {
"Initialize" : "this.value = \"1234567890\"; console.log(\"ef:gh\") "
}
}
}
Debe ser miembro del grupo forms-power-user para configurar scripts o expresiones para el objeto de formulario. En la siguiente tabla se enumeran todos los eventos de script admitidos para un componente de formulario adaptable.
Componente \ Evento | initialize |
Calcular | Visibilidad | Validate | Habilitado | Implementación de valor | Haga clic | Opciones |
---|---|---|---|---|---|---|---|---|
Campo de texto | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Campo numérico | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Stepper numérico | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Botón de opción | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Teléfono | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Interruptor | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Botón | ![]() |
![]() |
![]() |
![]() |
||||
Casilla de verificación | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
Lista desplegable | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
Opción de imagen | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
Campo de introducción de fecha | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Selector de fecha | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Correo electrónico | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Archivo adjunto | ![]() |
![]() |
![]() |
![]() |
![]() |
|||
Imagen | ![]() |
![]() |
||||||
Dibujo | ![]() |
![]() |
||||||
Panel | ![]() |
![]() |
Algunos ejemplos de uso de eventos en un JSON ocultan un campo en el evento initialize y configuran el valor de otro campo en el evento value commit. Para obtener información detallada sobre crear expresiones para los eventos de script, consulte Expresiones de formularios adaptables.
Este es un ejemplo de código JSON para los ejemplos mencionados anteriormente.
"name": {
"type": "string",
"aem:afProperties": {
"events" : {
"Initialize" : "this.visible = false;"
}
}
}
"Income": {
"type": "object",
"properties": {
"monthly": {
"type": "number",
"aem:afProperties": {
"events" : {
"Value Commit" : "IncomeYearly.value = this.value * 12;"
}
}
},
"yearly": {
"type": "number",
"aem:afProperties": {
"name": "IncomeYearly"
}
}
}
}
Puede agregar las siguientes restricciones a los elementos del esquema JSON para limitar los valores aceptables para un componente de formulario adaptable:
Propiedad de esquema |
Tipo de datos |
Descripción |
Componente |
|
Cadena |
Especifica el límite superior para valores numéricos y fechas. Se incluye el valor máximo de forma predeterminada. |
|
|
Cadena |
Especifica el límite inferior para valores numéricos y fechas. Se incluye el valor mínimo de forma predeterminada. |
|
|
Booleano |
Si es true, el valor numérico o la fecha especificados en el componente del formulario deben ser menores que el valor numérico o la fecha especificados para la propiedad máxima. Si es false, el valor numérico o la fecha especificados en el componente del formulario deben ser menores o iguales al valor numérico o a la fecha especificados para la propiedad máxima. |
|
|
Booleano |
Si es true, el valor numérico o la fecha especificados en el componente del formulario deben ser mayores que el valor numérico o la fecha especificados para la propiedad mínima. Si es false, el valor numérico o la fecha especificados en el componente del formulario deben ser mayores o iguales al valor numérico o la fecha especificados para la propiedad mínima. |
|
|
Cadena |
Especifica el número mínimo de caracteres permitidos en un componente. La longitud mínima debe ser igual o mayor de cero. |
|
maxLength |
Cadena | Especifica el número máximo de caracteres permitidos en un componente. La longitud máxima debe ser igual o mayor de cero. |
|
|
Cadena |
Especifica la secuencia de caracteres. Un componente acepta los caracteres si se ajustan al patrón especificado. La propiedad pattern se asigna al patrón de validación del componente de formulario adaptable correspondiente. |
|
maxItems |
Cadena | Especifica el número máximo de elementos de una matriz. Los elementos máximos deben ser iguales o superiores a cero. | |
minItems |
Cadena | Especifica el número mínimo de elementos de una matriz. Los elementos mínimos deben ser iguales o superiores a cero. |
Para permitir que todos los Forms adaptables basados en esquemas JSON generen datos compatibles con esquemas al enviar el formulario, siga estos pasos:
https://server:host/system/console/configMgr
.Los formularios adaptables no son compatibles con las siguientes construcciones de esquema JSON:
¿Por qué no puedo arrastrar elementos individuales de un subformulario (estructura generada a partir de cualquier tipo complejo) para subformularios repetibles (los valores minOccours o maxOccurs son superiores a 1)?
En un subformulario repetible, debe utilizar el subformulario completo. Si solo le interesan los campos selectivos, utilice toda la estructura y elimine los no deseados.
Tengo una estructura larga y compleja en el Buscador de contenido. ¿Cómo puedo encontrar un elemento específico?
Tiene dos opciones:
¿Cuál debe ser la extensión del archivo de esquema JSON?
La extensión del archivo de esquema JSON debe ser .schema.json. Por ejemplo, <filename>.schema.json.