Good morning!
We are using forms for SharePoint and would like to add some custom code to the form where if a field is blank/null, it changes the control of the field to a different color. We have some fields that are being missed and they are fields that we cannot require to be filled out en masse so I wanted to create a visual way of indicating that a field is blank.
We would like to be able to apply this to all fields in the form via code, such as a for each/next type of thing. We would also like to be able to manipulate the color of the control, not the entire field, just the box they type in. We would also like to be able to change the color of the control based on the selection of the field so this code would be very useful to us for multiple applications.
Anyone that's done this before or could provide some help, I would greatly appreciate it. I couldn't find anything specific on this in the help documentation.
Thanks in advance,
Gary Griffin
Carolina BioOncology Institute
Hello @CBOI_GGriffin,
You can check if a field value is blank and change the background color of the input on form load and change of a field value using the code below:
fd.spRendered(function(){
//change input color on form load
if(!fd.field('Title').value){
$(fd.field('Title').$el).find('input').css('background-color','red')
}
//change input color on field value change
fd.field('Title').$on('change', function(value){
if(value){
//make input color white if value is not blank
$(fd.field('Title').$el).find('input').css('background-color','white')
}
else {
//make input color red if value is blank
$(fd.field('Title').$el).find('input').css('background-color','red')
}
})
If you want to apply this code for multiple fields, you can create an array with the internal names of all fields on the form and run the code for each field.
Note, that for Lookup, Person or Group, Multiline Text fields you need to make sure a field has fully loaded, that is why you need to split field names into two groups: fields and waitForFields.
fd.spRendered(function(){
var fields = ['Title', 'Number', 'Date']
fields.forEach(function(fieldName){
if(!fd.field(fieldName).value){
$(fd.field(fieldName).$el).find('input').css('background-color','red')
}
fd.field(fieldName).$on('change', function(value){
if(value){
$(fd.field(fieldName).$el).find('input').css('background-color','white')
}
else {
$(fd.field(fieldName).$el).find('input').css('background-color','red')
}
})
})
var waitForFields = ['Lookup', 'MultilineText', 'PeoplePicker']
waitForFields.forEach(function(fieldName){
//field is initialized
fd.field(fieldName).ready().then(function(field) {
if(!field.value){
$(field.$el).find('input').css('background-color','red')
}
field.$on('change', function(value){
if(value){
$(field.$el).find('input').css('background-color','white')
}
else {
$(field.$el).find('input').css('background-color','red')
}
})
});
})
})
Hi @mnikitina,
Is there a way to apply this colour change to the input of a dropdown field?
I have a dropdown that shows/hides other fields depending on its value, the shown fields have a particular background colour (using your code above) for each option in the dropdown, but I would like the dropdown to change to match the colour of the shown fields, for extra clarity for users.
Thanks
NIck
Hello @Nick.Jones,
You can use the same code to change the background color of the dropdown field input:
$(fd.field(fieldName).$el).find('input').css('background-color','red')
Are you getting any errors in the browser console(F12) when using this code for the dropdown field?
Hi @mnikitina,
That's the code I tried...
$(fd.field('IssueType').$el).find('input').css('background-color','#ffcccc')
It's part of the function that hides/shows the relevant fields using switch, which works fine. It just seems to ignore the line that should change the dropdown background colour.
The only error it throws up when I change the dropdown option is "Error: Idle tracking cookie is missing".
Regards
Nick
@Nick.Jones,
Share the complete code that you are using. Maybe there is an issue with logic or a syntax error.
Hi @mnikitina
This is the code:
fd.spRendered(function() {
$(fd.field('Software').$parent.$el).hide();
$(fd.field('MonitorModel').$parent.$el).hide();
$(fd.field('PhoneMake').$parent.$el).hide();
$(fd.field('PhoneNumber').$parent.$el).hide();
$(fd.field('OtherInfo').$parent.$el).hide();
$(fd.field('LaptopID').$el).find('input').css('background-color','#ffcccc')
$(fd.field('Software').$el).find('input').css('background-color','#ffffcc')
$(fd.field('MonitorModel').$el).find('input').css('background-color','#ffccff')
$(fd.field('PhoneMake').$el).find('input').css('background-color','#ccccff')
$(fd.field('PhoneNumber').$el).find('input').css('background-color','#ccccff')
$(fd.field('OtherInfo').$el).find('input').css('background-color','#ccffcc')
$(fd.field('IssueType').$el).find('input').css('background-color','#ffcccc')
function hideUnneededFields() {
$(fd.field('LaptopID').$parent.$el).hide();
$(fd.field('Software').$parent.$el).hide();
$(fd.field('MonitorModel').$parent.$el).hide();
$(fd.field('PhoneMake').$parent.$el).hide();
$(fd.field('PhoneNumber').$parent.$el).hide();
$(fd.field('OtherInfo').$parent.$el).hide();
switch(fd.field('IssueType').value) {
case 'Laptop/PC':
$(fd.field('LaptopID').$parent.$el).show();
$(fd.field('IssueType').$el).find('input').css('background-color','#ffcccc')
break;
case 'Software':
$(fd.field('Software').$parent.$el).show();
$(fd.field('IssueType').$el).find('input').css('background-color','#ffffcc')
break;
case 'Monitor':
$(fd.field('MonitorModel').$parent.$el).show();
$(fd.field('IssueType').$el).find('input').css('background-color','#ffccff')
break;
case 'Phone':
$(fd.field('PhoneMake').$parent.$el).show();
$(fd.field('PhoneNumber').$parent.$el).show();
$(fd.field('IssueType').$el).find('input').css('background-color','#ccccff')
break;
case 'Other':
$(fd.field('OtherInfo').$parent.$el).show();
$(fd.field('IssueType').$el).find('input').css('background-color','#ccffcc')
break;
default:
}
}
fd.field('IssueType').$on('change',hideUnneededFields);
hideUnneededFields();
});
The field background colour is set with no trouble, and the fields show/hide as they should, but the code setting the IssueType (dropdown) background seems to be ignored.
Thanks
Nick
@Nick.Jones,
Thank you!
Everything seems fine. Do you see any errors in the browser console(F12)?
Also, please try out this code:
$(fd.field('IssueType').$el).find('input').attr('style', 'background-color: #ffcccc !Important')
Hi @mnikitina
That code didn't work 
I've tried both my and your code in other forms, and both work on text fields, but not on dropdowns.
The console gives me:
sprouter.js:32 Error: No custom routing defined.
at t. (sprouter.js:32)
at sprouter.js:32
at Object.next (sprouter.js:32)
at sprouter.js:32
at new Promise ()
at u (sprouter.js:32)
at t._resolveCustomFunction (sprouter.js:32)
at t. (sprouter.js:32)
at sprouter.js:32
at Object.next (sprouter.js:32)
sprouter.js:32 Error: No form sets found for this content type.
at t. (sprouter.js:32)
at sprouter.js:32
at Object.next (sprouter.js:32)
at sprouter.js:32
at new Promise ()
at u (sprouter.js:32)
at t._resolveFormSet (sprouter.js:32)
at sprouter.js:32
DevTools failed to load SourceMap: Could not load content for https://amcdn.msftauth.net/meInlineBackCompat.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
suiteux.shell.tokenfactoryiframe.a1e498224a42da9a83e9.js:16 GET https://graph.microsoft.com/v1.0/me/photo/$value 404 (Not Found)
t.issueRequest @ suiteux.shell.tokenfactoryiframe.a1e498224a42da9a83e9.js:16
t.process @ suiteux.shell.tokenfactoryiframe.a1e498224a42da9a83e9.js:16
(anonymous) @ suiteux.shell.tokenfactoryiframe.a1e498224a42da9a83e9.js:16
n.acquireToken @ suiteux.shell.tokenfactoryiframe.a1e498224a42da9a83e9.js:28
e.acquireToken @ suiteux.shell.tokenfactoryiframe.a1e498224a42da9a83e9.js:37
e.acquireToken @ suiteux.shell.tokenfactoryiframe.a1e498224a42da9a83e9.js:16
t.handleMessage @ suiteux.shell.tokenfactoryiframe.a1e498224a42da9a83e9.js:16
e.handleMessage @ suiteux.shell.tokenfactoryiframe.a1e498224a42da9a83e9.js:16
e.internalOnMessage @ suiteux.shell.tokenfactoryiframe.a1e498224a42da9a83e9.js:16
activitymonitor.js:211 DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
at Function.ParseAbtCookie (https://statica.akamai.odsp.cdn.office.net/bld/_layouts/15/16.0.21214.12002/activitymonitor.js:182:34)
at Function.Run (https://statica.akamai.odsp.cdn.office.net/bld/_layouts/15/16.0.21214.12002/activitymonitor.js:106:48)
at https://statica.akamai.odsp.cdn.office.net/bld/_layouts/15/16.0.21214.12002/activitymonitor.js:424:32
ParseAbtCookie @ activitymonitor.js:211
Run @ activitymonitor.js:106
(anonymous) @ activitymonitor.js:424
activitymonitor.js:228 Error: Error: Idle tracking cookie is missing.
at IdleSessionActivityMonitor.GetCookieValue (activitymonitor.js:365)
at IdleSessionActivityMonitor.InitializeSettingsFromCookie (activitymonitor.js:349)
at IdleSessionActivityMonitor.GetTimeToNextCheck (activitymonitor.js:313)
at Function.RunISSO (activitymonitor.js:221)
at Function.Run (activitymonitor.js:112)
at activitymonitor.js:424
RunISSO @ activitymonitor.js:228
Run @ activitymonitor.js:112
(anonymous) @ activitymonitor.js:424
DevTools failed to load SourceMap: Could not load content for https://statica.akamai.odsp.cdn.office.net/bld/_layouts/15/16.0.21214.12002/ActivityMonitor.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
And when I change the IssueType, it repeats the cookie error.
Regards
Nick
@Nick.Jones,
I'm sorry, my bad. Please use this code to change the color of the dropdown input:
$(fd.field('IssueType').$el).find('.k-input').css('background-color','#ffcccc')
1 Like
Wonderful, thanks @mnikitina
That works great 
Regards
Nick
1 Like