# 4. Procesos\_Maquetador de formulario **URL:** \ **Category:** BModeler\ **Tags:** actividades, bmodeler, productos, procesos, instructivo\ **Created:** [27 Agosto, 2026 22:34 UTC](https://bc.finneg.com/t/4-procesos-maquetador-de-formulario/7222 "2026-08-27T22:34:28Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![Anahi\_Blanco](https://bc.finneg.com/user_avatar/bc.finneg.com/anahi_blanco/32/21200_2.png) [@Anahi\_Blanco](https://bc.finneg.com/u/Anahi_Blanco)\ **Post date:** [27 Agosto, 2026 22:34 UTC](https://bc.finneg.com/t/4-procesos-maquetador-de-formulario/7222/1 "2026-08-27T22:34:28Z")
# Maquetador de formulario El maquetador de formularios de BModeler es la herramienta visual integrada dentro de las actividades de inicio (por formulario) y las actividades de usuario. Está diseñado bajo una interfaz de “arrastrar y soltar” (drag and drop), lo que permite a los diseñadores estructurar campos de manera sencilla para que los usuarios finales —tanto internos de la organización como invitados externos— carguen y validen información. A continuación, se presenta un detalle explicativo de sus funcionalidades y características clave: ## 1. Estructura y Organización El maquetador se conforma por dos pestañas: Formulario (construcción del formulario) y Estilos (configuración del estilo a aplicar al formulario). ![4. Procesos_Actividades-4.1.6 Maquetador de formulario](https://bc.finneg.com/uploads/default/original/3X/0/4/0445e99d89359d947eded474d17489d22d34cf13.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-1](https://bc.finneg.com/uploads/default/original/3X/9/8/98693a6abe0c54fba32d5705c4f866d737cd0025.png) ## 2. Formulario Esta pantalla cuenta con las siguientes secciones: - **Añadir:** lista de campos (widgets) disponibles. - **Editar:** una vez que el campo es arrastrado al panel derecho, se habilita esta solapa para poder realizar la configuración. ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-2](https://bc.finneg.com/uploads/default/original/3X/9/4/943d4e20f5fdb9e03add555bce20569bd9711645.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-3](https://bc.finneg.com/uploads/default/original/3X/c/9/c9f37ff33b60b4a52b5d7d49952362c6d1e16adb.png) Los diferentes campos de carga (widgets) se organizan mediante contenedores, los controles de los contenedores aparecen una vez que se arrastró el primer campo: - **Columnas:** Cada contenedor puede configurarse en una o varias columnas para distribuir los widgets visualmente. - **Duplicar y Eliminar:** Es posible replicar exactamente un contenedor completo con un solo clic (botón de copiar) o eliminarlo de forma directa con el icono del tacho de basura. - **Paginado (“Dividir formulario en pasos”):** El diseñador puede activar esta opción para que cada contenedor del lienzo se comporte como una página individual. Al usuario final se le presentará un formulario paginado con botones para avanzar paso a paso. Si esta opción se desactiva, todo el contenido se mostrará de corrido en una sola página con desplazamiento vertical (scroll). ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-5](https://bc.finneg.com/uploads/default/original/3X/f/9/f98161df2c7ac21cc403338e0b5c95a924b881fb.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-6](https://bc.finneg.com/uploads/default/original/3X/d/a/dadccc71047d74c0bce290d7b9384709748c7533.png) - **Visualización responsive:** se puede ir diseñando el formulario y ver como se visualiza en diferentes resoluciones. El maquetador incluye una botonera superior que permite alternar la vista previa entre PC/Escritorio, Tablet y Teléfono móvil. ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-7](https://bc.finneg.com/uploads/default/original/3X/c/1/c174400c1ff12ad59ee50644797b092d9d6f35b1.png) - **Vista previa:** al hacer clic se visualiza el resultado final del formulario (como lo visualizará quien lo complete). Ej: En caso de querer ver cómo se visualizará el formulario en un teléfono móvil y con división en pasos. Para volver a seguir editando se debe hacer clic en el botón “Volver a editar”. ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-8](https://bc.finneg.com/uploads/default/original/3X/b/6/b6d14710a939e031514d7727ad0556cf4f150f15.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-9](https://bc.finneg.com/uploads/default/original/3X/7/4/7497326819789692e4dbee70e649446e548e6117.png) ## 3. Widgets ### 3.1. Configuración y Propiedades Al seleccionar cualquier elemento arrastrado, se habilita la pestaña de edición para ajustar sus propiedades individuales: - **Campo Requerido (Obligatorio):** Si se activa esta propiedad, el usuario final no podrá completar el formulario ni avanzar en el proceso hasta que el campo contenga datos (el botón de continuar permanecerá bloqueado). - **Solo Lectura:** Permite mostrar información fija o precalculada que el usuario no podrá editar, útil en etapas de validación o control. ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-10](https://bc.finneg.com/uploads/default/original/3X/6/6/66aa6ecb64f754e15a23765809e0bc9b8f0e117e.png) - **Título y Textos de Ayuda:** Se puede activar o desactivar el _título_ del widget, definir una _descripción_ explicativa en la parte inferior y configurar un _placeholder_ (texto indicativo gris dentro del campo). ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-11](https://bc.finneg.com/uploads/default/original/3X/f/c/fca9857f4dd2c39ebdb0e6a9dc7b85f83db5bb1a.png) - **Guardar en Atributo (Persistencia de Datos):** Todo dato que se requiera utilizar en etapas posteriores del proceso debe guardarse en un atributo. El maquetador asiste al usuario filtrando y forzando que el tipo de atributo coincida exactamente con la naturaleza del widget (por ejemplo, el widget de número solo permite guardar o crear atributos numéricos). ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-12](https://bc.finneg.com/uploads/default/original/3X/a/2/a27a08ea21ffdec52d72f362675a6d2c249df825.png) ### 3.2. Tipos El maquetador cuenta con una paleta diversa de elementos para capturar diferentes tipos de datos: #### 3.2.1. Texto Para cadenas generales (línea simple) o bloques extensos (TextArea). ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-13](https://bc.finneg.com/uploads/default/original/3X/8/5/85f7d4d4a03556bbe9aed776230e9e6349d5805a.png) #### ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-14](https://bc.finneg.com/uploads/default/original/3X/d/f/df0f296d3e3aa4204ce5a2b0e98870eab14927b1.png)3.2.2. Números y Fechas Campos validados para valores numéricos, fechas o fecha y hora, que incluyen funcionalidades avanzadas como fechas relativas (por ejemplo, definir por defecto “hoy menos 2 días”). ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-15](https://bc.finneg.com/uploads/default/original/3X/f/0/f049ccf048df2678493dc871b6ba34d4951c296e.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-16](https://bc.finneg.com/uploads/default/original/3X/2/c/2c96585b2a4287b404c52e88a43ea2767cb47814.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-17](https://bc.finneg.com/uploads/default/original/3X/f/9/f9e70845bce5a40fa2cd4b0a112eeefb6200606d.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-18](https://bc.finneg.com/uploads/default/original/3X/f/0/f0f641e5e9baa62c1adb4d8f3982a065f2c6258f.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-19](https://bc.finneg.com/uploads/default/original/3X/c/1/c16df44b6053f6da2e986bda635d05537d7b2787.png) #### 3.2.3. Selectores de opciones - **Checkbox y Radio Button:** Para selecciones múltiples o exclusivas. ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-20](https://bc.finneg.com/uploads/default/original/3X/3/9/390d707cc23aea28de507d0c96d54f8ad85252bc.png) En el caso de Radio Button, se puede editar las opciones (1) y valor (2) que se guardará cuando se seleccionen. ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-21](https://bc.finneg.com/uploads/default/original/3X/5/6/5600e1efd93cc204718b2fe41c734688c25a22ba.png) - **Selector:** Desplegables que pueden cargarse de forma estática (escribiendo clave-valor a mano) o de forma dinámica (realizando consultas automatizadas a un diccionario de datos o API). ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-22](https://bc.finneg.com/uploads/default/original/3X/2/1/21fba99ca77e03d1cda0ea21585fe4e98becec92.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-23](https://bc.finneg.com/uploads/default/original/3X/4/8/485843caefa37df044b0e0fcbf7983025e28aa5f.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-24](https://bc.finneg.com/uploads/default/original/3X/6/c/6c58a5e05b611a6436926f4230fb1830f0a12c24.png) En el caso de seleccionar que sea dinámico, se puede indicar si se quiere que sea **Simple** o **Anidado**. ![imagen](https://bc.finneg.com/uploads/default/original/3X/1/6/16b40e4e39a23b6b0fada5898b9884c152df7078.png) - **Simple** : Lo primero que se debe configurar es si se quiere utilizar datos del Diccionario de Datos de Finnegans o no. En el campo “Diccionario de datos o API”, cambiando entre los iconos de la **T** o las tres rayas horizontales se selecciona si se quiere seleccionar un maestro existente o ingresar la URL de una API, según se muestra a continuación ![imagen](https://bc.finneg.com/uploads/default/original/3X/5/c/5cc32b026f6304f5d33a0d3050d0f55fdb06638f.png) ![imagen](https://bc.finneg.com/uploads/default/original/3X/7/6/76b90768e272b75a5b68aa19dd9d772bcb3057e9.png) Si se selecciona un maestro, se puede configurar una cabecera de requerirlo: ![imagen](https://bc.finneg.com/uploads/default/original/3X/0/5/0511c6394a71d37c4037d26ff550f3284d044039.png) Luego se deben obtener los datos para poder indicar qué dato es el que se va a mostrar en **“dato a mostrar”** como opción del selector y cual es el dato que se guardará en **“dato a guardar”**. ![imagen](https://bc.finneg.com/uploads/default/original/3X/8/b/8b4e085009bd30c62e3cffb96144aa9056462537.png) ![imagen](https://bc.finneg.com/uploads/default/original/3X/1/d/1d904b1ec15c33b4de59fb5e64d63ec226c24946.png) ![imagen](https://bc.finneg.com/uploads/default/original/3X/8/9/89684528588447af9629b10d546d0dd724e0e768.png) ![imagen](https://bc.finneg.com/uploads/default/original/3X/4/b/4b90feddbdd98ac7480f4556704cf072d137e8fd.png) - **Anidado:** Los selectores anidados (o en cascada) permiten establecer relaciones de dependencia jerárquica entre diferentes campos de tipo selector dentro de los formularios de BModeler. Con esta funcionalidad, la selección que realiza el colaborador que debe completar el formulario en un selector principal (padre) filtra automáticamente las opciones disponibles en los selectores secundarios (hijos) en tiempo de ejecución. Al seleccionar tipo Anidado se debe presionar en “Configurar selectores” para comenzar la configuración de los selectores anidados ![imagen](https://bc.finneg.com/uploads/default/original/3X/c/d/cd1c9fa20d805e35ea3c7288f6fb384420021dce.png) ![imagen](https://bc.finneg.com/uploads/default/original/3X/8/6/86efb8e8c28ee52aa0ea5738038aae0c58859955.png) Aquí se crea la configuración de un Nivel 1 (nivel raíz) de selector anidado. El comportamiento técnico varía en función de dónde provengan los datos configurados: - **Seleccionar API Finnegans:** Se selecciona una API existente de Finnegans. Una vez seleccionada la API Finnegans se puede configurar una Cabecera, si el campo es requerido (obligatorio de completar para el colaborador), el Título con el que aparecerá el selector en el formulario y en qué atributo se quiere guardar: ![imagen](https://bc.finneg.com/uploads/default/original/3X/5/1/512c4eb3bbd0e5a26d710b09a9434b2159233530.png) Luego de igual manera que para los selectores dinámicos Simple desde API se Obtiene los datos para completar qué dato es el que se va a mostrar en **“dato a mostrar”** como opción del selector, cual es el dato que se guardará en **“dato a guardar”** y **“Valor para cascada”** que será el valor que se utilizara para prefiltrar el selector del siguiente nivel. ![imagen](https://bc.finneg.com/uploads/default/original/3X/0/b/0b02b49570a811f1ff1a901e8494ea400c5cc8b9.png) Al presionar en “Agregar selector” el sistema dará la posibilidad de configurar un segundo selector dependiente del anterior el cual se pre filtrara por el dato filtrado en **“Valor para cascada”** en momento de ejecución: ![imagen](https://bc.finneg.com/uploads/default/original/3X/7/6/76ad56190864d977809b2eda93d6eeb3717132b5.png) Una vez seleccionada la “API del siguiente nivel” se habilitará la posibilidad de configurar el selector de Nivel 2, con la misma dinámica del Nivel 1, se configura cabecera de ser necesario, si es campo requerido, Título de selector, guardar en atributo, se obtiene datos para completar qué dato es el que se va a mostrar en **“dato a mostrar”** como opción del selector, cual es el dato que se guardará en **“dato a guardar”** y **“Valor para cascada”** que será el valor que se utilizara para prefiltrar el selector del siguiente nivel. ![imagen](https://bc.finneg.com/uploads/default/original/3X/c/9/c9bff6da46b519de966be9c969f4db626a652390.png) ![imagen](https://bc.finneg.com/uploads/default/original/3X/7/3/73edd954f3904ee6037e6d97682f39a2ad7f74a8.png) Desde aquí tenemos posibilidad de configurar selectores dependientes del Nivel 2 o agregar selectores desde el Nivel 1 que sería el nivel raíz directamente relacionándolos al mismo. - **APIs Externas:** Permite consumir endpoints o servicios web propios desarrollados por otros equipos. El usuario ingresa manualmente la **URL del Endpoint** correspondiente a cada nivel (Nivel 1, Nivel 2, etc.). Una vez colocada la URL se puede configurar **Parámetros de ruta** y la **Cabecera.** La configuración y la concatenación siguiente de los distintos niveles (Nivel 1, Nivel 2, etc) se realiza de igual manera y con la misma lógica que la explicada en **Seleccionar API Finnegans.** ![imagen](https://bc.finneg.com/uploads/default/original/3X/7/8/78143d2e4c2a1e5a93f695de133be5fdd0cf3811.png) ![imagen](https://bc.finneg.com/uploads/default/original/3X/5/5/5556fc184baf606931afad3696b914a44d502702.png) La única excepción en la configuración es que dado que la API se ejecuta en tiempo de ejecución, al obtener datos en tiempo de diseño, dispondremos de un campo llamado **Columna de relación** y **Valor de ejemplo (solo preview)** que servirá para indicar que columna se relacionara con el siguiente nivel y probar que la API conecte correctamente y asegurarse que se conecte de manera correcta con el siguiente nivel. ![imagen](https://bc.finneg.com/uploads/default/original/3X/f/8/f8877b599bf688659db6b371ff2edc46f9a053b9.png) En caso de querer eliminar algún Nivel disponemos del icono del tachito de basura para eliminarlo sin inconvenientes. ![imagen](https://bc.finneg.com/uploads/default/original/3X/6/9/6970cc94565275d1c15330437e9190d6a5983535.png) Una vez finalizada la configuración presionamos el botón **Guardar** y la configuración persistirá. #### 3.2.4. Archivos Permite al usuario adjuntar documentos que se guardarán en un atributo de tipo archivo. ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-33](https://bc.finneg.com/uploads/default/original/3X/b/d/bd2cb47e64261d5b395c3cf49db4d17f57c194a3.png) #### 3.2.5. **Grillas (Tablas)** Tablas interactivas basadas en estructuras JSON para que el usuario complete filas y columnas. Para poder configurar un widget grilla lo primero que se debe hacer es tener la estructura en un atributo tipo JSON. Esta estructura ya puede tener datos o simplemente plantear una estructura de grilla vacía que se completará en el momento de ejecución del caso. ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-34](https://bc.finneg.com/uploads/default/original/3X/0/2/02cc67b0cac21ee4ab3205d4814d25264a18c63c.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-35](https://bc.finneg.com/uploads/default/original/3X/2/2/22eefba41f8f4998e47bf29ab26ce0b901b3df1e.png) Una vez que se selecciona el atributo desde donde se va a tomar la estructura y donde luego de la ejecución se guardan los valores, se puede configurar como se visualizará la grilla en el momento de ejecución. ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-36](https://bc.finneg.com/uploads/default/original/3X/2/d/2dd33df0dd9f34e2c498f0ae54ddd8c3b3282fc6.png) Una vez que selecciono la estructura que me interesa en este caso las “filas”, puedo comentar a ajustar las columnas. ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-37](https://bc.finneg.com/uploads/default/original/3X/2/e/2e01ed955e8660be278be0374362637dc53909a0.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-38](https://bc.finneg.com/uploads/default/original/3X/3/c/3c1875abf8bbef211753a75c76418734b91f0d41.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-39](https://bc.finneg.com/uploads/default/original/3X/3/2/3233960e044440e66d6c4f26b67cc4a69b99cdf3.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-40](https://bc.finneg.com/uploads/default/original/3X/1/1/11d66d8ebb36691d6f78737cef6793014d1f5eb1.png) En el caso que el diseño requiera que una de las columnas de la grilla sea editable y los datos se ingresen en el momento de ejecución del caso, se debe tildar el check de “Permite edición” e indicar el tipo de dato que permite la celda. ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-41](https://bc.finneg.com/uploads/default/original/3X/a/4/a4fa85c5473f1b206e0b7253b161851e333de3ce.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-42](https://bc.finneg.com/uploads/default/original/3X/d/9/d96ff26f8a0ee00a48218ead589f85c934d9a3bb.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-43](https://bc.finneg.com/uploads/default/original/3X/5/7/57db2c6395783d9cc7723717111312317c1d3116.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-44](https://bc.finneg.com/uploads/default/original/3X/d/7/d7a2085a994669668840eeca9bfd6a0393bfd2e5.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-45](https://bc.finneg.com/uploads/default/original/3X/6/f/6f57b550822dd597d139a2d2837cf8248128ed76.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-46](https://bc.finneg.com/uploads/default/original/3X/c/2/c2a9af63b24b66d17d56e2125d8a80383bd19974.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-47](https://bc.finneg.com/uploads/default/original/3X/4/4/4459007e85726a1d5c95770afaa541818a66b578.png) **Nota:** en el caso de requerir que la celda ofrezca opciones se puede elegir la opción “Selector” y tendrá el mismo tratamiento que el widget Selector visto anteriormente ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-48](https://bc.finneg.com/uploads/default/original/3X/c/4/c41364056f29d5401c2c65dbbaf798339f5bac50.png) ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-49](https://bc.finneg.com/uploads/default/original/3X/9/3/9325ca895f716f944be6d1d373fff3adc1e4bb34.png) #### 3.2.5. **Descripción** Textos enriquecidos con alineación que funcionan como separadores estéticos. ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-50](https://bc.finneg.com/uploads/default/original/3X/1/1/11b26e41ab806c0db32ca6d012d6ad473e190c35.png) #### 3.2.5. **Envío de Link** Enlaces cliqueables hacia URLs externas. ![4. Procesos_Actividades-4.1.6 Maquetador de formulario-51](https://bc.finneg.com/uploads/default/original/3X/6/1/61b84e8b5c48fa4750f3d00f6c3d9ad3d2a60264.png) **Importante:** se aplica la misma distribución de columnas en todos los dispositivos (no reorganiza de manera responsiva automática las columnas múltiples a una sola en pantallas pequeñas). Por lo tanto, si se pretende que los usuarios completen el formulario desde dispositivos móviles, la recomendación oficial es diseñar siempre los contenedores utilizando una sola columna para garantizar que los campos no se deformen ni se vuelvan ilegibles en celulares.