Tuesday, December 17, 2013

Quest Technology Series PeopleTools Presentation

If you are a Quest member and missed my PeopleTools Tips and Techniques presentation last week, you can watch the recording on Quest's site at http://www.questdirect.org/learn/2629061/.

An Interview with Jeff Robbins

At OpenWorld 2013, I had the opportunity to catch up with Jeff Robbins and ask him some questions about PeopleSoft's User Experience. You can watch the video here:

Watch more videos from Oracle's User Experience team on the oracleuseableapps YouTube channel.

Friday, November 15, 2013

10 PeopleSoft Interaction Hub CSS Tricks

If you have been to one of my PeopleSoft user experience sessions, you have likely seen a good handful of interesting CSS ideas in my designs. Ever wanted to implement some and need a few pointers? Here is a little Q&A that I hope you find useful.

Q: How do you keep a PeopleSoft or content provider stylesheet from overriding your Interaction Hub (portal) pagelet styles?

A: Higher specificity. I make sure my styles have a more specific CSS selector than the delivered CSS selector. This is actually pretty easy because the delivered CSS selectors for pagelet elements (ptpageletheader, ptpageletbody, ptpgltlabel, etc) just use class names. To make your selector more specific, just include .ptpagelet in front of your selectors. Here is a sample from one of my free formed stylesheets:

#ptpglts .ptpagelet .ptpageletheader {
  border-radius: 10px 10px 0 0;
}

The delivered selector is .ptpageletheader. I make my CSS selector more specific by adding #ptpglts .ptpagelet to the selector.

Q: How did you make the pagelets on your green/grass theme have a semi-transparent background?

A: There are actually a couple of ways to accomplish this. I created this theme back before rgba support in IE, so the approach I took was to create a 2x2 pixel PNG image with a semi-transparent background. I then set that to be my pagelet's background. Here is an example:

#ptpglts .ptpagelet td.ptpageletbody {
  background: url("opacity-bg.png") repeat scroll 0 0 transparent;
}

Today we can reduce our downloads and accomplish this much more easily using the rgba color syntax:

#ptpglts .ptpagelet td.ptpageletbody {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
}

Q: How did you create rounded corners for your pagelets?

A: I used the border-radius CSS attribute:

#ptpglts .ptpagelet .ptpageletheader {
  border-radius: 10px 10px 0 0;
}

I set the top left and right radius on the ptpageletheader class and the bottom left and right radius on the ptpageletbody CSS class.

Q: How do you make some pagelets have a transparent background while others have a color or image as a background?

A:Some pagelets, such as the accordion, look better with no header, border, or background. Through Pagelet wizard (or the new 8.53+ Pagelet Branding), you can hide the border and header, but you can't change the background. The technique I use is to first create, save, and add the pagelet to a homepage. Next, I find the pagelet's ID in HTML (firebug is very helpful for this). With the ID in hand, I write a custom CSS selector, setting the background to transparent. Here is an example:

#ptpglts #ADMN_COMPANY_DIRECTORY_IMG.ptpagelet td.ptpageletbody {
  background: transparent;
}

Q: How do you make the drop-down menu's bar semi-transparent?

A: Set a semi-transparent background on #pthnavcontainer. You can either use a semi-transparent image or RGBA colors. Here is an example. As with other examples, use a highly qualified selector (specificity) to ensure your selector wins over the delivered CSS selector.

body.PSPAGE #pthnavcontainer {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
}

Q: How do you set a background image for the entire PeopleSoft page?

A: Set a background image on .PSPAGE like this:

body.PSPAGE {
  background: url("background-photo.jpg") repeat fixed 0 0 transparent;
}

Make sure that:

  • Your background image size extends far beyond the expected page size so the image doesn't repeat.
  • You use the fixed attribute so your image doesn't have to extend passed the scrollable area of a page.
  • Your chosen background doesn't make transactions difficult to read.

Q: How do you make the main header area's background show through the transaction area?

A: There are a couple of ways to accomplish this. If you are OK with a semi-transparent appearance, then the easiest way is to add the following to your role based branding header's CSS:

#ptifrmtgtframe {
  opacity: 0.9;
}

