Objetivo

El objetivo de este ejercicio es proporcionar formularios simples, f谩ciles de usar y adecuados para la ejecuci贸n del proceso.

Instrucciones resumidas

  1. Duplica el diagrama de proceso del ejercicio anterior para crear una versi贸n 2.1.0.

  2. Crea un formulario de instanciaci贸n de proceso a nivel de la pool que permita inicializar los atributos fechaInicio y numeroDias de la variable de negocio solicitud

  3. Crea un formulario para ejecutar la tarea de aprobacion en donde se muestre la informaci贸n del solicitante y los datos fechaInicio y numeroDias en modo de solo lectura y permita la captura de estaAprobado

Instrucciones paso a paso

  1. Duplica el diagrama de proceso del ejercicio anterior para crear una versi贸n 2.1.0:

    • A partir de la versi贸n *2.0.0, crea la versi贸n 2.1.0 del diagrama y de la pool.

  2. Crea un formulario de instanciaci贸n de proceso:

    • Selecciona la pool del proceso
    • en la zona de propiedades, navega a la pesta帽a Ejecuci贸n / Formulario de instanciaci贸n
    • Haz clic en el 铆cono l谩piz asociado al campo Formulario de destino creaci贸n de un formulario

    Esto va a abrir el UI Designer en tu navegador web con un nuevo formulario generado autom谩ticamente a partir de la definici贸n del contrato de instanciaci贸n.

    nuevo formulario

    • Cambia el nombre del formulario:

      • Usa el campo de texto en la parte superior de la pantalla para cambiar el nombre de newForm a ingresarSolicitudVacaciones. al ser un nombre t茅cnico, se deben omitir espacios, acentos y otros caracteres especiales.
      • Haz clic en el bot贸n Guardar

    • Cambia el t铆tulo del formulario, visible para el usuario:

      • Selecciona el widget Title con el valor Solicitud en la parte superior del formulario.
      • En la secci贸n a la derecha de la pantalla, edita las siguientes propiedades:
      Propiedad Valor
      Texto Ingrese una solicitud de vacaciones
      Nivel de t铆tulo Nivel 2
      Alineaci贸n centrado

    • Cambia el widget Fecha Inicio :

      • Selecciona el widget Date Picker con el valor Fecha de inicio y edita las siguientes propiedades:
      Propiedad Valor
      Etiqueta Fecha de inicio
      Formato de fecha t茅cnica dd/MM/yyyy
      Placeholder Ingrese una fecha (dd/mm/aaaa)
      Etiqueta del bot贸n Hoy: Mostrar bot贸n Hoy No

    • Cambia el widget Numero Dias :

      • Selecciona el widget Input Numero Dias y edita las siguientes propiedades:
      Propiedad Valor
      Etiqueta N煤mero de d铆as
      Placeholder N煤mero de d铆as a solicitar
      Valor m铆nimo (no debe confundirse con la propiedad Longitud m铆nima) 1

    • Cambia el widget Submit :

      • Selecciona el widget Button Submit
      • Cambia su etiqueta por Enviar

    • Verifica el formulario:

      • Comprueba que el formulario se ve as铆 en el editor: formulario en el UI Designer

      • Haz clic en el bot贸n Guardar en la parte superior de la pantalla

      • Haz clic en el bot贸n Vista previa en la parte superior de la pantalla

      • Comprueba que la vista previa se ve as铆: vista previa de un formulario

      Ten en cuenta los siguientes puntos en la vista previa:

      • El widget que muestra el error no es visible
      • Es posible probar la vista previa en diferentes dispositivos, desde tel茅fonos m贸viles hasta pantallas grandes.
      • El bot贸n Enviar est谩 deshabilitado de forma predeterminada (esto se debe a la validaci贸n proporcionada por el contenedor del formulario)
      • El bot贸n Enviar se activa cuando el contenido del formulario es v谩lido

      Nota: no es posible enviar el formulario desde la vista previa, incluso cuando este 煤ltimo es v谩lido.

    • Cierra la ventana de vista previa.

  3. Crea un formulario para ejecutar la tarea Validar solicitud:

    • En Bonita Studio, selecciona la tarea Validar solicitud
    • En la zona de propiedades, navega a la pesta帽a Ejecuci贸n / Formulario
    • Haz clic en el 铆cono l谩piz relacionado con el campo Formulario de destino para abrir un nuevo formulario en el UI Designer
    • Responde S铆 a la pregunta sobre c贸mo agregar widgets de solo lectura

    Nota: el formulario se gener贸 autom谩ticamente a partir del modelo de datos de negocio (BDM) y del contrato, y muestra los datos que no son esperados por el contrato en esta etapa en modo solo lectura.

    • Cambia el nombre del formulario:

      • Desde el UI Designer, cambia el nombre del formulario a validarSolicitudVacaciones y gu谩rdalo.

    • Recupera informaci贸n sobre el solicitante

      • Haz clic en el bot贸n Crear una nueva variable para definir una variable con las siguientes propiedades:

      variable solicitante

      Nota: puedes utilizar los ejemplos que te permiten recuperar autom谩ticamente los patrones de llamadas a la API. Aqu铆 recuperaremos identity API porque estamos buscando informaci贸n relacionada con un usuario.

    • Cambia el t铆tulo del formulario

      • Selecciona el widget T铆tulo (Title) ubicado en la parte superior del formulario
      • Configura el widget de la siguiente manera:
      Propiedad Valor
      Texto Validar una solicitud de vacaciones
      Nivel de t铆tulo Nivel 2

    • Cambia el widget Solicitante ID para presentar el nombre y apellido del solicitante:

      • Cambia el valor del campo Etiqueta por Solicitante
      • Configura el widget de esta manera:

      variable solicitante nombre y apellido

    • Cambia el bot贸n Submit:

      • Selecciona el widget
      • Cambia la etiqueta para Validar

    • Comproba el formulario simple:

      • Asegurate que el formulario se vea as铆: formulario de validacion

Opci贸n para ir m谩s lejos

  1. Agrega un widget para rechazar la solicitud:

    • Arrastra un widget Bot贸n y agr茅gualo al contenedor del formulario (谩rea delimitada por una l铆nea gruesa de puntos)
    • Configura el widget de esta manera:
    Propiedad Valor
    Ancho 6
    Etiqueta Rechazar
    Alineaci贸n derecha
    Estilo danger
    Datos enviados al hacer click {"solicitudInput":{"estaAprobado":false}}
    Valor de la respuesta fallida formOutput._submitError
    Direcci贸n URL de destino en 茅xito /bonita

  2. Borra la casilla Est谩 aprobado y el bot贸n Submit

  3. A帽ada un widget para aprobar la solicitud

  • Arrastra un widget Bot贸n al 谩rea "6 columnas" a la derecha del bot贸n Rechazar

  • Configura el widget de esta manera:

    Propiedad Valor
    Etiqueta Aprobar
    Estilo success
    Datos enviados al hacer click {"solicitudInput":{"estaAprobado":true}}
    Valor de la respuesta fallida formOutput._submitError
    Direcci贸n URL de destino en 茅xito /bonita

El formulario se vera as铆: Validaci贸n / rechazo de la solicitud de licencia

  1. Guarda el formulario:

    • Usa el bot贸n Guardar en el centro superior de la pantalla para guardar el formulario

  2. Prueba la ejecuci贸n del proceso:

    • Inicia la ejecuci贸n del proceso a trav茅s de Bonita Studio
    • Valida, a partir del historial de casos, que se ha seguido el camino correcto hasta el final del proceso

Ejercicio siguiente: configuraci贸n de los actores