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.
Puedes usar solo el DA de “After Refresh” Si le prendes el atributo de “Fire on Initialization”. De esa forma no necesitas el Page Load.
Uy excelente, tiene toda la razón no se me había ocurrido, así ahorraríamos tiempo haciendo solo un procedimiento, gracias por el aporte
Por que no me aparece la opción de «COLUMN FORMATING» para agregar el HTML?
Estoy tratando de hacerlo sobre un «interactive grid»
Debería aparecer, válida la versión de APEX o bien el campo podría aparecer con otro nombre, sin embargo, siempre esta la opción para agregar código HTML
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?
Revisa que la condición efectivamente se cumpla, ya que por lo que veo debería funcionar, podría ser un problema con el formato de la fecha
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
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
Hola Dmatordo,
Sí claro, si quiere escríbame a oracle.max.consultor@gmail.com y le puedo ayudar. Talvez le sería mas fácil utilizar el componente de calendario en lugar una tabla con 31 columnas, pero todo depende de la lógica del proyecto.
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
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
Hola Alex,
Sí efectivamente funciona igual, al final solo estamos trabajando con css y JavaScript, entonces no es algo que deba afectar en otras versiones de Oracle APEX
Saludos!
En el campo/s que vas a cambiar el color asegurate de que este el check «Escape special characters» desmarcado
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
Como se realizaria en un interactive grid? en los campos del interactive grid no aparece la seccion de column formating