Jim J Marion
Wenatchee, WA


 
EMAIL THIS WRITER:
 
Your Name :
 
 
Your Email :
 
 
Subject :
 
 
Message :

 



WRITTEN WORKS:

PeopleSoft PeopleTools Tips & Techniques
Published on: 2010-06-22
Copyright: 2010
More Info



BLOG:

Collaborate 2014 Schedule
2014-03-21T16:48:00.000-07:00

I am just getting caught up after HEUG Alliance. What a great conference! As always, it was a lot of fun visiting with customers, partners, and colleagues. I heard some amazing stories and learned a few new tricks. Now it is time for the next conference: Collaborate 2014 is only a couple of weeks away. I love hearing your stories and challenges. Hunt me down and share your stories with me. Besides the demo grounds, here are two places you will find me:

  • Tuesday, 8 Apr 3:00 PM-4:00 PM So You Think You Know PeopleSoft? Do You Know the PeopleSoft Interaction Hub? – You Own It !, session ID 109490, Level 4, Lando 4301B
  • Thursday, 10 Apr 08:30 AM-09:30 AM PeopleTools Developer: Tips and Techniques, session ID 108600, Level 4, Marcello 4401A

I fly out Thursday night, but if I can make it, I plan to attend Mike Doyle's session Advanced PeopleSoft Development Techniques, which contains examples based on my book PeoleSoft PeopleTools Tips & Techniques.


Alliance 2014 Agenda
2014-02-24T20:44:00.000-08:00

It is hard to believe it has been a year since the HEUG Alliance 2013. We had a lot of fun in Indianapolis. I have been reviewing the 2014 session lineup and it looks pretty exciting. I must say that I am very pleased to see several sessions on REST, iScripts, and User Experience. With Alliance 2014 just a couple of weeks away, I wanted to make sure I posted my schedule:

  • Monday at 1:45 PM - 2:45 PM 33718 PeopleTools Developer: Tips and Techniques in Room 312-317
  • Tuesday 11:00 AM - 12:00 PM Meet the Experts

I also plan to spend some time in the PeopleSoft demo grounds. Please stop by and visit with me or one of my colleagues. We would love to say hello and show you some new ideas for configuring PeopleSoft applications.

If you are presenting at Alliance, please feel free to promote your session in the comments below.


Quest Technology Series PeopleTools Presentation
2013-12-17T17:30:00.001-08:00

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
2013-12-17T17:27:00.000-08:00

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.


10 PeopleSoft Interaction Hub CSS Tricks
2013-11-15T23:11:00.000-08:00

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;
}


OpenWorld 2013 Presentations Available
2013-10-10T20:32:00.000-07:00

OpenWorld 2013 presentations are now available and posted on the OpenWorld Content Catalog. Here are direct links to the presentations in which I participated:


 
Author Profile
Name: Jim J Marion
Location: Wenatchee, WA
Subjects: Applications;
Regions: Europe; US/East Coast; US/Midwest; US/South; US/West Coast;


Website: Jim's PeopleSoft Journal

Copyright © 2013 McGraw-Hill Global Education Holdings, LLC Any use is subject to the Terms of Use and Privacy Notice