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

Per_Burstrom · September 13, 2019, 6:24pm

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

JasonStoltz · September 13, 2019, 7:14pm

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:

We create a new file called ResultView.js, in the same folder as App.js
We imported that file into App.js in the line import ResultView from "./ResultView";
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!

Per_Burstrom · September 13, 2019, 8:11pm

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

jh.94 · September 17, 2019, 9:26am

Hi @JasonStoltz, currently i do not want to show all the fields in the search output results. As such, I followed the above mentioned steps 1-3 but i think the {ResultView} is not getting called at all. Do you know the reason why?

I am using app-search-7.3.1 locally and using the reference ui that i exported out.

Many thanks.

JasonStoltz · September 17, 2019, 1:28pm

@jh.94 I do not know why off of the top of my head. Can you post some code snippets for me to reference?

jh.94 · September 17, 2019, 2:14pm

Hi @JasonStoltz, Thanks for your reply.

Sure, the below is the entire App.js file. The only things i added was :

import ResultView from "./ResultView"
resultView={ResultView}

import React from "react";

import AppSearchAPIConnector from "@elastic/search-ui-app-search-connector";

import {
  ErrorBoundary,
  Facet,
  SearchProvider,
  SearchBox,
  Results,
  PagingInfo,
  ResultsPerPage,
  Paging,
  Sorting,
  WithSearch
} from "@elastic/react-search-ui";
import ResultView from "./ResultView";
import { Layout, SingleLinksFacet } from "@elastic/react-search-ui-views";
import "@elastic/react-search-ui-views/lib/styles/styles.css";

import {
  buildAutocompleteQueryConfig,
  buildFacetConfigFromConfig,
  buildSearchOptionsFromConfig,
  buildSortOptionsFromConfig,
  getConfig,
  getFacetFields
} from "./config/config-helper";

const { hostIdentifier, searchKey, endpointBase, engineName } = getConfig();
const connector = new AppSearchAPIConnector({
  searchKey,
  engineName,
  hostIdentifier,
  endpointBase
});
const config = {
  searchQuery: {
    facets: buildFacetConfigFromConfig(),
    ...buildSearchOptionsFromConfig()
  },
  autocompleteQuery: buildAutocompleteQueryConfig(),
  apiConnector: connector,
  initialState: {
    resultsPerPage: 5
  }
};

export default function App() {
  return (
    <SearchProvider config={config}>
      <WithSearch mapContextToProps={({ wasSearched }) => ({ wasSearched })}>
        {({ wasSearched }) => {
          return (
            <div className="App">
              <ErrorBoundary>
                <Layout
                  header={<SearchBox autocompleteSuggestions={true} />}
                  sideContent={
                    <div>
                      {wasSearched && (
                        <Sorting
                          label={"Sort by"}
                          sortOptions={buildSortOptionsFromConfig()}
                        />
                      )}
                      {getFacetFields().map(field => (
                        <Facet
                          key={field}
                          field={field}
                          label={field}
                          view={SingleLinksFacet}
                        />
                      ))}
                    </div>
                  }
                  bodyContent={
                    <Results
                      titleField={getConfig().titleField}
                      urlField={getConfig().urlField}
                      shouldTrackClickThrough={true}
			 resultView={ResultView}
                    />
                  }
                  bodyHeader={
                    <React.Fragment>
                      {wasSearched && <PagingInfo />}
                      {wasSearched && <ResultsPerPage options={[5, 10, 15]} />}
                    </React.Fragment>
                  }
                  bodyFooter={<Paging />}
                />
              </ErrorBoundary>
            </div>
          );
        }}
      </WithSearch>
    </SearchProvider>
  );
}

JasonStoltz · September 17, 2019, 3:29pm

@jh.94 I'm not totally sure what is going on there. If you're simply trying to change the fields that get displayed, you can do that quite easily by updating the "engine.json" file. Here some more information on that: https://github.com/elastic/app-search-reference-ui-react#updating-configuration. You would use the resultFields option to control that.

jh.94 · September 18, 2019, 2:27am

Hi @JasonStoltz, thanks much for the link.

Basically, what I am trying to do is to simply hide some of the fields that get displayed. For example, the field "case_id" is which is set as the titleField, is being displayed twice both in the resultField and titleField. The same applies as well for the field "update_link" which is set as the urlField as it is also shown in the resultFields.

Both "case_id" and "update_link" fields was not specified at all in the resultFields but i don't know why it is still showing up.

{
  "engineName": "cases",
  "hostIdentifier": "host-6asgs6",
  "endpointBase": "http://192.168.160.90:3002",
  "searchKey": "search-i2y1adoo24q73c6spp6h1tar",
  "resultFields": [
    "main_type",
    "status",
    "case_personnel"
  ],
  "sortFields": [
    "case_id"
  ],
  "facets": [
    "case_personnel",
    "main_type",
	"sub_type"
  ],
  "titleField": "case_id",
  "urlField": "update_link"
}

JasonStoltz · September 18, 2019, 12:49pm

OK, that makes sense.

Well what you have should work. Can you run this command fro the project root and let me know what the result is?

npm list @elastic/react-search-ui

jh.94 · September 18, 2019, 1:16pm

Sure @JasonStoltz! As requested:

Thank you

JasonStoltz · September 18, 2019, 3:20pm

Ok, so the problem might be that you are on an older version of Reference UI that does not support that prop. There's two solutions to this...

Manually update all of the "search-ui" dependencies in your package.json to 1.1. The only problem with this is that there may be some breaking changes that break your code.

I recommend downloading a fresh copy of the Reference UI here: https://github.com/elastic/app-search-reference-ui-react, and simply replacing the engine.json file with that of your existing project.

Make sense?

jh.94 · September 21, 2019, 3:29pm

Hi @JasonStoltz, sry just gt back from overseas.

Thanks for your suggestion, I downloaded a fresh copy of the Reference UI from the link and replaced the engine.json file.

However, the results are still the same as the titleField and urlField still stays in the search results. The engine.json file is the same that was previously posted above. The only difference was that I added in the "endpointBase" parameter which I noticed was not specified in the sample engine.json.example file.

Do you think being a self-managed (local) installation is the problem?

Thank you for your help!

JasonStoltz · September 23, 2019, 2:12pm

Great. I think now all you should need to do is repeat the original steps of 1 and 2, adding the custom "ResultView" file.

jh.94 · September 28, 2019, 5:50pm

Hi @JasonStoltz! Thank you so much, it finally worked!

Really appreciated your help!

system · October 26, 2019, 5:50pm

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