Bmodeler - Diagramador

[Federico_Herce]

Bmodeler - Diagramador

Pantalla de Definición - Barra Superior

Al ingresar a la edición o creación de un proceso, se presenta una barra de herramientas superior que centraliza la información del flujo y las acciones de gestión

• Identificación del Proceso: En el extremo izquierdo se visualiza el Nombre del proceso y su ID único en el sistema, facilitando su identificación técnica.

• Menú de Opciones (Selector): Un menú desplegable que permite alternar entre las diferentes vistas de configuración del proceso:

  • Información general del proceso: Muestra los datos generales del proceso (Nombre, descripción, código, activo/inactivo, privado/público)

  • Exportar

  • Importar

  • Inicio por API

• Configuración: Icono representado por un engranaje que permite gestionar:

  • Atributos del proceso: Definición de atributos disponible a utilizar a lo largo del proceso

  • Cabecera para Formularios: Configuración del encabezado que verán los usuarios ajenos a la organización al completar actividades manuales.

• Herramientas de Visualización (Zoom): Botones para acercar, alejar o centrar el diagrama, permitiendo una navegación cómoda en flujos extensos.

• Acciones Principales:

  • Cancelar: Sale del editor descartando los cambios no guardados y redirige a la grilla principal de procesos.

  • Guardar: Almacena los cambios realizados en el diseño y configuración del proceso.

  • Permisos: Acceso directo a la configuración de seguridad para definir quiénes pueden visualizar, editar el proceso o gestionar los hilos derivados de él.

Diagramador y Elementos

El diagramador consiste de una interfaz dinámica que permite diseñar el flujo del proceso de negocio utilizando diversos elementos, ubicados en una barra de herramientas superior, con una funcionalidad drag & drop.

Al realizar el drag & drop o hacer doble click en cualquier elemento, accederás a su configuración a través de la sección de “Configuración del elemento” del lado izquierdo.

Elementos disponibles:

Elemento Evento de Inicio:

El Evento de Inicio representa el punto de partida de un proceso. Es el disparador que indica que un nuevo hilo ha comenzado a ejecutarse. En BModeler, cada proceso debe contar obligatoriamente con un único evento de inicio para ser válido.

• Representación Visual: Se identifica como un círculo verde de borde fino.

• Función: Actúa como el contenedor inicial de la información del proceso. Al ejecutarse, dispara el flujo hacia la primera actividad conectada.

• Propiedades:

  • Nombre: Permite asignar una etiqueta identificatoria (ej. “Solicitud recibida”).

  • Parámetros: Permite definir qué datos deben completarse al momento de iniciar un nuevo hilo.

Elemento Actividad Manual de Usuario:

La Actividad Manual representa una tarea que debe ser ejecutada por una persona, ya sea un usuario interno del sistema o un actor externo. Desde esta actividad se ofrece la posibilidad de crear un formulario dinámico de forma customizable.

• Representación Visual: Se identifica como un rectángulo con bordes redondeados azules.

A. Configuración General:

• Nombre: Etiqueta identificatoria de la tarea (ej. “Aprobar presupuesto”).

• ¿Es para externos?:

  • Activado: El sistema enviará automáticamente un correo electrónico al destinatario con un enlace al formulario para ser completado fuera de la plataforma.

  • Desactivado: La tarea será gestionada por un usuario interno a través de la pantalla de Hilos.

B. Asignación de Responsables:

• Define quién será el encargado de ejecutar la actividad:

  • Asignar a: Permite seleccionar entre una Persona (Responsable) mediante su email o un Equipo de trabajo predefinido.

  • Origen del Responsable: Presionando el icono a la derecha del selector, se puede definir si el responsable es un Valor Constante (fijo) o si se obtiene de un Atributo del Proceso (dinámico).

  • Permite edición por el receptor: Si este checkbox está activo, el usuario que reciba la actividad podrá reasignarla a otro responsable o equipo desde el detalle del hilo.

C. Notificaciones:

• Permite configurar un mensaje personalizado que el responsable recibirá vía email al momento de asignársele la tarea. En el cuerpo del mensaje puedes utilizar la sintaxis ${nombre_atributo} para insertar dinámicamente valores específicos del proceso (ej. “Hola, tienes una nueva solicitud de ${cliente}”).

