Reference UI - how to modify what's displayed (React newbie)

Hi,
I'm currently evaluating Elastic App Search. I have written a script that inserts that data, and then I generated and downloaded the Reference UI React code to query the data from my site. It works great, but I would like to get control over the output. For example one of the fields outputted in plain text is an image link I would like to use to actually show the image.

I have spent the whole day trying to figure out how to modify the App.js code to be able to do that, but I have now given up. Thing is that I'm totally new to React as well.

bodyContent={

}

So I would like to insert an tag which retrieve the url from one of the fields in the data I got from Elastic Search App.

Any ideas?

Thanks!
/Per

Hey @Per_Burstrom.

Here is an example of a modified Reference UI that customizes the result view to use an image. Perhaps you can use this as a starting point: https://codesandbox.io/embed/video-games-tutorial-with-images-5wsqs.

The key things to note here are:

  1. We create a new file called ResultView.js, in the same folder as App.js
  2. We imported that file into App.js in the line import ResultView from "./ResultView";
  3. We passed ResultView in the resultView parameter to the Results component:
            <Results
              titleField="name"
              urlField="image_url"
              resultView={ResultView}
            />

The Reference UI is built with a library called Search UI. All of the documentation for that can be found here: https://github.com/elastic/search-ui/blob/master/ADVANCED.md#customization.

Note that you'll need to customize ResultView.js to use your data set.

Hope this helps!

1 Like

Thank you @JasonStoltz! :slight_smile: I got it it to work that way, awesome help! :heart:

1 Like