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~; LinkedIn~;

You can see that the above line, link title (Google, LinkedIn) and link URLs (; 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.

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,

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.