Develop with FastTrack

Faceted search in MarkLogic requires a range index on the faceted property. Add a range index for a property to the database configuration using the Admin Interface or one of MarkLogic's programmatic APIs.

This example shows a path range index added to the status property in the Admin Interface:

After the index is setup, a constraint can be configured in the query options for the search application. The constraint returns facets for the property in the search results. For example:

<?xml version="1.0" encoding="UTF-8"?>
<options xmlns="http://marklogic.com/appservices/search">
  <constraint name="status">
    <range type="xs:string" facet="true" collation="http://marklogic.com/collation/codepoint">
      <path-index>/envelope/status</path-index>
      <facet-option>limit=25</facet-option>
      <facet-option>frequency-order</facet-option>
      <facet-option>descending</facet-option>
    </range>
  </constraint>
  <return-facets>true</return-facets>
</options>

The constraint settings correspond to the settings for the index. return-facets is set to true so that facet results are returned with search results. This example shows the status facet information returned in the search response:

{
    "snippet-format": "snippet",
    "total": 3,
    "start": 1,
    "page-length": 10,
    "selected": "include",
    "results": [
        {
            "index": 1,
            "uri": "/person/1001.json",
            "path": "fn:doc(\"/person/1001.json\")",
            "score": 0,
            "confidence": 0,
            "fitness": 0,
            "href": "/v1/documents?uri=%2Fperson%2F1001.json",
            "mimetype": "application/json",
            "format": "json",
            "matches": [
                {
                    "path": "fn:doc(\"/person/1001.json\")/object-node()",
                    "match-text": [
                        "person Nerta Hallwood Marketing Manager Active 1985-03-04 person-1001.jpg"
                    ]
                }
            ],
            "extracted": {
                "kind": "array",
                "content": [
                    {
                        "envelope": {
                            "entityType": "person",
                            "id": 1001,
                            "firstName": "Nerta",
                            "lastName": "Hallwood",
                            "title": "Marketing Manager",
                            "status": "Active",
                            "dob": "1985-03-04",
                            "image": "person-1001.jpg",
                        }
                    }
                ]
            }
        },
        // ...
    ],
    "facets": {
        "status": {
            "type": "xs:string",
            "facetValues": [
                {
                    "name": "Inactive",
                    "count": 52,
                    "value": "Inactive"
                },
                {
                    "name": "Active",
                    "count": 48,
                    "value": "Active"
                }
            ]
        }
    },
    // ...
}

This example shows the StringFacet widget rendering values for a status property from a set of documents. Documents in the set have status values of either Active or Inactive. Clicking a value applies the constraint for the facet. After a value is clicked, the UI is updated to display results with the constraint applied. In this example, only documents with the status property set to Active will be returned and displayed.

This example shows how to import and configure the StringFacet widget in a React application:

import { useContext } from "react";
import './App.css';
import { MarkLogicContext, SearchBox, ResultsSnippet, StringFacet } from "ml-fasttrack";
  
function App() {
  
  const context = useContext(MarkLogicContext);
  
  const handleSearch = (params) => {
    context.setQtext(params?.q);
  }
 
  const handleFacetClick = (selection) => {
    context.addStringFacetConstraint(selection)
  }
  
  return (
    <div className="App">
      <div>
        <SearchBox onSearch={handleSearch}/>
      </div>
      <div style={{display: 'flex', flexDirection: 'row'}}>
          <div style={{width: '640px'}}>
            <ResultsSnippet
              results={context.searchResponse.results}
              paginationFooter={true}
            />
          </div>
          <div>
            {context.searchResponse?.facets?.status &&
              <StringFacet
                title="Status"
                name="status"
                data={context.searchResponse?.facets?.status}
                onSelect={handleFacetClick}
              />
            }
          </div>
      </div>
    </div>
  );
}
  
export default App;

This example shows a selection object passed to the onSelect callback:

{
    "type": "string",
    "name": "status",
    "value": [
        "Active"
    ],
    "title": "Status"
}