Skip Ribbon Commands
Skip to main content

In the previous section we created the world's simplest CRM application consisting of a Clients list and a Notes list with a one-to-many relationship between the two. Thanks to SharePoint 2010, this application has referential integrity so Notes won't become orphaned if you delete a Client. However, this application is almost impossible to use at this point since the user must manually create the relationship between Notes and Clients. Yuck!

To automatically create a relationship between the two, you have to build a user interface that provides Actions from the Clients list to add related notes as shown in Figure 2.

Figure 2. Actions allow you to create Notes from the Client list

 fig06.PNG

You also need to write a small amount of jQuery code to add to the New Item form of the Notes list. That code will pull the value from the action and plug it in to the ClientID field on the form. OK, let's do it.

Building the User Interface

 To create the user interface for the Simple CRM, follow these steps:

  1. On the Home page of the site, add a view of the Clients list. The Home page forms the main user interface for the entire application. Any lists or libraries in the application can be considered "back end data" and hidden from direct use.
  2. Open the SharePoint site in SharePoint designer and navigate to the Clients list.
  3. On the Clients list page in the Custom Actions section in lower right corner, click New. Designer displays the New Action dialog as shown in Figure 3.
  4. Complete the New Action dialog with the settings in Table 3 and click OK.
  5. Return to the browser and refresh the page. Add Note now appears on the Actions menu of the list as shown in Figure 2.

Figure 3. Adding an Action to create a new Note from the Clients list

 fig06.PNG

Table 3. New Action settings

​Field ​Setting
​Name ​Add Note
​Description ​Log a contact with this client.
​Navigate to URL (selected) {ListUrlDir}/../Notes/NewForm.aspx?ClientID={ItemId}
​Button image... ​/_layouts/images/notescallout.gif
​Rights mask ​EmptyMask
​Sequence number... ​1
 

 Here are the key points:

  • The Name and Button image fields determine what appears in the List item's Action menu.
  • The Navigate to URL field tells the browser what to do when the Action is clicked. In this case it navigates to the new item form in the Notes list and passes the current ClientID as a query string in the URL

If you create a new Client at this point and then try to add a Note, you'll see that the Action works as expected but the ClientID in the new Note is still blank. We still need to write that jQuery code...

Wiring Up the Relationship

 To get the ClientID in to the Note automatically, follow these steps:

  1. Create a document library in the SharePoint site named includes. You need to have a place to store jQuery snippets and a library is the easiest way to do that.
  2. Download a copy of spjs-utility.js from here and upload it to the includes library.
  3. Create a text file named getClientID.htm containing the code in Listing 1.
  4. Copy getClientID.htm to the includes library.
  5. Navigate to the Notes list, click on the List tool bar and select Default New Form as shown in Figure 4.
  6. Edit the New Item form and add a Content Editor web part at the bottom of the page to import the getClientID.htm file from the includes library.
  7. Save the changes to the New Item form.
  8. Test Adding a new Note from the Clients list on the Home page.

Figure 4. Editing the Notes list New Item form

 fig07.PNG

Listing 1. The getClientID.htm jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../includes/spjs-utility.js"></script>
<script type="text/javascript">
    function getParameterByName(name) {
        var match = RegExp('[?&]' + name + '=([^&]*)')
                    .exec(window.location.search);
        return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
    }
    var fields = init_fields_v2();
    var newID = getParameterByName('ClientID');
    var oldID = getFieldValue('ClientID');
    // From http://sharepointjavascript.wordpress.com/2010/05/28/get-or-set-value-for-sharepoint-field-in-newform-editform-and-dispform-get-only-in-dispform/
    setFieldValue('ClientID', newID);
    $("nobr:contains('ClientID')").parent('h3').parent('td').parent('tr').hide();   
</script>

 

The key points are:

  • It's not exactly easy but once you've done it, it's not exactly hard.
  • Creating Actions that pass query strings is a good way to create items in related lists.
  • jQuery smooths out the bumps.

Beyond this Sample

Simple CRM demonstrates a one-to-many relationship. Many-to-many relationships require an intermediate table to manage the connections. Also this sample uses only one foreign key in Notes. Some applications require more than one foreign key. There are ways to address both needs, but that is beyond the scope of this demo.

Finally, the action created in Figure 3 doesn't use the context dialogs that are so cool in 2010. Try replacing the Navigate to URL with this code instead:

Listing 2. Displaying the New Item form in a dialog box! 

 javascript: SP.UI.ModalDialog.showModalDialog( { url: '{ListUrlDir}/../Notes/NewForm.aspx?ClientID={ItemId}' } );

You can use this same approach to create relationships between lists and libraries. For example, the following Action URL passes the ClientID to the Edit Form dialog when uploading a document to Simple CRM.

Listing 3. Action URL for linking a document to a specfic list item 

javascript: SP.UI.ModalDialog.showModalDialog( { url: '{ListUrlDir}/../../_layouts/Upload.aspx?List={9118E5CF-EA6E-40AE-BE2B-D624F1983052}&RootFolder=&ClientID={ItemId}' } );

References