> For the complete documentation index, see [llms.txt](https://docs.buzzy.buzz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.buzzy.buzz/the-building-blocks/code-widget-custom-code/examples/contact-age-filter.md). # Contact Age Filter This example demonstrates how to create a custom age range filter for a contacts app using the new `filterMicroappView` async API. ## Scenario You have a contacts table with `name` and `age` fields, and you want to create a custom search panel that allows filtering contacts by age range. ## Implementation ```html ``` ## Key Points ### Modern Async API Approach * Uses the new `filterMicroappView` async API instead of deprecated `filterview` postMessage * Initializes BuzzyFrameAPI at the top level before React components * Uses proper error handling with try/catch blocks ### MongoDB Query Syntax * Uses `$gte` (greater than or equal) and `$lte` (less than or equal) operators * Supports complex filtering with multiple conditions * Set `viewFilterIsMongoQuery: true` to enable MongoDB operators ### User Experience Features * Input validation to ensure valid age ranges * Clear filter functionality to remove all filters * Responsive design with hover effects * Error handling with console logging ### Filter Context * Uses `filterContext: 'contact-age-filter'` to identify this specific filter * Allows multiple filters to coexist without conflicts * Helps with debugging and filter management ## Migration from Deprecated filterview If you're migrating from the old `filterview` postMessage approach: **Old approach (deprecated):** ```javascript window.parent.postMessage({ from: 'buzzy-iframe', action: 'filterview', body: filterParams, frameToken: frameToken }, '*'); ``` **New approach (recommended):** ```javascript await buzzyFrameAPI.filterMicroappView({ microAppID: contactsTableID, viewFilters: filterParams.viewFilters, viewFilterIsMongoQuery: true, filterContext: 'your-filter-context' }); ``` ## Testing the Example 1. Create a contacts app with `name` (text) and `age` (number) fields 2. Add some sample contacts with different ages 3. Add this code widget to a screen that displays the contacts table 4. Test filtering by different age ranges 5. Verify that the "Clear" button removes all filters