Acerca de los componentes de formulario

Un componente de formulario le ofrece la posibilidad de recopilar datos de usuario. Los componentes de la interfaz de usuario se agrupan en categorías, según su funcionalidad, de la siguiente manera:

• Básica
• Avanzado
• Diseño
• Datos

Componentes básicos

Campo de texto

Puede utilizar el componente Campo de texto para introducir texto corto.

Área de texto

Puede utilizar el componente Área de texto para introducir texto explicativo. El componente Área de texto ofrece entrada de varias líneas.

La configuración Filas te permite establecer cuántas filas son visibles en el componente Área de texto .

Número

Puede utilizar el componente numérico para introducir cualquier valor numérico.

• Usar separador de miles : separa miles con una coma.
• Requerir decimal : siempre muestra decimales, incluso si 0.
• Decimales : establece el número máximo de decimales que se muestran.

Contraseña

Puede utilizar el componente Contraseña para introducir contraseñas. El texto se muestra como asteriscos en lugar del valor real introducido para el secreto.

Casilla de verificación

Puedes utilizar el componente Casilla de verificación para introducir valores booleanos (verdadero o falso).

Seleccionar casillas

Puede utilizar el componente Seleccionar cuadros para permitir a los usuarios elegir varios valores de una lista.

Valores : te permite añadir opciones al componente Cuadro de selección. La columna Etiqueta es el valor visible para los usuarios. La columna Valor es el nombre almacenado en los datos.

Etiqueta/encabezado

Ruta del archivo/carpeta

Puedes usar el componente Etiqueta / Encabezado para agregar etiquetas a otros componentes del formulario. También puede usarla para separar secciones de su formulario.

• Tamaño de etiqueta : elige un tamaño o tipo para el componente Etiqueta / Encabezado en la lista desplegable.

Puede utilizar el componente Ruta del archivo / carpeta para obtener la ruta del archivo o la carpeta del documento de un usuario.

Para proporcionar una ruta de archivo en el Representador de formularios:

1. Haz clic en el botón Seleccionar del componente de la ruta del archivo / carpeta . Se abrirá la ventana Control de archivos .
2. Selecciona un archivo.
3. Haz clic en Abrir en la ventana de Control de archivos .

Para proporcionar una ruta de carpeta en el Representador de formularios:

1. Haz clic en el botón Seleccionar del componente de la ruta del archivo / carpeta . Se abrirá la ventana Buscar carpeta .
2. Selecciona una carpeta.

3. Haz clic en Aceptar en la ventana Buscar carpeta .

   
   

   

   
   

• Tipo de selección : elige el tipo de ruta que los usuarios pueden seleccionar: Archivo o Carpeta.

• Mostrar todos los archivos : cuando se marca, los usuarios pueden seleccionar cualquier tipo de archivo desde el Controlde archivos. Si no se marca, se muestra la sección Añadir extensiones , donde debe elegir manualmente qué tipo de archivos pueden seleccionar los usuarios en el Control de archivos.

  
  

  

  
  

Nota: puedes limitar o expandir los tipos de archivos que el usuario puede seleccionar en la sección Añadir extensiones de la pestaña Visualización .

Lista desplegable

Puedes utilizar el componente Lista desplegable para mostrar listas en formato desplegable.

• Tipo de widget : selecciona el tipo de widget que deseas utilizar.

• Valores de origen de datos : introduce los valores que aparecen en la lista desplegable. La columna Etiqueta es el valor visible para los usuarios. La columna Valor es el nombre almacenado en los datos.

  
  

  

  
  
