Bonzai 2 - Modern SharePoint Intranet

Three sidebar web parts that display Related Links, Contacts, and Tags from the current page's metadata. The Spotlight variant also renders a featured contact card at the top. Add the matching sidebar to a narrow column next to your main content.

CommunicationNew

Get a Sidebar Working in 3 Steps

5-10 minutes

Prerequisites

Bonzai 2 package installed on your site
Page columns configured on the Site Pages library (Related Links, Contacts, Tags)

Add a narrow column

Edit the page and add a two-column section. Use the narrow right column for the sidebar.

Add the matching sidebar web part

Click + in the narrow column, search for "Bonzai News Sidebar", "Bonzai Event Sidebar", or "Bonzai Spotlight Sidebar", and add it.

Toggle sections, choose contact fields, and publish

Open the property pane. Toggle whole sections (Spotlight / Related Links / Contacts / Tags) under Sections, and choose which contact fields (job title, email, office, phone) appear on each card. Publish the page.

When to Use This Web Part

Use this when you need to...

Show related links alongside a news article
Display contact people on an event page
Show tags/keywords next to spotlight content

Best page locations

News pages — related links + author contacts
Event pages — organizer contacts + related links
Spotlight pages — featured person card with rich details, plus related links, contacts, and tags

Consider alternatives when...

• Standalone navigation — use Advanced Links
• Full employee directory — use Employee Directory
• Document lists — use Documents Rollup

Related web parts:

Advanced Links — curated link lists not driven by page metadataPage Banner — hero banner with engagement actions instead of a sidebar

Recent Updates

Bonzai Spotlight Sidebar: Contacts section is now opt-in (default Off) and exposed as an explicit Show Contacts section toggle in the property pane, placed directly under Show Spotlight. Use the two toggles together to render the hero card only, both, or neither. The toggle is labelled “Show Contacts section (separate list below Spotlight)” so it's clear it controls the duplicate Contacts list — the Spotlight hero card's own email / phone are still controlled separately by showSpotlightEmail, showSpotlightPhone, etc. Other sidebars are unaffected (News / Event sidebars keep Show Contacts opt-out, default On).
Web part description updated for the Spotlight variant: “Sidebar for Spotlight Page: Spotlight card, Related Links, optional Contacts list, Tags.”

Which Sidebar to Use

Each sidebar variant reads from different list columns on the Site Pages library:

Sidebar	Related Link Columns	Contacts Column	Tags Column
Bonzai News Sidebar	`OwlNewsPageRL1` – `OwlNewsPageRL6`	`OwlNewsPageContacts`	`OwlTags`
Bonzai Event Sidebar	`OwlEventPageRL1` – `OwlEventPageRL6`	`OwlEventPageContacts`	`OwlTags`
Bonzai Spotlight Sidebar	`OwlSpotlightPageRL1` – `OwlSpotlightPageRL6`	`OwlSpotlightPageContacts`	`OwlTags`

Columns are auto-discovered

The sidebar queries the list schema to find which of its expected columns actually exist. If a column is missing, that section is silently hidden — no errors. The same column is then used for both the item fetch and (on the Spotlight variant) the Spotlight card.

Spotlight variant has one extra section

On top of Related Links, Contacts, and Tags, the Spotlight Sidebar also renders a featured Spotlight card above Related Links. It reuses theOwlSpotlightPageContacts people and shows them as emphasized cards with job title, email, and office. Each toggle group in the property pane (Sections, Spotlight card details, Contact card details) controls this independently from the Contacts section below.

Sidebar Sections

Section order on News and Event: Related Links → Contacts → Tags. On Spotlight: Spotlight → Related Links → Contacts → Tags. Sections are separated by a thin rule and any section with no data is hidden automatically.

SpotlightSpotlight variant onlyEmphasized card rendered above Related Links. Avatar, name, plus individually togglable job title, email, office, and phone.

Related LinksUp to 6 Hyperlink columns per page. Each link shows its Description field, or a friendly hostname/first-segment fallback when the description is empty or equals the URL.

ContactsPerson/Group column. Always shows avatar + name. Job title, email, office, and phone are independently toggleable in the property pane and read from each user's SharePoint profile.

TagsManaged Metadata column. Tags display as pills with leading "#" stripped.

Required List Columns

Add these columns to your Site Pages library. Use the column names that match the sidebar variant you're deploying (see the table above). All columns are optional — the sidebar only renders sections for columns that exist and have data.

Column Type	SharePoint Type	Notes
Related Link (RL1–RL6)	Hyperlink	URL + Description. Up to 6 per page.
Contacts	Person or Group (multi-value)	People picker. Profiles are resolved via REST.
Tags	Managed Metadata (multi-value)	Term Store tags. The column name is `OwlTags` for all three variants.

Start with one section

You don't need all three sections from day one. Add the Related Link columns first, enable only that section, and add Contacts/Tags later as your content matures.

Troubleshooting

Still need help? Contact Bonzai Support

Reference

Property Pane

The property pane is grouped into up to three sections. News and Event sidebars show Sections and Contact card details. The Spotlight Sidebar adds a third group, Spotlight card details, for the featured card at the top.

Sections

Property	Type	Applies to	Default	Description
`showSectionHeadings`	Toggle	All	On	Show or hide every section heading (Spotlight, Related Links, Contacts, Tags)
`showSpotlight`	Toggle	Spotlight only	On	Show or hide the featured Spotlight card
`showRelatedLinks`	Toggle	All	On	Show or hide the Related Links section
`showContacts`	Toggle	All	On (News/Event), Off (Spotlight)	Show or hide the Contacts section (the duplicate list below the Spotlight card on the Spotlight Sidebar). Labelled “Show Contacts section (separate list below Spotlight)” in the property pane on the Spotlight variant. The Spotlight hero card's own email / phone are controlled by the Spotlight card detail toggles instead.
`showTags`	Toggle	All	On	Show or hide the Tags section

Spotlight card details (Spotlight Sidebar only)

Property	Type	Default	Description
`showSpotlightJobTitle`	Toggle	On	Show job title on the Spotlight card
`showSpotlightEmail`	Toggle	On	Show email (mailto link) on the Spotlight card
`showSpotlightOffice`	Toggle	On	Show office / location on the Spotlight card
`showSpotlightPhone`	Toggle	Off	Show work or cell phone (tel link) on the Spotlight card

Contact card details

Controls which fields appear on each card in the Contacts section. Defaults differ per variant so News and Event sidebars show a richer Contacts list out of the box, while the Spotlight Sidebar keeps Contacts minimal and puts the rich detail in the Spotlight card above.

Property	Type	News / Event default	Spotlight default
`showContactJobTitle`	Toggle	On	On
`showContactEmail`	Toggle	On	Off
`showContactOffice`	Toggle	On	Off
`showContactPhone`	Toggle	Off	Off

Features Checklist

Up to 6 related links per page, with a friendly hostname/first-segment fallback when the description is empty or matches the URL
Contact avatars with photo fallback to coloured initials (deterministic colour per person)
Rich Spotlight card above Related Links on the Spotlight Sidebar
Managed Metadata tag pills with leading # stripped
Per-section toggles (Spotlight, Related Links, Contacts, Tags) and per-field toggles for contact detail rows (job title, email, office, phone)
Automatic field discovery via a targeted $filter query that handles hidden Person/Group and Managed Metadata fields — missing columns are silently hidden
Profile details (job title, office, phone, photo) resolved from SharePoint user profiles via PeopleManager.GetPropertiesFor
Page ID resolved from pageContext.listItem with a fallback to the pageId URL query parameter
Error boundary prevents sidebar crashes from affecting the rest of the page
Responsive layout (names, titles, and tag pills wrap on viewports narrower than 480px)
Theme-aware styling (themePrimary link colour, neutralPrimary headings, neutralLighter tag pills) and LicenseWrapper integration

Sidebar (News / Event / Spotlight)