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..

Comments

Post a Comment

Popular posts from this blog

Sharepoint 2010 - Enable/Disable Ribbon Button with EcmaScript

-
I show you a detailed example of how to enable and disable a ribbon button according to the current user’s group. The example uses “EnabledScript” attribute of the CommandUIHandler of the ribbon button. Then the EnabledScript is built with EcmaScript to find groups and user info. Lets Start with creating a Ribbon button first. 1. Create a empty project. 2. Deploy it as a Farm solution. 3. Right click on the feature and click “Add feature”. 4. Right click on the project and add a new “Empty Element” item. 5. Next add the below code to add a custom Ribbon button to your document library. <Elements xmlns=”http://schemas.microsoft.com/sharepoint/” > <CustomAction Id=”ButtonForGroupUsersOnly” Location=”CommandUI.Ribbon” RegistrationId=”101″ RegistrationType=”List” Title=”Owners Group Button”> <CommandUIExtension> <CommandUIDefinitions> <CommandUIDefinition Location=”Ribbon.Library.ViewFormat.Controls._children”> <Button Id=”Ribbon.L...
Read more

Sharepoint 2010 - Customizing Quick Launch with pages

-
Image
How to show different quick launch menu items in different pages? The quick launch in Sharepoint is an object common to all pages of the site. To show menu items according to the page you visited, I followed client side method with javascript (jquery). Here's how, using Sharepoint Designer 2010. On css stylesheet of the site, I added this instruction, which hides all the items in the Quick Launch: . s4-ql ul.root> li { display: none; } Then, make note of the position of the menu items in the quick lanuch: eg. 0 - Document Libraries 1 - Lists 2 - MyLink      0 - MySubLink1      1 - MySubLink2 3 - MyOtherLink 4 - MyLastLink The pages follows the following rules: Page1 shows 0,1,4 Page2 shows 0,2,3 Page3 shows 0,2 (and sub ​​links 1), 3.4 And now, I change the master.page, adding references to jquery and inserting the following code: //get all items in the quick launch var li_nav = $(".vertical-menu>ul>li"); //get...
Read more

Sharepoint 2010 - Migrate List-based Workflows between Sites and Site Collections

-
Thank you Gavinmckay, you saved me! From his blog:  http://gavinmckay.wordpress.com/2011/08/29/howto-move-or-migrate-sharepoint-2010-list-based-workflows-between-sites-and-site-collections/ I’ve experienced this issue a lot when trying to migrate workflows between test SharePoint 2010 farms and production farms, in particular with workflows attached to lists. When moving a workflow to another site collection or server farm, the association to the list is broken and the workflow cannot be attached to the list. You also cannot use SharePoint designer to fix this via the standard methods as the unattached workflow cannot be reattached to the list. List-based workflows are tied to three different lists – the “main” source list where the data is held (such as a Forms library or custom list), a task list, and a workflow history list. The latter in particular is tricky, because it is a hidden list and cannot be viewed via the normal interface. The fix for this is to modify the sou...
Read more