Altering the DOM (Document Object Model) with Javascript

General Add comments
by:

About me

I’m working in the support area of Service-Now.com. I have a history in Service Management that dates back to the early 90’s of the previous century. I worked on both ends of the line, as customer and as vendor of Service Management solutions.
Back in 2000, we only could dream of the Service-Now solution!

About my Blog post

Service-Now pages are displayed in a browser. All you need to connect to the system is a compliant browser (like IE/Firefox/Chrome or Safari). If you know the output is generated as standard (X)HTML and is accessible through DOM, you also can figure how to adjust (some of) the display characteristics. All you need to do is insert some JavaScript (accessing the DOM) inside the generated web pages, and voila: your output is altered the way you want it!

Remark: the changes discussed here, will be executed only inside your browser. No scripts will be executed on the Service-Now server!

But first I will give you some background on the Document Object Model….

What is DOM?

“The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM (such as its “Elements”) may be addressed and manipulated within the syntax of the programming language in use. The public interface of a DOM is specified in its application programming interface (API).”
(source: Wikipedia)

Ah, so it is cross-platform. That means, it should be available in different brands of browsers on different brands Operating Systems….
Hmm, it also claims to be the way to access elements inside HTML, and even manipulate them!
And it uses the “programming language in use”, which is JavaScript for the browsers we know; we use JavaScript all the time in Servive-Now’s Client Scripts and Business Rules.
That gives us nice possibilities to alter information displayed on screens!

Knowing this, we can start working with the DOM…..

Preparing for working with the DOM

I suggest you prepare yourself with a “good” browser, which supports add-ons or extensions for developing web-pages.
I use Firefox (3.6.x) together with the FireBug 1.6.2 extension.
For the deeper-digger: Web Developer tool bar 1.1.9 is also a nice tool!

Using the tools

The best approach for showing the possibilities is by showing a sample. In this sample we are going to change the layout of the caller field on an incident form. The input box will have a red color font, with a larger size than the other inputs on the form.
We start displaying a form in Service-Now in our browser of choice (FireFox). I suggest we open a link to the demo site (http://demo.service-now.com) where we login as admin (we need the rights to create Client Scripts for this sample).


Illustration 1: The incident form

The form we use is the incident form.

As agreed, we want to change the layout of the input box of the Caller field. For this to work, we will create a Client Script (onLoad), but we need some information before we can make it work.

First, we need the id of the input tag of the caller field.
Using our right-mouse button inside the input box, we can select Inspect Element from the popup menu. Now, the bottom section of our screen displays the generated HTML code.

Illustration 2: Inspect Element

We can see the HTML for the input tag: <input id=”sys_display.incident.caller_id” …. etc. What we need is the id value for this input. In HTML, each id is unique (or at least, has to be). This gives us the right link to the element we want to alter!

In JavaScript, we need to get the object information for the id to alter. In JavaScript, we do this using the getElementById() function:

var obj = document.getElementById(‘sys_display.incident.caller_id’);

Now, the variable ‘obj’ holds the object information for the id we selected!
Changing the style is now as easy as:

obj.style.fontSize=”2em”;
obj.style.color=”red”;

We just did set the font-size to 2em and the color to red!

If we put it all together in a Client Script (type onload), it will look like:

function onLoad() {
//Type appropriate comment here, and begin script below
var obj = document.getElementById(‘sys_display.incident.caller_id’);
//changing the style for this element
obj.style.fontSize=”2em”;
obj.style.color=”red”;
}


If we put this in a (new) Client Script and we display the form again, it should look like:

Illustration 3: New style applied for Caller field

What do you think of that? Was that easy? And, perhaps, useful in one of your future implementations of Service-Now!

Style properties

The style properties are the same as you would use for standard CSS. If the CSS keyword has a – in it, JavaScript will try to do a calculation. That is unwanted behavior. The thing to know is that we don’t use the – character, but write the CSS statement in camelCase.

Example: font-size will be fontSize (as you can see in the sample we just created).

More reading on this subject

More reading on this subject: the Internet is your friend! Here are some useful links:
Document Object Model (DOM): http://en.wikipedia.org/wiki/Document_Object_Model
Cascading Style Sheets (CSS): http://htmlhelp.com/reference/css/
JavaScript: http://www.javascript.com/

Leave a Reply