AJAX and PeopleSoft

After Ethan sent me the link to the PeopleSoft Auto-Save with Ajax post on the ITToolbox site I was inspired to try AJAX on a PeopleSoft page (and excited to try the jQuery library for the first time as it looked very cool). The blog post on the ITToolbox site had some great javascript code, but offered no details on how the whole thing was put together. Below are the exact steps I took to add AJAX to a page in PeopleSoft.

Before I get started I want to point out that I decided against trying the auto-save feature. While I think that this type of feature would be extremely useful in some use cases, I feel the Component you implement it with must be designed for it. Auto-saves should be saved as drafts and should not effect the current data stored in the tables. When the user actually clicks some sort of Save button, only then should the auto-saved data replace the data that existed before.

To simply my AJAX/PeopleSoft experience I decided to just create a dynamic DIV on an existing page. The DIV is updated periodically by sending an AJAX request to an IScript function which returns HTML that is placed directly into the DIV. This was done with PeopleTools 8.46.17.

Step 1.

I opened the Page I wanted to AJAX-ify and added an HTML Area control to the top of the page (specifically I added DERIVED_PTP.HTMLAREA).

Step 2.

I downloaded jQuery 1.2.1. I grabbed the "packed" version which is the smallest weighing in at only 26kb. As the ITToolbox entry hinted at, I tried adding the downloaded contents to an HTML object. However, when I tried to save the object in Application Designer I got the following error:

Object size exceeds 32K limit. Proceed with Save?

It let me save it anyway so I named the HTML object FR_JQUERY. When I opened up the page I received several javascript errors and when I looked at the cache javascript file that was created I found it was truncated. This happened when I used the code from the ITToolbox site:

<script src="%JavaScript(FR_JQUERY)"></script>

In order to make it work I added the contents of the packed jquery.js to a Message Catalog Entry (more details below).

Step 3.

I created an HTML object named FR_ISSUE_LOG_SRCH_DHTML with my code and a bind variable that I would later replace with the jQuery library. Here's the HTML object code:

FR_ISSUE_LOG_SRCH_DHTML HTML Object

<div id="new-issues">
</div>

%Bind(:1)

<script type="text/javascript">
var pollInterval = 15000;
function getIssues()
{
$("#new-issues").load("/psc/pshome/.../WEBLIB_..IScript_...");
setTimeout("getIssues()", pollInterval);
}

getIssues();

$("#new-issues").css({
left:"600px",
position: "absolute",
width: "250px",
fontSize: "9px",
padding: "2px",
}); 
</script>

Step 4.

On the Page Activate event I added the following code to populate the HTMLAREA field I had previously added to the Page.

Local string &jquery = MsgGetExplainText(31000, 3, "message not found");
DERIVED_PTP.HTMLAREA.Value = GetHTMLText(HTML.FR_ISSUE_LOG_SRCH_DHTML, &jquery);

What is noteable here is that the entire contents of the jquery.js file are stored in the Message Catalog and placed in the HTMLAREA using the %bind(:1) substitution variable. In our environment we can not easily added files to the webserver directory, so this provided a nice solution that did not require me to add any files to the webserver.

Step 5.

Finally, I created an IScript function that simply does a SQL Fetch for all rows entered in our custom table for the particular user viewing the page.

This was just an experiment on my part and only rates a 1 out of 10 on the coolness meter. My primary motivation was just to see how feasible it was to use AJAX on a PeopleSoft page. I was quite happy to find that it was easier than I expected (save for my little issue with placing the jquery.js code on the page). Also, I was able to dabble a lot with jQuery and find that it makes DOM manipulation and AJAX very easy and I will find a use for it in my next project.

Unlike the ITToolbox post, I was not attempting to interact with the component processor. Trying to involve actions by submitting the form information to the component processor and doing partial page updates is fairly complex and in my opinion looks like it can be prone to error. For the next couple of projects I think I'll stick to IScript type page refreshes to build my comfort level until a point when I am ready to do field validation and auto-saves.

Ajax autocomplete for PeopleSoft page field

I had to write a simple page recently where users would enter time spent on volunteer work. One of the fields they would enter would be the name of the organization. Since the organization could be anything there no requirement to build a setup table of valid organizations. However, in order to try to keep consistent, it seemed like a good idea to provide an autocomplete feature.

As the user types in the name of the organization (after the first 2 characters are entered), an ajax call is made in order to get a list of all organizations (up to 50) that exist already in the database that have the same first 2 characters. The user can choose to select one of the suggested values or continue typing whatever they like.

This feature was implemented by using the following:

1. HTML Object

You first need to grab a copy of jquery and the jquery autocomplete libs (see google) and place them on the PIA web server. The HTML object takes a couple bind parameters: 1) Page field name, 2) Ajax URL (a WEBLIB, see below) that returns suggestions for the autocomplete, 3) Ajax URL to post additional suggestions to (i.e., values changed in buffer), 4) Message Catalog message set number, 5) Message Catalog message number.

A little more on some of these. The addition Ajax call noted in #3 above is for those situations were the user may add values that only exist in the buffer. Since the WEBLIB function in #2 only returns database values, there needs to be some way to capture values entered in the buffer so they too can be displayed as suggestions. Items 4 and 5 need to point to a message catalog number that contains the sql statement the WEBLIB in #2 will use to return the list of suggestions. For example:

