For a single menu displaying filter options dynamically, you only need to associate the menu with one column from the main list. When an option is selected, the browser is redirected to the same page with a query string parameter set to the selected filter parameter using JavaScript. The main list on the page is then configured to filter contents based on the parameter.
Components:
- Document Library with custom column "Heading"
- One Web Part page with the following components:
- Data View Web Part displaying the actual documents in the library
- Data View web Part displaying the possible filter options (from the Heading column)
Usage:
- When a filter option is selected from the menu Data View, the browser will be sent to the current page with the selected option included as a Query String Parameter (using link or JS).
- The main Data View web part would be configured with a custom parameter obtained from the Query String. The custom parameter would be used as filter criteria for the Data View. The result is that when an option from the dynamic menu is selected, the documents listed in the main Data View will be dynamically filtered based on the selected option.
JavaScript Reference:
The “How To” instructions below refer to JavaScript functions used for Query String Manipulation. To view details about the functions referred to below, as well as other functions for hyperlink/query string manipulation, see:
Query String Manipulation using JavaScript
- Add Query String Parameter using JavaScript - addParameter()
How To:
- Create a new Document Library, or use and existing one if required.
- Add a custom column to the library (or content type if using custom content types). In this example the column will have the title “Heading”, and will be used to list menu options, but it can have any title as required.
- From the view menu of the document library or the setting page, select the “Create view” option to add a new view.
- When viewing the newly created View page, select the “Edit in SharePoint Designer” from the file menu, or manually open the site and page for editing in SharePoint Designer.
- Add a second instance of the same Document Library Web Part to the page above the existing. Set the crome state to None in the Appearance section if required.
- Right click on the new Web Part and select Convert to Data View option.
- Once a Data View Web Part, open the Sort and Group dialog, and add criteria to group the list by the “Heading” column.
- In the design pane of the page, right click on one of the listed items (documents) and remove the row from the table. This will remove all list items resulting in only the groups remaining. Remove additional functionality from the groups, such as the expand, contract button/link or css styles.
- Format the group value as a hyperlink, with “#” as the value for the href attribute.
- Add an “onclick” attribute, with a call to the addParameter() JavaScript function. The value of the selected filter option and the parameter name is passed to the JavaScript function which adds the parameter to the current url using a redirect.
If there are no existing parameters on the current page url, the easiest method to configure a hyperlink to add a Query String Parameter to the current page is to set the href attribute to the following:
<a href="?main={$fieldvalue}"><xsl:value-of select="$fieldvalue" /></a>
Using the above (simple) method will replace any existing parameters in the current url with the new parameter and value. For a single dimensional menu, using this method to add Query String parameter and value to use as filter criteria on other Web Part s on the page would be fine. For multi dimensional menus (main and sub menu), you may need to retain the parameter in the Query String that determines which main/primary heading when adding the sub-heading filter parameter. In this case, JavaScript can be used to add the new parameter to the existing Query String. Using JavaScript to manipulate the query string is a better method to use in either case as existing parameters will always be retain, but would obviously require that JavaScript be enabled on client browsers.
More Resources for SharePoint Development & Customisation:
Posts
1 comment:
Hi - thanks for making this post. This concept is exactly what I would like to do, except, I want to take it one step further and filter a document library as well as other lists (on the same page) at the same time. For example, if I select "Accounting" from the drop-down menu, I would like the doc library, task list and calendar list to all filter for items that match the "Accounting" criteria. Do you know if that is possible based on the instructions that you've listed?
Post a Comment