B
Bonzai 2
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, configure the search scope, set refinement categories, choose a result template (Classic is the default), 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 Portaldocument-focused search with favouritesEmployee Directorypeople 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 search scope and filters

Open the property pane. Choose whether to scope search to the current site (auto-detect) or enter a manual scope. Configure content type filters and refiners.

Use the Content Type picker to select which content types appear in the filter dropdown.

5

Set items per page and default view

Configure items per page (10-20 is typical) and choose a default view: Classic (rich metadata — default), List, Cards, or Table.
6

Configure display options

Toggle "Show Search Box", "Show Inline Filters", "Show Sort Dropdown", "Show Refinement Panel", and "Show View Switcher" based on your needs. Then use Result Card Details to control which metadata appears on each result (category, views, tags, URL, thumbnail, author, likes/comments, published date).
7

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
titleSearch
autoDetectScopeOff
refinersConfigContent Type:contentclass:;File Type:FileType:;Author:Author:
itemsPerPage20
defaultViewClassic
showRefinersOn
showViewSwitcherOn

Document Search

Focused search for documents only

Best for: Document center pages
Configuration
titleFind Documents
allowedContentTypesSTS_ListItem_DocumentLibrary
allowedFileTypesdocx,xlsx,pdf,pptx
refinersConfigFile Type:FileType:;Author:Author:
defaultViewList

Homepage Search Widget

Compact search for homepage integration

Best for: Homepage hero section
Configuration
showSearchBoxOn
showInlineFiltersOff
showSortDropdownOff
showRefinersOff
itemsPerPage5
chromeTypeNone

Site-Wide Search

Comprehensive search with all refiners

Best for: Navigation-linked search
Configuration
titleEnterprise Search
refinersConfigContent Type:contentclass:;File Type:FileType:;Author:Author:
itemsPerPage20
defaultViewCards
showViewSwitcherOn
showRefinersOn

Recent Updates

  • Fixed: all four result templates (Card, Classic List, List, Table) now honour the Open in New Tab toggle and add data-interception="off", so SharePoint's link interceptor no longer hijacks navigation from search results.
  • New: Date Field control under Result Display → Show Result Published lets authors choose which managed property's date drives the displayed published date (Auto/Created, Created, Last Modified, or Write).
  • New: Classic result template with rich metadata (category, views, tags, thumbnail, author, likes & comments, published date) — now the default view.
  • New: inline filter row above results — Content Type (multi-select), Author, Date, and Tags text fields.
  • New: Sort dropdown — Relevance, Most Recent, or Most Viewed.
  • New: typeahead suggestions — live result previews after 2+ characters, powered by the SharePoint Search query API (not the legacy suggestions endpoint).
  • New: sub-site scoping with auto-detect toggle (limits search to the current site).
  • New: Content Type picker in the property pane — select content types and assign friendly labels for end-user filters.
  • New: page exclusions by URL or GUID (exclude specific pages from results).
  • New: prefix/wildcard search for partial matching (e.g., "comm" matches "communication").
  • New: per-field result card toggles — hide category, views, tags, URL, thumbnail, author, likes/comments, or published date individually.
  • Improved: property pane reorganized into two pages with collapsible accordion sections.

Sub-site Scoping

An auto-detect toggle scopes search results to the current site. When turned off, a manual scope field lets you enter a specific path. The scope is applied as a Path: KQL filter and also narrows typeahead suggestions.

Content Type Filters

Admins can select which content types appear in the end-user filter dropdown using a visual picker in the property pane (the contentTypeChoices property). Each content type can be given a friendly label (e.g., "Documents" instead of "STS_ListItem_DocumentLibrary"). End users see a multi-select dropdown in the inline filter row for narrowing results. This is separate from the allowedContentTypesproperty, which restricts which values appear inside the Content Type refiner in the side panel.

Inline Filters & Sort

A filter row sits directly above the results and exposes quick filters without opening the refinement panel: a multi-select Content Type dropdown (populated from your configured content type choices), an Author text field (prefix-matched), a Date picker (matched on LastModifiedTime for that day), and a Tags text field (comma- or semicolon-separated, matched against Tags andowstaxidmetadataalltagsinfo). A separate Sort dropdown offers Relevance, Most Recent, or Most Viewed ordering (recent and views are applied client-side).

