Creating a Internet Explorer 9 Jump List for Project Server

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.

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
			}

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 <script type=”text/javascript”> </script> tags for it to work correctly.

About these ads

6 thoughts on “Creating a Internet Explorer 9 Jump List for Project Server

  1. Pingback: Tweets that mention Creating a Internet Explorer 9 Jump List for Project Server « EPMSource -- Topsy.com

  2. Pingback: IE9 Jump List for Project Server - MSDN Blogs

  3. Thanks, very ingenious

    Gave me some initial trouble to get it working, but after surounding the code with a script tag it worked like a charm.

      • Thanks Darren and Jeroen, I have updated the post to include a statement about the script tags. Just tested it again in my VM and it works a treat.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s