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 1 - Create the place holder page
Go to Microsoft SharePoint Designer 2010->Open your site->Site pages->Right click on the left side->New->ASPX Page
image

I called the page Search.aspx.

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

Click on Design (Bottom)
image

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.
image

Step 3 – Adding the list and the code behind
Click on Main the main place holder
image

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

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

<WebPartPages:SimpleFormWebPart webpart="true" runat="server" __WebPartId="{29221221-845B-4910-B7DC-B6898D38966F}"><WebPart xmlns="http://schemas.microsoft.com/WebPart/v2">
	<Description>Connects simple form controls to other Web Parts.</Description>
	<PartImageLarge>/_layouts/images/mssfwp.gif</PartImageLarge>
	<sfwp:Content xmlns:sfwp="http://schemas.microsoft.com/WebPart/v2/SimpleForm"><![CDATA[<style type="text/css"> 
  		body #s4-leftpanel { display: none; } 
  		.s4-ca { margin-left: 0px; } 
	</style>
	<script>	
		function Search()
		{ 	
		  searchtext = document.getElementById('searchTxt').value;		  
		  window.location.href = document.URL.split("?")[0] + '?value=' + searchtext;
		}		
		</script>
		<div onkeydown="javascript:if (event.keyCode == 13) Search()">
			<input type="text" name="T1" id="searchTxt" size="50"/>&nbsp;&nbsp;
			<input type="button" value="&nbsp;&nbsp;Search°&nbsp;&nbsp;" onclick="Search()"/>
		</div>
		<br>
		]]></sfwp:Content>
	<ID>g_29221221_845b_4910_b7dc_b6898d38966f</ID>
<FrameType>None</FrameType>
</WebPart></WebPartPages:SimpleFormWebPart>
The code should look like this:
image
This code is just a HTML Form Web Part with some Javascript and HTML code inside. You can just insert the web part from the designer and add the code from the web part.


Step 4 – Adding the parameters
Click on the list-> Top Ribbon –> Options –> Parameters.
image


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


Step 4 – Adding the filter
Now 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.
image



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.
image


Enjoy!

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!


Here is my weblog - where can i get garcinia cambogia

ninest123 said...

replica watches, louis vuitton, air jordan pas cher, longchamp pas cher, ray ban sunglasses, nike air max, oakley sunglasses, ugg boots, oakley sunglasses, nike free, nike roshe run, louboutin shoes, michael kors, louboutin, longchamp outlet, louis vuitton outlet, polo ralph lauren outlet, longchamp outlet, tiffany jewelry, tiffany and co, jordan shoes, tory burch outlet, ugg boots, air max, louis vuitton, replica watches, nike free, louis vuitton, uggs on sale, sac longchamp, burberry, chanel handbags, oakley sunglasses, polo ralph lauren outlet, louboutin outlet, longchamp, louis vuitton outlet, prada outlet, cheap oakley sunglasses, oakley sunglasses, christian louboutin outlet, louboutin pas cher, ralph lauren pas cher, ray ban sunglasses, kate spade outlet, ray ban sunglasses, nike air max, prada handbags, gucci outlet, nike outlet

ninest123 said...

burberry outlet online, nike air max, coach purses, nike air max, michael kors, timberland, new balance pas cher, true religion jeans, kate spade handbags, nike free run uk, north face, true religion jeans, ralph lauren uk, air force, hollister pas cher, ray ban uk, converse pas cher, lacoste pas cher, michael kors outlet, michael kors outlet, ugg boots, michael kors outlet, michael kors outlet, coach outlet, vans pas cher, hollister, burberry, coach outlet, nike blazer, oakley pas cher, vanessa bruno, mulberry, ugg boots, lululemon, hermes, tn pas cher, ray ban pas cher, sac guess, hogan, true religion jeans, abercrombie and fitch, true religion outlet, michael kors, nike air max, michael kors outlet, replica handbags, michael kors, nike roshe, north face, michael kors

ninest123 said...

longchamp, iphone 5s cases, hollister, ferragamo shoes, herve leger, jimmy choo shoes, giuseppe zanotti, north face outlet, vans shoes, mont blanc, nike huarache, celine handbags, iphone cases, iphone 6s cases, nike trainers, lululemon, louboutin, ralph lauren, iphone 6 cases, babyliss, s5 cases, hollister, north face outlet, nfl jerseys, bottega veneta, soccer shoes, oakley, baseball bats, abercrombie and fitch, ghd, chi flat iron, valentino shoes, beats by dre, asics running shoes, wedding dresses, reebok shoes, timberland boots, ipad cases, mac cosmetics, mcm handbags, nike roshe, nike air max, insanity workout, iphone 6s plus cases, birkin bag, p90x workout, hollister, instyler, iphone 6 plus cases, soccer jerseys, new balance

chenmeinv0 said...

mavericks jerseys
canada goose sale
abercrombie kids
nike roshe run pas cher
ugg outlet stores
oakley sunglasses sale
oakley vault
air jordan shoes
michael kors outlet online
cheap mlb jerseys
2016.12.17xukaimin