Todo sobre reportes interactivos – Parte 5

Y ya son cinco las entregas de esta serie sobre reportes interactivos APEX. Y en esta quinta entrega vamos a concluir con el tema específico de modificación de atributos, no con la serie. Específicamente nos vamos a dedicar a prender sobre los atributos de las columnas y vamos a ver:

1. Cómo modificar los atributos de columnas
2. Cómo definir una columna como un enlace
3. Cómo personalizar la manera en que se muestra una columna
4. Cómo deshabilitar las funcionalidades predefinidas en los encabezados de columna

Puedes acceder a las entregas anteriores de esta serie en:

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

Pero ya es hora de dar inicio a este nuevo tema referente a los reportes interactivos.

Modificar atributos de columna

Hasta el momento en las pasadas entregas estuvimos viendo como modificar atributos de la región de reporte interactivo y atributos del reporte interactivo como tal, así como algunos ejemplos específicos para cada uno de ellos.

Existe un tercer grupo de atributos que tienen relación con los reportes interactivos, estos son los atributos de las columnas de los reportes. Estos atributos nos permiten definir características específicas de cada una de las columnas, características como:

• El encabezado
• La alineación de encabezado y contenido
• El formato de presentación de los datos
• La condicionalidad de la columna y mucho más.

Empecemos por definir el procedimiento estándar para modificar cualquiera de los atributos de columna de un reporte interactivo:

1. Abra en el diseñador de páginas, la página que contiene el reporte interactivo.
2. En el panel de la izquierda de la página, en la región del informe interactivo, abra el nodo Columnas, justo debajo del nombre de la región, enmarcado y señalado en la siguiente imagen.
   
3. Haga clic en el nombre de la columna en la que desea hacer cambios.
4. En el panel de la izquierda, el Editor de Propiedades, localice el atributo que desea modificar, los cuales están definidos en grupos, de acuerdo con su funcionalidad.
5. Realice la modificación deseada.
6. Haga clic en el botón Guardar para hacer el cambio permanente.

En la imagen anterior, se puede apreciar parte de los atributos de una columna. A continuación,, en la tabla de abajo defino una lista con los grupos de atributos que tiene cada columna de un reporte interactivo:

Ahora que hemos definido el procedimiento general para realizar cambios y que definimos los diferentes grupos de atributos de una columna de reporte interactivo, veamos como ejecutar algunos casos específicos, relacionados directamente con los atributos de las columnas de los reportes interactivos.

¿Cómo definir una columna como enlace?

Una de las funciones más útiles dentro de un reporte, es poder definir un enlace a una página específica, por ejemplo, para mostrar un mayor detalle sobre un registro específico, o bien, poder ingresar información relacionada con el mismo.

Ya vimos en una entrega anterior, cómo definir un enlace a nivel de los atributos del reporte, ahora,, vamos a ver como hacerlo a nivel de una columna específica.

Para demostrar como definimos una columna de un reporte interactivo como enlace, vamos a utilizar la página que contiene el reporte de tareas que creamos en la primera parte de esta serie.

Para definir una columna como enlace:

