This topic is locked

Tab color based on another field value

3/24/2019 6:48:51 PM
PHPRunner General questions
M
Mark Kramer author

I have field "Pass-Fail" for students that contains the value "pass" or "fail"
I have the code for displaying Student names in the tabs across the top.. (Which works)
$sql = "SELECT * FROM Grades ;

$rs = CustomQuery($sql);

while ($data = db_fetch_array($rs)) {
$pageObject->addTab("Student='".$data["Student"]."'",

$data["Student"], $data["Student"]);
}
This displays the students names in the tab..
What I am trying to do is when the "Pass-Fail" = "fail" it displays the tab in red.
I tried different If else statements code but still can't get it to work. I know it has to be easy but I keep hitting a mental road block,,
Thanks in advance!

lefty 3/25/2019



I have field "Pass-Fail" for students that contains the value "pass" or "fail"
I have the code for displaying Student names in the tabs across the top.. (Which works)
$sql = "SELECT * FROM Grades ;

$rs = CustomQuery($sql);

while ($data = db_fetch_array($rs)) {
$pageObject->addTab("Student='".$data["Student"]."'",

$data["Student"], $data["Student"]);
}
This displays the students names in the tab..
What I am trying to do is when the "Pass-Fail" = "fail" it displays the tab in red.
I tried different If else statements code but still can't get it to work. I know it has to be easy but I keep hitting a mental road block,,
Thanks in advance!


What version are you running of PHPrunner and/or Bootstrap or original old style theme CSS?

M
Mark Kramer author 3/25/2019



What version are you running of PHPrunner and/or Bootstrap or original old style theme CSS?

M
Mark Kramer author 3/25/2019



What version are you running of PHPrunner and/or Bootstrap or original old style theme CSS?


Vers 10.1 and Sandstone Boostrap

lefty 4/1/2019



Vers 10.1 and Sandstone Bootstrap


With bootstrap I have not found anything that can change the tab-pane font color or background based on database value. It can easily be done in the record grid but have not found any solutions for tab-pane based on database value.
It's an easy fix with old themes in thegrid area though. After Record Processed Event.
if ($data["Student"] == "Pass"){

$record["Student_css"]='background:Blue;';

}

elseif ($data["Student"] == "Fail"){

$record["Student_css"]='background:Red;';

}

else {

}
And for Bootstrap Student field record Cell only background based on value . See this . Click Here
Take a look at the Tabs API , although not sure how to change font or background . Click Here . You may want to contact support with this issue? I'm thinking something to do with header element or body element and/or addTab with html.

M
Mark Kramer author 4/3/2019



With bootstrap I have not found anything that can change the tab-pane font color or background based on database value. It can easily be done in the record grid but have not found any solutions for tab-pane based on database value.
It's an easy fix with old themes in thegrid area though. After Record Processed Event.
if ($data["Student"] == "Pass"){

$record["Student_css"]='background:Blue;';

}

elseif ($data["Student"] == "Fail"){

$record["Student_css"]='background:Red;';

}

else {

}
And for Bootstrap Student field record Cell only background based on value . See this . Click Here
Take a look at the Tabs API , although not sure how to change font or background . Click Here . You may want to contact support with this issue? I'm thinking something to do with header element or body element and/or addTab with html.


I will give it a shot and let you know. Thanks!

admin 4/5/2019

I assume that question here is about WHERE tabs also known as Grid tabs. While we do not have an API to assign background color to those tabs yet this how you can do this manually.

  1. You need to add something to tab title that will tell this student failed, for instance [F] in the beginning of title. Your code for those students should look like this:

$pageObject->addTab("Student='".$data["Student"]."'", "[F] " . $data["Student"], $data["Student"]);


2. Now you can add the following code to Javascript OnLoad event of the page in question:

$("a[data-tabid]:contains('[F]')").parent().css('background','#ffe8e5');


And this is how it looks in generated application:

M
Mark Kramer author 4/5/2019



I assume that question here is about WHERE tabs also known as Grid tabs. While we do not have an API to assign background color to those tabs yet this how you can do this manually.

  1. You need to add something to tab title that will tell this student failed, for instance [F] in the beginning of title. Your code for those students should look like this:

$pageObject->addTab("Student='".$data["Student"]."'", "[F] " . $data["Student"], $data["Student"]);


2. Now you can add the following code to Javascript OnLoad event of the page in question:

$("a[data-tabid]:contains('[F]')").parent().css('background','#ffe8e5');


And this is how it looks in generated application:




Perfect!
Thank You

lefty 4/6/2019



Perfect!
Thank You


Love it, wish we had more examples like this . I spent two hours trying to figure this out. The crazy part is it is not even included in Boostrap Doucmentation. The Data-Api in Bootstrap does not show either . Cheers to Sergey for figuring this one out. Glad it worked out for you Mark.