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>
</select>
<script>

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;
break;
}
}

if(view == '') return;

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

function onLoader_WPQ_()
{
try
{
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;
}
}
catch(e)
{}
}


onLoader_WPQ_();

</script>

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

3 comments:

Anonymous said...

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

steven 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
ex.
Showing in part/web site to hit

Microsoft / www.microsoft.com
technet / http://technet.com

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