Una de las características más notables en las aplicaciones APEX, es el uso de los reportes interactivos, ya que le permiten al usuario final realizar diferentes tareas con el mismo, tales como filtrar, agrupar, generar gráficos, resumenes, agregar nuevas columnas calculadas, calcular diferentes tipos de datos sobre las columnas numéricas y guardar sus propias versiones del reporte.
En ocasiones requerimos poder realizar algún tipo de procedimiento sobre todos o algunos de los registros listados en estos reportes, por lo que se hace necesario tener una manera de poder seleccionar dichos registros para realizar estos procedimientos.
En este artículo les voy a explicar como podemos lograr esto, para lo cual utilizaremos casillas de control (checkbox), para que el usuario pueda seleccionar los registros que necesite y pueda ejecutar con ellos un procedimiento específico.
Agregar un checkbox al reporte interactivo
El primer paso que debemos dar, es el agregar las casillas de control, para esto vamos a crear una nueva página en nuestra aplicación de tipo Informe Interactivo.
Lo primero que haremos es definir la nueva página, indicando un número, nombre y modo de página, tal como se muestra en la imagen de arriba.
Luego procedemos a definir el origen de datos, paso que puedes ver en la siguiente imagen.
La conuslta SQL que vamos a utilizar para crear el reporte es el siguiente:
|
1 2 3 4 5 6 7 8 9 10 |
select apex_item.checkbox2(1,empno) as Seleccionar, empno, ename, mgr, job, hiredate, sal, comm, deptno from emp |
Como puedes ver en el SQL proporcionado arriba, en la primera línea hemos agregado luego del select:
apex_item.checkbox2(1,empno) as Seleccionar
esta línea es la que agrega a nuestro reporte una columna con una casilla de control para cada línea en el reporte.
Para lograr esto estamos usando el API de APEX, APEX_ITEM. Esta API define cada uno de los elementos de campo que podemos crear en una aplicación APEX. en este caso en específico estamos utilizando CHECKBOX2, que es el elemento correspondiente a una casilla de control, al que estamos agregando dos parámetros:
- en primer lugar, un número 1. Cuando creamos este tipo de elementos personalizados, estos se almacenan para poder recuperarlos en las matrices APEX_APPLICATION.G_F01 a APEX_APPLICATION.G_F50. En este caso, le estamos diciendo a APEX que vamos a usar la matriz APEX_APPLICATION.G_F01 para almacenar el valor de la columna Seleccionar que estamos creando,
- en segundo lugar, el parámetro “empno” le indica a APEX que almacene en la matriz APEX_APPLICATION.G_F01 el valor correspondiente a la columna “empno” de cada fila en el reporte.
Finalmente, hacemos clic en el boton “Crear Página” para tener nuestro reporte interactivo con casillas de control.
Al ejecutar la nueva página creada vamos a obtener un reporte similar al que se muestra a continuación.
Como puede observar en la imagen anterior, no tenemos una casilla de control en nuestro informe, tenemos una columna que muestra texto y no la casilla de control. Todavía es necesario relizar un paso más para que se muestre la casilla de control.
Sin embargo, hay dos cosas importantes que quiero tratar antes de este último paso.
En la columna mencionada, he resaltado dos secciones dentro de rectángulos de color diferente, esto para ejemplificar un poco más lo que ya mencioné arriba sobre las matrices utilizadas por APEX.
En primer lugar, en el rectángulo rojo, puede ver que aparece name=”F01″, este F01 indica además del nombre del campo, el número de matriz en que estamos almacenando los datos de la casilla de control, en este caso APEX_APPLICATION.G_F01.
En segundo lugar, en el rectángulo azul, se muestra value=”99999″, donde 99999 corresponde al valor de la casilla de control, que en este caso corresponde al identificador del empleado y es el valor que podemos utilizar para realizar cualquier proceso que deseemos. A este valor le podemos asignar el valor de columna que deseemos, en este caso usamos el identificador del empleado, pero podríamos haber asignado cualquier otro valor. Algo importante, es que este valor debería ser un valor único y significativo, dependiendo de la tarea que queramos realizar.
Finalmente, vamos a ir hasta la definición de nuestro reporte y vamos a localizar la columna seleccionar del mismo.
Una vez seleccionada, en las propiedades de la columna, vamos a buscar la sección “Permitir a los usuario” y vamos a deshabilitar todas las posibilidades, tal como se muestra en la imagen anterior.
Luego de esto, vamos a localizar la sección “Seguridad” y vamo a deshabilitar la opción “Caracteres especiales de escape”, esto permitirá que se muestre la casilla de control, en lugar del texto que hasta ahora se está mostrando.
Lo únicoc que nos resta es aplicar los cambios realiazados.
El resultado final al volver a ejecutar nuestro reporte, se muestra a continuación.
En este momento ya tenemos nuestro reporte interactivo con una columna de casillas de control para cada línea en el mismo.
Por si sola, en este momento dicha casilla no hace otra cosa que poder marcarla o desmarcarla como seleccionada, pero nada más allá de eso y de nada nos sirve si no podemos agregar funcionalidad a la misma, cosa que vamos a agregar a partir de ahora.
Seleccionar / Deseleccionar todas
Lo primero que vamos a agregar como una funcionalidad para las casillas de control, es el poder seleccionarlas o deseleccionarlas todas a la vez. Aquí es impotante hacer notar que esta funcionalidad se aplica sobre todos los registros que aparecen en la página al momento de ejecutar la función, si existen registros en páginas previas o posteriores, no se apicla a estos registros.
El primer paso, es agregar una casilla de control como encabezado para la columna seleccionar:
- Abra la página del reporte creado anteriormente.
- En la vista de árbol del diseñador de páginas, expanda las columnas del reporte.
- Haga clic en el columna seleccionar.
- En las propiedades de la columna, ubique la sección Cabecera.
- En la propiedad cabecera escriba lo siguiente:
<input type=”checkbox” id=”selectunselectall”>
- En la propiedad Alineación, seleccione “Centrado”.
- Ubique la sección Diseño.
- En la propiedad Alineación de columna, seleccione “Centrado”.
Ahora su reporte debería lucir como la imagen siguiente.
En este momento el reporte luce en su versión final, sin embargo, aún nos queda por hacer.
Si en este momento hace clic en la casilla que agregamos como encabezado de la columna, no va a suceder nada, para que algo suceda, debemos agregar una acción dinámica que se dispare cuando se selecciona o deselecciona esta casilla.
- Has clic en la pestaña de acciones dinámicas del diseñador de páginas.
- Ahora has clic con el botón derecho del ratón y selecciona Crear Acción Dinámica.
- En las propiedades de la nueva acción dinámica, agrega un nombre a la acción dinámica que estás creando.
- Ubica la sección Cuándo y en Tipo de Selección, selecciona Selector de jQuery. Si has observado bien, en el primer paso, cuando agregamos la casilla al encabezado, definimos un id para esta casilla, con el nombre “selectunselectall”.
- En la propiedad Selector de jQuery ingresa: #selectunselectall (El id de la casilla de control es utilizado como selector de jQuery para poder arrancar la ación dinámica).
- Agrega un acción verdadera y selecciona la Acción “Ejecutar Código Javascript”.
- En Código Javascript agrega el siguiente código
|
1 2 3 4 5 6 7 |
if ($('#selectunselectall').is(':checked')) { console.log('checked'); $('input[name="f01"]:not(:disabled)').prop('checked', true); } else { console.log('unchecked'); $('input[name="f01"]:not(:disabled)').prop('checked', false); } |
Todo lo que nos queda por hacer es guardar los cambios y al recargar y ejecutar nuevamente la página del reporte, ahora si haces clic en la casilla del encabezado del reporte, todas las líneas en pantalla se seleccionarán si no están seleccionadas y si ya están seleccionadas entonces se deseleccionarán.
Solo nos resta una cosa más y es procesar las líneas seleccionadas en el reporte.
Procesar selección
Hasta el momento, en nuestro reporte podemos seleccionar o deseleccionar filas de manera individual, o bien, seleccionar o deseleccionar todas las filas en pantalla.
Nos queda agregar un procedimiento que tome todas las líneas seleccionadas y ejecute algún procedimiento con ellas.
En este caso, vamos a crear un procedimiento que aumente en un 10 por ciento el salario de los empleados seleccionados.
- En primer lugar, vamos a agregar un botón llamado PROCESAR que ejecute la página.
- Ahora vamos a hacer clic en la pestaña Procesamiento, la del icono
- En la sección Procesamiento, hacemos clic con el botón derecho del ratón y seleccionamos Crear Proceso.
- Le vamos asignar al proceso el nombre AumentarSalario.
- En Código PL/SQL, vamos a agregar el siguiente código:
|
1 2 3 4 5 6 7 8 |
Begin FOR i IN 1..apex_application.g_f01.count LOOP update emp set sal = sal * 1.1 where empno = apex_application.g_f01(i); END LOOP; commit; End; |
Importante resaltar aquí la línea del where de la sentencia de actualización, donde se hace referencia a la matriz apex_application.g_f01(), el sufijo i indica el registro a procesar, por cada línea seleccionada, en esta matriz vamos a tener el número de empleado en la tabla emp.
Para completar el procedimiento, vamos a hacer lo siguiente:
- En las propiedades del proceso, vamos a ubicar la sección Mensaje Correcto y vamos a agregar el siguiente mensaje: “Salarios Actualizados!“
- Luego vamos a ubicar la sección Condición de Servidor.
- En la propiedad Si se hace clic en el botón, vamos a seleccionar el nombre del botón que creamos anteriormente.
- Aplicamos los cambios.
Y eso es todo, solo te queda recargar la página y ejecutarla para verificar que todo funciona de acuerdo con lo esperado.
Más información
Si deseas conocer más sobre los temas tratados aquí, te dejo los siguientes enlaces:
- API APEX_ITEM (APEX 24.1)
- API APEX_APPLICATION (APEX 24.1)
- Acciones Dinámicas (APEX 24.1)
