How To Save Multiple Links In A List Column And UI On Custom List Form In Visual Web Part

In one of our projects, we had a requirement to associate multiple links for items in one of our custom lists. We had our custom form ready to create the items using Visual web part. On our custom form, while creating list item, we needed to give an option to the users to add the custom links (client-side adding and removing feature as well) and show those custom links when a user will see those items. In SharePoint, there is no OOB way to store the custom links. In field of type URL, we can store only one link at a time. So, we took a smart sep and used the Note field to store the multiple links.

Approach

Since in SharePoint, we can have a URL field which stores only one link at a time, we have decided to go with Note field with plain text. We stored the links separated by semicolon (“;”) such as -

Google~http://google.com; LinkedIn~http://linkedin.com;

You can see that the above line, link title (Google, LinkedIn) and link URLs (http://google.com;http://linkedin.com) are separated by field sign “~”.

But here, the most important thing is to provide the UI while creating the item through our custom form.

Our UI

Figure 1 - User Interface for manipulating multiple inks from custom list form

In the above figure, “+ Add Link” button adds the new link and renders below as “Google” and “Linked In” added.The “-Delete Link” button removes the link from the UI. We have implemented all this functionality client-side through JavaScript.

I thought this is the reusable feature and can be used very easily in any of our SharePoint applications.

Implementation Steps

We have our custom Visual web part for custom list form, through which, the user adds the values in list fields. We have the following HTML controls in our user control to render the UI, as shown in figure 1.

<asp:Literal ID="Literal28" runat="server" Text="Urls" /> - Urls label
<input name="txtURLTitle" runat="server" type="text" id="txtURLTitle" placeholder="Link Title"> - Text box for Link Title
<input name="txtURL" runat="server" type="text" id="txtURL" placeholder="Link URL"> - Text box for Link URL
<a runat="server" id="btnAddURL" class="addUrlButton" onclick="addURL();"><i class="fa fa-plus"></i> Add Link</a> - ‘+ Add Link’ link
<asp:HiddenField ID="urlLists" runat="server"></asp:HiddenField> - Hidden field to store all the links separated by “~” sign, we access the value of this field to store the links in list field of type note
<div id="divUrlLists"></div> - Div to render the added links and “-Delete link” button dynamically

In the above code snippet, we are using div with ID “divUrlLists” to dynamically render and to show the link title and URL and delete link. As per the above code snippet, we are calling “addURL()” JavaScript method.

Code for “addURL()” method is as,

//our custom namespace
var myCustomNS = window.myCustomNS || {};
//Creating array
myCustomNS.urlArrayList = [];
//This method adds the Title and URL to array and renders on div
function addURL()
{
var url = document.getElementById('<%=txtURL.ClientID%>');
var urlTitle = document.getElementById('<%=txtURLTitle.ClientID%>')
if(url && urlTitle)
{
//In array we are pushing link title and URL, separated by "~"
myCustomNS.urlArrayList.push(urlTitle.value+"~"+url.value);
//Calling renderItems() - to show the title, URL and delete link on UI
renderItems();
//Clearing respective controls to add the next links
url.value="";
url.focus();
urlTitle.value="";
urlTitle.focus();
}
}//addURL
renderItems() method code as below, which traverse through array “myCustomNS.urlArrayList” and renders the URL title, URL link and “-Delete Link” link on the UI
//renderITems() - This method traverse through array, creates dynamically span to show Title~link and delete link
function renderItems()
{
var urlLists = document.getElementById('<%= urlLists.ClientID %>');
urlLists.value= myCustomNS.urlArrayList.join(";");
var divurllist = document.getElementById("divUrlLists");
divurllist.innerHTML="";
myCustomNS.urlArrayList.forEach(function(item,index){
//split item on '~'
//Link Title
var itemtitle = item.split('~')[0];
//Link URL
var itemurl = item.split('~')[1];
//Creating span element to show Title
var span = document.createElement("span");
span.innerText=itemtitle;
//adding respective node to the div
divurllist.appendChild(span);
//Creating "Delete Link" link
var deleteButton = document.createElement("a");
deleteButton.innerHTML = "<li class='fa fa-minus'></li> " +"Delete Link";
//Setting array index as ID of the button. Also used for deleting the link
deleteButton.id = index;
//adding respective item to the div
divurllist.appendChild(deleteButton);
//calling deleteLink () on clicke of "Delete Link"
deleteButton.addEventListener("click",deleteLink);
//Creating span element to show link URL
span = document.createElement("span");
span.innerText="~"+itemurl;
//adding respective node to the div
divurllist.appendChild(span);
var brElement = document.createElement("br");
divurllist.appendChild(brElement);
divurllist.appendChild(brElement);
});
}//renderItems
deleteLink() code as below – this method just delete the item from the array “myCustomNS.urlArrayList” and call renderItems() again to show updated UI
//This method removes the link from the array based on current index
function deleteLink()
{
delete myCustomNS.urlArrayList[this.id];
renderItems();
return false;
}//deleteLink

This is a small code snippet for adding multiple links features to the list items but it's very useful. It’s reusable as well. It's simple JavaScript, easy to understand and implement.