The PeopleSoft Tipster Blog

Interacting client-side JavaScript with server-side PeopleCode April 16, 2014

This week we have a guest-post from Richard Yip. Richard is a PeopleSoft HCM & Payroll Technical Consultant at Santander Bank here in the UK. He is a long-term PeopleSoft techie and a regular at the UKOUG conferences.  I’m delighted to be able to give him a conduit through which to share some of his good work.

Richard Yip: How to interact client-side Javascript with server-side PeopleCode

(using getElementById.focus(), getElementById.submit(), submitAction_win0(this.form,this.name) and window.showModalDialog)

This example shows a custom built payroll results calendar which allows the user to display multiple sets of payroll results information on a single page, without needing to navigate out of the page as is currently delivered.

Additionally, it allows the display of related information such as payslip and 12 Months Fiscal Summary (pivoted summary results).

Note: results have been “desensitized” .

Something that looks like this:

Click for bigger

The App Designer page, PeopleCode, SQL, JavaScript, CSS and HTML are shown below. The HTML/CSS were initially prototyped using Microsoft Office SharePoint Designer.

Screen shots

Main page after selecting an employee from a search page. 

The menu bar above is created by HTML.RY_GP_RSLT_CAL_PIVOT_SQL_HDR

The following codes are used: –

PeopleCode :
DERIVED_RY_GP10.HTMLAREA2.RowInit
SQL:   HTML.RY_GP_RSLT_CAL_PIVOT_SQL
HTML:  HTML.RY_GP_RSLT_CAL_PIVOT_SQL_HDR
HTML:  HTML.RY_GP_RSLT_CAL_PIVOT_SQL_DTL

Displaying the results calendar

When ‘Show Calendar’ is clicked, the payroll results for this calendar are now visible. See function Show_Calendar() and Hide_Calendar() in Javascript collection in HTML.RY_GP_RSLT_CUSTOM_JS.

Click for bigger

Displaying the payroll results information

When then user clicks on any Calendar ID, highlighted in red, the PeopleCode is invoked via client side JavaScript.

To invoke PeopleCode, I used the javascript DOM method – see function do_calid(obj) in GetHTMLText(HTML.RY_GP_RSLT_CUSTOM_JS)

document.getElementById("DERIVED_RY_GP10_DETAIL_BUTTON").focus();
document.getElementById("DERIVED_RY_GP10_DETAIL_BUTTON").click();

Screen shot below show 3 different calendar group/calendar id clicked by the user using the results calendar above.

Click for bigger

The Clear Data  button will remove the specific payroll result. Basically, each calendar results in contained in a <DIV> tag with an ID. The following line takes the id of the <div> tag, for example BOX1 and passes it to the field DERIVED_RY_GP10.ID_LBL and then automatically clicks the field DERIVED_RY_GP10_CLEAR_BUTTON. This is similar to the DOM click() function previously mention. See HTML.RY_GP_RSLT_SEG_HDR

<div id='%Bind(:12)' class="result_container">
<input class='calendar_container' id="DERIVED_RY_GP10_CLEAR_BUTTON" title="ID" style="WIDTH: 72px" onclick="this.form.DERIVED_RY_GP10_ID_LBL.value='%Bind(:12)';submitAction_win0(this.form,this.name);" type="button" value="Clear Data" name="DERIVED_RY_GP10_CLEAR_BUTTON">

The Copy to Excel  button will download the information to Excel. This uses the ActiveXObject(“Excel.Application”) function. See HTML.RY_GP_RSLT_HDR

Display the 12 Months Fiscal Summary

Using the window.showModalDialog function to display the 12 Months Fiscal Summary. See Get_Summary() in RY_GP_RSLT_CUSTOM_JS . Also see Get_Payslip().
Other method may include <iframe>

Click for bigger

Summary/Design consideration

Strong knowledge of html, Javascript, CSS and  SQL in addition to PeopleCode.

Using a HTML editor facilitates prototype stage.

In this example, it’s all about presentation as getting the data from the database via SQL is fairly easier.

I have used the SQL XMLElement function to inject some html, albeit with a bit of trickery.

Page Field Name and Enable as Page Anchor gives the developer control over how the field is referenced in html

Code Listing

How to interact client side Javascript with server side PeopleCode