- OVERVIEW
- PREREQUISITES
- How Bonzai 2 web part configuration works
- Communication web parts
- Documents and search web parts
- Content and layout web parts
- Navigation web parts
- People web parts
- Utility web parts
- Troubleshooting web part configuration
OVERVIEW
Use this article when you know you need a Bonzai 2 web part but are not sure which one to choose, what data it expects, or why a web part is empty after you add it to a page. Bonzai 2 web parts are SharePoint Framework web parts: you add them to Modern SharePoint pages, configure them from the property pane, and point them at SharePoint lists, libraries, pages, or search results.
Key idea: Most Bonzai 2 web parts are display components. They do not create your business content for you; they read content from SharePoint. If the source list, library, page metadata, or search index is missing, the web part can render correctly but still show no items.
Inventory note: Bonzai 2 includes 29 web parts. This guide groups them by the problem they solve; the Sidebar (News / Event / Spotlight) entry represents three separate companion web parts that share the same configuration pattern.
PREREQUISITES
- Bonzai 2 is installed and activated on the target site.
- You can edit the Modern SharePoint page where the web part will be added.
- You can create or modify the SharePoint list, library, or page metadata used by the selected web part.
- You understand how to open a SharePoint Framework property pane. Microsoft describes the standard property pane model in Make your SharePoint client-side web part configurable.
How Bonzai 2 web part configuration works
- Edit the page and select the + button where the web part should appear.
- Search for the Bonzai web part by name.
- Add the web part, then select the pencil icon to open the property pane.
- Select the source site, list, library, page type, view, or search scope required by that web part.
- Configure display options such as template, items per page, metadata fields, filters, icons, and chrome type.
- Publish the page and test with a user account that has the same permissions as the intended audience.
Why this works: The property pane stores each web part instance's configuration on the page. The web part then uses that configuration to query SharePoint when the page loads. If you move a web part to another page, the stored settings move with that page instance, but the user still needs permission to the source content.
Communication web parts
| Web part | Use it when | First setup check |
|---|---|---|
| Important Messages | Announcements, maintenance notices, emergency alerts, policy reminders. | Create an Important Messages list with Title, Body, Category, StartDate, EndDate, MessageActive, AllowDismissal, and optional TargetAudience. |
| News Rollup | Company or department news feeds from published Site Pages. | Publish news pages and tag them with a Showcase or Featured value such as News Rollup. |
| Events Rollup | Upcoming events, event archives, featured events, and optional RSVP. | Use event pages in Site Pages; create EventAttendees only if RSVP is needed. |
| Page Banner | Hero banner on News, Event, and Spotlight pages. | Use a supported page type and place the web part in a full-width section. |
| Sidebar (News / Event / Spotlight) | Related links, contacts, and tags next to a content page. | Add the matching sidebar variant to a narrow column and populate metadata on the current page. |
| Feedback | Collect page, support, or service feedback. | Create a Feedback list with Title, Description, Category, Rating, IsAnonymous, SubmittedBy, and SubmittedByName. |
Decision tip: Use Important Messages for short, time-bound alerts; use News Rollup for articles; use Events Rollup for dated events; use Page Banner and the sidebar web parts on individual content pages rather than on rollup pages.
Documents and search web parts
| Web part | Use it when | First setup check |
|---|---|---|
| Document Portal | Full document search with typeahead, popular searches, favourites, and preview. | Use SharePoint Search; create FavouriteDocuments for per-user favourites if required. |
| Documents Rollup | Recent or curated documents in list, card, or compact layouts. | Select a document library and configure sort, pagination, and optional category or tag filters. |
| Documents Table | Tabular document browser with sortable visible columns. | Select a document library and choose visible columns such as Name, Modified Date, Author, File Size, and File Type. |
| Favourite Documents | Shared featured documents based on a SharePoint column value. | Add a Showcase column to a document library and set matching values such as Favorite. |
| Advanced Search | Unified search page with refiners, typeahead, and result templates. | Create a Search page, add the web part full width, then configure search scope and refinement categories. |
Why documents can appear at different times: rollup and table web parts read libraries directly, while Document Portal depends on SharePoint Search. Newly uploaded documents can take time to appear in search even though they are already visible in a library.
Content and layout web parts
| Web part | Use it when | First setup check |
|---|---|---|
| Spotlight Rollup | Feature employees or spotlight content with image-focused cards. | Use Site Pages or a custom list with banner images. |
| Landing | Landing tiles and banner grids for department or resource pages. | Create a landing list with Title, Image/ImageUrl, LinkUrl, and optional Description and SortOrder. |
| Slider | Rotating hero carousel for highlighted content. | Use Site Pages with banner images and a Showcase value such as Slider. |
| Pages Rollup | General published page listings with sorting and templates. | Select Site Pages or a custom pages list; drafts and folders should not be used as source content. |
| Tabbed | Accordion, tabs, or tile navigation with mixed content sources. | Create each tab, then configure its content source: list view, HTML, curated links, news, events, pages, or documents. |
| Content Cards | Cards with icons, descriptions, and call-to-action links. | Create a list with at least Title; add Description, LinkUrl, LinkText, IconUrl/IconName, Category, SortOrder, and OpenInNewTab for richer cards. |
| Image Link Gallery | Clickable image tile grid with optional filters, search, paging, and favorites. | Use list mode with image/link fields or manual mode for curated image entries. |
| Marketplace | Searchable and filterable catalog over a SharePoint list. | Select the list, then configure which columns display and which filters are available. |
Decision tip: Use Landing, Content Cards, and Image Link Gallery when a list item should become a visual tile or card. Use Pages Rollup and Slider when the source content is a published SharePoint page.
Navigation web parts
| Web part | Use it when | First setup check |
|---|---|---|
| Advanced Links | Page-level link collections in lists, tiles, descriptions, image gallery, or directory styles. | Use manual links or a SharePoint list with Title and URL columns. |
| Site Directory | Search and browse SharePoint sites. | Uses SharePoint Search with contentclass:STS_Site; no directory list is required. |
| Site Directory Favourites | Show sites users saved from Site Directory. | Add the web part where users need quick access to saved sites. |
| Favourite Sites | Shared featured sites from a SharePoint list. | Create a Site Directory-style list and use a Showcase column/value such as Favorite. |
Important distinction: Page-level navigation web parts are not the same as the site-wide Mega Menu extension. Use Advanced Links or Favourite Sites inside a page section. Use Mega Menu when the navigation must run in the header across the site.
People web parts
| Web part | Use it when | First setup check |
|---|---|---|
| Employee Directory | Organization-wide employee search with A-Z filter, dropdown filters, sorting, and card/list views. | Use Auto-detect result source first; approve Graph permissions if Graph fallback is required. |
| People Listing | Curated team rosters or directory-powered people lists. | Use People Search mode for live directory results, or SharePoint List mode with a Person/Group column. |
| Locations | Office locations with address, contact details, images, and directions. | Create a Locations list; Title is required, and address/contact fields are optional. |
Decision tip: Use Employee Directory when the user should search the whole organization. Use People Listing when you want a curated team, department, or external-contact roster.
Utility web parts
| Web part | Use it when | First setup check |
|---|---|---|
| Theme Manager | Site owners need to preview and save Bonzai colors, dark mode, Mega Menu branding, Footer branding, Slider branding, and shared navigation settings. | Place it on the homepage or admin page, keep Show in Edit Mode Only on, and enable site-wide persistence when the theme should apply to all users. |
Troubleshooting web part configuration
| Symptom | Likely cause | How to fix it |
|---|---|---|
| The web part is empty | The source list, library, page metadata, filter value, or view does not match the property pane configuration. | Temporarily remove filters, choose the default source list, and confirm at least one source item is published or visible to the current user. |
| Dropdowns in the property pane are empty | The selected site or list is inaccessible, missing, or does not contain the expected field type. | Confirm permissions, reselect the site, and verify the column exists with the expected SharePoint type. |
| Targeted content is not filtering | The web part expects a SharePoint group name in the targeting column, and the current user is not a member of that group. | Populate the TargetAudience column with the exact SharePoint group name or leave it empty for items that everyone should see. |
| Search-based components return no results | SharePoint Search has not indexed the content yet or the result source/scope is too narrow. | Wait for indexing, test a broader scope, and verify the current user can find the item in SharePoint search. |
| Links open in the wrong place | The source list is missing the URL field or the OpenInNewTab-style column is not populated as expected. | Populate URL fields consistently and use Yes/No fields for new-tab behavior where the web part supports them. |
If a web part still fails after these checks, capture the page URL, web part name, source list or library name, property pane screenshots, browser console errors, and one example item that should appear but does not, and Contact Bonzai Support.
Mimir
Comments