Conditional Highlighting

Forums Dynamic Forms for SharePoint Conditional Highlighting

Viewing 6 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’

    • #31911
      BenR
      Participant

      Alexander,
      I hope you are well.

      I am attempting a simple thing – I would like to highlight a field with background color while it is blank. My preference is not to make it a Required field, but maintain a highlight until it is populated. I’ve tried to use the top-most solution in this thread, but to no avail.

      Required: While SPFieldText: CompassID is blank, change it’s background color to “#fcd4dc”. Else, if populated, leave it white.

      Would this be triggered by a rule on CompassID?

      As always, your support and efforts are greatly appreciated!

      R’grds – Ben.
      Reference:
      Custom DFFS-folder: DFFS_v4.4.5.7_2020-08-30
      DFFS Loader: v2
      DFFS frontend: 4.4.5.7 – August 30, 2020
      DFFS frontend CSS: 4.62 / 4.62
      Autocomplete: 1.6.49 – June 28, 2020
      Cascading dropdowns: 3.7.41 – August 30, 2020
      jQuery: 1.12.4
      Lookup: 1.1.20 – March 10, 2020
      Resource management: 2.4.5 – August 29, 2019
      SPJS-Utility: 1.348 – June 28, 2020
      vLookup: 2.2.156 – June 28, 2020

      • This reply was modified 1 month ago by BenR.
    • #32108
      BenR
      Participant

      Sooo… Alexander,

      Why have you not responded to my question? It’s a pretty simple request (I think) and I don’t find sufficient information to do this on my own. Your original solution, posted in 2014, is not working.

      I’ve found you highly responsive in the past – is this a sensitive subject? Frankly, I don’t ask if I know the answer – I really don’t understand, but am willing to try. I’ve learned from each answer you have provided.

      Okay, if you don’t solve my problem and answer my question – at least tell me why you won’t. As I’ve stated with each time I’ve reached out for your support, I sincerely appreciate your support and efforts!

      R’grds – Ben.

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