D. Tratamiento de Formulario:

• Define el comportamiento y las opciones de salida de la actividad:

  • Rechazo: Permite al responsable finalizar la actividad marcándola como rechazada.

  • Devolución: Habilita la opción de retornar el flujo a la actividad manual anterior más reciente.

  • No permite rechazar ni devolver: El usuario solo podrá completar la actividad para que el flujo avance.

E. Configuración del Formulario:

• Indicador de elementos: El sistema muestra un contador que indica cuántos elementos (campos, etiquetas, selectores, etc.) tiene configurados actualmente el formulario de esta actividad.

• Acceso al Maquetador: Al presionar el botón “Editar formulario”, se ingresa al maquetador visual de formularios. En esta herramienta se puede arrastrar, soltar y configurar cada componente para definir cómo se recolectará o mostrará la información durante la ejecución de la tarea.

El Maquetador de Formularios es la herramienta visual que permite diseñar la interfaz con la que interactuarán los usuarios (internos o externos) en cada actividad manual.

Metodología de Diseño: Drag & Drop La creación del formulario se realiza de forma intuitiva mediante la técnica de “arrastrar y soltar”. Solo debe seleccionar un componente (widget) del panel lateral, arrastrarlo hacia el lienzo central y soltarlo en la posición deseada para estructurar la vista.

Widgets Disponibles El sistema cuenta con una variedad de elementos para capturar y mostrar información, tales como:

• Texto: Campo de entrada de una sola línea, ideal para capturar datos breves como nombres, correos o códigos.

• Número: Filtra la entrada para permitir únicamente caracteres numéricos. Útil para cantidades, montos o edades.

• Fecha: Despliega un calendario para que el usuario seleccione un día, mes y año específicos.

• Fecha y Hora: Similar al campo de fecha, pero añade un selector de tiempo (horas/minutos) para una precisión exacta.

• Text-area: Cuadro de texto multilínea diseñado para descripciones extensas, comentarios o notas detalladas.

• Checkbox: Casilla de selección que permite marcar o desmarcar una opción (valor booleano: Sí/No).

• Radio: Conjunto de opciones donde el usuario solo puede seleccionar una de las alternativas presentadas.

• Selector: Menú desplegable (dropdown) que permite elegir una opción entre una lista predefinida, optimizando el espacio en el formulario.

• Subir Archivo: Permite al usuario adjuntar documentos, imágenes o archivos desde su dispositivo al hilo del proceso.

• Descripción: Elemento de solo lectura que permite insertar textos informativos, instrucciones o aclaraciones dentro del maquetador sin que el usuario deba ingresar datos.

• Grilla: Componente avanzado que permite visualizar o cargar datos en formato de tabla (filas y columnas), ideal para manejar listados de ítems, productos o tareas repetitivas dentro de un mismo formulario.

Configuración de Campos Al seleccionar cualquier widget dentro del maquetador, se habilita un panel de configuración donde se definen sus características:

• Título (Label): El texto que el usuario verá sobre el campo (ej. “Nombre del Cliente”).

• Placeholder: Texto de sugerencia que aparece dentro del campo antes de ser completado.

• Descripción: Texto de ayuda adicional para guiar al usuario en el llenado del dato.

• Valor del campo: Es la configuración más importante, ya que permite vincular el campo con un Atributo del Proceso. Esto define dónde se almacenará el dato ingresado o qué información existente se debe mostrar.

• Validaciones y Permisos:

  • Obligatorio: Si está activo, el hilo no podrá avanzar hasta que el campo sea completado.

  • Solo lectura: El campo mostrará el valor del atributo pero no permitirá su modificación (ideal para mostrar información de pasos anteriores).

Elemento Actividad Automática:

La Actividad Automática permite al sistema ejecutar tareas de forma autónoma, integrándose con servicios externos o ejecutando lógica personalizada sin intervención humana.

• Representación visual: Se identifica en el diagrama como un rectángulo de bordes redondeados de color violeta con un icono de engranajes en la esquina superior izquierda, simbolizando un proceso sistémico.

