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

User Interface for manipulating multiple inks from custom list form
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.

  1. <asp:Literal ID="Literal28" runat="server" Text="Urls" /> - Urls label  
  2.    <input name="txtURLTitle" runat="server" type="text" id="txtURLTitle" placeholder="Link Title"> - Text box for Link Title  
  3.    <input name="txtURL" runat="server" type="text" id="txtURL" placeholder="Link URL"> - Text box for Link URL  
  4.    <a runat="server" id="btnAddURL" class="addUrlButton" onclick="addURL();"><i class="fa fa-plus"></i> Add Link</a> - ‘+ Add Link’ link  
  5.    <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  
  6. <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,

  1. //our custom namespace  
  2.     var myCustomNS = window.myCustomNS || {};  
  3.     //Creating array  
  4.     myCustomNS.urlArrayList = [];  
  5. //This method adds the Title and URL to array and renders on div   
  6.     function addURL()  
  7.     {       
  8.         var url = document.getElementById('<%=txtURL.ClientID%>');  
  9.           
  10. var urlTitle = document.getElementById('<%=txtURLTitle.ClientID%>')  
  11.        
  12.    if(url && urlTitle)  
  13.            {  
  14.    //In array we are pushing link title and URL, separated by "~"             
  15.  myCustomNS.urlArrayList.push(urlTitle.value+"~"+url.value);  
  16.   
  17. //Calling renderItems() - to show the title, URL and delete link on UI  
  18.             renderItems();  
  19.   
  20.     //Clearing respective controls to add the next links  
  21.             url.value="";  
  22.             url.focus();    
  23.             urlTitle.value="";  
  24.             urlTitle.focus();  
  25.         }  
  26.     }//addURL  
  27. 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  
  28. //renderITems() - This method traverse through array, creates dynamically span to show Title~link and delete link  
  29.             function renderItems()  
  30.             {  
  31.                 var urlLists = document.getElementById('<%= urlLists.ClientID %>');  
  32.   
  33.         urlLists.value= myCustomNS.urlArrayList.join(";");  
  34.   
  35.         var divurllist = document.getElementById("divUrlLists");  
  36.           
  37.    divurllist.innerHTML="";  
  38.           
  39. myCustomNS.urlArrayList.forEach(function(item,index){  
  40.             //split item on '~'  
  41.          //Link Title  
  42.             var itemtitle = item.split('~')[0];  
  43.         //Link URL  
  44.             var itemurl = item.split('~')[1];  
  45. //Creating span element to show Title  
  46.             var span = document.createElement("span");  
  47.             span.innerText=itemtitle;  
  48.         //adding respective node to the div  
  49.             divurllist.appendChild(span);  
  50.   
  51.          //Creating "Delete Link" link  
  52.             var deleteButton = document.createElement("a");  
  53.   
  54.          deleteButton.innerHTML = "<li class='fa fa-minus'></li> " +"Delete Link";  
  55.            //Setting array index as ID of the button. Also used for deleting the link   
  56. deleteButton.id = index;     
  57.             //adding respective item to the div  
  58.             divurllist.appendChild(deleteButton);  
  59.   
  60.         //calling deleteLink () on clicke of "Delete Link"  
  61.             deleteButton.addEventListener("click",deleteLink);  
  62.   
  63.         //Creating span element to show link URL  
  64.             span = document.createElement("span");  
  65.             span.innerText="~"+itemurl;  
  66. //adding respective node to the div  
  67.             divurllist.appendChild(span);  
  68.   
  69.             var brElement = document.createElement("br");  
  70.             divurllist.appendChild(brElement);  
  71.             divurllist.appendChild(brElement);  
  72.         });  
  73.     }//renderItems  
  74. deleteLink() code as below – this method just delete the item from the array “myCustomNS.urlArrayList” and call renderItems() again to show updated UI  
  75. //This method removes the link from the array based on current index  
  76.     function deleteLink()  
  77.     {  
  78.         delete myCustomNS.urlArrayList[this.id];  
  79.         renderItems();  
  80.         return false;  
  81.     }//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.