How I went about creating two related lists using JavaScript, Client Object Model and SharePoint 2010-Part2

In Part1, I talked about how I wanted to relate items in two lists using the ID of an item in the first list. The setup for this article is here, hopefully it makes sense.

At this point, I have a  MeetingList item that I am editing, and the ID of the current item is in the current QueryString. This is becasue I used this code in the previous post to redirect to this page:

window.location.href = "/Lists/MeetingsList/EditForm.aspx?ID="+ oListItem.get_id();

Now I want to add an attendee to this meeting. Here are the steps of how I went about this:

• I needed to add a “Add new attendee” button to the MeetingList EditForm.aspx page.  I used this jQuery method to add a new row after an existing field.

NewAttendeesRow='<tr id="NewAttendeesRow"><td nowrap="true" valign="top" width="190px" class="ms-formlabel">Add Attendees</TD><td valign="top" class="ms-formbody" width="400px"><img src="/MediaLibrary/plus_icon.gif"> Add NEW attendee</div></td></tr>';

$('nobr:contains("Meeting Subject")').closest('tr').after(NewAttendeesRow); //There is an exisitng field in the MeetingList named "Meeting Subject"

• This button, when clicked would fire off a function to open a modal dialog box which will create the related attendee/item in the AttendeeList

$('#NewAttendeesRow').click(function() {
ExecuteOrDelayUntilScriptLoaded(openModalDialog,"SP.js");
});

function openModalDialog() {
    var options = SP.UI.$create_DialogOptions();
    options.url = "/Lists/NewAtendee/NewForm.aspx?IsDlg=1&RelatedList="+_spPageContextInfo.pageListId+"&RelatedItem="+GetQueryStringParams('ID');
    options.dialogReturnValueCallback = Function.createDelegate(
                        null, modalDialogClosedCallback);
    SP.UI.ModalDialog.showModalDialog(options);
}

• This code above opens a modal dialog and passes two values via the QueryString values, the RelatedList and the RelatedItem.
  • The RelatedList value comes from the parent list (MeetingList) using the built in variable _spPageContextInfo.pageListId
  • The RelatedItem value comes from the QueryString of the current MeetingList item we are editing using this function (not sure where I found this)

function GetQueryStringParams(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}

• We end up with the MeetingList’s EditFrom.aspx page, and a modal dialog box that contains the AttendeeList’s NewForm.aspx, with related ID and related List being passed to it.

Part 3 will finish off my workaround.