Product Selector

Fusion 5.9
    Fusion 5.9

    Solr Highlighting

    App Studio is able to leverage the Solr Highlighting component to visually distinguish any hits in a search result. There are a number of parameters that can be included in any Solr queries where highlighting should take place. These parameters can be added either in an App Studio <search:query> tag, or in a Fusion query pipeline.

    App Studio also allows for custom styling of any highlighted hits, which is covered at the end of this page.

    How to Configure Solr Highlighting in App Studio

    1. Open any HTML page that uses a <search:query> tag where highlighting should take place.

    2. Modify the <search:query> tag to include the required hl.fl parameter (a complete list of optional parameters can be found here): NOTE: If not using App Studio Enterprise, an additional hl parameter must be included and set to true for highlighting to work. App Studio Enterprise sets this parameter to true by default in ../src/main/resources/conf/platforms/fusion/fusion.conf (via highlighting: true).

      <search:query var="query" parameters="*" results-per-page="12">
    <query:custom name="hl.fl" value="description_t"></query:custom>
</search:query>
      Parameter Name Parameter Value Description

      hl.fl

      description_t

      comma separated list of fields where highlighting should occur

      hl (only required if not using App Studio Enterprise)

      true

      Boolean flag for whether or not highlighting should occur

    3. Refresh the search UI in your browser and any hits will appear highlighted. NOTE: you must have the field(s) specified in the hl.fl parameter above displayed using a <search:field> on the HTML page.

    4. See the Styling Highlighted Hits section below for steps to add custom styling to search hits.

    How to Configure Solr Highlighting in a Fusion Query Pipeline

    1. In the Query Workbench, add or modify an existing Additional Query Parameters stage.

    2. Add the following required parameters (a full list of optional parameters can be found here): NOTE: If not using App Studio Enterprise, an additional hl parameter must be included and set to true for highlighting to work. App Studio Enterprise sets this parameter to true by default in ../src/main/resources/conf/platforms/fusion/fusion.conf (via highlighting: true).

      Parameter Name Parameter Value Description

      hl.fl

      description_t

      comma separated list of fields where highlighting should occur

      hl (only required if not using App Studio Enterprise)

      true

      Boolean flag for whether or not highlighting should occur

    3. Save the query pipeline, and return to your search application.

    4. Run a new search that utilizes the query pipeline modified in step 2 and any hits will appear highlighted. NOTE: you must have the field(s) specified in the hl.fl parameter above displayed using a <search:field> on the HTML page.

    5. See the Styling Highlighted Hits section below for steps to add custom styling to search hits.

    Styling Highlighted Hits

    1. Add the following CSS in order to add custom styling to Solr highlighting:

      • If using App Studio Enterprise, this should go in ../src/main/webapp/styles/includes/custom.less:

      • Any custom CSS can be used in place of the example attributes below.

        .result {
  em {
      background-color: yellow;
      font-weight: bold;
      font-style: normal;
  }
}

    2. Hard refresh the search UI in your browser. Any hits will now be styled according to the CSS from the previous step.