Change Form Header Background Color

///Change Form Header Background Color

Change Form Header Background Color

J

ust a quick scripting tip today based on a solution that I helped someone with on the ServiceNow community site. The request I received was to be able to change the form header background color based on changes to values in a record. You’re probably aware that ServiceNow provides a global CSS property to set the form and list header color. This is usually one of the first things that gets customized during a deployment. The global property can be found by navigating to System Properties -> CSS, and changing the ‘Banner and list caption background color’ property.

This request required something more dynamic so that the color could change based on specific table and record values and specific changes to a specific form. In order to accomplish this, I came up with a simple client script that can be used anywhere you need it.

Red Header Background

This same idea can be applied to form buttons as well. Check out this article to find out how!

You can add this script snippet to any client script. Just change the ‘backgroundColor’ variable to the color of your choice!

function onLoad() {
   //Change the color of all form section headers
   var backgroundColor = 'red';
   $$('.navbar').each(function(elmt) {
      elmt.style.backgroundColor = backgroundColor;
   });
}
By | 2018-07-09T14:59:55-06:00 January 11th, 2012|Categories: Client scripts|Tags: |18 Comments

About the Author:

18 Comments

  1. Glenn Pinto January 18, 2012 at 12:11 am - Reply

    good post Mark.

    • Mark Stanger January 18, 2012 at 4:08 am - Reply

      Thanks Glenn! I appreciate he feedback.

  2. Matt March 13, 2012 at 8:00 am - Reply

    I am not following can you provide some context on where you got this to work?

    • Mark Stanger March 13, 2012 at 8:36 am - Reply

      Not sure what you’re looking for specifically, but I just implemented a simple case on the ServiceNow demo site. If the priority field value changes to ‘1’ then the form header color changes to red. It seems to work fine there. Can you describe the issue you’re having? Can you reproduce the issue on a ServiceNow demo instance?

  3. akshat chawla June 20, 2012 at 12:38 pm - Reply

    Hi mark

    Can i have a 2 logo on banner instead of banner text… 1 logo at left and 2 logo at extreme right????

    • Mark Stanger June 20, 2012 at 3:30 pm - Reply

      It’s probably possible, but I’m not aware of a way to do that off the top of my head.

  4. Mike Suda December 31, 2013 at 1:23 pm - Reply

    How do you change the background color of the first (main) section header? I would like to be able to change the main header dk red when the incident has been closed.

    • Mark Stanger December 31, 2013 at 7:41 pm - Reply

      You should just have to target the first element returned in the array like this…

      var backgroundColor = 'red';
      $$('.header')[0].style.backgroundColor = backgroundColor;
      • Paramahanns January 23, 2014 at 7:35 am - Reply

        Works Amazing. Can you please tell me the meaning of this line
        $$(‘.header’)[0].style.backgroundColor

        • Mark Stanger January 24, 2014 at 5:36 am - Reply

          That’s javascript prototype CSS selector syntax. Basically it’s saying “find all elements on the page that have a CSS class named ‘header’, give me the first element in that array, then change the background color. CSS selectors are very helpful, especially in ServiceNow since it contains the prototype library by default.
          http://prototypejs.org/doc/latest/dom/dollar-dollar/

  5. paramahanns January 26, 2014 at 9:32 am - Reply

    Thanks much for the replies. I am getting now.

  6. Taco Dols January 29, 2014 at 1:20 am - Reply

    Hi Mark,

    As a small add-on to the example above, fields may become mandatory on one of the section tabs on the form that is not the active one one the foreground.
    If you want to color the tab itself, and not just the header bar underneath the tab, you can use:

    [code]
    var tabs = document.getElementsByClassName(‘tabs2_tab’);
    tabs[1].style.backgroundColor = ‘red’;
    [code/]

  7. Tim March 24, 2014 at 1:56 am - Reply

    Hi,

    first thanks for all those great solutions. I have one question though. Is there a possibilty to change the content of the form header? I´m thinking of the Task number as an example.

    • Mark Stanger March 24, 2014 at 7:32 am - Reply

      As long as there’s a consistent form header element that can be targeted, it’s possible. In this case, it’s pretty simple. Here’s some sample code that grabs the ticket number and places it in the header. Just add it to an ‘onLoad’ script or any other place you want to add it.

      $('mandatory_explained').insert({
          after: ' - ' + g_form.getValue('number')
      });
      • Jef De Coster April 1, 2015 at 3:07 am - Reply

        Hi all,
        I’ve build some functions you could use to manipulate elements.
        As an example I used the fixed element insert as shown by Mark in his reply dd 24/03/2014

        Hope this helps out some of you 😉

        /* using document construct as is:
        You can of course use other elements as well,...
        But for the purpose of this script we are just manipulating the form_header content.

         class= "form_header"
          |
          |---  class="pointerhand" (eg. Change Request)
          |   |
          |   |---  class="section view" (eg.  [Action Request view])
          |
          |---  class="mandatory_explained"
          |   |
          |   |---     
          |   |---  class="mandatory" ( )
          |   |---  id="section508_mandatory_explained"
          |   |---   = Required field

        We will use this class structure to add / modify the content
         */

        /* example : based on Mark stranger insert after example on https://www.servicenowguru.com/scripting/client-scripts-scripting/change-form-header-background-color/

        Instead of directly pointing to the 'mandatory_explained' we could use the function as below (and could reuse it for other elements..
        --------------------------------------------------
        Thus instead of :
        --------------------------------------------------
        $('mandatory_explained').insert({after: ' - ' + g_form.getValue('number')});
        --------------------------------------------------
        We could do something like this:
        --------------------------------------------------
        var targetEl = 'mandatory_explained';
        var strInsert = ' - ' + g_form.getValue('number');
        insertAfterElement(targetEl, strInsert);
        ------------------------------------------------------------------------------------------------------------------------------------
        Of course like this the variables can be placed in a loop on top of an array of elements, and so on,...
        Making it a little bit more versatile.
        I'll use checks on view and change request type for example to set a certain string (combined out of number etc))
        I'll also build in a get and check on elements innerHTML using the getElementContent function,
        which you could handle (substring, trim, replace in the string itself,...) (retaining some parts of it and just replaced some stuff in it,..)
        After which you could replace the innerHTML with your new string
        using the replaceElementContent function ;-)
        /* The Functions we can use // author JDC */

        function hideElement(targetEl){
            $(targetEl).hide();
        }
        function insertAfterElement(targetEl, strInsert){
            $(targetEl).insert({after: strInsert});
        }
        function insertBeforeElement(targetEl, strInsert){
            $(targetEl).insert({before: strInsert});
        }
        function replaceElementContent(targetEl, strReplace){
            $(targetEl).replace(strReplace);
        }
        function removeElement(targetEl){
            $(targetEl).remove;
        }
        function getElementContent(targetEl){
            var returnContent = $(targetEl).innerHTML;
            return returnContent;
        }
  8. Deepika April 2, 2015 at 6:10 am - Reply

    Thanks!
    It Worked.

  9. Ted Norlander October 6, 2016 at 12:35 am - Reply

    Hi,

    I’m trying to set the background color for forms in UI16.
    I tested the approach you suggested here for an older version and it changes the background color of all buttons on the header but not the header itself.
    What syntax should I use to address the background of the header in a form in UI16?

    Very thankful if you can help med out.

    Best regards

    Ted

    • Mark Stanger October 6, 2016 at 6:31 am - Reply

      I’ve updated the article above with a new solution. Check it out and let me know how it goes.

Leave A Comment