ServiceNow allows you to modify the CSS style of any field by adding a personalized style. Instructions for performing this customization are outlined on the ServiceNow wiki. There isn’t a built-in way to do this same thing with the fields (variables) in the Service Catalog. Applying styles to service catalog variables is possible however through the use of catalog client scripts. This article shows you how.
This customization really boils down to getting the correct input element on the form and applying the correct CSS style. Because this all needs to be done in javascript, the regular CSS rules you’re used to need to be modified a bit. For example, setting a background color on a field needs to be done with ‘backgroundColor’ instead of ‘background-color’. Hyphens are replaced by a camel-case convention for CSS styles.
To get the form element you can simply use ‘g_form.getControl(VARIABLE_NAME)’. Then you simply apply the correct CSS style like this…
g_form.getControl('').style.width = '150px';
Here are some common styles I’ve seen used in the past…
g_form.getControl('').style.backgroundColor = 'LimeGreen'; //Set the background color of a field
g_form.getControl('').style.color = 'blue'; //Set the text color of a field
g_form.getControl('').style.fontStyle = 'italic'; //Set the text font to italic
g_form.getControl('').style.fontWeight = 'bold'; //Set the text font to bold
Reference fields: A special case
One thing to watch out for is reference fields. The ‘control’ element is actually hidden for all reference fields so using the script above on a reference field will set a style, but that style will be set on an element you’ll never see. For reference fields you need to get the ‘sys_display’ input element. Here’s a sample script that shows how you could do this…
myVar.style.width = '350px'; //Set the width
Putting it all together
The result in the image above was produced by the following catalog client script…
//Set styles for the 'caller_id' variable
var myVar = $('sys_display.' + g_form.getControl('caller_id').id);
myVar.style.width = '350px';
myVar.style.backgroundColor = 'LimeGreen';
myVar.style.color = 'blue';
myVar.style.fontStyle = 'italic';
//Set styles for the 'impact' variable
var myVar2 = g_form.getControl('impact');
myVar2.style.width = '200px';
myVar2.style.backgroundColor = 'yellow';
myVar2.style.color = 'purple';
myVar2.style.fontWeight = 'bold';
}
This works for standard text fields. What’s about textarea fields and the appropriate label.
Good, CSS can now applied to the password field. This doesn’t work in SNC current release.
Thx
Torsten
Textarea fields work the same way as normal fields. Labels (whether in the service catalog or regular forms) aren’t manipulated with styles. Anything you do to labels will have to be done with client script dom manipulation.
Do you have an example how to manipulate labels via dom manipulation?
Only the label text can be easily and consistently manipulated. The background color and width are enforced by the table and corresponding style sheet. If you wanted to change the text for a variable called ‘comments’, you could do it similar to the reference field method above, like this…
var myVar = $('label_' + g_form.getControl('comments').id);
myVar.style.color = 'blue';
myVar.style.fontStyle = 'italic';
Hi Mark,
I want to be able to change the text on a field label – not just the style. For one client, I am using a variable set that is shared between a number of requests. As an example, there is a field called Employee Name, and the client wants this to be “Contractor Name” on a Contract Extension request. I don’t want to declare a set of parallel variables. Is there a way to amend the field label? I can do it in a Client Script by looking for a tagName of LABEL, then setting the innerHTML attribute, but it doesn’t seem to work in a Catalog Client Script.
Brian
I’m not sure if there’s an easier way in the service catalog, but you could get the label element like this and change the innerHTML. Here’s an example that works for a variable named ‘comments’.
myVar.innerHTML = 'Hello World';
Hey Mark,
I can’t seem to get this to work with renaming check boxes in the service catalog. It is working with other types, but it seems checkboxes are “special”. Any suggestions.
They sure don’t make it easy do they? 🙂 Unfortunately, this variable type behaves differently. Be careful with these types of scripts. They’ll break if the underlying structure gets changed in the future. This should work for a checkbox variable.
myVar.innerHTML = 'Hello World';
I’m trying to use this article (Field Styles for Service Catalog Variables) and the one on the Wiki (http://community.service-now.com/forum/5147) to modify the height style of a multi-line text variable on a Requested Item, and not having success. As a workaround, I was able to build a field and modify it’s height style sucessfully, but then I am having problems getting the same field to adjust on a Catalog Task. Here is my code I used in both a Catalog Client and Client Script:
function onLoad() {
var textarea = g_form.getControl(‘special_order_comments’);
textarea.style.height = (textarea.scrollHeight) + “px”;
}
I hope I haven’t embarrased myself with my explaination.
Thanks!
Kevin
Hey Kevin,
Your explanation makes perfect sense. Hopefully my answer will too :). On the catalog item screen you should be able to do the following (which worked in my quick test).
el.style.height = el.scrollHeight + 'px';
On the standard request item and task forms it’s a completely different thing though. Unfortunately, there’s no easy way to get the control of a variable field on a standard form. It’s possible, but looks like it would take some fancy scripting to get to the correct element.
OK, so since I wasn’t able to gain control of a variable on the Requested Items form (which you just confirmed), I created a field (u_special_order_comments) on the sc_req_item table and populate it with the variable value that is entered on the Catalog Item. I used the Client Script mentioned above (with the field name instead of the variable) to change the height of the multi-line text box to fit all the text and it works great. This field is only relative to a specific catalog item, so I need to “hide” this field for any other Requested Item. I created a UI Poicy to do so sucessfully on the Requested Item.
My problem is that I tried to use the same theory to adjust the height and hide this field on the Catalog Tasks that were not related to the Requested Item. Nothing changes – the field’s height is not changed for the Catalog Task and it is visible on all Catalog Tasks. For the Client Script on the Catalog Task table, I have the following:
function onLoad() {
//Resize the ‘Special Order Comments’ field
var textarea = g_form.getControl(‘sc_req_item.u_special_order_comments’);
textarea.style.height = (textarea.scrollHeight) + “px”;
//Hide the original variable
g_form.setDisplay(‘variables.special_order_comments’, false);
}
In my UI Policy, also on the Catalog Task table, I have the condition set as Request item.Item “is” Special Order Item, and the Action is: Field name = request_item.u_special_order_comments and Visible = True
Since neither the Client Script or the UI Policy are having any effect on the Catalog Task, I’m assuming I’m making a basic scripting error. Your patients and explaination are both greatly appreciated.
I’m guessing you’re running into an issue because you need to dot-walk to that field when you’re on a task record. I’m not sure if that’s going to work. I did have time this morning to come up with an onLoad client script that should work though. You should just have to supply the variable LABEL to automatically re-size the variable height on a regular item or task form.
//Get the 'Variables' section
$('variable_map').up('table').select('label').each(function(elmt) {
//Find the label for the textarea variable
if(elmt.innerHTML == varLabel) {
//Find the textarea and change its height to match text
elmt.up('table').select('textarea').each(function(el) {
el.style.height = el.scrollHeight + 'px';
});
}
});
THANKS! That works perfectly. Hopfully someone else will be able to use this as well.
Thanks Mark! This was exactly what I needed.
Hi Guys,
is it possible to give URL to label in service catalog?
For Ex: if i click the priority label, it will go to new window for the information of particular label.
Am not interested to use More information. Any Other Way to do this things
There’s no built-in way to do this. You could probably come up with a client script to hack the label but I wouldn’t recommend it.
Hi Mark ,
I have a question on the catalog variable style..
Have requirement to change the font of catalog variable and color globally ..
Is there any property or script i can use..
There’s nothing I’m aware of to do that globally.
I have styled the service catalogue globally using html tag inside the closing jelly tag on these UI pages:
– catalog_home (styles the SC overview)
– com.glideapp.servicecatalog_cat_item_view (styles recProducer forms and other SC forms – great for ESS iframes)
– com.glideapp.servicecatalog_cart_view (as name suggests, styles the cart view)
Here is the cat item view script I use:
var item = Packages.com.glideapp.servicecatalog.CatalogItem.get(jelly.sysparm_id);
if (item == null)
answer = false;
else
answer = item.canView();
answer;
Not Authorized
TR.io_label TD {
background-color: white;
color: #666666;
font-size: 16px;
font-weight: normal;
}
TABLE.io_table {
border: 0px;
border-spacing: 0;
padding: 2px;
width: 100%;
}
BODY, TABLE, INPUT, SELECT, BUTTON, INPUT.TEXT, TEXTAREA, INPUT.button {
font-family: Arial;
font-size: 12pt;
}
Nice. Just remember to check those pages during each and every ServiceNow upgrade. UI pages and UI macros are probably the highest-risk areas when it comes to potential upgrade problems.
We did that part via mouse over (by using Macro).
Thanks for Reply.
Hi Mark,
I want to call a function from Styles. is it possible to call a function from style values? need to show the background color based on the function returning value.
Please guide me, how to do this?
Hi Mark,
I have check box that I am trying to make bold red in New Hire Service Service Catalog. Your example above works just fine for any text field. But I need to make the check box text (question) bold colored. What would be the code for it? Thanks in advance.
Regards,
Pablo..
The scripts in this article are for setting the styles of the variable inputs themselves. Checkboxes and labels are a little bit different, but they can be targeted through DOM manipulation in the same way. Here are a couple of other examples
g_form.getControl('checkbox').parentNode.style.color = 'red'; //Set the text color of a checkbox option
Wow.. g_form.getControl(‘checkbox’).parentNode.style.color = ‘red’; //Set the text color of a checkbox option
worked perfect. It actually set the label of the checkbox to red which I wanted. Thank you very much for you help.
You are my Guru now.
Hi Mark,
is there any way to change the variables background color globally?
can we define a system property for this as fetching each variable via getcontrol seems to be troublesome as i want each variable which are coming up in ess should have same background color .
Hope there should be some way out.. 🙂
I’ve never seen this done, but if it were possible globally in the instance I think the only real way would be with the CSS Theme Support plugin.
http://wiki.servicenow.com/index.php?title=CSS_Theme_Support
Mark,
We are trying to put a style on a yes/no drop down variable and it isn’t working. This variable is in a variable set, so we’ve tried putting the client script on the variable set and within the catalog item. Neither worked. Have you see this? Is there a reason why it wouldn’t work?
Shouldn’t matter whether it’s in a variable set or not. The script works correctly in all of my testing. My guess is that you’ve got some other conflict in your system. You might check the browser console log to make sure you don’t have other client-side errors breaking the rest of your scripts.
This only seems to work on the Request itself, not on the RITM or CTASKs that also reference the variable. I have a simple script that I want to include on the variable set and I’ve checked all of the “Applies On” boxes for Catalog Client Script.
function onLoad() {
//Set the width of a field
g_form.getControl(‘DocLocation’).style.width = ‘400px’;
}
Is there a way to make this work on the RITMs and CTASKs as well as the original request form?
Looks like Geneva doesn’t like setting the width of catalog item variable. Looking into a fix now
g_form.getControl(‘<name of variable').style["max-width"]='150px';
So far I have tried many of the solutions laid out. We are upgrading to Geneva and are running into an issue where the question_text, of a catalog item, will resize incorrectly on a full screen but will work just fine in a smaller screen. Can anyone help figure this part out? the variable in question is ‘DescriptionFieldInstructions’.
If we are in full page view the question_text will wrap into 5 lines all down the left column. If you go into it as a window, it will fill the full page and look like a long sentence across the page.
It seems that Helsinki breaks the style.width setting on catalog forms. Is there different syntax that needs to be used?
Helsinki continues ServiceNow’s march towards breaking any sort of configuration flexibility in the tool. Very frustrating, but there are still some workarounds you can try. You can try something like this but it might cause other problems with field decorations, etc.
g_form.getControl(‘yourvariablename’).setAttribute(‘style’, ‘width:450px !important’);
Thanks Mark. I’ll give it a try.
Hey Mark,
I’m also working in Helsinki and your suggestion of using the following syntax g_form.getControl(‘yourvariablename’).setAttribute(‘style’, ‘width:450px !important’); doesn’t seem to work. Do you have any other suggestions or new findings? Thanks!
I don’t have any other Helsinki workaround at the moment unfortunately. If anybody else can figure it out I’d love to post a solution here.
This works just fine!
I’ve tried this solution on a ‘select box’ variable type and on a ‘date/time’ variable type and reduced the field size.
Did anyone ever figure this out?
will this work in service portal?
No. g_form.getControl isn’t currently available in the Service Portal scripting API.
Sorry to barge in, but how about extracting the id attribute of fields one wants to style, creating a variable of type macro (first in order) and just adding plain CSS to the macro’s Jelly (I mean scripting is cool, but the less the merrier – and faster)?
Example Jelly:
[code]
input[id=”IO:********************************”] {
background-color: orange;
color: black;
}
[/code]
The „IO:********************************” token could be found by examining the DOM or could be deduced knowing that it is in fact the sys_id of the variable to be styled prepended by the suffix „IO:”.
In case of reference variables one should use the prefix „sys_display.IO:” instead of „IO:”; e.g:
[code]
input[id=”IO:********************************”] {
background-color: orange;
color: black;
}
input[id=”sys_display.IO:********************************”] {
background-color: orange;
color: black;
}
[/code]
Of course this could be enhanced by employing all sort of CSS selectors and pseudo-classes; simple example:
[code]
input[id=”IO:********************************”] {
background-color: orange;
color: black;
}
input[id=”sys_display.IO:********************************”] {
background-color: orange;
color: black;
}
input[id=”sys_display.IO:********************************”]:hover {
background-color: pink;
color: black;
}
[/code]
All of the above works in Helsinki – haven’t tested with other versions.