B
Bonzai 2
Web Parts

Spotlight Rollup

Feature employees or content with image-focused card or image layouts, supporting comments and likes.

ContentFeature Parity: 95%

Get Spotlight Rollup Working in 3 Steps

10-20 minutes

Prerequisites

  • Bonzai 2 package installed on your site
  • Site Pages or a custom list with banner images
1

Create spotlight content

Create Site Pages with banner images. Optionally create a filtered view for spotlight items.

2

Add Spotlight Rollup to your page

Edit the page, click +, search for "Spotlight Rollup", and add it.

3

Configure and publish

Select your list, choose a view to filter, set template (Card or Image), and publish.

When to Use This Web Part

Use this when you need to...

  • Highlight employee achievements and recognitions
  • Feature team members or new hires
  • Showcase special projects or initiatives
  • Create a "Featured" section on your homepage
  • Display promotional content with large images

Best page locations

  • Homepage — featured content hero section
  • About Us page — team highlights
  • Recognition page — employee of the month
  • Project pages — showcasing achievements

Consider alternatives when...

  • News articles — use News Rollup
  • Generic page listings — use Pages Rollup
  • Small profile grids — use People Listing

Related web parts:

News Rolluptime-based news contentPages Rollupgeneral page listingsPeople Listingteam member grid from a list

