---
title: Custom Multi-Sort tutorial - Translate fields
slug: '2261'
canonical_url: https://docs.coveo.com/en/2261/
collection: coveo-for-sitecore-v5
source_format: adoc
---
# Custom Multi-Sort tutorial - Translate fields
> **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.

This page covers how to translate the custom fields in the Coveo for Sitecore format.

Since Coveo for Sitecore fields depends on the `master` or `web` context, they need to be translated in your page to query the right context.
For more information about field translation, see [Handling duplicate field names between indexes](https://docs.coveo.com/en/2551#handling-duplicate-field-names-between-indexes).

## JavaScript Search Framework Attributes Serialization

Instead of using the Properties directly in our model, we'll take advantage of the `SearchUiProperty` attribute serialization.

[source,c#]
```
public class MultiSortModelProperties : IModelProperties
{
    [SitecoreProperty("FirstField")]
    [SearchUiProperty]
    public string FirstField { get; set; }

    [SitecoreProperty("SecondField")]
    [SearchUiProperty]
    public string SecondField { get; set; }

    [SitecoreProperty("Descending")]
    public bool Descending { get; set; }

    [SearchUiProperty]
    public string Direction => Descending ? "descending" : "ascending";
}
```

There are a few things to note about this code:

* `Descending` is only used to toggle to set the `Direction`, so it doesn't required to be output in the DOM.
This is why it doesn't have a  `SearchUiProperty` attribute.
* `Direction` has no attribute read from Sitecore, it's computed to be output in the DOM.
This is why it has the `SearchUiProperty`.
* `FirstField` and `SecondField` will both be required.

This will generate the following keys in the Model's `RawProperties` :

* first-field
* second-field
* direction

All those keys will have a value associated with their data source.

## Adding the Special RawProperties Loop

In your `MultiSort.cshtml` file, change the attributes for the following loop:

```html
@model Coveo.Custom.MultiSortModel

<div class="CoveoSort"
    data-caption="My Multi-Sort"
    @foreach (var property in @Model.RawProperties) {
        @:data-@(property.Key)='@(property.Value)'
    }></div>
```

This allows you to shift the control of the properties to the model instead of manually inputting each of the properties in your `.cshtml` file.

For example, if you have a nullable property, you would require code similar to:

```html
<div ...
     @if (!String.IsNullOrEmpty(Model.Properties.Caption)) {
         data-caption="@Model.Properties.Caption"
     }></div>
```

This redundancy is removed with the loop.
If the `Caption` field is empty, the `caption` key won't be added to the `RawProperties` dictionary, which leaves cleaner Views for your components.

It also allows you to add properties, in the future, by adding `SearchUiProperty` in the back-end code, without altering the `.cshtml` file.

For more information about Coveo Hive models, see [Integrate a custom component in Sitecore using the Coveo Hive Framework](https://docs.coveo.com/en/2349/)

## Building the Sort Criteria

Since our component depends on the context, it requires a little magic to build the sort criteria with translated fields.

Given the following data source field values:

* FirstField: "@name"
* SecondField: "@indexeddate"
* Ascending: true

The following markup will be output:

```html
<div data-first-field="@name" data-second-field="@indexeddate" data-direction="descending"></div>
```

We require a unique ID to identify this `div` through the page using JavaScript code:

```html
<div id="@Model.Id" ...></div>
```

We can now build the sort criteria:

```javascript
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var attributes = document.getElementById("@Model.Id").dataset;
        var firstCriteria = CoveoForSitecore.Context.fields.toCoveo(attributes.firstField) + " " + attributes.direction;
        var secondCriteria = CoveoForSitecore.Context.fields.toCoveo(attributes.secondField) + " " + attributes.direction;

        attributes.sortCriteria = firstCriteria + ", " + secondCriteria;
    });
</script>
```

## Result

This will add the following attribute to the element:

```html
<div id="@Model.Id" data-sort-criteria="@fname2053 descending, @indexeddate descending" ...></div>
```

> **Important**
>
> In this case, since `indexeddate` is defined as an external field, it was not translated.

The next step will cover how to improve the user experience for people using your component.