Creating a Custom Search Page and Tabs in the Search Center of SharePoint Server

Summary:  Learn how to create a custom search page and tabs in the Search Center of Microsoft Office SharePoint Server 2007.

Office Visual How To

Applies to:  2007 Microsoft Office System, Office SharePoint Server 2007

Patrick Tisseghem, U2U

April 2007

Overview

The Search Center is a new type of site that is included by default in the site collection when you provision a collaboration portal. Its goal is to provide users with a customized search experience, and to replace the search box that is available at the top of the pages in the portal. There are two editions of the Search Center: the Search Center Lite and the Search Center with Tabs. The Search Center Lite is typically added to site collections where the publishing features are not activated. An example is a site collection with only team sites. The Search Center with Tabs offers a full customization using a tab-based user interface, but it requires the publishing features to be active. This is the case by default within collaboration portals. This article covers two customization options that can be performed in the Search Center with Tabs: how to add custom search pages and tabs, and, how to replace the XSLT for the search results with a custom XSLT.

See It Configuring IntelliSense With CAML

Watch the Video

Length: 17:09 | Size: 14.3 MB | Type: WMV file

Code It | Read It | Explore It

Code It

Several Web Parts display the search results on the search results page. One of the Web Parts, the Search Core Results Web Part, has various properties that you can configure to customize the Web Part. An important item you may want to customize is the XSLT that transforms the XML that contains the search results returned from the search engine into the HTML representation displayed in the body of the Web Part. You have the option to replace the XSLT with your own custom XSLT.

XSLT for displaying the raw XML with the search results

Use the following XSLT example to make the Search Core Results Web Part display the XML that contains the search results without applying a transformation to the search results.

<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
 <xsl:template match="/">
  <xmp><xsl:copy-of select="*"/></xmp>
 </xsl:template>
</xsl:stylesheet>

An example of custom XSLT for the search results

Using Microsoft Office SharePoint Designer 2007, you can use the raw XML output to create a custom XSLT. You can make use of the powerful and rich XSLT design experience in Office SharePoint Designer 2007 to generate the XSLT for the Data View Web Part. This custom XSLT can replace the default XSLT that is used by the Search Core Results Web Part. The video illustrates the different steps. Figure 1 shows the result of applying the following XSLT, generated by the Data View Web Part, to the search results:

<xsl:stylesheet version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="
  https://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp=
  "https://schemas.microsoft.com/ASPNET/20" xmlns:__designer=
  "https://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl=
  "http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" 
  xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2=
  "urn:frontpage:internal">
 <xsl:output method="html" indent="no"/>
 <xsl:decimal-format NaN=""/>
 <xsl:param name="FileName" />
 <xsl:param name="dvt_apos">'</xsl:param>
 <xsl:variable name="dvt_1_automode">0</xsl:variable>   
 <xsl:template match="/"
  xmlns:asp="https://schemas.microsoft.com/ASPNET/20" xmlns:__designer=
  "https://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint=
  "Microsoft.SharePoint.WebControls">
  <xsl:call-template name="dvt_1"/></xsl:template>
  <xsl:variable name="dvt_2_automode">0</xsl:variable> 
  <xsl:variable name="dvt_5_automode">0</xsl:variable>
  <xsl:template name="dvt_1">
  <xsl:variable name="dvt_StyleName">2ColFrm</xsl:variable>
  <xsl:variable name="Rows" select="/All_Results/Result" />
  <table border="1" width="100%">
   <tr>
    <xsl:call-template name="dvt_1.body">
      <xsl:with-param name="Rows" select="$Rows" />
    </xsl:call-template>
   </tr>
  </table>
 </xsl:template>
 <xsl:template name="dvt_1.body">
  <xsl:param name="Rows" />
  <xsl:for-each select="$Rows">
    <xsl:sort select="author" order="ascending" />
    <xsl:call-template name="dvt_1.rowview" />
  </xsl:for-each>
 </xsl:template>
 <xsl:template name="dvt_1.rowview">
   <td valign="top" width="50%">
     <table border="0" cellspacing="0" width="100%">
      <tr>
       <td width="25%" valign="top" class="ms-vb"><b>title:</b></td>
       <td width="75%" class="ms-vb">
         <a href="{url}"><xsl:value-of select="title" /></a>
       </td>
      </tr>
      <tr>
       <td width="25%" class="ms-vb"><b>author:</b></td>
       <td width="75%" class="ms-vb"><xsl:value-of select="author" />
       </td>
      </tr>
      <tr>
       <td width="25%" class="ms-vb"><b>write:</b></td>
       <td width="75%" class="ms-vb">
        <xsl:value-of
              select="ddwrt:FormatDate(string(write) ,1033 ,3) />
       </td>
      </tr>
      <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
        <tr>
         <td colspan="99" class="ms-vb">
            <span ddwrt:amkeyfield="" ddwrt:amkeyvalue="string($XPath)"
              ddwrt:ammode="view" />
         </td>
        </tr>
      </xsl:if>
     </table>
   </td>
   <xsl:if test="position() mod 2 = 0" ddwrt:cf_ignore="1">
    <xsl:text disable-output-escaping="yes">&lt;/tr&gt;</xsl:text>
    <xsl:if test="position() != last()" ddwrt:cf_ignore="1">
     <xsl:text disable-output-escaping="yes">&lt;tr&gt;</xsl:text>
    </xsl:if>
   </xsl:if>
   <xsl:if test="position() = last()" ddwrt:cf_ignore="1">
    <xsl:if test="position() mod 2 != 0" ddwrt:cf_ignore="1">
     <td>
      <xsl:text disable-output-escaping="yes"
       ddwrt:nbsp-preserve="yes">&amp;nbsp;</xsl:text>
     </td>
    </xsl:if>
   </xsl:if>
 </xsl:template>