Configuración General: Al seleccionar la actividad, se debe definir primero el Nombre de la actividad, el cual identificará el paso en el diagrama y en el seguimiento del hilo. Luego, se debe optar por uno de los dos tipos de configuración

A. Configuración de APIs Esta opción permite realizar llamadas directas a servicios web externos. Los campos a configurar son:

• Nombre de la actividad: Permite visualizar o modificar el nombre asignado previamente.

• Guardar respuesta en: Selector para elegir el Atributo del Proceso donde se almacenará el resultado (JSON o texto) devuelto por la API para ser usado en pasos posteriores.

• Método HTTP: Selección del tipo de petición a realizar (GET, POST, PUT, PATCH, DELETE).

• URL de la API: Dirección del endpoint al cual se realizará la consulta.

• Configuraciones Extra: Paneles desplegables para definir:

  • Parámetros: Query params para la URL.

  • Cabecera (Headers): Definición de tokens de autenticación, content-type, etc.

  • Body: Cuerpo de la petición (disponible para métodos POST, PUT y PATCH).

Guest Code: Esta opción permite utilizar scripts de lógica personalizada (microservicios) alojados en la plataforma. Al seleccionar esta pestaña, se visualizará una grilla con todos los scripts generados previamente.

• Nuevo Script: Permite acceder a la interfaz de creación de scripts si la lógica necesaria no existe aún.

• Seleccionar: Al elegir un script de la grilla y presionar “Seleccionar”, el sistema vincula automáticamente el Guest Code a la configuración de la API, cargando de forma transparente el nombre y la URL del microservicio correspondiente para su ejecución. Es posible editar o previsualizar el script utilizado, al presionar los botones correspondientes.

Elemento Compuerta Exclusiva:

La Compuerta Exclusiva se utiliza para crear puntos de decisión dentro del flujo. Permite evaluar una o más condiciones para determinar qué camino debe seguir el hilo, asegurando que solo se tome una ruta de salida posible.

• Representación Visual: Se identifica en el diagrama como un rombo amarillo con una “X” en su interior. Los caminos que salen de ella representan las distintas alternativas lógicas del proceso.

Configuración de Decisiones

• Nombre de la decisión: Etiqueta que identifica el camino.

• Criterios de Evaluación: Para que una ruta sea tomada, se debe definir la lógica compuesta por:

  • Dato: El atributo del proceso o valor que se desea evaluar.

  • Función: El operador lógico (ej. Es igual a, Es mayor que, Contiene, etc.).

  • Valor: El dato contra el cual se compara el atributo.

• Nota: Es posible agregar múltiples condiciones dentro de una misma decisión o eliminarlas utilizando los controles de edición.

• Próxima Actividad: A través de un selector, se define a qué actividad debe dirigirse el flujo si se cumple la condición. Este selector está vinculado directamente a las actividades que se encuentran conectadas visualmente mediante flechas desde la compuerta en el diagramador.

• Botón “Agregar”: Una vez que hayas completado los tres campos de evaluación (Dato a evaluar, Función, y Valor) de acuerdo con la lógica deseada, selecciona el botón del check para añadir esta condición a la decisión. Puedes agregar múltiples condiciones para construir lógicas más complejas.

• Para eliminar una condición, es necesario seleccionarla y presionar el botón de la cruz.

• Herramientas: Observarás las herramientas “( )”, “Y”, “O”. Estas te permiten agrupar condiciones y combinar múltiples evaluaciones con operadores lógicos para crear reglas de decisión más sofisticadas.

Es importante aclarar que la compuerta exclusiva solo puede estar unida a dos elementos del diagramador como máximo, ya que solo bifurca la ejecución en dos posibles caminos.

Elemento Compuerta Paralela:

La Compuerta Paralela se utiliza para bifurcar el flujo en varios caminos que se ejecutan de manera simultánea.

• Representación Visual: Se identifica en el diagrama como un rombo con el símbolo “+” en su interior.

Lógica de Funcionamiento: Para una correcta implementación, el paralelismo debe estar compuesto por un par de compuertas:

• Compuerta de Apertura: Se sitúa al inicio del bloque paralelo. Al llegar a este punto, el proceso dispara todas las actividades conectadas a sus salidas simultáneamente.

• Compuerta de Cierre (Convergencia): Se sitúa al finalizar las ramas paralelas. Esta compuerta actúa como un punto de sincronización, esperando a que todas las actividades paralelas finalicen para unificar el flujo nuevamente.

Configuración de Decisiones: Su configuración es similar a la de la compuerta exclusiva, pero con un propósito específico de salida:

• Decisión de Cierre: En la compuerta paralela de cierre, se debe configurar una decisión (utilizando la lógica de Dato - Función - Valor). Esta condición será analizada cada vez que se ejecute alguna actividad por dentro del paralelismo, para saber en qué momento continuar con el flujo posterior.

Elemento Agente IA:

El Agente IA es un elemento de automatización inteligente diseñado para generar contenido de texto dinámico, realizar análisis de datos o ejecutar búsquedas de información en tiempo real, facilitando la toma de decisiones y la generación de documentos dentro del flujo.

• Representación Visual: Se identifica en el diagrama como un rectángulo de bordes redondeados de color rojo, con un icono que representa un robot en su superior izquierda.

Configuración y Funcionalidades: Al seleccionar este elemento, el panel de configuración permite definir el comportamiento de la inteligencia artificial:

• Nombre: Etiqueta para identificar la acción del agente en el diagrama (ej. “Redactar correo de bienvenida”).

• Guardar respuesta en: Permite seleccionar el Atributo del Proceso donde se almacenará el texto generado por la IA, permitiendo que este resultado sea utilizado por actividades posteriores (como una Actividad Manual para que un usuario lo revise o una Actividad Automática para enviarlo por mail).

• Prompt / Instrucciones: Es el espacio donde se redacta el comando o la instrucción que la IA debe ejecutar.

• Uso de Atributos: Al igual que en las notificaciones, es posible enriquecer el prompt referenciando atributos del proceso con la sintaxis ${nombre_atributo} (ej. “Resume el siguiente reclamo del cliente: ${descripcion_incidente}”).

• Búsqueda en Internet: El agente cuenta con la posibilidad de realizar búsquedas por internet, para complementar la respuesta o realizar validaciones externas.

Elemento Envío de Email:

El elemento de Envío de Mail permite automatizar la salida de correos electrónicos en puntos específicos del flujo, sin necesidad de que un usuario realice la acción manualmente.

• Representación Visual: Se identifica en el diagrama como un rectángulo de bordes redondeados azul con un icono de sobre (carta) en la esquina superior izquierda.

Configuración del Mensaje: Al seleccionar este elemento, se habilitará el panel lateral con las siguientes opciones de configuración:

• Nombre: Etiqueta para identificar la acción en el diagrama (ej. “Notificar despacho”).

• Para: Permite definir a quién se enviará el correo.

• Asunto: El título del correo electrónico.

• Cuerpo del mensaje: Editor de texto enriquecido donde se redacta el contenido del mail. Al igual que en otros elementos, se pueden insertar Atributos del Proceso utilizando la sintaxis ${nombre_atributo} para que el receptor reciba información específica del hilo en curso.

• Adjuntos: Permite enviar atributos del proceso de tipo Archivo.

Elemento Evento Intermedio:

El Evento Intermedio se utiliza para disparar la ejecución de un subproceso o un proceso independiente de manera asincrónica. Esto permite que el proceso principal continúe su curso o delegue tareas complejas a otros flujos definidos en el sistema.

• Representación Visual: Se identifica en el diagrama como un círculo con doble borde, lo que indica que es un evento que ocurre entre el inicio y el fin del flujo.

Configuración de la Ejecución: Al seleccionar este elemento, el panel de configuración solicitará los siguientes datos:

• Nombre: Etiqueta para identificar el propósito de la llamada (ej. “Disparar proceso de Facturación”).

• Proceso a ejecutar: Un selector que despliega todos los procesos activos disponibles en el espacio de trabajo.

