Web Parts
Advanced Search
Unified search with refinement filters, typeahead, and multiple result templates.
SearchFeature Parity: 85%
Component Consolidation
Advanced Search consolidates the legacy Search Box and Search Refinement web parts into a single, unified component.
Get Advanced Search Working in 3 Steps
15-30 minutes
Prerequisites
- Bonzai 2 package installed on your site
- SharePoint Search configured and indexing content
1
Create a Search page
Create a new page named "Search" with a full-width layout.
2
Add the Advanced Search web part
Edit the page, click +, search for "Advanced Search", and add it to the full-width section.
3
Configure refiners and publish
Open the property pane, set refinement categories, choose a result template, and publish.
When to Use This Web Part
Use this when you need to...
- Create a centralized enterprise search page
- Provide users with refined search across all content
- Enable filtering by content type, date, author, and custom metadata
- Replace the classic Bonzai header search experience
- Build category-specific search pages (documents, people, news)
Best page locations
- Search Center page — dedicated enterprise search
- Site homepage — embedded search experience
- Content-specific pages — filtered search (e.g., "Search Policies")
Consider alternatives when...
- • Simple document search — use Document Portal for document-focused search
- • People search only — use Employee Directory
- • News search only — use News Rollup with filtering
Related web parts:
Document Portal — document-focused search with favouritesEmployee Directory — people search with A-Z browsing
Step-by-Step Configuration
1
Create a new Search page
Go to Site Pages, create a new page named "Search" or "Find Content". Use a single-column full-width layout.
Add the page to your site navigation for easy access.
2
Add a full-width section
In edit mode, add a new section with a full-width layout to give search maximum space.
3
Add the Advanced Search web part
Click the + button, search for "Advanced Search", and add it to your section.
4
Configure the title and default query
Open the property pane and set a title. Set "Default Query" to * to search all content.
5
Configure refiners
In "Refiners Config", enter refiners in format "Label:Property:DefaultValue;..." (e.g., "File Type:FileType:;Author:Author:").
Common managed properties: contentclass, FileType, Author, ModifiedDate, Path
6
Set items per page and default view
Configure items per page (10-20 is typical) and choose a default view: List, Cards, or Table.
7
Configure display options
Toggle "Show Search Box", "Show Refiners", and "Show View Switcher" based on your needs.
8
Publish and test
Save and publish. Test searches for various content types and verify refinement filters work.
Common Configurations
Copy these ready-to-use configurations:
Enterprise Search Center
Full-featured search for all site content
Best for: Dedicated Search page
Configuration
| title | Search |
| defaultQuery | * |
| refinersConfig | File Type:FileType:;Author:Author: |
| itemsPerPage | 20 |
| defaultView | List |
| showRefiners | On |
Document Search
Focused search for documents only
Best for: Document center pages
Configuration
| title | Find Documents |
| allowedContentTypes | STS_ListItem_DocumentLibrary |
| refinersConfig | File Type:FileType:;Author:Author: |
| defaultView | List |
Homepage Search Widget
Compact search for homepage integration
Best for: Homepage hero section
Configuration
| showSearchBox | On |
| showRefiners | Off |
| itemsPerPage | 5 |
| chromeType | None |
Site-Wide Search
Comprehensive search with all refiners
Best for: Navigation-linked search
Configuration
| title | Enterprise Search |
| refinersConfig | Content Type:contentclass:;File Type:FileType:;Author:Author: |
| itemsPerPage | 20 |
| defaultView | Cards |
| showViewSwitcher | On |
Best Practices
Use descriptive placeholder text
Help users understand what they can search for with placeholder text like "Search documents, news, and people..." rather than just "Search".
Configure relevant refiners
Only show refinement categories that make sense for your content. Too many refiners can overwhelm users; 3-5 is typically ideal.
Create multiple search pages for different needs
Consider dedicated search pages for different content types: "Search Documents", "Search People", "Search News" with pre-configured filters.
Vertical dropdown requires managed properties
The vertical dropdown filters require corresponding managed properties configured in SharePoint search schema. Contact your admin if filters don't work.
Reference
Technical details for developers and advanced users.
Consolidated Components
Advanced Search consolidates functionality from two legacy Bonzai components:
| Classic Component | Location | Function |
|---|---|---|
| Search Box | Header (bonzai.min.js) | Search input with typeahead, vertical dropdown |
| Search Refinement | Search pages | Filtering panel with refiners and counts |
| Search Result Templates | bonzai.min.js | Result display formatting |
Property Pane Configuration
Title Settings
| Property | Type | Description |
|---|---|---|
title | Text | Web part title |
titleUrl | Text | Optional URL to make the title clickable |
titleIconOption | Dropdown | Title icon mode: Custom or None |
titleIconName | Icon Picker | Fluent UI icon picker (default: Search) |
titleIconUrl | Text | Custom icon URL (overrides icon name) |
description | Text (Multiline) | Optional description below the title |
showMoreUrl | Text | URL for footer link |
showMoreText | Text | Text for footer link (default: View All Results) |
Search Settings
| Property | Type | Description |
|---|---|---|
defaultQuery | Text | Default search query (use * for all content) |
resultSourceId | Text | SharePoint Search result source ID or name |
searchScope | Text | Limit search to a specific path (e.g., /sites/Intranet/Documents) |
Refiners Configuration
| Property | Type | Description |
|---|---|---|
refinersConfig | Text (Multiline) | Refiners in format "Label:Property:DefaultValue;..." (e.g., Content Type:contentclass:;File Type:FileType:) |
refinersSortOrder | Dropdown | Sort refiners by count or alphabetically |
maxValuesPerRefiner | Slider (5-50) | Maximum values to show per refiner (step: 5) |
Filter Restrictions
| Property | Type | Description |
|---|---|---|
allowedContentTypes | Text (Multiline) | Comma-separated allowed content types (e.g., STS_ListItem_DocumentLibrary) |
allowedFileTypes | Text | Comma-separated allowed file types (e.g., docx,xlsx,pdf,pptx) |
Display Settings
| Property | Type | Description |
|---|---|---|
defaultView | Dropdown | Default result view: List, Cards, or Table |
itemsPerPage | Slider (5-50) | Results per page (step: 5, default: 20) |
showSearchBox | Toggle | Show search input box (default: On) |
showRefiners | Toggle | Show refinement filters panel (default: On) |
showViewSwitcher | Toggle | Show view switcher (List/Cards/Table) (default: On) |
Appearance
| Property | Type | Description |
|---|---|---|
chromeType | Dropdown | Chrome type: None, Title Only, Border Only, Title and Border |
fixedHeight | Slider (0-800) | Fixed height in pixels (0 = auto) |
Features Checklist
- ✅ Search input box
- ✅ Typeahead suggestions
- ✅ Search vertical dropdown
- ✅ Refinement panel with filters
- ✅ Filter counts display
- ✅ Multi-select filters
- ✅ Clear filters functionality
- ✅ Multiple result display templates
- ✅ Pagination
- ⚠️ Header integration requires SPFx Application Customizer
Implementation Changes
| Aspect | Classic | Modern |
|---|---|---|
| Technology | bonzai.min.js + JSOM | SPFx + React |
| Search Input | Header integration | Standalone or embedded |
| Typeahead | Brick configuration | Property pane |
| Refinement | Separate component | Integrated panel |
| Refiners | CAML-based | SharePoint Search REST API |
Migration Benefits
- Flexibility: Can be placed on any Modern page
- No Master Page: Works without customization
- Unified Experience: Single web part for complete search
- Property Pane: No Brick login required for configuration
- Real-time Preview: See changes immediately while editing