Field Styles for Service Catalog Variables

//Field Styles for Service Catalog Variables

Field Styles for Service Catalog Variables

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…

//Set the width of a field
g_form.getControl('').style.width = '150px';

Here are some common styles I’ve seen used in the past…

g_form.getControl('').style.width = '150px'; //Set the width of a field
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…

var myVar = $('sys_display.' + g_form.getControl('').id); //Get the correct reference element
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…

function onLoad() {
//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';
}
By | 2018-07-09T15:08:46+00:00 December 3rd, 2010|Categories: System UI|Tags: , , |43 Comments

About the Author:

Mark has worked in the IT industry since 2002 and with ServiceNow since 2007. He is the founder and creator of SN | Guru and the co-founder of Crossfuze, one of the worlds leading ServiceNow consulting partners. Prior to co-founding Crossfuze, he worked for ServiceNow as a Senior Architect on the Professional Services team. He has personally led dozens of successful implementations encompassing every part of the ServiceNow platform. He is also responsible for designing and developing groundbreaking ServiceNow solutions and best practices in the form of various applications, turnkey solutions, and integrations during his tenure at ServiceNow, Crossfuze and, of course, SN | Guru. These solutions are used today by ServiceNow administrators and consultants alike in hundreds of ServiceNow instances around the world!

43 Comments

  1. Torsten December 5, 2010 at 10:20 am - Reply

    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

    • Mark Stanger December 5, 2010 at 10:40 pm - Reply

      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.

      • Torsten December 12, 2010 at 2:07 pm - Reply

        Do you have an example how to manipulate labels via dom manipulation?

        • Mark Stanger December 13, 2010 at 12:18 am - Reply

          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…

          //Set styles for the 'comments' variable label
           
          var myVar = $('label_' + g_form.getControl('comments').id);
           
          myVar.style.color = 'blue';
           
          myVar.style.fontStyle = 'italic';
  2. Brian Broadhurst February 21, 2011 at 4:45 am - Reply

    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

    • Mark Stanger February 21, 2011 at 1:30 pm - Reply

      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’.

      var myVar = $('label_' + g_form.getControl('comments').id).select('label')[0];
       
      myVar.innerHTML = 'Hello World';
      • Benjamin March 21, 2012 at 8:07 am - Reply

        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.

        • Mark Stanger March 21, 2012 at 12:29 pm - Reply

          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.

          var myVar = $('ni.' + g_form.getControl('checkboxvar').id).next();
          myVar.innerHTML = 'Hello World';
  3. Kevin Snyder October 20, 2011 at 11:47 am - Reply

    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

    • Mark Stanger October 20, 2011 at 10:47 pm - Reply

      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).

      var el = g_form.getControl('comments');
      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.

      • Kevin Snyder October 24, 2011 at 8:08 am - Reply

        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.

        • Mark Stanger October 24, 2011 at 10:56 am - Reply

          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.

          var varLabel = 'Special Requirements';
          //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';
                });
             }
          });
          • Kevin Snyder October 24, 2011 at 2:30 pm - Reply

            THANKS! That works perfectly. Hopfully someone else will be able to use this as well.

  4. Semhar Yemaneab May 4, 2012 at 1:33 pm - Reply

    Thanks Mark! This was exactly what I needed.

  5. Abdul Fathah October 23, 2012 at 5:19 am - Reply

    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

    • Mark Stanger October 23, 2012 at 6:56 am - Reply

      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.

      • Abhipsa March 7, 2013 at 9:41 pm - Reply

        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..

        • Mark Stanger March 7, 2013 at 9:42 pm - Reply

          There’s nothing I’m aware of to do that globally.

          • Rowan Staveley May 7, 2013 at 6:47 am - Reply

            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 answer = true;
            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;
            }
            • Mark Stanger May 7, 2013 at 6:50 am

              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.

      • Abdul Fathah March 7, 2013 at 11:34 pm - Reply

        We did that part via mouse over (by using Macro).
        Thanks for Reply.

      • Abdul Fathah September 17, 2013 at 7:47 am - 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?

  6. Pablo October 11, 2013 at 11:30 pm - Reply

    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..

    • Mark Stanger October 14, 2013 at 9:51 am - Reply

      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

      $('label_' + g_form.getControl('impact').id).style.color = 'red'; //Set the text color of a label
      g_form.getControl('checkbox').parentNode.style.color = 'red'; //Set the text color of a checkbox option
      • pablo October 14, 2013 at 12:52 pm - Reply

        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.

  7. Khushboo June 15, 2014 at 5:28 am - Reply

    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.. 🙂

  8. Blair August 6, 2014 at 9:16 am - Reply

    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?

    • Mark Stanger August 6, 2014 at 9:57 am - Reply

      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.

  9. Dennis March 3, 2015 at 6:54 am - Reply

    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?

  10. Matthew February 5, 2016 at 9:10 am - Reply

    Looks like Geneva doesn’t like setting the width of catalog item variable. Looking into a fix now

  11. Matthew February 5, 2016 at 10:54 am - Reply

    g_form.getControl(‘<name of variable').style["max-width"]='150px';

  12. John February 16, 2016 at 11:22 am - Reply

    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.

  13. Blair August 24, 2016 at 1:51 pm - Reply

    It seems that Helsinki breaks the style.width setting on catalog forms. Is there different syntax that needs to be used?

    • Mark Stanger August 24, 2016 at 3:48 pm - Reply

      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’);

      • Blair August 25, 2016 at 7:54 am - Reply

        Thanks Mark. I’ll give it a try.

  14. Dave September 20, 2016 at 9:27 pm - Reply

    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!

    • Mark Stanger September 21, 2016 at 6:00 am - Reply

      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.

      • Diogo June 21, 2017 at 2:40 pm - Reply

        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.

    • Dave Edgar May 10, 2017 at 7:33 am - Reply

      Did anyone ever figure this out?

  15. Saran April 24, 2017 at 6:14 am - Reply

    will this work in service portal?

    • Mark Stanger April 24, 2017 at 9:04 am - Reply

      No. g_form.getControl isn’t currently available in the Service Portal scripting API.

  16. János Szentpáli June 9, 2017 at 10:08 am - Reply

    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.

Leave A Comment