Result Templates

Four built-in templates render the result list. Classic (default) shows a rich card per result with category label, view count, title, description, URL, tags, author/published date, and likes/comments, plus an optional thumbnail. List is a compact list with a file-type icon, title, description, author and date. Cards is a grid of tiles showing file-type badge, title, short description, author and date. Table renders Name, Type, Author and Published columns. The Show View Switcher toggle lets end users switch between these at runtime.

Page Exclusions

Exclude specific pages from search results by entering URLs or GUIDs. URL-based exclusions useNOT Path: KQL filters; GUID-based exclusions are applied client-side after results are returned (matched against DocId / UniqueId).

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.

Refiners require managed properties

Refinement categories (and the inline Author / Tags / Date filters) query SharePoint Search managed properties. If a refiner or filter returns no values, verify the managed property exists and is set to Refinable in the search schema. Ask your SharePoint admin if you're unsure.

Turn on the refinement panel and view switcher

showRefiners and showViewSwitcher default to Off so the web part renders as a compact list. On dedicated search pages, turn both on in the Display Settings group to give users the full refinement sidebar and the List / Cards / Table / Classic switcher.

Troubleshooting

Still need help? Contact Bonzai Support


Reference

Technical details for developers and advanced users.

Consolidated Components

Advanced Search consolidates functionality from two legacy Bonzai components:

Classic ComponentLocationFunctionModern Equivalent
Search BoxHeader (bonzai.min.js)Search input with typeaheadSearch input + typeahead suggestions + inline Content Type / Author / Date / Tags filters
Search RefinementSearch pagesFiltering panel with refiners and countsRefinement sidebar (showRefiners) with configurable refinersConfig
Search Result Templatesbonzai.min.jsResult display formattingFour built-in templates: Classic, List, Cards, Table — switchable at runtime via the view switcher

Property Pane Configuration

Title & Branding

PropertyTypeDescription
titleTextWeb part title (default: Search)
titleUrlTextOptional URL to make the title clickable
titleIconOptionDropdownTitle icon mode: custom (default) or none
titleIconNameTextFluent UI icon name (e.g., Search, Zoom). Only shown when icon option is custom. Default: Search
titleIconUrlTextCustom icon URL (overrides titleIconName when set)
descriptionText (Multiline)Optional description below the title
showMoreUrlTextURL for the footer link shown below the result list
showMoreTextTextText for the footer link (default: View All Results)

Search Scope

PropertyTypeDescription
autoDetectScopeToggleScope search to the current site automatically (default: On). Applied as a Path: KQL filter.
searchScopeTextManual search scope URL (only shown and used when auto-detect is Off)
resultSourceIdTextOptional SharePoint Search result source GUID. Leave empty to use Local SharePoint Results.

Refiners Configuration

PropertyTypeDescription
refinersConfigText (Multiline)Refiners in format "Label:Property:DefaultValue;..." (default: Content Type:contentclass:;File Type:FileType:)
refinersSortOrderDropdownSort refiner values by count (default) or alphabetical
maxValuesPerRefinerSlider (5-50)Maximum values to show per refiner (step: 5, default: 10)

Content Type Configuration

PropertyTypeDescription
contentTypeChoicesContent Type Picker (JSON)Content types to expose in the inline Content Type dropdown. Each entry has a value (contentclass) and alias (friendly label). Stored as a JSON array.

Filter Restrictions

PropertyTypeDescription
allowedContentTypesText (Multiline)Comma-separated contentclass values to show inside the Content Type refiner (empty = all). E.g., STS_ListItem_DocumentLibrary,STS_ListItem_WebPageLibrary
allowedFileTypesTextComma-separated file extensions to show inside the File Type refiner (empty = all). E.g., docx,xlsx,pdf,pptx

Page Exclusions

PropertyTypeDescription
excludedPagesTag Input (JSON array)URLs or GUIDs of pages to exclude from results. URLs become NOT Path: KQL filters; GUIDs are matched client-side against DocId / UniqueId.

