Para todas aquellas personas que no conocen Oracle Apex puedo decirles que en este artículo podrán encontrar una de las funcionalidades que más se utiliza en los desarrollos en Apex que son el uso de los Informes Interactivos.

Si estamos trabajando con una base de datos Oracle, de nada nos sirve tener una base de datos llena de información si no tenemos las herramientas adecuadas para mostrar esa información y que dicha información sea visualmente fácil de interpretar por nuestros usuarios.

Es por ello que Oracle Apex con sus Informes Interactivos nos brindan una solución muy rápida y eficiente a la hora de presentar los datos de nuestra base de datos a nuestros usuarios.

Después de ir viendo el pasaje de las diferentes versiones de Apex, esta funcionalidad ha mejorado muchísimo en ésta última versión, entre todas las capacidades de personalización del Informe, podemos además crear múltiples Informes Interactivos en una misma página, algo que muchos desarrolladores anhelaban disponer, además de muchas otras mejoras.

Lo que más me gusta de los Informes Interactivos es que no tengo que pensar en el diseño del mismo, eso es una gran ventaja a la hora de optimizar el trabajo y desarrollar aplicaciones potentes y modernas en un lapso de tiempo corto.

En esta guía te quiero mostrar cómo rápidamente podemos crear y personalizar Informes Interactivos, y cómo crear múltiples Informes Interactivos en una misma página en Apex.

Formas de tener un Espacio de Trabajo

Dentro de nuestro Espacio de Trabajo, creamos una nueva aplicación Demo.

Nota: Si no cuentas con un Espacio de Trabajo:

  • Puedes: registrarte gratis en la página de Oracle APEX desde este enlace y solicita allí un Espacio de Trabajo, o
  • Puedes instalar y configurar Oracle Developer Day en una VirtualBox y acceder a Oracle Apex 4.2, desde este enlace
  • Si tienes Apex 4.2 instalado en tu PC, puedes actualizar Oracle APEX a la versión 5.0 desde este enlace
  • Si ya tienes Oracle Apex 5.0, y quieres crear un nuevo Espacio de Trabajo, puedes hacerlo desde este enlace

Ingresar a nuestro Espacio de Trabajo

Para ingresar a Apex simplemente abrimos nuestro navegador e ingresamos la siguiente URL: http://localhost:8080/apex (Nota: localhost hace referencia al Servidor y 8080 es el puerto donde se instaló Apex)

Se abre la página de Inicio de Sesión e ingresamos las credenciales correspondientes: Espacio de Trabajo, Usuario y Contraseña.

Crear Aplicación Demo Informes Interactivos

Para Crear una aplicación de Base de Datos en Apex hacemos clic en el icono Creador de Aplicaciones.

Se abre la página del Creador de Aplicaciones y hacemos clic en el icono Crear

Se inicia el asistente de creación de la aplicación:

En la pantalla ¿Qué tipo de Aplicación desea Crear? hacemos clic en el icono Escritorio y hacemos clic en el botón azul Siguiente.

En la pantalla Nombre, ingresamos el nombre de la aplicación, para el resto de los valores lo dejamos por defecto.

Nombre: Demo Informes Interactivos

Hacemos clic en el botón azul Siguiente.

En la pantalla Páginas, eliminamos la página de Inicio haciendo clic en el botón de la cruz (+) y creamos una página de tipo Informe:

Origen de la Tabla: Tabla

Nombre de la Tabla: DEMO_PRODUCT_INFO

Tipo de Informe: Interactiva

Hacemos clic en el botón azul Agregar Página

Luego, hacemos clic en el botón azul Siguiente

En la pantalla Componentes Compartidos, aceptamos el valor por defecto y hacemos clic en el botón azul Siguiente.

En la pantalla Atributos, asignamos:

Idioma de preferencia: Español (Estados Unidos) (es-us) [Indicar el idioma que corresponda]

Preferencia de Idioma de Usuario Derivada de: Idioma Primario de la Aplicación

Hacemos clic en el botón azul Siguiente.

En la pantalla Confirmar, verificamos los datos ingresados y hacemos clic en el botón azul Crear Aplicación.

Ejecutamos la aplicación y la página de inicio mostrará nuestro Informe Interactivo recién creado.

Tipos de Informes Interactivos según tipo de usuario

En Oracle Apex tenemos la posibilidad de crear diferentes tipos de Informes dependiendo el rol que tengamos en un momento dado, si trabajamos con Apex como un usuario desarrollador o trabajamos como un usuario final.

Informe Primario (este informe es configurado por defecto) (Sólo para usuarios desarrolladores). El informe primario es el que se muestra inicialmente. Los informes primarios por defecto no se pueden renombrar o eliminar.

