Acerca de los componentes de formulario

Componentes básicos

Campo de texto

You can use the Text Field component to input short text.

Área de texto

You can use the Text Area component to input long text. The Text Area component offers multi-line input.

The Rows setting allows you to set how many rows are visible in the Text Area component.

Número

You can use the Number component to input any number value.

• Use Thousands Separator - separates thousands with a comma.
• Require Decimal - always shows decimals, even if 0.
• Decimal Places - sets the maximum number of decimals displaying.

Contraseña

Puedes 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

You can use the Checkbox component to input boolean values (true or false).

Seleccionar casillas

You can use the Select Boxes component to allow users to choose multiple values from a list.

• Valores : te permite añadir opciones a tu 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

You can use the Drop-down List component to display lists in a dropdown format.

• Widget Type - select the type of widget you want to use.

• 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.

  

• Item Template - HTML template that allows you to control the way values are displayed in the dropdown list. You can access the values in the dropdown list, through the item variable. For example, use item.label to access a certain value in the dropdown list

• Refresh Options On - refreshes data when another field changes.

• Refresh Options On Blur - refreshes data when another field is blurred.

• Clear Value on Refresh Options - clears the components value when the Refresh On Field option is changed.

• Read Only Value - only show the value when in Read-Only mode.

• Choice.js options - input raw JSON object to use as options for the Select component.

• Use exact search - disables search algorithm threshold.

• Custom Default Value - create a custom default value using JavaScript or JSONLogic.

Radio

You can use the Radio component to allow users to choose only one value from a list.

• Values - input the values that appear in the list. The Label column is the value visible to users. The Value column is the name stored in the database.

Botón

You can use the Button component to allow users to perform various actions in the form.

• Action - select the action you want the button to perform:
  • Enviar : envía el formulario.
  • Clic : realiza la operación de clic.
  • Reset Form - resets the form fields.
  • 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 llamado calculate y luego crear una Lógica llamada calculate para el componente donde quieras para generar el resultado.

• Restablecer datos del bloque DO : cuando se marca para los botones de tipo Clic, establece los datos que se reciben del bloque DO. Ayuda a aumentar el rendimiento cuando los datos encontrados en otras páginas no están en la página actual.
• Tema : elige el tema de color del botón en la lista desplegable.
• Tamaño : elige el tamaño del botón en la lista desplegable.
• Botón Bloquear : 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

You can use the HTML Element to display a single HTML element in your form and configure it based on your use-case.

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>, onmouseover y onload.

• HTML Tag - The tag of the HTML Element.
• CSS Class - The CSS Class that can be added for this HTML Element. You can input multiple classes, by separating them with single spaces.
• Atributos : los atributos del elemento HTML. Solo se permiten atributos seguros, como: src, href y 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 Acciones de formulario, debes utilizar el componente Elemento HTML . Consulta los siguientes tutoriales:

• Mostrar imágenes
• Mostrar archivos PDF

Contenido

You can use the Content component to add information in your form, that is display-only. The value of the component is not submitted back to the server.

• Actualizar al cambiar : vuelve a representar el componente Contenido cada vez que cambia un valor en el formulario.

Correo electrónico

Puedes utilizar el componente Correo electrónico para añadir un campo para introducir direcciones de correo electrónico. El componente Correo electrónico es similar al componente Campo de texto .

Número de teléfono

You can use the Phone Number component to add a field for inputting phone numbers.

• Input Mask - Provides a predefined format for the phone number. For the phone number field, the default format is [phone].
  • 9 - numeric
  • a - alphabetical
  • * : alfanumérico
• Input Mask Placeholder Char - You can use a character as a placeholder in the field.
  Nota:

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

Fecha/hora

You can use the Date/Time component to input dates, times, or input both.

• Format - the format used for displaying the datetime value.

• Enable Date Input - allows users to input dates for this field.

• Use Input to add moment.js for minDate - enables the user to use an input for minDate moment function, instead of a calendar.

• Use calendar to set minDate - enables the user to use a calendar to set the minDate.

• Use Input to add moment.js for maxDate - enables the user to use an input for maxDate moment function, instead of a calendar.

• Usar calendario para establecer maxDate : permite utilizar un calendario para establecer el maxDate.

• Disable specific dates or dates by range - add dates that you want to ban. For example, 2027-08-11.

• Custom Disabled Dates - allows you to ban certain dates using a customized function.

• Disable weekends - allows you to ban weekends.

• Disable weekdays - allows you to ban weekdays.

• Enable Time Input - allows users to input time for this field.

• Tamaño del paso de horas : el número de horas para aumentar o disminuir en el selector de tiempo.

• Tamaño del paso por minuto : el número de minutos a incrementar o disminuir en el selector de tiempo.

• 12 Hour Time (AM/PM) - displays time in 12 hour periods, using AM or PM.

• Fecha predeterminada : establece el valor predeterminado en una fecha específica utilizando las funciones de Moment.js . Por ejemplo, moment().substract(10, 'days').

  

Día

You can use the Day component to ask for input for Day, Month, and Year, either through a number-type field or a select-type field.

