SharePoint 2013 Hosting – HostForLIFE.eu :: Saving 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.

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.

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 picture 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

<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

//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);

});

}//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.

SharePoint 2013 Hosting – HostForLIFE.eu :: Saving Multiple Links In A List Column And UI On Custom List Form In Visual Web Part

BLOGROLL

Featured On

SharePoint 2013 Hosting – HostForLIFE.eu :: Saving Multiple Links In A List Column And UI On Custom List Form In Visual Web Part

BLOGROLL

Featured On

Tags