- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎12-30-2018 02:27 PM
Hello all,
I'm having some trouble with field styles.
I have two fields on a table, both of type 'Decimal'. I would like 'u_my_field1' to have a light green background on the form if it has a value less than or equal to that in 'u_my_field2'.
I've created a field style with this condition (value):
javascript: parseFloat(current.getValue('u_my_field1')) <= parseFloat(current.getValue('u_my_field2'))
I'm looking at an example record where 'u_my_field1' = 2.2, and 'u_my_field2' = 15.78, but the value is not being returned as TRUE (or at least, the field style is not showing). If I remove the condition (value) from the Field Style completely, the field style does show on the field on the form (ie the background is light green). Any thoughts on this?
Solved! Go to Solution.
- Labels:
-
User Interface (UI)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎12-31-2018 12:04 AM
On Form, the field styles dont work. They are for the list views. You need to write an onLoad or onChange client script to make this possible.
OOB, SN has used an onChange client script to highlight a caller as VIP on the Form. This is implemented by a client script named "Highlight VIP Caller".
Here is its link
https://instance_name.service-now.com/nav_to.do?uri=sys_script_client.do?sys_id=8f0b3ee00a0a0b5700e75f4aaabe4953
Replace instance_name with yours.
You need to create a similar client script for your logic. Sample script i have added here for your case, it may need modifications according to your styles and requirement.
function onLoad(){
//Replace field_name at where you need to display this icon
var Label = $('label.incident.field_name').down('label');
var Field = $('sys_display.incident.field_name');
if (!Label || !Field)
return;
}
if(parseFloat(g_form.getValue("u_my_field1")) <= parseFloat(g_form.getValue("u_my_field2")){
var bgPosition = "95% 55%";
if (document.documentElement.getAttribute('data-doctype') == 'true')
bgPosition = "5% 45%";
//Apply your required CSS here - This is a sample one
Label.setStyle({backgroundImage: "url(images/icons/vip.gif)", backgroundRepeat: "no-repeat", backgroundPosition: bgPosition, paddingLeft: '30px' });
Field.setStyle({color: "red"});
} else {
//Reset CSS if condition fails
Label.setStyle({backgroundImage: ""});
Field.setStyle({color: ""});
}
}
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎12-30-2018 10:21 PM
Are you trying to do this on a list view or a form? I see you have mentioned form initially.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎12-30-2018 11:47 PM
Yes I'm trying to do this on a form.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎12-31-2018 12:04 AM
On Form, the field styles dont work. They are for the list views. You need to write an onLoad or onChange client script to make this possible.
OOB, SN has used an onChange client script to highlight a caller as VIP on the Form. This is implemented by a client script named "Highlight VIP Caller".
Here is its link
https://instance_name.service-now.com/nav_to.do?uri=sys_script_client.do?sys_id=8f0b3ee00a0a0b5700e75f4aaabe4953
Replace instance_name with yours.
You need to create a similar client script for your logic. Sample script i have added here for your case, it may need modifications according to your styles and requirement.
function onLoad(){
//Replace field_name at where you need to display this icon
var Label = $('label.incident.field_name').down('label');
var Field = $('sys_display.incident.field_name');
if (!Label || !Field)
return;
}
if(parseFloat(g_form.getValue("u_my_field1")) <= parseFloat(g_form.getValue("u_my_field2")){
var bgPosition = "95% 55%";
if (document.documentElement.getAttribute('data-doctype') == 'true')
bgPosition = "5% 45%";
//Apply your required CSS here - This is a sample one
Label.setStyle({backgroundImage: "url(images/icons/vip.gif)", backgroundRepeat: "no-repeat", backgroundPosition: bgPosition, paddingLeft: '30px' });
Field.setStyle({color: "red"});
} else {
//Reset CSS if condition fails
Label.setStyle({backgroundImage: ""});
Field.setStyle({color: ""});
}
}
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎12-31-2018 11:25 AM
Ah, I see! Thank you for this detailed answer.
Jamie