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.
You can add this script snippet to any client script. Just change the ‘backgroundColor’ variable to the color of your choice!
//Change the color of all form section headers
var backgroundColor = 'red';
$$('.navbar').each(function(elmt) {
elmt.style.backgroundColor = backgroundColor;
});
}
good post Mark.
Thanks Glenn! I appreciate he feedback.
I am not following can you provide some context on where you got this to work?
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?
Hi mark
Can i have a 2 logo on banner instead of banner text… 1 logo at left and 2 logo at extreme right????
It’s probably possible, but I’m not aware of a way to do that off the top of my head.
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.
You should just have to target the first element returned in the array like this…
$$('.header')[0].style.backgroundColor = backgroundColor;
Works Amazing. Can you please tell me the meaning of this line
$$(‘.header’)[0].style.backgroundColor
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/
Thanks much for the replies. I am getting now.
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/]
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.
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.
after: ' - ' + g_form.getValue('number')
});
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 😉
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://servicenowguru.wpengine.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;
}
Thanks!
It Worked.
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
I’ve updated the article above with a new solution. Check it out and let me know how it goes.