Todo sobre reportes interactivos – Parte 4

En esta cuarta parte de esta serie de artículos sobre los reportes interactivos APEX, me voy a centrar en dos características de diseño que en muchas ocasiones no son conocidas o que no se utilizan tanto como podrían utilizarse:

1. La vista de icono
2. La vista de detalle

Hasta el momento he tratado temas generales en las tres entregas anteriores que pueden leer en:

• Todo sobre reportes interactivos – Parte 1.
• Todo sobre reportes interactivos – Parte 2.
• Todo sobre reportes interactivos – Parte 3.

En la primera parte se trató de definir el concepto de reporte interactivo, así como un detalle de los tipos de columnas que se pueden utilizar. En la segunda parte se dio una vista general del proceso de modificación de atributos de la región de un reporte interactivo y se inicio con el proceso de modificación de atributos del reporte interactivo, para continuar en la tercera parte con los procedimientos para realizar la modificación de la barra de búsqueda y menú del acciones de un reporte interactivo.

Empecemos con los temas de esta entrega.

Habilitando la vista de icono de un reporte interactivo

Tal y como hemos visto hasta el momento, los reportes interactivos se muestran como un reporte. Sin embargo, los reportes interactivos nos permiten habilitar el desplegado de la información como iconos, esto de manera opcional.

Una vista de icono de un reporte interactivo, muestra una serie de iconos con algún otro datos que acompaña a cada icono mostrado.

Cuando se habilita esta vista del reporte interactivo, se muestra un nuevo botón de Vista de Icono, tal y como podemos ver en la siguiente imagen.

Existen algunas especificaciones que nuestra consulta SQL en que se basa el reporte interactivo deben cumplir para poder mostrar la vista de icono.

• La consulta debe incluir las columnas necesarias para identificar el icono, la etiqueta y el destino (enlace a otra página).
• Por lo general, estas columnas las tratamos como columnas ocultas dentro del reporte normal, porque por lo general no son de utilidad para el usuario en en formato normal.
• Los iconos utilizados deben poder ser alcanzados por el motor de APEX para poder incluirlos en el reporte, ya sea que los carguemos como archivos estáticos de la aplicación o que los podamos referenciar desde un servidor web.

Existen dos maneras en que podemos definir la vista de iconos, la manera estándar y la personalizada, en la cual podemos agregar más información que la que podemos mostrar de manera estándar, las cuales vio a detallar a continuación.

Pero antes de hacerlo, vamos a crear un nuevo reporte interactivo, para el cual vamos a utilizar la conocida table EMP y la siguiente consulta SQL sobre la misma:

El CASE dentro de la consulta define el icono que vamos a utilizar en el reporte de vista de icono, que en este caso está definido por un icono de los iconos predefinidos de APEX y el cual va a depender del puesto de la persona.

Ahora todo lo que nos queda es hacer los cambios pertinentes en los encabezados de las columnas y cambiar el tipo de las columnas ICONO, LABEL y URL a Oculto.

Luego de todo esto, deberíamos tener un reporte interactivo similar al que se muestra a continuación.

¿Cómo agregar una vista de icono estándar?

El procedimiento para una vista de icono a un reporte interactivo es el siguiente:

1. Abrir en el diseñador de páginas, la página que contiene el reporte interactivo.
2. En el panel de la izquierda haga clic sobre el nombre de la región del reporte interactivo (como se observa en el recuadro rojo de la imagen de abajo).
3. En el panel del editor de propiedades, a la derecha de la página, haga clic en la pestaña Atributos, mostrada con un recuadro en la imagen de más abajo).
4. Localice el grupo de atributos Vista de Icono, en el recuadro rojo de la imagen a continuación:
5. Habilite la vista de icono, encendiendo el atributo Mostrar.
6. Indique si desea utilizar el formato Personalizado, apagando o encendiendo este atributo (la opción personalizada la vamos a ver más adelante de manera detallada). Por ahora vamos a mantener apagado este atributo.
7. Seleccione el número de Columnas por Fila a mostrar. Puede ser de 1 a 9 e indica cuantos iconos se van a mostrar en cada fila.
8. En Columna de Enlace, seleccione el nombre de la columna del reporte que contiene el enlace a otra página.
9. Para Columna de Origen de Imagen, seleccione la columna del reporte que apunta a la imagen que se utilizará como icono.
10. En el atributo Columna de Etiquetas, seleccione la columna que vamos a utilizar como etiqueta del icono y que nos va a mostrar información específica relacionada con este.
11. Haga clic en el botón Guardar.

