How to sort ResultView data

I have custom result view but i want to do some sorting before data is being rendered.
is that possible?

 <React.Fragment>
            {wasSearched && (totalResults > 0) ?
                <CurrentFilterSelection filters={filters}/>:
                <></> }
            {(totalResults > 0) ? ( <Results
            titleField={getConfig().titleField}
            urlField={getConfig().urlField}
            shouldTrackClickThrough={true}
            resultView={ResultView}
        />): wasSearched && !clearSelected ? <h2>No results found; please change your search criteria</h2>:''}
        </React.Fragment>

I want to sort on specific field of the Results so i can get what i want to top of the result view.

If you have a custom resultView, then you can sort the fields however you would like inside of the ResultView code, right?

for example i have a field status and i want to sort before the resultView is populated because inside the result view it is not working fine

There's no need to sort it before it goes into the result view. Just sort it in the result view before you render it.

Here is my other example.
If we search with any searchTerm, we could multiple results and we are displaying them like below:

my resultView is like below:

If i add the sorting logic it is executing with each result not the overall search results. I need to sort on overall search results with a specific field. where can i do that ?

To add a sort to your search request, assign the setSort action on your SearchProvider instance to the field you wish to sort on. It does not matter that you are using a custom ResultsView , results will be sorted before rendering. Does this answer your question, or are you looking to reorder the fields within an individual result card?

we want to implement some custom sorting on one of the field.
ex: const siteStatuses = result.actual_status? result.actual_status.raw:[];

This siteStatuses is one of the array of strings like ["Completed", "Accruing", "Closed", "open"].
Now we want to sort the results, such that all open status are top then Accruing then completed like so. something like this custom order ["Open", "Accruing", "Completed", "Closed"]

any idea or other workaround to achieve this problem?

App Search doesn't provide a way to do a sort like that.

I would recommend re-indexing your data and applying a custom "sort" field that is based on siteStatus.

So your data might look like:

[{
  id: "1",
  siteStatus: "Closed",
  siteStatusSort: 4
},{
  id: "2",
  siteStatus: "Open",
  siteStatusSort: 1
}]

This lets you easily apply a sort on the siteStatusSort field as Sarah mentioned.

Alternatively, you could use "boosts" to influence the order: Relevance Tuning Guide, Weights and Boosts | Elastic App Search Documentation [7.15] | Elastic.

You could put a high boost value on any documents with the status "Open", etc.

will this work ?

apiConnector: connector,

    alwaysSearchOnInitialLoad: false,

    initialState:{

      sort: {

        field: 'study_status_order'

      }

    },

    onSearch: async (requestState, queryConfig, next) => {

that didn't sort. how to use setSort on specific field and direction ?

You should read the manual. Make sure you use the version of the docs matching the version you are using: search-ui/ADVANCED.md at v1.7.0 · elastic/search-ui · GitHub

This is effecting the relevance now. previously without adding the sort, the relevance data would be top but now it is not. is this because of the sort changes ?

If you are sorting your data study_status_order, then you are not using relevance. If you want to still use relevance but have certain values of study_status_order show up near the top, then use a value boost on that value: Relevance Tuning Guide, Weights and Boosts | Elastic App Search Documentation [7.15] | Elastic .

Can we use sort in the request body something like this ?

{

    "query": "cancer",

     "sort": [

    { "_score": "asc" },

    { "study_status_order": "asc" }

  ]

    

}

since i cannot use multiple sort in version 1.4, i switched to 1.8 and added below code but isn't working like i expect.

alwaysSearchOnInitialLoad: false,

    initialState: {

      sort: [

        { field: "study_status_order",

           direction:"asc"

        },

        { field: "_score",

           direction:"desc"

        }

      ]

    },

I see there is sortList field in the github code. Using that worked for me. is the github documentation didnt update ?

initialState: {

      sortList: [

        { field: "study_status_order",

           direction:"asc"

        },

        { field: "_score",

           direction:"desc"

        }

      ]

    },
searchTerm String optional Search terms to search for
sort SortList optional List of fields and directions to sort on
sortDirection deprecated, use sort instead String [asc desc] optional
sortField deprecated, use sort instead String optional Name of field to sort on