Este caso, también, mi compañero Rubén tenía la necesidad de utilizar paneles en la página LIST y poder colorear (diferenciar) estos paneles dependiendo de la información de este.

Estuvimos buscando en los ejemplos y en el manual de Xlinesoft y no fuimos capaces de encontrar nada sobre este tema, así que os voy a contar cómo lo hemos resuelto.

Objetivo

Poder singularizar con colores, imágenes, etc, , los paneles de las páginas LIST dependiendo de su contenido.

DEMO:  https://fhumanes.com/panel_css/

Solución Técnica

Directamente, codificando en PHP, no fuimos capaces de encontrar nada, así que orientamos la solución a transportar a JavaScript la relación de paneles que se debían “personalizar” y con JQUERY acedemos al panel y a partir de él al “DIV” / Clase de CSS que queremos modificar.

Con los datos de ejemplo que tenía para otras guías he hecho el supuesto de colorear la cabecera del panel en rosa para el caso de que la persona esté “embarazada”.

La solución es muy simple en su codificación.

Evento “Before SQL Query“. Iniciación del ARRAY para almacenar los “id” de los paneles de “embarazadas”:

$_SESSION['proxy_amarillo'] = array();

Evento “After Record is Processed“. Almacena en la variable los “id” de los paneles que cumplen la condición:

if ($data['persona_embarazo_idpersona_embarazo'] == 2 ) {
    $_SESSION['proxy_amarillo'][] = $recordId;
};

Evento “Before Display“. Pasar el array a una variable PROXY para subir el array a JavaScript:

$pageObject->setProxyValue("panel_amarillo", $_SESSION['proxy_amarillo']); // Para que llegue los valores a JavaScript

unset($_SESSION['proxy_amarillo']);

Evento “JavaScript Onload event“. Utilizamos JQUERY para hacer el cambio:

var amarillo = proxy['panel_amarillo'];
// console.log("proxy: ",amarillo);

for (const rowId of amarillo) {
  rowPanel = '#gridRow'+rowId;
  // console.log(rowPanel);
  // var panel = $(rowPanel).find(".panel-body").css('background-color', 'pink');  // Cuerpo del panel
  var panel = $(rowPanel).find(".panel-heading").css('background-color', 'pink'); // Cabecera del Panel
};

Fijaros la sencillez de:

• Pasar array de PHP a JavaScript.
• Establecer un bucle para tratar los elementos del array.
• La potencia y sencillez de JQUERY para buscar el elemento y aplicar los cambios.

Como en todas las guías, os dejo los fuentes para que hagáis los cambios que necesitéis y ante cualquier duda, podéis preguntarme a través de mi email [email protected].

PD
Al principio el color utilizado era el amarrillo, pero lo he cambiado a rosa porque creí más adecuado al estado de “embarazada”.