• Plantilla de elemento: plantilla HTML que te permite controlar la forma en que se muestran los valores en la lista desplegable. Puedes acceder a los valores de la lista desplegable, a través de la variable item . Por ejemplo, utilice item.label para acceder a un valor determinado en la lista desplegable
• Opciones de actualización activadas : actualiza los datos cuando cambia otro campo.
• Opciones de actualización al difuminar: actualiza los datos cuando otro campo está difuminado.
• Borrar valor en las opciones de actualización : borra el valor de los componentes cuando se cambia la opción Actualizar en campo .
• Valor de solo lectura : muestra el valor cuando está en modo de solo lectura.
• Opciones de Choice.js : objeto JSON sin formato de entrada para usar como opciones para el componente Seleccionar .
• Usar búsqueda exacta : deshabilita el umbral del algoritmo de búsqueda.
• Valor predeterminado personalizado : crea un valor predeterminado personalizado mediante JavaScript o JSONLogic.

Radio

Puede utilizar el componente de Radio para permitir a los usuarios elegir solo un valor de una lista.

• Valores : introduce los valores que aparecen en la lista. La columna Etiqueta es el valor visible para los usuarios. La columna Valor es el nombre almacenado en la base de datos.

Botón

Puede utilizar el componente Botón para permitir a los usuarios realizar varias acciones en el formulario.

• Acción : selecciona la acción que quieres que realice el botón:

  • Enviar : envía el formulario y ejecuta el bloque Hacer .
  • Hacerclic : realiza la operación de clic y ejecuta el bloque Hacer .
  • Restablecer formulario : restablece los campos del formulario.
  • Evento : cuando un usuario hace clic en el botón, comienza a ejecutarse un determinado evento. Al seleccionar Evento , debe introducir el evento en el campo Evento de botón .
• Restablecer datos del bloque Hacer: cuando se marca para los botones de Tipo de clic , establece los datos que se reciben del bloque Hacer . Ayuda a aumentar el rendimiento cuando los datos que se encuentran en otras páginas no se encuentran en la página actual.
• Tema : elige el color del botón en la lista desplegable.
• Tamaño : elige el tamaño del botón en la lista desplegable.
• Botón de bloqueo : se extiende hasta la anchura completa del contenedor delimitador.
• Icono izquierdo / derecho : añade la cadena de clase de icono completa para mostrar un icono específico. Por ejemplo, puedes añadir fa fa-plus.

Componentes avanzados

Elemento HTML

Puede usar el elemento HTML para mostrar un solo elemento HTML en su formulario y configurarlo según su caso de uso.

Nota: habilita la propiedad Deshabilitar saneamiento dentro de la actividad Crear formulario para mostrar todo el contenido no seguro dentro de un elemento HTML.

• Etiqueta HTML : la etiqueta del elemento HTML.
• Clase CSS : la clase CSS que se puede añadir para este elemento HTML. Puede introducir varias clases separándolas con espacios simples.
• Atributos : los atributos del elemento HTML. Solo se permiten atributos seguros, como: src, hrefy title.
• Contenido : el contenido del elemento HTML.
• Actualizar al cambiar : vuelve a representar el elemento HTML cada vez que cambia un valor en el formulario.

Para mostrar imágenes y archivos PDF dentro de los formularios, debe utilizar el componente Elemento HTML . Consulte los siguientes tutoriales:

• Visualización de imágenes.
• Visualización de archivos PDF.

Contenido

Puedes utilizar el componente de Contenido para añadir información en tu formulario solo para mostrar. El valor del componente no se envía al servidor.

• Actualizar al cambiar : representa el componente de Contenido cada vez que cambia un valor del formulario.

Correo electrónico

Puede utilizar el componente Correo electrónico para añadir un campo para introducir direcciones de correo electrónico.

Número de teléfono

Puede utilizar el componente Número de teléfono para añadir un campo para introducir números de teléfono.

• Máscara de entrada : proporciona un formato predefinido para el número de teléfono. Para el campo de número de teléfono, el formato predeterminado es [phone].
• 9 - numérico
• a - alfabético
• \ * - alfanumérico
• Carácter del marcador de posición de lamáscara de entrada : puedes usar un carácter como marcador de posición en el campo.

