Tuesday, July 23, 2013

SharePoint 2010 - Simple Cascading Lookup with SPServices

A new post on that excellent tool that is SPServices, the jQuery framework / EcmaScript for SharePoint!

A simple scenario: we have two lists of data, for example, Countries and Companies for Countries, and a list which has two columns Lookup, Country and Company.
We want to be able to use the first Lookup, Country, to filter second, Company, showing Companies for the selected Country.

We create the list Nations, with only the Title field.




Now let's create Companies with Title (Company Name) and Country (lookup list to the Nations).



Now, let's create a list CustomList1 that has the two columns Country and Company, respectively lookup of Nations and Companies.

We modify the NewForm.aspx and EditForm.aspx form by entering the following code, making sure to load the SiteAssets. Js file we need:

jquery.SPServices-0.7.2.min.js (download here)
jquery-1.8.2.min.js (tested with this version)

Here's the code to insert in both forms (new and edit):

<script type="text/javascript" src="../../SiteAssets/js/jquery-1.8.2.min.js"> </ script>
<script type="text/javascript" src="../../SiteAssets/js/jquery.SPServices-0.7.2.min.js"> </ script>
<script type="text/javascript">
$ (Document). Ready (function () {
  $ (). SPServices.SPCascadeDropdowns ({
    relationshipList: "Company", // ​​Display Name of List of the second Lookup
    relationshipListParentColumn: "Country", // ​​Static Name of column of the list for the first Lookup
    relationshipListChildColumn: "Title", // ​​Static Name of the column of the second Lookup (Company Name)
    // CAMLQuery: "<Eq> <FieldRef Name='Status'/> <Value Type='Text'> Active </ Value> </ Eq>", // ​​Any query to filter the results on the second Lookup
    parentColumn: "Country", // ​​Display Name of the column as written in the New or Edit form of CustomList1
    childColumn: "Company", // ​​Display Name of the column as written in the New or Edit form of CustomList1
    simpleChild: true // change the display of the second Lookup in simple dropdown
  });
});
</ Script>

So, opening a form, for example, new item:


The second dropdown is blank, and if we select the Country:

We filter the entries in the second dropdown:


Of course, we can add code to do cascading on a third lookup.

The only caution is that the script have the column names displayed in the form : if you change this label or, simply, using a multilingual site, you need to go to edit the script.

And it's possible to call all in one .js (perhaps in the master page...) in order to make the changes only once and not have to change both forms..