Sunday, August 1, 2010

SharePoint 2007: Filtering List View web part with JavaScript

SharePoint Out-of-the-box views are extensively used in most of the portals developed.


Out of the box views are basically List View Web Parts which show the list items based on certain predefined configuration. E.g. The filter condition or sorting column. The columns to be displayed in the view are also pre-configured in the view settings.

Many a times we have a requirement wherein we are required to provide the users with the ability to filter on these views as per their wish.

One way is to create different views and pre-configure the views with all the possible filter conditions that are to be provided.

There is an easier and a user- friendly way by which we can achieve the filtering of these Out of the box list views.

Consider the following SharePoint list


A simple SharePoint list

It has a column called ‘Status’ which has a value ‘Approved’ if the record is approved and blank if the record is not Approved.

The list view web parts are pre-configured to accept certain query strings based on which they can filter themselves.

The query strings can be in the following format:

Somepage.aspx? FilterField1=Column_Name_1&FilterValue1=Column_Value_1&FilterField2=Column_Name_2&FilterValue2=Column_Value_2

Here FilterField1 , FilterField2 are names of the columns while FilterValue1 and FilterValue2 are the values for those respective columns on which the filtering needs to be done.

The FilterValues here can also be blank.





To insert a simple filter right at the top of this list view,

Add a CEWP web-part above the list and add the following HTML code in it.

<table width="40%">
<tr>
<td><b>Filter: </b></td>
<td>
<input type="checkbox" id="inpApproved" name="chckApproved" value="Approved" title="Approved" onclick="javascript:reloadFilter(this, 'approved');" /> Approved
</td>
<td>
<input type="checkbox" id="inpNotApproved" name="chckNotApproved" value="NotApproved" title="Not Approved" onclick="javascript:reloadFilter(this, 'notapproved');" /> Not Approved
</td>
<td></td>
</tr>
</table>

This will create two simple checkboxes as an interface for the user to select the filter criteria.
Now let’s define the JavaScript function that will reload the page with the required query string parameters as per the filter criteria selected by the user.


<script type="text/javascript" language='javascript'>


function reloadFilter(submitObject, type)
{
var url = window.location.toString();
var startURL = url.substring(0, url.indexOf('.aspx')+5);
var submitValue = submitObject.value;

if(submitValue == 'Approved')
{
if(submitObject.checked == true)
{
if(document.getElementById('inpNotApproved').checked == false)
{
window.location = startURL + '?FilterField1=Status&FilterValue1=Approved';
}
else
{
window.location = startURL;
}
}
else if(submitObject.checked == false)
{
if(document.getElementById('inpNotApproved').checked == true)
{
window.location = startURL + '?FilterField1=Status&FilterValue1=';
}
else
{
window.location = startURL + '?FilterField1=Status&FilterValue1=None';
}
}
}
else if(submitValue == 'NotApproved')
{
if(submitObject.checked == true)
{
if(document.getElementById('inpApproved').checked == false)
{
window.location = startURL + '?FilterField1=Status&FilterValue1=';
}
else
{
window.location = startURL;
}
}
else if(submitObject.checked == false)
{
if(document.getElementById('inpApproved').checked == true)
{
window.location = startURL + '?FilterField1=Status&FilterValue1=Approved';
}
else
{
window.location = startURL + '?FilterField1=Status&FilterValue1=None';
}
}
}
}


</script>


Now, that we have the page reloading JS ready, lets maintain the state of the checkboxes when the page refreshes with the help of the following JS function.
<script type="text/javascript" language='javascript'>

function LoadCheckBoxes()
{
var url = window.location.toString();
var status = '';
url.match(/\?(.+)$/);
var params = RegExp.$1;
var params = params.split("&");
var queryStringList = {};
var selectionFlag = false;

for(var i=0;i<params.length;i++)
{
if(params[i].indexOf('FilterField1=Status') != -1 )
{
status = params[i+1].substring(params[i+1].indexOf('=')+1);

if(status== 'Approved')
{
document.getElementById('inpApproved').checked = true;
document.getElementById('inpNotApproved').checked = false;
}
else if(status== '')
{
document.getElementById('inpApproved').checked = false;
document.getElementById('inpNotApproved').checked = true;
}
else if(status == 'None')
{
document.getElementById('inpApproved').checked = false;
document.getElementById('inpNotApproved').checked = false;
}
selectionFlag = true;

}
}

if(!selectionFlag)
{
document.getElementById('inpApproved').checked = true;
document.getElementById('inpNotApproved').checked = true;
}
}

_spBodyOnLoadFunctionNames.push("LoadCheckBoxes");

</script>

We make sure this function gets called on page load with the help of the SharePoint in-built _spBodyOnLoadFunctionNames.push function

Following is the result of this approach
When both checkboxes are checked



When only the approved checkbox is checked



When only the Not Approved checkbox is checked

When both the checkboxes are unchecked






free counters

3 comments:

  1. This is so close to what I have been searching for. Is there a way to have it look at a value in a field and append that to the end of the url. EG disp.aspx?status=approved then it would show all approved items in a webpart without user intervention?

    ReplyDelete
  2. Yes that surely can be done. Where is the field you are referring to gonna be ? In the same page in another webpart ?

    ReplyDelete
  3. Hello Rahul,
    I have successfully added this to a list, and it works perfectly. I was trying to figure out how to modify this, if possible, to have more check boxes, and therefore create a multiple value filter, which is really what I need, but unfortunately I have failed. Is it possible to do what I am attempting, or have you by any chance already written something to create this? Any help would be greatly appreciated. Thanks, John.

    ReplyDelete