Recent Updates

  • Fixed: author name no longer shows as "Unknown" in card / image metadata when the rollup uses a saved SharePoint view. The Author value is now resolved across all three response shapes (REST expanded {Title}, RenderListDataAsStream array, and legacy id;#Name).
  • Fixed: edit-mode draft preview — the rollup now surfaces unpublished pages with a contextual badge (Draft, Pending approval, Rejected, Unpublished changes, Checked out) so authors can verify their page will appear before publishing. Readers continue to see only published items.
  • Fixed: saved view filters are now honoured — selecting a view in the View Picker correctly applies its <Where> and <OrderBy> clauses (previously the saved view's filter was silently overridden).
  • Fixed: View Picker no longer shows the unnamed _SPAssetFolderId grouping view from SharePoint.
  • Fixed: Show Promoted Only now returns an empty result (with a console warning) when the source list has no Showcase / Featured / PromotedState column — instead of silently showing every page.
  • Fixed: spotlight item links now correctly honour the Open in New Tab toggle (Card and Image templates) and bypass SharePoint's link interception (data-interception="off").
  • New: Date Field dropdown — pick which DateTime column drives the displayed date. Auto-populated from the source list's DateTime fields.
  • Internal: hardened service-side list resolution and saved-view query handling for cross-site rollups.
  • Image Source selector — choose between Banner Image (full-resolution hero) or Thumbnail (auto-generated preview).
  • Combined engagement toggle — a single Show likes & comments toggle replaces the separate comment/like toggles.
  • Show Metadata toggle with full date format customization (text vs numeric, month format, year display, separator, order).
  • Disable Pagination option to show all items (up to 500) at once.
  • Unpublished pages are now hidden from readers — drafts, pending, denied and folders never render in view mode, even on misconfigured lists or views.
  • Bonzai Page Banner override image — if a page contains a Bonzai Page Banner web part with an override image URL, that image is used in preference to the banner thumbnail.
  • Image selection prefers higher-resolution page images to avoid low-res thumbnails.

Step-by-Step Configuration

1

Create spotlight content pages

Go to Site Pages and create pages for each spotlight item. Add banner images and publish the pages (drafts will not appear).

Use high-resolution banner images. The web part prefers full-size images over generated thumbnails.

2

Create a view for filtering (optional)

Create a SharePoint view in Site Pages to filter spotlight items (e.g., by Category). The view's filter is honored; unpublished pages are still hidden automatically.
3

Add the web part to your page

Edit your target page (e.g., homepage), click +, and add "Bonzai Spotlight Rollup".
4

Configure the data source

In the Data Source group, use the Site Picker (or switch to Manual URL) to target a site, then select your list (e.g., Site Pages) and optionally a view.
5

Choose a template and image source

Pick "Card (Grid)" for a uniform grid or "Image (Hero)" for a large hero plus smaller cards. Choose Banner Image for full-resolution or Thumbnail for a lighter auto-preview.
6

Set items per page and row

Set Items Per Page (1–20, typically 3–6 for a homepage). Items Per Row can be 1 to min(10, Items Per Page) and only applies to the Card template.
7

Configure engagement and metadata

Toggle "Show metadata" to display author and date, and "Show likes & comments" to display engagement counts. Customize date format (text/numeric, month, year, separator) when metadata is on.
8

Enable promoted filtering (optional)

Toggle "Show promoted items only" to feature items tagged as Spotlight. Requires a showcase/promoted column on the list (see Reference for supported field names).
9

Publish

Save and publish the page. Spotlight items should appear with images, pagination, and (optionally) a Show More link.

Common Configurations

Homepage Feature

Large spotlight cards for the homepage

Best for: Homepage hero section
Configuration
titleFeatured
listNameSite Pages
templateNamecard
imageSourceBannerImage
itemsPerPage3
itemsPerRow3
chromeTypenone

Employee Recognition

Hero + secondary grid with promoted filtering

Best for: Recognition/HR pages
Configuration
titleEmployee Spotlight
templateNameimage
itemsPerPage5
showPromotedOnlyOn
showEngagementOn

Team Highlights

Clean team grid without engagement counts

Best for: About Us page
Configuration
titleOur Team
templateNamecard
itemsPerPage6
itemsPerRow3
showEngagementOff
showMetadataOff

Featured Projects

Paginated showcase with all items visible

Best for: Portfolio pages
Configuration
titleFeatured Projects
templateNamecard
disablePaginationOn
itemsPerRow2
sortBycreated

Best Practices

Use high-resolution banner images

Spotlight prefers full-resolution images — the web part explicitly down-ranks low-resolution getpreview.ashx URLs (under ~800px) and generic SharePoint placeholder thumbnails. Upload the largest version of each image you have; the web part will render it and its own CSS handles sizing responsively.

Keep titles concise for the Image template

On the Image (Hero) template the title renders inside an overlay on top of the hero image. Short titles (3–5 words) read best; longer titles still work but may wrap.

Match Image Source to your workload

Use Banner Image when image fidelity matters (homepage heroes, recognition pages). Use Thumbnail when you are rendering many items and want the faster, pre-generated thumbnails served by the SitePages API.

Rotate featured content regularly

Update your spotlight content weekly or monthly to keep the homepage fresh and engaging.

Use edit mode to preview unpublished items

When you edit a page, the rollup surfaces draft / pending / rejected / unpublished-changes / checked-out items with a contextual badge so you can confirm your page will appear before publishing. Switch out of edit mode to see exactly what readers will see — readers never see unpublished items.

Troubleshooting

Still need help? Contact Bonzai Support


Reference

Site Pages Schema

Spotlight Rollup reads from a selected list (commonly Site Pages). If no list is selected the web part renders a "Please configure" message and returns no items. Pages are read via the standard SharePoint REST API (or RenderListDataAsStream when a view is selected).

Published content only: drafts, pending/denied items, minor versions, checked-out pages and folders are always excluded — both in the server $filter and with a defense-in-depth client-side filter. This applies even when a SharePoint view is used.

Showcase column is only needed for 'Show Promoted Only'

If you enable Show promoted items only, the web part auto-discovers a tagging column on the selected list. It checks for these internal names, in order: Showcase, Featured_x003f_, Featured?, Featured, PromotedState. When the field is PromotedState (number), it filters to PromotedState ≥ 1. For the other text/choice fields, items must equal Spotlight. If no tagging column is found, the toggle is ignored and all items display.
ColumnTypeRequiredNotes
TitleSingle line of textYesDefault column shown in the card/hero title
DescriptionSingle line of textNoShown under the title on the Card template (HTML is stripped, truncated to 200 chars)
BannerImageUrlHyperlink / ImageNoPrimary source for card/image artwork. If absent, the web part falls back to CanvasContent1 imageSources and _PublishingRollupImage, then the page preview endpoint.
CategoryChoice or TextNoDisplayed as a pill on the card/hero
Showcase (or Featured?, PromotedState)Choice / Text / NumberOnly for promoted filteringSee auto-discovery note above
AuthorPerson (default)NoShown in metadata when "Show metadata" is on
Modified / CreatedDate (default)NoUsed for sorting and the metadata date

Image resolution order

When Image Source is Banner Image, the service picks the best available URL in this order (higher-resolution wins, placeholders are rejected):

  1. Bonzai Page Banner override image — if the page contains a Bonzai Page Banner web part with a configured overrideImageUrl in its CanvasContent1, that URL is used first.
  2. BannerImageUrl field (URL or Description).
  3. CanvasContent1 imageSources parsed from the page JSON.
  4. Inline <img> tags inside CanvasContent1.
  5. _PublishingRollupImage (classic publishing metadata).
  6. Fallback: SharePoint's getpreview.ashx rendered at size=xl.

When Image Source is Thumbnail, the web part calls /_api/sitepages/pages/GetById(<id>) per item and uses the BannerThumbnailUrl. Generic placeholder thumbnails are ignored and the banner fallback is used instead.

Property Pane Configuration

Title Settings

PropertyTypeDescription
titleTextWeb part title displayed above the content
titleUrlTextOptional URL to make the title clickable
titleIconOptionDropdownTitle icon mode: Custom or None
titleIconNameIcon PickerFluent UI icon picker (default: Lightbulb)
titleIconUrlTextCustom icon URL (overrides icon name)
descriptionText (Multiline)Optional description below the title
showMoreTextTextText for the "Show More" link (default: See all)
showMoreUrlTextURL for the "Show More" link (empty = hidden)

Data Source Settings

PropertyTypeDescription
siteUrlModeDropdownSite selection mode: picker (Pick a site) or manual (Manual URL). Default: picker.
selectedSitesSite PickerSites chosen from the picker (single-select). When set, its URL overrides siteUrl.
siteUrlTextManual site URL (used when mode = manual). Leave empty to use the current site.
listNameList PickerSource list scoped to the selected site (e.g., Site Pages). Stored as an object with list id, title, and url.
viewNameView PickerView to filter items. Disabled until a list is selected. Changing the list clears the view.
showPromotedOnlyToggleShow only items tagged as Spotlight (or PromotedState ≥ 1). Default: Off. See Schema for supported fields.
sortByDropdownSort by: modified (default, desc), created (desc), or title (asc).

Display Settings

PropertyTypeDescription
templateNameDropdowncard (Card / Grid, default) or image (Image / Hero — first item as a large hero with overlay, remaining items as a secondary card grid).
imageSourceDropdownBannerImage (full-resolution hero, default) or Thumbnail (auto-generated preview from SitePages).
disablePaginationToggleWhen On, the pager is hidden and up to 500 items load at once. Items Per Page is disabled.
itemsPerPageSlider (1–20)Items per page. Default: 6. Also adjustable via −1 / +1 command buttons.
itemsPerRowDropdownItems per row from 1 to min(10, itemsPerPage). Default: 3. Disabled for the Image template.
showMetadataToggleShow author and modified date under the title (or on the hero overlay). Default: On.
dateStyleChoiceWhen metadata is on: text (April 9, 2026) or numeric (09/04/2026). Default: text.
dateMonthFormatDropdownText style only: long (April) or short (Apr).
dateShowYearToggleText style only: show the year. Default: On.
dateOrderDropdownNumeric style only: DMY (default), MDY, or YMD.
dateSeparatorDropdownNumeric style only: /, -, or ..
openInNewTabToggleOpen spotlight items in a new browser tab (default: Off). Honoured by both Card and Image templates and combined with data-interception="off" so SharePoint's link interceptor doesn't hijack navigation.
dateFieldNameDropdownWhich date to render in the metadata row. Defaults to Auto; the dropdown is auto-populated with FirstPublishedDate, Created, Modified, plus any non-hidden DateTime column discovered on the source list.
dateYearDigitsDropdownNumeric style only: 4 (2026) or 2 (26).
showEngagementToggleShow comment and like counts (combined toggle). Default: On. Drives both showComments and showLikes under the hood.
fixedHeightSlider (0–800, step 50)Fixed container height in pixels (scroll overflow). 0 = auto height.
chromeTypeDropdownnone, titleOnly, borderOnly, or titleAndBorder (default).

Deprecated properties

showComments and showLikes remain on the web part properties for backward compatibility, but both are now driven by showEngagement and are no longer exposed as separate toggles in the property pane. enableContentTargeting is also present on the properties interface but is not wired up yet (reserved for a future release) and is always ignored.

Behavior notes

  • Navigation: clicking a card or hero navigates to the page via window.location.href (same tab). Keyboard Enter / Space also activates.
  • Title / Show More links: both open in a new tab with data-interception="off".
  • Pagination: chevron-based (previous / next). Hidden when total pages ≤ 1 and no next link is reported.
  • Engagement counts: loaded lazily per item from /Comments and /likedBy endpoints on the selected list, and cached in-memory per item.
  • Image template layout: first item renders as a full hero with an overlay (category, title, author, date, engagement); remaining items render as smaller cards in a secondary grid.

Features Checklist

  • ✅ Card (Grid) and Image (Hero + secondary grid) templates
  • ✅ Image Source selector — Banner Image (full-res) vs Thumbnail
  • ✅ Bonzai Page Banner override image URL detection
  • ✅ Higher-resolution image preference (getpreview.ashx at size=xl fallback)
  • ✅ Cross-site data source via Site Picker or manual URL
  • ✅ List and View pickers (view is rescoped to selected list)
  • ✅ Published-only safety filter (drafts, pending, denied, minor versions and folders hidden)
  • ✅ Auto-discovery of promoted tagging column (Showcase / Featured? / PromotedState / …)
  • ✅ Sort by Modified (default), Created, or Title
  • ✅ Configurable pagination (chevron pager) or "show all" mode
  • ✅ Show metadata (author + date) with full date format customization
  • ✅ Combined engagement toggle (likes + comments), lazy-loaded and cached
  • ✅ Image overlay on hero (category, title, author, date, engagement)
  • ✅ Custom title with Fluent icon or image URL, optional clickable Title URL
  • ✅ Show More link (hidden when URL is empty)
  • ✅ Fixed container height with scroll (0 = auto)
  • ✅ Chrome type: none / title only / border only / title and border
  • ⏳ Content targeting — property reserved but not wired up yet