Accessing DOM objects in PeopleSoft pages

I was developing a custom tool  in PeopleSoft where I had to display a widget containing appraisal ratings, compensation details etc., for a particular employee. The widget itself was developed using HTML and Javascript. So I placed an htmlarea in my PeopleSoft page and poured in the widget code. The widget used a level-1 grid as data source.

Sample data in Grid

Appraisal Year Mid-Year Year-End
2007 2 2
2008 1 2
2009 3 2
2010 1 1

Before proceeeding any further, let’s have a peek into DOM. For people who are not familiar with Document Object Model (DOM), it is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. To identify the HTML tags behind objects in the PeopleSoft page, I used Firebug (Web Development Tool). Firebug made it simple to find HTML elements buried deep in the page.

Objects in a page can be accessed using:

    1. getElementById – This function is used to get the objects in page based on its id attribute.

For example, an Employee id field on PeopleSoft page might be represented in HTML as

<input id="“XX_APP_EMPLID”" class="PSEDITBOX" type="text" name="“Emplid”" value="“KU0007”" />

The value in “Emplid” field can be accessed by javascript as below. Note that the parameter to getElementById function has to be the value of “id” attribute.

document.getElementById("XX_APP_EMPLID”).value;
  1. getElementByTagName – This function is used to get the objects in page based on its tag name.
<input id="“XX_APP_EMPLID”" class="PSEDITBOX" type="text" name="“Emplid”" value="“KU0007”" />
document.getElementByTagName("input”).value;

getElementByTagName restricts you to access only one HTML element at a time. What if you want to iterate through all “input” tags in the page? getElementsByTagName (note the ‘s’ in Elements) functions allows you to do just that.

Now, how do I access data in a grid in PeopleSoft page?

I knew how to get values from my page fields using getElementById function, however when I tried to use the same function for reading data from my grid:

document.getElementById("GET_ROWS").onclick = function(){
alert(document.getElementById("XX_APP_RATING$3”).value);
}

With the code above, I intended to display the value of grid’s first cell (row 1, col 1). The first cell is identified by id “XX_APP_RATING$3”, which I discovered by inspecting the HTML source code using Firebug.

Instead of displaying the value the alert message returned an “undefined” value.

Cracking the Grid

All the data within the grid can be read as array elements in javascript using the getElementsByTagName function. So the onclick function is re-written as:

document.getElementById("GET_ROWS").onclick = function(){
var x = document.getElementById("XX_APP_ RATING$scroll$0").getElementsByTagName("tr");
// Note: Each row in the grid is organized in
tag of the grid object
 }

Now the variable x will contain all the rows from the grid XX_APP_DATA. To access each individual data from the grid rows,

for(var i=0;i     		// Read through each row
                    	var y=x[i].getElementsByTagName("span");
     		// Note: The  tag will contain all the individual cells in the grid
 }

Putting all the pieces together, the complete javascript code to iterate an entire grid is:

document.getElementById("GET_ROWS").onclick = function(){
var x = document.getElementById("XX_APP_ RATING$scroll$0").getElementsByTagName("tr");
  for(var i=0;i // Read through each row
              var y=x[i].getElementsByTagName("span");
// Note: The  tag will contain all the individual cells in the grid
 for(var j=0;j // Read each column in the ith row.
 var td_data = y[j].id;
 var td_data = td_data.replace("XX_APP_ RATING_","");
 var td_data = td_data.substr(0, td_data.indexOf("$"));
 alert(td_data + " = " + y[j].innerHTML);
 }
 }
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: