Creating More Advanced Spotlights

To illustrate how the separation of the display and search sources makes it easy to independently fine-tune different aspects of your application, this section shows how to update your display code and produce a visually more attractive spotlight without changing any other aspect of your project. The spotlighting options provided on the Settings tab's Results > Documents menu make it easy to create simple spotlights; for anything beyond the capabilities that these options provide, you will need to write some XSL code.

The spotlighting options provided on the Results > Documents override any manual settings, so the first step will be to remove your existing spotlighting customizations. Once this is done, Watson Explorer Engine makes it easy to integrate your own custom XSL into the Watson Explorer Engine display framework.

To remove the existing spotlighting code that we have created so far, first open the spotlighting-display used throughout this tutorial. To do this, click the Display entry in the Watson Explorer Engine administration tool's left menu to show the spotlighting-display display.

On the Settings tab, select Documents from the Results sub-menu to open that section. Scroll down and click remove to the right of the boost settings beside the df boost name.

Next, click the XSL tab and select Document from the Add XSL list. A second list displays to the right of the first list, showing your options for adding Document XSL. Select Boost - Custom from this list, and click Add.

Remove the current content from the editable text area (all of which is simply XSL/XML comments), and enter the following as the XSL code that will be used to spotlight the boosted results:

<fieldset style="border: 1px solid orange">
  <legend style="font-size: 120%; color: #555">Good Choices:</legend>
  <ul style="list-style-type:none;  padding: 0 0.5em">
    <xsl:for-each select="document">
      <li style="margin: 0.5em 0;">
        <span>
          <a href="{@url}"><xsl:value-of
             select="content[@name='title']" />
          </a>
        </span>
      </li>
    </xsl:for-each>
  </ul>
</fieldset>

Click OK to save the updated display XSL. Returning to your project and retrying your query will show the more advanced spotlight of boosted content.

The sample display XSL code used in this tutorial was provided to highlight spotlighting functionality. You will probably want to create your own display XSL so that your spotlights are better integrated into the look and feel of your web site and application.

To proceed with this tutorial, click Display Boost in a Tabbed Spotlight.