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

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.



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?


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:

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:

The Reference UI is built with a library called Search UI. All of the documentation for that can be found here:

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