We are in the middle of updating our PeopleSoft application to PeopleTools 8.53 from 8.49. As expected, we are finding that some of our custom JavaScript is still working fine and some is not.
So we went from this:
to this:
<script language="JavaScript" src="%JavaScript(RH_JQUERY_LIB)"></script>
PeopleTools automatically minifies (somewhat) and caches your JavaScript on the web servers, so you don't need to maintain the library files on your web servers. We are switching some of our custom JavaScript to load this way also.
Here is the code in action:
The dialogs look better if the message text is formatted HTML. I like to use <p></p> tags rather than <br> where possible.
One gotcha is that any function passed to psConfirm2 has to be declared globally. If you are using jQuery, this means that it is declared outside the $(document).ready(function(){} block. In practice, I just put the declaration before the block, but the function definition inside.
The dialogs seem to resize themselves to the length of the text lines. They often end up too wide for my taste. I found that forcing a new line with a <br> tag in a long paragraph is a good way to force a narrower dialog.
Loading JavaScript Libraries
A big change is how page content is loaded in 8.53. PeopleSoft now uses an AJAX approach, loading the content and content updates asynchronously. This approach caused our simple scheme of loading our jQuery JavaScript libraries from files using script tags in an HTML area to break. Luckily there is a solution. You can now put your library code into an HTML object and refer to it using PeopleTools meta-html.So we went from this:
<script language="JavaScript" src="/js/jquery-min.js"></script>
to this:
<script language="JavaScript" src="%JavaScript(RH_JQUERY_LIB)"></script>
PeopleTools automatically minifies (somewhat) and caches your JavaScript on the web servers, so you don't need to maintain the library files on your web servers. We are switching some of our custom JavaScript to load this way also.
Modal Dialog Boxes
One of the nice PeopleTools improvements is the use of modal dialog boxes for messages (messagebox(), error, etc.). We spent a lot of time replacing the ugly 8.4x message pages and alerts with nice modal dialogs with the help of jQueryUI. Now we are tearing that out and leveraging the PeopleTools dialog code. I found a nice delivered JavaScript function, psConfirm2(), that is used to create dialogs. To simplify its use, I wrapped it in a helper function.
// Generic function to call PS dialog box
// Do Not call directly. Use showConfirmDialog or showOKDialog instead.
function showDialog(title,msg,type,okAction,cancelAction,okAction) {
var bDelay;
msg = msg.replace(/\n/g,"<br>"); //replace CRs with html breaks
psConfirm2(title, msg, type,cancelAction, okAction, null, bDelay);
}
Then I added two more functions: one for OK/Cancel dialogs and one for OK dialogs (like the old alert).
// Show OK/Cancel dialog box
// okAction and cancelAction are string name of functions to call on button
click
// If an empty string ("") is passed to action, that button will
close dialog.
function showConfirmDialog(title,msg,cancelAction,okAction) {
showDialog(title, msg, "OKCancel",cancelAction, okAction);
}
// Show OK dialog box
function showOKDialog(title,msg) {
showDialog(title, msg, "OK","", "");
}
msg = '%BIND(:2)'; // Confirm escalate msg 132
showConfirmDialog("Confirm", msg, "", "confirmSubmit()");
var confirmSubmit;
$(document).ready(function(){
...
confirmSubmit() {
//Code goes here
}
...
}
Stylin'
You can change the look of your dialogs by overriding the delivered Stylesheet with your own custom Stylesheet. For instance, if you want to change the color of the buttons, override the .PSPUSHBUTTONTBOK style.
The dialogs seem to resize themselves to the length of the text lines. They often end up too wide for my taste. I found that forcing a new line with a <br> tag in a long paragraph is a good way to force a narrower dialog.
I'll be sharing some more findings in future posts.
Happy coding!