Nota: El carácter del marcador de posición se reemplaza por un espacio si se usa dentro de la máscara.

Fecha/hora

Puede utilizar el componente Fecha / Hora para introducir fechas, horas o ambos.

• Formato : el formato utilizado para mostrar el valor de fecha y hora.
• Habilitar entrada de fecha : permite a los usuarios introducir fechas para este campo.
• Usar entrada para agregar moment.js para FechaMín : permite al usuario usar una función de entrada para minDate momento, en lugar de un calendario.
• Usar calendario para establecer la FechaMín : permite al usuario usar un calendario para configurar el minDate.
• Usar entrada para agregar moment.js para FechaMáx : permite usar una entrada para la función momento maxDate , en lugar de un calendario.
• Usar calendario para establecer la FechaMáx : permite al usuario usar un calendario para configurar el maxDate.
• Deshabilitar fechas específicas o fechas por intervalo : agregue las fechas que desea prohibir. Por ejemplo, 2027-08-11.
• Fechas deshabilitadas personalizadas : te permite prohibir ciertas fechas usando una función personalizada.
• Deshabilitar fines de semana : le permite prohibir los fines de semana.
• Deshabilitar los días laborables : le permite prohibir los días laborables.
• Habilitar entrada de hora : permite a los usuarios introducir la hora en este campo.
• Tamaño de paso de hora : el número de horas que hay que incrementar o reducir en el selector de tiempo.
• Tamaño de paso de minuto : el número de minutos que hay que incrementar o reducir en el selector de tiempo.
• Formato de 12 horas (AM / PM) : muestra la hora en periodos de 12 horas, usando AM o PM.
• Fecha predeterminada : establece el valor predeterminado en una fecha específica mediante funciones Moment.js . Por ejemplo, puedes utilizar la siguiente función: moment().substract(10, 'days').
  
  

  

  
  

Día

Puede utilizar el componente Día para solicitar el Día, el Mesy el Año, ya sea a través de un campo de tipo numérico o de tipo seleccionado.

• Tipo / Tipo de entrada : elige dar entrada para Día, Mes o Año escribiendo un número o seleccionando opciones de una lista desplegable.

Año mínimo / máximo : elige el año mínimo / máximo que se puede introducir.

• Requerir día : el campo Día debe rellenarse antes de que se represente el formulario.
• Mes obligatorio: el campo del Mes debe rellenarse antes de que se represente el formulario.
• Requerir año : el campo Año debe rellenarse antes de que se represente el formulario.
• Día máximo / mínimo : elige un día mínimo / máximo que se puede introducir. También puede usar las funciones de Moment.js . Por ejemplo, puedes utilizar moment().add(10, 'days').
  
  

  

  
  

Hora

Puede utilizar el componente Hora para introducir la hora en diferentes formatos.

• Tipo de entrada : selecciona el tipo de widget que te gustaría usar para introducir la hora: Entrada de hora HTML5 (los usuarios pueden elegir la hora desde un panel determinado) o Entrada de texto con máscara (los usuarios pueden introducir la hora manualmente).

Moneda

Puede utilizar el componente Moneda para mostrar importes financieros utilizando una determinada moneda. El componente tiene una máscara de entrada que muestra el icono de moneda y agrega comas automáticamente en función del número que introduzca el usuario. El componente permite dos valores decimales.

• Moneda : elige una moneda determinada de la lista desplegable.

Estudio

Puede utilizar el componente Encuesta para permitir a los usuarios responder a varias preguntas eligiendo solo un valor de una lista.

• Preguntas : añade las preguntas que los usuarios deben responder.
• Valores : añade las opciones que el usuario puede seleccionar por pregunta.

Componentes de diseño

Columnas

Puedes utilizar el componente Columnas para mostrar otros componentes en línea, agrupándolos como columnas.

