ResultsConfig

Save PDF

Last Updated: May 5, 2026
4 minute read

MarkLogic Server
Documentation

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. Pagination is turned on in the widget footer. See PaginationProvider for setup requirements to enable pagination functionality.

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} // Note: Pagination requires that the application be wrapped by PaginationProvider
        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;

Avoid unnecessary re-renders

You can avoid unnecessary re-renders of the ResultsConfig 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.

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	PathConfig	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	PathConfig	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[]	PathConfig	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	string	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. Requires the application be wrapped by the PaginationProvider.
paginationFooter	boolean	Indicates whether to display pagination controls in the footer. Requires the application be wrapped by the PaginationProvider.
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.
ListViewProps	ListViewProps	KendoReact ListView props for the results list.
PagerProps	PagerProps	KendoReact Pager props for the Pagination menu.
onClick	((event: React.MouseEvent, result: string) => void)	Callback function triggered when a result item is clicked.
onMouseEnter	((event: React.MouseEvent, result: string) => void)	Callback function triggered when the mouse pointer enters a result item. Receives the event and result objects as arguments.
onMouseLeave	((event: React.MouseEvent, result: string) => void)	Callback function triggered when the mouse pointer leaves a result item. Receives the event and result objects as arguments.

Develop with FastTrack

ResultsConfig

Table of Contents

ResultsConfig

ResultsConfig MarkLogic configuration

ResultsConfig example rendering

ResultsConfig example configuration

Avoid unnecessary re-renders

ResultsConfig API