Use the SearchRequest method

This example shows how an External component can be used to let users interact with the SearchRequest before it is sent to the server. For this code to work properly, the settings of the Search component must be modified using the Entity management API. The settings require an advanced property on the highest level with the following value: advanced:{"waitForEvent":true}. This flag is currently not exposed in the interface.

Warning

To avoid creating a recursive loop, modify the SearchRequest object directly rather than calling api.search.addFilters.

RequestResponse

  const disposeFuncs: Array<Function> = [];

 export default function createExternalRoot(container: HTMLElement) {
   return {
     render(context: any) {
       const {
         api,
        config: { searchIdentifier },
         options,
       } = context;

       // 1. Add the event listener for the search component.
       const disposeFunc = api.search.addListener(
         searchIdentifier,
         "BEFORE_SEARCH",
         ({ searchRequest }) => {
           // Do something with searchRequest here; e.g. modify a field name of a filter.
         }
       );
       // 2. Store the dispose function.
       disposeFuncs.push(disposeFunc);

       // 3. Activate the search component.
       api.search.activate(searchIdentifier);
     },
     unmount() {
       disposeFuncs.forEach(dispose => dispose());
     },
   };
 }

Do you have some feedback for us?

If you have suggestions for improving this article,