Managed Metadata: Filter LVWP in SP2013 using JavaScript

Posted by: Stephanie Donahue on September 26, 2014

BACKGROUND

PAITgroup was tasked with migrating an existing Site Collection from SharePoint 2007 On-Premise to SharePoint 2013 for Office 365. As a part of this proof-of-concept (POC) we wanted to show what it would be like to migrate the site collection as-is as well as show what we would do to improve upon their existing architecture while utilizing the sexy new feature of SharePoint 2013 like managed navigation.

The Site Collection being migrated was used for Application Management. This Application Management Site Collection consisted of a top-level site and then a series of 100+ sub sites, each dedicated to a single application used within the organization. I was able to migrate a handful of their applications into a single site, improving WCM, search and navigation while reducing maintenance due to the following factors:

  • Permissions in sub sites were inherited from the parent
  • Lists and Libraries used for content management were universal across the board

THE PLAN

  • Combine individual Lists capturing Application Management data into a single Content Type inheriting from the Pages Content Type
  • Create a Page Layout based on Application Management Content Type
  • Add fields from Application Management Content Type to Page Layout
  • Utilize Managed Metadata
  • Create Term Set for Managed Navigation
  • Create Term Set for tagging pages (duplicate of managed navigation term set)
  • Add List View web parts to the page layout (Links, Documents, Discussion Boards)
  • Add managed metadata field to Links, Documents and Discussion board Lists and Libraries for filtering
  • Only display documents, discussions and links relevant to the current application

WIREFRAME

The web parts with the #1 call out are the web parts that are to be filtered based on managed metadata.

THE CHALLENGE

The challenge here is dynamically filtering the List View Web Parts based on the managed metadata tagged in the page. Since this is an office 365 site, it has to be done using the Client Side Object Model (CSOM).

RESEARCH

To get me started, I found this post by David Lozzi in which he was able to filter list view web parts by selecting a term. Props to him and Stefan Bauer for doing most of the leg work here. My application had to perform a little bit differently as I need the web parts automatically filtered based on the metadata term set in the page details.

THE CODE

//declare variables
var clientContext;
var field = "Application"; //managed metadata field
var listName = "Pages";
var listItem;</code>

//wait for SP.JS to load before executing function
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);

//Load only the field that we need values for
function sharePointReady() {
var pageID = _spPageContextInfo.pageItemId;
clientContext = SP.ClientContext.get_current();

var list = clientContext.get_web().get_lists().getByTitle(listName);
listItem = list.getItemById(pageID);

clientContext.load(listItem, field);
clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);
}

//retrieve the wssID from our managed metadata field
//add query string to the current page
function onRequestSucceeded() {
var wssID = listItem.get_item(field)["WssId"]||listItem.get_item(field).$2_1;

var queryString = window.location.search;
if(!queryString)
window.location.href = document.URL + "?FilterField1=" + field + "&FilterValue1=" + wssID + "&FilterLookupId1=1";
}

function onRequestFailed(sender, args) {
alert('Error: ' + args.get_message());
}

DRAWBACKS

This code requires the page to load and then reload with the query string. Ideally, we would want the managed navigation links to contain the query string in advance to circumvent this issue. A couple ways we could do this:

  1. Manually update the managed navigation links to include the query string with correct values after determining what those values are.
  2. Write a script to iterate through each navigation link and update the href property to include the query string value for each term.

A more elegant solution is required considering both of those options have their own drawbacks. I would love to hear your ideas on how you would improve upon my solution.

Topics: Communication, News

    Recent Posts

    Categories