Saturday May 31, 2014

New Interaction Hub Statement of Direction Published

The latest PeopleSoft Interaction Hub Statement of Direction is now available on My Oracle Support.  We think this subject will be particularly interesting to customers given the impending release of the PeopleSoft Fluid User Experience and all that offers.  The Statement of Direction describes how we see the Interaction Hub being used with the new user experience and the Hub's continued place in a PeopleSoft environment.  This paper also discusses subjects like branding, content management, easier design/deployment, and the optional restricted use license.

Wednesday Apr 30, 2014

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

Source: Jim Marion Blog (http://jjmpsj.blogspot.in/2013/11/10-peoplesoft-interaction-hub-css-tricks.html)

Friday May 11, 2012

'Workspaces' - A boon for institutions

With a PeopleTools 8.50 license, you are able to install and configure a PeopleSoft Enterprise Portal database to host collaborative services to be integrated with your PeopleSoft applications. Within the PeopleSoft Enterprise Portal you may use Collaborative Workspaces and any functionality that is delivered out of the box within a Collaborative Workspace. Specifically, this entitles you to use:

  • Thirteen workspace modules and associated pagelets: Wiki Content, Welcome, Discussions, Documents, Blogs, Links, Action Item Lists, Calendar, Members, Related Data, Polls, Browse Workspaces, Administration
  • Workspace branding
  • Workspace content as feeds
  • Workspace search
  • Workspace tagging
  • Integration with external email and calendar systems through delivered pagelets
  • Related links from and to PeopleSoft application pages and components
  • Related discussions from PeopleSoft application pages and components
  • Resource Finder within a workspace
  • Task and worklist integration through delivered pagelets

Though a list mentioned above is pretty much, but how does one actually take benefit from it?

So, this is what one of my customer is doing:

  • They have allowed the creation of workspace to faculties and student alike.
  • With this, students can create groups (sharing files and documents). Needless to say, the file size (< 4MB, etc.) and the format (only .doc, .xls, etc.) can be restricted here.
  • Similarly, faculty can create groups (and they have mapped groups to the classes they teach). So, if a faculty is teaching 4 courses in the session, he/she creates 4 workspaces and gives rights to all the student who are enrolled in his/her class. The benefits that are reaped could extend to assignment disbursement, assignment collection, calendar sharing, notices, announcements, alerts, faculty blog, etc. for that specific class/course.
  • The utility has also been extended to the administration/management where they collaborate over a workspaces and capture aspects like minutes of meetings,  policy documents, etc. over one place. A big expensive DMS (Document Management System) can be avoided for such simple needs.

About

Mohit Satraj Phogat
Author: Mohit Phogat

This site focuses on Oracle's offerings to higher education in the Indian region. It intends to cover news, reviews, guides, how-to articles, descriptive videos, and podcasts on the trends which should be helpful to customers, prospects and developer community alike.

Follow me @

Search

Archives
« May 2015
SunMonTueWedThuFriSat
     
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
      
Today