Creating a Parent/Child List Relationship in SharePoint 2013

So, yes, it’s time once again for my vNext obligatory Parent/Child list relationship post! Can you blame me though? The second post I ever wrote was on the subject and it’s still one of my most read even though it’s so old that the video links are dead. Thanks archaic video hosting site, whoever you were.

Anyway, of course one of the first things I had to do was see what the differences were between SharePoint 2010 and SharePoint 2013 on this topic. You know what I found? Luckily, for the purposes of creating a parent/child list relationship the process is ALMOST identical to my previous SharePoint 2010 blog post on the subject:

Creating a SharePoint Parent/Child List Relationship–No SPD Version

I say “almost” because a couple of things did change:

1. The anchor element for adding a new child entry changed on the list view
2. It appears that we no longer have to worry about the +/- 20 item lookup issue!

Other than that, I didn’t have to modify the functionality from my previous blog post on the subject at all. In fact, it looks like at this point if you were comfortable using jQuery in SharePoint 2010 that the transition to SharePoint 2013 will be pretty much effortless. What’s the feeling? oh yeah.. that’s called relevancy… strange sensation…

Anyway, enough of the rambling, let’s run through the actual process of creating a parent/child list relationship in SharePoint 2013.

The Process

So, for those who care more about the “what” than the “how”, the steps we will be taking are:

1. Create Lists and Document Library for scripts
2. Add the Child list to the Parent item display form and create a web part connection to only display the appropriate child items
3. Create script for the Parent’s display form and add script to the display form page
4. Create script for the Child’s new form and add script to the new form page.

That’s is! That’s all there is to it. So, let’s get down to business.

Create Lists and Document Library for scripts

So, the biggest difference you’ll notice at first between SharePoint 2010 and 2013 is how you create lists. It’s now an “App” to create a list? Didn’t make much sense to me either. However, in an effort to help the lowest common denominator, the below video walks you through creating the lists and document library we will be using. To remain constant with my previous posts on the subject we will be creating a parent “Issue” list and a child “Time” list that has a lookup to Issue.

Add the Child list to the Parent item display form

Except for the SP 2013 ui enhancements, this process is exactly the same as SharePoint 2010

Create script for the Parent’s display form and add script to the display form page

Now we are going to write a script and place it on the Parent list display form page. This script finds the “Add New Item” link on the Child list and hijacks the element’s href attribute to call the “NewItem2“ function (Same as SharePoint 2010). As part of the function call to NewItem2 we will pass in the the URL to the New Item form of our child list and pass the ID of the Parent item as a query string variable so that the child new item form can know the ID of the parent.  Here is the script’s we will be using:

And here’s the video for how to place the script on the parent’s display item form:

Create script for the Child’s new form and add script to the new form page

Now we need to create a script for the child’s new item form and place it on that form’s page. This script will read the ID of the parent from the Query String variable “IssueID” and then set the value of the Lookup field on the form to that value.  The script will then disable the lookup field to keep those pesky users from changing it. The below script also has a line that will hide the lookup field and label if you would prefer that approach:

Tada!

So yeah, that’s all there is to it. Pretty anticlimactic I know… The last thing I will note is that I’m referencing the jQuery library from Microsoft’s CDN (Content Delivery Network). I usually host my jQuery library locally, but I’m trying to alleviate the issues for those who just copy and paste the script and then can’t figure out why the jQuery library didn’t get loaded.

If this version of SharePoint is like the others, you probably have 3 or 4 ways of getting this same functionality working. If you know of a better way, please let us all know… If I find a better way I’ll be sure to post as well. However, once you get the hang of this method, it’s pretty simple. You are going to want to learn your jQuery for this version of SharePoint, I can promise you that much…

Thanks again for stopping by!