Conditional Highlighting

Forums Dynamic Forms for SharePoint Conditional Highlighting

Viewing 4 reply threads
  • 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’

Viewing 4 reply threads
  • You must be logged in to reply to this topic.