Controles de formulario

Una vez que seleccionas un componente del formulario, se abre un asistente que muestra varias pestañas de configuración para permitir una mayor personalización para las diferentes funcionalidades. Compruebe el progreso en el panel de vista previa del asistente.

Cuando esté satisfecho con el diseño de un componente, seleccione Guardar.

La siguiente tabla describe la configuración y los controles disponibles para las pestañas del asistente común.

Pestaña del asistente	Descripción	Menciones Especiales
Visualización	Configure la forma en que se muestra el componente del formulario.	El nombre que establezcas en el campo obligatorio de Etiqueta se convierte en el NombreDePropiedad en la pestaña Clave de campo .
Datos	Configure un valor predeterminado que los usuarios finales verán en el campo de texto.	Aquí se pueden definir los componentes que pueden contener varios elementos (p. Ej., Casillas de selección, pestañas).
Validación	Configure los requisitos de validación para habilitar otros componentes de la interfaz de usuario.	N/A
Clave del campo	Configure el nombre de propiedad del componente que desea utilizar en el flujo de trabajo.	De forma predeterminada, este valor es pasado desde el campo Etiqueta de la pestaña Mostrar.
Condicional	Configure las condiciones para el componente.	Puedes establecer condiciones avanzadas, como Javascript o JSON.
Lógica	Configure la lógica que desencadena las condiciones.	N/A

Algunos componentes de formulario tienen pestañas específicas, por ejemplo:

Componente	Pestaña del asistente	Descripción
Fecha / Hora	Fecha	Configure las fechas mínimas y máximas disponibles para la selección.
	Hora	Configure el paso incremental para horas y minutos.
Día	Día	Configure la forma en que el usuario comercial selecciona el día (incremental o desde una lista desplegable).
	Mes	Configure la forma en que el usuario comercial selecciona el mes (incremental o desde una lista desplegable).
	Año	Configure la forma en que el usuario comercial selecciona el año (incremental o de una lista desplegable), y también el año mínimo y máximo disponible para la selección.
Editar cuadrícula	Plantillas	Personalizar los encabezados y filas de los datos de su cuadrícula de edición.
Asignación de datos	Diseño	Aplica cambios de diseño marginales a tu mapa de datos.

Visualización

Etiqueta : el título del componente.

Posición de la etiqueta: la posición de la etiqueta de un campo.

Descripción : el texto que aparece debajo del campo de entrada.

Información sobreherramientas : añade un icono de información sobre herramientas a un lado del icono. Introduzca el texto de la información sobre herramientas.

Clase de CSS personalizada : añade una clase de CSS personalizada al componente. Puede añadir varias clases, separadas por espacios.

Oculto : oculta un componente al mostrar el formulario.

Nota: El componente sigue apareciendo en el archivo JSON.

Ocultar etiqueta : oculta la etiqueta de un componente.

Deshabilitado : deshabilita un campo en el formulario.

Marcador de posición: el texto que aparece cuando el campo está vacío.

Prefijo : el texto que se muestra antes de un campo.

Sufijo : el texto que se muestra después de un campo.

Exclusivo : cuando se marca, el campo se considera único para el formulario.

Protegido : cuando se marca, hace que el campo esté disponible solo para entrada.

Persistente : cuando se marca, almacena un campo en la base de datos. Si no quieres guardar un campo en la base de datos, desactiva Persistente.

Vista de tabla : cuando se marca, muestra el valor de los envíos en la vista de tabla. Puede usarlo para los componentes secundarios que agregue dentro de Editar componentes de cuadrícula , para mostrar los componentes secundarios dentro de las filas. Si no se marca, los datos no se muestran en la fila contraída de Editar cuadrícula. Incluso si no se muestran los datos, puede configurar un componente mientras edita una fila.

Máscara de entrada : una máscara de entrada proporciona un formato predefinido. Por ejemplo, para un campo de número de teléfono, la máscara de entrada predeterminada sería [phone]. Los elementos de la máscara de entrada son:

• 9 - numérico
• a - alfabético
• * - alfanumérico

Datos

Valor predeterminado : el valor del campo antes de que los usuarios interactúen con él. El valor predeterminado anula el texto del marcador de posición.

Valores múltiples : cuando se marca, se pueden añadir varios valores al campo. Los valores aparecen como una matriz en la API y se puede ver el botón Añadir otro en el campo.

Contenido : la sección en la que se escribe el contenido de un componente.

Formato de datos : el formato moment.js que usas para guardar el campo. Por ejemplo, HH:mm:ss.

Rediseñar en : vuelve a dibujar este componente si cambia otro componente del formulario. Elige el evento en el que el componente debe volver a dibujarse en la lista desplegable. Los eventos predeterminados para elegir son Cualquier cambio y Enviar.

Validación

Obligatorio : cuando se marca, este campo debe tener un valor.

Validar en : determina cuándo este componente activa la validación de front-end. Elija un evento de la lista desplegable: Cambiar o Difuminar.

Longitud mínima : el requisito de longitud mínima que debe cumplir este campo.

