ResultsConfig

The ResultsConfig widget displays a list of search results from a POST /v1/search response from the MarkLogic REST API. The widget maps content in each search result to a title and labeled items beneath the title.

The ResultsConfig widget is similar to the ResultsCustom widget, which maps search results content using a callback function passed as a prop.

ResultsConfig MarkLogic configuration

To display content from search result documents in the ResultsConfig widget, the content must be extracted and included in search results. To do this, include the extract-document-data property in the query options of the application. See Include document extracts in search results.

The ResultsConfig 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.

ResultsConfig example rendering

Example rendering of the ResultsConfig widget.

The example shows results displayed with the widget using the config object prop for defining how the content is mapped. For each search result, a person’s last name is mapped to the title. Job title and date of birth are mapped to the labeled items beneath the title.

ResultsConfig example configuration

In this example:

The ResultsConfig widget is passed a config object prop that maps content in each search result to the title and labeled items beneath the title.
The config object supports different renderings for multiple entity types in the search results.
The entityTypeConfig object specifies where the entity type is specified in the search results.
The entities array accepts a separate config object for each entity type. In this example, person is the single entity type.

import { useContext } from "react";
import './App.css';
import { MarkLogicContext, SearchBox, ResultsList } from "ml-fasttrack";
  
function App() {
  
  const context = useContext(MarkLogicContext);
  
  const handleSearch = (params) => {
    context.setQtext(params?.q);
  }
 
  return (
    <div className="App">
      <div className="SearchBox">
        <SearchBox onSearch={handleSearch}/>
      </div>
      <ResultsList
        results={context.searchResponse.results}
        paginationFooter={true}
        config={{
          entityTypeConfig: {
            path: 'extracted.content[0].envelope.entityType'
          },
          entities: [
            {
              entityType: 'person',
              title: {
                path: 'extracted.content[0].envelope.lastName'
              },
              items: [
                {
                  label: 'Title',
                  path: 'extracted.content[0].envelope.title'
                },
                {
                  label: 'Date of Birth',
                  path: 'extracted.content[0].envelope.dob'
                }
              ],
            }
          ]
        }}
      />
    </div>
  );
}
  
export default App;

ResultsConfig API

Prop	Type	Description
results	object[]	Search results data to display.
config	object	Array of entity configuration objects. Each object determines what data to display in a result for an entity type.
config.entityTypeConfig	object	Entity type configuration object.
config.entityTypeConfig.path	object	The path to the entity type in the search result. The path is specified using JSONPath.
config.entities[]	object[]	An array of search result configuration objects.
config.entities[].entityType	string	The entity type of the configuration object.
config.entities[].title	object	A title configuration object.
config.entities[].title.path	string	The path to the title in the search result. The path is specified using JSONPath.
config.entities[].items[]	object[]	An array of configuration objects for the items beneath the title.
config.entities[].items[].label	string	The item label.
config.entities[].items[].path	string	The path to the item value in the search result. The path is specified using JSONPath.
title	string	Optional title for the results list.
titleStyle	CSSProperties	CSS styles applied to the results list title.
itemTitleStyle	CSSProperties	CSS styles applied to the title of each result.
labelStyle	CSSProperties	CSS styles applied to the result item labels.
valueStyle	CSSProperties	CSS styles applied to the result item values.
itemsContainerStyle	CSSProperties	CSS styles applied to each item container.
multipleValueSeparator	string	The string separator between array values.
className	string	Class name applied to the widget.
headerClassName	string	Class name applied to the widget header.
headerValue	any	Content displayed in the widget header.
footerClassName	number	Class name applied to the widget footer.
footerValue	any	Content to display in the widget footer.
paginationHeader	boolean	Indicates whether to display pagination controls in the header.
paginationFooter	boolean	Indicates whether to display pagination controls in the footer.
pageSizeChanger	number[]	Numeric array for displaying a menu in the pagination for configuring the number of items on each page.
showPreviousNext	boolean	Whether to display previous and next buttons in the pagination.
showInfoSummary	boolean	Whether to show a summary in the pagination.
paginationClassName	string	Optional class name for the pagination container.
paginationSize	string	Size of the pagination: Available values are: small medium (default) large null
pagerButtonCount	number	The number of page buttons to display in the pagination controls.
onClick	((event: any, result: string) => void)	Callback function triggered when a result item is clicked.

In this section:

Develop with FastTrack

ResultsConfig

ResultsConfig MarkLogic configuration

ResultsConfig example rendering

ResultsConfig example configuration

ResultsConfig API

Search results