Conditional Highlighting

[Kyle Vaske]

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?

[Alexander Bautz]

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

[Phil Meacham]

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();
});

[Phil Meacham]

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();
});

[Adam Maxam]

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’

[BenR]

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 3 years, 6 months ago by BenR.

[BenR]

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.

[Author]

Posts