Dd583130.odc_spssearchboxwithportal

Dd583130.odc_spssearchboxwithportalsearchresults_fig4(en-us,office.11).gif

Figure 4. Custom site context Search box

When you try to mimic a Web site's functionality, start by viewing the source in the browser. The source provides you with the HTML and ECMAScript (JScript, JavaScript) code that is present on the page after that page is rendered on the client. By viewing the source on a SharePoint site home page, you can learn about the table structure and cascading style sheet classes that you need to support when you build your custom Search box.

Few graphic design tools exist for developing ASP.NET server controls and Web Parts, but you can develop ASP.NET server controls using the most common of Web design layout elements: tables. By creating a multicolumn table layout for your Web control, you can more easily influence how controls are laid out on the page and rendered in the client browser.

By examining the SharePoint site and portal site Search boxes, you can quickly determine the base structure of the five-column table you will need:
•Two columns to hold spacers (at the left and right of the table).
•One column for the Advanced Search button.
•One column for the scope drop-down list box and Enter keyword(s) text box.
•One column for the Go, or Execute Search, button.

As you begin to build your table structure, you first override the CreateChildControls() method of the Microsoft.SharePoint.WebControls.SPControl class. This method becomes code when you execute EnsureChildControls() in the other overridden method, Render().

Use the following code to create the first column of your table, a spacer. The only interesting code in this cell is the use of the CssClass property. We use the same classes that the SharePoint site Search box used to ensure that the Web control appears properly on a page that has a theme applied. You use this same technique