• Type / Type of input - choose to give input for Day, Month, or Year either by typing in a number or by selecting options from a dropdown list.

Minimum / Maximum Year - choose the minimum / maximum year that can be entered.

• Require Day - the Day field must be filled in before the form renders.

• Require Month - the Month field must be filled in before the form renders.

• Require Year - the Year field must be filled in before the form renders.

• Maximum / Minimum Day - choose a minimum / maximum day that can be entered. You can also use Moment.js functions. For example, you can use moment().add(10, 'days').

  

Hora

You can use the Time component to input time in different formats.

• Input Type - select the type of widget you would like to use for inputting time: HTML5 Time Input (users can choose the time from a given panel) or Text Input with Mask (users can manually input the time).

Moneda

You can use the Currency component to display financial amounts using a certain currency. The component has an input mask that displays the currency icon and automatically adds commas based on the number that the user inputs. The component allows two decimal values.

• 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.

Archivo

Puedes utilizar el componente Archivo para permitir a los usuarios cargar archivos en un formulario o descargar archivos de un formulario.

• Edición modal : abre un modal para editar el valor de este componente.
• Directorio : coloca todos los archivos cargados en este componente, en el directorio especificado. La cadena debe terminar con /.
• Solo cargar : permite a los usuarios solo cargar archivos. La opción de descarga no estará disponible cuando se marque.
• Tipos de archivo : te permite especificar los tipos de archivo, para clasificar los tipos de archivos que carga el usuario. Recomendado cuando un usuario carga varios tipos de archivos y quieres que el usuario especifique el tipo de cada archivo cargado.
• Patrón de archivo : te permite especificar las extensiones de archivo que se podrán cargar. No se cargarán otras extensiones de archivo que no se especifiquen.
• Tamaño mínimo del archivo : establece el tamaño mínimo del archivo cargado.
• Tamaño máximo del archivo : establece el tamaño máximo del archivo cargado.

Estudio

You can use the Survey component to allow users to answer multiple questions, by choosing only one value from a list.

• Questions - add the questions that the users should answer.
• Values - add the options that the user can select per question.

Componentes de diseño

Columnas

You can use the Columns component to display other components in line, grouping them as columns.

• Column Properties - add columns to the component and configure them, by adjusting their Width, Offset, Push and Pull properties. After configuring the columns' layout, you can drag and drop other components into the Columns component.
• Ajustar columnas automáticamente : ajusta automáticamente las columnas si hay componentes anidados ocultos.

Panel

Puedes utilizar el componente Panel para agrupar componentes de campo y añadirlos en un panel con nombre.

• Theme - choose the theme of the panel from the dropdown list. The Bootstrap class is added to the wrapper div.

• Collapsible - allows you to collapse the panel.

• Contraído inicialmente : la propiedad solo está disponible cuando se marca Contraíble . Contrae el panel cuando se carga el formulario.

  Tabla

Puedes utilizar el componente Tabla para crear una tabla que contenga otros componentes del 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. Puedes utilizarlo al crear tablas con varias filas, que contienen el mismo contenido.
• Cell Alignment- choose the horizontal alignment of the cells in the table.
• Striped - adds striped shading to rows.
• Bordered - adds visible borders to the table.
• Hover - highlights row when hovering the mouse over it.
• Condensed - condenses the size of the table.

Pestañas

You can use the Tabs component to group components into tabs. When the form renders, you can view one tab at a time.

The Tabs setting allows you to add, configure, reorder, and remove tabs.

Datos

Contenedor

You can use the Container component to wrap a set of fields into an object with a container key. A Container with the key financialPerformance submits as:

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

Cuadrícula de datos

Puedes utilizar el componente Cuadrícula de datos para añadir varios componentes en línea en una sola cuadrícula. Puedes arrastrar y soltar varios componentes en la cuadrícula de datos para que coincidan con tu caso de uso. El componente Cuadrícula de datos te permite añadir varios campos duplicados en línea y en una única cuadrícula.

In the Form Renderer window, the rows inside the Data Grid component can be added or removed.

• Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form renders.
• Allow Reorder - reorder rows by dragging and dropping them.
• Equal Column Width - makes the widths of columns equal.
• Habilitar grupos de filas : permite separar filas en grupos. Añade grupos, etiquétalos, 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 mostrar los datos en formato de tabla. Puedes arrastrar y soltar varios componentes del formulario en Editar cuadrícula para capturar un montón de datos.

When the form renders, you can add a duplicate of the Edit Grid, by clicking Add Another.

• Abrir primera fila si está vacía
  • abre la primera fila cuando Editar cuadrícula está vacía.
• Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form renders.
• Plantilla de encabezado/fila/pie de página : personaliza la cuadrícula utilizando JavaScript.
• Add Another Text - changes the name of the Add Another button.
• Save Row Text - changes the text of the Save Row button.
• Remove Row Text - changes the text of the Remove Row button.

Comparación entre componentes de control de rejilla

La siguiente tabla 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 utilizar cada componente de control de cuadrícula: Cuadrícula de datos y Editar cuadrícula.

Leyenda: ✅= 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	❌	❌