Adding A Dropdown Filter To Improve List Navigation In Office 365 Sharepoint Online 2010 & 2013

Sharepoint lists/libraries include various filtering options to help users find what they’re looking for. But the built in, “Excel” like filters and the default form filter web parts aren’t very intuitive or convenient. A drop down menu of options would be more user friendly, and it’s doable by customizing the simple html form filter.
021214_1430_addingadrop1
The Steps:
Add a filterable meta data column to a list.
Insert the form code needed for the drop down menu.
Connect the form filter to the list.
Here are some examples:
2010: http://365.webbrewers.com/SitePages/Eng%20Capstone%20Test.aspx
2013: http://365new.webbrewers.com/Site%20Pages/Text%20filter.aspx
Prepare the List
If your list/library doesn’t already have it, you’ll need to add the column you want to filter on
You can use “category” or any other meaningful meta data term
Open the list settings and create the column, and ensure it’s included in the view you will use
Prepare the Page
On any public or private site page, insert the list view web part
Choose the location you want, and insert an “HTML Form Filter Web Part”
Add The Code

021114_2250_addingadrop1

Open the form filter web part properties
Click “Source Editor” and add your form code in the dialog box
You can use any code but the lines in red below are REQUIRED for the form to work.
Also the option values MUST MATCH the values defined in your meta data column in the previous step.
The optional last line is a trick to clear any filters by refreshing the page.
Sample code (tags removed):

div onkeydown=”javascript:if (event.keyCode == 13) _SFSUBMIT_”
select name=”Media”
option value=”Painting” selected=”selected”Painting/option
option value=”Drawing”Drawing/option
option value=”Print”Print/option
option value=”Charcoal”Charcoal/option
option value=” “*Reset All*/option/select
input type=”button” value=”Go” onclick=”javascript:_SFSUBMIT_”/
/div
a href=”http://365new.webbrewers.com/Site%20Pages/Text%20filter.aspx” Clear All filters!/a


Clear All filters!
Connect The “Dots”!
Next you have to pass the selected value to the list and execute the filtering
Click the down arrow for the filter web part to open a context menu
Click “connections” and select “provide form values to” – when your list name appears, select it.

021114_2250_addingadrop2

If you see a warning about “prevent opening new dialog boxes…” just click cancel.
In the dialog box that opens, there are 2 options:

021114_2248_addingadrop3

1. Choose connection: select “get filter values from” and click the “configure” button

021114_2248_addingadrop4

2. Configure connection: “provider field name” would be the field you defined in the code above (“media” in that example).
The “Consumer field name” presents a drop down of all the list’s fields so select the meta data column you want to filter on.
The value selected will be what gets used to filter the list.
Click “Finish” and the connection is set.
Adding Multiple Filters
To further fine tune the filtering you can add more form filters connected to different columns, allowing the selection of quite specific results. In this example, for instance, filtering is done on “Institution, “Discipline” and ….any other parameter.
Questions?
Please visit our forum »