Web Parts
News Rollup
Display news articles with list, tile, or card templates, responsive layout controls, and pagination.
CommunicationFeature Parity: 90%
Get News Rollup Working in 3 Steps
10-20 minutes
Prerequisites
- Bonzai 2 package installed on your site
- Site Pages library with news articles
- News pages tagged with Showcase (or Featured) = "News Rollup"
- Required: Category field on Site Pages (prevents REST errors)
- Optional: Tags field if you want tag filters
1
Add the web part to your page
Edit the page, click the + button, and search for "News Rollup" in the Bonzai category.
2
Choose your data source
Select a site (picker or manual URL), choose your list, and set the Showcase value.
3
Configure display and publish
Pick a template, set items to show, 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
- Filter by tags or page type (News vs Page)
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:
Slider — rotating hero banner for featured newsPages Rollup — displaying any page type, not just newsSpotlight Rollup — highlighting specific people or achievements
Display Templates
News Rollup supports three display templates:
ListCompact rows with thumbnails — best for sidebars and narrow sections
TileGrid of image tiles — best for visual layouts with strong imagery
CardRich cards with metadata — best for detailed news with dates and comments
Recent Updates
- Search and filter UI (search box, tag filter, page type filter, date range).
- Showcase selector + tag multi-select in the property pane.
- Metadata toggles (date, category, tags, likes, comments, excerpt).
- Site picker, list picker, and title icon picker options.
Step-by-Step Configuration
1
Edit your SharePoint page
Navigate to the page where you want to add news. Click "Edit" in the top right corner to enter edit mode.
You can add News Rollup to any section layout — it works great in full-width, two-column, or three-column layouts.
2
Add the News Rollup web part
Click the + button in any section, type "News" in the search box, and select "Bonzai News Rollup" from the results.
3
Open the property pane
Click the pencil icon on the web part to open the property pane on the right side of the screen.
4
Set the title (optional)
Enter a descriptive title like "Company News" or "Latest Updates". Leave it blank to hide the header row.
5
Choose a display template
Select from: List (compact rows), Tile (image grid), or Card (rich cards with metadata).
6
Select your site and list
Use Site Selection Mode (picker or manual URL), then choose the list with the List Picker.
7
Set Showcase value and tags
Choose the Showcase value (default: "News Rollup") and optionally pre-filter by tags.
8
Configure display options
Set Items to Show, tile/card size, max columns, and featured-first options for visual layouts.
9
Set metadata + filters
Toggle metadata (date, category, tags, likes, comments, excerpt) and enable Search/Filters if you want user-facing filters.
10
Save and publish
Click outside the property pane, then save and publish your page. Your news feed is now live!
Common Configurations
Copy these ready-to-use configurations for common scenarios:
Homepage News Feed
Main news display for your intranet homepage
Best for: Homepage, full-width section
Configuration
| Title | Company News |
| Display Template | List |
| Items to Show | 5 |
| Showcase Value | News Rollup |
| Show Date | On |
| Show Comments | On |
Department News
Filtered news for a specific department
Best for: Department pages, team sites
Configuration
| Title | HR News |
| Display Template | Card |
| Showcase Value | News Rollup |
| Filter Tags | HR, Benefits |
| Enable Filters | On |
| Items to Show | 6 |
| Category | HR (required field on Site Pages) |
Compact Sidebar Widget
Small news list for sidebar placement
Best for: Sidebar columns, narrow sections
Configuration
| Title | Latest News |
| Display Template | List |
| Items to Show | 3 |
| Fixed Height | 300 |
| Show Excerpt | Off |
| Show Tags | Off |
News Archive (Paged)
Full news listing with pagination
Best for: News center landing page
Configuration
| Title | All News |
| Display Template | Tile |
| Items to Show | 10 |
| Enable Search | On |
| Enable Filters | On |
Best Practices
Curate with the Showcase value
Set the Showcase (or Featured) field on pages to News Rollup so only curated items appear.
Optimize images for faster loading
Use images sized around 1200x630 pixels for news articles. Larger images slow down page load times, especially when displaying multiple articles.
Use tags and filters intentionally
Add tags to your pages and enable Filters so users can narrow results by tag or page type.
Category is required
The News Rollup REST queries expect a Category field on Site Pages. Add the Category column to avoid 400 errors. Tags are optional and only used for tag filters.
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). Use these columns to avoid REST errors and ensure news metadata displays correctly:
- Create or use the Site Pages library on the source site.
- Add a Category column (Choice) — this is required.
- Add a Showcase column (Choice or Single line of text) and set value News Rollup on news pages.
- Optional: add a Tags/Enterprise Keywords field for tag filters.
- 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/thumbnail for tiles and cards |
| Showcase | Choice or Text | Yes | Set to News Rollup (Featured/PromotedState also supported) |
| Category | Choice | Yes | Required to avoid REST 400 errors |
| Tags | Managed Metadata | No | Enterprise Keywords / Tags for filters |
| Description | Multiple lines | No | Used for excerpts in Card template |
Property Pane Configuration
| Property | Type | Required | Description |
|---|---|---|---|
title | Text | No | Web part title (blank hides header row) |
titleIconOption | Dropdown | No | Title icon mode: Custom or None |
titleIconName | Icon Picker | No | Fluent UI icon for the header |
titleIconUrl | Text | No | Custom icon URL (overrides icon name) |
titleUrl | Text | No | Optional title link URL |
siteUrlMode | Dropdown | No | Pick a site or enter a manual URL |
selectedSites | Site Picker | No | Selected site when using Site Picker |
siteUrl | Text | No | Manual site URL when Site Selection Mode = manual |
listId | List Picker | No | Source list (Site Pages) from the selected site |
showcaseValue | Dropdown | No | Showcase/Featured value used to include items (default: News Rollup) |
selectedTags | Multi-select | No | Pre-filter by tags (optional) |
displayTemplate | Dropdown | No | List, Tile, or Card (default: "List") |
tileScale | Slider (60-140) | No | Tile size scale for Tile template (percent) |
tileMaxColumns | Slider (1-4) | No | Max tiles per row for Tile template |
enableFeaturedTile | Toggle | No | Make the first tile featured (Tile template) |
cardScale | Slider (60-140) | No | Card size scale for Card template (percent) |
cardMaxColumns | Slider (1-4) | No | Max cards per row for Card template |
enableFeaturedCard | Toggle | No | Make the first card featured (Card template) |
maxNewsToShow | Slider (1-20) | No | Items to show per page (pagination appears when more exist) |
fixedHeight | Slider (0-1000) | No | Fixed height in pixels. 0 = auto height. |
showDate | Toggle | No | Show published/modified date |
showCategory | Toggle | No | Show Category label when the field exists |
showTags | Toggle | No | Show tags when available |
showExcerpt | Toggle | No | Show excerpt/description on cards |
showLikes | Toggle | No | Show likes count when available |
showComments | Toggle | No | Show comments count when available |
enableSearch | Toggle | No | Show search box |
enableFilters | Toggle | No | Show filter controls (tags, page type, date range) |
showPromotedItems | Toggle | No | Legacy toggle; Showcase value controls curation |
Data Source
News Rollup reads from the Site Pages library. The web part tries multiple list name variations: SitePages, Site Pages, Pages. Articles should be created as SharePoint pages with:
- Title: Article headline
- Banner Image: Featured image for the article
- Showcase/Featured: Set to News Rollup for items to appear
- Category: Required field (prevents REST errors and enables category metadata)
- Tags: Optional field for tag filters
- Author: Article author
- First Published: Publication date
- PromotedState: Used to infer page type (News vs Page)
Features Checklist
- ✅ Three display templates (List, Tile, Card)
- ✅ Showcase-based curation + optional tag pre-filter
- ✅ Search and filter UI (search, tags, page type, date range)
- ✅ Metadata toggles (date, category, tags, likes, comments, excerpt)
- ✅ Pagination based on Items to Show
- ✅ Fixed height option
- ✅ Cross-site news aggregation
- ✅ Responsive design
- ✅ Tile and card layout controls (scale, max columns, featured first)
- ✅ Theme Manager integration
Migration from Classic Bonzai
| Classic Feature | Modern Equivalent | Notes |
|---|---|---|
| Display templates | displayTemplate dropdown | 3 templates: List, Tile, Card |
| Showcase + Tags | Showcase value + tag filters | Showcase marks items; tags refine filters |
| View name text field | Showcase + filters | Legacy viewName is retained but not used |
| Brick theme colors | Theme Manager web part | CSS custom properties |