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.

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):

Now I’m all for being warned if I’m doing something unsupported and I know Windows 7 isn’t supported yet, but probably will be in the near future.  I’m not going to swap my client OS just to keep the PIA happy, but I don’t want to be warned every single time.  Also, it’s not a very well formatted error message as it throws out the alignment of the logon screen and it just looks a little messy.

I wasn’t going to do anything about my niggly annoyance until someone else wondered how to remove it then it piqued my curiosity.

As far as I could see there are two ways to fix this, find a way of adding Windows 7 to the supported OSes, or hide the warning message.

I tried many variations of OS codes in the browser.xml file as that appears to be where the supported OSes are read from (the sharper eyed among you may have noticed that I’ve added Windows 7 to the list in the above screenshot).  This had no effect however, so I admitted defeat in trying to fix the cause and resigned myself to just trying to hide the symptom.

The HTML behind the signon page is ‘signin.html’ within ‘<PIA_HOME>\webserv\<domain>\applications\<site>\PORTAL.war\WEB-INF\psftdocs\<node>’.  We can’t just comment out the error sections as we only want to hide this specific error message, other errors like ‘invalid password’ we still want to see.

The first step is to hide the browser error message.  Search for ‘id=”browsercheck_error”‘ and you’ll see this section.  Comment out as shown.

<div style="text-align:center">
<h1 id="error_img" style="display:none"><a id ="error_link" href="javascript:setFocus();" tabindex="1"><img src="<%=psCtxPath%><%=psHome%>/images/PT_LOGIN_ERROR.gif" alt="<%=130%>" border="0"/></a></h1>
<h2 id="login_error"> <%=error%> </h2>
<h2 id="discovery_error"> <%=ps.discovery.error%> </h2>
<!--<h2 id="browsercheck_error" style="text-align:left"> <%=browserCheck%> </h2>-->
</div>

This prevents the text from showing, however we also want to prevent the warning image being displayed for this warning also.

Search for ‘setErrorImg’ and you’ll see this function.  Comment as shown and add the line below.

function setErrorImg()
{
var login_error = document.getElementById('login_error').innerHTML;
var discovery_error = document.getElementById('discovery_error').innerHTML;
/*var browsercheck_error = document.getElementById('browsercheck_error').innerHTML;*/
var browsercheck_error = "";
login_error = login_error.replace(/^\s+/,"");       // delete leading spaces
discovery_error = discovery_error.replace(/^\s+/,"");
browsercheck_error = browsercheck_error.replace(/^\s+/,"");
if (login_error.length != 0 || discovery_error.length != 0 || browsercheck_error.length != 0)
{
document.getElementById('error_img').style.display = 'block';
document.getElementById('error_link').focus();
}
else
setFocus();
}

Bounce your PIA and now the message won’t be displayed when you use Windows 7, however other error messages will still appear as desired.

Note: Updated 27th Jan after Jim Marion’s suggestion below on my incorrect commenting syntax.

Migrate Navigation Collection with App Desginer

First, you need to identify which are the correct Navigation Collection Content References to add to your App Designer project.

Run the following SQL to get the PORTAL_OBJNAME of your Navigation Collection:

select * from PSPRSMDEFN
 where portal_name='EMPLOYEE'
   and portal_prntobjname='CO_NAVIGATION_COLLECTIONS';

Now we need to find the PORTAL_OBJNAMES of every link within your collection.  Run the same SQL, but replace the Parent Object with the name of your Navigation Collection (the PORTAL_OBJNAME from the first SQL).

This should give you a list, many of which will look like this:
ADMN_S200810276523143947898702

Within App Designer add both your Navigation Collection and the links/folders within it:

(If there are too many too enter manually you could always insert directly into PSPROJECTITEM.)

You’ll also want to add your User Homepage (for each Oprid that is using it) so that the homepage layout gets copied between environments too.  This will save you from having to manually select the collection in every PIA.

Migrating the Pagelet

So now you’ve migrated the Navigation Collection, before you log in to check we also need to migrate the Pagelet.

Within the PIA navigate to PeopleTools > Portal > Pagelet Wizard > Export/Import Pagelets.  This page helps you to create the Data Mover scripts you’ll need.

Select the checkbox next to your Pagelet, then press ‘Generate Scripts’.  These should be run in Data Mover to export and import your pagelet through your environments.

Once this is done you’ll need to bounce the Application Server, then you’ll be able to log into your target environment and check your migrated pagelet.

NB: Nothing shown here requires the Enterprise Portal product.

An example can be seen here:

