Add JavaScript & AJAX to PeopleSoft Page

Ajax (asynchronous JavaScript and XML), or AJAX, is a group of interrelated web development techniques used for creating interactive web applications or rich Internet applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.

There are plenty of uses for this technology inside of PeopleTools. For example, in PeopleSoft a full page refresh for a FieldChange event is very expensive. While there is not currently a way to update the component buffer using AJAX, you can use it to grab and display information that would normally require the user to navigate to another page. You can do this without modifying and delivered code.

AJAX frameworks provide the infrastructure required to post data to the server without requiring a full page refresh. Furthermore, AJAX frameworks can update a portion of a page with the results of a server operation. I just finished working on Auto-Save functionality where the push of a button is automatically done every 10 minutes if there is unsaved data on a page.

I use the jQuery library when working with javascript and ajax. jQuery is a new type of JavaScript library. jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

Here are the steps to working with Javascript and AJAX on a page.

Step One:

Since we will be working with a JavaScript library, we need to ensure that we add a call to the JavaScript library somewhere on the page we are working with. This can be done by placing the .js file onto the web server and including it on the page. However, most developers do not have access to the web server and there is an easier way to do this. You can place the JavaScript library code into a message definition. Either way, the first step is to insert an HTML Area object onto the page within Application Designer and attach the object to a record definition and field.


Step Two:

Create a new Message in the PeopleSoft Message Catalog for storing the jQuery JavaScript library. Ideally, you should add a new Message Set Number solely for holding javascript. Once you add a new message set, add a new message. Use the following attributes:

Message Number: Whatever number is the next available
Severity: Message
Message Text: jQuery Library
Explanation: Paste the code from jQuery javascript library.

Step Three:
Create an HTML Definition for the JavaScript code that you are going to inject into your page. This HTML Definition will be used to store the javascript code. We will retrieve the HTML and inject into the HTML Area of the page on the next step. In the HTML Definition, at the very top, add the following code.


Step Four:

On the main component where the page is used, add PreBuild PeopleCode to retrieve the message data and inject it onto the HTML Area of the page. This can also be added to the Page Activate PeopleCode if desired. Here is the code:

// Declare my Variables
Local string &jquery;

// ************************************************
// Use MsgGetExplainText to grab the
// jQuery javascript library
// ************************************************
&jquery = MsgGetExplainText(28000, 1, "message not found");

// ************************************************
// Use GetHTMLText to get the HTML and
// Pass the &jquery string which contains
// the jQuery library code. This will inject it
// onto the HTML area of the page
// ************************************************
DERIVED_HR.HTMLAREA.Value = GetHTMLText(HTML.MY_HTML, &jquery, &jform);

You are now ready to add more javascript to your HTML definition and utilize the jQuery library. Using javascript and AJAX within PeopleSoft applications is very powerful and allows you to add robust features to your applications. I suggest that you start experimenting with AJAX and javascript today.