Parent-child-grandchild relationship in SharePoint 2010 lists with javascript only

09.12.2011 I have updated the solution to v1.1 to let the user chose the icon (or no icon) before the “child” title. The code for the file “ParentChildResources.js”, and the CEWP code for “Parent DispForm” and Child DispForm” has changed. The new “argObj-property” “iconBefore” should be the path to the image to prepend to the “child title”.

I got this request:

Hi Alex,

I am new to SharePoint and have been struggling with steep learning curve and would really appreciate your help…

I created a parent-child-grandchild relation where I inserted a related view in the parent’s dispform to show all children and also in the child’s dispform to show all grandchildren. I’ve also followed http://geekswithblogs.net/SoYouKnow/archive/2010/12/16/creating-a-sharepoint-parentchild-list-relationshipndash-sharepoint-2010-edition.aspx to set the parent’s ID on the child’s newform using javascript but I need to take it a step further. In the child’s newform I need to retrieve the parent list’s 2nd field and use that value to build a dynamic drop down field in the child’s newform. The field items in the drop down preferably to be pulled from another list for the ease of maintenance but hard coding is also acceptable. This is probably a no-brainer for you so I hope you wouldn’t mind spending some time on it and I will make sure some donation is made . Thank you so much!

This involves putting scripts in NewForm and/or DispForm in three lists. Please follow the steps carefully.

Please note that this code is for SharePoint 2010 only.
Step 1

Create the three custom lists used in this example:

  • Parent
    This list has the Title field only.
  • Child
    Add one field of type Lookup (single choice) with the name “Parent”. This lookup should target the title field of the "Parent" list.
  • Grandchild
    Add one field of type Lookup (single choice) with the name “Parent”. This lookup should target the title field of the "Child" list.
Step 2

Download the code from here
The code is presented in individual folders so it’s easy to get the right code in the right form.

Step 3

Important:
Edit the code that goes in the CEWPs to fix the script src attributes in all files, the “childListUrl” in the DispForm code and the various “argObj” variables if your lists or fields has different names. You will have to read trough the code for the CEWPs to find the bits to change.

The file “ParentChildResources.js” does not need any modification.

Upload the code to a shared document library and maintain the folder structure (or rename the files so that you know which file goes where).

Step 4

Add CEWPs to the list forms and insert the code corresponding with the folder and file name. It is important that you use the content link option to link to the code.

To add a CEWP, go to the list, activate it by clicking in the “list area” to bring up the list tools ribbon. Select the tab “List” and “Form Web Parts”.

You find the content link option like this:
Edit the page and activate the CEWP. In the ribbon toolbar, select “Web Part Tools” and then “Web Part Properties”.

To ensure you get the correct file path, go to the document library, right click the file and select “Copy shortcut”. Paste this URL in the content link field. You might want to edit the URL to make it relative.

Note Add the CEWP below the list form.

The result should look like this

Parent
IMG
Child
IMG
Grandchild
IMG

Final words

This solution uses the Client Object Model introduced in SharePoint 2010 and therefore it will not work on previous SharePoint versions.

To keep this solution clean and simple, the last bits from the request regarding the lookup column, is kept out of this post – it will be emailed to the person requesting this article.

If there is demand for it, i will post it as an appendix to this post later on.

Hope someone can make use of this code.
Alexander