</xsl:stylesheet>

Search results using custom XSLT

Figure 1. Display of search results using custom XSLT 

A common task is to create additional tabs in the Search Center. A tab is associated with a page based on one of the available search page layouts.

To create a custom search tab and a custom search results page

  1. Click the Search tab to go to the Search Center.

  2. Point to Site Actions, and then click Create Page.

  3. Enter a name for the title.

  4. Select the Search Page in the list of page layouts.

  5. Publish the page.

  6. Point to Site Actions, and then click View All Site Content.

  7. Click the Tabs in Search Pages list and click New and then Add New Item to add a new item that represents your new tab.

  8. Provide a name and associate it with the custom search page that you created earlier.

  9. Click the Tabs in Search Results list and and click New and then Add New Item to add a new item that represents your new tab.

  10. Provide a name and associate it with the custom search page that you created earlier.

Instead of using the default search results page, SharePoint can display the search results in your own custom results page.

To create a custom results page and connect it to your custom tab

  1. Click the Search tab to go to the Search Center.

  2. Point to Site Actions, and then click Create Page.

  3. Enter a name for the title of the page.

  4. Select Search Results Page in the list of page layouts.

  5. Publish the page.

  6. Click the custom tab you created and then point to Site Actions, and click Edit Page.

  7. On the Search Box Web Part, click Modify Shared Web Part to open the properties pane.

  8. Under the Miscellaneous category, find the text box for the target search results page URL. Enter here the name of the custom search results page.

  9. Click OK and publish the page.

A search query is executed and the results are delivered to the Search Core Results Web Part in XML format. The Search Core Results Web Part uses an XSLT to transform the XML into the HTML that is displayed as the body of the Web Part.

To change the XSLT

  1. Go to the custom search results page.

  2. Point to Site Actions, and then click Edit Page.

  3. On the Search Core Results Web Part, click Modify Shared Web Part to open the properties pane.

  4. Under Data View Properties, find the button to open the editor with the XSLT.

  5. Replace the XSLT with your own custom XSLT.

  6. Click OK and publish the page.

Read It

The Search Center is a new type of site that is included by default in the site collection when you provision a collaboration portal. Its goal is to provide users with a customized search experience, and to replace the search box that is available at the top of the pages in the portal. There are two editions of the Search Center: the Search Center Lite and the Search Center with Tabs. The Search Center Lite is typically added to site collections where the publishing features are not activated (for example, a site collection with only team sites). The Search Center with Tabs offers a full customization using a tab-based user interface, but it requires the publishing features to be active (this is the case by default within collaboration portals. This Office Visual How To addresses two customization options you can perform in the Search Center with Tabs: how to replace the XSLT for the search results with a custom XSLT, and how to add custom search pages and tabs.

Explore It