Conditional Highlighting

Forums Dynamic Forms for SharePoint Conditional Highlighting

This topic contains 4 replies, has 4 voices, and was last updated by  Adam Maxam 10 months, 1 week ago.

  • Author
    Posts
  • #6428

    Kyle Vaske
    Participant

    I see that it is possible to change the color of a specific tab or field from CSS, but is it possible to change the color of a field based upon its value? For instance, if value > 10, shade the cell green?

  • #6560

    Alexander Bautz
    Keymaster

    Hi,
    Add this code to the Custom JS section:

    (function colorMyField(){
    	var val = getFieldValue("MyNumberField"), color = "#ffffff";
    	if(parseInt(val,10) > 10){
    		color = "#00ff00";
    	}
    	$(spjs.dffs.fields["MyNumberField"]).css("background-color",color);
    })();
    
    
    $(spjs.dffs.fields["MyNumberField"]).find("input").change(function(){
    	colorMyField();
    });

    Change “MyNumberField” to match your field.

    Alexander

  • #18414

    Phil Meacham
    Participant

    Alex, I’ve searched through the forum, and found this post for something I’m trying to achieve, but the filed I’m trying to do this on is a Yes/No field. I’ve tried comparing it as a boolean but I’m assuming it’s a text field in SP, probably not, probably boolean. But how can I achieve this? The code I’ve put into the custom JS so this:

    (function colorMyField(){
    String val = getFieldValue(“Approved_x003f_”), color = “#FFFFFF”;
    if(String val = “Yes” {
    color = “#00ff00”;
    }
    $(spjs.dffs.fields[“Approved_x003f_”]).css(“background-color”,color);
    })();

    $(spjs.dffs.fields[“Approved_x003f_”]).find(“input”).change(function(){
    colorMyField();
    });

  • #18416

    Phil Meacham
    Participant

    Just to add to this, I’ve managed to change it so that it changes the field header, but not the value. I used the following code, but I want it to highlight the field, not the header:

    (function colorMyField(){
    var val = getFieldValue(“Approved_x003f_”), color = “#FFFFFF”;
    if(val == “Yes”) {

    color = “#00ff00 !important”;

    }
    $(spjs.dffs.fields[“Approved_x003f_”]).css(“background-color”,color);
    })();

    $(spjs.dffs.fields[“Approved_x003f_”]).find(“input”).change(function(){
    colorMyField();
    });

  • #18818

    Adam Maxam
    Participant

    I’m struggling to adjust this for a drop-down field “Status”, that can have values “Not Started”, “In Process” and “Completed”. It sets the color based on the Status value when the form is opened, but does not change with a field value change while in the form. I attempted to use a rule to rerun the function upon field change, but I am getting an error. Also, is there a way to highlight the drop-down box as opposed to the full row?

    My attempt at adjusting the JS:

    (function colorMyField(){
    var val = getFieldValue(“Status”), color = “#ffffff”;
    if(val == “Not Started”){
    color = “#f7bbf7”;
    }
    if(val == “In Process”){
    color = “#7030a0”;
    }
    if(val == “Completed”){
    color = “#000000”;
    }
    $(spjs.dffs.fields[“Status”]).css(“background-color”,color);
    })();

    $(spjs.dffs.fields[“Status”]).find(“input”).change(function(){
    colorMyField();
    });

    The error I get when I set a rule to run the function colorMyField when the Status field is changed:

    DFFS: Configuration error in “Run these functions / trigger these rules”. Ensure you use the correct function name or rule friendly name.

    The rule “UpdateFieldColor” tried to invoke the function:
    “colorMyField”

    Error: TypeError: Object doesn’t support property or method ‘colorMyField’

You must be logged in to reply to this topic.