Bonita 7.7 (/bonita/7.

7/)
Search 

 Notas de lanzamiento (?page=release-notes)

 Registro de cambios de herramienta de migración (?page=migration-tool)
 Diseño de aplicaciones y procesos (?page=_application-and-process-design)
 Resumen de Bonita (?page=bonita-bpm-overview)
 Descripción general del diseño de aplicaciones y procesos (?page=_application-and-process-design-
overview)
 Tutorial de inicio (?page=getting-started-tutorial)
 Conceptos clave (?page=key-concepts)
 Comparación de 7.xy 6.x (?page=comparison-of-7-x-and-6-x)
 Ciclo de vida y perfiles (?page=lifecycle-and-profiles)
 Metodología de diseño (?page=design-methodology)
 Preferencias de Bonita Studio (?page=bonita-bpm-studio-preferences)
 Consejos y consejos de Bonita Studio (?page=bonita-bpm-studio-hints-and-tips)
 Organización (?page=_organization)
 Perfiles (?page=_profiles)
 Modelado de procesos (?page=_process-modeling)
 Datos (?page=_data)
 Desarrollo de página y formulario (?page=_page-and-form-development)
 Descriptor de la aplicación (?page=applicationCreation)
 Conectividad (?page=_connectivity)
 Informes (?page=_reporting)
 Importar y exportar un proceso (?page=import-and-export-a-process)
 Configuración del proceso (?page=_process-configuration)
 Prueba de proceso (?page=_process-testing)
 Crear un proceso para la implementación (?page=build-a-process-for-deployment)
 Instalación (?page=_installation)
 Bonita Portal Administration (?page=_bonita-portal-administration)
 Desarrollo (?page=_development)
 Howtos (?page=_howtos)
