Add the target attribute to Project Server quick links

Recently on the Project forums, a user asked if it was possible to add a target attribute to a menu item in the quick links of Project Server, i.e. the target=”_blank” to force the link to open in a new window. This capability can be pretty useful, especially when you want to provide links to non project server content that supports the use of the tool such as a PMO help site, or perhaps even your favourite EPM blog

Unfortunately the Project Server quick link functionality doesn’t give you an option to set a target and no way to decorate a html anchor statement to insert one.

So how can we make this work?

Well my first thought was to look at using jQuery in a content editor web part on the page. The code required is relatively easy, in this case I have added a link to my blog on the PWA page via the quick links which I am going to target.

[sourcecode lang=”javascript”] <script type="text/javascript” src="SiteAssets/jquery-1.5.2.min.js">[/sourcecode]

The code above firstly provides a reference to the jQuery library, then targets the URL http://www.epmsource.com and adds the target=”_blank” and a title ‘Opens in a new window” to the link on the page.

On the surface, this looks like it’s addressed the need, but it only works on the page that the content editor web part was placed. To make sure the fix is on every page we either have to add a content editor web part to every page, which isn’t possible, or we need to add the code to every page using code, luckily this is pretty easy to implement using a SharePoint Sandboxed solution.  At it’s core, the module will deploy jQuery and the code in lines 3 to 5 into the PWA SiteAssets library, this is achieved by the module elements.xml file which looks like this:

[sourcecode language=”xml”]

[/sourcecode]

The important bits above is the Url statement which tells SharePoint where to put the file, and the Type statement that tells SharePoint it can drop the files into a document library, in this case the SiteAssets library. Once the code is deployed, all that is needed is to get the PWA page to reference the script files, this is done be a simple element file and the wonderful ScriptLink command.

[sourcecode language=”xml”]

[/sourcecode]

You’ll notice we reference the two files dropped into SharePoint via the module using the ScriptSrc statement, the ~Site bit, tell SharePoint to look in the current site path, so /PWA/SiteAssets, which is required as we are using a Sandboxed solution. Finally the Sequence statement allows us to define the order in which the scripts are loaded, making sure jQuery is available before our JavaScript code calls it. Finally all that is required is to tie all of the above in a feature and we can then build and deploy it to PWA.

Once deployed you should see the link specified has been targeted by jQuery and target=”_blank” and the ‘Open in a new window’ title added.  Of course if you need to add these target statements to any more links, simply add a new row to the PopNewWindow.js file.

I have uploaded a copy of the Visual Studio solution file to my SkyDrive account should you wish to have a bit of a closer look.

• Project Server 2010
• Sandboxed Solution
• SharePoint 2010