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
Continue reading......
View my profile
