Call onClickLink function inside Results view

Elastic Search
1

I'm using react search UI and I would like to call the onClickLink (or similar) function inside a view={} of the Results component. I know that it can be easely called by using resultView propertie, but I need to use the view prop because I need to customize the entire results panel, and not just the result component.

2

Hey @Gustavo_Dias,

Could you tell me why you need access to the onClickLink at the results level? Is the requirement just to customise the container, not the individual result?

Behind the scenes, the default result component is this search-ui/Results.tsx at master · elastic/search-ui · GitHub . You can customise the container markup without needing to touch the resultView. for example, you can do this


const CustomResultsView = ({ children }) => {
   return (
    <div className="custom-results-view">{children}</div>
   )
}

<Results view={CustomResultsView} />

You can also pair it with overriding the resultView prop to customise the rendering of each result. There you will get access to the onClickLink function for each result.

3

Hello @joemcelroy , I want get the array of results and display the results in a table component of AntDesign (this is already working), and, for each time the user click on some result, I want to call the onClickLink function only to send analytical data to AppSearch.

4

understand. onClickLink uses the trackClickThrough action. Actions | Elastic Documentation

See it in action here. search-ui/Result.tsx at master · elastic/search-ui · GitHub

Advise that you make your own Results component and adding this action with using the withSearch HOC Creating Components | Elastic Documentation

5

It works by using trackClickThrough action. Thanks for your help @joemcelroy !!

6

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.