Cambiar el estado de registros utilizando Cuadrículas Interactivas de Oracle Application Express 18.1 - Parte I

Por Mónica Godoy Millán Oracle ACE
Publicado en Septiembre 2018


Revisado por Mario Escobar




Oracle Application Express es una herramienta que permite desarrollar aplicaciones asombrosas seguras, escalables y disponibles para cualquier dispositivo. Nació en el 2004 como HTML DB 1.5 y ha evolucionado para ahora conocerse formalmente como Oracle Application Express y dentro de la comunidad como Oracle APEX.

En la versión 5.1 se incluyeron las Cuadrículas Interactivas, las cuales fueron la evolución de las formas tabulares adicionando muchas de las acciones incluidas en los Reportes Interactivos. Estas Cuadrículas permiten listar las columnas de una tabla o consulta SQL, así como también crear, actualizar o borrar registros de una tabla. Adicionalmente, es posible crear relaciones Maestro – Detalle en los niveles que sean necesarios.



Es común que en estas cuadrículas interactivas se requiera que los usuarios puedan cambiar el estado de uno o más registros. Una opción puede ser señalar varios registros y dar clic en el botón correspondiente. Otra opción es que los usuarios puedan ejercer una acción sobre un registro, con solo dar clic en el ícono del registro correspondiente.

En este primer artículo les mostraré como se puede diseñar una cuadrícula interactiva para cambiar el estado de los empleados dinámicamente con el uso Acciones Dinámicas e íconos Font Awesome.
La versión utilizada en esta práctica es la versión 18.1.0.00.45.



Cuadrícula Interactiva

Lo primero que necesitamos es crear la región de tipo cuadrícula interactiva, con una consulta básica a la tabla de empleados.





Elementos

Seguidamente crear dos elementos, uno para contener el número del empleado si el usuario requiere activarlo. Otro para contener el número del empleado si el usuario requiere inactivarlo.


Ahora, vamos a modificar la consulta SQL de la cuadrícula. Donde integraremos los iconos Font Awesome fa-thumbs-up y fa-thumbs-down para que el usuario pueda cambiar el estado del empleado dando clic sobre los íconos, teniendo en cuenta los siguientes escenarios:

  • Si el empleado se encuentra Activo, solo se mostrará el ícono para que pueda inactivarlo.
  • Si el empleado se encuentra Inactivo, solo se mostrará el ícono para que pueda activarlo.
  • En caso de que no se haya establecido el estado, se mostrarán los dos íconos para que el usuario pueda ejecutar la acción que requiera.




Consulta SQL

En la consulta se añaden los escenarios anteriormente descritos en una nueva columna llamada STATE_FA. Cuando el usuario haga clic sobre uno de los íconos, la función de JavaScript asignará el número del empleado al elemento correspondiente (P4_ACTIVAR / P4_INACTIVAR).

En la columna STATE aplicamos la función DECODE para mostrar la descripción del estado del empleado.

select EMPNO,

       ENAME,

       JOB,

       MGR,

       HIREDATE,

       SAL,

       COMM,

       DEPTNO,

       ROWID,

       DECODE(STATE,'I','Inactivo','A','Activo','Sin Estado') STATE,

        (CASE 

         STATE

             WHEN 'I' then '<a href=javascript:$s(''P4_ACTIVAR'','||EMPNO||');>
<i class="fa fa-thumbs-up"></i></a> '
             WHEN 'A' then '<a href=javascript:$s(''P4_INACTIVAR'','||EMPNO||');>
<i class="fa fa-thumbs-down"></i></a> '
        ELSE '<a href=javascript:$s(''P4_ACTIVAR'','||EMPNO||');>
<i class="fa fa-thumbs-up"></i></a>        ' ||
             '<a href=javascript:$s(''P4_INACTIVAR'','||EMPNO||');>
<i class="fa fa-thumbs-down"></i></a>' 

         END) STATE_FA

  from EMP






Tipo de la columna

Modificar el tipo de la columna a Expresión HTML, para que interprete el código HTML y JavaScript ingresado en la consulta SQL.

     



Acción Dinámica

Ahora necesitamos crear dos acciones dinámicas para la activación e inactivación de los empleados.


Activación: Sobre el elemento P4_ACTIVAR, crear la acción dinámica cuando cambie el valor del elemento con la condición de que el elemento no sea nulo.

     


Adicionar dos acciones:

1. Actualizar la columna de estado del empleado




2. Refrescar la cuadrícula interactiva





Inactivación: Sobre el elemento P4_INACTIVAR, crear la acción dinámica cuando cambie el valor del elemento con la condición de que el elemento no sea nulo.

     


Adicionar dos acciones:

1. Actualizar la columna de estado del empleado




2. Refrescar la cuadrícula interactiva




Finalmente tendremos la Cuadrícula Interactiva con los íconos para cada registro. Si la columna STATE no tiene valor se mostrarán los dos íconos, si ya tiene valor solo se mostrará uno de los íconos.




Adicionalmente, podemos aplicar División de Control sobre la Cuadrícula, para que agrupe los registros de acuerdo con el estado de los Empleados.





La interacción a través de los íconos Font Awesome que hemos añadido a la Cuadrícula permite al usuario final:

  • Identificar rapidamente el estado en que se encuentra un empleado.
  • Asignar el estado de los empleados.
  • Activar ó inactivar un empleado.
  • Mantener la información de la Cuadrícula siempre actualizada después de haber activado ó inactivado los empleados.
  • Cambiar el estado de un empleado con un solo clic, sin requerir ejecutar otra acción como por ejemplo dar clic en el botón Guardar.

En el próximo artículo les mostraré como ejecutar una acción sobre varios registros en una Cuadrícula Interactiva, como por ejemplo aprobar ó rechazar los registros marcados. Para esto personalizaremos la función JavaScript y utilizaremos Acciones Dinámicas para ejecutar código PL/SQL.




Mónica tiene 10 años de experiencia en el desarrollo de software. Actualmente trabaja como consultora de tecnología independiente y desarrolladora de aplicaciones web en Oracle APEX. Fundó el meetup de Oracle APEX Colombia en 2015 para dar a conocer esta gran herramienta en su país y de esa manera impulsar las empresas. Ha sido ponente en conferencias como: OTN y ODT Colombia y es miembro activo de Oracle Developer Community, y blogger en https://community.oracle.com/blogs/monicagodoy/

Este artículo ha sido revisado por el equipo de productos Oracle y se encuentra en cumplimiento de las normas y prácticas para el uso de los productos Oracle.