Friday, 21 February 2014

How to create a search box or filter for a list in the same page allowing you to work in the same page. Applicable for Sharepoint 2010 and Sharepoint 2013

I was asked if I could create a page with one massive list, but with only one filter box. That is not possible to do it with the Filter web part, unless you only want to filter for one parameter. In this case I had 50 columns to filter and more than 10,000 items in the list. So I didn’t want to have 50 text boxes all over the page.

I decided to use the designer to create a Query string where I can pass my 50 parameters and then filter all of them with an OR clause. The best tool to do this it is the designer. For the User interface I use the HTML webpart and few lines of Javascript code.

For this excersise I am going to use Sharepoint 2010 and Microsoft SharePoint Designer 2010 BUT you can do exactly the same with Sharepoint 2013 and Microsoft SharePoint Designer 2013.

Step 2 – Set the Masterpage for the pageClick on the page you have just created-> Edit file

Click on Design (Bottom)

Click on Style(top Ribbon)->Attach->Default Master Page. You should have a normal page now. I have selected my custom Master Page, so mine will look different than the Out-Of-The-Box one. Select the main place holder and click in the little arrow, a new menu will pop-up-> Click on Create Custom Content. Click on Save.

Step 3 – Adding the list and the code behindClick on Main the main place holder

Insert->DataView->Select the List you want and you should have something like this:

Click on Code (bottom of the designer) and paste this code just below the PlaceHolderMain this line:

Click on New Parameter->add one called “searchparam” Select Parameter Source=Query String and Query String Variable=value.

Step 4 – Adding the filterNow it is time to add the fields you want to filter. Click on the list Go to the Ribbon and click on Filter, a new dialog will pop up, you can do your own search over there.

Click on save and go to your page, remember it is under SitePages. Notice the query string changes every time you insert a value in the text box. By the way, the list will look empty until you type a value.

5 comments:

Anonymous
said...

Wow that was unusual. I just wrote an incredibly long comment but after I clicked submit my comment didn't appear.Grrrr... well I'm not writing all that over again. Anyways, just wanted to say wonderful blog!

About Me

I am a dedicated software developer who has been programming since I was 9 years old, when I made my first game in an Amstrad 128kb... after 25 years I keep doing the same stuff with different systems... If you have any problems or you want to contribute to this blog please email me to gabrielrenom@gmail.com

I have been Developing applications for mobile devices since late 90's I am keep dedicated to mobile development working with iPhone, iPad, iTouch , Windows Mobile and Android platforms having my own column in the US magazine i.Business. www.ibusinessmag.com.
Currently working in the legal industry for DWF LLP.