News Rollup
Display news articles with list, tile, card, or row templates — with search, filters, content targeting, responsive layout controls, and pagination.
Get News Rollup Working in 3 Steps
Prerequisites
- Bonzai 2 package installed on your site
- Site Pages library with published news articles
- News pages tagged with Showcase (or Featured) = "News Rollup" (default showcase value)
- Optional: Category column (Choice) on Site Pages for category filters
- Optional: Tags / Enterprise Keywords field for tag filters
Add the web part to your page
Edit the page, click the + button, and search for "News Rollup" in the Bonzai 2.0 category.
Choose your data source
Select a site (Site Picker or manual URL), choose your list, then pick a Showcase value, Categories, and/or Tags to pre-filter.
Configure display and publish
Pick a template (List, Tile, Card, or Row), set items per page, enable search/filters if needed, then publish.
When to Use This Web Part
Use this when you need to...
- Display company news and announcements on the homepage
- Show department-specific news on team pages
- Create a news archive or news center page
- Highlight curated news using a Showcase value
- Pre-filter by categories and/or tags in the property pane
- Target news to specific SharePoint groups (Content Targeting)
Best page locations
- Homepage — main news feed in prominent position
- Department landing pages — filtered by department category
- News center page — full archive with pagination
- Sidebar widget — compact list for secondary placement
Consider alternatives when...
- • You need to display events with dates and registration — use Events Rollup
- • You want to show documents or files — use Documents Rollup
- • You need a hero carousel — use Slider web part
Related web parts:
Display Templates
News Rollup supports four display templates:
Recent Updates
- New: Date Field control lets authors choose which DateTime column drives the displayed date. The dropdown is now dynamically populated from the source list's DateTime columns (in addition to the well-known FirstPublishedDate / Created / Modified options, plus Auto).
- New Row display template alongside List, Tile, and Card.
- New Category multi-select pre-filter in the property pane (alongside Tags).
- Full date format controls: text vs numeric, month long/short, year on/off, DMY/MDY/YMD order, separator, 4/2 digit year, with live preview.
- Appearance controls for container padding, border radius, fixed height, image fit, and image source (Banner Image vs Page Thumbnail).
- Card click behavior (content-only vs entire-card) and Open in new window toggle.
- Search box with an optional search button; page-type, category, tag, and date-range filter UI.
- Pagination toggle with explicit items-per-page and a total-items cap (Max News to Show).
- Metadata toggles for date, author, category, tags, views, URL, thumbnail, excerpt, likes, and comments.
- Site picker or manual URL, list picker, showcase dropdown (populated from list Choices), and title icon picker.
- Content Targeting using the TargetAudience column and the viewer's SharePoint groups.
Step-by-Step Configuration
Edit your SharePoint page
You can add News Rollup to any section layout — it works great in full-width, two-column, or three-column layouts.
Add the News Rollup web part
Open the property pane
Set the title (optional)
Choose a display template
Select your site and list
Set Showcase, Categories, and Tags
Configure layout & appearance
Toggle metadata + filters
Save and publish
Common Configurations
Copy these ready-to-use configurations for common scenarios:
Homepage News Feed
Main news display for your intranet homepage
| Title | Company News |
| Display Template | List |
| Max News to Show | 10 |
| Items per Page | 5 |
| Showcase Value | News Rollup |
| Show Date | On |
| Show Comments | On |
Department News
Filtered news for a specific department
| Title | HR News |
| Display Template | Card |
| Showcase Value | News Rollup |
| Categories (multi-select) | HR |
| Tags (multi-select) | Benefits, People |
| Enable Filters | On |
| Items per Page | 6 |
Compact Sidebar Widget
Small news list for sidebar placement
| Title | Latest News |
| Display Template | List |
| Items per Page | 3 |
| Fixed Height | 300 |
| Show Excerpt | Off |
| Show Tags | Off |
| Show Paging | Off |
News Archive (Paged)
Full news listing with pagination
| Title | All News |
| Display Template | Tile |
| Max News to Show | 50 |
| Items per Page | 10 |
| Enable Search | On |
| Enable Filters | On |
Horizontal News Row
Wide-format rows with category badges and metadata
| Title | Announcements |
| Display Template | Row |
| Items per Page | 4 |
| Show Category | On |
| Show Views | On |
| Image Source | BannerImage |
Targeted News (SharePoint Groups)
Only show items flagged for the viewer's SharePoint groups
| Display Template | Card |
| Showcase Value | News Rollup |
| Enable Content Targeting | On |
| TargetAudience column | Add as Single Line of Text on Site Pages |
| Items per Page | 4 |
Best Practices
Curate with the Showcase value
Optimize images for faster loading
BannerImage (default, reads BannerImageUrl and the Bonzai Page Banner override) or Thumbnail (reads BannerThumbnailUrl from the Pages API).Use categories and tags together
Date formatting is fully configurable
Content Targeting requires a TargetAudience column
TargetAudience column (Single Line of Text) on Site Pages. Items without a value pass through for everyone.Reference
Technical details for developers and advanced users.
Site Pages Schema
News Rollup reads from the Site Pages library and tries list name variations (Site Pages, SitePages, Pages). Only Showcase is strictly required when showcaseValue is set to a non-empty value; everything else is optional and is auto-discovered at runtime.
- Create or use the Site Pages library on the source site.
- Add a Showcase column (Choice or Single line of text) and set its value to News Rollup on pages you want to surface. Alternative column names Featured and PromotedState are also recognised.
- Optional: add Category (Choice) for Categories pre-filter and the user-facing Category filter.
- Optional: add Tags or use Enterprise Keywords / TaxCatchAll for tag filters.
- Optional: add TargetAudience (Single Line of Text with a SharePoint group name) if you plan to use Content Targeting.
- Create and publish news pages with a banner image.
| Column | Type | Required | Notes |
|---|---|---|---|
| Title | Single line of text | Yes | Default Site Pages column. |
| Banner Image | Image | No | BannerImageUrl for tiles and cards; overridden by Bonzai Page Banner's overrideImageUrl when present. |
| Showcase | Choice or Text | Only when showcaseValue is set | Value must match the Showcase Value dropdown (default "News Rollup"). Featured and PromotedState are also recognised. |
| Category | Choice | No | Used for Category pre-filter and the user-facing Category filter. |
| Tags | Managed Metadata / Enterprise Keywords | No | Used for tag pre-filters and the user-facing Tags filter. TaxCatchAll / owstaxidmetadataalltagsinfo also recognised. |
| TargetAudience | Single line of text | Only with Content Targeting | SharePoint group name; items without a value are visible to everyone. |
| Description | Multiple lines | No | Used for excerpts in Card / List templates. |
| _LikeCount / _CommentCount / ViewsLifeTime | System counters | No | Surfaced in the metadata row; falls back to the social APIs when fields are not populated. |
Property Pane Configuration
Properties are grouped into accordion sections in the property pane: Header, Data Source, Template & Layout, Pagination, Appearance, Content Visibility, Search & Filters, and Advanced.
Header
| Property | Type | Default | Description |
|---|---|---|---|
title | Text | "News" | Web part title. Leave blank to hide the header row entirely. |
titleIconOption | Dropdown | custom | Title icon mode: custom or none. |
titleIconName | Icon Picker | "News" | Fluent UI icon name for the header. |
titleIconUrl | Text | — | Custom icon URL (overrides titleIconName). |
titleUrl | Text | — | Optional URL that makes the title a hyperlink. |
Data Source
| Property | Type | Default | Description |
|---|---|---|---|
siteUrlMode | Dropdown | picker | picker uses the Site Picker; manual uses a text URL. |
selectedSites | Site Picker | [] | Selected site when siteUrlMode is picker (single-select). |
siteUrl | Text | — | Manual site URL when siteUrlMode is manual. Falls back to the current site. |
listId | List Picker | — | Source list (usually Site Pages) from the selected site. Also sets listName. |
showcaseValue | Dropdown | "News Rollup" | Choice value in the Showcase/Featured column used to include items. The special key __none__ means "show all pages" (no curation). |
selectedCategories | Multi-select | [] | Pre-filter by Category values. Populated from the list's Category column Choices. |
selectedTags | Multi-select | [] | Pre-filter by Tags / Enterprise Keywords. Populated from list items. |
Template & Layout
| Property | Type | Default | Description |
|---|---|---|---|
displayTemplate | Dropdown | "List" | One of List, Tile, Card, or Row. |
cardClickBehavior | Dropdown | entireCard | entireCard makes the whole card/tile clickable; contentOnly limits clicks to the title link. |
openInNewWindow | Toggle | Off | Open news links in a new browser tab. |
tileScale | Slider 60–140, step 5 | 100 | Tile size scale (percent) when displayTemplate = Tile. |
tileMaxColumns | Slider 1–4 | 2 | Max tiles per row (Tile template). |
enableFeaturedTile | Toggle | Off | Make the first tile featured (only applies with > 1 columns and > 1 items). |
cardScale | Slider 60–140, step 5 | 100 | Card size scale (percent) when displayTemplate = Card. |
cardMaxColumns | Slider 1–4 | 2 | Max cards per row (Card template). |
enableFeaturedCard | Toggle | Off | Make the first card featured (only applies with > 1 columns and > 1 items). |
Pagination
| Property | Type | Default | Description |
|---|---|---|---|
maxNewsToShow | Slider 1–50 | 10 | Hard cap on total items pulled from the list across all pages. |
openInNewTab | Toggle | No | Open news items in a new browser tab (default: Off) |
dateField | Dropdown | Auto | Which date to display. Dropdown auto-populated from the source list's /fields endpoint: starts with Auto, then the well-known FirstPublishedDate / Created / Modified, then any non-hidden, non-system DateTime column discovered on the list. |
showPaging | Toggle | On | Show pagination controls. When Off, the web part shows up to maxNewsToShow items in a single page. |
itemsPerPage | Slider 1–20 | 5 | Items per page when pagination is enabled (disabled control when showPaging is Off). |
Appearance
| Property | Type | Default | Description |
|---|---|---|---|
fixedHeight | Slider 0–1000, step 25 | 0 | Fixed container height in pixels. 0 = auto height. |
containerPadding | Slider 0–40, step 2 | 0 | Inner padding around the web part content in pixels. |
borderRadius | Slider 0–20 | 0 | Rounded-corner radius for the web part container in pixels. |
imageFit | Dropdown | cover | CSS object-fit: cover, contain, fill, none, or scale-down. |
imageSource | Dropdown | BannerImage | BannerImage uses the page's BannerImageUrl / Bonzai Page Banner override; Thumbnail uses BannerThumbnailUrl from the SharePoint Pages API. |
Content Visibility
| Property | Type | Default | Description |
|---|---|---|---|
showDate | Toggle | On | Show published / first-published / modified date. |
dateStyle | Choice group | text | text (e.g. "21 April 2026") or numeric (e.g. "21/04/2026"). Shown only when Show Date is On. |
dateMonthFormat | Dropdown | long | Text style month: long ("April") or short ("Apr"). |
dateShowYear | Toggle | On | Include year in text-style dates. |
dateOrder | Dropdown | DMY | Numeric order: DMY, MDY, or YMD. |
dateSeparator | Dropdown | / | Numeric separator: /, -, or .. |
dateYearDigits | Dropdown | 4 | Numeric year digits: 4 or 2. |
showAuthor | Toggle | On | Show "Published by {author}". |
showCategory | Toggle | On | Show Category label when the column exists. |
showTags | Toggle | Off | Show tag chips when tags are available. |
showViews | Toggle | On | Show the lifetime view count from the Search API. |
showUrl | Toggle | On | Show the page URL under the title (Row template). |
showThumbnail | Toggle | On | Show the article thumbnail/banner image. |
showExcerpt | Toggle | On | Show a short description / excerpt. |
showLikes | Toggle | On | Show like count (falls back to the likedByInformation endpoint when the field is not populated). |
showComments | Toggle | On | Show comment count (falls back to the Comments endpoint when the field is not populated). |
Search & Filters
| Property | Type | Default | Description |
|---|---|---|---|
enableSearch | Toggle | Off | Show a search box above the list. Searches title and excerpt (debounced, 400 ms). |
showSearchButton | Toggle | On | Show an explicit magnifier button next to the search box. |
enableFilters | Toggle | Off | Show end-user filter controls: Page Type, Category, Tags, Date From, Date To. |
showPromotedItems | Toggle | Off | Legacy toggle passed to the service. Showcase value is the primary curation mechanism. |
enableContentTargeting | Toggle | Off | Filter items by the viewer's SharePoint group memberships against a TargetAudience column on the list. |
Advanced
| Property | Type | Default | Description |
|---|---|---|---|
description | Multi-line Text | — | Optional description surfaced for documentation/authoring context. |
helpUrl | Text | — | Optional help URL link. |
viewName | Text | "" | Retained for backward compatibility; no longer used for filtering (Showcase + Categories/Tags replaced it). |
Data Source
News Rollup reads from the Site Pages library. Queries go to the SharePoint Search API first, then fall back to REST list queries which walk multiple list name variations: SitePages, Site Pages, Pages. Field names are auto-discovered from the list schema (Showcase / Featured / PromotedState, Category, Tags / Enterprise Keywords / TaxCatchAll, _LikeCount, _CommentCount, BannerImageUrl, TargetAudience). Only published pages are returned. Articles are rendered from SharePoint pages with:
- Title: Article headline (always shown).
- Banner Image: Image source depends on the
imageSourceproperty. WhenBannerImage, the web part readsBannerImageUrland the overrideImageUrl from the Bonzai Page Banner webpart inCanvasContent1, then falls back togetpreview.ashx. WhenThumbnail, it readsBannerThumbnailUrlfrom the Pages API. - Showcase / Featured: Set to the value picked in
showcaseValue(default "News Rollup") for items to appear. Pick "(None - show all pages)" to disable curation. - Category (optional): Choice column used for the Categories multi-select pre-filter and the user-facing Category filter.
- Tags (optional): Tags, Enterprise Keywords, or TaxCatchAll column used for the Tags pre-filter and the user-facing Tags filter.
- TargetAudience (optional): Single Line of Text column used by Content Targeting to match the viewer's SharePoint groups.
- Author: Page author (shown with "Published by").
- FirstPublishedDate / Created / Modified: Date shown in the metadata row.
- PromotedState: Used to infer page type (News vs Page) for the Page Type filter.
- _LikeCount / _CommentCount / ViewsLifeTime: Optional counts surfaced in the metadata row.
Features Checklist
- ✅ Four display templates (List, Tile, Card, Row)
- ✅ Showcase-based curation + Categories and Tags multi-select pre-filters
- ✅ Search box (with optional search button) and end-user filter bar (page type, category, tags, date range)
- ✅ Pagination with Max News to Show cap and Items per Page
- ✅ Full date formatting (text/numeric, month long/short, year, order, separator, digits) with live preview
- ✅ Metadata toggles (date, author, category, tags, views, URL, thumbnail, excerpt, likes, comments)
- ✅ Tile and card layout controls (scale, max columns, featured-first)
- ✅ Appearance controls (fixed height, container padding, border radius, image fit, image source)
- ✅ Card click behavior + Open in new window
- ✅ Cross-site news aggregation (Site Picker or manual URL, list picker)
- ✅ Content Targeting via TargetAudience column + viewer's SharePoint groups
- ✅ Search API first, REST fallback with field auto-discovery and cross-site list-name resolution
- ✅ Responsive grid with automatic column fitting
- ✅ Theme Manager integration
- ✅ Publish-safe: drafts and folders are excluded on both Search and REST paths
Migration from Classic Bonzai
| Classic Feature | Modern Equivalent | Notes |
|---|---|---|
| Display templates | displayTemplate dropdown | 4 templates: List, Tile, Card, Row |
| Showcase + Tags | Showcase value + Categories/Tags multi-selects | Showcase marks items; categories and tags refine filters in the property pane and at runtime. |
| View name text field | Showcase + filters | Legacy viewName is retained on the interface but no longer used for filtering. "TodayAndBeforeOtherNews" is migrated to an empty string automatically. |
| Audience targeting | enableContentTargeting + TargetAudience column | Matches the viewer's SharePoint group memberships client-side. |
| Brick theme colors | Theme Manager web part | CSS custom properties applied via loadBonzaiTheme() on init. |