Better Exposed Filters
Replaces Views' default select boxes with more advanced widgets such as radio buttons, checkboxes, toggle links, sliders, and date pickers for exposed filters, sorts, and pagers.
better_exposed_filters
インストール
composer require 'drupal/better_exposed_filters:^7.1'
概要
Better Exposed Filters (BEF) は、Drupal の Views 公開フォーム要素を強化し、ユーザー体験と機能性を向上させる代替表示ウィジェットを提供します。Views でフィルターを公開すると、ユーザーが View を操作して検索結果をカスタマイズできるようになります。BEF を使用することで、これらの公開要素がどのようにレンダリングされるかをより細かく制御できます。
このモジュールは、標準的な単一選択または複数選択のドロップダウンボックスを、チェックボックス、ラジオボタン、クリック可能なリンク、数値範囲用の jQuery UI スライダー、日付フィールド用の日付ピッカーなど、よりユーザーフレンドリーなオプションに置き換えます。タクソノミー用語の階層表示、自動送信機能、折りたたみ可能なフィルターグループ、高度な検索シナリオ用のセカンダリオプションをサポートしています。
BEF は、タクソノミー、ブール値、日付、数値、文字列フィルターを含むすべての標準 Views フィルタータイプで動作します。また、Search API フィルターとも統合され、カスタムウィジェット開発用のプラグインシステムによる拡張性を提供します。
Features
- 公開フィルターのドロップダウンを、複数選択フィルター用のチェックボックスまたは単一選択フィルター用のラジオボタンに置き換え
- 公開フィルターを、AJAX サポート付きでフィルター値を切り替えるクリック可能なリンクとして表示
- 設定可能な最小値、最大値、ステップ、アニメーション設定を持つ数値範囲フィルター用の jQuery UI ベースのスライダーを使用
- 自動日付フォーマット処理機能付きの日付フィルター用日付ピッカーウィジェットを提供
- フィルター値が変更されたときに公開フォームを自動送信、テキストフィールドの遅延と最小文字数要件を設定可能
- 自動送信が有効な場合に送信ボタンを非表示にしてすっきりしたユーザーインターフェースを実現
- チェックボックスフィルターに「すべて選択/すべて解除」リンクを追加、階層的なネスト選択をサポート
- チェックボックスとラジオボタンオプションをコンパクトなレイアウト用にインラインで表示
- カスタマイズ可能な「もっと表示/少なく表示」ラベル付きで JavaScript による余分なフィルターオプションの表示/非表示を行う「ソフトリミット」機能を実装
- フィルターを折りたたみ可能な details 要素でラップして整理を改善
- 高度な検索機能用にフィルターをセカンダリオプション領域にグループ化
- シンプルなテキスト置換インターフェースを使用してフィルターオプションラベルを書き換え
- 階層的なタクソノミー用語の適切な処理を含むフィルターオプションのアルファベット順ソート
- ソートフィールドとソート順序を単一のドロップダウンに統合してシンプルなユーザーインターフェースを実現
- デフォルトのソート順序に戻す「ソートをリセット」オプションを追加
- 公開ページャー要素（1ページあたりの項目数）をラジオボタンとリンク表示オプションでサポート
- View、ディスプレイ、フィールド名に基づく詳細なテンプレートオーバーライド用のテーマフックサジェスチョンを提供
- Token モジュールが有効な場合のフィルター説明での Token サポート
- ローカルの nouislider ライブラリインストールまたは CDN フォールバックのサポート
Use Cases
Product Catalog Filtering
Create an e-commerce product listing with checkbox filters for categories, a price range slider, and auto-submit for instant results. Enable 'Select All/None' for category filters and use soft limits to show only the first 10 categories with a 'Show more' link.
Advanced Search Form
Build a search page with primary filters visible (keywords, content type) and secondary filters in a collapsible 'Advanced Options' section (author, date range, tags). Use the secondary options feature to organize complex filter sets without overwhelming users.
Event Calendar Filtering
Create an events listing with date picker filters for start/end dates, radio button filters for event types, and link-based location filters with AJAX for seamless navigation without page reloads.
Hierarchical Taxonomy Navigation
Display a taxonomy term filter as nested checkboxes that reflect the vocabulary hierarchy. Enable 'nested all/none selection' so checking a parent term automatically selects all child terms.
Simplified Sort Controls
Combine sort field and sort order into a single dropdown showing options like 'Date (newest first)', 'Date (oldest first)', 'Title (A-Z)'. Rewrite the default labels to user-friendly text and add a 'Reset to default' option.
Mobile-Friendly Filters
Use collapsible filter groups to minimize vertical space on mobile devices. Enable auto-submit with hidden submit button for a streamlined touch interface where tapping a filter option immediately updates results.
Tips
- Use the theme hook suggestions to create view-specific or field-specific template overrides: bef_checkboxes__VIEW_ID__DISPLAY_ID__FIELD_NAME
- For slider widgets, calculate appropriate min/max/step values based on your actual data range to provide meaningful filter controls
- Combine auto-submit with the 'Hide submit button' option for the cleanest user interface when JavaScript is available
- Use the 'Rewrite based on key' option when you need consistent label rewrites regardless of translation or label changes
- When using soft limits, ensure your CSS properly handles the show/hide animation for a smooth user experience
- Token replacement in filter descriptions works well for dynamic help text like showing the current date or user information
Technical Details
Admin Pages 1
/admin/structure/views/view/{view_id}/edit
Configure Better Exposed Filters settings for a view by selecting 'Better Exposed Filters' as the exposed form style. Access BEF settings through the 'Exposed form style' option under the Advanced section of the view editor.
Hooks 3
hook_better_exposed_filters_options_alter
Alters BEF options before the exposed form widgets are built. Allows programmatic modification of filter settings such as slider min/max values.
hook_better_exposed_filters_display_options_alter
Alters the list of available widget options for a specific filter. Allows adding or removing widget choices for individual filters.
hook_theme_better_exposed_filters_options_alter
Theme-level alter hook for BEF options (same signature as module alter hook)
Troubleshooting 6
Ensure the nouislider library is properly loaded. Either install it locally in libraries/nouislider or verify CDN access is not blocked. Clear all caches after installing the library.
Check that auto-submit is enabled and 'Exclude Textfield' is not checked. Verify the minimum length setting - auto-submit won't trigger until the minimum character count is reached.
For taxonomy filters with hierarchy, do not include leading hyphens in the 'current text' field. The rewrite matches the actual option text, not the displayed text with hierarchy indicators.
This option requires 'Allow multiple selections' to be enabled in the filter settings. Edit the filter and check the 'Allow multiple selections' checkbox.
Ensure 'Allow people to choose the sort order' is enabled in the exposed form settings. The combine feature requires both sort field and sort order to be exposed.
Enable AJAX in the view's Advanced settings. The module automatically adds AJAX support for link widgets when the view has AJAX enabled.