• Propiedades de columna : añade columnas al componente y configúralas ajustando sus propiedades de Ancho, Desplazamiento, Insertar y Incorporar. Después de configurar el diseño de las columnas, puede arrastrar y soltar otros componentes en el componente Columnas .
• Ajustar columnas automáticamente: ajusta automáticamente las columnas si hay componentes anidados ocultos.

Panel

Puede utilizar el componente Panel para agrupar componentes y añadirlos dentro de un panel con nombre.

• Tema : elige el tema del panel en la lista desplegable. La clase Boottrap se agrega al div contenedor.
• Plegable : le permite contraer el panel.
• Contraído inicialmente : la propiedad solo está disponible cuando se marca Plegable . Contrae el panel cuando se ha cargado el formulario.

Tabla

Puedes utilizar el componente Tabla para crear una tabla que contenga otros componentes de formulario dentro de las columnas y filas de la tabla.

• Número de filas / columnas : introduce el número de filas o columnas que quieres que se muestren en la tabla.
• Clonar componentes de fila : clona los componentes dentro de las filas y los añade también a las filas restantes. Puede usarlo al crear tablas con varias filas que contienen el mismo contenido.
• Alineación de celdas: elige la alineación horizontal de las celdas de la tabla.
• A rayas : añade un tono de rayas a las filas.
• Bordeado : añade bordes visibles a la tabla.
• Mantener el puntero: resalta la fila al pasar el ratón sobre ella.
• Condensado : comprime el tamaño de la tabla.

Pestañas

Puede utilizar el componente Pestañas para agrupar componentes en pestañas. Cuando se representa el formulario, puede ver una pestaña a la vez.

La configuración de Pestañas te permite añadir, configurar, reordenar y eliminar pestañas.

Datos

Oculto

Puede utilizar el componente Oculto para crear una propiedad de recurso que se puede configurar de forma personalizada dentro de un formulario. No se muestra en formas representadas.

Contenedor

Puede utilizar el componente Contenedor para ajustar un conjunto de campos en un objeto con una clave de contenedor. Un contenedor con la clave financialPerformance se envía como:

{
    data: {
      financialPerformance {
        grossProfitMargin: "0.83",
      netProfitMargin: "0.43"
      }
   }
}

Cuadrícula de datos

Puedes utilizar el componente Cuadrícula de datos para representar varias filas de datos, de forma similar a una tabla de datos. Puede arrastrar y soltar varios componentes en la cuadrícula de datos para que coincidan con su caso práctico.

En la ventana Representador de formulario , las filas dentro del componente Cuadrícula de datos se pueden agregar o eliminar.

• Deshabilitar la adición / eliminación de filas : oculta los botones que permiten añadir o eliminar filas cuando se representa el formulario.
• Permitir reordenación: reordena las filas arrastrándolas y soltándolas.
• Igual anchura de columna: iguala los anchos de las columnas.
• Habilitar grupos de filas: permite separar las filas en grupos. Añade grupos, etiquétalos y selecciona las filas para cada grupo.
• Inicializar vacío : la cuadrícula de datos no tendrá filas visibles cuando se inicialice.

Editar cuadrícula

Puedes utilizar el componente Editar cuadrícula para representar varias filas de datos, de forma similar a una tabla de datos. Puede arrastrar y soltar varios componentes del formulario en Editar cuadrículapara capturar muchos datos.

Cuando se representa el formulario, puedes añadir un duplicado de Editar cuadrículahaciendo clic en Añadir otro.

• Abrir primera fila cuando esté vacía: abre la primera fila cuando Editar cuadrícula está vacía.
• Deshabilitar la adición / eliminación de filas : oculta los botones que permiten añadir o eliminar filas cuando se representa el formulario.
• Añadir otro texto : cambia el nombre del botón Añadir otro .
• Guardar texto de fila : cambia el texto del botón Guardar fila .
• Eliminar texto de fila : cambia el texto del botón Eliminar fila .

