Creating a Internet Explorer 9 Jump List for Project Server

By blurg64

Internet Explorer 9One of the coolest features of Internet Explorer 9, other than the standards compliance and in the case of the Release Candidate, the general speed and stability improvements, is the ability to pin sites to the Windows 7 taskbar allowing you to launch your favourite websites with one click.

With a little more effort, it is possible to define a number of task specific entry points into your site through a jump list that is available when the user right clicks on a pinned site. Imagine the possibilities of this for users of Project Server, having the ability to navigate directly to their timesheet page, or into the business intelligence dashboards all from a jump list entry on the Windows 7 taskbar.

After some inspiration from Brian Farnhill’s excellent SP Jump List Codeplex project, I set Project Server Jump Listout to build a slightly more simplistic version that a Project Server administrator could deploy to PWA easily and provide a number of static links into Project Server functions for any user that pinned the PWA site. In this case, we are going to add a number of links to key Project Server functions such as Project Center, My Tasks and Server settings.

Adding the links is as simple as embedding a small piece of JavaScript within the PWA landing page. The JavaScript defines the attributes of the jump list, namely:

  • the name of the jump list (Project Server Links)
  • the jump list task icon
  • the jump list task name
  • the link to invoke when the jump list task is clicked

and wraps them up inside a try / catch and a couple of other JavaScript calls that Internet Explorer 9.0 recognises and interprets.

[sourcecode language=”javascript”]

try {

window.external.msSiteModeCreateJumplist(‘Project Server Links’);

// Server Settings

window.external.msSiteModeAddJumpListItem

(‘Server Settings’,

‘/pwa/_layouts/pwa/admin/admin.aspx’,

‘/_layouts/inc/pwa/images/ProjectServer.ico’);

// Personal Settings

window.external.msSiteModeAddJumpListItem

(‘Personal Settings’,

‘/pwa/_layouts/pwa/home/personalsettings.aspx’,

‘/_layouts/inc/pwa/images/ProjectServer.ico’);

// Timesheets

window.external.msSiteModeAddJumpListItem

(‘My Timesheets’,

‘/pwa/timesheet.aspx’,

‘/_layouts/inc/pwa/images/ProjectServer.ico’);

// My Tasks

window.external.msSiteModeAddJumpListItem

(‘My Tasks’,

‘/pwa/tasks.aspx’,

‘/_layouts/inc/pwa/images/ProjectServer.ico’);

// Resource Center

window.external.msSiteModeAddJumpListItem

(‘Resource Center’,

‘/pwa/resources.aspx’,

‘/_layouts/inc/pwa/images/ProjectServer.ico’);

// Project Center

window.external.msSiteModeAddJumpListItem

(‘Project Center’,

‘/pwa/projects.aspx’,

‘/_layouts/inc/pwa/images/ProjectServer.ico’);

window.external.msSiteModeShowJumplist();

}

catch (ex) {

// fail silently

}

[/sourcecode]

You will notice that the items in the JavaScript are in a reverse order to that which they appear in the jump list, this is required as when IE is building the list, it puts the most recent item read on the top of the list. Customising the list is as simple as choosing what items you wish to link to then updating the JavaScript accordingly. The Try / Catch ensures that if there is an error, you won’t get a ‘Error on Page’ error on your PWA instance.

Once you have customised the JavaScript to contain the links you want all users to see when pinned, save the file as PS Jumplist.txt to a document library within your PWA site and note the URL of the document.

Content Editor Web PartTo add the JavaScript into the page itself, put the PWA page into edit mode via Site Actions > Edit Page, and add a Content Editor web part to the footer web part zone. Using the Edit Web Part properties set the content link to the URL of the PS Jumplist.txt file. It’s also a good idea to rename the content editor web part in the Appearance section to something more meaningful, in this case I have called it JavaScript – IE9 Jump List.

Once the configuration has been completed, save the PWA page.

Now when users open the PWA page, the custom JavaScript will be included in the page. If that user happens to be using Internet Explorer 9 and pins the site, the JavaScript will fire and the various items added to the IE 9 jump list.

Of course, as I highlighted above, this solution is fine for static jump list links, but in many Project Server implementations users may have access to different items, depending on their Project Server group memberships. In the implementation above, should the user not have access, they will get an access denied error. A more elegant solution would be to check the users access level and to dynamically build up the JavaScript code as a result, stay tuned, I am working on it Smile

Update: 20/12/11 – As noted in the comments, you will of course need to wrap the above javascript in a tags for it to work correctly.