Change Headers class via rule enabled function

Forums General discussion Change Headers class via rule enabled function

This topic contains 1 reply, has 2 voices, and was last updated by  Alexander Bautz 1 week, 2 days ago.

  • Author
    Posts
  • #23762

    Matthew Thompson
    Participant

    Hello Alexander,

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

  • #23764

    Alexander Bautz
    Keymaster

    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

You must be logged in to reply to this topic.