Monday, March 24, 2008

Google Gadgets for your PeopleSoft Enterpise Portal

Have you tried using the Pagelet Wizard's HTML data source to add Google Gadgets to your PeopleSoft Homepage? If not, browse through the Google Gadgets directory and select one you like. After customizing your Gadget, click the "Get the Code" button. Notice the code is an HTML script tag. Copy this code and paste it into the HTML editor of a new Pagelet Wizard HTML data source pagelet. Publish, save and add your new pagelet to your homepage. Did you notice anything unusual... like... the Gadget appeared at the top of the homepage, not within the pagelet's designated area? If you look at the source code for your homepage from within your browser, you will notice that the script tag you copied is actually in the homepage's head element, not in the body. This behavior is the result of the way the PeopleTools portal constructs the homepage. For each pagelet on the homepage, the portal retrieves the pagelet's source and reviews it prior to inserting it into the homepage. If the pagelet's source contains a full HTML document (with HTML element, head, and body), then the portal will insert the components of the head tag into the homepage's head tag. For example, if the pagelet's head tag contains style definitions, those style definitions will be inserted into the head tag of the home page. Likewise, if the pagelet's source is not a full HTML document, but contains script, link, or style elements at the root, or top level, then those elements will be inserted into the head tag of the homepage. This behavior is by design. It allows pagelet designers to embed script and style definitions into the head element of pagelet HTML documents, the only valid place for sytle definitions.

To work around the homepage construction issue, wrap the HTML provided by Google inside a <div> tag. This will keep the portal from moving the script element. I use the following HTML to center the gadget within the Pagelet's defined box. Adjust the width to match the width of your Google Gadget plus a pixel or two.

<div style="margin-left: auto; margin-right: auto; width: 325px;">Google script...<div>

Here are some Google Gadgets you will find on my PeopleSoft homepage Google Calendar, Google Talk, and Google News.

14 comments:

Ciphersbak said...

Hey Thanx, Jim,
interesting post...I had to create a new Tab to get all my gadgets in PeopleSoft...

Jim Marion said...

@ciphersbak, cool! There are tons of gadgets out there. Which ones are you using? Any that help you with your business?

Ciphersbak said...

Hi Jim,

I'm presently using the ones that you had listed...along with that i have a few for the Indian Stock Exchange...and the one that i like the most is the Google Translator...for translating into HINDI...I also have the Google Docs...
Jim had a question...here...presently what i have been doing is that for all the diff. gadgets that i have on the PS Site have been created using a new Pagelet everytime...along with the snippet code that u had pasted in your blog...is it possible that i create a single Pagelet and paste the scripts for all of them in one...for the time being i have used the export Pagelet wizard to carry forward the customizations...

Ciphersbak said...

Hi Jim,

I just added the Free SMS Gadget (in India) on to my PIA...
really kewl!

Thanx a lot!!
looking fwd to more exciting stuff...
Cheers!
Prashant

Jim Marion said...

@ciphersback, migrating the Google Gadget pagelet HTML into another pagelet... good question. Here are a couple of options: Create a Google Gadget Data Source that has parameters for width, height, and script. Another option is to create a custom transform for Google Gadgets that wraps the Google provided JavaScript with the div HTML. Here is my favorite reference for creating a custom pagelet transformer: Markdown Text Filtering for PeopleSoft. I think it would be a good idea to create a Google Gadget data source for the Pagelet Wizard. I'll take a crack at it and post it as a blog entry if I get it working.

As far as putting all your gadgets in one pagelet, yes, definitely, just put each one in a different div within the same HTML pagelet. If you do this, then you will want them all to be the same width. If you do this, all your Google Gadgets will display in the same column. If that is what you want, then, yes, feel free to put them all in one pagelet.

Ciphersbak said...

Hi Jim,
Instead of migrating the pagelets, i was planning to use the system as a WSRP provider...and consume the ones that i want to display on another PIA...the pagelets have been successfully exposed...Is there a way that i can get/create a gadget which contains a list of all the cases that i have opened with Oracle GCS...
Thanx!!!

Jim Marion said...

@ciphersbak, a GSC open cases WSRP provider would be very cool. GSC should publish the open cases pagelet. I know you have a mix.oracle.com account. You should post this as an idea on Mix in the PeopleSoft and PeopleTools groups.

Nature Raj said...

Hey

Thanks for info... very nice...:)

Raj

KP said...

amazingly good and easy. Thanks so much.

Surinder said...

Jim, I am using Portal rel 9, and trying the gadget pagelet, and not having any success. If I put the HTML code into a text file it works fine, within the PeopleSoft Portal it does not get transformed correctly, and simply see the URL. Any ideas what I might be doing wrong. I tried the Calendar and also one of the News gadgets

Surinder said...

I tested this in the PeopleSoft 8.9 of financials and it worked fine for the CNN news gadget. Looks like there is a difference in 9 on how the HTML is being wrapped from the pagelet. Still need to look further on how to correct this, any ideas would be welcome

Surinder said...

Just wanted to post an update, that I found the fix. I had to click an extra button in Portal 9 in order to switch to HTML text source mode, before pasting the text.

Jim Marion said...

@Surinder, you are correct. You have to click the view source button.

Be careful using Google Gadgets. I figured out how to embed them, but I cannot vouch for their security. By inserting Google Gadgets, you are injecting someone else's JavaScript and allowing it to interact with your PeopleSoft page. For the most part this seems harmless. Nevertheless, since the Google Gadget JavaScript runs in the context of the page, it is possible for a malicious script to employ session hijacking techniques to steal a session. If your PeopleSoft instances are behind a firewall, then I doubt someone from outside your organization would be able to gain access to your PeopleSoft instance to hijack a session. It is important that you are aware of the security risks presented by this solution.

jncallahan said...

When I try this in our development PS Portal (9.1) I get errors that it can't load due to certficate errors. The hosted gadget code is on a non-ssl server and so even though the calendar is SSL, the gadget won't load. Has anyone run into this?