SharePoint 2010 Filtering Lookup column using JavaScript


Scenario

SharePoint 2010 custom list (or a library) with a lookup column and we need to filter the values based on some criteria. This applies to cascading drop-down lists where the target drop-down is a look-up column.

A classic example here is filtering out Countries based on selected Region.

In SharePoint 2010 we would have both Region and Country as look-up column which reference their respective list. Country list would have a region column (lookup on Region List), indicating the region to which the country belongs to.

Normally we would write a JavaScript code to do the following:

  • Get the Country drop-down control, using getTagFromIdentifierAndTitle function (Implementation provided in the code below).
  • Fetch the country values from Country list based on the selected region (using CAML query).
  • Remove the values from Country drop-down which the not present in the retrieved values. We need to do this because Country column is a lookup column and values would be populated automatically.

Problem

The problem is with rendering of lookup column (in Internet Explorer) when the values in lookup column is more than 20. If the number of items in lookup column is less than 20, then it is rendered as a tag. However, if the number of items is 20 or more than 20 then the lookup column is rendered as INPUT. So while writing the logic of filtering we need to consider this complication.

Solution

First we will declare the required variables and configure On Load function for SharePoint.

var result;
_spBodyOnLoadFunctionNames.push(“Initialize()”);
 

In my example I am picking up the value for filtering on which the target drop-down will be filtered, from a hidden field variable. Then I write a CAML query to get the values from the Country List and load the result in context variable.

function Initilize() {
var ctx = new SP.ClientContext.get_current();
var filterToken = document.getElementById(”);
var website = ctx.get_web();
var targetList = website.get_lists().getByTitle(“CountryList”);
var camlQuery = “”;
camlQuery += “” + filterToken.value + “”;
camlQuery += “”;
var query = new SP.CamlQuery();
query.set_viewXml(camlQuery);
result = targetList.getItems(query);
ctx.load(result);
ctx.executeQueryAsync(OnQuerySucceeded, OnQueryFailed);
}
 

If the above process is successful we want to fire the OnQuerySucceeded function else we want OnQueryFailed method to be called.

Here is implementation of getTagFromIdentifierAndTitle function.

function getTagFromIdentifierAndTitle(tagName, identifier, title) {
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i = 0; i < tags.length; i++) {
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == “” || tempString.indexOf(identifier) == tempString.length – len)) {
return tags[i];
}
}
return null;
}

In OnQuerySucceeded function we will check whether the drop-down has been rendered as option tag or an input tag. Based on this value we will process the filtering accordingly. In this example I have written code only for more than 20 items condition i.e. when the drop-down list is rendered as input tag.

function onQuerySucceeded() {
var isOption = false;
var arrayLookUpValue = new Array();
var arrayLookUpId = new Array();
var walker = 0;
var theInput = getTagFromIdentifierAndTitle(“select”, “”, “Country”);
 
/*If theInput variable is null here, we can infer that the control has been rendered as an input tag*/
if (theInput == null) {
theInput = getTagFromIdentifierAndTitle(“input”, “”, “Country”);
 
/*Set textbox as readonly so that user is unable to type in the values*/
theInput.setAttribute(“readonly”, “true”);
isOption = false;
}
else {
isOption = true;
}
 
if (theInput != null) {
var enumerator = result.getEnumerator();
 
/*Here we iterate through the result and add the values to array. I have used 2 different arrays to stored Id and Value for simplifying the logic*/
while (enumerator.moveNext())
{
var lookUpItem = enumerator.get_current();
var lookUpValue = lookUpItem.get_item(“Action”).get_lookupValue();
var lookUpId = lookUpItem.get_item(“Action”).get_lookupId();
if (lookUpValue != null && lookUpValue != undefined){
arrayLookUpValue[walker] = lookUpValue;
}
else{
arrayLookUpValue[walker] = “”;
}
if (lookUpId != null && lookUpId != undefined){
arrayLookUpId[walker] = lookUpId;
}
else{
arrayLookUpId[walker] = “”;
}
walker++;
}
 
/*If the drop-down is Option tag*/
if (isOption != true) {
var newChoicesList = ”;
for (var i = 0; i 0){
 
/*Set the values to choice property of the drop-down variable*/
theInput.choices = newChoicesList.substring(0, newChoicesList.length – 1);
}
Else{
theInput.choices = “(None)|0”;
}
theInput.value = “”;
}
else{
/*Code to handle the less than 20 items scenario*/
}
}
}
function onQueryFailed() {}
Advertisements

About Rupesh

.NET and SharePoint 2010 developer
This entry was posted in Misc and tagged , , . Bookmark the permalink.

One Response to SharePoint 2010 Filtering Lookup column using JavaScript

  1. Hello! I just wanted to ask if you ever have any problems with hackers?
    My last blog (wordpress) was hacked and I ended up losing many months of hard
    work due to no backup. Do you have any methods to stop hackers?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s