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.
- 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...
- 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)
- Open a new HTML definition and copy/paste the jQuery code into it and I saved it as Y_JQUERY (name whatever you desire)
- 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)
- 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
- 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)
- Finally, write the page peoplecode to put pieces together and let the magic happens here!
That should be it! Not too bad, huh!