Monday, July 15, 2013

SharePoint 2013 Custom Search Box Without Visual Studio

So, I was working on a site design where the customer had a web part for doing employee lookups. Using the web part would basically direct you to the peopleresults.aspx page of the search center for the site. This site is being upgraded from 2010. I thought that there had to be a better way to do this so started doing some digging around to see what I could find.

It turns out that in 2013, there is a new search control that allows you to create a search box without using Visual Studio and you can do it in your master page. I found the line near the top of the master page that begins with:

<%@Register TagPrefix="SearchWC"

This line has the new Search control in it and allows for some nice customizing right in the declaration itself. So to create an "Employee Lookup" control I did this:

<SearchWC:SearchBoxScriptWebPart ID="EmployeeSearch" UseSiteCollectionSettings="false" InitialPrompt="Employee Lookup..." ShowPeopleNameSuggestions="true" ResultsPageAddress="/searchcenter/Pages/peopleresults.aspx" EmitStyleReference="false" ShowQuerySuggestions="true" ChromeType="None" UseSharedSettings="false" TryInplaceQuery="false" ServerInitialRender="true" runat="server" />

This creates a nice search box that goes directly to the desired page! It is clean and neat and does not take extra effort to create. It uses the same styles so can be styled however you want. The key options here are UseSharedSettings which must be false as well as UseSiteCollectionSettings.

The options available can be found on MSDN here

You can also extend this further if you did want to play with some templates and create a whole new experience. The templates are in the Master Page Gallery in the Display Templates/Search folder. The default template is called "Control_SearchBox_Compact" and there are 2 files (.js and .html) for each template. The ServerInitialRender property must be set to false if you want to override the templates!

I hope you have found this useful and please post any feedback you have!