Creating the Navigation Collection

First, let’s create the Navigation Collection.  You can have whatever menus/components you want in your collection.

1. Go to PeopleTools > Portal > Portal Utilities > Navigation Collections
2. Add a Collection with an appropriate Name and Description
3. Click Add Folder
4. Select Menu Folder, from the Employee Portal.
5. Use the prompt to locate the folder to add, click the plus folder next to a high level menu to expand it and choose a child menu.
6. Highlight the top level, and click Add Folder again. Repeat the process until you have added all your folders.
7. I also added a links directly to the Components I used most often, like Process Monitor, and moved them to the top of the list.
8. Click Save (and remember the name of your new Collection).

Publishing the Navigation Collection as a Pagelet

1. Go to PeopleTools > Portal > Pagelet Wizard > Pagelet Wizard
2. Add a New Pagelet and fill out the Title etc
3. Choose a Data Type of Navigation Collection
4. Choose a Portal of Employee and prompt to find your Navigation Collection (it seems to prepend ADMN to mine for some reason)
5. I normally reduce the Max Child Links to 5.
6. I choose the Menu layout.
7. I set the ‘Parent Images’ = Small, Turn off ‘Parent Descriptions’ and set the ‘Child Display Type’ = Simple List.
8. On the final page, check HomePage Pagelet, choose a folder, and set the security required.

That’s your Pagelet done. Now add it to your Homepage.

Adding a Pagelet to your Homepage

1. From the PIA Homepage, select the ‘Personalize Content’ link.
2. Place a Check in the Checkbox next to the Pagelet you want, then click Save.
3. Click the Personalize Layout link.
4. Select whether you want a 2 or 3 column layout, and move the new Pagelet to the column you wish it to appear in, click Save.

I’ll be setting it up in a VM and tinkering with it to see what it can do.  As a result I’d love to see screenshots, descriptions or – if you’re feeling particularly generous – some code if you’ve used MonkeyGrease in the past.  I’ll give full credit to anything used, and if you do send code I won’t use it on client site, purely for the purposes of demonstrating MonkeyGrease’s functionality.

I’m aware that others have blogged about this in the past, including Jim Marion, Rich Manalang and one of the Grey Sparling team, and there is a Google Group for it.  If there is anything else out there I’d love to know.  Once I’ve got all the info in I’ll post a consolidated write-up and include all the links.

For those new to MonkeyGrease, see here.

This is quicker and cleaner to implement, but only works with IE. If your client uses Firefox this isn’t the answer for you!

So how do you do it?

1) Create the MOTD.html file in the same location as before, but this time leave out any tags and style info, just have the text.

2) Edit the signin.html page.

Place the following in the scripts section:

function include(url)
{
var xml = new ActiveXObject("Microsoft.XMLHTTP");
xml.Open( "GET", url, false );
xml.Send()
document.writeln(xml.responseText);
}

And add the following in the same place as before.


<td><div align="center">
   <p class="psloginerror">
      <SCRIPT language='JavaScript'>
         include("http://<web_server>/MOTD.html");
      </SCRIPT>
   </p>
   <p class="pslogintext"> <%=traceLink%> </p>
   <p class="psloginerror"> <%=error%> </p>
   <p class="psloginerror"> <%=ps.discovery.error%> </p>
</div></td>

This solution was gleaned from a discussion on Customer Connection and in particular from a gent named Jeremy Radwan.

One way is to embed an iFrame in the signin.html page that points to the file containing the ‘Message of the Day’ text. The signin.html loads on PIA boot and knows it has an iFrame in it, but doesn’t look for the file until someone loads the page. Then you can change the text as often as you like without having to bounce the PIA. If the message text is longer than the box, a vertical scroll bar appears.

(This solution is better for mixed browser clients, however if you are Internet Explorer only consider this solution instead.)

There are a few things to consider with this technique:

1) If the file doesn’t exist, the frame will show a nasty looking ‘cannot be found’ error. Instead of deleting it, just put an empty file there and all will be fine.

2) It needs a small change to the Style Sheet on the Web Server. This is a simple one-off change but without it the surrounding box looks nasty – and you’re changing one delivered file anyway.

3) The flat file it calls has to have some style info in it, otherwise the text looks nasty (large, black, Times New Roman).

How do you do it?

All paths refer to files and directories underneath the ‘<pshome>\webserv\<domain>\applications\peoplesoft\PORTAL\’ folder.

1) Add the following style to the css file (/<PIA>/styles.css):

