Objetivo

El objetivo de este ejercicio es proporcionar a los usuarios una aplicaci贸n que permita rastrear y crear solicitudes de vacaciones.

Instrucciones resumidas

  1. Crea una nueva p谩gina en la aplicaci贸n y n贸mbrala SeguimientoDeSolicitud, que permitir谩 rastrear kas solicitudes creadas por el usuario conectado. Esta p谩gina contiene un contenedor m煤ltiple que enumera las solicitudes de vacaciones abiertas. Para cada solicitud, se muestran la fecha de inicio, el n煤mero de d铆as y el estado de aprobaci贸n.

  2. Agrega un nuevo contenedor form container para crear una nueva solicitud. Este formulario contiene un widget Fecha y un widget Input para recolectar la informaci贸n necesaria para la nueva solicitud.

  3. Crea un descriptor de aplicaci贸n y agrega la nueva P谩gina de aplicaci贸n llamada SeguimientoDeSolicitud

  4. Despliega la aplicaci贸n y accede a ella utilizando la URL 煤nica generada.

Instrucciones paso a paso

Crea una nueva p谩gina en la aplicaci贸n y n贸mbrala SeguimientoDeSolicitud

  1. En tu navegador, vuelev al UI Designer Si la ventana ha sido cerrada, vuele al Studio y haz clic en el bot贸n UI Designer

  2. Haz clic en el bot贸n Crear

  3. Selecciona P谩gina de aplicaci贸n como tipo

  4. Ingresa el nombre SeguimientoDeSolicitudes

  5. Haz clic en Crear

    crear una p谩gina de aplicaci贸n

    La vista de dise帽ador ahora deber铆a mostrarse

  6. Agrega un t铆tulo a tu p谩gina:

    • Arrastra el widget T铆tulo (A) desde la paleta y col贸calo en la parte superior de la p谩gina (B)
    • Selecciona el widget
    • En el panel derecho, ingresa Aplicaci贸n de gesti贸n de solicitudes de vacaciones en el campo Texto
    • Selecciona la opci贸n centrado para el par谩metro Alineaci贸n

    agregar widget t铆tulo

  7. Crea una variable para guardar la informaci贸n de la sesi贸n:

  • Abajo en donde se listan las variables, haz clic en Crear una nueva variable
  • N贸mbrala "sessionInfo"
  • Elige como tipo External API
  • En el campo API URL, introduce ../API/system/session/unusedId
  • Haz clic en Guardar

  1. Crea una variable para listar las solicitudes de vacaciones:

    • Haz clic en el 铆cono Modelo de datos icone-datamodel
    • Arrastra y suelta SolicitudVacaciones en la p谩gina, debajo del t铆tulo
    • Deja el nombre predeterminado: solicitudVacaciones
    • En la secci贸n Consultas de "Buscar (Find)" en un atributo, selecciona solicitanteId
    • En la secci贸n Filtrar la b煤squeda finByIdDemandeur utiliza la variable: ``
    • Haz clic en el bot贸n Guardar

    Se genera autom谩ticamente un contenedor m煤ltiple con una tabla que contiene los atributos del objeto SolicitudVacaciones.

    contenedor multiple

  2. Modifica las propiedades de los widgets en el contenedor:

    • Selecciona el widget subt铆tulo SolicitudVacaciones y n贸mbralo Seguimientio de solicitudes
    • Selecciona la opci贸n Nivel 4 para el par谩metro Nivel del t铆tulo.
    • Selecciona la opci贸n centrado para el par谩metro alineaci贸n.
    • Selecciona el widget Tabla, en el panel de la derecha, en el campo Cabeceras, borra Solicitante Id
    • Sustituye Fecha Inicio por Fecha de inicio y N煤mero Dias por N煤mero de d铆as.

  3. Declara una nueva expresi贸n JavaScript para formatear la columna "Est谩tus" de la lista:

  • Haz clic en Crear una nueva variable
  • N贸mbrala "agregarEstatusSolicitudVacaciones"
  • Elige como tipo JavaScript expression
  • Reemplaza el valor existente por el siguiente script:
