Monday, June 1, 2009

Open SharePoint Link List Item in new window

One of the frequently asked questions from SharePoint developers, "How to open Links from Links List in a new window?".

There are lots of way that we can find doing some simple googling:

1. Directly update the List Schema file. But this is only applicable if this need to be done for all the applications. Otherwise this is not a best practice. reference 1 reference 2
2. Create a new style for the Content Query web part to use by modifying ItemStyle.xsl reference
3. Using the Summary Links web part instead. This web part will allow you to designate how each link opens up (in a new browser or the current one).
4. Using some tricks with javascript. But the reference that follows required additional effort for end users. reference
5. Using dataview webpart. reference

If any of the above metho doesn't suit your taste, and in case you are a JavaScript fan, there is an easy process to acheive this:

Step 1: Open the page where you have added the Links webpart.
Step 2: Add a "Content Editor Web Part" to the page.
Step 3: Move the "Content Editor Web Part" below the Links webpart.
Step 4: Edit the "Content Editor Webpart" from corresponding "Modify Shared Web Part".
Step 5: Do either of the following activities:
a. Copy and paste the JavaScript code below and paste it to Content Editor's "Source Editor....".

<script language="javascript" type="text/javascript">
var tbl = document.getElementsByTagName('table');
for(var i = 0; i < tbl.length; i++)
if(tbl[i].getAttribute("Summary") == "Links")
var anc = tbl[i].getElementsByTagName('a');
for(var j = 0; j < anc.length; j++)
anc[j].setAttribute('target', '_blank');

b. Create a separate .js file with the JavaScript code above and upload the file in a Library. Next add the path of the .js file to the Content Editor Web Part's "Content link" textbox.

That's all. Using this process, you can add the javascript to a particular page, or even to the master pages. But this javascript code should always appear after the Links webpart (as mentioned in Step 3 above).