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)

Oracle Higher Education Investment Executive Brief

Please read the Oracle Higher Education Investment  Executive Brief issued by Oracle.

As we move into the 21st century, the needs of students, staff and faculty have shifted and evolved. Rather than ‘traditional’ classes in brick and mortar classrooms held at regularly scheduled times, students demand flexible learning schedules that fit the needs of their lives, and programs structured to not just provide them with an education, but to prepare them for careers and to further their careers once they are in the workforce. New ways of learning and defining the outcomes of that learning, like competency-based credit, Massive Open Online Courses (MOOCs), and badging, are changing the definition of the learning experience. And students expect access to their learning environment and information across a spectrum of platforms – classroom, desktop, mobile – at all times, always on, always at their fingertips. 

Faculty and administrators demand the decision support tools to promote the success of their students and meet accountability requirements, from evaluation of admissions targets, to the early identification of students at risk, to institutional accreditation. And with the information to support decisions spread across their enterprise, they need seamless, robust integration of information, served up in actionable dashboards. 

And Institutions need to innovate, to find what differentiates them from their peers, and to focus scarce resources on the highest value activities to support their mission. They expect increasingly flexible ways to administer and provide learning and services to students, and they need to do so with efficiency and cost-effectiveness. As budgets tighten, the business of higher education is changing. Consistency and predictability of expenses becomes an operational necessity.

Continue reading by downloading from the hyperlink below. 

  • http://www.oracle.com/us/products/applications/peoplesoft-enterprise/higher-ed-investment-exe-summary-2164846.pdf 

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
« March 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