This will make the transaction area semi-transparent. This includes the buttons, text, and every other element within the transaction area. A value of .9 seems to be opaque enough to view the entire transaction area while still allowing a small amount of the background to show through. Just for fun, use Firebug or Chrome tools to try smaller values. Once you get down to .5, the transaction area should be noticeably transparent.

Q: How do you set a background for just the pagelet region of a homepage?

Set a background image on the #ptpglts element. Here is an example:

.pspage #ptpglts {
  background: url("my-favorite-background.jpg") repeat fixed 0 0 transparent;
}

Q: How do I center the pagelet area and reduce the size to something like 1024 pixels wide?

A: As long as you are using a browser other than IE 8 (PeopleSoft 8.53- requires IE Quirks mode), you can do this using the margin auto CSS centering technique. Here is an example:

.pspage #ptpglts {
  margin: 0 auto;
  width: 1024px;
}

Q: How do you round the right top and bottom corners of the SES scope drop-down in the global search area of the header?

A: The SES search scope drop-down has the ID selsrchgrp. Here is some CSS that rounds the right side of the search scope drop-down. Since this drop-down is paired to a text field that has the same height, I only round the right side, not the left side.

.pspage #selsrchgrp {
  border-radius: 4px 0 0 4px;
}

Thursday, September 26, 2013

Using External Content in the FSCM 9.2 Links Pagelet (WorkCenters)

FSCM 9.2 comes with some great new WorkCenters. One of the features of the new FSCM WorkCenters is the configurable Links pagelet. With the links pagelet, you can add and remove links to information related to the WorkCenter's business process. One of the great features of the Links pagelet is that it allows you to set the starting page of a delivered WorkCenter. A current limitation of the Links pagelet is that it does NOT allow you to open external content in the WorkCenter's TargetContent area. To say it another way, you can add external content to the Links pagelet, but that external content opens in a new window. As usual, however, the only real limitation is imagination. Here is the method I developed that allows me to add external content to the Links pagelet and have it open in the TargetContent area: an iScript that redirects to the external content. I then register this iScript as a CREF and add it as a Link. The Links pagelet thinks the content is local, so it opens the external content in the TargetContent area. Here is the iScript:

Declare Function SpecifyPortalOpen PeopleCode FUNCLIB_PTPP.PTPP_PORTALR FieldFormula;

Function IScript_ContentRedirect()
   Local ApiObject &portal;
   Local ApiObject &cref;
   Local string &url = "";
   Local string &portalName = %Request.GetParameter("PORTAL");
   Local string &crefName = %Request.GetParameter("CREF");
   
   &portal = SpecifyPortalOpen(&portalName);
   &cref = &portal.FindCREFByName(&crefName);
   
   If (&cref <> Null) Then
      If (&cref.Authorized) Then
         &url = &cref.AbsoluteContentURL;
      End-If;
   End-If;
   
   %Response.RedirectURL(&url);
End-Function;

Here is how you use it:

  1. Create a CREF for your external URL
  2. Create a new CREF for the iScript. In the additional parameters section of the CREF, add PORTAL=EMPLOYEE&CREF=YOUR_CREF_NAME
  3. Update the new iScript CREF's security to match the external content CREF's security.

I use this technique with both OBIEE dashboards and Taleo.

Monday, September 09, 2013

Writing to stdout and stderr Take II

A few years ago I wrote a post that describes how to print text to the App Engine output file, bypassing the verbose MessageBox statement with its text length limitation (AppEngine Output Tricks, Reporting, Logging, Etc). I recently employed that same technique for logging Taleo Connect Client output when run from an App Engine. Looking at the code from those old println methods, I noticed a couple of inefficiencies:

  • Each invocation of println initializes the same JavaObject variables resulting in wasted CPU cycles and wasted memory
  • The two functions, println_to_stderr and println_to_stdout, are nearly identical which violates the DRY principle

The solution to both of these problems is inherent in Application Classes. We can solve the first issue by maintaining state inside the App Class with private instance variables. The DRY violation could be solved through properly implemented composition (preferred) or inheritance.