1. Abra en el diseñador de páginas, la página que contiene el reporte interactivo de tareas.
2. Agregue un nuevo reporte interativo justo por debajo de la región que contiene el reporte de tareas y vamos a modificar los siguientes atributos de la región:
   1. Identificación – Nombre: Por Hacer
   2. Identificación – Tipo: Informe Interactivo
   3. Origen – Nombre de la Tabla: EBA_PROJECT_TASK_TODOS
   4. Origen – Cláusula Where: TASK_ID = :P8_TASK_ID
   5. Cabecera y Pie de P[agina – Teto de Cabecera: <h3>Por hacer en tarea &P8_TAREA.</h3>
   6. Condición de Servidor – Tipo: El elemento es no nulo
   7. Elemento: P8_TASK_ID
3. Agregue un nuevo elemento de página en la región que acaba de crear y modifique los siguientes atributos del mismo:
   1. Identificación – Nombre: P8_TASK_ID
   2. Identificación – Tipo: Oculto
   3. Configuración – Valor Protegido: Apagado
4. Agregue otro elemento de página en la región y modifique los siguientes atributos del mismo:
   1. Identificación – Nombre: P8_TAREA
   2. Identificación – Tipo: Oculto
   3. Configuración – Valor Protegido: Apagado
5. Expanda el nodo Representación Previa de la página y en la sección Después de Cabecera, cree un Cálculo y modifique los siguientes atributos:
   1. Identificación – Nombre del Elemento: P8_TAREA
   2. Cálculo – Consulta SQL: select name from eba_project_task_todos where id = :P8_TASK_ID
   3. Condición de Servidor – Tipo: El elemento es no nulo
   4. Elemento: P8_TASK_ID
6. En el panel de la izquierda, debajo del nombre de la región del reporte original de Tareas, expanda el nodo Columnas.
7. Haga clic en la columna NAME.
8. En el editor de propiedades, en el panel de la derecha de la página, modifique los siguientes atributos de la columna:
   1. Identificación – Tipo: Enlace
   2. En Enlace – Destino, haga clic en el botón que se muestra y en la siguiente pantalla modifique los atributos:
      1. Destino – Pagina: 8
      2. Definir Elementos – Nombre: P8_TASK_ID
      3. Definir Elementos – Valor: #ID# (lo puede escribir directamento o bien, seleccionar de la lista de valores proporcionada.
      4. Haga clic en el botón Aceptar.
9. Haga clic en el botón Guardar.

Cambie los nombres de las variables por los que correspondan a su página, en este caso el reporte que estoy usando se encuentra en la página 8 y por eso hago referencia a esta página.

La siguiente imagen muestra el nuevo reporte, en donde la columna Nombre muestra un enlace.

Si hacemos clic en cualquiera de los nombres de las tareas, ahora se mostrará en la parte de abajo un nuevo reporte en donde aparecen los trabajos por hacer para dicha tareas, en caso de que los tenga definidos, tal y como se puede apreciar en la imagen de abajo.

Adicionalmente, en el encabezado del nuevo reporte se mostrará el nombre de la tarea seleccionada, a la cual pertenece el o los trabajos que muestra el nuevo reporte.

¿Cómo personalizar la manera en que se muestra una columna?

Una opción muy interesante que nos ofrecen los reportes interactivos, es la posibilidad de personalizar la forma en que mostramos el contenido de una columna.

Esto nos permite por ejemplo:

• cambiar los colores del texto y el fondo de la columna,
• asignar un nivel de encabezado,
• usar una clase dinámica devuelta por la consulta SQL del reporte,
• mostrar una imagen y que esta muestre una pista al pasar el ratón por encima de la misma,
• mostrar un icono al lado del valor de la columna.

Estos son solo algunos ejemplos de lo que podemos hacer

El procedimiento general para personalizar la forma en que se muestra una columna es el siguiente:

1. Abra en el diseñador de páginas, la página que contiene el reporte interactivo.
2. Expanda el nodo Columnas por debajo del nombre de la región del reporte interactivo, en el panel izquierdo de la pantalla.
3. Haga clic en el nombre de la columna que desea personalizar.
4. En el editor de propiedades, en el panel a la derecha de la pantalla:
   1. Localice el atributo Formato de Columna – Expresión HTML.
   2. Ingrese el HTML que utilizará para personalizar el contenido de la columna
5. Haga clic en el botón Guardar.

El HTML para ejecutar algunas de las personalizaciones que se listaron arriba es el siguiente:

• cambiar los colores del texto y el fondo de la columna:
  <span style=”background-color:yellow;  color:red;”>#EMPLOYEE_STATUS#</span>
• asignar un nivel de encabezado:
  <h2>#EMPLOYEE_NAME#</h2>
• usar una clase dinámica devuelta por la consulta SQL del reporte:
  <span class=”#COLUMN_CLASS#”>#EMPLOYEE_STATUS#</span>
• mostrar una imagen y que esta muestre una pista al pasar el ratón por encima de la misma:
  <img src=”#IMAGE_NAME#” title=”#EMPLOYEE_NAME#”>

Las cadenas que empiezan y terrminan con un “#” hacen referencia al nombre de una de las columnas devueltas por la consulta SQL del reporte y son sustituidas por su valor cuando el reporte se ejecuta.

Ahora bien, para mostrarlo en la práctica, vamos a agregar un icono de color verde, por delante del nombre de la persona encargada en la columna Asignado a del reporte de tareas que modificamos arriba.

Para hacer esto, debemos:

1. Abrir la página del reporte en el diseñador de páginas, en mi caso corresponde a la página 8.
2. Expander el nodo Columnas justo por debajo del nombre de la región del reporte de Tareas.
3. Hacer clic en la columna ASSIGNEE.
4. En el editor ed propiedades (el panel de la derecha de la página):
   1. Modifique el atributo Formato de Columna – Expresión HTML, agregue el siguiente código HTML:
      <span aria-hidden=”true” class=”fa fa-user-check” style=”color:green”></span> – #ASSIGNEE#
5. Haga clic en el botón Guardar.

El resultado al ejecutar el cambio, se muestra en la imagen a continuación. En donde puede observar un icono de usuario en color verde justo a la izquierda del nombre de la persona a quien está asignada la tarea, seguida por un guión entre este y el nombre.

Cómo deshabilitar las funcionalidades predefinidas en los encabezados de columna

En la tercera parte de esta serie, expliqué como personalizar la barra de búsqueda y el menú de acciones de un reporte interactivo.

Como puede notar en la imagen anterior, cuando hacemos clic en el nombre del encabezado de una columna, el usuario podrá ver un pequeño menú con algunas de las opciones que nos proporciona la barra de búsqueda y el menú de acciones.

Estas opciones de dicho menú funcional incluyen:

• ordenar la columna de manera ascendente,
• ordenarla columna de manera descendente,
• ocultar la columna,
• crear una división de control,
• ingresar texto en una caja de búsqueda para filtrar el reporte por dicho valor, y
• utilizar la lista de valores mostrada por debajo de la caja de búsqueda para seleccionar y filtrar el reporte por el valor seleccionado.

Al igual que sucede con la barra de búsqueda del reporte y el menú de acciones, este nuevo menú funcional es configurable por parte del desarrollador, pudiendo ser eliminado o dejando solo algunas de las funciones del mismo, de acuerdo con las necesidades específicas del usuario.

Los atributos que manejan estas opciones, están agrupados bajo el grupo Permitir a los Usuarios y explicó cada uno de ellos a continuación, sin embargo, antes de hacerlo me gustaría aclarar que no todos ellos forman parte del menú funcional del encabezado, algunos definen el uso que podemos hacer o no de una columna en las funciones del menú de acciones del reporte.

 Las opciones marcadas con ✔ son las que forman parte del menú contextual del encabezado, las otras determinan su inclusión o no en las acciones del menú de acciones del reporte.

El procedimiento general para habilitar o deshabilitar las opciones del menú de encabezamiento es:

1. Abra en el diseñador de páginas, la página que contiene el reporte interactivo.
2. En el panel de la izquierda, expanda el nodo Columnas por debajo del nombre de la región del reporte interactivo.
3. Haga clic en el nombre de la columna que desea modificar.
4. En el editor de propiedades, en el panel a la derecha de la página:
   1. Localice el grupo de atributos Permitir a los Usuarios.
   2. Apague o encienda cada uno de los atributos que se detallaron en la tabla de arriba.
5. Haga clic en el botón Guardar.

Si desea deshabilitar por completo el menú funcional, lo que debe hacer es deshabilitar (apagar) los atributos Ocultar, Ordenar, Filtro y División de Control.

Luego de hacer eso en la columna ASSIGNEE, el reporte de Tareas lucirá así.

Si queremos permitir únicamente poder ordenar por el encabezado de la columna, deshabilitamos (apagamos) los atributos Ocultar, Filtro y División de Control y el resultado se vería de esta manera.

Los espero en la siguiente entrega de esta serie para seguir aprendiendo sobre reportes interactivos.