Primeros pasos con Camunda BPM – Agregar Formularios HTML al Proceso BPMN

Es común cuando se trabaja con procesos en BPM bajo la notación BPMN el considerar formularios de entrada tanto para el inicio del proceso como para sus Tareas Humanas, sobre todo cuando se desea aprovechar las bondades que ofrece el motor de BPM, en este caso la plataforma BPM de Camunda.

En esta publicación vamos a tratar el tema de cómo agregar formularios de HTML personalizados para nuestras actividades de Inicio de Proceso y Tareas Humanas en el proceso BPMN que desplegamos en nuestra publicación anterior.

Así que síganme los buenos y manos a las sobras…

Crear carpeta FORMS en Eclipse

Vayamos a nuestro proyecto Maven-Java en eclipse, que ya hemos configurado en publicaciones anteriores, y ubiquemos la ruta:

bpm_demo/src/main/webapp

Allí agregamos la carpeta de nombre: forms

Agregar archivos HTML

Dentro de la carpeta forms recién creada, creemos un archivo denominado:

init_proc_prestamo.html

con el siguiente contenido:

<form name="requestPrestamo">
  <div class="form-group">
    <label for="customerId">Customer ID</label>
    <input class="form-control"
           cam-variable-type="String"
           cam-variable-name="customerId"
           name="customerId" />
  </div>
  <div class="form-group">
    <label for="amount">Amount</label>
    <input class="form-control"
           cam-variable-type="Double"
           cam-variable-name="amount"
           name="amount" />
  </div>
</form>

Note que declaramos dos campos de entrada correspondientes a las variables customerId y amount.

En ese mismo directorio creemos el archivo denominado:

check_prestamo.html

con el siguiente contenido:

<form name="checkPrestamo">
  <div class="form-group">
    <label for="customerId">Customer ID</label>
    <input class="form-control"
           cam-variable-type="String"
           cam-variable-name="customerId"
           name="customerId"
           readonly="true" />
  </div>
  <div class="form-group">
    <label for="amount">Amount</label>
    <input class="form-control"
           cam-variable-type="Double"
           cam-variable-name="amount"
           name ="amount" />
  </div>
</form>

Con esto ya tenemos listos los archivos .html que debemos asociar con nuestras actividades del proceso BPMN, lo cual realizaremos sin demora en el próximo paso.

Agregar Formularios al proceso BPMN

Vayamos a nuestro fabuloso editor, modeler, de Camunda BPM y abramos nuestro proceso denominado:

bpm_demo/src/main/resources/diagrama_sol_pretamo_1.bpmn

Seguidamente, ubiquemos el elemento “evento de inicio”, selecciónelo pinchando o haciendo click sobre él. En la barra de propiedades, seleccione la pestaña o sección “Forms” y agregue a la propiedad “Form Key” el siguiente valor:

embedded:app:forms/init_proc_prestamo.html

Esto significa que vamos a usar un formulario incrustado en la ventana de inicio y que se encuentra dentro de los recursos de la aplicación.

De igual forma vamos a asociar nuestra tarea humana “Solicitar Préstamo” con el formulario “check_prestamo.html”. Pare ello seleccionemos la actividad humana en cuestión, vayamos a la barra de propiedades, sección de formularios y establecemos la propiedad “Form Key” con el siguiente valor:

embedded:app:forms/check_prestamo.html

Guarde los cambios, vaya al eclipse y reconstruya y re despliegue el proceso.

Iniciar una Instancia de Proceso

Iniciemos el servidor de BPM de Camunda, vayamos al "TaskList" con el usuario Demo y busquemos la opción "Start Process", seleccionamos el proceso "Solicitar Préstamo" y podemos ver lo siguiente:

Cerremos la sesión, e iniciemos con el usuario John.

Vemos que tiene asignada la tarea “Solicitar Préstamo”, hacemos click en la tarea y podemos observar lo siguiente:

Que es justamente lo que queríamos demostrar.

Saludos y hasta una próxima entrega.