• Configuración de Parámetros: Una vez seleccionado el proceso destino, el sistema levantará automáticamente sus parámetros obligatorios. Para cada parámetro, se debe definir su origen:

  • Valor Constante: Un dato fijo que se enviará siempre igual.

  • Atributo del Proceso: Se selecciona un atributo del proceso actual para mapear su valor y transferirlo al nuevo proceso que se está iniciando.

Elemento Compensador de Tiempo:

El Compensador de Tiempo es un elemento de control que permite pausar la ejecución de un hilo de manera automática. El flujo se detendrá al llegar a este punto y solo continuará hacia la siguiente actividad una vez que haya transcurrido el periodo de tiempo predefinido.

• Representación Visual: Se identifica en el diagrama como un círculo con el icono de un reloj en su interior.

Posición en el Diagrama: Para que el compensador funcione correctamente, debe posicionarse sobre una flecha de secuencia (conector) entre dos elementos. De esta manera, el sistema identifica con precisión entre qué actividades debe aplicarse la pausa configurada.

Configuración de la Pausa: Al seleccionar este elemento, se deben completar los siguientes campos en el panel de propiedades:

• Nombre del elemento: Etiqueta identificatoria para el diagrama (ej. “Esperar 24hs para recordatorio”).

• Duración: Define la cantidad de tiempo que el hilo permanecerá pausado. Al igual que otros elementos, ofrece dos orígenes de datos:

  • Valor Constante: Se ingresa un número fijo.

  • Atributo del Proceso: Permite que la duración sea dinámica, tomando el valor de una variable del proceso (útil si el tiempo de espera depende de una fecha o plazo calculado previamente).

• Unidad: Desplegable que determina la escala temporal del valor ingresado en la duración. Las opciones disponibles son:

  • Minutos

  • Horas

  • Días

Elemento Temporizador de Fecha:

Su función principal es establecer una fecha de vencimiento para las actividades manuales del proceso.

• Representación Visual: Se identifica en el diagrama como un círculo con el icono de un reloj.

Posición en el Diagrama: Este elemento debe posicionarse sobre una actividad manual para que el vencimiento sea aplicado correctamente a esa tarea específica.

Configuración del Vencimiento: Al seleccionar el temporizador, se habilitará el panel con las siguientes opciones:

• Nombre: Etiqueta para identificar el plazo (ej. “Vencimiento de aprobación”).

• Configuración de Fecha: Selector que determina el origen del vencimiento:

  • En Ejecución: La fecha límite no está predefinida. El usuario que inicie el hilo o realice una acción previa deberá completar manualmente la fecha de vencimiento al ingresar a la actividad.

  • Desde el Proceso: El sistema calcula el vencimiento de forma automática y dinámica. Para esto, se debe configurar:

    • Duración: El número de unidades de tiempo permitidas.

    • Unidad: Minutos, Horas o Días.

    • Lógica: El vencimiento se calculará sumando la duración y unidad indicadas a la fecha y hora exacta en que la actividad manual fue asignada al responsable.

Elementos Evento de fin Exitoso y Alternativo:

Los Eventos de Fin representan la culminación del flujo de trabajo. Una vez que un hilo alcanza cualquiera de estos puntos, el proceso se considera terminado y no se pueden ejecutar más actividades.

A. Fin Exitoso: Representa la finalización satisfactoria del proceso, habiendo cumplido con todos los objetivos y pasos previstos.

• Representación Visual: Se identifica como un círculo con un borde grueso de color celeste.

• Configuración: Se define únicamente mediante un Nombre que describa el resultado final (ej. “Venta concretada”, “Solicitud aprobada”).

B. Fin Alternativo (Excepción): Se utiliza para indicar que el proceso ha terminado, pero no de la manera estándar o exitosa, usualmente debido a un rechazo, una cancelación o una condición de error.

• Representación Visual: Se identifica como un círculo de borde grueso de color rojo.

• Configuración: Al igual que el fin exitoso, solo requiere un Nombre que explique el motivo del cierre (ej. “Solicitud rechazada”, “Proceso cancelado por cliente”).

Nota: Un proceso puede tener múltiples eventos de fin (exitosos o alternativos) dependiendo de las bifurcaciones y decisiones tomadas a lo largo del diagrama.