My 2p about ERP Solutions, Information Worker Solutions and other software products (mainly Microsoft Dynamics AX and Microsoft SharePoint).

20 April 2009

Add url to the Description of a SharePoint Column

by Patrik Luca 21 comments

Tag



Introduction

If you want to add a url to the Description of a SharePoint Column, this cannot be done by adding HTML tags in the Description field of the Additional Column Settings of a SharePoint Column. HTML tags added in the Description of a column are rendered in plain text, so that is not an option.

You could achieve this though by use of the Content Editor Web Part and some JavaScript.

In next example, I have create an Issue Tracking SharePoint List. In this list, I have a Lookup column called Contact, which points to a Contacts SharePoint List, located in the same site, and at the same level as my Issue Tracking List. I want to add a hyperlink in the description of my Contact Lookup column of my Issue Tracking list to the NewForm.aspx page of my Contacts list to make it more user-friendly for end-users to find where they can add values for that Lookup column.

Step 1: Add the Content Editor Web Part to your NewForm.aspx

Open the NewForm.aspx page of your SharePoint list and add following parameters to the url: PageView=Shared&ToolPaneView=2, so your url looks like <…./Lists/yourlist>/NewForm.aspx?PageView=Shared&ToolPaneView=2.

You can now add the Content Editor Web Part to your NewForm.aspx page. Important is that you add the Content Editor Web Part below the already existing Web Part on your NewForm.aspx page, since we will add some JavaScript to the CEWP to manipulate the input fields. They should already by rendered before we execute our JavaScript.

Step 2: Add the JavaScript in your CEWP

Adding JavaScript in your CEWP can be done by chosing Edit>Modify Shared Web Part and clicking the Source Editor button to the right.

First we add a function to search the column to which we want to add the url to help our SharePoint users. This function I’ve already used in another post: How to set default values based on a query string and make those fields uneditable.

function getTagFromIdentifierAndTitle
(tagName,identifier,title){
var len=identifier.length;
var tags=document.getElementsByTagName(tagName);
for(var i=0;i<tags.length;i++){
var tempString=tags[i].id;
if(tags[i].title==title && (identifier=="" ||
tempString.indexOf(identifier)==
tempString.length - len)){
return tags[i];
}
}
return null;
}


Next we add an element with tag a to the Document object, to add a hyperlink text. This can be done with code as below:


var myLink = document.createElement('a');     
// The contacts list is located in the same site on the same level
// as the list for which the hyperlink is added to a column in
// the NewForm.aspx page here
myLink.href = "/../../Lists/Contacts/NewForm.aspx";
// Open the hyperlink in a new browser window
myLink.target = "_blank";
// Text of the hyperlink
myLink.innerText = "Create New Contact ";

With the following code, we search the SharePoint column on the NewForm.aspx page whose field’s display name equals Contact. The type of the SharePoint column is Lookup. More information about this code can be found in a post on the Microsoft SharePoint Designer Team Blog: Using Javascript to Manipulate a List Form Field.



var theSelect=
getTagFromIdentifierAndTitle("select","Lookup","Contact");
// if theSelect is null, it means that the target list
// has more than 20 items, and the Lookup is being
//rendered with an input element
if(theSelect==null)
{
var theInput=getTagFromIdentifierAndTitle("input"
,"","Contact");   
// Add the previously created hyperlink in front
//of the SharePoint column
  theInput.insertAdjacentElement('beforeBegin',myLink);
}
else

  theSelect.insertAdjacentElement('beforeBegin',myLink);
}


Putting it all together, our added JavaScript in the CEWP should look like this:



<script language="JavaScript">

function getTagFromIdentifierAndTitle
(tagName,identifier,title){
  var len=identifier.length;
  var tags=document.getElementsByTagName(tagName);
  for(var i=0;i<tags.length;i++){
    var tempString=tags[i].id;
    if(tags[i].title==title && (identifier=="" ||
       tempString.indexOf(identifier)==
       tempString.length - len)){
      return tags[i];
    }
  }
  return null;
}

var myLink = document.createElement('a');
// The contacts list is located in the same site on the same level
// as the list for which the hyperlink is added to a column in
// the NewForm.aspx page here
myLink.href = "/../../Lists/Contacts/NewForm.aspx";
// Open the hyperlink in a new browser window
myLink.target = "_blank";
// Text of the hyperlink
myLink.innerText = "Create New Contact   ";

var theSelect=
getTagFromIdentifierAndTitle("select","Lookup","Contact");
// if theSelect is null, it means that the target list
// has more than 20 items, and the Lookup is being
//rendered with an input element
if(theSelect==null)
{
  var theInput=getTagFromIdentifierAndTitle("input"
  ,"","Contact");   
  // Add the previously created hyperlink in front
  //of the SharePoint column
  theInput.insertAdjacentElement('beforeBegin',myLink);
}
else

  theSelect.insertAdjacentElement('beforeBegin',myLink);
}
</script>

The result will look like this:



