Filter widgets
When building pages in the Sitefinity WYSIWYG editor, you can control which widgets appear in the widget toolbox by using widget registry filters. Filters are client-side functions that run every time the toolbox is rendered in edit mode.
How widget filtering works
- Filters are attached to your
WidgetRegistry via its optional filters property.
- Each filter is evaluated in the browser when the editor renders the toolbox.
- The filter returns whether a widget should be shown.
Keep the default filters when customizing the registry
The SDK’s defaultWidgetRegistry includes built-in filters. If you create a custom registry, it’s recommended to merge:
- The default widgets with your custom widgets
- The default filters with your custom filters
Example:
Create a custom widget filter
Implement the filter function
Create a client-side TypeScript module (for example components/custom-filters/my-custom-filtering.ts) and add the use client directive at the top so it runs on the client.
The filter function should accept:
widgetMetadata – the widget’s metadataargs – context about the toolbox rendering
It should return a Promise<boolean>:
true → show the widgetfalse → hide the widget
Example:
Register the filter in the widget registry
Import your filter into your app’s registry file (commonly src/app/widget-registry.ts) and add it to the filters array.
Example:
Notes and best practices
- Filters are executed for each widget when the toolbox is drawn, so keep them fast.
- Always start filter modules with
use client, because the widget toolbox runs in the browser.
- Prefer additive filtering (hide only what you must), and keep the default filters unless you have a specific reason to replace them.