Developer Docs

Custom Search Queries with C#Bot

C#Bot supports custom search queries that allow end users to retrieve search results that are more relevant to their requirements. This article will walk through how to customise search queries and apply it to a collection on a customised page. For this project, we will be using the Codebots Zoo Project. You can follow along with the project by downloading the latest version from the public git page.

Create Custom Search in a new Rest Endpoint

Each animal has a keeper. Let’s add a custom query to search the animals by the keeper’s username by adding a new endpoint in serverside\src\Controllers\Entities\AnimalController.cs.

  1. Locate the protected region: // % protected region % [Add any further endpoints here] off begin
  2. Turn on the protected region by replacing off begin with on begin.
  3. Add a new endpoint as below

     /// <summary>
     /// Get the list of animuals by searching keeper's username
     /// </summary>
     /// <param name="qstr">The query string to search by</param>
     /// <param name="dbContext">The database context</param>
     /// <returns>The Event object with the given id</returns>
     public async Task<IEnumerable<Animal>> SearchByZooKeeperUsername(
         [FromQuery] string qstr,
         [FromServices] ZooDBContext dbContext)
         if (string.IsNullOrWhiteSpace(qstr))
             return await dbContext.Animal.Include(a => a.ZooKeeper).ToListAsync();
         qstr = qstr.ToLower();
         var result = await dbContext.Animal
             .Include(a => a.ZooKeeper)
             .Where(a => a.ZooKeeper.UserName.Contains(qstr))
         return result;

To use this endpoint in the front-end:

  1. Open the clientside\src\Views\Pages\AnimalPage.tsx file.
  2. Locate the protected region // % protected region % [Add class properties here] off begin and turn it on
  3. Add the following observable properties:

     private search = { usernameToSearch: "" };
     animalsSearchedByKeeperUsername: Animal[] = [];
  4. Locate the protected region // % protected region % [Add class methods here] off begin, and turn it on
  5. Add the following functions:

     private customeSearchCollection = () => {
         const tableHeaders: ICollectionHeaderProps<Animal>[] = [
                 name: 'name',
                 displayName: 'Name',
                 sortable: true
                 name: 'keeperUsername',
                 displayName: 'Keeper Username',
                 transformItem: animal =>
         const searchCollection = (
                 <h4>Example for custom search</h4>
                 <h5>This search will only search the animals by it's zoo keeper's username</h5>
         return searchCollection;
     private onSearchTriggered = (searchTerm: string) => {
         axios.get('/api/entity/animalentity/search-by-zookeeper-username', {params: {qstr: searchTerm}})
             .then(({data}) => {
                     () => {
                         this.animalsSearchedByKeeperUsername = data;
  6. Then add one line to render another search box and collection after the <AnimalTile> tag:

     let contents = (
             <AnimalTile {...this.props} />
  7. When the front-end Animal page is rendered, it will display the search box and the collection we created below the search box. You can try it out by typing part of the zoo keeper’s username (which is an email) and clicking the Go button. The collection should now display all the animals belonging and matching the zoo keepers.

Custom search logic through GraphQL

For now C#Bot doesn’t support customising special logic like searching by reference entity fields through GraphQL. This will be supported in future iterations.

Was this article helpful?

Thanks for your feedback!

If you would like to tell us more, please click on the link below to send us a message with more details.







On this page

New to Codebots?

We know our software can be complicated, so we are always happy to have a chat if you have any questions.