Change Headers class via rule enabled function

[Matthew Thompson]

Hello Alexander,

I am trying to change the background color of a header based off the value of another filed. Is that possible?

[Alexander Bautz]

Hi,
This can be done with some Custom JS. Add a header with an unique id – in my example I added a header with Unique ID “headerOverStatus” over my Status field.

Change the header ID and the fieldinternalname to match your field – and change the colors. Then add this snippet to your Custom JS:

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

Alexander

[Matthew Thompson]

This worked perfect. Thank you.

How would you do this if you have multiple choice checkbox field?

[Alexander Bautz]

I’m not sure how you would use this – how do you plan to set the color when you have multiple choices checked?

Basically using getFieldValue(“YourMultichoiceField”) gives you an array of options so you can loop over them in the function.

Alexander

[Author]

Posts