Hi,
I have a details page and I want to change the background colour of a details component based on a condition. I want to show it either blue or yellow. The color should be applied to the whole of the details component. How can I edit this? I can’t find the relevant controls in the TB portal.
could you create a css class and then use the condition to apply it ?
currentWeek {
background-color: blue;
}
@slimpens you’ve clicked in the wrong ‘Display Rules’ thats all… you need to click on your date field first. This will give you the ‘Display Rules’ for the field as shown below:
Yes - and you can write some javascript to check your condition and apply the appropriate CSS color.
@Shumon, thanks for the idea, but when doing that I only change the background of that particular field and not a number of rows in the details tab.
I know the concept of the css class, but I don’t know how to apply it, since it’s custom JS…
The concept is that based on a conditon, the HTML background turns from blue to red… How can I do this? Check the images:
@slimpens You can use the javascript tab for this. On the front end page use the inspector tool to find out what the components ID # is and then you can add this code:
TB.render('component_3', function(data) {
let status = "{pageField.Status}"; // You can set this value as needed
// Check if the status is "active"
if (status === "Active") {
// Select the element by its ID and change its background color
document.getElementById("x_element_page_168_3").style.backgroundColor = "blue";
}else{
document.getElementById("x_element_page_168_3").style.backgroundColor = "red";
}
});