Informes Alternativos (Sólo para usuarios desarrolladores). Permite a los desarrolladores crear varios diseños de informes. Solamente los desarrolladores pueden guardarlos, renombrarlos o borrar un Informe Alternativo. 

Informe Público (Usuario finales y desarrolladores). Este informe puede ser visto por todos los usuarios. Sin embargo, sólo el usuario que crea un informe público puede guardarlo, renombrarlo o borrarlo. Aunque todos los usuarios pueden ver un informe público, ellos solamente pueden guardarlo con un nuevo nombre de Informe.

Informe Privado (Usuario finales y desarrolladores). Sólo el usuario que crea el informe privado puede verlo, guardarlo, renombrarlo o eliminarlo.

Personalizar Informe Interactivo

Como podemos ver, el Informe Interactivo necesita de varias personalizaciones para que se ajuste a un reporte entendible por parte de nuestros usuarios.

Como usuarios desarrolladores podemos crear una gran variedad de informes que representen requerimientos por parte de nuestros usuarios. Veremos varios ejemplos de personalización.

Ejemplo 1

Nos solicitan que mostremos los productos disponibles de las diferentes categorías con su respectiva imagen de producto.

Para mostrar u ocultar columnas en el Informe Interactivo usamos el botón Acciones estando en modo de ejecución de la página 1 y seleccionamos la opción Seleccionar Columnas.

Mostrar las siguientes columnas:

Product Id, Product Name, Product Description, List Price, Produc Image

Ocultar las siguientes columnas:

Category, Filename, Image Last Update, Mimetype, Product Avail y Tags

Movemos hacia arriba la columna Product Image para que sea la primera columna que se visualiza y aplicamos los cambios haciendo clic en el botón azul Aplicar.

Editar Nombres de Columnas del Informe

Hacemos clic en Editar Página 1 en la barra del desarrollador que se encuentra en la parte inferior de la pantalla.

Desde el Panel de la izquierda, estando en la vista árbol de Presentación, hacemos clic sobre el Informe Interactivo DEMO_PRODUCT_INFO y posamos nuestra mirada en el panel de la derecha en propiedades de la región y cambiamos el Titulo del Informe Interactivo por “Informe de Productos”.

Expandimos las columnas desde el panel de la izquierda y modificamos los nombres de las columnas visibles, colocando su nombre en el atributo Cabecera en la sección de Cabecera del panel de la derecha en propiedades de la columna: Código, Nombre, Descripción, Precio e Imagen y guardamos los cambios haciendo clic en el botón Guardar en la parte superior derecha de la página.

Asignar formato moneda para la columna Precio

Seleccionamos la columna LIST_PRICE y en el panel derecho de propiedades de la columna  en la sección Apariencia, seleccionamos en Máscara de Formato: $5.234,10 (FML999G999G999G999G990D00)

Mostrar Imagen en el Informe Interactivo

Hacemos clic en Editar Página 1 en la barra del desarrollador que se encuentra en la parte inferior de la pantalla.

Desde el Panel de la izquierda, estando en la vista árbol de Presentación, hacemos clic sobre la columna PRODUCT_IMAGE y pasamos nuestra mirada al panel de la derecha en propiedades de la columna en la sección Identificación, en el atributo Tipo seleccionamos Mostrar Imagen, luego hacemos clic en el botón Guardar.

Guardar Informe como Informe Principal

Si a esta instancia cerramos nuestra aplicación y salimos del navegador perderemos todos los cambios que hemos realizado en el Informe Interactivo, por ello es momento de guardar el Informe como el Informe Principal.

Desde la ejecución de la página de Inicio hacemos clic en el botón Acciones y seleccionamos la opción Guardar Informe.

Seleccionamos: Guardar: Como Valores de Informe por Defecto

Tipo de Informe por Defecto: Primario

Hacemos clic en el botón Aplicar

Crear Informe Alternativo

Ejemplo 2

En este caso vamos a crear un Informe Alternativo que nos muestre todos los productos (disponibles y no disponibles) agrupados por categorías de productos y que los productos que no están disponibles se muestren en el informe como una fila con un color naranja.

Para realizar esta personalización, vamos al botón Acciones y seleccionamos la opción Seleccionar Columnas y pasamos la columna Category al cuadro de Mostrar columnas.

Nuevamente hacemos clic en el botón Acciones y seleccionamos la opción Formato y dentro de ella seleccionamos División de Control. Se abre una ventana de diálogo y en ella ingresamos:

Columna: Category

Estado: Activado

Hacemos clic en el botón Aplicar para cerrar la ventana de Diálogo.

De esta forma mostramos en el Informe Interactivo los productos agrupados por categoría de productos.

 

Resaltar Filas