Here is an alternate implementation of the println_to_stdout method that uses an App Class to maintain state between invocations:

class StdoutWriter
   method println(&message As string);
   
private
   
   instance JavaObject &printlnMethod_;
   instance JavaObject &outputStream_;
end-class;

method println
   /+ &message as String +/
   /+ Extends/implements NAA_STDIO:IOWriter.println +/
   
   REM ** Lazy initializtion to ensure initialized between invocations;
   REM ** Need a local copy of member for "None" test;
   Local JavaObject &outputStream = &outputStream_;
   If (None(&outputStream)) Then
      REM ** NOTE: this is the only difference between StderrWriter and StdoutWriter;
      &outputStream_ = GetJavaClass("java.lang.System").out;
      
      Local JavaObject &stringClass = GetJavaClass("java.lang.Class").forName("java.lang.String");
      Local JavaObject &printStreamCls = &outputStream_.getClass();
      Local JavaObject &printlnArgTypes = CreateJavaObject("java.lang.Class[]", &stringClass);
      
      &printlnMethod_ = &printStreamCls.getDeclaredMethod("println", &printlnArgTypes);
   End-If;
   
   &printlnMethod_.invoke(&outputStream_, CreateJavaObject("java.lang.Object[]", &message));
   rem ** I didn't find flushing necessary, but here is where you would flush the buffer if desired;
   rem &outputStream_.flush();
end-method;

Notice that I used lazy initialization and only persist two JavaObject variables. The life of a JavaObject variable is potentially shorter than most PeopleCode variables. The PeopleSoft runtime can persist many types of PeopleCode variables across requests (events, think time functions, etc). This is not the case with Java variables. Lazy initialization and re-initialization ensures those Java variables always have a value. I only persist two variables rather than the seven from the original println_to_stdout function because we only need two of those variables for subsequent invocations.

About the DRY principle violation... I chose not to solve it. The number of lines required to create another app class (for composition or inheritance) was about the same as the number of duplicate lines. If I had multiple targets besides stderr and stdout, then creating a class structure to contain this redundant code would make sense. In this case the clarity seemed worth a little redundancy.

So how do you use it? Assuming you put this class in an Application Package named JJM_STDIO, you would call it like this:

import JJM_STDIO:StdoutWriter;

Local JJM_STDIO:StdoutWriter &out = create JJM_STDIO:StdoutWriter();

&out.println("This could be a very long line of text read from some process output that would exceed the maximum length for MessageBox");

Tuesday, August 27, 2013

PeopleSoft Interaction Hub VM Demo Image Available

The PeopleTools team just posted information about a new VirtualBox image for PeopleSoft Interaction Hub. Read more about it on the PeopleSoft Technology Blog.

Tuesday, July 23, 2013

Greffins Feather on PSUnit

I really enjoy hearing about developers incorporating proven methodologies into their PeopleSoft development practices. One of my favorite's is Test Driven Development. Lee Greffin has grabbed onto this concept and is sharing his experiences on the Greffins Feather blog. You can read his PSUnit series here.

Monday, July 22, 2013

OpenWorld 2013

OpenWorld 2013 is about two months away. Those of you that are attending probably noticed that the content catalog is posted. Here are the sessions I will be delivering:

A few other sessions I am really looking forward to attending are

Wednesday, June 26, 2013

Using PeopleCode Modals: openPageletActionPageInModal (PeopleTools 8.53)

While typing something in the Chrome JavaScript console, I managed to bring up the function openPageletActionPageInModal. Hmmm, sounds interesting. I drilled to the implementation and saw that you call it like this:

openPageletActionPageInModal("http://your.server.name/psp/ps/EMPLOYEE/HRMS/c/ROLE_EMPLOYEE.HR_EE_PERS_INFO.GBL?")

What does it do? It converts the /psp/ part of the URL to /psc/ and opens the URL in a modal dialog. For me it worked great as long as I followed two simple rules:

  • Included a question mark in the URL. If the URL has no query string parameters, just include a trailing "?".
  • Used this function in the same datababase/application as the content. In other words, I didn't try to use this technique in Interaction Hub for HRMS content. For that to work, I would need to translate more than just /psp/. I would also have to translate the server name and site name.