La pestaña Plantillas es específica solo del componente Editar cuadrícula . Las plantillas de encabezado, filay pie de página te permiten personalizar la cuadrícula con JavaScript. Puedes modificar el tipo de componentes que se muestran en las filas dentro de una cuadrícula o el aspecto del encabezado / pie de página.

Plantilla de encabezado

Esta es la Plantilla de Lodash utilizada para representar el encabezado del componente Editar cuadrícula .

Importante: la plantilla de encabezado no funciona con Actionsde formulario.

Hay dos variables disponibles:

• valor : la matriz de datos de la fila.
• componentes : la matriz de componentes de la cuadrícula.

Plantilla de fila

Esta es la Plantilla de Lodash utilizada para representar cada fila del componente Editar cuadrícula .

Importante: la plantilla de fila no funciona con Actionsde formulario.

Hay tres variables disponibles:

• fila : objeto de los datos de una fila.
• componentes : la matriz de componentes de la cuadrícula.
• estado : estado de la fila actual (borrador / guardado).

Para añadir eventos de tipo Clic , añade las siguientes clases a los elementos: editRow y removeRow.

Plantilla de pie de página

Esta es la Plantilla de Lodash utilizada para representar el pie de página del componente Editar cuadrícula .

Hay dos variables disponibles:

• valor : la matriz de datos de la fila.
• componentes : la matriz de componentes de la cuadrícula.

Cuadrícula

Puede utilizar el componente de Cuadrícula para representar varias filas de datos, de forma similar a una tabla de datos. Lacuadrícula es un componente de solo lectura que puede usar para mostrar grandes cantidades de datos. Puede arrastrar y soltar varios componentes de formulario en el componente de Cuadrícula .

• Ordenables : ordena los datos dentro de las columnas en orden ascendente o descendente. Se ordenan los datos en runtime, en Form Renderer.
• Filtrable : filtra los datos dentro de cada columna. Filtrar los datos en runtime, en Form Renderer.
• Columnas redimensionables : cambia el ancho de las columnas en tiempo de ejecución en el Representador de formulario. La capacidad de tamaño ajustable Columna (s) le permite ver mejor los datos dentro de las columnas.

• Paginación : muestra los datos del componente de cuadrícula (vista previa) en las páginas numeradas. La capacidad de paginación también incluye establecer el número de elementos por página.

  
  

  

  
  

Para obtener más información sobre cómo utilizar el componente de cuadrícula , consulta Utilizar la cuadrícula.

Comparación entre componentes de control de rejilla

La tabla siguiente compara las capacidades de los controles de cuadrícula disponibles en el Diseñador de formularios. La tabla también describe los escenarios recomendados para usar cada componente de control de cuadrícula: Cuadrícula, Cuadrícula de datosy Editar cuadrícula.

Leyenda: = No disponible.

Capacidad	Cuadrícula	Cuadrícula de datos	Editar cuadrícula
Escenarios recomendados	Muestra un gran número de datos de solo lectura (capacidad de solo lectura).	Mostrar un pequeño conjunto de datos que el usuario debe editar (capacidad de edición en línea).	Mostrar un pequeño conjunto de datos que el usuario debe editar (capacidad de edición en línea del subformulario).
Número de filas recomendado	Ilimitado (soporte de paginación de 100 filas).	No más de 100 filas. Riesgo de reducción del rendimiento más allá de las cifras recomendadas.	No más de 100 filas. Riesgo de reducción del rendimiento más allá de las cifras recomendadas.
Número de columnas recomendado	Ilimitado.	Máximo de 7 columnas por cada 100 filas. Riesgo de rendimiento reducido	Máximo 7 columnas para 100 filas. Riesgo de reducción del rendimiento.
Editable
Paginación
Ordenable
Filtrable
Columna redimensionable en el runtime
Agrupación de filas
Lógica y condiciones
Grandes opciones de personalización mediante el uso de plantillas
Búsqueda global