El Maquetador es la herramienta visual de BModeler que permite definir la experiencia del usuario final. Su objetivo es transformar los Atributos del Proceso en campos de entrada y visualización de datos de forma intuitiva.
1.1 Interfaz de Diseño (Drag & Drop)
El diseño se basa en un lienzo central donde se arrastran los elementos desde un panel lateral. Esta metodología permite ubicar los campos en el orden lógico en que deben ser completados y ver cómo lucirá el formulario para el usuario mientras se está diseñando a través del botón de “Vista Previa”
1.2 Gestión de Contenedores y Acciones Rápidas
En el maquetador, los widgets no flotan libremente; se alojan dentro de Contenedores. Estos elementos permiten estructurar el diseño visual y ofrecen herramientas de edición rápida mediante un menú de acciones que aparece al pasar el cursor (hover) sobre cualquier campo.
Estructura del Contenedor
Cada vez que arrastras un widget al lienzo, este se sitúa dentro de un contenedor automático. Al posicionar el mouse sobre el elemento, notarás que se habilitan dos niveles de control:
A. Acciones del Elemento (Widget)
Ubicadas en el margen izquierdo del campo seleccionado:
- Eliminar Elemento: Representado por el icono de un tacho de basura. Al hacer clic, se elimina únicamente el widget seleccionado, dejando el contenedor vacío o disponible para un nuevo elemento.
B. Acciones del Contenedor
Estas opciones afectan a toda la sección que rodea al widget y permiten gestionar el diseño de forma global:
- Duplicar Contenido: Permite clonar el contenedor con todos los widgets y configuraciones que tenga en su interior. Es ideal para replicar secciones similares rápidamente.
-
Configuración de Columnas: Permite cambiar la disposición visual del formulario.
Puedes elegir entre:
-
Columna Única: Los widgets ocupan todo el ancho del formulario (ideal para descripciones o áreas de texto).
-
Dos Columnas: Divide el contenedor en dos espacios iguales, permitiendo colocar dos widgets uno al lado del otro (ideal para optimizar espacio en campos cortos como “Nombre” y “Apellido”).
-
-
Eliminar Contenedor: Borra tanto la estructura del contenedor como todos los widgets que se encuentren dentro de él de forma definitiva.
Tip Pro: Utiliza la configuración de Dos Columnas para formularios extensos; esto reduce el desplazamiento (scroll) vertical y mejora la experiencia del usuario al completar los datos.
1.3 Configuración General de los Widgets
Independientemente de su tipo, los widgets comparten un panel de configuración común que determina cómo interactúan con el usuario y con los datos del proceso. Estas opciones son
-
Título del Widget (Label): Es el nombre visible que identifica al campo (ej: “Nombre del Cliente” o “Monto Total”). Es la guía principal para el usuario.
-
Placeholder: Un texto de sugerencia que aparece en color gris tenue dentro del campo antes de ser completado. Sirve para indicar el formato esperado (ej: “Ej: 20-12345678-9”).
-
Descripción: Un breve texto de apoyo o instrucción que se ubica debajo del campo para brindar contexto adicional al usuario.
-
Definición de Campo Requerido: Al activar esta opción, el campo se vuelve obligatorio. El sistema validará que contenga información antes de permitir que el usuario envíe el formulario y avance el hilo.
-
Definición de Solo Lectura: Si se marca esta casilla, el campo mostrará el valor que contiene pero no permitirá su edición. Es ideal para mostrar datos cargados en etapas anteriores del proceso que no deben ser alterados.
-
Guardar en Atributo: Esta es la configuración más crítica. Permite vincular el widget con un Atributo del Proceso para almacenar la información ingresada por el usuario.
Regla de Tipado: El sistema es inteligente y solo permitirá seleccionar o crear atributos cuyo tipo de dato sea compatible con el widget (ej: un widget de “Número” solo mostrará atributos de tipo numérico).
1.4 Catálogo de Widgets
Para configurar un widget, se debe seleccionar desde el catalogo del lado izquierdo y arrastrar hacia la zona de drag & drop. Una vez alli, se puede hacer click sobre el para completar su configuración.
1.4.1 Widget: Texto
El widget de Texto es el componente más versátil y utilizado del maquetador. Está diseñado para la captura de cadenas de caracteres alfanuméricos de longitud corta o media en una sola línea.
- Uso Ideal: Capturar datos que no requieren cálculos matemáticos, como nombres de personas, direcciones, correos electrónicos, identificadores internos o títulos cortos.
Nota de diseño: Si necesitas que el usuario ingrese información muy extensa (como una carta o un detalle de auditoría), te recomendamos utilizar el widget de Text-area en su lugar para una mejor visualización.
1.4.2 Widget: Número
El widget de Número está diseñado exclusivamente para capturar datos cuantitativos. A diferencia del campo de texto, este widget restringe la entrada del usuario para asegurar que solo se ingresen caracteres numéricos válidos.
-
Uso Ideal: Cantidades de stock, montos monetarios, edades, porcentajes, años o cualquier dato que posteriormente deba ser utilizado en cálculos matemáticos o reglas lógicas del proceso.
-
Comportamiento: * Bloquea el ingreso de letras y caracteres especiales (excepto, según configuración, separadores decimales).
- Facilita la integridad de los datos, evitando errores de tipeo que podrían romper automatizaciones posteriores.
Dato Clave: Al usar este widget, te aseguras de que si el proceso necesita realizar una suma automática o una comparación (ej: “Si el monto es mayor a 5000, ir por la rama de aprobación”), el dato sea siempre válido para esa operación.
1.4.3 Widget: Fecha
El widget de Fecha permite al usuario seleccionar un día, mes y año específicos de manera sencilla y estandarizada, evitando errores de formato manual (como confundir día/mes).
-
Uso Ideal: Fechas de nacimiento, plazos de entrega, fechas de emisión de facturas o cualquier hito que no requiera precisión de minutos o segundos.
-
Comportamiento: * Al hacer clic, despliega un calendario interactivo que facilita la navegación entre meses y años.
- Asegura que el dato guardado sea siempre válido (evitando, por ejemplo, un “30 de febrero”).
1.4.4 Widget: Fecha y Hora
Este widget es una extensión del selector de fecha tradicional, diseñado para procesos que requieren un nivel de precisión temporal más alto, integrando tanto el calendario como el reloj en una misma interfaz.
-
Uso Ideal: Registro de turnos, marcas de tiempo de auditoría, programación de reuniones o inicios de eventos donde el minuto exacto es relevante para el negocio.
-
Comportamiento: Al interactuar con el campo, se despliega un selector dual: primero permite elegir el día en un calendario y, posteriormente, ajustar la hora y minutos mediante un selector de tiempo.
- Centraliza dos datos en un solo atributo, simplificando el diseño del formulario.
1.4.5 Widget: text-area
El widget de Text-area (o Área de Texto) es un campo de entrada diseñado para capturar grandes volúmenes de información alfanumérica. A diferencia del widget de Texto, este permite la visualización y escritura en múltiples líneas.
-
Uso Ideal: Descripciones detalladas, justificaciones de rechazo, notas de auditoría, comentarios de usuarios o cualquier información que requiera más de una oración para ser explicada.
-
Comportamiento: Ofrece un cuadro de texto expandible visualmente.
1.4.6 Widget: Checkbox
El widget de Checkbox (o Casilla de Selección) es un componente que permite al usuario marcar o desmarcar una opción específica. Es la forma más sencilla de capturar una decisión de tipo “Sí o No”.
-
Uso Ideal: Aceptación de términos y condiciones, confirmación de lectura de un instructivo, validación de requisitos cumplidos o cualquier campo que represente un estado binario.
-
Comportamiento: Presenta una pequeña casilla que cambia su estado visual al ser clickeada (activado/desactivado).
- Es extremadamente útil para auditorías rápidas donde el responsable solo debe tildar tareas realizadas.
1.4.7 Widget: Radio
El widget de Radio permite al usuario seleccionar una única opción dentro de un conjunto de alternativas visibles. Es la mejor opción cuando se quiere que todas las posibilidades estén expuestas de inmediato, facilitando una elección rápida con un solo clic.
-
Uso Ideal: Selección de niveles de prioridad, tipos de solicitud o cualquier categorización con pocas opciones excluyentes.
-
Comportamiento: Al seleccionar una opción, cualquier elección previa se desmarca automáticamente, garantizando que el atributo solo guarde un valor a la vez.
-
Configuración de Opciones (Clave y Valor): A diferencia de otros widgets, aquí debes configurar la lista de alternativas mediante un panel de opciones. Como se observa en la interfaz de configuración, cada opción consta de dos campos
-
Etiqueta de Opción (Lo que se ve): Es el texto que el usuario final visualizará en el formulario (ej: “Option 1”).
-
Valor Almacenado (Lo que se guarda): Es el dato técnico que se guardará internamente en el atributo del proceso (ej: “opcion-1”).
-
Gestión: Puedes utilizar el botón “+ Agregar opción” para incluir n alternativas y el icono de la “X” roja para eliminar las que no necesites.
-
1.4.8 Widget: Selector
El widget de Selector (también conocido como menú desplegable o dropdown) permite al usuario elegir una única opción de una lista predefinida. Es la herramienta ideal para optimizar el espacio en el formulario cuando se tienen muchas opciones disponibles.
-
Uso Ideal: Listado de países o provincias, categorías de productos, departamentos de una empresa o cualquier lista donde mostrar todas las opciones a la vez (como en el Radio) saturaría visualmente la pantalla.
-
Comportamiento: El usuario ve un campo cerrado que, al ser clickeado, despliega la lista de opciones. Al elegir una, el menú se cierra y muestra la opción seleccionada.
-
Configuración Extra (Opciones): Al igual que el widget de Radio, el Selector requiere la configuración manual de sus alternativas. Según la interfaz de la plataforma, esto se gestiona mediante una tabla de opciones
-
Clave: Es la etiqueta que el usuario verá al desplegar el selector (ej: “Option 1”). Debe ser un texto descriptivo y claro.
-
Valor: Es el dato técnico que se almacenará en el sistema cuando esa opción sea elegida (ej: “opcion-1”). Este valor es el que viajará a través del proceso.
-
Gestión de Lista: Utiliza el botón “+ Agregar” para sumar filas a la tabla e introduce la Clave y el Valor correspondiente para cada una. Puedes eliminar opciones existentes presionando el icono de la “X” a la izquierda de cada fila.
-
1.4.9 Widget: Subir Archivo
El widget de Subir Archivo habilita un canal de entrada para documentos externos. Es el componente que permite al usuario cargar evidencias, formularios firmados o archivos multimedia directamente al hilo del proceso.
-
Uso Ideal: Carga de facturas en PDF, fotos de recibos, documentos de identidad, contratos escaneados o cualquier soporte digital necesario para la validación de una tarea.
-
Comportamiento: Presenta una zona de interacción donde el usuario puede hacer clic para explorar los archivos de su dispositivo o arrastrar y soltar el archivo directamente.
Nota Operativa: A diferencia de los campos de texto o número, el contenido de este widget no se visualiza como un dato plano, sino como un elemento descargable y previsualizable en el detalle del hilo.
1.4.10 Widget: Decripción
El widget de Descripción es un elemento de solo lectura. A diferencia de los demás componentes, no se utiliza para capturar datos ni se vincula a un atributo del proceso; su función es puramente estética e informativa, permitiendo insertar etiquetas o bloques de texto dentro del formulario.
-
Uso Ideal: Agregar títulos de secciones, dar instrucciones detalladas sobre cómo completar el formulario, insertar avisos legales o separar visualmente grupos de campos.
-
Comportamiento: El usuario no puede interactuar con este campo ni modificar su contenido durante la ejecución del hilo. El texto se presenta de forma estática tal como fue configurado en el maquetador.
-
Configuración Específica:
-
Contenido: Es el cuerpo del texto que se mostrará en el formulario. Permite redactar desde una palabra hasta párrafos completos.
-
Alineación: Permite definir la posición del texto dentro del contenedor (Izquierda, Centro o Derecha), lo que facilita la creación de encabezados o pies de página dentro de la interfaz.
-
Dato Clave: Al no guardar información, este widget no posee la opción “Guardar en atributo”. Su único propósito es mejorar la experiencia y claridad para el usuario que completa el formulario.
1.4.11 Widget: Grilla
El widget de Grilla es un componente de visualización y edición masiva de datos. A diferencia de los widgets simples, la grilla permite interactuar con múltiples registros organizados en filas y columnas, basándose en la estructura de un atributo de tipo JSON.
-
Uso Ideal: Gestión de listas de productos, detalle de gastos, cronogramas de tareas o cualquier conjunto de datos repetitivos que deban ser visualizados o modificados en una sola interfaz.
-
Comportamiento: El usuario visualiza una tabla dinámica. Dependiendo de la configuración, podrá simplemente leer los datos o editarlos directamente en las celdas permitidas.
-
Configuración y Vinculación (Data Binding): Para que la grilla funcione, debe conectarse a un atributo que contenga información estructurada:
-
Atributo JSON: En la opción “Guardar en atributo”, se debe seleccionar un atributo de tipo JSON que contenga al menos un arreglo (array) de objetos con pares clave-valor.
-
Subentidad: Una vez vinculado el JSON, se habilitará este selector para elegir específicamente qué array dentro de ese JSON se desea mapear en la grilla.
-
-
Configuración de Columnas: Dentro del panel de configuración, se deben definir las columnas que el usuario verá en pantalla
-
Campo JSON: Aquí se selecciona el nombre de la clave técnica del objeto JSON que se desea mostrar en esa columna.
-
Nombre de la Columna: Es el título que el usuario verá en la cabecera de la grilla (ej: “Precio Unitario”).
-
Permite Edición: Si este check está activo, el usuario podrá modificar el valor de esa celda en el formulario. Si está desactivado, la columna será de Solo Lectura.
-
Gestión de Columnas: Puedes añadir tantas columnas como tenga tu objeto JSON presionando el botón “Agregar” o quitar las que no necesites con el botón “Eliminar”.
-
Nota Técnica: Los cambios realizados por el usuario en las columnas editables se guardarán automáticamente en la estructura del atributo JSON original al completar la actividad.