Longitud máxima: el requisito de longitud máxima que debe cumplir este campo.

Longitud mínima de palabras: la cantidad mínima de palabras que se pueden añadir a este componente.

Longitud máxima de palabras: la cantidad máxima de palabras que se pueden añadir a este campo.

Patrón de expresión regular: el patrón de expresión regular que el componente debe pasar antes de poder enviar el formulario.

Etiqueta deerror : la etiqueta que se muestra cuando se muestra un mensaje de error de validación.

Mensaje de error personalizado: un mensaje de error personalizado que se mostrará si se produce un error.

Permitir solo los valores disponibles : cuando se marca, realiza una comprobación de validación para asegurarse de que el valor seleccionado es una opción disponible.

Clave del campo

Nombre de propiedad : el nombre de argumento correspondiente para un componente de la colección de argumentos.

Puedes usar el Nombre de propiedad para pasar argumentos (usando la actividad Establecer valores del formulario ) dentro del formulario, o para obtener valores fuera de un formulario (usando la actividad Obtener valores del formulario ).

Condicional

La pestaña Condicional del Creador de formularios te permite colocar condiciones en los componentes de tu formulario, para ocultarlos o mostrarlos.

La pestaña Condicional tiene dos secciones:

• Simple
• Condiciones avanzadas

Condiciones simples

La sección Simple de la pestaña Condicional te permite ocultar o mostrar un componente en función del valor de otro componente.

La sección Simple consta de tres campos:

1. Este componente debe mostrarse ; en esta lista desplegable, elija:

   • Verdadero si desea condicionar el momento en que se muestra el componente.
   • Falso si desea condicionar el momento en el que se oculta el componente.
2. Cuando el componente del formulario : en esta lista desplegable, elija un componente del formulario para que actúe como condición.

3. Contiene el valor : introduzca el valor que condiciona el componente a mostrar u ocultar.

   
   

   

   
   

Condiciones avanzadas

La sección Condiciones avanzadas le permite usar código JavaScript o JSONLogic para hacer combinaciones de condiciones.

Nota: La lógica avanzada anula los resultados de la lógica condicional simple .

En la sección Código JavaScript, introduce un código JavaScript personalizado.

A la variable Mostrar se le debe asignar un valor verdadero o falso . La variable de datos se utiliza para acceder a otros componentes del formulario a través de la clave API.

Para aprender a usar componentes condicionales, consulta la página del tutorial de componentes condicionales .

Lógica

La pestaña Lógica del Creador de formularios te permite crear condiciones y scripts de lógica avanzados que pueden cambiar el estado o el comportamiento del componente del formulario seleccionado.

Con la lógica avanzada, puedes cambiar dinámicamente los controles, la apariencia y la funcionalidad de un componente del formulario.

La lógica de un formulario consta de dos partes: el desencadenador y la acción.

Desencadenador

El desencadenador lógico es la condición en la que tiene lugar la acción. Por ejemplo, es posible que desees mostrar un campo de formulario específico solo cuando se selecciona una opción de casilla de verificación. En este caso, la opción de casilla de verificación es el desencadenador y la acción muestra el campo de formulario.

Hay cuatro tipos de desencadenadores lógicos:

Tipo de desencadenador	Descripción	Ejemplo
Simple	Seleccione el tipo de desencadenador y el valor que desea usar en su lógica.
Javascript	Proporcione una lógica de JavaScript para un componente de formulario o datos de formulario. Utilizar la sintaxis de JavaScript para crear lógicas complejas, como un bucle o un comportamiento dinámico.
Lógica JSON	Proporcionas una lógica JSON para un componente de formulario o datos del formulario. Recomendado en los casos en los que no se permite JavaScript. No admite bucles ni comportamientos dinámicos.
Evento	Se define un evento de componente que, una vez emitido por el componente correspondiente, desencadena la acción deseada.

Acción

La acción lógica es el comportamiento del componente del formulario que debe ocurrir en función de las condiciones lógicas que establezca (es decir, el desencadenador). Por ejemplo, puede activar un botón para usuarios de una edad específica. En este caso, el rango de edad es el desencadenador y la activación del botón es la acción.

Hay cuatro tipos de acciones lógicas:

Tipo de acción	Descripción	Ejemplo
Propiedad	El desencadenador cambia una de las propiedades disponibles del componente, como la información sobre herramientas, la descripción, la clase CSS, etc. Las propiedades disponibles dependen del tipo de componente desencadenador.
Valor	El desencadenador cambia el valor del componente correspondiente. La acción debe definirse utilizando la sintaxis de JavaScript.
Fusionar esquema de componentes	El desencadenador cambia los parámetros del esquema del componente que se encuentran en el JSON del componente. Para ver los parámetros del esquema que puedes cambiar, pasa el ratón por encima del componente correspondiente y haz clic en Editar JSON. Puede cambiar varios parámetros en una acción.
Acción personalizada	Una acción personalizada se define utilizando la sintaxis de JavaScript, de la misma manera que definiría el tipo de desencadenador de JavaScript.	N/A