How-To: Build a relation between SharePoint List and Document Library

Problem

Adding documents to a list item in SharePoint is by default only possible by using attachments. By default it is not possible to build a relation between a list and a document library. The SharePoint solution to solve this gap are document sets. However, document sets are not always the best solution.

I often ran into this issue during developing new solutions and that’s why I already found some different ways for solving that. Most of all I like the last one which uses as much default functionality as possible and as less code as possible.

Solution

The solution are two client side rendering scripts (CSR) written in JavaScript. The scripts are using jQuery.

I found out that if you place a document library webpart onto a page and add the parameter “Rootfolder” to the URL you are able to control which content the webpart is showing. So I would just had to create a folder for each list item in the document library, place the document library webpart on the display form of the list item and manipulate the link to open the display form. All this is done by the two CSR scripts.

Step by step guide to implement the solution

Step 1

First of all there are two must have components to use:

  • Custom list
  • Document library

Go to “Site Contents” and create them.

If you are working on SharePoint Online you’ll have to change the custom list to “Classic Experience”.

Step 2

On the custom list we need a column to save the link between list item and folder of the document library.

Add a “Single line of text” column to the custom list named “ctsolLookup“.

Step 3

Download the code from GitHub and store it into the SiteAssets/js folder of the SharePoint site.

Edit ListFormCSR.js and DoclibFormCSR.js – adjust the list and library name in line 5 and 8.

Step 4

On a SitePage add a list view webpart with a view to the custom list. Go to “Edit Web Part” and in the “Miscellaneous” section add the following “JSLink”:

~site/SiteAssets/js/jquery-3.1.0.min.js | ~site/SiteAssets/js/ListFormCSR.js

Step 5

Now open the display form of one list item and edit that page. Edit the list items web part, and again go to “Miscellaneous” and add the same “JSLink” here:

~site/SiteAssets/js/jquery-3.1.0.min.js | ~site/SiteAssets/js/ListFormCSR.js

Do the same for the new and edit form of the list.

Step 6

Onto the display form of a list item also insert the document library webpart. Click “Edit web part” and add this “JSLink”:

~site/SiteAssets/js/jquery-3.1.0.min.js | ~site/SiteAssets/js/DoclibFormCSR.js

Conclusion

ListFormCSR.js in the NewForm of the list will create a new folder in the document library for each item and saves the folders name into ctsolLookup column. In the DisplayForm and EditForm it will hide the lookup column and manipulate the title link of the document library webpart. Last but not least it is linked in the view webpart to manipulate the link to the DisplayForm of the item adding the Rootfolder parameter.

DoclibFormCSR.js is used to manipulate all folder links inside of the document library webpart to ensure that still the correct content is shown.

Leave a Reply