# 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 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.buzzy.buzz/the-building-blocks/code-widget-custom-code/examples/contact-age-filter.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.