shutterstock_184473665.jpg

Summit 7 Team Blogs

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.

Set up Web Part Connection

 

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:

<!--
Name: dispParent.js
-->

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

jQuery(document).ready(function($) {

//get the ID for the Issue from the Query String
var issueID = getParameterByName("ID");

//find the element with the "Add new item" link.
//note that if you have more than one list on your page, this just finds the first one
var anchorElement = $("a[title='Add a new item to this list or library.']");

//modify the "Add new item" link to call the "NewItem2" function and pass in the Issue ID.
//Be sure to put the path to your site below. You can use relative URL to the web application or the FQDN
$(anchorElement).attr("href","javascript:NewItem2(event,'http://<URL TO SITE>/Lists/Time/NewForm.aspx?IssueID=" + issueID + "');");
//remove the "onclick" attribute from the anchor element as we aren't using it anymore
$(anchorElement).removeAttr("onclick");

});

// The following function should really be put into a utility library
// with all of your commonly called functions
//
// no, I didn't write this function from scratch, I found it at
// http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript
function getParameterByName(name)
{
name = name.replace(/[[]/, "\[").replace(/[]]/, "\]");
var regexS = "[\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if(results == null)
return "";
else
return decodeURIComponent(results[1].replace(/+/g, " "));
}

</script>

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

Add script to Parent Display 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:

<!--
Name: newChild.js
-->

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

jQuery(document).ready(function($) {

//get the Issue ID from they query string
var issueID = getParameterByName("IssueID");

//Set the corresponding Lookup field value to the Issue ID
$("select[title='Issue']").val(issueID);
//use this line to disable the lookup field selection
$("select[title='Issue']").attr('disabled','disabled')
//use this line to hide the lookup field and label entirely
//$("select[title='Issue']").closest("tr").hide();

});

// no, I didn't write this function from scratch, I found it at
// http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript
function getParameterByName(name)
{
name = name.replace(/[[]/, "\[").replace(/[]]/, "\]");
var regexS = "[\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if(results == null)
return "";
else
return decodeURIComponent(results[1].replace(/+/g, " "));
}

</script>

Add script to new item form of child

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!

Disclaimer
The sample scripts are not supported under any Summit 7 Systems standard support program or service. The sample scripts are provided AS IS without warranty of any kind. Summit 7 Systems further disclaims all implied warranties including, without limitation, any implied warranties of merchantability or of fitness for a particular purpose. The entire risk arising out of the use or performance of the sample scripts and documentation remains with you. In no event shall Summit 7 Systems, its authors, or anyone else involved in the creation, production, or delivery of the scripts be liable for any damages whatsoever (including, without limitation, damages for loss of business profits, business interruption, loss of business information, or other pecuniary loss) arising out of the use of or inability to use the sample scripts or documentation, even if Summit 7 Systems has been advised of the possibility of such damages.
SHARE THIS STORY | |