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:

   Copy

   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.