Actividades

Más reciente

False

Actividades del flujo de trabajo

Última actualización 29 de abr. de 2024

Acerca de los componentes de formulario

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. El componente Contraseña tiene las mismas opciones que el componente Campo de texto .

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 la base de datos.

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 la base de 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.
- Clic : realiza la operación de clic.
- Restablecer formulario : restablece los campos del formulario.
- Evento: cuando un usuario hace clic en el botón, un determinado evento comienza a ejecutarse. Al seleccionar Evento, debes introducir el evento en el campo Evento de botón. Ahora puedes utilizar el nombre del evento para crear una lógica personalizada que desencadenará otro componente.
  Por ejemplo, si quieres que un botón calcule el valor de dos componentes y lo envíe a un tercero, puedes crear un botón con el evento denominado calculate y luego, crear una lógica denominada calculate para el componente al que deseas enviar el resultado.
Restablecer datos del bloque Hacer : cuando se marca para los botones de tipo 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 bloque : abarca todo el ancho del contenedor delimitador.
Icono izquierdo / derecho : añade la cadena de clase de icono completa para mostrar el icono. Por ejemplo, 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: Todas las etiquetas y atributos HTML no seguros se eliminan cuando se representa el formulario para evitar la creación de scripts entre sitios. Las etiquetas y atributos que se eliminan son: <script>, <embed>, <style>, onmouseovery onload.

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 las acciones de formulario, debes utilizar el componente Elemento HTML . Consulte los siguientes tutoriales:

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 : vuelve a representar 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. El componente de correo electrónico es similar al componente de campo de texto .

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 (999) 999-9999.
- 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 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 a incrementar o reducir en el selector de tiempo.
Tamaño de paso de minuto : el número de minutos a 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, 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.

PDF

Puedes utilizar el componente PDF para representar archivos PDF dentro de tus acciones de formulario.

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 de campo y añadirlos en 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 carga el formulario.

Tabla

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

Número de filas / columnas : introduce el número de filas y columnas que quieres que se muestren en la tabla
Clonar componentes de fila : clona los componentes dentro de las filas y los añade en 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

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"
      }
   }
}{
    data: {
    financialPerformance {
        grossProfitMargin: "0.83",
      netProfitMargin: "0.43"
      }
   }
}

Cuadrícula de datos

Puedes usar el componente Cuadrícula de datos para agregar múltiples componentes en línea en una sola cuadrícula. Puede arrastrar y soltar varios componentes en la cuadrícula de datos para que coincidan con su caso práctico. El componente Cuadrícula de datos le permite agregar múltiples campos duplicados en línea y en una sola cuadrícula.

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ñada grupos, etiquételos y seleccione las filas para cada grupo.
Inicializar vacío : la cuadrícula de datos no tendrá filas visibles cuando se inicialice.

Editar cuadrícula

Puede utilizar el componente Editar cuadrícula para mostrar datos en formato de tabla. 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.
Plantilla de encabezado / fila / pie de página : personaliza la cuadrícula con JavaScript.
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 .

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 de datos y Editar cuadrícula.

Leyenda: available = No disponible.

Capacidad	Cuadrícula de datos	Editar cuadrícula
Escenarios recomendados	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	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	Máximo 7 columnas para 100 filas. Riesgo de reducción del rendimiento.	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