Grouping by a Metadata Column in a SharePoint Document Library

Question

Hi All,
I have a document library with a managed metadata column. Now I need to create a view in which i need to group by the metadata column but I'm not able to see the managed metadata column in the Group By Columns list. Is it possible to accomplish this? Can
anyone pls help me out. Thank you.

Answer 1

It's kind of a lot of code... but here goes!
This all goes into a separate JS file:
(Tip, to copy this code chunk, it's easiest to start your selection outside the code block)
var js_MultiFilter = (function () {
function js_MultiFilter(listName, site) {
this.document = document; f (typeof listName == "undefined") { listName = 'Documents'; }if (typeof site == "undefined") { this.useCurrentSite = true; }else { this.useCurrentSite = false; }this.listName = listName;this.listRootfolder = "";this.site = site;this.notificationEnabled = true;this.filterFields = []; this.filterNames = []; this.selectModes = []; this.filterValueLists = []; this.displayFields = []; this.displayNames = []; this.displayModes = []; this.items = []; this.potentialFilters = []; this.queryFields = []; this.selectedFilters = []; this.sortField = "Title"; this.sortDesc = false; this.selectMode = "checkbox"; this.filterHeadingClass = "js_MFFilterHeading"; this.filterTableClass = "js_MFFilterTable"; this.filterColumnClass = "js_MFFilterColumn"; this.innerFilterColumnClass = "js_MFInnerFilterColumn"; this.filterCheckboxClass = "js_MFFilterCell"; this.displayOuterClass = "js_MFResultOuter"; this.displayTableClass = "js_MFResultTable"; this.displayRowClass = "js_MFResultRow";
this.displayHeaderClass = "js_MFResultHeader"; this.displayCellClass = "js_MFResultCell"; this.filterLabelClass = "js_MFFilterLabel"; this.filterLabelHoverClass = "js_MFFilterHoverLabel"; this.filterLabelSelectClass = "js_MFFilterSelectLabel"; this.filterLabelUnusedClass = "js_MFFilterUnusedLabel"; this.resultCountClass = "js_MFResultCount"; this.maxResultHeight = "270px"; this.rowLimit = 100; this.divId; this.evenColumnWidths = true; this.evenFilterColumnWidths = true; this.resultsId = "js_MultiFilterResults1"; this.showMetadataGuids = false; this.maxFilterHeight = 13;
/*Methods*/ this.containsString = containsString; this.getIndexOf = getIndexOf; this.addDisplayField = addDisplayField; this.addStaticDisplayField = addStaticDisplayField; this.addFilterField = addFilterField; this.bindToDiv = bindToDiv; this.onQuerySucceeded = onQuerySucceeded; this.onQueryFailed = onQueryFailed; this.getValueAsString = getValueAsString; this.showLoading = showLoading; this.removeLoading = removeLoading; this.toggleAndApplyFilter = toggleAndApplyFilter; this.applyFilter = applyFilter; this.insertDefaultCss = insertDefaultCss; this.get_defaultCss = get_defaultCss; this.isPageInEditMode = isPageInEditMode; this.HoverFilterLabel = HoverFilterLabel; this.DeHoverFilterLabel = DeHoverFilterLabel;
/*Interface Functions*/
function isPageInEditMode() { return (document.forms[0].elements["MSOLayout_InDesignMode"].value == "1") }
function addFilterField(fieldName, displayName, selectMode) { if (typeof (displayName) == "undefined") { displayName = fieldName; } if (typeof (selectMode) == "undefined") { selectMode = this.selectMode; } this.filterFields.push(fieldName); this.filterNames.push(displayName); this.selectModes.push(selectMode.toString().toLowerCase()); var filterValueList = []; this.filterValueLists.push(filterValueList); var potFilterValueList = []; this.potentialFilters.push(potFilterValueList); if (!this.containsString(this.queryFields, fieldName)) { this.queryFields.push(fieldName); } }
function addDisplayField(fieldName, displayName, displayMode) { if (typeof (displayName) == "undefined") { displayName = fieldName; } if (typeof (displayMode) == "undefined") { displayMode = "default"; } this.displayFields.push(fieldName); this.displayNames.push(displayName); this.displayModes.push(displayMode); if (!this.containsString(this.queryFields, fieldName)) { this.queryFields.push(fieldName); } }
function addStaticDisplayField(displayText, displayName, displayMode) { if (typeof (displayName) == "undefined") { displayName = displayText; } if (typeof (displayMode) == "undefined") { displayMode = "default"; } this.displayFields.push("@" + displayText); this.displayNames.push(displayName); this.displayModes.push(displayMode); }
function insertDefaultCss(RevertToDefaultStyles) { var js_style = this.document.createElement("style"); js_style.type = "text/css"; document.getElementsByTagName("head")[0].appendChild(js_style); var newCss = this.get_defaultCss(RevertToDefaultStyles); if (typeof js_style.styleSheet != "undefined") { js_style.styleSheet.cssText = newCss; } else { js_style.appendChild(this.document.createTextNode(newCss)); } }
function bindToDiv(divId) { /* Causes the control to appear in the specified div.*/ if (typeof (divId) != "undefined") { this.divId = divId; } if (this.notificationEnabled) { showLoading(this); } var clientContext; if (this.useCurrentSite) { clientContext = new SP.ClientContext.get_current(); } else { clientContext = new SP.ClientContext(this.site); } var web = clientContext.get_web(); var lists = web.get_lists(); var list = lists.getByTitle(this.listName); var camlQuery = new SP.CamlQuery(); var descending = ""; if (this.sortDesc) { descending = " Ascending='False'"; } var camlString = '<View><Query><OrderBy><FieldRef Name=\'' + this.sortField + '\'' + descending + '/></OrderBy></Query><RowLimit>' + this.rowLimit + '</RowLimit></View>'; camlQuery.set_viewXml(camlString); this.collListItem = list.getItems(camlQuery); var strFields = "ID,"; if (containsString(this.displayModes, "fileref", true)) { strFields += "FileRef," }
for (var i = 0; i < this.queryFields.length; i++) { strFields += this.queryFields[i] + ","; } strFields = strFields.substring(0, strFields.length - 1); this.listRootfolder = list.get_rootFolder(); clientContext.load(this.listRootfolder); clientContext.load(this.collListItem, "Include(" + strFields + ")"); clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); }
function showLoading(parent) { parent.notifyId = SP.UI.Notify.addNotification("Loading...", true); }
function removeLoading(parent) { SP.UI.Notify.removeNotification(parent.notifyId); }
function getValueAsString(fieldValue, activeHyperlinks, showLinkUrl, displayMode, additionalFieldValue) { var localNull = null; if (typeof (displayMode) == "undefined") { displayMode = "default"; } /*wraps hyperlink text in <a> tag*/ if (typeof (activeHyperlinks) == "undefined") { activeHyperlinks = false; } /*causes hyperlinks to display URL by default instead of description*/ if (typeof (showLinkUrl) == "undefined") { showLinkUrl = true; } var returnValue = []; var isArray = false if (typeof (fieldValue) == "object" && fieldValue != localNull) { if (fieldValue[0] != localNull) { if (fieldValue.length) { for (var i = 0; i < fieldValue.length; i++) { returnValue.push(this.getValueAsString(fieldValue[i])); isArray = true; } } } } if (!isArray) { if (fieldIsText(fieldValue)) { if (displayMode.toString().toLowerCase() == "link") { returnValue = '<a href="' + fieldValue + '">' + fieldValue + '</a>'; }
else if (displayMode.toString().toLowerCase() == "display") { returnValue = '<a href="' + this.listRootfolder.get_serverRelativeUrl() + '/Forms/DispForm.aspx?ID=' + additionalFieldValue + '">' + fieldValue + '</a>'; } else if (displayMode.toString().toLowerCase() == "edit") { returnValue = '<a href="' + this.listRootfolder.get_serverRelativeUrl() + '/Forms/EditForm.aspx?ID=' + additionalFieldValue + '">' + fieldValue + '</a>'; } else if (displayMode.toString().toLowerCase() == "fileref") { returnValue = '<a href="' + additionalFieldValue + '">' + fieldValue + '</a>'; } else { returnValue = fieldValue; } } else { if (fieldValue == localNull) { returnValue = ""; } else { if (fieldIsDate(fieldValue)) { returnValue = fieldValue._toFormattedString(); } else { if (fieldIsHyperlink(fieldValue)) { var desc = fieldValue.get_description(); var url = fieldValue.get_url(); if (showLinkUrl) { if (url != localNull) { returnValue = url; } else { if (desc != localNull) { returnValue = desc; } } }
else { if (desc != localNull) { returnValue = desc; } else { if (url != localNull) { returnValue = url; } } } if (activeHyperlinks && url != localNull) { returnValue = '<a href="' + url + '">' + returnValue + '</a>'; } } else { if (fieldIsLookup(fieldValue)) { if (displayMode.toString().toLowerCase() == "link") { returnValue = '<a href="' + fieldValue.get_lookupValue() + '">' + fieldValue.get_lookupValue() + '</a>'; } else { if(fieldValue.get_lookupValue() == ""){ /* When doing a lookup count, the lookup ID is used */ returnValue = fieldValue.get_lookupId(); }else{ returnValue = fieldValue.get_lookupValue(); } } } else { returnValue = ""; } } } } } } return returnValue; }
function onQuerySucceeded(sender, args) { var listItemEnumerator = this.collListItem.getEnumerator(); while (listItemEnumerator.moveNext()) { var oListItem = listItemEnumerator.get_current(); var localNull = null; var item = new Object(); item.filterValues = []; item.displayValues = []; for (var i = 0; i < this.filterFields.length; i++) { var filterValue = []; /*Collect all filter values*/ var rawValue = this.getValueAsString(oListItem.get_item(this.filterFields[i])); if (typeof (rawValue) == "string") { filterValue.push(rawValue); } else { filterValue = rawValue; } for (var k = 0; k < filterValue.length; k++) { /*if this value hasn't been encountered before, add it to our filter value list for this filter field*/ var thisvalue = filterValue[k]; if (this.showMetadataGuids == false) { if (thisvalue.indexOf('|') != -1) { thisvalue = thisvalue.split('|')[0]; } } if (!containsString(this.filterValueLists[i], thisvalue)) { this.filterValueLists[i].push(thisvalue); } } item.filterValues.push(filterValue); }
for (var j = 0; j < this.displayFields.length; j++) { var initialValue = this.displayFields[j]; if (initialValue.startsWith("@")) { initialValue = initialValue.substring(initialValue.indexOf("@") + 1); } else { initialValue = oListItem.get_item(this.displayFields[j]) } /*Collect all display values*/ if (this.displayModes[j] == "fileref") { var displayValue = this.getValueAsString(initialValue, true, false, this.displayModes[j], oListItem.get_item("FileRef")); } else { var displayValue = this.getValueAsString(initialValue, true, false, this.displayModes[j], oListItem.get_item("ID")); } item.displayValues.push(displayValue); } this.items.push(item); } var filterSelectBoxes = []; for (var i = 0; i < this.filterFields.length; i++) { var selectbox = this.document.createElement("div"); selectbox.className = this.filterColumnClass; selectbox.setAttribute("index", i); var heading = this.document.createElement("div"); heading.className = this.filterHeadingClass;
heading.innerHTML = this.filterNames[i]; selectbox.appendChild(heading); var columnContainer = document.createElement("div"); selectbox.appendChild(columnContainer); var innerColumns = []; for (var j = 0; j < this.filterValueLists[i].length; j += this.maxFilterHeight) { var innerColumn = document.createElement("div"); innerColumn.className = this.innerFilterColumnClass; innerColumns.push(innerColumn); columnContainer.appendChild(innerColumn); } this.filterValueLists[i].sort(); for (var j = 0; j < this.filterValueLists[i].length; j++) { var input = document.createElement("input"); input.type = this.selectModes[i]; input.className = this.filterCheckboxClass; var checkboxText = this.filterValueLists[i][j]; input.setAttribute("name", this.filterFields[i]); input.id = "js_mf_" + i + "_" + j; var labelid = "label_" + i + "_" + j; input.setAttribute("label", labelid); input.value = checkboxText; var checkboxlabel = document.createTextNode(checkboxText); var checkboxlabelspan = document.createElement("span");
checkboxlabelspan.className = this.filterLabelClass; checkboxlabelspan.id = labelid; checkboxlabelspan.setAttribute("checkbox", input.id); checkboxlabelspan.appendChild(checkboxlabel); var parent = this;
/*ADD EVENT HANDLER*/ if (input.addEventListener) { /*chrome, firefox, and new IE*/ input.addEventListener("change", function (element) { parent.applyFilter(element, parent) }); input.addEventListener("click", function (element) { parent.applyFilter(element, parent) }); checkboxlabelspan.addEventListener("click", function (element) { parent.toggleAndApplyFilter(element, parent) }); checkboxlabelspan.addEventListener("mouseenter", function (element) { parent.HoverFilterLabel(element, parent) }); checkboxlabelspan.addEventListener("mouseout", function (element) { parent.DeHoverFilterLabel(element, parent) }); } else { /*legacy internet explorer*/ input.attachEvent("onchange", function (element) { parent.applyFilter(element, parent) }); input.attachEvent("onclick", function (element) { parent.applyFilter(element, parent) }); checkboxlabelspan.attachEvent("onclick", function (element) { parent.toggleAndApplyFilter(element, parent) });
checkboxlabelspan.attachEvent("onmouseenter", function (element) { parent.HoverFilterLabel(element, parent) }); checkboxlabelspan.attachEvent("onmouseout", function (element) { parent.DeHoverFilterLabel(element, parent) }); } var currentColumnIndex = 0; for (var k = 0; k < innerColumns.length; k++) { if (j >= k * this.maxFilterHeight) currentColumnIndex = k; } var currentColumn = innerColumns[currentColumnIndex]; currentColumn.appendChild(input); currentColumn.appendChild(checkboxlabelspan); currentColumn.appendChild(document.createElement("br")); } filterSelectBoxes.push(selectbox); } var htmlToWrite = document.createElement("div"); htmlToWrite.className = this.filterTableClass; for (var i = 0; i < filterSelectBoxes.length; i++) { htmlToWrite.appendChild(filterSelectBoxes[i]); }
/*clear the loading image and add our filters*/ document.getElementById(this.divId).innerHTML = ""; document.getElementById(this.divId).appendChild(htmlToWrite);
/*Create the div to display the results*/ var detailsDiv = document.createElement("div"); detailsDiv.className = this.displayOuterClass; var detailIdstring = "Details"; iterator = 0; var detailsId = detailIdstring + iterator; while (this.document.getElementById(detailsId) != localNull) { iterator = iterator + 1; detailsId = detailIdstring + iterator; } detailsDiv.id = detailsId; this.resultsId = detailsId;
/*create a div for a row within the results table*/ var detailDiv = document.createElement("div"); detailDiv.className = this.displayRowClass; detailDiv.appendChild(document.createTextNode("<img src='/_layouts/images/loading.gif' />")); detailsDiv.appendChild(detailDiv);
/*Add the results below the filters*/ document.getElementById(this.divId).appendChild(detailsDiv); for (var i = 0; i < this.filterFields.length; i++) { var selectedFieldArray = []; this.selectedFilters.push(selectedFieldArray); } if (this.notificationEnabled) { this.removeLoading(this); } applyFilter(null, this); }
function DeHoverFilterLabel(labelel, parent) { var sourcelabel = labelel.srcElement; if (typeof (sourcelabel) == "undefined") { sourcelabel = labelel; } var checkboxid = sourcelabel.getAttribute("checkbox"); var el = document.getElementById(checkboxid); if (el.checked) { sourcelabel.className = parent.filterLabelSelectClass; } else if (sourcelabel.getAttribute("unused") == "unused") { sourcelabel.className = parent.filterLabelUnusedClass; } else { sourcelabel.className = parent.filterLabelClass; } }
function SelectFilterLabel(labelel, parent) { var sourcelabel = labelel.srcElement; if (typeof (sourcelabel) == "undefined") { sourcelabel = labelel; hover = false; } var checkboxid = sourcelabel.getAttribute("checkbox"); var el = document.getElementById(checkboxid); if (el.checked) { sourcelabel.className = parent.filterLabelSelectClass; } }
function HoverFilterLabel(labelel, parent) { var sourcelabel = labelel.srcElement; var hover = true; if (typeof (sourcelabel) == "undefined") { sourcelabel = labelel; } var checkboxid = sourcelabel.getAttribute("checkbox"); var el = document.getElementById(checkboxid); if (el.checked) { sourcelabel.className = parent.filterLabelSelectClass; } else if (sourcelabel.getAttribute("unused") == "unused") { sourcelabel.className = parent.filterLabelUnusedClass; } else if (hover) { sourcelabel.className = parent.filterLabelHoverClass; } else { sourcelabel.className = parent.filterLabelClass; } }
function toggleAndApplyFilter(labelel, parent) { var sourcelabel = labelel.srcElement; if (typeof (sourcelabel) == "undefined") { sourcelabel = labelel; } var checkboxid = sourcelabel.getAttribute("checkbox"); var el = document.getElementById(checkboxid); var select = false; if (el.checked) { el.checked = false; } else { el.checked = true; select = true; } parent.applyFilter(el, parent); if (select) { sourcelabel.className = parent.filterLabelSelectClass; } else { sourcelabel.className = parent.filterLabelHoverClass; } }
function applyFilter(el, parent) { var localNull = null; var resultcount = 0; if (el != localNull) { var element = el.srcElement; if (typeof (element) == "undefined") { element = el; } SelectFilterLabel(document.getElementById(element.getAttribute("label")), parent); var filter = element.value; var parentNode = element.parentNode; var tempElement = element.parentNode; while (tempElement.getAttribute("index") == localNull) { tempElement = tempElement.parentNode; } var fieldIndex = tempElement.getAttribute("index"); var elements = document.getElementsByName(element.getAttribute("name")); for (var inc = 0; inc < elements.length; inc++) { var thisel = elements[inc]; if (typeof (thisel.getAttribute("label")) != "undefined") { DeHoverFilterLabel(document.getElementById(thisel.getAttribute("label")), parent); } } if (element.checked) {
if (parent.selectModes[fieldIndex] == "radio") { /*remove all other filters in this field.*/ parent.selectedFilters[fieldIndex] = []; } if (!containsString(parent.selectedFilters[fieldIndex], filter)) { parent.selectedFilters[fieldIndex].push(filter); } } else { var index = getIndexOf(parent.selectedFilters[fieldIndex], filter); if (typeof (index) != "undefined") { parent.selectedFilters[fieldIndex].splice(index, 1); } } } var resultsOuterDiv = document.createElement("div"); resultsOuterDiv.className = parent.displayTableClass; document.getElementById(parent.resultsId).innerHTML = ""; document.getElementById(parent.resultsId).appendChild(resultsOuterDiv); var resultsHeaderDiv = document.createElement("div"); resultsHeaderDiv.className = parent.displayRowClass; for (var i = 0; i < parent.displayNames.length; i++) { var headerCell = document.createElement("div"); headerCell.className = parent.displayHeaderClass; headerCell.innerHTML = parent.displayNames[i]; resultsHeaderDiv.appendChild(headerCell); }
resultsOuterDiv.appendChild(resultsHeaderDiv); for (var i = 0; i < parent.potentialFilters.length; i++) { parent.potentialFilters[i] = []; /*initialize an array of empty arrays (one per filter)*/ } for (var i = 0; i < parent.items.length; i++) { /*for each item...*/ var itemfields = parent.items[i].filterValues var itemContainsAllSelectedValues = true; for (var j = 0; j < parent.selectedFilters.length; j++) { /*for each filter field*/ for (var k = 0; k < parent.selectedFilters[j].length; k++) { /*for each selected filter value*/ if (parent.selectedFilters[j].length == 0) continue; /*skip it if nothing is selected.*/ var thisvalue = parent.items[i].filterValues[j]; /*check if the item has that value within that field*/ if (!containsString(thisvalue, parent.selectedFilters[j][k], this.showMetadataGuids)) { itemContainsAllSelectedValues = false; break; } if (!itemContainsAllSelectedValues) break; } }
if (itemContainsAllSelectedValues) { resultcount++; var rowDiv = document.createElement("div"); rowDiv.className = parent.displayRowClass; for (var j = 0; j < parent.items[i].displayValues.length; j++) { var cellDiv = document.createElement("div"); cellDiv.className = parent.displayCellClass; cellDiv.innerHTML = parent.items[i].displayValues[j]; rowDiv.appendChild(cellDiv); } for (var j = 0; j < parent.items[i].filterValues.length; j++) { for (var k = 0; k < parent.items[i].filterValues[j].length; k++) { parent.potentialFilters[j].push(parent.items[i].filterValues[j][k]); } } resultsOuterDiv.appendChild(rowDiv); } } if (resultcount == 0) { var rowDiv = document.createElement("div"); rowDiv.className = parent.displayRowClass; var cellDiv = document.createElement("div"); cellDiv.className = parent.displayCellClass; cellDiv.innerHTML = "No results were found for the specified criteria."; rowDiv.appendChild(cellDiv); resultsOuterDiv.appendChild(rowDiv); }
/*Stylize dead-end filter options*/ for (var i = 0; i < parent.filterValueLists.length; i++) { for (var j = 0; j < parent.filterValueLists[i].length; j++) { var labelid = "label_" + i + "_" + j; var checkboxid = "js_mf_" + i + "_" + j; var filterCheck = document.getElementById(checkboxid); var fieldValue = parent.filterValueLists[i][j]; var tempElement = filterCheck.parentNode; while (tempElement.getAttribute("index") == localNull) { tempElement = tempElement.parentNode; } var fieldIndex = tempElement.getAttribute("index"); if (!containsString(parent.potentialFilters[fieldIndex], fieldValue, parent.showMetadataGuids)) { document.getElementById(labelid).className = parent.filterLabelUnusedClass; document.getElementById(labelid).setAttribute("unused", "unused"); } else { if (document.getElementById(checkboxid).checked) { document.getElementById(labelid).className = parent.filterLabelSelectClass; } else { document.getElementById(labelid).className = parent.filterLabelClass; }
document.getElementById(labelid).setAttribute("unused", "false"); } } } var resultCountId = "js_mf_resultcount"; var resultCountDiv; if (document.getElementById(resultCountId) == null) { resultCountDiv = document.createElement("div"); resultCountDiv.id = "js_mf_resultcount"; resultCountDiv.className = parent.resultCountClass; document.getElementById(parent.divId).appendChild(resultCountDiv) } else { resultCountDiv = document.getElementById(resultCountId); } if (resultcount == 1) { resultCountDiv.innerHTML = resultcount + " result"; } else { resultCountDiv.innerHTML = resultcount + " results"; } }
function onQueryFailed(sender, args) { this.removeLoading(this); this.document.getElementById(this.divId).innerHTML = 'The page was unable to populate the data this time.' + '<br/><span style="color:white">' + args.get_message() + '</span>\n'; }
function get_defaultCss(useTheseClasses, includeStyleTags) { if (typeof useTheseClasses != "boolean") useTheseClasses = true; if (useTheseClasses) { this.filterHeadingClass = "js_Heading"; this.filterTableClass = "js_MFFilterTable"; this.filterColumnClass = "js_MFFilterColumn"; this.filterCheckboxClass = "js_MFFilterCell"; this.displayOuterClass = "js_MFResultOuter"; this.displayTableClass = "js_MFResultTable"; this.displayRowClass = "js_MFResultRow"; this.displayHeaderClass = "js_MFResultHeader"; this.displayCellClass = "js_MFResultCell"; this.filterLabelClass = "js_MFFilterLabel"; } if (typeof includeStyleTags != "boolean") includeStyleTags = false; var openstyletag = ""; var closestyletag = ""; if (includeStyleTags) { openstyletag = "<style>"; closestyletag = "</style>"; } var leftright_padding = "padding-left:2px;padding-right:2px;"; var tableLayoutFixed = ""; var filterTableLayoutFixed = ""; if (this.evenColumnWidths || this.dockResultHeaders) { tableLayoutFixed = "table-layout:fixed; "; }
if (this.evenFilterColumnWidths) { filterTableLayoutFixed = "table-layout:fixed; "; } return openstyletag + "." + this.filterHeadingClass + "{font-weight:bold;background:#DDDDDD;text-align:center;}." + this.filterTableClass + "{background:#EEEEEE;display:table;width:100%;"+filterTableLayoutFixed+"}." + this.filterColumnClass + "{ display:table-cell;border-left:1px solid #CCC; border-right:1px solid #CCC;}." + this.filterCheckboxClass + "{padding-left: 5px;}." + this.displayOuterClass + "{height:" + this.maxResultHeight + "; overflow:auto; border:1px solid #CCC;}." + this.displayTableClass + "{display:table; " + tableLayoutFixed + "width:100%; text-align:left;}." + this.displayRowClass + "{width:100%;text-align:left;display:table-row;border-bottom:1px solid #EEEEEE;}." + this.displayHeaderClass + "{background:gray;color:white;display:table-cell; padding:5px; font-weight:bold;}." + this.displayCellClass + "{border-right:solid #CCC 1px; " + "border-left:0px;border-top:0px;border-bottom:1px solid #EEEEEE;"
+ "display:table-cell;padding:5px;}." + this.innerFilterColumnClass + "{float:left;}." + this.filterLabelClass + "{margin:1px; cursor:pointer;" + leftright_padding + "}." + this.filterLabelHoverClass + "{cursor:pointer; margin:1px;text-decoration:underline;" + leftright_padding + "}." + this.filterLabelSelectClass + "{background: #555; color:white; cursor:pointer; border:1px solid #555;" + leftright_padding + "}." + this.filterLabelUnusedClass + "{color:#bbb;margin:1px;cursor:default;" + leftright_padding + "}." + this.resultCountClass + "{text-align:right;font-weight:bold;}" + closestyletag; }
function fieldIsLookup(field) { return (typeof field.get_lookupValue == 'function'); }
function fieldIsDate(field) { return (typeof field._toFormattedString == 'function'); }
function fieldIsHyperlink(field) { return (typeof field.get_url == 'function'); }
function fieldIsText(field) { return (typeof field == 'string'); }
/* HELPER FUNCTIONS*/
/* Helper function to imitate Array.contains() method */ function containsString(strArray, text, showMetadataGuids) { if (typeof (showMetadataGuids) == "undefined") { showMetadataGuids = true; } var contains = false; for (i in strArray) { if (strArray[i] == text) { contains = true; break; } else if (showMetadataGuids == false) { if (strArray[i].indexOf('|') != -1) { if (strArray[i].split('|')[0] == text) { contains = true; break; } } } } return contains; }
/* Helper function to imitate Array.indexOf() method */ function getIndexOf(strArray, text) { for (i in strArray) { if (strArray[i] == text) return i; } }
return js_MultiFilter;})();
Then you can reference the JS file and put the filter control on your page like so:
<div id="js_MultiFilterExample"><img src="/_layouts/images/loading.gif"/></div>
<script src="/[wherever you saved your js file]/js_MultiFilter.js"></script>
<script>
ExecuteOrDelayUntilScriptLoaded(newInstance, "sp.js");
function newInstance(){
var mf = new js_MultiFilter("Library Name"); // pass the list display name
//// Optional Parameters
//mf.maxResultHeight = "100%"; // set the max height of the results (default: "270px")
mf.sortField = "FileLeafRef"; // specify internal name of field to sort results by (default: Title)
//mf.sortDesc = true; // sort descending (default: false)
//mf.evenColumnWidths = false; // equal result column widths (disable at own risk) (default: true)
mf.evenFilterColumnWidths = false; // equal filter column widths (default: true)
//mf.rowLimit = 500; // increase the result row limit imposed on the query (default: 100)
//mf.notificationEnabled = false; // show the fly-out Loading notification (default: true)
//mf.selectMode = "radio"; // Specify the default select mode i.e. checkbox or radio (default: checkbox)
//mf.showMetadataGuids = true; // Do not trim the GUID suffix from managed metadata filters (default: false)
//mf.maxFilterHeight = 20 ; // Specify the maximum number of options to display in a column before adding another column (default: 13)
//// Filter and Display Fields
mf.addFilterField("Category","Category","radio"); // (internal name, display name (optional), select mode (optional))
mf.addFilterField("Tags");
//// addDisplayField() displays an additional field from each list item
//// addStaticDisplayField() adds a column that displays the same text for every item
mf.addDisplayField("FileLeafRef","Link to Doc","fileref"); // (internal name, display name (optional), display mode (optional))
mf.addStaticDisplayField("View Properties","Display Form","display"); // (display text, display name (optional), display mode (optional))
mf.addDisplayField("Author","Created By");
mf.addDisplayField("Modified");
//// Valid display modes are: default (display value as text), link (treat the value as a hyperlink),
//// display (link to library display form), edit (link to library edit form), and fileref (link to document)
//// CSS classes used by the control
//mf.filterHeadingClass = "js_MFFilterHeading";
//mf.filterTableClass = "js_MFFilterTable";
//mf.filterColumnClass = "js_MFFilterColumn";
//mf.filterInnerColumnClass = "js_MFInnerFilterColumn";
//mf.filterCheckboxClass = "js_MFFilterCell";
//mf.displayOuterClass = "js_MFResultOuter";
//mf.displayTableClass = "js_MFResultTable";
//mf.displayRowClass = "js_MFResultRow";
//mf.displayHeaderClass = "js_MFResultHeader";
//mf.displayCellClass = "js_MFResultCell";
//mf.filterLabelHoverClass = "js_MFFilterHoverLabel";
//mf.filterLabelSelectClass = "js_MFFilterSelectLabel";
//mf.filterLabelUnusedClass = "js_MFFilterUnusedLabel";
//mf.resultCountClass = "js_MFResultCount";
mf.insertDefaultCss();
mf.bindToDiv("js_MultiFilterExample");
</script>
Uncomment anything you need to change!