Enterprise App Search UI Configuration

[aisyaharifin (Siti Nuraisyah)]

Hello,

I want to ask, how do I configure my Search UI in tabular format?

Thank you.

[joemcelroy (Joseph McElroy)]

Hi there,

You should be able to override the display in the List component via view prop. Results | Elastic docs

[aisyaharifin (Siti Nuraisyah)]

Hi @joemcelroy ,

Thank you for your reply.

Actually I don't really understand when you mentioned about List component, what I understand is with view prop, we able to customize our components.

Can you explain further on how I can customize my components to display data in tabular format from the App Search zip package file?

Thank you for your assistance.

[aisyaharifin (Siti Nuraisyah)]

Hello @joemcelroy ,

So I found this discussion post and the situation is same with me.

How do I view all my data in a table instead of json

Here's another post where I talk a bit about customizing views: Reference UI - how to modify what's displayed (React newbie) Also, see the "headless" example from the main page. You can access the raw array of results and do whatever you'd like with it: https://github.com/elastic/search-ui#creating-a-search-experience <SearchProvider config={config}> <WithSearch mapContextToProps={({ results }) => ({ results })} > {({ results }) => { return ( <div> …

And the code snippet I already tried in my code however I couldn't run it as it display this error :

It seems like the code has been outdated, maybe.

Below is my code from the zip package file Search UI App Search, I would like to manipulate the Results component to display in table form. Thus, I changed the bodyContent section and apply the snippet code of above discussion post, but failed.

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, label}) => (
                         <Facet key={field} field={field} label={label} />
                      ))}
                    </div>
                  }
                  bodyContent={
                    <div>
                      {wasSearched.map(r => (
                      <div key={r.id.raw}>{r.title.raw}</div>
                      ))}
                    </div>
                  }
                  bodyHeader={
                    <React.Fragment>
                      {wasSearched && <PagingInfo />}
                      {wasSearched && <ResultsPerPage />}
                    </React.Fragment>
                  }
                  bodyFooter={<Paging />}
                />
              </ErrorBoundary>
            </div>
          );
        }}
      </WithSearch>
    </SearchProvider>
  );
}

I would appreciate it if you could help me in display my Search UI Results in tabular format.

Below image is somewhat I picture my data display would be where from the Search UI Results component, I would like to replace it in a table format.

Thank you for your assistance.

[joemcelroy (Joseph McElroy)]

Hi there,

You should still be using Results component. Look at this codesandbox, notice how ive passed in the resultView prop a OverrideDisplay component. This component is just printing out the title but you can extend it to do markup that makes it look like a table format.

laughing-sky-9nkxqr - CodeSandbox

[aisyaharifin (Siti Nuraisyah)]

Hello,

Thank you for your reply.

So I've encountered this error when I've tried to do that :

How do you extract the result ?

const OverrideDisplay = ({ result }) => {
  return <div>{result.title.snippet}</div>;
};

Thanks.

[aisyaharifin (Siti Nuraisyah)]

Hey @joemcelroy ,

So I get to display the data however, how do I get it highlighted back properly as I noticed that it will highlighted the keyword search into <em></em>.

So this is the default hightlighted part :

When I override it, the blue highlighted part will become <em></em>, it broken I guess :

How do I highlighted it back ?

Thanks.

[joemcelroy (Joseph McElroy)]

Hi there,

Need to use dangerouslySetInnerHTML attribute to render the markup. See example in the default component. search-ui/Result.tsx at main · elastic/search-ui · GitHub

[ekartzpoot]

Thank you for your reply.

[aisyaharifin (Siti Nuraisyah)]

Hi @joemcelroy ,

Thank you for your reply, I able to apply it and it will emphasize.

However, how do I configure it to become highlighted instead in itallic?

Thank you.

[ekartzpoot]

Thank you..

.