Skip to main content

Develop with FastTrack

Add the StringFacet widget

After configuring a constraint in the query options, add the StringFacet widget.

To add the string facet widget:

  1. In the search application, open the App.jsx file.

  2. Replace the existing content with this code:

    import React from 'react'
import './App.css'
import { useContext } from "react";
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>
            <StringFacet
              title="Status"
              name="status"
              data={context.searchResponse?.facets?.status}
              onSelect={handleFacetClick}
            />
          </div>
      </div>
    </div>
  )
}

export default App

Code explanation

The code in Add the StringFacet widget:

  • Imports the StringFacet widget into the application.

  • Renders the StringFacet widget with these props:

    • The title prop gives the facet container the title "Status".

    • The name prop associates the widget with the constraint named "status".

    • The data prop defines the facet results in the search response using a JSONPath expression.

    • The onSelect prop defines the callback function for handling checkbox clicks.

  • The handleFacetClick callback receives a selection object as an argument. The selection object is then passed into the addStringFacetConstraint context method. This adds a facet constraint for the status property to the application context. The constraint is then applied to any search request.

In this section: