February 16, 2015

Add a Field Label for “Sort By” in a SharePoint 2013 Search Center

Recently, I had a request to add a text label to the Sort By field in a SharePoint 2013 Search Center, so that end users would more quickly figure out what the field floating in the middle of the results page was for. This is a quick tip for those looking to do the same thing.

Enable Sorting in Search Results

To enable the Sort By feature in a search results page, perform the following steps:

  1. Edit the Search Results page
  2. Modify the Search Results Web part
  3. Under the “Settings” heading, click Show sort dropdown

When viewing the search results page, you should now see a field floating under the Search Navigation, but above the actual search results. In this case, the request was to add a text label next to the field to make it more clear what its purpose was:

Add a Label to the Sort By Field


Initially, I thought it would be simple to use jQuery, which was already in the environment, to just find the structure in the DOM and insert a field label. In looking at the generated DOM in the page, I could see the following structure:

However, I found after several attempts to get a handle on #Sortby or #SortbySel using jQuery, that there was a timing issue between jQuery attempting to get ahold of the DOM structure, and SharePoint actually generating the elements. Using several event methods with jQuery, I kept coming up with null references. This should be simple, so time for a new approach… which reminded me of a comic I had seen on Hugh Wood’s blog:

Modern CSS

In this particular case, the end users of the Search Center were all using IE 11 and/or Google Chrome, so we had modern web browser capabilities at our disposable. Since I had the DOM structure, and knew what the HTML markup was for the field and its containers, I decided to use the CSS ::before selector to dynamically generate the field label.

I added an Alternate CSS file to the Search Center site settings, and used the following CSS to generate the label:

#ResultHeader #Actions #Sortby::before {

content: “Sort By: “;

font-weight: bold;

Once the CSS was added, we now had a label on the Sort By field, without timing issues!

Add a Comment