Display Settings

PropertyTypeDescription
defaultViewDropdownDefault result view: list, cards, table, or classic (default)
itemsPerPageSlider (5-50)Results per page (step: 5, default: 20)
showSearchBoxToggleShow the search input box and typeahead (default: On)
showInlineFiltersToggleShow the inline filter row (Content Type, Author, Date, Tags) above results (default: On)
showSortDropdownToggleShow the Sort By dropdown next to the search box — Relevance, Most Recent, Most Viewed (default: On)
showRefinersToggleShow the refinement filters sidebar (default: Off)
showViewSwitcherToggleShow the List / Cards / Table / Classic view switcher (default: Off)
showMetadataToggleShow metadata on search results (default: On)
showAuthorToggleShow author name on search results (default: On)
openInNewTabToggleOpen search results in a new browser tab (default: Off)

Result Card Details

These toggles control which metadata appears on each search result. The showResultCategory,showResultViews, showResultTags, showResultUrl,showResultThumbnail, and showResultLikesComments fields are only rendered by the Classic template; the other templates display a subset.

PropertyTypeDescription
showResultCategoryToggleShow the category label above the result title (Classic only, default: On)
showResultViewsToggleShow the view count badge on each result (Classic only, default: On)
showResultTagsToggleShow tag chips under each result (Classic only, default: On)
showResultUrlToggleShow the result URL under the title (Classic only, default: On)
showResultThumbnailToggleShow the preview thumbnail when available (Classic only, default: On)
showResultAuthorToggleShow the author name on each result (all templates, default: On)
showResultLikesCommentsToggleShow like and comment counts (Classic only, default: On)
showResultPublishedToggleShow the published / modified date on each result (all templates, default: On)
dateFieldNameDropdownWhich managed property's date to render as the published date when showResultPublished is on. Default: Auto (Created). Options are a fixed list — Auto (Created), Created, Last Modified, or Write — because Advanced Search uses the SharePoint Search API rather than a list schema.

Appearance

PropertyTypeDescription
chromeTypeDropdownChrome type: none, titleOnly, borderOnly, or titleAndBorder (default)
fixedHeightSlider (0-800)Fixed height in pixels; 0 = auto (step: 50, default: 0)

Features Checklist

  • ✅ Search input box with prefix/wildcard matching (auto-appends * for simple queries)
  • ✅ Typeahead — live result suggestions after 2+ characters, debounced 200 ms
  • ✅ Inline filter row — Content Type (multi-select), Author, Date, Tags
  • ✅ Sort dropdown — Relevance, Most Recent, Most Viewed
  • ✅ Refinement sidebar — multi-select filters with value counts, expand/collapse, show more/less
  • ✅ Clear all filters button
  • ✅ Four result templates — Classic (default, rich metadata), List, Cards, Table
  • ✅ Per-field toggles for category, views, tags, URL, thumbnail, author, likes/comments, published date
  • ✅ Pagination (Previous / Next with page count)
  • ✅ Sub-site scoping with auto-detect toggle or manual path
  • ✅ Content type picker with friendly labels (contentTypeChoices)
  • ✅ Allowed content type / file type restrictions on refiner values
  • ✅ Page exclusions by URL (NOT Path:) or GUID (client-side)
  • ✅ Optional result source ID (GUID) and show-more footer link
  • ✅ Chrome options (None / Title Only / Border Only / Title and Border) and fixed height
  • ✅ Property pane organized into two pages with collapsible accordion groups

Implementation Changes

AspectClassicModern
Technologybonzai.min.js + JSOMSPFx + React
Search InputHeader integrationStandalone or embedded
TypeaheadBrick configurationProperty pane
RefinementSeparate componentIntegrated panel
RefinersCAML-basedSharePoint Search REST API

Migration Benefits

  1. Flexibility: Can be placed on any Modern page
  2. No Master Page: Works without customization
  3. Unified Experience: Single web part for complete search
  4. Property Pane: No Brick login required for configuration
  5. Real-time Preview: See changes immediately while editing