Search

In Forest Admin, pages which show lists of records have a free-text search widget on top of them.
A search bar on the main list-view
Search modes
Two search modes are supported: normal and extended.
All searches start by being a "normal search".
If the result the user is looking for is not found, it is possible to trigger an extended search from the user interface.
Extended search call to action
Default behavior
When not defined otherwise by the data source, the search behavior is to attempt to search within columns of the collection (in normal mode), or columns of the collection of direct relations (in extended mode).
By default, Forest Admin will search only on some columns, depending on their respective types.
Column Type
Default search behavior
Enum
Column is equal to the search string (case-insensitive)
Number
Column is equal to the search string (if the search string is numeric)
String
Column contains the search string (case-insensitive)
Uuid
Column is equal to the search string
Other types
Column is ignored by the default search handler
Customization
You may want to change how the search bar behaves in your admin panel.
For instance:
Search only on the columns which are relevant to your use case.
Use full-text indexes of your data (i.e Postgres tsquery and tsvector, Algolia, Elastic search, ...)
To customize the search bar, you must define a handler that returns a ConditionTree.
Making the search case-sensitive by default
In this example, we use the searchExtended condition to toggle between case-sensitive and insensitive searches.
agent.customizeCollection('people', collection =>
  collection.replaceSearch((searchString, extendedMode) => {
    const operator = extendedMode ? 'Contains' : 'IContains';
​
    return {
      aggregator: 'Or',
      conditions: [
        { field: 'firstName', operator, value: searchString },
        { field: 'lastName', operator, value: searchString },
      ],
    };
  });
);
Changing searched columns
const productReferenceRegexp = /^[a-f]{16}$/i;
const barCodeRegexp = /^[0-9]{10}$/i;
​
agent.customizeCollection('products', collection =>
  collection.replaceSearch(async (searchString, extendedMode, context) => {
    // User is searching using a product reference.
    if (productReferenceRegexp.test(searchString))
      return { field: 'reference', operator: 'Equal', value: searchString };
​
    // User is search a bar-code
    if (barCode.test(searchString))
      return { field: 'barCode', operator: 'Equal', value: Number(searchString) };
​
    // User is searching something else, in "normal mode", let's only search in the product name
    if (!extendedMode) return { field: 'name', operator: 'Contains', value: searchString };
​
    // In extended mode, we search on name, description and brand name
    return {
      aggregator: 'Or',
      conditions: [
        { field: 'name', operator: 'Contains', value: searchString },
        { field: 'description', operator: 'Contains', value: searchString },
        { field: 'brand:name', operator: 'Equal', value: searchString },
      ],
    };
  });
);
Calling an external API
If your data is indexed using a SaaS, external store, or full-text index, you can call it in the search handler.
const algoliasearch = require('algoliasearch');
const client = algoliasearch('undefined', 'undefined');
const index = client.initIndex('indexName');
​
agent.customizeCollection('products', collection =>
  collection.replaceSearch(async (searchString, extendedMode, context) => {
    const { hits } = index.search(searchString, {
      attributesToRetrieve: ['id'],
      hitsPerPage: 50,
    });
​
    return { field: 'id', operator: 'In', value: hits.map(h => h.id) };
  });
);

Column Type	Default search behavior
Enum	Column is equal to the search string (case-insensitive)
Number	Column is equal to the search string (if the search string is numeric)
String	Column contains the search string (case-insensitive)
Uuid	Column is equal to the search string
Other types	Column is ignored by the default search handler

Last modified 4mo ago