Como etiqueta podemos utilizar cualquiera de las columnas definidas en el reporte, por ejemplo el nombre del empleado o el puesto que ocupa, lo que en muchos casos será información suficiente, dependiendo de lo que queramos mostrar. Sin embargo, abra casos es que mostrar el valor de una columna no será suficiente. En el ejemplo que inicié arriba, estoy definiendo como etiqueta el encadenamiento de las columnas ENAME y JOB, además de agregar un salto de línea entre ambos valores.

Al tener en cuenta que para el salto de línea estoy utilizando una etiqueta HTML: “<br>” para evitar que esta se muestre tal cual, debemos recordar que tenemos que apagar el atributo Caracteres especiales de escape de la columna LABEL. Si aún no sabes como hacer esto, lo voy a explicar en la siguiente entrega de esta serie.

Ahora nuestro reporte lucirá similar a la imagen a continuación, donde la flecha roja apunta al botón que nos muestra la Vista de Icono. El botón a su derecha nos retorna a la vista normal del reporte.

¿Cómo agregar una vista de icono personalizada?

El proceso para agregar una vista de icono personalizada a un reporte interactivo es muy similar al que se describió anteriormente. Sin embargo, existe una consideración importante sobre este tipo de vista personalizada:

Este tipo de vista nos da más flexibilidad a la hora de definir el contenido de la vista de icono, incluyendo la habilidad de utilizar mpás de una columna para definir el contenido.

El procedimiento para una vista de icono a un reporte interactivo es el siguiente:

1. Abrir en el diseñador de páginas, la página que contiene el reporte interactivo.
2. En el panel de la izquierda haga clic sobre el nombre de la región del reporte interactivo (como se observa en el recuadro rojo de la imagen de abajo).
3. En el panel del editor de propiedades, a la derecha de la página, haga clic en la pestaña Atributos, mostrada con un recuadro en la imagen de más abajo).
4. Localice el grupo de atributos Vista de Icono, en el recuadro rojo de la imagen a continuación:
5. Habilite la vista de icono, encendiendo el atributo Mostrar.
6. Indique que desea utilizar el formato Personalizado, encendiendo este atributo, el grupo de atributos va a cambiar y se mostrará como la siguiente imagen.
7. Seleccione el número de Columnas por Fila a mostrar. Puede ser de 1 a 9 e indica cuantos iconos se van a mostrar en cada fila.
8. En Enlace Personalizado, ingrese la columna de enlace para la vista de icono. Aquí podemos utilizar cadenas de substitución para hacer referencia a las colunas del reporte. Al definir el enlace, también estamos definiendo tanto la etiqueta como el icono a mostrar por cada registro. Un ejemplo general del enlace sería: <a href="#EMP_LINK#"><img
src="#EMP_IMG#" title="#ENAME#"
alt=""><br>#ENAME#</a>
9. Para Columna de Origen de Imagen, seleccione la columna del reporte que apunta a la imagen que se utilizará como icono.
10. Haga clic en el botón Guardar.

Como contamos con libertad de agregar más información a la hora de definir el enlace de a vista de reporte y por ende también la información del icono y la etiqueta de este, podemos agregar fácilmente etiquetas, mayor número de columnas y cualquier etiqueta HTML, incluso pudiendo hacer referencia a estilos de página.

En nuestro caso. vamos a modificar la vista del reporte y en el campo Enlace personalizado vamos a agregar lo siguiente

Las líneas 3 al 6 definen la información de la etiqueta, mientras que en la línea 2 en el atributo “title” estamos utilizando el nombre del empleado, lo que provocará que cuando posicionemos el indicador del ratón sobre un icono, se muestre el nombre del empleado.

El resultado de estos cambios lucirá ahora así:

Habilitando la vista de detalle de un reporte interactivo

Al igual que pasa con la vista de icono, de manera opcional, podemos habilitar una vista de detalle de un reporte interactivo.

Una vista de detalle, nos permite referenciar cada una de las columnas del reporte y presentar cada registro en una manera diferente al formato general del reporte, generalmente dentro de una tabla HTML, a la que le podemos aplicar atributos CSS para darle formato y que los dtos luzcan de una manera más llamativa.

