ResultsCustom

The ResultsCustom widget displays a list of search results from a POST /v1/search response from the MarkLogic REST API. The widget constructs content for each search result using a callback function that is passed a result object as a callback argument.

The ResultsCustom widget is similar to the ResultsConfig widget, which maps search results content to the UI based on a configuration object.

ResultsCustom MarkLogic configuration

To display content from search results documents in the ResultsCustom widget, that content must be extracted and included in the search results. Add an extract-document-data property in the query options of the application to do this. See Include document extracts in search results for details.

The ResultsCustom widget expects to receive search results in the results prop. The expected format is the format returned from POST /v1/search in the MarkLogic REST API.

ResultsCustom example rendering

In this example, the ResultsCustom widget displays a custom rendering for each search result. The rendering is constructed by the renderItem callback. Pagination is turned on in the widget footer. See PaginationProvider for setup requirements to enable pagination functionality.

ResultsCustom example configuration

In this example, the ResultsCustom widget is passed a renderItem prop that constructs a custom rendering for each search result. The myResultRender function builds the custom rendering using the URI, first name, last name, job title, and date of birth from each search result:

import { useContext } from "react";
import './App.css';
import { MarkLogicContext, SearchBox, ResultsCustom } from "ml-fasttrack";

function App() {

  const context = useContext(MarkLogicContext);

  const myResultRender = (result, handleClick) => {
    const extracted = result?.dataItem?.extracted.content[0].envelope;
    const fullName = extracted.firstName + ' ' + extracted.lastName;
    return (
      <div
        key={result?.index}
        onClick={handleClick}
        style={{padding: '10px 0', cursor: 'pointer'}}
      >
          <div>{result?.dataItem?.uri}</div>
          <div><strong>{fullName}</strong> is a <strong>{extracted.title}</strong> and has a date of birth of <strong>{extracted.dob}.</strong></div>
      </div>
    )
  }

  return (
    <div className="App">
      <div className="SearchBox">
        <SearchBox onSearch={(params) => context.setQtext(params.q)}/>
      </div>
      <ResultsCustom
        results={context.searchResponse.results}
        renderItem={(result) => myResultRender(result, () => console.log(result))}
        paginationFooter={true} // Note: Pagination requires that the application be wrapped by PaginationProvider
      />
    </div>
  );
}

export default App;

Avoid unnecessary re-renders

You can avoid unnecessary re-renders of the ResultsCustom widget (for example during MarkLogicContext state updates) by wrapping any callback functions passed in as props with the useCallback hook. For details, see Avoid unnecessary re-renders of FastTrack Widgets.

ResultsCustom API