PeopleSoft Spotlight Series: Developing Fluid Applications

The PeopleSoft Spotlight Series is a video-based learning resource that helps you get a deeper understanding of our latest Oracle PeopleSoft technologies, features and enhancements.

This video discusses the following topics:

• Fluid User Interface Overview 
• Understanding Fluid Application Development 
• Creating Fluid Pages 
• Creating and Registering Fluid Components 
• Touching Up Fluid Applications 
• Additional Resources
  

New in this version are a comparison of fluid to classic and classic plus, updates to the Fluid tab, how to specify values in the component Registration Wizard, setting a default viewport, and the smart phone icon on the Add Tile dialog box.

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!

Disable Peoplesoft radio button using javascript

In my recent development, I need to disable one of three radio buttons based on a condition. The dilemma here is that a radio button is using the same field, so using field property displayonly = True or enabled = False won't work in this sense.

 How do I do this:
 

To something like this (note: catch up below is grayed out):



Here is a step by step work around to disable one radio button using a simple javascript.

1. We need to set a page field name from the radio button properties.  I named this one "ADJ_CATCHUP".
   
   
   
2. Place HTML area to the bottom of the page to make sure that the page had been fully rendered before the javascript being called)
   
   
   
3. Assign Record and Field into the HTML area properties
   
   
   
   
   
4. Create a new HTML definition
   Note: (I use bind variable so I can reuse this HTML code with a different field name or property(true/false)
   
   
   
   
   
5. Place the peoplecode below where you need it.  In my case, I put it in the page activate.
   If &_has_paid_amounts  is True, then it will disable catch up radio button.  Otherwise, enable it.
   
   
   
   
   
6. That should be it.