Cuando la vista de detalle es habilitada, en la barra de búsqueda se agrega un botón para acceder a dicha vista, además de un botón para retornar a la vista normal y, si la vista de icono ha sido definida un tercer botón, tal y como podemos observar en la imagen a continuación.

¿Cómo habilitar la vista de detalle?

Para definir la vista de detalle de un reporte interactivo contamos con tres posibles atributos que nos permiten definir un encabezado, el cuerpo y el pie del reporte.

El procedimiento para habilitar y definir la vista de detalle es el siguiente:

1. Abra en el diseñador de páginas la página que contiene el reporte interactivo.
2. En el panel de Presentación, a la izquierda de la pantalla, haga clic sobre el nombre de la región correspondiente al reporte interactivo, tal y como se remarca en rojo en la imagen de abajo.
3. En el panel del Editor de Propiedades, a la derecha de la pantalla, haga clic en la pestaña Atributos, tal y como se muestra en la imagen de más abajo.
4. Localice el grupo de propiedades Vista de Destalles, mostrados en el recuadro rojo grande en la siguiente imagen.
5. Encienda el atributo Mostrar, con lo cual se mostrarán los otros atributos que debemos definir, justo como puede ver en la imagen anterior.
6. En Antes de Filas, vamos a ingresar las etiquetas HTML necesarias para definir el encabezamiento que se mostrará antes de las filas del reporte. Aquí podemos agregar por ejemplo código CSS para definir la pariencia del reporte (tipo de letra, tamaño, color, etcétera).
7. En Para Cada Fila, introduciremos el contenido de cada línea del reporte, incluyendo etiquetas y datos, los cuales vamos a referenciar utilizando la notación #NOMBRE_COLUMNA#, en donde esta última la vaos a sustituir por el nombre de cualquiera de las columnas definidas en el reporte.
8. Finalmente, en Después de Filas, vamos a introducir el HTML que vamos a agregar luego de que se presenten las filas que componen el reporte.
9. Por supuesto, no nos podemos olvidar de hacer clic en el botón Guardar.

¿Cómo se traduce todo lo anterior a la práctica?

Para responder esta pregunta vamos a realizar un ejercicio.

Siguiendo el procedimiento anterior, primeramente vamos a agregar en el atributo Antes de Filas, el código que encontrarán a continuación:

Básicamente, estamos definiendo las características de la tabla que vamos a utilizar para mostrar los registros del reporte. Aquí definimos elementos como el espacio entre los bordes y el texto, el tamaño, color y tipo de letra entre otras cosas, para finalmente “inicializar” la tabla del reporte, para lo cual utilizamos la etiqueta HTML TABLE.

El siguiente paso lógico, es definir la presentación de cada registro del reporte, para ello, vamos a definir los elementos HTML necesarios para presentar cada una de las columnas que queremos agregar en la vista de detalle.

Quiero que noten en el código a continuación, que es el que va a presentar las columnas, que estoy haciendo referencia a dos cadenas de sustitución: #COLUMNA_LABEL# y #COLUMNA#, las cuales corresponden respectivamente a la etiqueta definida para la columna y al nombre de la columna como tal.

Por ejemplo, si queremos hacer referencia a una columna del reporte que se llama CIUDAD, las debemos referenciar como #CIUDAD_LABEL# y #CIUDAD#, que a la hora de ejecutar el reporte y presentarlo serán sustituidas por el valor definido para la etiqueta de la columna y el valor retornado para la  misma (esto por cada fila que devuelva el reporte).

Así pues, el código que voy a usar para presentar la información de cada empleado es el siguiente:

El código anterior, lo debemos agregar en el atributo Para Cada Fila.

Finalmente, en el atributo Después de Filas, todo lo que nos resta hacer es agregar el HTML necesario para cerrar la tabla.

El código HTML para esto es el siguiente:

Cuando aplicamos los cambios efectuados y ejecutamos la página de nuestro reporte, el resultado debería ser el que se muestra en la siguiente imagen.

La flecha roja muestra el nuevo botón agregado para la vista de detalle y a la izquierda podemos observar como hemos dado formato a nustro reporte para presentar dicha vista.

En la próxima entrega continuaremos con este tema de modificación de atributos de un reporte interactivo.