if($data.hasOwnProperty('solicitudVacaciones') && $data.solicitudVacaciones) {
  for (let solicitud of $data.solicitudVacaciones) {
    if(solicitud.esAprobada)  {
      demande.esAprobadaEtiqueta = "Aprobada";
    } else if(solicitud.esAprobada === false) {
      demande.esAprobadaEtiqueta = "Rechazada";
    } else {
      demande.esAprobadaEtiqueta = "En curso";
    }
  }
}

return $data.solicitudVacaciones;

  1. Muestra la informaci贸n en las columnas de la tabla de una manera m谩s clara:

    • En el panel de la derecha, en el campo Claves de columna, elimina solicitanteId
    • En el mismo campo, reemplaza esAprobada por esAprobadaEtiqueta, creada en la variable JavaScript
    • Borra el widget Input SolicitanteId en el contenedor de detalles porque esta informaci贸n no es 煤til.

  2. Selecciona el widget Fecha Inicio y cambia las siguientes propiedades:

    Propiedad Valor
    Etiqueta Fecha de inicio
    Formato t茅cnico de la fecha dd/MM/yyyy
    Placeholder dd/mm/aaaa
    Mostrar el bot贸n de hoy no

  3. Selecciona el widget N煤mero de d铆as y cambia las siguientes propiedades :

    Propiedad Valor
    Etiqueta N煤mero de d铆as
    Placeholder N煤mero de d铆as de vacaciones
    Valor m铆nimo 1
    • Guarda la p谩gina
    • La p谩gina deber铆a verse as铆:

    p谩gina de aplicaci贸n en el UI Designer

    • Puedes obtener una vista previa de la p谩gina en cualquier momento haciendo clic en Vista previa

    Consejo: si est谩s conectado al portal en el mismo navegador, se mostrar谩n las solicitudes de vacaciones reales.

  4. Agrega un nuevo widget de tipo Link:

    • Arrastra un widget de tipo Link desde la paleta y col贸calo entre los dos t铆tulos
    • En el campo Texto introduce Crear una nueva solicitud.
    • En el campo Tipo, selecciona Formulario de instanciaci贸n del proceso
    • En el campo Nombre del proceso agrega SolicitudVacaciones.
    • En el campo Versi贸n del proceso agrega el n煤mero de la versi贸n 6.0.0
    • En el campo Alineaci贸n selecciona centrado
    • En el campo Estilo selecciona Primario
    • Guarda la p谩gina

    Ahora vamos a desplegar la aplicaci贸n en el portal desde Bonita Studio.

  5. Agrega un nuevo descriptor de aplicaci贸n:

    • En Bonita Studio, en el Explorador de proyectos a la izquierda de la ventana, despliega P谩ginas/Formularios/Layouts para verificar la presencia de todas las p谩ginas y formularios
    • En el men煤 Nuevo selecciona Descriptor de aplicaci贸n, haz clic en Nueva. Un fichero .xml se crea automaticamente.
    • Haz clic en A帽adir descriptor app
    • Ingresa solicitud-vacaciones en el campo Token de la aplicaci贸n
    • Ingresa Aplicaci贸n de solicitudes de vacaciones en el campo T铆tulo din谩mico
    • Haz clic en A帽adir

    titulo aplicacion

  6. Crea una nueva aplicaci贸n

    • En el men煤 de navegaci贸n, haz clic en A帽adir men煤 de una p谩gina (A)

    • Ingresa Seguimiento de las solicitudes de vacaciones en el campo Men煤

    • Selecciona la p谩gina custompage_SeguimientoDeSolicitud en el campo P谩gina de aplicaci贸n (B)

    • Ingresa solicitud-vacaciones en el campo Token (C).

      creaci贸n de una aplicaci贸n

  7. Define la p谩gina Aplicaci贸n de solicitudes de vacaciones como p谩gina de inicio de la aplicaci贸n:

    • Selecciona el token solicitud-vacaciones en el men煤 P谩gina de inicio
    • Haz clic en el enlace para probar la aplicaci贸n (A)
    • Una ventana se abre para confirmar el despliegue. Haz clic en el bot贸n Desplegar

Vas a poder acceder a la aplicaci贸n en el navegador directamente

vista previa de la aplicaci贸n

Pr贸ximo ejercicio: Agregar un fragmento