Spotlight Rollup
Feature employees or content with image-focused card or image layouts, supporting comments and likes.
Get Spotlight Rollup Working in 3 Steps
Prerequisites
- Bonzai 2 package installed on your site
- Site Pages or a custom list with banner images
Create spotlight content
Create Site Pages with banner images. Optionally create a filtered view for spotlight items.
Add Spotlight Rollup to your page
Edit the page, click +, search for "Spotlight Rollup", and add it.
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:
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},RenderListDataAsStreamarray, and legacyid;#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
_SPAssetFolderIdgrouping 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 & commentstoggle 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
Create spotlight content pages
Use high-resolution banner images. The web part prefers full-size images over generated thumbnails.
Create a view for filtering (optional)
Add the web part to your page
Configure the data source
Choose a template and image source
Set items per page and row
Configure engagement and metadata
Enable promoted filtering (optional)
Publish
Common Configurations
Homepage Feature
Large spotlight cards for the homepage
| title | Featured |
| listName | Site Pages |
| templateName | card |
| imageSource | BannerImage |
| itemsPerPage | 3 |
| itemsPerRow | 3 |
| chromeType | none |
Employee Recognition
Hero + secondary grid with promoted filtering
| title | Employee Spotlight |
| templateName | image |
| itemsPerPage | 5 |
| showPromotedOnly | On |
| showEngagement | On |
Team Highlights
Clean team grid without engagement counts
| title | Our Team |
| templateName | card |
| itemsPerPage | 6 |
| itemsPerRow | 3 |
| showEngagement | Off |
| showMetadata | Off |
Featured Projects
Paginated showcase with all items visible
| title | Featured Projects |
| templateName | card |
| disablePagination | On |
| itemsPerRow | 2 |
| sortBy | created |
Best Practices
Use high-resolution banner images
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
Match Image Source to your workload
Rotate featured content regularly
Use edit mode to preview unpublished items
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'
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.| Column | Type | Required | Notes |
|---|---|---|---|
| Title | Single line of text | Yes | Default column shown in the card/hero title |
| Description | Single line of text | No | Shown under the title on the Card template (HTML is stripped, truncated to 200 chars) |
| BannerImageUrl | Hyperlink / Image | No | Primary source for card/image artwork. If absent, the web part falls back to CanvasContent1 imageSources and _PublishingRollupImage, then the page preview endpoint. |
| Category | Choice or Text | No | Displayed as a pill on the card/hero |
| Showcase (or Featured?, PromotedState) | Choice / Text / Number | Only for promoted filtering | See auto-discovery note above |
| Author | Person (default) | No | Shown in metadata when "Show metadata" is on |
| Modified / Created | Date (default) | No | Used 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):
- Bonzai Page Banner override image — if the page contains a Bonzai Page Banner web part with a configured
overrideImageUrlin itsCanvasContent1, that URL is used first. - BannerImageUrl field (URL or Description).
- CanvasContent1 imageSources parsed from the page JSON.
- Inline
<img>tags inside CanvasContent1. - _PublishingRollupImage (classic publishing metadata).
- Fallback: SharePoint's
getpreview.ashxrendered atsize=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
| Property | Type | Description |
|---|---|---|
title | Text | Web part title displayed above the content |
titleUrl | Text | Optional URL to make the title clickable |
titleIconOption | Dropdown | Title icon mode: Custom or None |
titleIconName | Icon Picker | Fluent UI icon picker (default: Lightbulb) |
titleIconUrl | Text | Custom icon URL (overrides icon name) |
description | Text (Multiline) | Optional description below the title |
showMoreText | Text | Text for the "Show More" link (default: See all) |
showMoreUrl | Text | URL for the "Show More" link (empty = hidden) |
Data Source Settings
| Property | Type | Description |
|---|---|---|
siteUrlMode | Dropdown | Site selection mode: picker (Pick a site) or manual (Manual URL). Default: picker. |
selectedSites | Site Picker | Sites chosen from the picker (single-select). When set, its URL overrides siteUrl. |
siteUrl | Text | Manual site URL (used when mode = manual). Leave empty to use the current site. |
listName | List Picker | Source list scoped to the selected site (e.g., Site Pages). Stored as an object with list id, title, and url. |
viewName | View Picker | View to filter items. Disabled until a list is selected. Changing the list clears the view. |
showPromotedOnly | Toggle | Show only items tagged as Spotlight (or PromotedState ≥ 1). Default: Off. See Schema for supported fields. |
sortBy | Dropdown | Sort by: modified (default, desc), created (desc), or title (asc). |
Display Settings
| Property | Type | Description |
|---|---|---|
templateName | Dropdown | card (Card / Grid, default) or image (Image / Hero — first item as a large hero with overlay, remaining items as a secondary card grid). |
imageSource | Dropdown | BannerImage (full-resolution hero, default) or Thumbnail (auto-generated preview from SitePages). |
disablePagination | Toggle | When On, the pager is hidden and up to 500 items load at once. Items Per Page is disabled. |
itemsPerPage | Slider (1–20) | Items per page. Default: 6. Also adjustable via −1 / +1 command buttons. |
itemsPerRow | Dropdown | Items per row from 1 to min(10, itemsPerPage). Default: 3. Disabled for the Image template. |
showMetadata | Toggle | Show author and modified date under the title (or on the hero overlay). Default: On. |
dateStyle | Choice | When metadata is on: text (April 9, 2026) or numeric (09/04/2026). Default: text. |
dateMonthFormat | Dropdown | Text style only: long (April) or short (Apr). |
dateShowYear | Toggle | Text style only: show the year. Default: On. |
dateOrder | Dropdown | Numeric style only: DMY (default), MDY, or YMD. |
dateSeparator | Dropdown | Numeric style only: /, -, or .. |
openInNewTab | Toggle | Open 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. |
dateFieldName | Dropdown | Which 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. |
dateYearDigits | Dropdown | Numeric style only: 4 (2026) or 2 (26). |
showEngagement | Toggle | Show comment and like counts (combined toggle). Default: On. Drives both showComments and showLikes under the hood. |
fixedHeight | Slider (0–800, step 50) | Fixed container height in pixels (scroll overflow). 0 = auto height. |
chromeType | Dropdown | none, 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
/Commentsand/likedByendpoints 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