Web Parts
Document Portal
Full-featured document search with typeahead suggestions, popular searches, favourites, and multiple view modes.
DocumentsFeature Parity: 85%
Get Document Portal Working in 3 Steps
15-30 minutes
Prerequisites
- Bonzai 2 package installed on your site
- Documents in a SharePoint library (indexed by search)
1
Add the web part to a full-width section
Edit the page, add a full-width section, click + and search for "Document Portal".
2
Configure result source (optional)
Open the property pane and set the Result Source to a specific search result source, or leave empty for default.
3
Enable favourites and previews
Toggle on "Show Favourite Documents" and "Show Document Previews" for the full experience, then publish.
When to Use This Web Part
Use this when you need to...
- Create a dedicated document search center
- Enable users to find documents across multiple libraries
- Provide document filtering by type, author, date, or custom metadata
- Allow users to bookmark frequently accessed documents
- Build a department-specific document repository page
Best page locations
- Document Center page — dedicated full-page experience
- Department landing page — filtered to department documents
- Knowledge base page — searchable documentation library
- Policies page — regulatory and policy documents
Consider alternatives when...
- • Displaying a fixed list of specific documents — use Documents Rollup
- • Showing recent documents only — use Documents Rollup with date filter
- • Simple file list without search — use Documents Table
Related web parts:
Documents Rollup — simple document list or cardsDocuments Table — tabular view without searchFavourite Documents — bookmarked documents only
Step-by-Step Configuration
1
Create a new page for your Document Portal
Go to Site Pages, create a new page named "Document Center" or "Documents". Use a single-column layout for best results.
Document Portal works best as the main content on a dedicated page.
2
Add a full-width section
In edit mode, add a new section with a full-width layout. This gives the portal maximum space.
3
Add the Document Portal web part
Click the + button, search for "Document Portal", and add it to the full-width section.
4
Configure the Result Source (optional)
Open the property pane and set the Result Source to a specific SharePoint search result source name or ID, or leave empty for the default search.
Result sources control which content is searched. Ask your admin for available result source names.
5
Configure typeahead display fields
Set "Typeahead Display Fields" to configure what appears in search suggestions. Format: "Label:ManagedProperty;Label2:Property2".
6
Choose the default view
Select "Default View" as List or Grid to control how search results display.
7
Enable favourite documents
Toggle "Show Favourite Documents" to display a favourites section where users can see their bookmarked documents.
8
Set items per page
Configure how many documents appear per page using the "Items Per Page" slider (10-100).
9
Publish and test search
Save and publish. Test by searching for known documents and verifying results appear correctly.
Common Configurations
Copy these ready-to-use configurations:
Company Document Center
Full-featured search for all company documents
Best for: Dedicated document search page
Configuration
| title | Document Center |
| defaultView | list |
| showFavouriteDocuments | On |
| showDocumentPreviews | On |
| showPopularSearches | On |
| itemsPerPage | 30 |
Department Documents
Using a specific result source for a team
Best for: Team or department page
Configuration
| title | HR Documents |
| resultSource | HR Documents Result Source |
| defaultView | grid |
| showFavouriteDocuments | On |
| itemsPerPage | 20 |
Policy Repository
Filtered to policy documents with search filters
Best for: Compliance and policy pages
Configuration
| title | Policies & Procedures |
| resultSource | Policies |
| showFavouriteDocuments | On |
| showDocumentPreviews | On |
| sortOrder | name |
My Documents Quick Access
Favourites-focused for personal bookmarks
Best for: Personal dashboard pages
Configuration
| title | My Documents |
| showFavouriteDocuments | On |
| enableWildcardSearch | On |
| itemsPerPage | 15 |
Best Practices
Allow time for search indexing
Newly uploaded documents may take 15-30 minutes to appear in search results. SharePoint search crawls content periodically, not in real-time.
Use specific search scopes for performance
Narrowing the search scope to a specific site or library improves query speed and gives users more relevant results.
Add metadata for better refinement
Documents with rich metadata (document type, department, project) enable more useful refinement filters. Encourage content owners to tag documents.
Verify permissions before publishing
Document Portal respects SharePoint permissions. Users will only see documents they have access to. Test with a regular user account before launch.
Reference
Technical details for developers and advanced users.
FavouriteDocuments List Schema (optional)
The favourites section stores bookmarks in a SharePoint list named FavouriteDocuments. Create this list only if you enable "Show Favourite Documents".
- Create a list named FavouriteDocuments in the same site.
- Add the required columns below.
- Ensure users have Contribute permissions to save favourites.
| Column | Type | Required | Notes |
|---|---|---|---|
| Title | Single line of text | Yes | Document title |
| DocumentPath | Hyperlink | Yes | Document URL |
| DocumentId | Single line of text | Yes | Search DocId / UniqueId |
| FileExtension | Single line of text | Yes | File extension (e.g., pdf, docx) |
| AddedDate | Date/Time | Yes | Saved when favourite is added |
Related Components
Document Portal works with companion components:
- Favourite Documents: User bookmarks for documents (integrated into Document Portal)
- Documents Rollup: For displaying a fixed list of documents without search
- Documents Table: For tabular document display
Property Pane Configuration
Site Selection
| Property | Type | Description |
|---|---|---|
siteSelectionMode | Dropdown | Select from available sites (picker) or enter a site URL manually |
selectedSiteUrl | Dropdown | Site dropdown (picker mode, loaded via Microsoft Graph) |
siteUrl | Text | Manual site URL (manual mode, optional) |
Search Settings
| Property | Type | Description |
|---|---|---|
resultSource | Text | SharePoint Search result source name/ID (optional) |
searchLabelOption | Dropdown | Preset search placeholder option (or Custom) |
searchLabel | Text | Custom placeholder text (used when searchLabelOption = custom) |
enableWildcardSearch | Toggle | Enable wildcard search (*term*) |
typeaheadFields | Multi-select | Managed properties shown in typeahead suggestions |
typeaheadDisplayFields | Text (Multiline) | Legacy/fallback format: "Label:ManagedProperty;Label2:Property2" |
searchFilterFields | Multi-select | Managed properties available as filters/refiners |
searchFilters | Text (Multiline) | Legacy/fallback filter configuration |
itemsPerPage | Slider (10-100) | Number of results per page |
Display Settings
| Property | Type | Description |
|---|---|---|
defaultView | Dropdown | Default view mode: List or Grid |
listViewColumns | Multi-select | Managed properties shown as columns in List view |
listViewDisplayProperties | Text (Multiline) | Legacy/fallback list columns format: "Label:ManagedProperty;..." |
gridViewColumns | Multi-select | Managed properties shown as fields in Grid view |
gridViewDisplayProperties | Text (Multiline) | Legacy/fallback grid format: "Label:ManagedProperty;..." |
visibleMetadataFields | Multi-select | Which metadata fields appear on each result |
showMetadataChips | Toggle | Show metadata chips on results |
showSortDropDown | Toggle | Show sort dropdown to users |
sortOrder | Dropdown | Default sort: Relevance, Date, or Name |
showViewToggle | Toggle | Show the List/Grid view toggle (disabled in Search-only mode) |
showFiltersPanel | Toggle | Show the filters panel when refiners exist (disabled in Search-only mode) |
trimDuplicates | Toggle | Remove duplicate results from search |
Features
| Property | Type | Description |
|---|---|---|
searchOnlyMode | Toggle | Minimal UI preset (hides some end-user controls) |
showResults | Toggle | Show search results section |
showPopularSearches | Toggle | Show popular searches section |
showFavouriteDocuments | Toggle | Show favourite documents section |
favouriteDocumentsLabel | Text | Label for the favourites section |
showCustomDocumentLinks | Toggle | Show a custom links section above/beside results |
customDocumentLinksLabel | Text | Label for the custom links section |
customDocumentLinks | Collection Data | Manually managed custom document links |
showDocumentPreviews | Toggle | Enable document preview functionality |
Title & Navigation
| Property | Type | Description |
|---|---|---|
title | Text | Web part title |
titleUrl | Text | URL to make the title clickable |
titleIconOption | Dropdown | Title icon mode: Select Icon or None |
titleIconName | Icon Picker | Fluent UI icon picker (default: DocumentSearch) |
titleIconUrl | Text | Custom icon URL (overrides icon name) |
Appearance
| Property | Type | Description |
|---|---|---|
chromeType | Dropdown | Chrome type: None, Title Only, Border Only, Title and Border |
fixedHeight | Slider (200-800) | Fixed height in pixels |
Advanced
| Property | Type | Description |
|---|---|---|
description | Text (Multiline) | Web part description |
helpUrl | Text | Help documentation URL |
Features Checklist
- ✅ Full-text document search
- ✅ Typeahead suggestions (configurable display fields)
- ✅ Popular searches section
- ✅ Favourite documents integration
- ✅ List and Grid view modes
- ✅ Configurable sort options
- ✅ Wildcard search support
- ✅ Document previews
- ✅ Pagination
- ✅ Duplicate result trimming
Migration from Classic
| Aspect | Classic | Modern |
|---|---|---|
| Technology | JSOM + CAML queries | SPFx + SharePoint Search REST API |
| Typeahead | Brick configuration | Configured via typeaheadDisplayFields property |
| View Modes | List only | List and Grid view options |
| Favourites | Separate web part | Integrated section (toggle) |
| Popular Searches | Not available | Built-in section (toggle) |