Friday 13 January 2012

Sharepoint URL Multi Filter example

After a little playing about to create drop down selects to filter a sharepoint list (There are many examples on the net) I hacked together my way to acheve a multi select.  Partly to stop myself from fogetting and to share with the community, below is a little javascript code + HTML extract to be used in Content Editor Web Part in Sharepoint 2007 for a multiple drop down select:

<script type="text/javascript">
    function docLib() {

        var docLibUrl = "/sharepoint/testpage.aspx";

        var combo1 = document.getElementById("Select1");
        var select_val1 = combo1.options[combo1.selectedIndex].value;

        var combo2 = document.getElementById("Select2");
        var select_val2 = combo2.options[combo2.selectedIndex].value;

        var combo3 = document.getElementById("Select3");
        var select_val3 = combo3.options[combo3.selectedIndex].value;

        var filtercount = 1;

        var txt = document.getElementById("Text1");
        var filterstring = "";
        var filterField = "DocIcon";

        var Url_String;

        //Need to add filter count based on the number of filters selected

        if (select_val1 != "") {
            filterstring = "FilterField" + filtercount + "=Business&FilterValue" + filtercount + "=" + select_val1 + "&";
            filtercount += 1;
        }


        if (select_val3 != "") {
            filterstring = filterstring + "FilterField" + filtercount + "=Business%5Fx0020%5FOwner&FilterValue" + filtercount + "=" + select_val3 + "&";
            filtercount += 1;
        }

        if (select_val2 != "") {
            filterstring = filterstring + "FilterField" + filtercount + "=Status&FilterValue" + filtercount + "=" + select_val2;
            filtercount += 1;
        }


        Url_String = docLibUrl + "?" + filterstring;

        document.location = Url_String;
        txt.value = Url_String;
    }

</script>
<table>
<tr><td>Business:</td>
<td>
<select style="margin:10px; 0px;" id="Select1">
<option value="">--Select--</option>
<option value="FilterVal1.1">FilterVal1.1</option>
<option value="FilterVal1.2">FilterVal1.2</option>
<option value="FilterVal1.3">FilterVal1.3</option>
</select></td>

<td>Status:</td>
<td>
<select style="margin:10px; 0px;" id="Select2">
<option value="">--Select--</option>
<option value="FilterVal2.1">FilterVal2.1</option>
<option value="FilterVal2.2">FilterVal2.2</option>
<option value="FilterVal2.3">FilterVal2.3</option>
</select></td>


<td>Business Owner:</td>
<td>
<select style="margin:10px; 0px;" id="Select3">
<option value="">--Select--</option>
<option value="FilterVal3.1">FilterVal3.1</option>
<option value="FilterVal3.2">FilterVal3.2</option>
<option value="FilterVal3.3">FilterVa31.3</option>
</select></td>
<td>
<input id="Button1" type="button" value="Filter" onClick="docLib();"/></td>
</tr>
</table>

No comments: