I am sure that sometimes you have been thinking in adding your own controls to the master page, and substitute the native ones. Well, you know you can do that by modifying the master page, but that is “forbidden”, as you could cause a big fall in the Web UI is you don’t do the things right.
There is a better way to achieve that target, and that is by playing with features, delegate controls, Ids and sequences.
The whole point of this article is to show how you can replace the famous search box for a really stupid button.
To do that the first thing we have to check is the master page… if we look quite close we will see and try to find where the searchbox lives we will find this XML paragraph:
<div id="s4-searcharea" class="s4-search s4-rp"><asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server"><SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/></asp:ContentPlaceHolder><span class="s4-help"><span style="height:17px;width:17px;position:relative;display:inline-block;overflow:hidden;" class="s4-clust"><a href="#" style="height:17px;width:17px;display:inline-block;" onclick="TopHelpButtonClick('HelpHome');return false" accesskey="<%$Resources:wss,multipages_helplink_accesskey%>" id="TopHelpLink" title="<%$Resources:wss,multipages_helplinkalt_text%>" runat="server"><img src="/_layouts/images/fgimg.png" alt="<%$Resources:wss,multipages_helplinkalt_text%>" style="left:-0px !important;top:-309px !important;position:absolute;" align="absmiddle" border="0" runat="server" /></a></span></span></div>
As you can see our native searchbox is called SmallSearchInputBox. Now! we need to get the ID and Sequence of this control (I will explain you later what is that for). If we go to C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\FEATURES and check for a feature call it OSearchBasicFeature and OSearchEnhancedFeature we will see they come up the following:
<Elements xmlns="http://schemas.microsoft.com/sharepoint/"><ControlId="SmallSearchInputBox"Sequence="50"ControlClass="Microsoft.SharePoint.Portal.WebControls.SearchBoxEx" ControlAssembly="Microsoft.Office.Server.Search, Version=184.108.40.206, Culture=neutral, PublicKeyToken=71e9bce111e9429c"><Property Name="GoImageUrl">/_layouts/images/gosearch15.png</Property><Property Name="GoImageUrlRTL">/_layouts/images/gosearchrtl15.png</Property><Property Name="GoImageActiveUrl">/_layouts/images/gosearchhover15.png</Property><Property Name="GoImageActiveUrlRTL">/_layouts/images/gosearchrtlhover15.png</Property><Property Name="DropDownMode">ShowDD</Property><Property Name="SearchResultPageURL">/_layouts/osssearchresults.aspx</Property><Property Name="ScopeDisplayGroupName"></Property><Property Name="FrameType">None</Property></Control></Elements>
Interesting to see we have found the ID and the Sequence.
- What is an ID here? and ID is the name of the control, and it is UNIQUE! so if we create a control and call it with the same name we will be able to replace it.
- What is the Sequence? the sequence is the sequence for the control to show up. So if we create a new control and replaec it with the same ID we will have to be sure that this Sequence is below the official one…in our case will be 10. Why? 1 will show up before 2.
AllowMultipleControls: Gets or sets a Boolean value that specifies whether to add all child candidate controls to the page at runtime. Be sure that this property is turn it to true in the master page so you can add control in run time mode.
Let’s go to start building the project:
1- Go to Visual Studio 2010-> New Project-> Sharepoint –> 2010 –> Empty SharePoint Project
2- Call the project netsourcecodeSearchBox, click OK and select deploy as farm solution.
3- Right Click Project –> Add New item –> User Control . Name it as ‘MyNonWorkingSearchBox’
4- Double click in the control design, and add a button.
5- Go to your project Right Click Features –> Add Feature, rename it as SearchBoxFeature , double click in the feature and select Site in the Scope drop down list.
6- Right Click Solution -> Add New Item –> Empty Element and call it Elements. Inside add this code. This is what we are going to replace.
<?xml version="1.0" encoding="utf-8"?><Elements xmlns="http://schemas.microsoft.com/sharepoint/"><Control Id="SmallSearchInputBox" Sequence="10"ControlSrc ="~/_controltemplates/netsourcecodeSearchBox/MyNonWorkingSearchBox.ascx"></Control></Elements>
Your project should look like this now.
7- Be sure you package looks like this:
8- You can deploy the project now. This is the result:
Download the code here: