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>
View my profile
Very helpful post - thank you!
Great to hear it was useful for you, KP!
Yes nice info will be having a go.
any idea how i would modify this to add the list item's own url to a column?
Marcel,
just change this line of code myLink.href = "/../../Lists/Contacts/NewForm.aspx"; and replace it with the url of the list.
This is great, thanks so much for posting.
Hello,
This is great,I really appriciated it!.Could You tell me how to get it work with LookupMulti columns?
thanks
Is there anyway to refresh the dropdown list on the Newform.aspx page (the parent page)?
can the refreshed page not lose the fields already filled in?
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.
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 );
}
}
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
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
Is it worked for any body?
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?
This is great. I would also like to know how to put the link after the input field. Thank you.
Nice article. Helped me a lot.
To put the link after the input field use afterEnd. Something like this - theSelect.insertAdjacentElement('afterEnd',myLink);
i am trying to use this in sharepoint2010 but no success. Its not showing any error but does not show anything.
I like this post. it's really great.http://rankroots.com/
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
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
I Like this Post.......
thank u for helpfully post, it'e easy for me as a beginner with SharePoint.
kindly if u looking for SharePoint, maybe SharePoint 2013, you may visit asphostportal.com
Hi,
How do i add url to description of a single-line text field?
Patrick, can you assist in getting the default description on a field in SPS 2013 with a hyperlink value. Interesting I have tried adding hyperlink code in calculated column with numeric value set , but while viewing in Modal view it shows the code and not the link.
helpfull to solve my problem...many tanks
Hi Patrick, wondering if this works in SharePoint 2013. I've used the script as suggested but upon refresh, nothing changes. I see the following error, "cannot read property insertadjacentelement of null". Hope you can help.
Post a Comment