SPCD – SharePoint Cascaded Lookup Dropdowns

Update: July 17th, 2011

SharePoint Cascaded Lookup Dropdowns (SPCD) is an entirely JavaScript-based solution for creating Cascading Dropdowns in a SharePoint list form (New or Edit).

Download it from CodePlex

Its main advantages are:

  1. spcdNo need for server backend deployment
  2. No GAC deployment
  3. Easy setup and configuration
  4. Ajax Based – no postback or nasty page reloads
  5. No need for any JavaScript FrameWork (jQuery, Prototype, …)
  6. Uses Entirely SharePoint’s services and DOM
  7. Works in MOSS 2007 / WSS 3.0 and in MOS 2010 / WSF
  8. Use same JavaScript for many lists/forms
  9. Create multiple cascaded relations in the same form

What is a cascaded dropdown? A Cascaded dropdown is a combination of two dropdown lists. By selecting a value in the first one the options in the second get filtered according to its “parent” selection.

Sample uses:
– Continents –> Countries –> Cities,
– Companies –> Contacts,
– Accounts –> Branches –> Contacts,
– Schools –> Classes –> Students

Let’s examine an example below:

We have a site with 3 lists:

1. An Accounts list
image
2. A Branches list that has a lookup column to Accounts list Title column, called “Account”
imageimage
3. Any list that has lookup columns to both of those
image image

When selecting the “Parent” dropdown – in our case the “Accounts” field the “Child” dropdown displays only values that have the same lookup value as the parent – in our case all branches that have the same account as the one we selected in the Account field.

Setup

  1. Download the JavaScript from CodePlex
  2. Upload it to a document library on your SharePoint site
  3. Copy the shortcut URL (Right click the link in Document Library and select “Copy Shortcut”
    image
  4. In the Custom List New Form Add a content editor Webpart below the form. Click here to see how to insert a Content Editor Webpart in a SharePoint 2007 / 3.0 form
    image
  5. Edit the WebPart’s properties and edit the source
    image
  6. Add refference to your uploaded javascript in the source using the following code:
     

    <script type="text/javascript" src="[paste-javascript-url-here]"></</span>script>

    image

  7. Next, open a new JavaScript block and add the configuration line: 
    <script type="text/javascript">
        var ccd1 = new cascadeDropdowns(ParentDropDownTitle, ChildDropDownTitle, Child2ParentFieldIntName, ChildListNameOrGuid, ChildLookupTargetField);
    </</span>script>
  8. The options mean the following:
    1. ParentDropDownTitle: The display name of the parent lookup field
    2. ChildDropDownTitle: The display name of the child lookup field (the one being filtered)
    3. Child2ParentFieldIntName: The internal name of the lookup field in Child list that is getting values from parent list. (Click here to get to know how to get the internal column name)
    4. ChildListNameOrGuid: The display name or GUID of the child list (from where the child dropdown is getting items)
    5. ChildLookupTargetField: The internal name of the field the child dropdown is displaying values of
      In our example above with the list structure as follows:image
      the code would be 

      <script type="text/javascript">
          var ccd1 = new cascadeDropdowns("Account", "Branch", "Account", "Branches", "Title");
      </</span>script>

    image

  9. Save the webpart source code and Webpart’s propertiesimage image

And now you have a working cascading dropdown.

Download SharePoint Cascaded Dropdowns JavaScript from Codeplex

If you find this plugin useful and it saved you hours of development of some money, you can donate to support my further development for the community:

TOP