Search configuration examples

Examples show how to configure and use a search experience by using a structured JSON file. These examples help you start faster by providing working patterns that you can adapt to your use case.

Examples demonstrate common ways to configure a search experience, from minimal setup to full API integration. Use these patterns to understand key options and adapt them to your use case.

Example 1: Minimal configuration

{
  "metadata": {
    "name": "customer-search",
    "displayName": "Customer search",
    "paths": {
      "component": "packages/customer/src/app/features/order",
      "table": "packages/customer/src/app/features/order",
      "jsonFile": "packages/order-shared/assets/buc-app-order",
      "translationFile": "packages/order-shared/assets/buc-app-order"
    },
    "options": {
      "sharedLib": "order-shared"
    }
  }
}
Command
ng g @buc/schematics:search-from-config --config=customer-search.json
Result
  • The search panel has sample fields.
  • Search results have default breadcrumbs.
  • There is a table with server-side pagination. This is the default.
  • Sample JSON configurations (search_fields.json, buc-table-config.JSON).

Example 2: With API integration

{
  "metadata": {
    "name": "order-search",
    "displayName": "Order Search",
    "module": "order",
    "paths": { /* ... */ },
    "options": { /* ... */ }
  },
  "oms-api": {
    "endpoints": {
      "search": {
        "apiName": "getOrderList",
        "method": "POST"
      }
    },
    "requestMapping": {
      "pageNumber": "PageNumber",
      "pageSize": "PageSize"
    },
    "responseMapping": {
      "data": "Output.OrderList.Order",
      "totalCount": "Output.OrderList.TotalNumberOfRecords"
    }
  },
  "search-results": {
    "pagination": {
      "type": "server-side",
      "defaultPageSize": 50
    }
  }
}
Result
  • This is a fully-functional API service.
  • You need to implement the complex query based on the search fields. Currently it only provides a placeholder.
  • There is NEXTPAGE pagination.
  • There is automatic request and response mapping.
  • Components are registered in order.

Example 3: Client-side pagination

{
  "metadata": { /* ... */ },
  "search-results": {
    "pagination": {
      "type": "client-side",
      "defaultPageSize": 25
    }
  }
}
Result
  • All data is fetched at once.
  • There is client-side sorting.
  • There are no page-by-page API calls.

Example 4: Custom routes and breadcrumbs

{
  "metadata": { /* ... */ },
  "search": {
    "route": "/custom/order/order-search",
    "breadcrumb": {
      "label": "Order search"
    }
  },
  "search-results": {
    "route": "/custom/order/order-results",
    "breadcrumb": {
      "label": "Order results"
    }
  }
}
Result
  • There are custom routes instead of auto-generated routes.
  • There are custom breadcrumb labels.

Example 5: Without module registration

{
  "metadata": {
    "name": "standalone-search",
    "displayName": "Standalone Search",
    "paths": { /* ... */ },
    "options": { /* ... */ }
    // Note: No "module" field
  }
}
Result
  • Components are generated without module registration.
  • This is useful for standalone components or manual registration.