Note: It works just fine in a portal/content provider situation if the URL is already a /psc/ URL.

Anyway, interesting, undocumented piece of JavaScript that you may or may not find useful. As always, your mileage may vary.

Note: I was using PeopleTools 8.53 when I found this function.

Tuesday, June 25, 2013

Using the PeopleTools 8.53 Version of jQuery "Safely"

Now that PeopleTools 8.53 includes jQuery, the question is, "how do I use it?" Probably the easiest way is to add something like this to your Pagelet or page where you want to use jQuery (see New PeopleTools 8.53 Branding Tools):

<script type="text/javascript" src="/psc/ps/EMPLOYEE/EMPL/s/WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_JS?ID=PT_JQUERY_1_6_2_JS"></script>

Some of you may have tried this. It works great if you have just one item that uses jQuery. If you add more (for example, if you add multiple pagelets) where some use plain jQuery, some use jQuery UI, and others use jQuery Cycle, you will see that each new inclusion overwrites your plugin list, rendering your new pagelet unusable. What about include protection? This concept is still relevant, but I would hate to manage it as a modification if there was another way. Here is what I came up with for 8.53:

<script type="text/javascript" src="/psc/ps/EMPLOYEE/EMPL/s/WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_JS?ID=PT_JQUERY_1_6_2_JS"></script>
<script type="text/javascript">
  // special variable to store "our" single jQuery instance
  if(!window.psjq$) {
    window.psjq$ = window.$ = window.jQuery;
  } else {
    // ignore recent import and use the global single instance
    window.jQuery = window.$ = psjq$;
  }
</script>

If you look at the PT_JQUERY_1_6_2_JS HTML definition in app designer, you will see that PeopleTools uses jQuery.noConflict() to free up $, but not jQuery. Using noConflict to move $ into a new variable named ptjq162 is appropriate, but doesn't help with plugins. Properly coded plugins use the global variable window.jQuery. Looking through jQuery UI, cycle, and many of the other plugins I use, they all use the global jQuery variable, with no mechanism for replacing it. As you can see here, my solution is to store jQuery in the custom global variable psjq$, and then override jQuery on each import of jQuery. This way all plugin scripts loaded after my script will always use the original, single instance jQuery copy of psjq$. Note: I tried using ptjq162.noConflict(true) to manage a single instance, but didn't get it working. My approach just seemed easier for me to understand, and, well, it just worked.

I don't have much "burn in" time with this, so I'm open to suggestions. One key difference between this approach and the Include Protection approach is this approach processes jQuery for each jQuery include. It drops it after processing it, but you still take the performance hit (you may not notice it, but it is still there). The include Protection approach only processes jQuery once.

Note: My script above assumes $ is for jQuery. The point of jQuery's noConflict is compatibility with other libraries that use $. If you find yourself in this situation, just remove $ from the assignments above. For compatibility reasons, you should probably never use $ except in a closure, but...

Warning: PT_JQUERY_1_6_2_JS is NOT safe for use with multiple versions of jQuery. The noConflict call at the end of the script is compatible with $, so if you have another, more recent version of jQuery, $ will still point to your newer version. The jQuery variable, however, will only point to the last version parsed (or the last assignment, as shown above). $ is nice, but it is really the jQuery variable that matters. To be compatible with other versions of jQuery, the HTML definition would have to use jQuery.noConflict(true). The jQuery docs don't recommend having two versions on the same page, but it is important to note.

Friday, June 21, 2013

Pagelet Wizard Custom Tags

Pagelet Wizard custom transformations can use special tags documented here to insert images, message catalog entries, or to format numbers and dates. This is great when trying to format currencies or ensure multilingual compliance. The problem with "Post-Transformation Processing," as it is called in PeopleBooks, is that it requires the transformation results to be valid XML. Question: How do you get Pagelet Wizard to generate valid XML when the Xalan processor used by PeopleTools sees HTML tags and automatically generates HTML? Answer: use the <xsl:output> XSL tag. Here is a sample template that produces valid XML:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0" xmlns:xhtml="http://www.w3.org/1999/xhtml"
    xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    exclude-result-prefixes="xhtml xsl">

    <xsl:output method="xml" version="1.0" encoding="UTF-8"
        doctype-public="-//W3C//DTD XHTML 1.1//EN" doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
        indent="yes" />

    <xsl:template match="/">
        <!-- your XSL goes here -->
    </xsl:template>
    
  <!-- identity transform templates -->
  <xsl:template match="*">
    <xsl:apply-templates/>
  </xsl:template>

  <!-- delete unmatched text -->
  <xsl:template match="@*|text()|comment()|processing-instruction()">
  </xsl:template>
  
