On my list of awesome SharePoint ideas that I want to try and do, was giving users the ability to filter a page based on selected metadata. I decided to hurry up and do it thanks to a question on MSDN forums. Special thanks to Stefan Bauer for the starting of some great code!
I’ve created a CodePlex project which contains the code file, check it out at SharePoint Filter Page by Metadata. Very simply, users can click from a list of terms within a term set, and filter all web parts on the page.
Prerequisites
- Metadata service application is running, and has a term set.
- Use a managed metadata site column (created in the root web) in each list/library containing the term set.
- All web parts on the page this is installed in has to use the same site column.
To use this script:
- Download FilterPagebyMetadata.txt from CodePlex.
- If your SharePoint site doesn’t have them already, download SPServices and jQuery and upload to SharePoint. I use the Site Assets folder in the root web, but you can pick anywhere you want.
- Open the FilterPagebyMetadata.txt in NotePad.
- Update lines 13 and 14 to point to your files from above.
- Update line 17 to your managed metadata site column name.
- Save the file.
- Upload to your SharePoint site. Again, I prefer to use the Site Assets folder in the root site.
- Browse to your page where you want to use the code.
- Insert a new Content Editor Web Part.
- Edit the web part and specify the Content Link value as the path to the FilterPagebyMetadata.txt file, i.e. /SiteAssets/FilterPagebyMetadata.txt.
- Click OK and save the page.
TADA! You’ll see the list of values from the metadata service, and when clicked, it’ll filter your page!
NOTE There is currently one issue however, and I’m not sure if we can get around it. If you include a web part to a list that does not have the same site column in it, that web part will error when filtering the page.
Hi,
the problem in my script is that your code is based on is, that i only requests site columns from the root web, but not from the current web or from a lists. You will need to add some additional logic to detect the list or web column. The problem you also have is that it will only works with field call “dept” because you render the link with a fixed value instead of the variable you declared in the head.
Kind regards
Stefan Bauer
Thanks for the heads up Stefan, just updated the code. Also added a comment to note how to change the web reference to use the current web vs root web. Best practice, site columns should be run off the root web anyway ;).
I followed the instructions, but it just tries to load the term set forever. Are there any other dependancies, like the publishing feature or something? Anything I need to do with spservices beyond uploading it to the library? Thanks!
The areas you need to modify in the script are below. Ensure the path to SPServices is correct, and you’re using the correct metaFieldName
var metaFieldName = “Dept”; //Change to your site column names
Right, so I changed the name to “Specialty”, which is the title of my column, and the addresses are definitely right, they work in a browser. I’ve tried both relative URL’s and the full URL’s. Still just stuck on “loading your terms”. It’s a site column that was pushed from a content type hub, if that matters. I’ve tried other site columns though with the same result.
Can you post your response to the discussion board on CodePlex?
And the site columns are in the root site of the site collection? Is the site collection URL the root? Or is it in a subfolder? I don’t know what’s going on, trying to figure out your environment.
I’ll see about adding some more error handling in the script.
I guess i have same problem. While opening in IE, there is JavaScript error: console is not defined and “loading your terms” on web part. However, in Chrome works fine. Any ideas?
Thanks for the info, please post the issue to CodePlex and I’ll take a look.
To address bogatyrev issue (if not already resolved), comment out the console.log lines within the script tag. This an IE only strange issue. To get the code to work with the console.log you need to enable the Developer Tools pane (IE 8, IE 9 etc) either by clicking F12 or via the settings option. Other clever browsers usually tend to ignore the “console” statement if debugging view is not enabled. Hope it helps
Awesome, thanks for the help. I’ll update my script as well.
I am still getting the noted error even though the web part has the site column needed. I can see all my managed metadata terms, yet upon clicking one of them I get the same error as if my web part did not contain the site column.
Nvmd I figured it out, anyway we can get to work with a Data View Web Part?