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.
This solution is exactly what I’ve been looking for, however I am getting the same problem as other users – it gets stuck loading the terms. My column is not in the root site but I made the change as recommended which got rid of the “column does not exist error”. I am using jquery.1.11.3.js
jquery.SPServices-2014.02.js
sharepoint server 2013, so instead of linking to it from a content editor webpart I inserted a script editor webpart and pasted the script into it.
I’ve tried it in IE and Firefox and I get the same spinning gears image in each of them
Any ideas?
This is great! Any chance there is a way to use this that allows a user to type in their metadata (like a metadata filter) instead of just showing them all? Thanks a bunch.
Hey
Thanks a lot, got it to work. Just got one question…Is there a way to customise it so that it searches in folders as well? I have a document library I added on my page as a web part (the document library has folders in it), the filter seems to only filter or find material that is not in a folder.
I created a similar solution but its running on the server side and can filter multiple list view webparts.
https://spmetadatafilter.codeplex.com/
This is awesome; nice job!
I had a problem with getting the list of keywords because my metadata field was on a subsite, not the root. I moved it to the root and now I am getting the list of Keywords. The problem is that when I click on one of the keywords I get the error “One or more field types are not installed properly. Go to the list settings page to delete these fields.”
Googling that showed other people getting the error from SPServices when the site column name has a space in it, as mine does. As suggested I switched to the internal name of Development_x0020_Customers. I am still getting the list of keywords, but when I click on one of the terms I get the same error above. Any ideas?
Hi Paul,
I’m not sure on this one. What I can do is test it out some and get back to you.
Thanks,
David
FYI, I created a new site column that does not have a space in it (DevCustomers) and used the same managed metadata list and that fixed it. My internet access is not the greatest which complicates my testing, but from the best I can tell this is an issue. What I wanted to go back and test was what happened if I renamed the site column to have a space in it. I had renamed the old site column to not have a space in it but that did not fix it. I believe that is because the internal name still had the x0020 in the middle.
Hello,
I have a problem with the code, i can load the Parent terms but not the child terms. If i have a term set with Terms that have no child term everything loads, but if there are children it seems to load forever, is there any reasons why this happens?
Hi Thomas,
That’s not a scenario I’ve tried, unfortunately I can’t say, but I’d guess the issue is due to the children items. Leave a discussion on the codeplex site, http://metadatapagefilter.codeplex.com, and we’ll see if others may have an idea or fix.
Thanks,
David
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?
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 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.
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.
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 ;).