In the last years I have seen quite a few times customers struggling with the change of folders structures to libraries, contenttypes and metadata in SharePoint. When you have finally convinced your customer to use the metadata navigation to find data instead of browsing folders you find out Document Sets do not support metadata navigation!?! Although you can always filter list using the dropdown on the column name people do more like single click filtering. To solve this problem I’ve created a simple script to transfer the list filters to navigation buttons using JQuery and SPServices.
By default a SharePoint List or Document library can be filtered by pressing the column heading.
But visitors of the document system are not familiar with this “hidden” feature, and would really like single click navigation demonstrated below.
To make this possible I’ve created a Content Editor Webpart which contains Javascript to accomplisch the transformation of filters in a dropdown to and filter based on buttons.
<script src="/style library/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="/style library/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
//set default vars; replace them with your ownvar
listID = '{AA2982F8-6E9B-4F01-8F30-9D90AB1E7A8B}';
var viewID = '{F51A0644-4798-474C-A50B-3EBC53CCA2A8}';
//load paramsvar
allVars = $().SPServices.SPGetQueryString();
var filterFieldsParams = "";
$.each(allVars, function( objKey, objValue ){
if(objKey.substr(0,11).toLowerCase()=="filterfield" || objKey.substr(0,11).toLowerCase()=="filtervalue"){
filterFieldsParams+="&"+objKey+"="+objValue;
}
});
var rootFolder=$().SPServices.SPGetQueryString()['RootFolder'];
if(rootFolder===undefined){
rootFolder=window.location.href.substring(0, window.location.href.indexOf('Forms'));
}
function getDynamicFilter(name, internalName){
$.ajax({
url: $().SPServices.SPGetCurrentSite()+'/_layouts/filter.aspx?ListId='+listID+'&FieldInternalName='+internalName+'&ViewId='+viewID+'&FilterOnly=1&Filter=1'+filterFieldsParams+'&RootFolder='+rootFolder,
success: function(data) {
//append filter dropdown to temporary filter field div
$('#filterField'+internalName).append($.parseHTML(data));
$('#filterField'+internalName+' select').each(function(i, select){
var $select = $(select);
$select.find('option').each(function(j, option){
var $option = $(option);
//create a button
var $button = $('<input type="button" style="margin-left:5px;"/>');
$button.attr('name', $select.attr('name')).attr('value', $option.val());
$button.attr('value',$option.text());
if ($option.attr('selected')) $button.attr('checked', 'checked');
//insert button
$("#filterButton"+internalName).append($button);
});
});
//set filter on button click
$('#filterButton'+internalName+' input').click(function(e)
{
// select the option with the current value as text
$('#diidFilter'+internalName+' option:contains("'+$(this).val()+'")').attr('selected', true);
// get index and value of selected filter
var value = $('#diidFilter'+internalName+' option:selected').val();
var index = $("#diidFilter"+internalName).attr('selectedIndex');
// activate filter
FilterField(viewID,internalName, value, index);
});
}
});
}
// provide selected filters
getDynamicFilter("Document Type", "Document_x0020_type");
});
</script>
<hr/>
<div id="allFilters">
<div id="filterFieldDocument_x0020_type" style="display:none"></div>
<div id="filterButtonDocument_x0020_type"></div>
</div>
When the visitor navigates to the document set the buttons for the column “document type” are dynamically loaded from the document type column filter. When the user presses the filter button (1) the list will be filtered using the column filter (2).
Notice: This feature does also work great in normal libraries or lists!
