ApplyFacets
- Last Updated: May 5, 2026
- 2 minute read
- MarkLogic Server
- Documentation
The ApplyFacets widget renders "Apply All" and "Reset All" action buttons for managing one or more facet widgets in an application.
The ApplyFacets widget can be used to manage facet constraints when disableSearchOnChange is set to true in MarkLogicProvider. This enables a user to make multiple selections across several facet widgets and apply those selections with the "Apply All" button.
Component API
The ApplyFacets component implements the following interfaces:
export interface IApplyFacetsProps {
/**
* The watch list of facet widget refs that will have their methods triggered
* when one of the action buttons is clicked.
*/
watchedRefs: Array<RefObject<IFacetRef<any>>>;
/**
* Render the 'Apply All' button, and configure its properties.
*/
applyAllConfig?: IButtonSettings;
/**
* Render the 'Reset All' button, and configure its properties.
*/
clearAllConfig?: IButtonSettings;
}
interface IButtonSettings {
/**
* Toggle to determine if the button is displayed.
*/
hide?: boolean;
/**
* Override to alter the text that displays on the button.
* @default {string} 'Apply All' | 'Reset All'
*/
label?: string;
/**
* Method, if specified, to trigger when clicked.
* @optional
*/
onClick?: () => void;
/**
* Trigger `useMarkLogicContext().updateSearch()` to refresh the context when clicked.
*/
refreshOnClick?: boolean;
/**
* Button configuration.
* @see http://telerik.com/kendo-react-ui/components/buttons/button
*/
ButtonProps?: Omit<ButtonProps, 'onClick'>;
}
ApplyFacets example
This configures the ApplyFacets widget to display the "Apply All" and "Reset All" buttons for managing StringFacet and NumberRangeFacet widgets:
import { useRef } from 'react';
import { ApplyFacets, StringFacet, NumberRangeFacet } from 'ml-fasttrack';
const MyComponent = (props) => {
const stringFacetRef = useRef(null);
const numberFacetRef = useRef(null);
// Note: When disableSearchOnChange is set to true in MarkLogicProvider,
// clicking the "Apply All" button will apply any selections.
return (
<>
<ApplyFacets
watchedRefs={[
stringFacetRef,
numberFacetRef
]}
applyAllConfig={{
refreshOnClick: true,
label: 'Apply All',
ButtonProps: {
className: 'apply-button'
}
}}
clearAllConfig={{
refreshOnClick: true,
label: 'Reset All',
ButtonProps: {
className: 'clear-button'
}
}}
/>
<StringFacet {...props} ref={stringFacetRef} />
<NumberRangeFacet {...props} ref={numberFacetRef} />
</>
);
};
This is rendered:
 |
Button Actions
-
Apply All: Clicking this button updates the MarkLogicContext constraints (since refreshOnClick is set to true).
-
Reset All: Clicking this button iterates through the watchedRefs values and calls the clearAll method on each component that is marked as dirty.