Search

In Forest Admin, pages that show lists of records have a free-text search bar on top of them.
A search bar on the main Table View
Search modes
2 search modes are supported: "normal" and "extended".
All searches start by being a "normal" search.
If the records users are looking for are not found, it is possible to trigger an "extended" search from the footer.
Extended search call to action
Default behavior
Natively, the search behavior is to seek value occurrences within columns of the Collection (in normal mode), and columns of the Collections of direct relations (in extended mode).
By default, Forest Admin will search only in specific columns, depending on their type:
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 behaves in your admin panel.
For instance:
search only on the columns that are relevant to your use case.
use full-text indexes (i.e. Postgres tsquery and tsvector, Algolia, Elastic search, ...)
To customize the search behavior, 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 barcode
    if (barCode.test(searchString))
      return { field: 'barCode', operator: 'Equal', value: Number(searchString) };
​
    // User is searching something else, let's search in the product name only
    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, an external store, or a full-text index, you can call it in the search handler.
const algoliasearch = require('algoliasearch');
const client = algoliasearch('APPLICATION_ID', 'WRITE_API_KEY');
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 1mo ago