Multiple Parameter List Filter in SharePoint Designer 2010

There are a couple of options when you find yourself in need of a search form that queries a SharePoint list and filters on multiple parameters. One option is to create custom search scopes based on the desired criteria - effective, but somewhat cumbersome and not very aesthetically appealing in my opinion. A second option is the content query web part, but it's not really functional as a dynamic search since users have to edit the page and modify the web part in order to alter the search parameters. The third option is the use of an HTML form web part, a list web part, and a web part connection but unfortunately web part connections only allow the transfer of one value so multiple parameters is not feasible. The method I've outlined below uses a Data View and its associated configuration options within SharePoint Designer to achieve the described behavior.
  1. Start SharePoint Designer 2010 and open the relevant SharePoint site.
  2. Create a page to house the search form and results, edit the page, and select 'Advanced Mode' from the top toolbar ribbon.
    NOTE: The search controls must be asp.net (not HTML) in order to be visible as control parameters. SharePoint Designer will only allow the addition of asp.net controls outside of the WebPartZone tag so the page must set to advance edit mode in order to allow editing outside the WebPartZone tag.
  3. Place the cursor just outside the WebPartZone tag in the code view of the page and add an Asp.net textbox control. Note the id attribute value of the control (the default is an incremented version of 'TextBox1'). Repeat this step for each text/date parameter. NOTE: The Ajax Control Toolkit Calendar Extender can also be used for a friendlier date control, but I haven't tested the 2010 Toolkit so proceed at your own risk.
  4. Place the cursor just outside the WebPartZone tag in the code view of the page and add an Asp.net dropdownlist control. Note the id attribute value of the control (the default is an incremented version of 'DropDownList1'). Repeat this step for each dropdownlist parameter.
  5. Place the cursor in the WebPartZone you'd like the list result set to appear and add an empty Data View.
  6. Select the appropriate data source from the Data Sources Picker.
  7. Navigate to the Data Source Details pane and select 'Multiple Item View' from the 'Insert Selected Fields As' dropdown. You can also use this pane to select the list columns you would like displayed within the Data View.
  8. Highlight the Data View and select 'Parameters' from the tool bar ribbon. Add a control parameter for each text box and dropdownlist search control.
  9. Highlight the DataView and select 'Filter' from the tool bar ribbon. Add a filter criteria line item for each non-date text box and dropdownlist. NOTE: You can include appropriate OR filter line items to return all results when search controls are left empty/unselected.
  10. Within the Filter Criteria dialog box, select the Add XSLT Filtering checkbox and click the 'Edit' button.
  11. To filter on records who's field value 'Created' matches dates contained within parameter ranges 'BeginDate' and 'EndDate', paste the following formula within the XPath expression textbox.
    [(number(ddwrt:FormatDateTime(ddwrt:FormatDate(string(@Created),1033,1),1033,'yyyyMMdd'))>=number(ddwrt:FormatDateTime(ddwrt:FormatDate(string($StartDate),1033,1),1033,'yyyyMMdd'))) and (number(ddwrt:FormatDateTime(ddwrt:FormatDate(string(@Created),1033,1),1033,'yyyyMMdd')) <= number(ddwrt:FormatDateTime(ddwrt:FormatDate(string($EndDate),1033,1),1033,'yyyyMMdd')))]
  12. Confirm the filter changes and save the page.
And...voila! If all went well, you should be set to filter your list on multiple parameter values. This procedure should also work within SharePoint Designer 2007 with a couple tweaks. First, you won't need to bother putting the page in advanced edit mode (SPD 2007 will let you add components outside the WebPartZones by default). Second, you'll use the data source library pane to interact with the Data View rather than the various wizards provided by SPD 2010. This article should provide a useful reference when implementing this solution within SPD 2007: http://msdn.microsoft.com/en-us/library/cc300163%28v=office.12%29.aspx

Posted on 2/7/2011 5:19:00 PM by sterlingt

Permalink | Comments (11) | Post RSSRSS comment feed |

Categories: SharePoint 2010 | SharePoint Designer 2010 | XSLT

Tags:

Currently rated 3.3 by 16 people

  • Currently 3.25/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Related posts

Comments

February 15. 2011 09:48

What controls did you use for the dates picker? I'm trying to use the SharePoint DateTimeControl to get the date from the user.
Also would you put an autopost back button to submit the changed values?

Nikola Trncic

February 19. 2011 15:05

Thanks - Nice article.. SPD 2010 rocks Smile

-Josh

Josh Watts

February 21. 2011 08:26

Hi Nikola,

I prefer the AjaxControlToolkit date picker control and I've used it in the past successfully. Take a look at this posting as a place to start: social.technet.microsoft.com/.../...-d4494a0f1776. I'll try to get around to appending those instructions to my posting.

-Tracy

sterlingt

March 22. 2011 01:30

Hi,
Very Nice Post.
how did you managed to use DatePicker ?

Thanks,
Shailesh

Shailesh

May 11. 2011 06:54

is there a way to reset paging when user clicks the Search button after every search. Reason is i am using this approcah and led me to paging issues social.msdn.microsoft.com/.../3fd84468-222a-4bb9-9edb-3cb5365fd64f

zach77

June 3. 2011 06:20

Can you please tell me how i can include appropriate OR filter line items to return all results when search controls are left empty/unselected.

Richard

June 20. 2011 00:52

Great Post, I had been hunting for a couple of days to find this. Thank you!

Rob

August 30. 2011 18:40

Tried your idea but it doesn't seem to to work

[or[(number(ddwrt:FormatDateTime(ddwrt:FormatDate(string(@Effective_x0020_Date),3081,5),3081,'dd/MM/yyyy'))) =
(number(ddwrt:FormatDateTime(ddwrt:FormatDate(string($effectDate),3081,5),3081,'dd/MM/yyyy')))]

Any ideas why this doesn't return anything

Patrick

October 26. 2011 01:15

For some reason, I cannot put two textbox controls into my page. No results are returned, I have tested this with and without filters/parameters. it's almost as if that the page doesn't like there are two asptext boxes.. little help?

Uzma

November 30. 2011 04:18

This seems to be what I was looking for. However, when I type values in the search box, nothing happens. The parameters are set up to get values from the controls; the filters are set up to use those parameters. Do I need to add a "Search" button or something that will make the values "take" after someone types them in?

Rachel Garrett

November 30. 2011 04:42

I figured out my earlier question. I needed to add AutoPostBack = "TRUE". Now this works like a charm. Thank you so much!

Rachel Garrett

Add comment


 

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Live preview

February 22. 2012 09:41