select distinct org_name from ps_volunteer where org_name like :1 || '%'

The sql statement will receive a single bind parameter, and that parameter will be the first few characters of what was entered in the field on the page.

Here is the HTML object code:

<link rel="stylesheet" type="text/css" href="/common/js/jquery.autocomplete.css" />
<script type="text/javascript" src="/common/js/jquery.js"></script>
<script type="text/javascript"  src="/common/js/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('input[name^="%BIND(:1)"]').autocomplete(
"%BIND(:2)",
  {
   delay:10,
   minChars:2,
   matchSubset:1,
   matchContains:1,
   cacheLength:10,
   autoFill:true,
   extraParams:{m1:%BIND(:4), m2:%BIND(:5)}
  }
 );
    $('input[name^="%BIND(:1)"]').blur( function() { 
  $.post("%BIND(:3)", 
    { s: $(this).val() } );
    } );
});
</script>

2. Add the HTML to the page

Now it's time to add the HTML code above to the page that contains the field you want to add autocomplete to. First, I added an HTML control to the bottom of the page in app designer. Then, in order to make this somewhat reusable I created an application class that I call in page activate peoplecode to populate the HTML field.

Here is the page activate code:

import FR_AJAX:Suggestion;

Local FR_AJAX:Suggestion &ajax = create FR_AJAX:Suggestion();

HR_LINK_WRK.HTMLAREA1.Value = &ajax.GetPageJavaScript("ORG_NAME", 31751, 12);

Here is the app class code:

class Suggestion
   method GetPageJavaScript(&pageFieldName As string, &messageSet As number, &messageSetNbr As number) Returns string;
end-class;

method GetPageJavaScript
   /+ &pageFieldName as String, +/
   /+ &messageSet as Number, +/
   /+ &messageSetNbr as Number +/
   /+ Returns String +/
   Local string &urlGetSuggestions = GenerateScriptContentRelURL(%Portal, %Node, Record.WEBLIB_FRAJAX, Field.ISCRIPT1, "FieldFormula", "IScript_Suggest");
   Local string &urlAddSuggestion = GenerateScriptContentRelURL(%Portal, %Node, Record.WEBLIB_FRAJAX, Field.ISCRIPT1, "FieldFormula", "IScript_AddToSuggestions");
   Local string &ajax = GetHTMLText(HTML.FR_AJAX_SUGGEST, &pageFieldName, &urlGetSuggestions, &urlAddSuggestion, &messageSet, &messageSetNbr);
   Return &ajax;
end-method;

3. WEBLIB code for the Ajax calls

Finally, here is the code that returns the suggestions for the autocomplete and also adds suggestions that aren't in the db to the list of suggestions.

Global array of string &fr_ajax_suggest_in_buffer;

Function IScript_Suggest()
   Local string &query = %Request.GetParameter("q");
   Local string &message_set = %Request.GetParameter("m1");
   Local string &message_nbr = %Request.GetParameter("m2");
   
   If None(&query, &message_set, &message_nbr) Then
      Return;
   End-If;
   
   %Response.SetContentType("text/html");
   
   If &fr_ajax_suggest_in_buffer <> Null Then
      Local number &i;
      For &i = 1 To &fr_ajax_suggest_in_buffer.Len
         Local string &s = &fr_ajax_suggest_in_buffer.Get(&i);
         If Lower(&s) <> Lower(&query) And
               Find(Lower(&query), Lower(&s)) = 1 Then
            %Response.WriteLine(&s);
         End-If;
      End-For;
   End-If;
   
   Local string &sqlText = MsgGetExplainText(Value(&message_set), Value(&message_nbr), "");
   Local SQL &sql = CreateSQL(&sqlText, Lower(&query));
   Local array of string &suggestions = CreateArrayRept("", 0);
   Local string &suggestion;
   While &sql.Fetch(&suggestion)
      &suggestions.Push(&suggestion);
   End-While;
   &sql.Close();
   
   Local number &j;
   For &j = 1 To &suggestions.Len
      If &fr_ajax_suggest_in_buffer = Null Then
         %Response.WriteLine(&suggestions.Get(&j));
      Else
         If &fr_ajax_suggest_in_buffer.Find(&suggestions.Get(&j)) = 0 Then
            %Response.WriteLine(&suggestions.Get(&j));
         End-If;
      End-If;
   End-For;
   
End-Function;

Function IScript_AddToSuggestions()
   Local string &suggestion = %Request.GetParameter("s");
   If All(&suggestion) Then
      If &fr_ajax_suggest_in_buffer = Null Then
         &fr_ajax_suggest_in_buffer = CreateArrayRept("", 0);
         &fr_ajax_suggest_in_buffer.Push(&suggestion);
      Else
         If &fr_ajax_suggest_in_buffer.Find(&suggestion) = 0 Then
            &fr_ajax_suggest_in_buffer.Push(&suggestion);
         End-If;
      End-If;
   End-If;
End-Function;

IRC still alive and well

It had been a long time since I'd been on Internet Relay Chat (the real IM), so the other night I fired up Chatzilla and checked out a few channels like #jquery, ##java, ##linux and saw quite a bit of conversations taking place. If anyone reading this knows of good channels related to things like Java, general open source, portals, or enterprise development please drop a comment.