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 Smile

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.

Project Server Quick Link

 

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.

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

$(document).ready(function () {
    $('a[href^="http://www.epmsource.com"]').attr({ target: "_blank", title: "Opens in a new window" });
});

</script>

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:

 
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="TargetBlankLinks" Url="SiteAssets">
      <File Path="TargetBlankLinks\jquery-1.5.2.min.js" Url="TargetBlankLinks/jquery-1.5.2.min.js" Type="GhostableInLibrary"/>
      <File Path="TargetBlankLinks\PopNewWindow.js" Url="TargetBlankLinks/PopNewWindow.js" Type="GhostableInLibrary" />
  </Module>
</Elements>

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.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
		<CustomAction
		  ScriptSrc="~Site/SiteAssets/TargetBlankLinks/jquery-1.5.2.min.js"
		  Location="ScriptLink"
		  Sequence="10">
		</CustomAction>
		<CustomAction ScriptSrc="~Site/SiteAssets/TargetBlankLinks/PopNewWindow.js"
		  Location="ScriptLink"
		  Sequence="20">
		</CustomAction>
</Elements>

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.

Visual Studio 2010 Feature

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.

Advertisements

One thought on “Add the target attribute to Project Server quick links

  1. I was extremely pleased to find this site. I wanted to thank you for your time for this wonderful read!

    ! I definitely liked every bit of it and I have
    you saved as a favorite to look at new stuff in
    your blog.

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