Skip to main content


Getting to know Sitecore Search – Part 7

Rory Mckeever Gobpkszspsk Unsplash

Welcome back to getting to know Sitecore search.  In this post, we’ll continue modifying our react ui to add a search bar, facets, sort options, and more style updates.

Update Search Results Component

In the previous post we used the basic search results component.  But it was missing a search bar.  Luckily, the sdk has a results component that includes a search bar . I followed the same instructions in my previous post to add the new component.  I added the new SearchResultsWithInput widget to my main widget provider.  Voila, I had a search bar above my search results.  Some of the class names from the SearchResults widget changed, so I did have to make some updates to my previous css.

Adding Facets

There are two facets in your account by default: type and tags.  You can add new facets from the Domain Settings page.

  • Administration/Domain Settings/Feature Configuration
  • Edit Facets
  • Add an Attribute
  • Choose the fields to add to the facet
  • Set the label
  • Choose operator type
    • Default is dynamic or
      • An item will show in the results if it matches any of the selected facet options
  • Save
  • Publish domain settings
  • Reindex your sources

Facet Settings

Be aware that these facets are not immediately available.  You must reindex your sources for the facets to be available.

Add Sorting Options

There are no sorting options created by default.  Some common sort options to include are: best match, A – Z, and Z – A.  You can add new sort options from the Domain Settings page.

  • Administration/Domain Settings/Feature Configuration
  • Edit Sorting Options
  • Add a Sorting Option
  • Set the display name and api name
  • Choose attribute and sort direction
  • Use the up/down arrows to change the order of the items
  • Save
  • Publish domain settings
  • Reindex your sources
  • Update SearchResultsComponent.defaultSortType in your react application
    • Use api name

Sort Settings

Be aware that these sorting options are not immediately available.  You must reindex your sources for the sorting options to be available.

Update Widget Settings

We can update our widget settings to control our newly created facets and sort options.

  • Enable/disable
  • Control the display order

The settings are rule based per widget variation.

  • Add a new rule
  • Specify any site or visitor contexts
  • Configure any boost, bury, or blacklist rules
  • Apply settings
    • Available facets
    • Sorting
  • Save
  • Publish widget

You can create multiple rule sets per widget.

Hierarchy of Settings

There are several places to edit settings within the CEC.  Each level can override the settings from previous levels.

  • Domain Settings – Define configurations
  • Global Resources/Global Widget/Global Widget Settings – Sets the default behavior for all widgets
  • Global Resources/Global Widget/Global Widget Variations – Override the default behavior within a specific site or visitor context
  • Widgets/Widget Variation/Rules – Override any global widget settings or global widget variations for this specific widget variation

You can see on the widget variation page which rules will be inherited.

Widget Inherit Global Rules


The html structure of the default sdk components is well organized.  Everything is granular and can be easily styled.

  • Search bar
  • Left column
    • Clear facets
      • Clear filter button
      • Clear individual facet
    • Facets
      • Facet trigger
      • Facet options container
      • Facet options
  • Right column
    • Results header
    • Sort by
      • Current sort
      • Sort trigger
      • Sort dropdown
      • Sort options
    • Search results
      • Row
      • Title
      • Description
      • Image
      • Link
    • Results per page
      • Current results per page
      • Results per page trigger
      • Results per page dropdown
    • Pagination
      • Active page
      • Available page
      • Previous arrow
      • Next arrow

Search Results With Input Unstyled

I put a border around the search input box, added plus and minus icons to the facet triggers, gave a background to the dropdown for the sort options and number of results per page, added some general spacing around various elements.  I’m no UX designer for sure, but I was pleased with my results.

Fully Styled Page

Here is the css I used to create this page.

/* Search Bar */ {
  margin: 10px auto;
} input, input:focus {
  border: 1px solid black;
  height: 30px;
  padding-left: 20px;

/* Left Side Bar */ {
  margin-left: 10px;
  margin-right: 10px;

/* Clear Facet */, {
  border: 1px solid black;
  text-decoration: none;

/* Selected Facets */ li {
  margin-left: 10px;

/* Facet Trigger*/ {
  text-indent: 10px;
} h3[data-state="closed"] button:after {  
  content: '+';
  margin: 0px 10px;
  text-indent: 0px;
} h3[data-state="open"] button:after {    
  content: '-';
  margin: 0px 10px;
  text-indent: 0px;

/* Facet Option */ li {
  margin-bottom: 5px;
} button {
  margin-right: 10px;  
} button:focus {
  border: 1px solid black;
} label {
  text-transform: capitalize;

/* Right Side Bar */ {
  margin-left: 10px;
  margin-right: 10px;

/* Results Header */ {
  font-weight: normal;

/* Sort Button */ button {
  padding: 5px;
} button:focus {
  border: 1px solid black;  
} button span{
  margin-right: 10px;

/* Sort Options */ {
  background-color: lightgrey;
} {
  padding: 5px 10px;

/* Search Result Item */,,,{
  border-bottom: 1px solid black;
  width: 100%;
  height: unset;
  margin-bottom: 10px;  
  overflow: unset;
  cursor: default;
} h2 {
  font-weight: bold;
  margin-bottom: 5px;
}, {
  border: 1px solid black;
} {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden; 
  margin-bottom: 10px;

/* Results Per Page */ label {
  color: black
} button {
  padding: 5px;
} button:focus {
  border: 1px solid black;
} button span{
  margin-right: 10px;

/* Results Per Page Options */ {
  background-color: lightgrey;
} {
  padding: 5px 10px;

/* Pagination */ a {
  padding: 3px 10px 3px 10px;
  border: 1px solid grey;  
  background-color: white;
  color: black;
  text-decoration: none;
} a[data-current="true"] {
  background-color: black;
  color: white;

Be sure to test your styles for focus and hover states.  By default, some of the elements do not indicate when they are focused, so it can be easy to lose track of where you are if you using a keyboard to navigate.


I did note a few interesting things while writing this article.

  • The labels for facet triggers and sort options are not translatable at this time. If you have a multilingual site and are indexing content in multiple languages, you will need to do something to translate the labels in the UI.
  • It’s difficult to get the class names for the dropdowns for the sorting and number of results per page. You have to enable “break on subtree modification” on the parent of the button trigger.
  • The default components in the sdk are quite usable and accessible. The tab order between items is good.  The escape key closes accordions, sort and per page menus correctly.  The labels are assigned to buttons correctly.
  • The search results are not linked to the target page by default. Update the href attribute so users see the destination url when they hover.  Add a window.location.href = a.url to the onclick event.  Do not remove the preventdefault or you will not get analytics in the CEC.
  • The search data is not carried through the query string.  It is not possible to share a url and get someone to exactly the same set of results you are seeing.  Which makes sense once you consider personalized results that are targeted for your journey through the site.

Follow me on linkedin to get notifications as new articles are posted.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Eric Sanner, Solutions Architect

More from this Author

Follow Us