How To Get Metadata Navigation In A Document Set
March 24, 2013 2 Comments
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 used the script from Rene Modery as a starting point. He has written a great article on adding filter options in SharePoint 2007. To get this al workigng you need to add 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!