Para este laboratorio vamos a colorear una celda con un dato en específico en un Classic Report en Oracle Apex, la idea es poder ver la celda con un color distinto, dependiendo del valor que aparezca.

Tenemos una tabla que nos muestra una columna llamada «Estado de Solicitud» la cual solo nos desplegará 3 valores:

  • Pendiente de revisión
  • Aprobado
  • Rechazado

Lo que vamos a hacer es que cuando se presente el valor «Pendiente de revisión» la columna sea amarilla, cuando diga «Aprobado», la columna sea verde y cuando diga «Rechazado» la columna sea roja.

Dentro de nuestro select que llama nuestro reporte debemos colocar un case que nos identifique cuando la columna tenga el valor requerido que aplique el cambio de color en la celda:

select "ID_VIATICO",
"FECHA_INGRESO",
"USUARIO_COLABORADOR",
"NOMBRE_COLABORADOR",
"PROYECTO",
"MONTO_TOTAL",
(select P.NOMBRE || ' ' || P.APELLIDO as Colaborador
from PERSONA P
where lower(P.USUARIO) = lower(JEFE)) "JEFE",
"ESTADO_DE_SOLICITUD",
CASE WHEN ESTADO_DE_SOLICITUD = 'Pendiente de Revisión' THEN 'data-style="background-color:#edd811;font-weight:bold;color:white;"'
WHEN ESTADO_DE_SOLICITUD = 'Aprobado' THEN 'data-style="background-color:#03a806;font-weight:bold;color:white;"'
WHEN ESTADO_DE_SOLICITUD = 'Rechazado' THEN 'data-style="background-color:RED;font-weight:bold;color:white;"'
END css_estilo,
"TIPO_DE_PAGO",
"ESTADO_DE_PAGO",
"FECHA_DE_PAGO"
from "#OWNER#"."VIATICO";

Ahora procederemos a esconder la nueva columna creada llamada css_estilo:

En la columna ESTADO_DE_SOLICITUD debemos irnos al apartado de HTML Expression en Column Formatting de la columna y agregaremos el siguiente código:

<span #CSS_ESTILO#>#ESTADO_DE_SOLICITUD#</span

Luego de esto debemos crear 2 eventos, uno de Page Load que ejecute el siguiente código javascript:

apex.jQuery("span[data-style]").each(
function()
{
apex.jQuery(this).
parent().attr( 'style'
, apex.jQuery(this).attr('data-style')
);
}
);

Y un evento de After Refresh para que cada vez que se ejecute un cambio en la tabla se cambie el color o se mantenga dependiendo el dato:

En la acción javascript usamos el mismo código del evento Page Load:

Posterior a esto guardamos los cambios y recargamos la página:

Nota: En caso de no crear los eventos Page Load y After Refresh, la celda no se coloreará en su totalidad

Por último, si queremos crear más columnas con varios tipos de colores, debemos editar nuestro select y crear más case para otras columnas, luego esconderlas y aplicar la etiqueta span en la columna a colorear.

17 respuestas a «Cómo colorear celdas de un Classic Report, Interactive Report e Interactive Grid en Oracle APEX»

  1. Que tal este como se podria hacer esto pero con las fechas aplique en lo case esta tipo de condición
    «CASE WHEN TO_DATE(E.END_DATE,’DD/MM/YYYY’) <TO_DATE(SYSDATE,'DD/MM/YYYY') THEN
    data-style="background-color:RED;font-weight:bold;color:white;"' "
    pero al parecer no agarra alguna idea de como se podria implementar?

    1. Hola a todos:
      El código que me ha funcionado es:
      select EMPNO,
      ENAME,
      JOB,
      MGR,
      HIREDATE,
      SAL,
      COMM,
      DEPTNO,
      CASE WHEN DEPTNO= ‘SALES’ THEN ‘data-style=»background-color:#edd811;font-weight:bold;color:white;»‘
      WHEN DEPTNO = ‘RESEARCH’ THEN ‘data-style=»background-color:#03a806;font-weight:bold;color:white;»‘
      WHEN DEPTNO = ‘ACCOUNTING’ THEN ‘data-style=»background-color:RED;font-weight:bold;color:white;»‘
      END css_estilo,
      ONLEAVE,
      NOTES
      from EBA_DEMO_IG_EMP

  2. Hola, soy bastante nueva en APEX, me ayudó mucho este tutorial, me podrías ayudar para hacer esto en múltiples columnas, por ejemplo tengo una tabla del 31 (1 por cada día del mes) donde se irá marcando según el código que corresponda a ese día por empleado, como una tabla de asistencia

  3. Hola

    Este codgo funcona de la misma forma en Apex 21.2
    He seguido los pasos y no me ha funcionado, nose si ya es distinto para versiones recientes de APex

    De antemano gracias por la ayuda

  4. Hola

    Este codgo funcona de la misma forma en Apex 21.2 ????
    He seguido los pasos y no me ha funcionado, nose si ya es distinto para versiones recientes de APex

    De antemano gracias por la ayuda

    1. Hay una corrección que se debe hacer al código del select, al menos en mi caso así me funcionó.
      En lugar de utilizar
      ‘data-style=»background-color:#edd811;font-weight:bold;color:white;»‘
      Debe ser
      ‘data-style=background-color:#edd811;font-weight:bold;color:white;’
      Sin las comillas dobles en la parte interna.
      Espero te haya servido

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *