El componente de opciones del formulario de componentes principales permite seleccionar entre las opciones predefinidas en distintos formatos.
El componente Opciones del formulario del componente principal permite enviar diferentes tipos de opciones presentadas de diferentes maneras y está diseñado para utilizarse junto con el componente del contenedor de formulario.
El editor de contenido puede definir la presentación de las opciones, etiquetas y opciones individuales en el cuadro de diálogo configurar.
Este documento describe la versión 1 del componente de opciones de formulario, introducido originalmente con la versión 1.0.0 de los componentes principales con AEM 6.3.
En la tabla siguiente se muestra la compatibilidad de v1 del componente Opciones de formulario.
Versión del componente | AEM 6.3 | AEM 6.4 |
---|---|---|
v2 | Compatible | Compatible |
v1 | Compatible | Compatible |
Este documento describe la versión 1 del componente de opciones de formulario.
Para obtener más información sobre la versión actual del componente de opciones de formulario, consulte el documento Componente de opciones de formulario.
El siguiente es un ejemplo tomado de We.Retail.
<div class="cmp cmp-form aem-GridColumn aem-GridColumn--default--12">
<form method="POST" action="/content/we-retail/us/en/experience.html?lang=es" id="new_form" name="new_form" enctype="multipart/form-data" class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
<input type="hidden" name=":formstart" value="/content/we-retail/us/en/experience/jcr:content/root/responsivegrid/container?lang=es">
<div class="cmp cmp-options aem-GridColumn aem-GridColumn--default--12">
<fieldset class="form-group checkbox">
<legend>What is your favorite type of toast?</legend>
<div class="checkbox-item">
<label>
<input type="checkbox" name="toasttypes" value="dry">
Plain dry toast
</label>
</div>
<div class="checkbox-item">
<label>
<input type="checkbox" name="toasttypes" value="french">
French toast
</label>
</div>
<div class="checkbox-item">
<label>
<input type="checkbox" name="toasttypes" value="texas">
Texas toast
</label>
</div>
</fieldset>
</div>
</form></div>
"container": {
"columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
"columnCount": 12,
"gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
":items": {
"options": {
"columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
":type": "weretail/components/form/options",
"name": "toastTypes",
"jcr:title": "What is your favorite type of toast?",
"source": "local",
"type": "checkbox"
}
},
":itemsOrder": [
"options"
],
":type": "weretail/components/form/container"
}
La exportación de JSON desde los componentes principales requiere la versión 1.1.0 de los componentes principales. Consulte la información de compatibilidad para los componentes principales v1 para obtener más información.
El cuadro de diálogo de configuración permite al autor del contenido definir el tipo de opciones que se deben presentar, las etiquetas y las opciones disponibles.
TiposPresentación de las opciones
Título : el título que se mostrará como etiqueta para las opciones
Nombre : el nombre del campo enviado con los datos del formulario.
Origen : donde se definen las opciones
Mensaje de ayuda : una sugerencia para el usuario sobre lo que se puede introducir en el campo
No hay ningún cuadro de diálogo de diseño para el componente Opciones de formulario.
La documentación técnica más reciente sobre el componente de opciones de formulario se encuentra en GitHub.
Todo el proyecto de componentes principales se puede descargar desde GitHub.
Puede encontrar más información sobre el desarrollo de componentes principales en la documentación para desarrolladores de componentes principales.