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

Elastic Search
2

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!

6 Likes