</xsl:stylesheet>

New PeopleTools 8.53 Branding Tools

If you have an instance of PeopleTools 8.53, you may have noticed a new component at PeopleTools > Portal > Branding > Branding Objects. This new component allows you to upload images, HTML definitions, JavaScript definitions, and Stylesheet (CSS) definitions. The uploaded definitions become managed definitions in Application Designer. The point is to make it possible for customers to create and maintain user experience definitions online rather than having to log into App Designer to create and maintain these definitions. Once uploaded, if you prefer, you can still view and maintain these same definitions with Application Designer (but it is recommended that you maintain them using the Branding Objects component instead of App Designer). Note: the image upload does not yet support PNG (can you imagine a beautiful web without PNG? Me neither). I hope to see PNG in a future release. You can still create PNG's in App Designer, just not through the new Branding Objects component.

Being able to upload and create App Designer images, JavaScripts, and CSS files through an online component is nice, but where can you use these definitions? Just about anywhere that you see an image prompt. Here are some examples:

  • Navigation Collections
  • Pagelet icons
  • Pagelet Wizard HTML and XSL

Navigation Collections are pretty self explanatory. You use the prompt to select an image. Pagelet Wizard, on the other hand, is quite open. One way you can use these images is with Pagelet Wizard's custom XSL PSIMG tag:

<PSIMG ID="MY_UPLOADED_IMAGE" BORDER="0" />

Another way to use these definitions (and any other JavaScript, CSS, or image definition in App Designer) with Pagelet Wizard is through a collection of new iScripts (with examples):

  • IScript_GET_JS: http://your.peoplesoft.server/psc/ps/EMPLOYEE/EMPL/s/WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_JS?ID=PT_JQUERY_1_6_2_JS
  • IScript_GET_CSS: http://your.peoplesoft.server/psc/ps/EMPLOYEE/EMPL/s/WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_CSS?ID=PSJQUERY_BASE_1_8_17
  • IScript_GET_IMAGE: http://your.peoplesoft.server/psc/ps/EMPLOYEE/EMPL/s/WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_IMAGE?ID=PT_LOCK_ICN

I avoid hard coding server names in URL's if at all possible. To avoid hard coding the server name, start your URL with /psc/, skipping the server portion. When using this relative approach, though, keep in mind the pagelet's runtime context. If this is a local pagelet in a content provider or Interaction Hub, a relative URL will work just fine. However, if the pagelet is a remote pagelet, coming from a content provider, this relative approach will not work. Another thing to keep in mind when using these iScripts is your instances site name. Even with a relative URL, you still have to hard code your instance's site name, which usually differs between development, test, QA, and production instances.

Friday, June 07, 2013

HIUG Interact 2013

HIUG starts on Sunday. Great weather, beautiful setting... expect an excellent conference! I hope you will be ready to start the conference early on Sunday :). At 2 PM, Brent Mohl and I will deliver a Hands on workshop which gives attendees an opportunity to build content with new PeopleTools 8.53 User Experience tools. Here is a list of sessions I and my colleagues are involved with:

  • Sunday 2 PM to 4 PM -- 13082:Hands-on Workshop-Delivering a Ground-Breaking User Interface with PeopleTools & the Interaction Hub (Lowell B)
  • Monday 12:45 PM to 1:45 PM -- 13141:PeopleTools 8.53 in Action (Kirkland)
  • Tuesday 10:30 AM to 11:30 AM -- 13084:Understanding PSFT Maintenance Tools & How They Fit Together (Trailblazer B)
  • Tuesday 4:45 PM to 5:30 PM -- 13085:PeopleTools Product Round Table Discussion with Oracle Representatives (Trailblazer B)
  • Wednesday 9:30 AM to 10:30 AM -- 13083:Delivering a Ground-Breaking User Interface Using PeopleTools and the Interaction Hub (Trailblazer B)

