The users were broken down into different populations: Employees, Managers and Head Office/power users; each function having a different dashboard.  Everyone has the Employee Self Service dashboard, only a subset get one or other of the other two.  Employees are automatically redirected on sign-on to the correct homepage.

Head Office users

Head office users just get the normal PIA with a custom colour scheme, background image and graphics:

Managers

The managers get a dashboard that is far less formal, but still contains only business related options:

The buttons along the top are the top level menu items.  These are dynamically read from the PeopleSoft Portal Registry, clicking one shows a side menu and so on down the menu hierarchy etc.  You’ll also see a burgundy footer bar (this uses jQuery to fade between different messages to communicate to the managers).  Towards the lower half of the picture are a series of traffic lights showing the status of different KPIs within the business – this uses Succeed’s Alerts Framework as the technology to make this simple and configurable.

Employees

The Employee experience is a good deal less formal again.  Although they can access all of the expected functionality (timesheets, rotas, holiday booking, personal data changes, payslips etc) from the menu bar there are other aspects to make the experience compelling and keep the usage high.

The main content area of the homepage is used for displaying news items.  These are fully configurable and the amount shown and topics changes from week to week.  The comms team can upload PDFs to be linked to, or can write news items to be published using the Rich Text editor.  Everything is stored within PeopleSoft.

On the right is an employee poll.  Every employee gets to vote online and once you select an answer the running total is displayed showing how the other employees voted.

Across the top there is a sprinkling of social media goodness.

There is a heap of other functionality not shown, some colleagues have done some great work on integration with Google maps, others have taken the most complex of requirements for timesheets/rotas and produced some elegant pages.

This was all achieved using just PeopleSoft … no other products were used for hosting portals etc.  It’s all built within PeopleTools and shows what can be done when a client is willing to move a little away from the ‘zero customisation’ mantra.

If you’d like a little more detail on what we did and how we did it – particularly if it’s a path that you’d be interested in following yourself – please get in touch.

It has been a challenging project and we’ve all worked really hard. The end is in sight now though, and we’re proud of what we’ve delivered.

It has been refreshing to work with a client that isn’t afraid of customisation if it improves the user experience for their employees. And Pret really have held the engagement of their Self Service users as of paramount importance.

This short video shows some of the highlights:

Pleasingly, it’s now actually slightly easier to achieve (and will appear on all pages, not just the Home Page).

Open up App Package PT_BRANDING, the Class BrandingBase and search for the string ‘add &addjs’.  Immediately preceding that line, add the following line of code:

&greeting = "User: " | %UserId | " on Database: " | %DbName;

(Plus some comments identifying the customisation etc.)

This will do the trick, but the end result looks a bit big and blocky.  It’s a piece of cake to alter the greeting style to achieve a much better looking result.

Open the PSHOMEPAGE Freeform Style Sheet, locate the greeting style class and replace it with this:

.greeting {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
margin: 0 0 0 70px;
line-height: 24pt;
}

The end result will look something like this (I’ve also added bold tags around the UserID and Database for clarity):

Previously, if you had a rough idea of how it all fits together and knew the colour scheme that you were moving to you could do it in a day or two.  Now however, I think it’ll take a bit longer.  Here’s why:

The routine used to be:

• Clone the delviered style sheets
• Locate the HTML code for the colour you wish to change
• Locate the HTML code for the colour you wish it to become
• Convert both into the database equivalents (using Hex functions in Excel is normally easiest)
• Update the database, replacing all instances of the old colour with the new colour where the style class is within your new style sheets
• Repeat until all colours have been swapped
• Then, go through each image and make the colour consistent

Since I did this last there’s a plugin for Firefox called FireBug that makes the whole process of identifying which Style Class is responsible for the colour of an on-screen element, so the process should be much quicker (no more than a day or two).

With Tools 8.50 came the advent of FreeForm Style sheets.  While these might be quicker to write and more flexible for entering complex CSS (and I’m sure the Tools 8.50 UI couldn’t have been delivered without them) it makes it a lot harder to track down where an element is inheritting its style from.

Freeform style sheets are the equivalent of a straight text CSS file, but they are stored in HEX in PSCONTENT.  This means that you can’t search them easily or do a find and replace on a colour code using SQL very easily, so for every colour that you need to change within a FreeForm style class you have to manually find it and change it.

The job I’ve just finished required me to change 14 different style sheets, 6 of which were FreeForm.

You also have to bear in mind that if you’re rebranding portal, whenever content is drawn from another application (in this case HR), you have to apply the style changes to that database also.