Sunday, July 8, 2007

Adding a filter combo-box web part as you wish

Its been a while, not that I didnt have what to write about (I have loads - believe me), just had no time...

I want to share a simple solution for filtering list views I did for a customer that could help some of you guys.

I had a customer that needed a combo box web part (simple) that will hold several values for filtering other list viewers web parts on the same page.

Well, obviously we have our "SharePoint List Filter - Multiple Drop-Down" web part from our site for download, but here I was aiming for a simple solution that will not take values from fields automatically and did not need all the benifits of a product such as that (as great as it may be).

So, what I did was to add a content editor web part that will hold the HTML code for the drop-down list with all its values. On each change I passed the selected value to the query string and posted the page.
Here is the code for that web part:

select value: <select id="cmb_WPQ_" onchange="onChange_WPQ_(this);">
<option value="">select...</option><option value="value 1">option one</option>
<option value="">select...</option><option value="value 2">option two</option>

function onChange_WPQ_(ddl)
for(var i=0; i<ddl.options.length; i++)
if( ddl.options[i].selected )
view = ddl.options[i].value;
selected = i;

if(view == '') return;

window.location = window.location.href.split('?')[0] +
'?view=' +
escape(view) +
'&selected=' +

function onLoader_WPQ_()
if( window.location.href.indexOf("&selected=") > 0 )
var selected = window.location.href;
selected = selected.slice(selected.indexOf("&selected=") );
selected = selected.replace("&selected=","");
document.getElementById('cmb_WPQ_').options[selected].selected = true;



(paste this code in the HTML editor of a content editor web part)

Now, when this takes care of showing the drop down list and sending information for the selection to the query string all I have to do to make this play is to add a query string filter web part (comes out of the box), set it to take "view" query string key and connect it to the list viewer web part I want!

This way I can use simple HTML web part as filter providers for more advanced solutions with no real .NET development.

Hope this helps, feel free to comment if you have question.


Manoj Tripathi said...

Very nice post. I have modified it for multiple clients navigation.

stfromli said...

Hy, how can I adopt this so that each option in the drop down has an action rather than a filter?
I would want to make it a drop down like the "I need to find.." and add specific sites
Showing in part/web site to hit

Microsoft /
technet /

Shai Petel said...

hi stfromli,
I'm not sure what you mean...
I would implement a links list, and use SP Designer DVWP to build the list items into a dropdown.
This can be done in just a few minutes...