I'm looking forward to hearing Cincinnati Children’s Hospital Medical Center talk about TDD and PSUnit (Jun 11, 2013 02:15 PM - 03:15 PM in Trailblazer B). Also, be sure to attend the "Have Your PeopleSoft Systems Been Hacked?" session led by Larry Grey Jun 10, 2013 (12:45 PM - 01:45 PM). I attended this one at Alliance. Great session! ... of course, it is offered at the same time as my PeopleTools 8.53 in Action session :(

Friday, May 31, 2013

jQuery in PeopleTools 8.53

A lot of customers are now working with PeopleTools 8.53. If you open Application Designer and search for HTML definitions named PT_JQUERY, you will see there are 2 (sometimes more) new jQuery JavaScript definitions included with PeopleTools 8.53:

  • jQuery 1.6.2
  • jQuery UI 1.8.17
  • Mobile jQuery (modules with mobile apps)

You no longer need to download, upload, or otherwise install jQuery to use it with PeopleSoft applications. One interesting thing I noted in the PeopleTools jQuery file is that the end of the jQuery file uses jQuery.noConflict() to replace $ with ptjq162. Unfortunately, it doesn't take advantage of the include protection I described in my post jQuery Plugin Include Protection, so be careful using it in pagelets directly.

Thursday, May 23, 2013

Firebug One-line'r to go from psp to psc

I perform a lot of prototyping in the Firebug console. Since most of this prototyping refers to the TargetContent frame (component area), not the header and main window, I find it easier to change out the URL to just the "psc" core content URL, eliminating the header frame. When navigating from a homepage, this URL change is a matter of just replacing the /psp/ in the browser's URL with /psc/. When navigating from some other transaction, however, it is not so easy. The URL in the browser is for the first component opened with that browser which may or may not be the current component displayed on the screen. Here is a quick one-liner that I use in the Firebug console to remove all of the PeopleSoft "chrome", leaving just the transaction area:

window.location.href = frames["TargetContent"].strCurrUrl.replace("/psp/", "/psc/")

Better yet, drag the "bookmarklet" link onto your bookmarks toolbar to add this one liner to your browser favorites. Then when you want remove the PeopleSoft header (and left menu on older versions of PeopleTools), just click the bookmark/favorite.

Chromeless PS Bookmarklet

Saturday, April 20, 2013

AWE Workflow Application Class Criteria

I had a little trouble creating my first App Class criteria so I thought I would share some tips on how to write an App Class for use as AWE criteria. Here are the primary secrets:

  • Your App Class must extend EOAW_CRITERIA:DEFINITION:CriteriaBase (PTAF_CRITERIA:DEFINITION:CriteriaBase for 9.0 apps).
  • Your constructor must take a Record definition as a parameter.
  • Your constructor must set %Super by passing the criteria's ID. The following example uses the criteria ID value specified in the parameter record.
  • Your App Class must implement the Check(&bindRec_ As Record) Returns boolean method.

Here is a sample template:

import EOAW_CRITERIA:DEFINITION:CriteriaBase;

class MyCriteria extends EOAW_CRITERIA:DEFINITION:CriteriaBase
   method MyCriteria(&REC_ As Record);
   method Check(&bindRec_ As Record) Returns boolean;
end-class;

method MyCriteria
   /+ &REC_ as Record +/
   %Super = create EOAW_CRITERIA:DEFINITION:CriteriaBase(&REC_.EOAWCRTA_ID.Value);
end-method;

method Check
   /+ &bindRec_ as Record +/
   /+ Returns Boolean +/
   /+ Extends/implements EOAW_CRITERIA:DEFINITION:CriteriaBase.Check +/
   REM ** TODO evaluate something here;
   Return True;
end-method;

Monday, April 01, 2013

jQuery Plugin Include Protection

