ERP Associates, Inc.

Solutions for People and their Software

skip to menu
skip to primary content

Search an External System w/ JavaScript

05 Mar 07
Written by <a href='/profile.html?userid=65'>Brent Martin</a>
Share Article
Text Size:
Print

One of my recent clients had a web-based document image repository where they stored images of invoices, sales contracts, and the like. Since they were implementing a new PeopleSoft release, they wanted to be able to click an invoice from PeopleSoft and see the document image.

The nice thing was that the document image repository was web based and all of the documents could be accessed by a URL. The difficult part was the URL had to include a document ID, a value that was internally generated by the digital image repository that PeopleSoft had no knowledge of. The other challenge was that the document image repository assigned a separate document id to each page in the invoice so there wasn't a one-for-one match between a document in PS and a document in the repository.

Another challenge was that the digital image repository didn't provide any web services on the back-end. Our program would have to access it through the same web interface that users did.

If a user were to view an image through the digital image repository they would have to log on, go to the search page, search by invoice ID, and click on an entry in the search results to bring up that page of the document.

After some discussion, we decided that the best way to handle this would be to provide a hyperlink from PeopleSoft that would open a new window, post the invoice number as part of the search criteria to the Document Image web server, and the digital image server would process the request as if a user entered the search and show the search results. From there the user would just have to click on the page of the document they wanted to view.

In this article I'll show you what we did to make it work. Hopefully it will give you ideas about how to customize PeopleSoft to get context-sensitive information from external systems.

The Design

The solution we came up with had three parts:

1) Create a second form on the PeopleSoft page which posts to the digital image repository. Include the input variables that the digital image repository's search form uses, and set the target to "_blank" which will make it open in a new window.

2) Create a button on the PeopleSoft page next to the invoice number. Set an OnClick event which launches a Javascript program that will set the docType and Invoice Number on our new form and submit it.

3) When a user clicks on the button, the search results for the invoice digital image would then magically appear in the pop-up window.

The only problem would be if the user wasn't alread logged in to the digital image repository it would present them with a signin page before they'd see the search results. This wasn't seen as a big deal.

The Analysis

The first thing I did was to figure out what the post form actually posted to the server when a user did a search manually. To do that I had to capture the HTTP headers. I used the Firefox Live HTTP Headers extension, but if you're an IE user you can get HTTP Watch.

From looking at the headers, it wasn't difficult to see that I'd have to set DocType to "Invoice", and FormItemByID the Invoice Number from PeopleSoft.

The Coding

Now I was ready to build the solution. Adding custom HTML to a PeopleSoft page is as simple as opening the page, inserting an HTML area, and plugging it into the HTML Area properties.

My challenge was that no matter where I inserted the HTML area on the page in App Designer, it was nested within the form for the PeopleSoft page. I needed to create a new form object outside of the PeopleSoft form so that it could be submitted to a different server.

After a lot of trial and error, I decided that I'd have to write a Javascript program to programatically build the form since I couldn't create an HTML area on the section of the page where I needed it to. The Javascript program would then insert the form just after the "Processing" message in the upper right corner.

So here's the Javascript code I used:

The first If/Then checks to see if the form already exists on the page. If not, it'll build it, otherwise it just changes the document type and invoice number in the input variables.

The first step in building the form is to create a new document element

var myform=document.createElement("form");

Then define some of the basic properties for the form.

      myform.method='post';
      myform.action='https://www.edocs.com/drs/searchformaction.do';
      myform.target='_blank'; //Post the results in a new window
      myform.id = "myform"

Create hidden input types (we want this form to be invisible to the user) with information from the PeopleSoft page:

       var doctype = document.createElement("input");
      doctype.type = "hidden";
      doctype.name = "docType";
      doctype.value = "2";
      myform.appendChild(doctype);

      var searchkey = document.createElement("input");
      searchkey.type = "hidden";
      searchkey.name = "formItemByID[6].value";
      searchkey.value = "157800903";
      myform.appendChild(searchkey);

Finally, insert the new form to an object in the PeopleSoft page. I decided to insert it right after the "Processing" message since it was outside the main form, and it had a handy ID property defined that I could easilly access with getElementByID.

       var attachpoint = document.getElementById("WAIT_win0");
      //attachpoint.parentNode.replaceChild(myform, attachpoint);
      attachpoint.appendChild(myform, attachpoint);
      myform.submit();

It all fit nicely in the HTML area -- the grey box on the page:

PeopleSoft Page, the mouse is overing over the HTML Area

To call the function, I added a button on the page and associated it to a derived work record. I associated the button to a field called "URL" on a derived work record. I set the button type to External URL. Then I added some RowInit PeopleCode to set the value of the URL to something like "javascript:newform('DERIVED_XX.DOCTYPE','DERIVED_XX.INVOICE');"

Screen shot of the push button

Now when a user clicks the button, it'll call the Javascript function which will build a hidden HTML form on the page with the search parameters and submit the form it to the external server in a new window. The search will run in the new window and a list of documents that are related to the invoice the user was viewing in PeopleSoft will appear.

Search Results