Para resaltar filas dependiendo de una condición dada, como por ejemplo mostrar todas las filas de productos no disponibles con un color rosado, hacemos clic en el botón Acciones y seleccionamos la opción Formato y dentro de ella seleccionamos Resaltar y realizamos las siguientes configuraciones:

Nombre: Productos No Disponibles

Tipo de Resaltado: Fila

Color de Fondo: #FF7755

Color de Texto: #000000

Condición:

Columna: Product Avail

Operador: =

Expresión: N

De este modo muy simple podemos ver que las filas resaltadas en color naranja son aquellas que corresponden a los productos no disponibles.

Guardar Informe Alternativo

Para guardar los cambios realizados al informe sin perder el informe principal, hacemos clic en el botón Acciones y seleccionamos Guardar Informe.

Seleccionamos:

Guardar: Como Valores de Informe por Defecto

Tipo de Informe por Defecto: Alternativo

Nombre: Productos por Categoría

Hacemos clic en el botón Aplicar

 Podemos ver que se ha creado una lista de selección en el lado izquierdo del botón acciones que nos permite seleccionar el Informe que queremos visualizar.

Nota: Al pasar al informe principal veremos los cambios realizados para crear el informe alternativo, si salimos de nuestra sesión y volvemos a iniciar sesión podremos ver que el Informe Principal es el que habíamos guardado primero y luego si seleccionamos el Informe Alternativo vemos el Informe de Categoría de Productos.

Añadiendo Columnas Calculadas

Ejemplo 3

Es posible crear columnas calculadas para agregar a nuestro Informe Interactivo. Por ejemplo podemos querer tener una columna que se muestre el precio con impuestos incluidos y que aquellos productos que su precio sea mayor a $100 se muestren en color verde.

Para ello, hacemos clic en el botón Acciones y seleccionamos Formato y luego seleccionamos Calcular. Se abre la ventana de diálogo e ingresamos los siguientes datos:

Cabecera de Columna: Precio con Impuesto

Expresión de Cálculo: F * 1.07 (el F representa la columna Precio y el impuesto es del 7% adicional), hacemos clic en el botón Aplicar

De esta forma se agrega una columna calculada a nuestro Informe Interactivo.

Para resaltar las los productos cuyo precio son mayores a $100, hacemos clic en el botón Acciones y luego en Formato y seleccionamos Resaltar.

Realizamos las siguientes configuraciones:

Nombre: Productos Productos con Precio > $100

Tipo de Resaltado: Fila

Color de Fondo: #99FF99

Color de Texto: #000000

Condición:

Columna: Precio

Operador: >

Expresión: 100

Hacemos clic en el botón Aplicar

Guardamos el Informe como un Informe Alternativo llamado: Productos Con Impuestos Incluidos

Múltiples Informes Interactivos en una Página

Actualmente en la página de inicio disponemos de un solo Informe Interactivo.  A partir de la versión 5.0 podemos tener varios Informes Interactivos en una misma página de Apex.

Vamos a crear otro informe Interactivo que se acomode en el lado derecho del Informe Actual.

Desde el Diseñador de Páginas de la Página de Inicio, estando ubicados en el panel izquierdo en la ficha Presentación, hacemos clic con el botón derecho del ratón en Regiones y seleccionamos Crear Región.

Seleccionamos la Región y pasamos nuestra mirada al panel derecho de propiedades de la región y le indicamos que sea una Región de Tipo: Informe Interactivo y le cambiamos el nombre por: Informe de Clientes.

Ingresamos la siguiente Consulta SQL:

SELECT * FROM demo_customers;

En la sección Cuadrícula:

Iniciar Nueva Fila: No

Columna: 7

Ampliación de Columna: Automático

De este modo podemos visualizar que el primer Informe de Productos se inicia en la columna 1 hasta la 6 y el Informe de Clientes se inicia en la columna 7 para terminar en la columna 12. Como el Informe de Clientes es mucho más amplio horizontalmente, se puede ver que se activa la barra de desplazamiento horizontal para poder navegar por todo el Informe Interactivo.

Conclusiones

Podemos seguir trabajando en innumerables personalizaciones de los Informes Interactivos y guardarlos como diferentes Informes ya sean Alternativos, Privados o Públicos y eso va a depender de las necesidades de nuestros usuarios o clientes.

No he abarcado todas las posibilidades de personalización de los Informes Interactivos, pero como podemos observar Oracle Apex nos provee de esta potente característica para mostrar todos los datos de nuestra base de datos en forma rápida, clara y altamente personalizable al gusto del usuario.

Hemos aprendido en este artículo:

  • Como crear y guardar Informes Interactivos
  • Cómo crear y guardar Informes Alternativos
  • Personalizar los Informes Interactivos usando columnas resaltadas, columnas calculadas, filtros, formatos, etc.
  • Cómo crear múltiples Informes Interactivos en una misma página en Apex.