Change Headers class via rule enabled function

Forums General discussion Change Headers class via rule enabled function

This topic contains 3 replies, has 2 voices, and was last updated by  Alexander Bautz 3 weeks, 4 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

  • #24521

    Matthew Thompson
    Participant

    This worked perfect. Thank you.

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

    • #24531

      Alexander Bautz
      Keymaster

      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

You must be logged in to reply to this topic.