Introducción al diseño e implementación de un proceso con la herramienta BPMS Bonita. VI

En la primera entrada de esta serie con el BPMS Bonita habíamos visto como modelar el proceso de la figura anterior.

En la segunda entrada vimos cómo crear tanto variables globales como locales para actividades en particular.

En la tercera entrada vimos cómo definir condiciones y transiciones que nos permitían dar un mejor sentido a las posibles variantes que el proceso puede seguir en función de las decisiones que se tomen.

En la cuarta entrada vimos cómo definir los roles participantes en el proyecto y ejecutar el proyecto visualizándolo desde una aplicación web ofrecida por Bonita.

En la quinta entrada vimos como iniciar la mejora de las interfaces gráficas de los formularios.

En esta 6 entrega veremos cómo seguir la mejora del resto de las UI, User Interfaces o Interfaces Gráficas, realizando cambios en dependencia del formulario en que nos encontremos.

Comencemos.!!!!

Como se puede apreciar en la imagen inicial de esta entrada, tenemos varias actividades que llevan intervención humana. Para continuar nuestro ejemplo modificaremos la UI par la actividad “Revisión por ventas”. Los pasos iniciales son los mismos que los de la entrada anterior, así que nos lo saltaremos y ya estamos en el diseño de la nueva UI.

Lo primero es dejar el diseño igual al de la entrada anterior, por un tema de uniformidad.

Luego debemos notar que este formulario no es para entrar información, si no para que el vendedor revise la información y tome una decisión por lo que los Widgets deberían ser de solo lectura.

Para hacer esto es realmente sencillo:

• Los campos que son de tipo “Caja de Texto” deben ser cambiado a “Texto”.
• En el caso del Widget de los productos pues debemos eliminar el Widget y agregar uno de la paleta de componentes que sea de tipo texto. Lo importante aquí es indicarle de donde obtendrá la información. Los pasos son los siguientes:

1. Eliminar el Widget.
2. Agregar una nueva fila en la misma posición.
3. Seleccionar el componente Texto de la paleta de componentes y arrastrarlo a la fila recién creada.
4. Ponerle como nombre “productos”.
5. Y como etiqueta “Productos Seleccionados”.
6. Manteniendo seleccionado este Widget vamos a la opción “Datos” y como valor inicial seleccionamos “productos” tal y como se muestra en la siguiente imagen.

Para probar lo hecho ejecutamos el proceso.

Y al enviar la solicitud vemos lo siguiente:

Como se puede apreciar los campos no son seleccionables y se nos muestran las posibles decisiones a seleccionar.

Aprovechando esta entrada les comento otras mejoras que se le han realizado a las UI:

1. Como se podía apreciar en las imágenes, los campos estaban muy para la izquierda. La solución más rápida es en el diseño del formulario agregar una columna a la izquierda de la columna en la que tenemos los widgets.
2. El otro problema era que las cajas de texto eran muy grandes. Así que seleccionando un Widget, vamos a la pestaña de “Apariencia” y ahí podemos modificar las propiedades. En este caso en particular cada Widget tiene esta definición de su ancho.

Ahora se ve mucho mejor, aunque se le pueden seguir haciendo mejoras.

Llegado a este punto algunos señalamientos:

• La vista previa en nuestro caso no se corresponde luego de hacer los últimos cambios con lo que se muestra una vez ejecutado el proceso.
• Existe la necesidad de agregar una nueva columna para que los widgets se vean en el medio. Puede ser que exista alguna propiedad que no se ha encontrado aún.

Posibles mejoras a incluir:

• Poder seleccionar varios productos en una misma orden de compra.
• Cargar los datos de los productos ofertados desde una BD, y no como se hace hoy que son estáticos.

Estas mejoras las estaremos viendo en futuras entrada.

---