.psmotdframe {
background-color: #EEEEEE;
border: 1px solid #D6D6D6;
}

2) Create the following file (/MOTD.html):

<p style="font-family: arial; color: red; font-size: 9pt; text-align: center;">
The quick brown fox jumped over the lazy dog.
</p>
(the tags and style info seem to be something I can’t get around, and without them it looks ugly)

3) Edit the Signin.html file

In the same place as last time, add the following row:

<td><div align="center">
<IFRAME class="psmotdframe"
 src="http:///MOTD.html"
 width="240" height="80"
 scrolling="auto" frameborder="0">
</IFRAME>
<p class="pslogintext"> <%=traceLink%> </p>
<p class="psloginerror"> <%=error%> </p>
<p class="psloginerror"> <%=ps.discovery.error%> </p>
</div></td>
Then bounce the PIA (it’ll be the only time you have to do this).

Further development would perhaps include hiding the box if the file doesn’t exist or trying to find a creative way of avoiding including the style tags.

As the signon page is (obviously) presented before signin, it’s not going to be a ‘PeopleCode and database’ kind of solution, but I wanted something neater than just hacking the HTML each time. It turns out that it’s simpler than I feared.

First, you need to locate the folder on your web server containing signin.html. For me this was:
<pshome>\webserv\<PIA>\applications\peoplesoft\..
..\PORTAL\WEB-INF\psftdocs\<PIA>\

Open it up with notepad, and head for the bit that has the text ‘traceLink’ in it (it’ll be near the bottom). Add the extra line shown below:

<td><div align="center">
<P class="psloginerror"> <%=9000%> </P>
<p class="pslogintext"> <%=traceLink%> </p>
<p class="psloginerror"> <%=error%> </p>
<p class="psloginerror"> <%=ps.discovery.error%> </p>
</div></td>

The 9000 is just a substitution variable that is replaced when the PIA boots.

Next edit the text.properties file that can be found in the same directory. Anywhere you like, add the line:

9000=The custom message appears here!

Save both files and bounce the PIA. The signon page will now display your new message.

A couple of caveats:

1) You’ll have to make this change once for each PIA. So for each environment you want this in, and for each web server (if you do load balancing) you’ll have to make this change.
2) The logon screen changed with Tools 8.48. Although it looks different, I’m pretty sure the method to get the signin message would remain the same.

I’d seen someone accessing the value of a field from JavaScript within an HTML Area before, and although I couldn’t find the post (I believe it was on SparkPath, but could be wrong) it set me thinking.

One solution (there may be better answers, but this was my submission) was as follows:

Place a Long Edit box on the page, this’ll be the field that contains the characters to counted. Add an HTML Area. This will contain a ‘counter’ field showing how many characters left, so position it just below the Long Edit box. Set the HTML Area value as constant and add the following code (remove my explanatory notes when you c+p):

<input readonly type="text" name="counter_field" size="3" maxlength="3" value="200">characters left

The snippet above places the counter field on the page. Note the name is set to ‘counter_field’ and the max is set to ’200′. This is the starting value for the character count-down.

<SCRIPT LANGUAGE="JavaScript">
function CharCounter()
{
if (document.win0.DMD_CHAR_COUNT_DESCR200
.value.length > 200)
document.win0.DMD_CHAR_COUNT_DESCR200.value = document.win0.DMD_CHAR_COUNT_DESCR200
.value.substring(0, 200);
else
document.win0.counter_field.value = 200 - document.win0.DMD_CHAR_COUNT_DESCR200
.value.length;
}
The above function counts the number of characters in our Long Edit box (named DMD_COUNT_CHAR_DESCR200 in my page – view source in the PIA to see what yours is named, it’s usually <recname>_<fieldname>). If the length is greater than 200, it refills the field with the first 200 chars (effectively undoing any extra characters you add after the first 200). If the length is not more than 200 it updates the counter field with how many characters there are left.

function addEvent(obj, evType, fn, useCapture){
if (obj.addEventListener){
obj.addEventListener(evType, fn, useCapture);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be attached");
}
}
This function above allows us to add events to existing PeopleSoft fields. I can’t claim any credit for it as it was copied straight from the guys at GreySparling’s post on extending the usability of PeopleSoft. Thanks guys!

AddEvent(document.win0.
DMD_CHAR_COUNT_DESCR200, "keydown", CharCounter, false);
</script>
Finally, we add the Character Counter function call to our Long Edit box. This means whenever there’s a KeyPress and the focus is on our field, our function is fired.

Ok, that’s my effort … can anyone improve on this?