Conditional formatting in the Misc HTML header

[Phil Grant]

HI,
I have a field on my form that contains a status and this field is also displayed above the tabs of the form using the HTML section in the ‘Misc’ tab.

Is it possible to change the background colour of the <td> tag (table cell) based on the value of the status form field?

I’ve already tried some customJS that I’ve found in some posts that look right but I can’t get it to work.

Any suggestions?

Thanks
Phil

[Alexander Bautz]

Use something like this in Custom JS:

jQuery("#dffs_Status select").on("change",function(){
    var bgColor = "white", txtColor = "black";
    switch(jQuery(this).val()){
        case "Not started":
            bgColor = "red";
            txtColor = "white";
        break;
        case "In progress":
            bgColor = "green";
            txtColor = "white";
        break;
        case "Completed":
            bgColor = "gray";
            txtColor = "black";
        break;
    }
    jQuery(this).parents("td:first").css({"background-color":bgColor,"color":txtColor});
}).trigger("change");

Replace “Status” with your field name and all the “case” sections to match your options.

Alexander

[Phil Grant]

Do I need to change the

jQuery("#dffs_Status select").on("change",function(){

Do I need to change the action form “change” to something like “load” ? as I want the form field to change colour when opened.

[Phil Grant]

Alexander,
This is what I’m trying at the moment, as well as variations on the field name.
But I can’t seem to get it working.

jQuery("#dffs_Golden_x0020_Rules_x0020_Status select").on("load",function(){
    var bgColor = "white", txtColor = "black";
    switch(jQuery(this).val()){
        case "Approval Pending":
            bgColor = "yellow";
            txtColor = "white";
        break;
        case "Approval Not Required":
            bgColor = "green";
            txtColor = "white";
        break;
        case "Approved":
            bgColor = "green";
            txtColor = "black";
        break;
    }
    jQuery(this).parents("td:first").css({"background-color":bgColor,"color":txtColor});
}).trigger("load");

[Alexander Bautz]

You are not supposed to change “change” to “load” like you have done – only the field name and the status options in the case.

Alexander

[Phil Grant]

OK but will it set the background colour when the form opens or only when the status changes?

Phil

[Alexander Bautz]

Both load and charge.

Alexander

[Phil Grant]

OK thanks, I’ll give it a try tomorrow.

[Phil Grant]

Alexander,
OK, I couldn’t get that to work no matter what I tried so I found this code

// Trigger it on page load
setHeaderColorByStatus();
// Trigger on change of the status field
jQuery("#dffs_Status").on("change",function(){
    setHeaderColorByStatus();
});

function setHeaderColorByStatus(){
    var currentStatus = getFieldValue("Status"), bgc = "white", c = "black";
    switch(currentStatus){
        case "Not started":
            bgc = "yellow";
        break;
        case "In progress":
            bgc = "blue";
            c = "white";
        break;
        case "Completed":
            bgc = "green";
            c = "white";
        break;
    }
    jQuery("#dffsHeading_headerOverStatus div").css({
        "background-color":bgc,
        "color":c
    });
}

And I now have a header that changes background colour etc. on load and change but when I change the status field the colour changes OK but the text in the instance of {Golden_x0020_Rules_x0020_Status} in the html header doesn’t change to reflect the new choice. I assume this is because it is static once the page is rendered, can I do anything to force an update to that text?
Cheers,
Phil

• This reply was modified 4 years, 10 months ago by Phil Grant.
• This reply was modified 4 years, 10 months ago by Phil Grant.
• This reply was modified 4 years, 10 months ago by Phil Grant.

[Alexander Bautz]

I’m glad you found a working solution. To style the text over the form you must find the ID of this placeholder (right click > inspect) and then add a line in the bottom of your function to target this new id:

jQuery("#formCustomLabel").css({
  "background-color":bgc,
  "color":c
});

Alexander

[Phil Grant]

Thanks,
I figured out how to update the text in the form as well by using jQuery to change the text in the div tag.

jQuery("#GRS").text("Golden Rules Status - " + currentStatus);

Quite pleased with the way it worked out in the end.

[Alexander Bautz]

I’m glad you figured it out.

Alexander

[Author]

Posts