PeopleSoft Add-on: Mouse over Pop-up

 Using PeopleCode and injected with JavaScript:

PeopleCode Field Class provides a property called HoverText which you can use to display a tooltip/Hover text for any push buttons or hyperlink associated with the field.
To do that you can use something like;

RECNAME.FIELDNAME.HoverText = "This is HoverText Example";

A couple of limitation of using HoverText property:-

·         The maximum length of hover text is 100 characters

·         If the hover text is identical to the push button or hyperlink label, the hover text will not be shown

Steps:

1. Add a field called HTMLAREA to a derived/work record (WORK_REC.HTMLAREA)
2. Add record field (WORK_REC.HTMLAREA) to the page you want to the scroll level 0 (Make sure to reduce the size of the field in App designer and but ensure you can see it on the page). 
3. In Page Activate Event write the below code:-

Note: Within JavaScript block we’ve to write underscore instead of dot marked bold.

Local string &cDoublequote = """";

WORK_REC.HTMLAREA.Value = "<script type=" | &cDoublequote | "text/javascript" | &cDoublequote | " language=" | &cDoublequote | "javascript" | &cDoublequote | ">" | "function yourFunctionName() { document.getElementById(" | Quote("RECNAME_FIELDNAME") | ").title=" | &cDoublequote | "This is the hover text for the RECNAME.FIELDNAME" | &cDoublequote | "; } window.onload = yourFunctionName(); </script>";

JavaScript:- EXAMPLE_JS

//Declare a simple JavaScript function and getElementById document property to get the HTML ID

Function HoverTextExample()

{

document.getElementById('RECNAME_FIELDNAME').title="This is Hover Text Example for the Field RECNAME.FIELDNAME";

}

window.onload=HoverTextExample();

We can also use below code using Field Class property HTMLAttribute:

Local String &Display_String=”This is Comment Displaying”;

Rec_Name.Field_Name.HTMLAttribute=””””|&Display_String|””””;

AddJavaScript(HTML.EXAMPLE_JS);

 

In PeopleSoft tools version 8.53 and higher we can implement deliver Mouse over Option. In HCM Employee Information and in FSCM it is Vendor Information.

Follow the below steps to have your own popup pages:-

Step 1: Create a page with the details you need to be displayed. Make sure the keys of the primary record of this page are also present in the context where you use it.

Step 2: Save the page and set the page type as Popup Page in the page properties.

Step 3: Now open your transaction page and select the field to enable popup. On the Page field properties of the selected field, go to the USE tab and Select Mouse Over Popup Option as Page Popup and provide the page name you have created in the previous step. Make sure all the keys required for the popup page is present in the context.

 

HCM Navigation: Main Menu -> Set Up HCM -> Common Definitions -> Mouse Over Popup -> Mouse Over Page Definition

Add your Target Component Name and use any delivered sub-Page defined to display Employee/Vendor Detail Info like - Name, Title, Dept, Manager Name, Email-id, Phone Number and Address.

Add your Search Record and select the Key’s.

Example of the mouse over popup page.

Details available in PeopleBook:Mouse Over Popups