(https://github.com/bonitasoft/bonita-doc/edit/7.7/md/getting-started-tutorial.md)

Tutorial de inicio
Este tutorial explica cómo crear una aplicación que incluya un proceso. La aplicación se crea con Bonita
Community Edition y utiliza funciones que están disponibles en todas las ediciones. La aplicación de
ejemplo es una herramienta de viaje de negocios.

Importante: estas instrucciones también están disponibles en video

(http://www.bonitasoft.com/resources/videos/getting-started-tutorial) . La solución completa está
disponible en GitHub (https://github.com/Bonitasoft-Community/getting-started-turorial) .

Este es el caso de uso: un empleado abre la aplicación Travel Tool para ver sus solicitudes de viaje
pendientes y aprobadas. Crean una nueva solicitud de viaje. Luego, la solicitud se envía al gerente del
empleado. El gerente revisa la solicitud y la aprueba o rechaza.

En una aplicación de gestión de viajes real, habría varios pasos del proceso después de la aprobación:
estimar los costos, posiblemente obtener un segundo nivel de aprobación si el costo supera un cierto
umbral, presentar un reclamo de gastos después del viaje, revisar el reclamo de gastos, escalar
cualquier cosa de política y autorización de pago. Sin embargo, para este tutorial considerará solo la
primera parte del proceso, donde se envía una solicitud de viaje y luego se revisa.

Este tutorial asume que eres un desarrollador que usa Bonita por primera vez. Da instrucciones para usar
Bonita Studio, el Diseñador de UI y Bonita Portal. Se supone que está familiarizado con las API de
JavaScript, JSON y REST.

Use Bonita Studio para definir su proceso, incluido el uso del Diseñador de IU para crear páginas y
formularios. Luego use Bonita Portal para construir la aplicación.

Esta es la secuencia recomendada para crear una aplicación, pero generalmente las páginas de la
aplicación, el modelo de datos y los procesos se definen en paralelo y evolucionan a medida que
profundiza en los detalles de la aplicación:

Diseñar páginas de aplicación

Crea el modelo de datos
Crear la definición del proceso
Crear formularios
Ejecutar el proceso
Construye la aplicación

Diseñar páginas de aplicación

El primer paso para crear una aplicación es diseñar las páginas de la aplicación en el Diseñador de UI
utilizando datos ficticios, creando una aplicación prototipo como la ven los usuarios. Esto le permite
revisar la aplicación con las partes interesadas y obtener la validación del diseño de la aplicación antes
de proceder a tareas más complejas.

Bonita Studio UI Designer es un entorno para crear páginas y formularios de aplicaciones. Para iniciar el
Diseñador de UI, haga clic en el icono del Diseñador de UI en la barra de enfriamiento de Bonita Studio
(en la parte superior de la pantalla). El Diseñador de IU se abre en un navegador.

La herramienta de viaje tiene una página de inicio que muestra una lista de solicitudes de viaje
pendientes y aprobadas para el usuario actual. Contiene un botón para iniciar una nueva solicitud de
viaje.

También hay algunas formas asociadas con el proceso de gestión de viajes:

Crea una solicitud de viaje

Revisar una solicitud de viaje y aprobarla o rechazarla

La forma más fácil de crear estos formularios es desde la definición del proceso, por lo que es lo que
hará más adelante en el tutorial.

Las siguientes secciones explican cómo crear la página de la aplicación y luego llenarla con datos
ficticios. En cualquier etapa, puede hacer clic en Vista previa y ver una vista previa del diseño de la
página tal como aparecerá para los usuarios. Recuerde hacer clic en Guardar para guardar su trabajo
con frecuencia.

Crear página de inicio de herramienta de viaje

En Bonita Studio, inicie el Diseñador de IU haciendo clic en el icono en la barra de enfriamiento. Esto
abre el Diseñador de IU en su navegador, en la página de inicio.
 En la página de inicio de UI Designer, haga clic en el botón Crear . Esto trae una ventana
emergente.
En la ventana emergente, configure el tipo en Página de aplicación y el nombre en TravelTool . El
nombre no debe contener espacios ni caracteres especiales. Este nombre se usa en Bonita para
identificar la página. No se muestra al usuario de la aplicación.
Haz clic en Crear . Esto abre la nueva página en el editor de páginas.

Cree la estructura de la página arrastrando widgets desde la paleta de la izquierda y soltándolos en la

pizarra (el panel central). Especifique las características de un widget seleccionándolo y actualizando
las propiedades en el panel de la derecha. Agregue los siguientes widgets:

Un widget TEXT, con la propiedad Text establecida en nombre de usuario .

Un widget TITLE, con la propiedad Text establecida en la herramienta Travel .
Un widget de TEXTO, con texto que presenta la aplicación: This page lists your pending and
approved travel requests.
Un CONTENEDOR para las solicitudes pendientes del usuario, con los siguientes widgets:
Un widget TITLE con un nivel de título más bajo que el título de la página (por ejemplo,
"Nivel 3"), con el texto My pending requests .
Un widget TABLE para enumerar solicitudes de viaje pendientes, con las siguientes
propiedades:
Encabezados establecidos en Departure date, Number of nights, Hotel needed,
Destination, Reason
Clave de columnas establecida en departureDate, numberOfNights, hotelNeeded,
destination, reason

Un widget LINK con propiedad de texto Create new travel request y estilo establecida en
primaria.

Un CONTENEDOR para las solicitudes aprobadas por el usuario, con los siguientes widgets:
Un widget TITLE con un nivel de título más bajo que el título de la página (por ejemplo,
"Nivel 3"), con el texto My approved requests .
Un widget TABLE para enumerar las solicitudes de viaje aprobadas, con las siguientes
propiedades:
Encabezados establecidos en Departure date, Number of nights, Hotel needed,
Destination, Reason .
Clave de columnas establecida en departureDate, numberOfNights, hotelNeeded,
destination, reason .

Cuando haya agregado los widgets, haga clic en Vista previa para ver cómo se muestra la página.
Cambie la disposición de los widgets en la pizarra usando arrastrar y soltar y usando la propiedad Ancho
, hasta que esté satisfecho con el resultado.

Recuerde hacer clic en el botón Guardar superior o escriba Ctrl+S para guardar su trabajo.

Agregar datos ficticios

Ahora use algunos datos ficticios para ver cómo se verán las tablas cuando haya datos.
Primero cree una variable que contenga los datos, y luego vincule la variable a la propiedad Value del
widget .
En la aplicación, los datos reales serán datos comerciales recuperados por una llamada a la API REST.
Los datos ficticios para las solicitudes de viaje están en JSON. Necesita dos variables JSON
myPendingRequests y myApprovedRequests .

Para crear myPendingRequests :

1. En el panel Variables (en la parte inferior de la página), haga clic en Crear una nueva variable .
2. Ingrese el nombre de la variable, myPendingRequests .
 3. Seleccione el tipo JSON.
4. Ingrese este valor:

[
{
"userId": 3,
"destination": "Grenoble",
"departureDate": "2016-02-09",
"numberOfNights": 1,
"hotelNeeded": true,
"reason": "Bonita 7.2 launch",
"status": "pending",
"refusalReason": ""
},
{
"userId": 3,
"departureDate": "2016-10-09",
"numberOfNights": 3,
"hotelNeeded": false,
"destination": "Paris",
"reason": "Open source conference",
"status": "pending",
"refusalReason": ""
},
{
"userId": 3,
"departureDate": "2016-07-07",
"numberOfNights": 4,
"hotelNeeded": false,
"destination": "San Francisco",
"reason": "BPAD training",
"status": "pending",
"refusalReason": ""
}
]

5. Haz clic en Guardar .

6. Seleccione el widget de tabla para las solicitudes pendientes.
7. En la propiedad Contenido , haga clic en el ícono de vínculo a la derecha (" fx "), luego haga clic
en el cuadro y elija myPendingRequests de la lista de variables (comience a escribir el nombre de
la variable para completar automáticamente).
8. Haga clic en Vista previa para ver la página con datos para solicitudes pendientes.
Ahora siga los mismos pasos para crear myApprovedRequests con el siguiente contenido:
 [
{
"userId": 3,
"destination": "Tokyo",
"departureDate": "2016-10-10",
"numberOfNights": 5,
"hotelNeeded": true,
"reason": "BPM for HR conference",
"status": "approved",
"refusalReason": ""
},
{
"userId": 3,
"departureDate": "2015-12-11",
"numberOfNights": 3,
"hotelNeeded": false,
"destination": "San Francisco",
"reason": "Meetings with team",
"status": "approved",
"refusalReason": ""
}
]

Cuando haya definido esta variable, seleccione el widget de tabla para las solicitudes aprobadas y
establezca el valor de la propiedad Contenido en myApprovedRequests (recuerde hacer clic en el icono "
fx ").

Revisa y mejora la página

Ahora tiene un prototipo de la página TravelTool con datos ficticios. Vea el prototipo y ajuste la
disposición de los widgets hasta que esté satisfecho con la apariencia de la página.
Puede arrastrar y soltar widgets para reordenarlos, y puede cambiar propiedades que incluyen Ancho y
Alineación . Por ejemplo, para mejorar esta página, puede realizar los siguientes cambios:

Seleccione el widget de nombre de usuario y cambie la Alineación a right .

Seleccione el título "Herramienta de viaje" y arrástrelo junto al nombre de usuario. El tamaño del
widget de nombre de usuario se ajustará automáticamente, de modo que ambos widgets estén en
la misma fila.
Seleccione el widget de enlace "Crear nueva solicitud de viaje" y cambie la Alineación a center .

Crea el modelo de datos

Hay dos etapas para definir variables: primero define el modelo de datos comerciales y luego especifica
cómo el proceso maneja los objetos del modelo.
El modelo se define como un conjunto de clases Java, y el proceso utiliza instancias de estas clases. Si
no está familiarizado con la terminología, todo lo que necesita recordar es que el modelo es la
definición global, con una colección de variables estructuradas.
Para su proceso, seleccione el subconjunto que sea relevante.

Primero, crearemos el modelo de datos comerciales, que luego estará disponible para todos los
procesos. Usaremos un modelo con un objeto:

TravelRequest contiene los detalles del viaje que se solicita y su estado de aprobación.

Para definir el modelo de datos comerciales:

 1. Ir al Desarrollo menú, seleccionar modelo de negocio de datos y elija Manage ... . Esto abre el
cuadro de diálogo para administrar el modelo de datos comerciales.

2. Junto a la lista de tipos de objeto de negocio, haga clic en Agregar . Un nombre de tipo
temporal, como BusinessObject1, se agrega a la lista.

3. Haga clic en el nombre temporal y cámbielo a TravelRequest .

4. Seleccione el tipo de objeto comercial TravelRequest y agregue sus atributos. Esta tabla muestra
los atributos y sus tipos:

Variable Tipo de datos Obligatorio

ID de usuario Largo si

fecha de salida Solo fecha si

número de noches Entero si

hotelNeeded Booleano si

destino Cuerda si

razón Cuerda si

estado Cuerda si

rechazo Motivo Cuerda No

Para agregar cada atributo:

1. En la pestaña Atributos , haga clic en Agregar . Se agrega un nombre de atributo temporal

("atributo1") a la columna Nombre.

2. Cambie el nombre temporal al nombre del atributo.

3. Seleccione el tipo de la lista desplegable. Para mostrar la lista, haga clic en el extremo derecho
de la columna Tipo .

4. No hay atributos múltiples en este objeto, por lo que puede ignorar esta columna.

5. En la columna Obligatorio , marque la casilla de los atributos que son obligatorios.

6. Agregue una consulta personalizada que usará para buscar datos utilizando el ID de usuario y el
estado:

1. En la pestaña Consultas , seleccione Personalizado .

2. Haz clic en Agregar . Se agrega un nombre de consulta temporal ("query1") a la columna
Nombre .
3. Cambia el nombre temporal a findByUserIdAndStatus .
4. Haga clic en la columna de consulta y luego haga clic en el icono de edición a la derecha.
Esto abre una ventana emergente con una consulta personalizada propuesta que utiliza
todos los atributos.
5. En el campo Consulta JPQL , elimine estas líneas:
 AND t.departureDate = :departureDate
AND t.numberOfNights = :numberOfNights
AND t.hotelNeeded = :hotelNeeded
AND t.destination = :destination
AND t.reason = :reason
AND t.refusalReason = :refusalReason

6. En la lista Parámetros, elimine todos los atributos excepto userId y status .

7. Haga clic en Aceptar para guardar la consulta.

7. Haga clic en Finalizar para guardar el modelo de datos profesionales.

Crear la definición del proceso

Crea el diagrama
La primera etapa es crear el nuevo diagrama, lo que haces con Bonita Studio. Mientras trabaja en un
diagrama, guarde su trabajo de vez en cuando, haciendo clic en el icono Guardar en la barra de
enfriamiento (en la parte superior de la pantalla) o escribiendo CTRL+S .
Cree el diagrama de la siguiente manera:

1. Haga clic en Nuevo diagrama en la página de bienvenida de Bonita Studio. Esto crea un diagrama
casi vacío para que pueda comenzar a actualizar:

El rectángulo grande con un nombre a la izquierda es el grupo .

Dentro de la piscina hay un carril , que también es un rectángulo. Puede ver el borde del carril en
el lado izquierdo, al lado del nombre de la piscina. Los otros bordes del carril coinciden con el
borde de la piscina, por lo que no son visibles.
El círculo verde en el carril es un evento de inicio .
La caja azul en el carril es una tarea humana .

2. Lo primero que debe hacer es darle al diagrama un nombre más descriptivo. Haga clic en el
diagrama fuera del grupo, luego vaya al panel Detalles . Esta es el área en la esquina inferior
derecha de la pantalla.
3. En la pestaña General , panel Diagrama , haga clic en Editar ... junto al campo Nombre .
4. Ingrese el nuevo nombre del diagrama, Solicitud de viaje simple , en la ventana emergente y haga
clic en Aceptar . Puede ver en la pestaña en la parte superior de la pizarra que el nombre del
diagrama ha cambiado.
5. Ahora dale al Pool un nombre más descriptivo. Seleccione la piscina haciendo clic en el espacio
entre el borde de la piscina y el borde del carril en el lado izquierdo del diagrama. Luego, vaya al
panel Detalles , pestaña General , panel Grupo y haga clic en Editar ... junto al campo Nombre .
Ingrese el nuevo nombre del grupo, Solicitud de viaje , en la ventana emergente. Cuando ha
cambiado el nombre del diagrama y el grupo, el diagrama se ve así:
 6. Este proceso comienza cuando un empleado completa un formulario de solicitud de viaje. No
necesita crear una tarea para esto porque es esta acción la que desencadena el inicio del proceso.
Esto se conoce como instanciación de procesos. Se define un formulario para la creación de
instancias de proceso a nivel de grupo.
7. Defina qué sucede después de que el usuario envíe un formulario de solicitud: el gerente revisa la
solicitud de viaje y la aprueba o rechaza. Puede usar la tarea de ejemplo que se agregó al
diagrama automáticamente. Haga clic en el nombre de la tarea y cámbielo a Revisión del
administrador .
8. En una futura evolución de este proceso, la siguiente tarea sería enviar los detalles de la solicitud
de viaje al equipo de administración para que puedan manejar la reserva. Por ahora, aunque solo
estamos interesados en que la primera parte del proceso funcione, agregue un final después de la
tarea de revisión. Puede hacerlo arrastrando el icono de fin (círculo rojo) desde la paleta a la
pizarra y luego conectándose a la tarea de revisión del Administrador con un elemento de flujo.

Cuando haya terminado, su diagrama debería verse así:

Definir variables de negocio.

Ya ha definido el modelo de datos, pero ahora necesita especificar cómo se aplica el modelo a este
proceso.
Defina una variable de negocio travelRequest , que es una instancia del tipo de objeto TravelRequest .
Sigue estos pasos:

1. Selecciona la piscina.
2. Vaya al panel Detalles , pestaña Datos , panel Variables de grupo y haga clic en Agregar ... junto
al cuadro Variables empresariales.
3. En el campo Nombre, escriba travelRequest .
4. Agregue una descripción para documentar su desarrollo si lo desea.
5. En la lista Objeto comercial, elija TravelRequest .
 6. No configure el valor predeterminado. El valor predeterminado utiliza información que está en el
contrato, por lo que la definirá más adelante.
7. Haga clic en Finalizar para guardar la definición.

Los atributos de travelRequest son la información que se utiliza en el proceso. No hay otras variables
para definir.

Crear contratos
Un contrato es la especificación de lo que debe devolver un formulario a la instancia de proceso. Defina
un contrato para la instanciación de procesos y para cada tarea humana.

El contrato no necesita incluir información que se envía desde la instancia de proceso al formulario. Esto
se incluye en el contexto, que es el conjunto de información que se pasa al formulario. No puedes
configurar el contexto.

La información que especifique en el contrato es un subconjunto de la información utilizada en el

proceso.
Para especificar el contrato de creación de instancias de proceso, seleccione el grupo y siga estos pasos:

1. Vaya al panel Detalles , pestaña Ejecución , panel Contrato .

2. En el Entradas pestaña, haga clic en Agregar a partir de datos ... . Esto abre una ventana
emergente para crear el contrato utilizando las variables de datos comerciales que se definen
para el proceso.
3. Seleccione travelRequest y haga clic en Next .
4. Especifique los atributos a incluir. De forma predeterminada, todos los atributos están marcados,
por lo tanto, desmarque aquellos que no son relevantes: userId , status y refusalReason .
5. Deje el botón de opción en generación automática de secuencia de comandos de inicialización.
6. Haga clic en Finalizar e ignore con seguridad la advertencia relacionada con la generación de
contratos, ya que nos ocuparemos de ellos a tiempo.

Ahora que el contrato de instanciación de casos está configurado, agregaremos dos restricciones a sus
valores.
El primero asegurará que la fecha de salida sea futura y el segundo validará que el número de noches es
mayor o igual a cero.

1. Aún en el panel Contrato , cambie a la pestaña Restricciones y haga clic en Agregar . Esto
agrega una restricción de marcador de posición.
2. Haga clic en el nombre del marcador de posición y cámbielo a exitInFuture .
3. Haga clic en el campo Expresión , luego haga clic en el icono que aparece a la derecha del
campo. Esto abre una ventana emergente donde puede ingresar la expresión de restricción.
4. Defina la restricción con este
script: travelRequestInput.departureDate.isAfter(java.time.LocalDate.now())
5. En la columna Mensaje de error , agregue este texto: Departure date must be in the future.
6. Agregue una segunda restricción de la siguiente manera:

Nombre: zeroOrMoreNights
Expresión: travelRequestInput.numberOfNights >= 0
Mensaje de error: Number of nights must be greater or equal to zero.

En el panel Detalles , pestaña Ejecución , panel Contrato , pestaña Entradas , haga clic en la flecha al
lado de travelRequestInput para expandir la lista de atributos.
Para cada atributo, agregue una Descripción . La descripción se muestra en el formulario generado
automáticamente utilizado para las pruebas de proceso, por lo tanto, incluya información que ayudará
al usuario a completar el formulario correctamente, de la siguiente manera:

Atributo Descripción
 Atributo Descripción

fecha de salida Especifique la fecha en que comienza el viaje.

número de noches Ingrese el número de noches

hotelNeeded Especifique si necesita una reserva de hotel

destino Ingrese la ciudad de destino

razón Explica el motivo de este viaje. Dar justificación comercial

El contrato de instanciación de proceso ya está completo.

El contrato para la tarea de revisión del administrador solo tiene dos entradas, estado y motivo de
rechazo , por lo que puede crearlo directamente en lugar de datos.
También tiene una restricción: se debe especificar un motivo de rechazo si el gerente rechaza la
solicitud. Para definir este contrato:

1. Seleccione la tarea de revisión del administrador .

2. Vaya al panel Detalles , pestaña Ejecución , panel Contrato .

3. En la pestaña Entradas , haga clic en Agregar y especifique los siguientes atributos:

Nombre Tipo Múltiple Descripción

estado Texto No Indique si aprueba o rechaza esta solicitud

rechazo Motivo Texto No Si rechaza una solicitud, debe dar una razón

4. Vaya a la pestaña Restricciones y haga clic en Agregar . Esto agrega una restricción de marcador
de posición.

5. Haga clic en el nombre del marcador de posición y cámbielo a reasonRequired .

6. Haga clic en el campo Expresión , luego haga clic en el icono que aparece a la derecha del
campo. Esto abre una ventana emergente donde puede ingresar la expresión de restricción.

7. Defina la restricción con este script: status == "approved" || (status == "refused" &&
refusalReason?.trim())

8. En la columna Mensaje de error , agregue este texto: If you refuse a request, you must give a
reason.

Definir valores iniciales de objeto de negocio

Ahora que el contrato está definido, puede configurar el valor inicial de travelRequest , de la siguiente
manera:

1. Seleccione el grupo y vaya al panel Detalles , pestaña Datos , panel Variables del grupo .
2. Haga doble clic en travelRequest para editarlo.
3. Haga clic en el ícono de lápiz junto al campo Valor predeterminado . Esto abre el editor de
expresiones.
4. Se generó automáticamente un script initTravelRequest () para inicializar nuestros datos con el
contrato. Completaremos este script configurando los atributos userId y status .
Inserte el siguiente código después de la primera línea:
 travelRequestVar.userId = BonitaUsers.getProcessInstanceInitiator(apiAccessor, processInsta
travelRequestVar.status = "pending"

5. Haga clic en Aceptar para guardar la expresión.

6. Haga clic en Aceptar nuevamente para guardar la definición de objeto actualizada.

Actualizar objeto comercial con datos de revisión

Debe definir operaciones para actualizar el objeto comercial con los valores ingresados para el estado y
el motivo de rechazo en el formulario de revisión del Administrador .
Seleccione la tarea de revisión del Administrador y vaya al panel Detalles , pestaña Ejecución , panel
Operaciones . Primero defina la operación para el estado , de la siguiente manera:

1. Cree una nueva operación haciendo clic en Agregar .

2. En el primer campo, haga clic en la flecha hacia abajo para mostrar una lista de variables en las
que se puede realizar una operación y haga doble clic en travelRequest .
3. Haga clic en el valor Toma el enlace. Esto abre una ventana emergente que enumera las
operaciones disponibles. Elija Usar un método Java . La ventana emergente muestra una lista de
métodos disponibles. Haga clic en setStatus (String) - void , y luego haga clic en OK .
4. En el último campo, haga clic en la flecha hacia abajo para mostrar una lista de variables y haga
doble clic en el estado .

Repita estos pasos para definir la operación para rehusar Motivo .

Cuando se definen ambas operaciones, el panel Detalles debería verse así:

Especificar actores
La siguiente etapa es definir quién lleva a cabo los pasos del proceso. Esto se hace mediante la
asignación de actores (?page=actors) .
Un actor es un marcador de posición para la persona que realizará una tarea.
Cuando configura un proceso, establece la conexión entre los actores definidos en la definición del
proceso y las personas del mundo real que harán los pasos del proceso.
Bonita Studio viene con una organización de prueba, llamada ACME, que puede usar para las pruebas. En
este ejemplo, tenemos dos personas, el empleado que inicia el proceso y el gerente del empleado.
Los gerentes también son empleados, por lo que puede usar el mismo actor para la creación de
instancias de proceso y para la tarea de revisión, pero use un filtro para especificar quién realiza el paso
de aprobación. Así es como funciona:

1. En el diagrama, seleccione el grupo y vaya al panel Detalles , pestaña General , panel Actores .
Aquí es donde define a todos los actores para el proceso.
Por defecto, ya hay un actor empleado, que está definido para la prueba. Puede cambiar la
organización y los actores más tarde, pero para las pruebas iniciales, esto funcionará bien.
La configuración predeterminada significa que cualquier empleado de la organización puede
iniciar un caso del proceso de solicitud de viaje. No necesitas cambiar nada.
2. Luego, seleccione el paso de revisión del Administrador y defina quién puede hacer esto. Este
paso lo realizará el gerente de la persona que inició la solicitud.
 Todos los gerentes también son empleados, y el actor empleado está definido para el carril, así
que marque el botón Usar el actor definido en el carril .
3. Para asegurarse de que la tarea de revisión se envíe al administrador correcto, use un filtro de
actor:
1. Haga clic en el filtro de actor Establecer ... botón.
2. Abra la lista de filtros de actores de proceso.
3. Seleccione Administrador de iniciador . Esto significa que la tarea de revisión debe ser
realizada por el gerente de la persona que presentó la solicitud que inició el proceso. Haga
clic en siguiente
4. Especifique un nombre para la definición de filtro de actor, requestersManager y haga clic
en Finalizar .

El proceso ya está definido. La siguiente sección le muestra cómo configurarlo y ejecutarlo para
verificar que la definición del proceso sea correcta antes de definir formularios y crear la aplicación.

Ejecutar proceso con formularios temporales

Puede ejecutar un proceso que está en desarrollo antes de crear formularios, utilizando formularios
temporales que se crean automáticamente.
Esta sección explica cómo configurar el proceso y ejecutarlo desde Bonita Studio.

Antes de poder ejecutar el proceso, debe configurarlo. Para la primera ejecución usaremos la
configuración predeterminada.

Puede ejecutar el proceso y ver los formularios temporales para verificar que la definición del proceso
sea correcta.

1. Click Run in the coolbar. This opens a browser window, logs you in to Bonita Portal as Walter Bates
(user used for authentication in the default process configuration), and displays the travel request
form.
2. Fill out the form. Make sure that you use the right format for each field in the temporary forms
("yyyy-mm-dd" format for dates and either "true" or "false" value for booleans).
3. When you have filled out the form, click Start. This submits the form and starts the process
instance.
4. At the top-right of the Portal window, click the arrow beside Walter's name and choose Logout.
5. Log in as Walter's manager, Helen Kelly, with username helen.kelly and password bpm . The
Tasks view is displayed, where there is a task called Manager review.
6. Select the Manager review task. The temporary form for the manager review is displayed in the
right hand panel.
It contains fields for the items defined in the contract for this step, but not the information that
Walter entered in the request.
When you create your own forms, you will add this information, so that the manager can see the
details of the request before approving or refusing it.
For now, you can see the form, so you have verified that the process definition is correct.

Create forms
The easiest way to create a process form is to generate it automatically from the contract. This
automatically creates a mapping between the process and the form and defines form data. You can then
update the form manually to add or remove field, and to change the layout.

While using the UI Designer, click Save frequently to save your work.

To create the process instantiation form:

1. In Bonita Studio, select the pool and go to the Details panel, Execution tab, Contract pane.
 2. At the top-right of the Details panel, click the UI Designer icon. This opens the UI Designer in a
browser window, with the automatically generated form.
3. Change the form name. All forms that are generated automatically are called newForm, so you
must rename them to avoid confusion. To do this, double-click on the name in the top bar, and
then specify a new form name, submitTravelRequest.

The form is now created. A form is a UI Designer page that is mapped to a process and a contract. A
page is a collection of widgets, and each field is defined by a widget.
Widgets are arranged in rows and each row is divided into 12 columns. Each widget has a width that
spans across one or more column. In addition to their width, widgets have a set of editable properties
that can be set on the right side of the window.

Para cambiar la apariencia y el comportamiento de una página, actualice los widgets. En cualquier
momento, puede hacer clic en Vista previa para ver cómo se verá la página para un usuario.
Para tener más espacio para actualizar la página, puede ocultar las pestañas Variables y Activos
haciendo clic en la flecha hacia abajo.

Antes de mejorar el aspecto del formulario, aplicaremos algunas reglas de validación en los diferentes
campos:

1. Seleccione el widget Número de noches y establezca su propiedad de Valor mínimo en 0 .

2. Obtenga una vista previa del formulario e intente ingresar algunos valores para asegurarse de que
la validación funcione. El botón Enviar debe estar deshabilitado hasta que todos los widgets
contengan valores válidos.

El formulario ahora debería verse así en el editor de página:

Ahora que el formulario es funcional, vamos a mejorar su apariencia para que sea más fácil de usar:
 1. Seleccione el widget de título y cambie la propiedad Texto a Submit a new travel request .
2. Haga que el widget Fecha de salida sea más estrecho. Para hacer esto, selecciónelo y cambie el
valor de la propiedad Ancho a 4 columnas.
3. Mueva el widget de destino hacia la parte superior del formulario (debajo del título).
4. Mueva el número de noches y los widgets necesarios para el hotel a la misma fila que la fecha de
salida, y reduzca los anchos.
Nota: cuando agrega un widget a una fila, automáticamente toma todas las columnas restantes,
por lo tanto, configure el ancho después de mover los widgets.
5. Borre el valor inicial de Número de noches para mostrar el marcador de posición en tiempo de
ejecución:
1. En el panel Variables (en la parte inferior de la página), ubique la fila que contiene la
variable formInput .
2. Haga clic en el ícono de lápiz ubicado en el lado derecho de esta fila.
3. Cambie el valor del atributo numberOfNights de 0 a nulo .
4. Haz clic en Guardar .

Cuando haya terminado, la vista previa del formulario se ve así:

Ahora defina el formulario para la tarea de revisión del Administrador . Comience generando
automáticamente el formulario desde el contexto, luego agregue widgets para mostrar los detalles de la
solicitud para que el administrador los revise. Sigue estos pasos:

1. En Bonita Studio, seleccione la tarea de revisión del Administrador y vaya al panel Detalles ,
pestaña Ejecución , panel Contrato .

2. En la esquina superior derecha del panel Detalles , haga clic en el icono del Diseñador de IU. Esto
genera un formulario y lo abre en el Diseñador de UI.

3. Cambie el nombre del formulario a reviewTravelRequest .

4. Agregue una variable para obtener la información que el usuario ingresa en el formulario de
solicitud. Para hacer esto:

1. En la pestaña Variables , haga clic en Crear una nueva variable .

2. Especifique el nombre, solicitud .
3. Establezca el Tipo en API externa .
4. Establezca el valor en ../{{context.travelRequest_ref.link}} .
5. Haz clic en Guardar .

5. Add a variable to hold the different request status values:

Name Type Value

statusValues JSON [{"label": "Approve request", "value": "approved"},{"label":

"Refuse request", "value": "refused"}]
 6. Edit the formInput variable and set the value for the status attribute to "approved".

7. All of the other widgets you will add will be placed inside the form container (identified with a
dashed border).

8. Add a title widget and set its text property to Review travel request . Set the Level property to
Level 4, so it is the same size as the title of the form for creating a request.

9. Add read-only widgets to display the details of the travel request, using the following
information:

Label Widget type Value binding Read-only

Destination Input request.destination yes

Departure date Date picker request.departureDate yes

Number of nights Input request.numberOfNights yes

Hotel needed Checkbox request.hotelNeeded si

Motivo de viaje Área de texto request.reason si

10. Elimine el widget "Motivo de rechazo" que se agregó automáticamente, lo reemplazaremos por
algo más fácil de usar en el siguiente paso.

11. Agregue un widget de área de texto con las siguientes propiedades:

Propiedad Valor

Oculto formInput.status === 'approved' (haga clic en el ícono "fx" / "bind" primero)

Etiqueta Razón de rechazo

Valor formInput.refusalReason

Necesario si

La propiedad oculta dinámica ocultará el widget cuando el estado de la solicitud esté configurado
como 'aprobado'. De lo contrario, el campo se marcará como requerido y la validación del
formulario evitará que el usuario rechace una solicitud sin un motivo.

12. Elimine el widget de estado que se agregó automáticamente.

13. Agregue un widget de botones de radio con las siguientes propiedades:

Propiedad Valor

Etiqueta Decisión de
revisión

Valores disponibles (primero haga clic en el icono de enlace "fx" al lado statusValues
del campo de entrada)

Teclas mostradas etiqueta

Llaves devueltas valor

 Propiedad Valor

Valor seleccionado formInput.status

14. Obtenga una vista previa del formulario para probar la validación y reorganice los widgets hasta
que se vea así en el editor:

Ejecutar el proceso
Ahora puede ejecutar el proceso utilizando los formularios que creó. Asegúrese de haber guardado todo
en el Diseñador de IU. Luego haga clic en Ejecutar en la barra de enfriamiento de Studio.

Complete el formulario de solicitud como Walter, luego inicie sesión como Helen y realice la tarea de
revisión.
Cuando se muestra el formulario de revisión, contiene la información que ingresó Walter en el
formulario de solicitud. Puede aprobar o rechazar la solicitud.

Una vez finalizado el proceso, puede ver la información de la solicitud tal como está almacenada en la
base de datos de datos empresariales en Bonita Studio:

1. En la barra de menú, seleccione el Desarrollo menú, seleccionar modelo de negocio de datos , y

luego elegir los datos Cejas (consola h2) ... . Esto abre la interfaz web h2 (base de datos de
datos empresariales) en un navegador web.
2. En el menú del árbol izquierdo, haga clic en SOLICITUD DE VIAJE. Esto generará una consulta de
selección SQL.
3. Haga clic en el botón Ejecutar (Ctrl + Entrar) . Debería ver todas las solicitudes creadas
ejecutando el proceso de Solicitud de viaje.

Su proceso ahora está completo, por lo que puede incluirlo en una aplicación.
Construye la aplicación
Esta sección explica cómo compilar la aplicación a partir de las páginas y el proceso que ya ha creado.
Existen los siguientes pasos:

1. En el Diseñador de IU, actualice la página de la aplicación para usar datos comerciales en lugar de
los datos JSON ficticios y para especificar la conexión entre la página y el proceso.
2. En Bonita Portal, cree la aplicación.

Actualice la página de la aplicación TravelTool

En el Diseñador de IU, edite la página TravelTool y cree las siguientes variables:

Nombre Tipo Valor

sesión API externa ../API/system/session/unusedId

processDef API externa ../API/bpm/process?p=0&c=1&f=name=Travel%20Request

Actualice (edite) las siguientes variables:

Nombre Tipo Valor

myPendingRequests API ../API/bdm/businessData/com.company.model.TravelRequest?

externa q=findByUserIdAndStatus&p=0&c=10&f=userId=
{{session.user_id}}&f=status=pending

myApprovedRequests API ../API/bdm/businessData/com.company.model.TravelRequest?

externa q=findByUserIdAndStatus&p=0&c=10&f=userId=
{{session.user_id}}&f=status=approved

Ahora actualice los widgets para usar las nuevas variables:

1. Seleccione el widget nombre de usuario en la parte superior de la página, y actualizar el texto a

este valor: {{session.user_name}} .
2. Para las solicitudes pendientes y aprobadas, establezca las teclas de columna en departureDate
| date, numberOfNights, hotelNeeded, destination, reason , para establecer el formato de
fecha.

Botón de enlace para procesar

Cuando el usuario hace clic en el botón en la página Herramienta de viaje para crear una solicitud de
viaje, la aplicación muestra el formulario para crear una solicitud.
Este es el formulario de creación de instancias para el proceso de solicitud de viaje.
Para configurar esto, seleccione el botón y configure la propiedad de URL de destino haciendo clic
primero en el cambio para enlazar a un botón de expresión ('fx' a la derecha del campo) y luego
actualizando la expresión a "/bonita/portal/resource/process/Travel%20Request/1.0/content/?
id="+processDef[0].id .

Después de que el usuario envía el formulario, se muestra la vista Tareas de Bonita Portal.

Construir aplicación
Para compilar la aplicación Travel Tool, debe exportar la página desde el Diseñador de UI, implementar
el proceso y luego crear la aplicación en Bonita Portal.
Para exportar la página, haga clic en el icono Exportar en el editor de páginas (junto al botón Guardar)
o en la página de inicio. La página se exporta como un archivo zip en la ubicación de descarga
predeterminada del navegador.

Para implementar el proceso, simplemente puede ejecutarlo desde Bonita Studio. Si no ha cambiado el
proceso desde la última vez que lo ejecutó, ya está implementado.

Para crear su aplicación en Bonita Portal:

1. Inicie sesión en Bonita Portal haciendo clic en el icono de Portal en la barra de enfriamiento y
haga clic en la flecha al lado de "Usuario" y seleccione "Administrador" para cambiar al perfil de
Administrador.
2. En la barra de menú, elija Recursos y luego haga clic en Agregar e importe la página TravelTool
que exportó desde el Diseñador de IU.
3. Vaya a Aplicaciones y haga clic en Nuevo .
4. Asigne un nombre a su aplicación Travel App , configure su URL para viajar y haga clic en Crear .
Se crea la aplicación.
5. En la lista de aplicaciones, haga clic en el icono editar (triple punto) para configurar su nueva
aplicación.
6. En la sección Páginas , haga clic en Agregar .
7. Seleccione la página de la herramienta de viaje que importó. Establezca su URL a las solicitudes .
Haz clic en Agregar .
8. Haga que esta página sea la página de inicio de la aplicación haciendo clic en el icono de inicio
que aparece al pasar el mouse sobre ella.
9. Eliminar la página de inicio predeterminada.
10. Verifique que la aplicación esté correctamente definida haciendo clic en la URL. Se muestra la
página de resumen de solicitudes de viaje, con un enlace al formulario para crear una nueva
solicitud. Cuando hace clic en el enlace, se muestra el formulario para enviar una nueva solicitud
de viaje.

¡Felicitaciones, acaba de crear su primera aplicación de Living!