Article

Customize Related Items field in SharePoint 2013

SharePoint 2013 introduced a new field to the Tasks’ list called “Related Items”. This field allows you to link other SharePoint items and/or documents to a specific task. Learn more about to customize related items field in SharePoint 2013.

< Back to Insights
Insights  <  Customize Related Items field in SharePoint 2013

SharePoint 2013 introduced a new field to the Tasks’ list called “Related Items”. This field allows you to link other SharePoint items and/or documents to a specific task. Learn more about to customize related items field in SharePoint 2013.

Related Items

SharePoint 2013 introduced a new field to the Tasks’ list called “Related Items”. This field allows you to link other SharePoint items and/or documents to a specific task. The association occurs by using a wizard to look up and relate items anywhere within SharePoint.

Figure 1: Related Items Wizard


Figure 2: Related Items field with one relation

It’s a welcome change from prior versions, where one solution might have been to create a lookup into another list or library. A solution like that was not only restrictive (to just one library), but also not restrictive enough (all items in that list). So if the item you were trying to reference was located in a very large list, trying to find that item or document becomes a hassle since you only have the title to search upon. The Related Items wizard allows you to search using the different views, filter on columns, and even add new items!

Figure 3: Lookup field

I will say that lookups do have their place, and they are very handy with their cascading/restrictive delete functionality. Related Items which are deleted, will automatically be removed as a reference.

Customizing Related Items

As SharePoint fields go, the “Related Items” field is quite shy. By default, it’s located in the “_Hidden” group, which means when creating a new column on any list, it will not appear.

Note: You have to change its group in order to use it in other lists.


Figure 4: Related Items site column

Not only that, it only shows up on the “View Properties” page, and not even on the “Edit Properties”, which makes it such an under-utilized field. One that could be overlooked entirely!

And when viewing it on the list view page, it doesn’t even want to reveal what its holding! Two related items? Which two?

Figure 5: Out of the box view of Related Items

Note: its actually stored as json: [{ItemId:'[ID]’,WebId:'[GUID]’,ListId:'[GUID]’}]

 

Customize Related Items

Now, let’s try to get “Related Items” to come out of its shell a little bit, and show what those related items are. In order to do this, you will need to override its view display, which SharePoint easily lets you do.

For this example, I’ve modified the sp.ui.relateditems.js file to do our bidding which is to list the related items, like on the edit form, removing the “Add Related Item” and “Remove” links.

To use my example, you will need to upload the sp.ui.relateditems.custom.js file into your site collection. Copy the URL. And then paste it in the “JS Link” box on the list view page.


Figure 6: List View webpart properties

Note: I uploaded mine into the Master Page gallery as a “Design File” for simplicity sake. And used the JS Link value of
~sitecollection/_catalogs/masterpage/sp.ui.relateditems.custom.js

Now, instead of the “2 related items” text, we get the actual items and what they show! No more guessing what the related items are, because they now render (asynchronously).


Figure 7: Related Items custom template

This is just the starting point. You can easily override it even more, starting with having the Related Items field appear on the edit form.

sp.ui.relateditems.custom.js

Download

Continue the Conversation with Our Team
Get in touch with us.

Contact Us