Boring or Not So Boring Page, You Decide!

I decided in one of my recent developments to use jQuery in Peoplesoft FAQ page for a sleeker and smoother GUI interaction rather than a boring standard peoplesoft page (you know what I meant ;).  I mainly used the accordion for the FAQs and auto complete for the keyword search.  There are at least more than one way to reference the jQuery library from your peoplesoft page, but I found using the HTML definition is quite simple and easy.

This is what the end result looks like:

• Auto complete function will search all possible FAQs from the search box
• The FAQ's answer will be revealed when the FAQ is clicked and the box will smoothly expand/collapse

Here is what I did...

1. Go to jquery.com and download the jQuery v.1.9.1 and jQuery UI v1.10.3 (pick the version that applied to you)
2. Open a new HTML definition and copy/paste the jQuery code into it and I saved it as Y_JQUERY (name whatever you desire)
   
   
3. Open a new HTML definition and copy/paste the jQuery UI code into it and I saved it as Y_JQUERY_UI (name whatever you desire)
   
   
4. Open a new HTML definition and write a jQuery script (find a lot of code samples in jquery website) and I saved it as Y_ACCORDION_JQUERY (name whatever you desire).
   
   Several things to note are the bind variables that I use as input parameters:
   
   • %Bind(:1) = FAQ data
   • %Bind(:2) = url reference to jQuery library
   • %Bind(:3) = url reference to jQuery UI library
   • %Bind(:4) = array of keyword for auto complete search
   
   
   
    
5. Open a new HTML definition and write a javascript to build the url with appropriate query strings, such as Y_FAQ_ID to determine what FAQ to display from the FAQ setup (not included in this tutorial), RETURN_LNK to determine to return link (not included in this tutorial), and TAGS (the field name from the edit box#2 to get the keyword for the search)
   
   
    
6. Create a page definition.  Add HTML #1 (FAQs page w/ jQuery Accordion Style), edit box field (search box), and HTML#3 (search button for auto complete)
   
   
   
   
   
   • HTML area #1
     
   •  Name the page field "TAGS" to the edit box #2
     
   • HTML area #3
     
7. Finally, write the page peoplecode to put pieces together and let the magic happens here!
   
   
   
   That should be it!  Not too bad, huh!