Remarks




  • The great point about this modification is that our NewForm.aspx page isn’t unghosted. So adding new columns to our list in the future will become availalbe straight away in our NewForm.aspx page.


  • You could put the code in an external JavaScript file, so you can run it on several pages. This way, you should also maintain your code on only one place. If you’ve put your code for example in an external file called HyperlinkNewForm.js and uploaded it in the Site Collection Documents library, you can replace the code in the CEWP added to your NewForm.aspx as follows:

    <script language="JavaScript" 
    src="http://<webapplurl>/SiteCollectionDocuments/
    HyperlinkNewForm.js">
    </script>



Comments 21 comments
KP said...

Very helpful post - thank you!

Patrik Luca said...

Great to hear it was useful for you, KP!

eva said...

Yes nice info will be having a go.

Marcel said...

any idea how i would modify this to add the list item's own url to a column?

Patrik Luca said...

Marcel,

just change this line of code myLink.href = "/../../Lists/Contacts/NewForm.aspx"; and replace it with the url of the list.

Anonymous said...

This is great, thanks so much for posting.

Zoltán said...

Hello,

This is great,I really appriciated it!.Could You tell me how to get it work with LookupMulti columns?

thanks

sonners said...

Is there anyway to refresh the dropdown list on the Newform.aspx page (the parent page)?

sonners said...

can the refreshed page not lose the fields already filled in?

Kerry said...

Can anything be done to hyperlink words in the SharePoint Description field in the newform.aspx so the actual http link does not show up but only the hyperlined words that are clickable.

I want to type the words and when users click on it they go to the linked site.

haresh said...

Hello Patrick,

I am trying to read the values from the lookup fields from the form.

Tried using the syntax, but no success..

var tempTraveller = getTagFromIdentifierAndTitle("SELECT","Lookup","Traveller");
alert("temp traveller: " + tempTraveller );

if (tempTraveller == null)
{
var theInput = getTagFromIdentifierAndTitle("INPUT","","Traveller");
if (theInput == null)
{
alert("theInput: " + theInput );
}
}

Katie said...

Hello Patrik,

Thanks for this awesome bit of javascript coding. I've found it very helpful.

I find myself following in the footsteps of the above commentators.

Would you be able to provide any hints on how to add this type of comment URL to a LookUp field where you can select multiple items?

I've tried:

var theSelect=
getTagFromIdentifierAndTitle("select","SelectResult","Contact");

Using the table from the link you provided, but it didn't seem to work.

I'm sure I am missing something obvious...but I am not a guru on SP by any stretch of the imagination.

Any pointers/tips would be very appreciated.

Thank you for your time,
Katie

L01sLane said...

So this is not working for me. I'm getting the following error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; InfoPath.2; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 1.1.4322; .NET4.0C; MS-RTC LM 8)
Timestamp: Fri, 21 Jan 2011 19:16:43 UTC


Message: 'length' is null or not an object
Line: 2
Char: 3
Code: 0
URI: http://server/javascript/HyperlinkHandbook.js

Anonymous said...

Is it worked for any body?

Anonymous said...

Exactly what I wanted to build! This one works great, thank you! :D

One dumb question, as I am not into Javascript: How can I put the Link after the Input field?

Anonymous said...

This is great. I would also like to know how to put the link after the input field. Thank you.

Rajdeep said...

Nice article. Helped me a lot.
To put the link after the input field use afterEnd. Something like this - theSelect.insertAdjacentElement('afterEnd',myLink);

Deepali said...

i am trying to use this in sharepoint2010 but no success. Its not showing any error but does not show anything.

rankroots said...

I like this post. it's really great.http://rankroots.com/

Anonymous said...

HI Partik,

I'm trying to use your code but I'd like to display an HTML page with some description of my drop-down options. I'd like my new window to be without toolbars, menubars, etc but I can't do it with the link. I'll need to use some function that will open a new window that i can control. Is it possible to use a function in your code instead of a link? Could you suggest how to do it? Thanks in advance. Luba

bkwdesign said...

I've noticed on calendars in my Sharepoint 2010 (no frills.. just foundation) that it depends on how I create my hyperlink. I'm talking about going in through Outlook, to a sharepoint synch'd calendar.

The following hyperlink creation method causes the hyperlink to render normally, irregardless of the fact that SharePoint's Description field claims to be 'plain text' or whatever.

1.) Launch a new calendar event / or edit existing event (again, via Outlook interface)
2.) Type in the plain name first, e.g. "Agenda Document"
3.) Highlight the plain name (or portion of) to be hyperlinked
4.) Press CTRL K to launch the same URL dialog
5.) Paste the URL that you copied from wherever, hit OK

Patrik Luca, Ieper, BELGIUM
Feel free to use or spread all of the content on my blog. In return, linking back to my blog would be greatly appreciated. All my posts and articles are provided "AS IS" with no warranties.

Subscribe feeds via e-mail
Subscribe in your preferred RSS reader

Subscribe feeds rss Most Read Entries

Subscribe feeds rss Recent Entries

Categories

Recommended Books


Subscribe feeds rss Recent Comments

This Blog is part of the U Comment I Follow movement in blogosphere. Means the comment field of this blog is made DOFOLLOW. Spam wont be tolerated.

Live Traffic Feed

Recent Visitors

Blog Archive

My Blog List

Followers

Guest Links