2. PHPRunner Tips and Tricks
  3. Guide 87 – Add dynamic CSS to panel LIST page
This topic is locked

Guide 87 – Add dynamic CSS to panel LIST page

 		7/27/2024 2:27:01 PM
PHPRunner Tips and Tricks
fhumanes author

img alt
In this case, too, my colleague Rubén had the need to use panels on the LIST page and be able to color (differentiate) these panels depending on their information.

We were searching in the examples and the Xlinesoft manual and we were not able to find anything on this topic, so I am going to tell you how we solved it.

Objetive

Being able to single out with colors, images, etc. , the panels of the LIST pages depending on their content.

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

img alt

If you are interested in this topic, continue reading the article at this link .
fhumanes author 7/27/2024

Technical Solution

Directly, coding in PHP, we were not able to find anything, so we oriented the solution to transport to JavaScript the list of panels that had to be “customized” and with JQUERY we accessed the panel and from it to the “DIV” / CSS Class that we want to modify.

With the example data that I had for other guides, I have made the assumption of coloring the header of the panel in pink in case the person is “pregnant”.

The solution is very simple in its coding.

“ Before SQL Query ” event . Initiation of the ARRAY to store the “id” of the “pregnant” panels:

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

“ After Record is Processed ” event . Stores in the variable the “id” of the panels that meet the condition:

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

“ JavaScript Onload event ” event. We use JQUERY to make the change:

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
};

PS
At first the color used was yellow, but I changed it to pink because I thought it was more appropriate for the “pregnant” state.

If you want to access the sources, access the article.
mbintex 7/31/2024

Nice idea.

I would propose a different approach.

In your SQL query add a virtual field with

if (persona_id=2,1,0) as persona-status

and then you place this field in PageDesigner in List View with custom formatting.

if ($value)==1 {$value="<span style='width:100px; background-color: pink;"> </span>"};
R
 		Ramsy 7/31/2024

Hi

Im unable to access the demo or the article links from Singapore . I believe that Singapore has been blocked??

Thanks
Ramsy
fhumanes author 8/2/2024

Thanks @mbintex,

As you know, there are many ways to do the functionality you need.
What I wanted to show and teach, is Jquery's great power and that although a solution is not found in the Phprunner manual, we must always explore if it can be done by Jquery.

Sergey builds the HTML with many references of ID and Classes and we can take advantage of them, very well, to make changes in the visualization that phprunner builds.

Greetings,
fernando
fhumanes author 8/2/2024

Hi @Ramsy,

A few days ago, my blog had an attack from Singapore and blocks all the accesses there.

It is very common that standard CMS, such as WordPress, people use PC's Zoombies to attack these types of sites, so it is useless to block the IP, because the attacks make them from another IP.

I have already removed this restriction on my blog, however, if the attack is repeated, the attack will be forced to block the accesses.

Greetings,