I have a few blog posts that show how to use jQuery plugins on PeopleSoft homepages. When designing those pagelets in Pagelet Wizard, it is important that your XSL/HTML include jQuery and any necessary plugins within your pagelet's HTML/XSL. This is how my Slideshow and Accordion Navigation templates work. Including jQuery and required plugins in each pagelet, however, means that a homepage using these pagelets will have multiple instances of jQuery. jQuery is designed to load once, with plugin scripts loaded as needed. Since each pagelet has its own pointer to jQuery, as each pagelet loads, the browser tries to reload jQuery, redefining the jQuery and $ global variables and resetting the collection of previously loaded plugins. The end result is that a homepage with multiple jQuery based pagelets will only have one working pagelet. The rest will have been invalidated by the last pagelet to load jQuery.

The jQuery documentation discourages the presence of multiple instances of jQuery within the same page. The theoretical concept is that each page should load jQuery once, and sites should be written to include only one jQuery script tag. The nature of homepages with their independently managed fragments doesn't allow for this. The way I work around this is to wrap the jQuery JavaScript library in something akin to the C-style header #ifndef include guards.

After downloading the jQuery JavaScript library, I wrap the contents of the file in a conditional block that looks something like this:

if(!window.jQuery) {
/* downloaded, compressed/minified jQuery content goes here */
}

I make the same change to jQuery plugins because they often include their own setup and usage data, but, of course, testing for a different variable. Here is my jQuery UI processing protection:

if(!window.jQuery.ui) {
/* downloaded, compressed/minified jQuery UI content goes here */
}

This minor change to the jQuery JavaScript library and plugin files keeps the browser from re-interpreting these JavaScript libraries. The browser interprets these file once, and then fails the conditional for each subsequent script tag that points to that particular library. This allows plugins to load as needed and all plugin setup and usage data to persist across multiple pagelets.

Of course, the best solution would be to just have each JavaScript file referenced once. Since that isn't practical on a homepage, this solution at least ensures the files are only processed once.

Thursday, March 14, 2013

Collaborate 2013

It is almost time for Collaborate 2013. For those of you attending, here is my schedule:

I will also be working in the Oracle User Experience demo pod and visiting in the PeopleTools demo pod. I look forward to seeing you there!

Wednesday, February 06, 2013

Podcast: A sneak peek into PeopleSoft PeopleTools Data Management and Upgrade Handbook

We put together a podcast with a short Q&A from our latest book PeopleSoft PeopleTools Data Management and Upgrade Handbook. If you have been wondering whether or not to buy the book, listen to this podcast. Perhaps it will help you make an informed decision.

Friday, January 25, 2013

How to Configure and Use Integration Broker

Integration Broker has become a critical service for PeopleSoft applications. If you are new to Integration Broker or are having trouble with Integration Broker configuration, then take a look at this new Integration Broker course published by my friends at CGI consulting. The course consists of an 84 page instructional PDF and a couple of source files. The course covers everything from configuration to using SoapUI. Here are some highlights:

  • Setting up Integration Broker
  • Publishing a CI based service
  • Testing a web service (CI or otherwise) with SoapUI
  • Calling a service from PeopleCode
  • Application Class PeopleCode handlers
  • Routing transformations
  • JDeveloper XSLT Mapper
  • App Engine Service Operation handlers
  • And much, much more

One item I noticed that is NOT covered is creating custom listeners and targets using the Integration Broker SDK. Not to worry, though because I cover creating custom targets in my book PeopleTools Tips & Techniques.

The CGI Integration Broker course is a great read. I recommend downloading and saving a copy for future reference.

Thursday, January 24, 2013

Alliance 2013

Alliance 2013 in Indianapolis is just around the corner. Here is my schedule:

  • Meet the Experts (Technical) March 18th at 2:30 PM
  • 31719 PeopleTools Developer: Tips & Techniques on Monday, March 18th at 4:30 PM in Sagamore 4
  • 31723 Delivering a Ground-Breaking User Interface Using PeopleTools and the Interaction Hub on Tuesday, March 19th at 11 AM in Sagamore 4
  • Meet the Experts (Technical) March 19th at 12:00 PM