31 Comments on “Parent-child-grandchild relationship in SharePoint 2010 lists with javascript only”

  1. Pingback: SharePoint 2010: Recopilatorio de enlaces interesantes (XXVI)! - Blog del CIIN
  2. Pingback: SharePoint 2010: Recopilatorio de enlaces interesantes (XXVI)! « Pasión por la tecnología…

  3. the “customOpenInDialog” function doesn’t seem to want to work for me. I replaced it with the “OpenPopUpPage” function found out of the box in SharePoint 2010 and it works like a charm.

    Colin

    1. Hi,
      I actually did not know of the function “OpenPopUpPage”. Did you get any errors on the page? – any other indications of what went wrong?

      Alexander

  5. Updated to v1.2 and changed the function that opens the “child newform” as some users reported errors when using the existing function.

    Something had gone wrong while uploading the v1.1 release so it never surfaced…

    Alexander

    1. Hi,
      Thank you for the feedback. This will be true for PeoplePickers and DataTime field as well. Let me know if it’s a problem, and I’ll see if i get the time to update the solution.

      Alexander

    2. Wow that was fast! Thanks for the quick update. I noticted it yesterday evening but I thought I was having a connection issue.

      Also, thanks for all your work here. It’s people like you that enables power users (i.e., none coders) like me with the tools to do some cool stuff!!
      thank you!
      Mike d.

  9. Hello Alexander, thank you for the article, its a very nice solution, i need to do the same thing but with document libraries instead of lists, we dont have the newform.aspx in that case and also an upload popup window shows before you can save the data in the library, how can i use your technique in a similar case but using document libraries instead of lists?

  10. I am getting the following error. “One or more field types are not installed properly. Go to the list
    settings paage to delete these fields.”. Would someone please help me?

  11. Hi Alexander,

    First of all thx a lot for sharing, it has been a great help.

    I have a question: Is it possible to place the “Children”-field in between two fields? E.g.

    -Title “This is the title”
    -Children “Child one”
    -AnotherField “Input abc”

    I have been trying, but I cannot figure out how to place it other then at the end of the last field in my list.

    Let me know, if you can do more magic 🙂

    BR,
    Jonas

    1. Hi,
      In the “DispForm” code for “Parent”, replace this line:

      $("table.ms-formtable").append(buffer.join(''));

      with this code

      var fields = init_fields_v2();
$(fields["Title"]).after(buffer.join(''));

      This will insert the “Children” field after the “Title” field.

      Alexander

  12. Hi Alex,

    Managed to get this all working, question. Instead of having the drop-down select box. Do you have a way to id the lookup so that the user just has to add new records to Child and Granchild forms?

    Thanks Brian

      1. Hi Alex,
        Here is what I am looking for:
        You have 3 lists
        1. Employees
        2. Tasks
        3. Task Approvals

        Each Employee would have their own tasks and each task could have many Task Approvals.
        Basically a 1 to many to many.

        So if you open an employee record you could add a task, then view the task and add an approval for that task.
        Does this make sense?

        Thanks Brian

      2. Hi,
        Sorry for the delay. I think you could use the vLookup solution as this has what you are asking for.

        Set ut the solution as specified in this article: https://spjsblog.com/2012/07/21/vlookup-for-sharepoint-2010-2/ and refer this article https://spjsblog.com/2013/08/20/vlookup-for-sharepoint-2013-v1-5/ for details on the latest version.

        You should be able to create the three lists like this:

        Employee
        Add one column named vLookupTasks of type calculated column, with an empty formula like this =””

        The vLookup solution must be added to the DispForm of this list. Configure it to look in the Tasks list in the field “Employee” using “[currentItem:ID]”. Set it up with “InURL” from field “ID” to field “Employee”.

        Task
        Add one column of type lookup – single choice – name it for example “Employee”. This columns targets the “Employee” list in a field of your choice.

        Add one column named vLookupTaskApproval of type calculated column, with an empty formula like this =””

        The vLookup solution must be added to NewForm and DispForm of this list. Configure it to look in the TaskApproval list in the field “Task” using “[currentItem:ID]”. Set it up with “InURL” from field “ID” to field “Task”.

        TaskApproval
        Add one column of type lookup – single choice – name it for example “Task”. This columns targets the Tasks list in a field of your choice.
        The vLookup solution must be added to NewForm in this list.

        Hope this helps you on the way.

        Alexander

    1. Hi Alex,

      I went through the demo vids and started from scratch but for some reason, I cannot get the parent to trigger the
      Config form. I’ll try again. Question: instead of using an html webpart I used content editor webpart and linked the
      Libraries, could that ahev anything to do with it. I am able to see them in my code fine. The two [javascript] tags were visible in the actual forms after I added them in an HTML form.
      Thanks,
      Brian

      1. Hi,
        If this is vLookup you must trigger the setup “manually” the first time (as described in the article under “First setup”).


        First setup
        Please note that the setup must be MANUALLY triggered the first time. Set up the scripts, create the vLookup column and then – in DispForm – add this to the URL to create the list:
        /Lists/mylist/DispForm.aspx?ID=[an existing ID in your list]&vLookupSetup=1

        Alexander

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.