What if we can outsource our technical support to ChatGPT? I'm kind of kidding but keep reading. I have asked ChatGPT the exact coding-related question from one of our customers.
Hi. Could you help me develop the following code in PHPRunner?
PHPRunner 10.91 41974 x64
List Page > Conditional Formatting text in cell based on value.
Field Name: po_status_rec
Field is a numeric value, but displayed text
Display Mapping
1 Pending Receipt
2 Received Partial
3 Audit
4 Received Full
Color Mapping
1 = orange
2 = blue
3 = red
4 = green
This seemed close to what I am trying to achieve, but it didn't work.
https://asprunner.com/forums/topic/3716-change-text-color-of-elements-in-a-list-display
No error messages returned and no text color change.And here is what I got back:
Yes! You can use PHPRunner's Custom CSS and JavaScript to achieve conditional formatting based on the field value.
Solution: Apply Conditional Formatting in PHPRunner
Since po_status_rec is a numeric field but displayed as text, you'll need to apply the formatting in List Page: Javascript OnLoad event.
Steps to Implement Conditional Formatting:
Go to PHPRunner → Open your project.
Navigate to: List Page → JavaScript OnLoad event.
Insert this JavaScript code:
javascript
$(document).ready(function(){
$("td[data-field='po_status_rec']").each(function(){
var text = $(this).text().trim();
switch(text) {
case "Pending Receipt":
$(this).css("color", "orange");
break;
case "Received Partial":
$(this).css("color", "blue");
break;
case "Audit":
$(this).css("color", "red");
break;
case "Received Full":
$(this).css("color", "green");
break;
}
});
});Explanation of the Code:
$(document).ready(function(){ ... }) ensures the script runs after the page loads.
$("td[data-field='po_status_rec']") targets all table cells where the field name is po_status_rec.
.each(function(){ ... }) loops through each matching table cell.
var text = $(this).text().trim(); retrieves the displayed text.
switch(text) {} assigns colors based on the displayed text.
Alternative: Apply CSS via PHP Code in "List Page: Before Display" Event
If you prefer using PHP, you can insert inline CSS dynamically.
PHP Code in "List Page: Before Display"
Go to List Page → Before Display event.
Add this PHP code:
php
$pageObject->AddCSSFile("styles/custom_styles.css");
Create a new CSS file: styles/custom_styles.css and add:
css
td[data-field='po_status_rec']:contains("Pending Receipt") { color: orange; }
td[data-field='po_status_rec']:contains("Received Partial") { color: blue; }
td[data-field='po_status_rec']:contains("Audit") { color: red; }
td[data-field='po_status_rec']:contains("Received Full") { color: green; }Test and Debug
If the color changes are not applied:
Ensure JavaScript is enabled in the browser.
Use Developer Tools (F12 → Elements → Inspect the <td> tag) to check if data-field="po_status_rec" exists.
Try console.log(text); inside the JavaScript function to verify the correct text values.
Let me know if you need adjustments!
We do live in the future!
Sergey Kornilov admin
