---
title: Coveo Field Sort
slug: '3064'
canonical_url: https://docs.coveo.com/en/3064/
collection: coveo-for-sitecore-v5
source_format: adoc
---
# Coveo Field Sort
> **Legacy feature**
>
> The Coveo Hive Framework is now in maintenance mode and is no longer recommended for new implementations.
> 
> To build new search experiences, use one of Coveo's more modern, lightweight, and responsive libraries.
> To get started, see the [Build search](https://docs.coveo.com/en/2473/) article.

By default, the **{doctitle}** rendering implements the [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/) [Sort](https://coveo.github.io/search-ui/components/sort.html) component with the `sortCriteria` component option set to `@<SORT_FIELD> <SORT_DIRECTION>`.
Clicking the **Coveo Field Sort** search interface button allows the user to switch to result sorting based on the specified `Sort field`.
Subsequent clicks allow the user to toggle between ascending and descending sort directions (if the `Enable sort direction toggle` option is enabled).


[.version.c4sc.c4sc-new.5-0-788-5.September-18&-2020]
[Coveo for Sitecore 5.0.788.5](https://docs.coveo.com/en/3314#release-notes)


When the wrapping [Results Sorts Section](https://docs.coveo.com/en/3052/) rendering `Enable sort dropdown` data source option is enabled, the **{doctitle}** rendering adds one or two field sort items (depending on the `Enable both sort directions` value) to a sort dropdown list (see the [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/) [SortDropdown](https://coveo.github.io/search-ui/components/sortdropdown.html) component).

## Usage notes

* The **{doctitle}** rendering requires that you index a Sitecore field (that is, the `Sort field`) as sortable (see [Make a Sitecore field sortable](https://docs.coveo.com/en/2378/)).

* Any time you change result sorting (whether by changing the criterion or the sort direction), this triggers a Search API call with the requested `sortCriteria` in the query parameters.

* {empty}

--


[.version.c4sc.c4sc-new.5-0-788-5.September-18&-2020]
[Coveo for Sitecore 5.0.788.5](https://docs.coveo.com/en/3314#release-notes)


--

See [List result sort options in a dropdown](https://docs.coveo.com/en/3316/) for more details about managing sort direction captions when displaying sort options in a dropdown menu.

* You can [customize the CSS](https://docs.coveo.com/en/2342/) associated with this rendering.

## Insertion location


<div>
<h3>Coveo Hive</h3>
  <p>The <strong>Coveo Field Sort</strong> rendering is an Allowed Control in the following placeholder(s): <code class="highlighter-rouge">Sorts</code></p>
  <video width="690" height="335" controls="">
  <source src="{{ site.baseurl }}/assets/images/c4sc-v5/field-sort-hive.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="figure-caption">Example insertion sequence for the <strong>Coveo Field Sort</strong> rendering.
  </div>
</div>
<div>
<h3>Coveo Hive SXA</h3>
  <p>Coveo for Sitecore SXA rendering insertion locations aren't limited by placeholder Allowed Controls. The <strong>Coveo Field Sort</strong> rendering may therefore be inserted throughout the partial design, whether in Coveo for Sitecore or Sitecore placeholders.</p>
  <video width="690" height="335" controls="">
  <source src="{{ site.baseurl }}/assets/images/c4sc-v5/field-sort-sxa.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="figure-caption">Example insertion sequence for the <strong>Coveo Field Sort</strong> rendering.
  </div>
</div>

## Data source options

The following table lists the available data source options for this rendering.

[%header,cols="34%,66%"]
|===
|Option name
|Description

|Caption
|See the [caption](https://coveo.github.io/search-ui/components/sort.html#options.caption) component option.

|Sort field
|See the [sortCriteria](https://coveo.github.io/search-ui/components/sort.html#options.sortcriteria) component option.

|Sort direction
|Specifies the default sorting direction (see the [sortCriteria](https://coveo.github.io/search-ui/components/sort.html#options.sortcriteria) component option).

a|Enable sort direction toggle
--


[.version.c4sc.c4sc-new.5-0-788-5.September-18&-2020]
[Coveo for Sitecore 5.0.788.5](https://docs.coveo.com/en/3314#release-notes)


--
Enable both sort directions
|Specifies whether to allow sorting in both sorting directions.

|DOM unique ID
a|{empty}
--
Randomly generated HTML element ID.
--

|Additional data attributes
a|{empty}
--
Allows [use of the Coveo JavaScript Search Framework **Sort** component options](https://docs.coveo.com/en/2776/) that aren't directly available in the data source.
--
|===

## Sample generated HTML and corresponding visual output

```html
<div class="coveo-sort-container">
   <span id="coveo0a107bfe"
   class="CoveoSort coveo-accessible-button coveo-selected coveo-accessible-button-pressed coveo-ascending"
   data-caption="Price" data-prebind-sort-criteria="sortCriteriaResolver"
   data-sort-criteria="@currentprice descending, @currentprice ascending"
   data-sc-enable-both-sort-directions="true" data-applied-prebind="true" role="button"
   aria-label="Sort results by Price" tabindex="0">
      "Price"
      <span class="coveo-icon">
         <span class="coveo-sort-icon-ascending">
            <!-- SVG arrow up graphic code here -->
         </span>
         <span class="coveo-sort-icon-descending">
            <!-- SVG arrow down graphic code here -->
         </span>
      </span>
   </span>
</div>
```

![Field Sort example | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/field-sort-example.gif)