Conditional Highlighting

Forums Dynamic Forms for SharePoint Conditional Highlighting

This topic contains 3 replies, has 3 voices, and was last updated by  Phil Meacham 1 week, 2 days 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();
    });

You must be logged in to reply to this topic.