Parent-Child datamodel in #SharePoint

In some of our projects we have a parent-child relationship between 2 lists. With the out-of-the-box tools it is not easy (or intuitive) for the end users to edit the child items.

In this example we have the following data model:

image

We have 2 custom lists:

  • Projects
  • Steps: contains a lookup column (projectId) to the projects lists to link the child items

Each list has his own EditForm, DispForm, NewForm pages that you can edit in SharePoint Designer. In the EditForm page of the Projects list we want to visualize the steps that are linked to that project.

We start with duplicating the EditForm page (in SharePoint Designer) because the golden rule is: never customize the default pages, always start with a copy!

On our new page (EditFormWithSteps.aspx) we add a DataView and use the Steps list as data source. We filter the data source by creating a Querystring parameter. When you open a EditForm (or DispForm) page in the browser you always get the “ID” querystring parameter in the url. We use this to filter the data source:

image

image

Now we see the steps that are linked to this project. Of course we want to add some features like editing the steps of add a new step.

Editing the steps

To edit the steps we must provide a link in the DataView. I’ve chosen to use the title field. Format this field as hyperlink:

image image

Link to the EditForm.aspx page of your steps list and add the ID querystring and a Source querystring parameter. You can find the ID by using the (Fx) button and select the ID. The Source parameter is used to return to this page after editing the step. Enter the url to the EditFormWithSteps.aspx page and add the ID of the project.

image

Now we created the link to edit the steps.

Adding a new step

This is the hard part. Adding a new step. You could add a link to the NewForm.aspx page of the steps list but then the user has to select the project (ID) that owns this step. I want to avoid this so I prepopulate the form with the projectId.

Therefore I use some JQuery and plain javascript.

Duplicate the NewForm.aspx file of the steps list and add the following code to enable the prepopulation. This article on EUSP describes how you do this.

The only thing we have to do now is create the link to the file so that the projectId is populated:

In the EditFormWithSteps.aspx page I added a hyperlink to the NewFormPrePopulated.aspx file of the steps list. That hyperlink must contain 2 parameters: a projectId and a source parameter to return to the right page after adding a new step.

image

I use a javascript function to generate the link because I must concatenate the ID from the current querystring:

<script type="text/javascript">

                function getQueryParam(key) {
                    var regex = new RegExp(key+"=([^&=]+)","i");
                    var match = regex.exec( window.location );
                    if( match != null ) {
                        return match[1];
                    } else {
                        return null;
                    }
                }
                function GoToNewStep(){
                    var url = "../Projects/NewFormPrepopulated.aspx?projectficheId=" + getQueryParam("ID") + "&Source=
http://server/site/Lists/Projectfiche/EditFormWithSteps.aspx?ID=" + getQueryParam("ID");           
                    alert(url);
                    window.location=url;
                }
               
</script>

Now you can add a new step. After add the step you’re redirected to the project page again where you can see the new step in the list.