How to include two Search Box controls in the same master page - SharePoint 2013

Introduction

Working with SharePoint is typical we have to do little customizations in Branding, so it is really helpful to understand and know the Out-of-the-box controls or webparts that SharePoint provides. That could be a good time saver to meet our requirements easily.

On this time, the requirement was to have two search controls in the same master page, one to find everything, other to find people.

Before SharePoint 2013, it was used the SearchBoxEx control, but with the Display Templates engine used in SharePoint 2013, there was included a new control named SearchBoxScriptWebPart.

You can see good description about these two controls and Display Templates, here

Code

To achieve our goal and put two controls in the same Master Page, we can use this code:

Some important notes inside the code:

I roughly recommend to use UseSiteCollectionSettings="true" ONLY in one control. And in the other control use static links inside.

InitialPrompt text avoid to put the text using jQuery :D .

UseSharedSettings="false" will allow you to use custom Display Template and Results Page.

RenderTemplateId is useful to change completely the aspect, even it is needed to change GO Search icon.

ServerInitialRender="false" will produce JS files and use Display Template engine, otherwise the control is rendered in the Server Side.

If you want to apply custom RenderTemplateId it is MANDATORY to have ServerInitialRender="false".

DefaultDropdownNodeId="1001" is useful to set the default scope. 1001 – Search Everything, 1002 – Search People, …

Introduction

Code

Read more…