B
Bonzai 2
Web Parts

News Rollup

Display news articles with list, tile, card, or row templates — with search, filters, content targeting, responsive layout controls, and pagination.

CommunicationFeature Parity: 100%

Get News Rollup Working in 3 Steps

10-20 minutes

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
1

Add the web part to your page

Edit the page, click the + button, and search for "News Rollup" in the Bonzai 2.0 category.

2

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.

3

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:

Sliderrotating hero banner for featured newsPages Rollupdisplaying any page type, not just newsSpotlight Rolluphighlighting specific people or achievements

Display Templates

News Rollup supports four display templates:

ListCompact text-only rows (date, title, category, tags, excerpt) — best for sidebars and narrow sections
TileGrid of image tiles — best for visual layouts with strong imagery (scale, columns, featured-first)
CardRich cards with metadata — best for detailed news with dates, excerpts, likes, and comments
RowFull-width horizontal rows — thumbnail on the right with title, category badge, tags, and footer metadata

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

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), Card (rich cards), or Row (full-width horizontal).
6

Select your site and list

Use Site Selection Mode (Site Picker or manual URL), then choose the list (usually Site Pages) with the List Picker.
7

Set Showcase, Categories, and Tags

Choose the Showcase value (default: "News Rollup") and optionally pre-filter by Categories and Tags multi-selects.
8

Configure layout & appearance

Set Items per page, Tile/Card scale and columns, featured-first options, container padding, border radius, fixed height, image fit, and image source.
9

Toggle metadata + filters

Toggle visibility (date, author, category, tags, views, URL, thumbnail, excerpt, likes, comments) and enable Search/Filters if you want user-facing controls.
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
TitleCompany News
Display TemplateList
Max News to Show10
Items per Page5
Showcase ValueNews Rollup
Show DateOn
Show CommentsOn

Department News

Filtered news for a specific department

Best for: Department pages, team sites
Configuration
TitleHR News
Display TemplateCard
Showcase ValueNews Rollup
Categories (multi-select)HR
Tags (multi-select)Benefits, People
Enable FiltersOn
Items per Page6

Compact Sidebar Widget

Small news list for sidebar placement

Best for: Sidebar columns, narrow sections
Configuration
TitleLatest News
Display TemplateList
Items per Page3
Fixed Height300
Show ExcerptOff
Show TagsOff
Show PagingOff

News Archive (Paged)

Full news listing with pagination

Best for: News center landing page
Configuration
TitleAll News
Display TemplateTile
Max News to Show50
Items per Page10
Enable SearchOn
Enable FiltersOn

Horizontal News Row

Wide-format rows with category badges and metadata

Best for: Mid-page announcements, full-width bands
Configuration
TitleAnnouncements
Display TemplateRow
Items per Page4
Show CategoryOn
Show ViewsOn
Image SourceBannerImage

Targeted News (SharePoint Groups)

Only show items flagged for the viewer's SharePoint groups

Best for: Role-specific content on shared pages
Configuration
Display TemplateCard
Showcase ValueNews Rollup
Enable Content TargetingOn
TargetAudience columnAdd as Single Line of Text on Site Pages
Items per Page4

Best Practices

Curate with the Showcase value

Set the Showcase (or Featured) column on pages to News Rollup so only curated items appear. The Showcase dropdown in the property pane is populated from the column's Choices; pick (None - show all pages) to skip curation.

Optimize images for faster loading

Use images sized around 1200x630 pixels for news articles. Image Source can be set to BannerImage (default, reads BannerImageUrl and the Bonzai Page Banner override) or Thumbnail (reads BannerThumbnailUrl from the Pages API).

Use categories and tags together

Add Category (Choice) and/or Tags / Enterprise Keywords columns to Site Pages, then use the Categories and Tags multi-selects in the property pane to pre-filter items. Enable Filters so end users can further narrow by tag, category, page type, or date range.

Date formatting is fully configurable

Toggle Show Date and then choose Text vs Numeric style, month long/short, year on/off, DMY/MDY/YMD order, slash/dash/dot separator, and 4 vs 2 digit year. The property pane shows a live preview.

Content Targeting requires a TargetAudience column

When Enable Content Targeting is on, the web part filters items by the viewer's SharePoint groups against a TargetAudience column (Single Line of Text) on Site Pages. Items without a value pass through for everyone.

Troubleshooting

Still need help? Contact Bonzai Support


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.

  1. Create or use the Site Pages library on the source site.
  2. 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.
  3. Optional: add Category (Choice) for Categories pre-filter and the user-facing Category filter.
  4. Optional: add Tags or use Enterprise Keywords / TaxCatchAll for tag filters.
  5. Optional: add TargetAudience (Single Line of Text with a SharePoint group name) if you plan to use Content Targeting.
  6. Create and publish news pages with a banner image.
ColumnTypeRequiredNotes
TitleSingle line of textYesDefault Site Pages column.
Banner ImageImageNoBannerImageUrl for tiles and cards; overridden by Bonzai Page Banner's overrideImageUrl when present.
ShowcaseChoice or TextOnly when showcaseValue is setValue must match the Showcase Value dropdown (default "News Rollup"). Featured and PromotedState are also recognised.
CategoryChoiceNoUsed for Category pre-filter and the user-facing Category filter.
TagsManaged Metadata / Enterprise KeywordsNoUsed for tag pre-filters and the user-facing Tags filter. TaxCatchAll / owstaxidmetadataalltagsinfo also recognised.
TargetAudienceSingle line of textOnly with Content TargetingSharePoint group name; items without a value are visible to everyone.
DescriptionMultiple linesNoUsed for excerpts in Card / List templates.
_LikeCount / _CommentCount / ViewsLifeTimeSystem countersNoSurfaced 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

PropertyTypeDefaultDescription
titleText"News"Web part title. Leave blank to hide the header row entirely.
titleIconOptionDropdowncustomTitle icon mode: custom or none.
titleIconNameIcon Picker"News"Fluent UI icon name for the header.
titleIconUrlTextCustom icon URL (overrides titleIconName).
titleUrlTextOptional URL that makes the title a hyperlink.

Data Source

PropertyTypeDefaultDescription
siteUrlModeDropdownpickerpicker uses the Site Picker; manual uses a text URL.
selectedSitesSite Picker[]Selected site when siteUrlMode is picker (single-select).
siteUrlTextManual site URL when siteUrlMode is manual. Falls back to the current site.
listIdList PickerSource list (usually Site Pages) from the selected site. Also sets listName.
showcaseValueDropdown"News Rollup"Choice value in the Showcase/Featured column used to include items. The special key __none__ means "show all pages" (no curation).
selectedCategoriesMulti-select[]Pre-filter by Category values. Populated from the list's Category column Choices.
selectedTagsMulti-select[]Pre-filter by Tags / Enterprise Keywords. Populated from list items.

Template & Layout

PropertyTypeDefaultDescription
displayTemplateDropdown"List"One of List, Tile, Card, or Row.
cardClickBehaviorDropdownentireCardentireCard makes the whole card/tile clickable; contentOnly limits clicks to the title link.
openInNewWindowToggleOffOpen news links in a new browser tab.
tileScaleSlider 60–140, step 5100Tile size scale (percent) when displayTemplate = Tile.
tileMaxColumnsSlider 1–42Max tiles per row (Tile template).
enableFeaturedTileToggleOffMake the first tile featured (only applies with > 1 columns and > 1 items).
cardScaleSlider 60–140, step 5100Card size scale (percent) when displayTemplate = Card.
cardMaxColumnsSlider 1–42Max cards per row (Card template).
enableFeaturedCardToggleOffMake the first card featured (only applies with > 1 columns and > 1 items).

Pagination

PropertyTypeDefaultDescription
maxNewsToShowSlider 1–5010Hard cap on total items pulled from the list across all pages.
openInNewTabToggleNoOpen news items in a new browser tab (default: Off)
dateFieldDropdownAutoWhich 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.
showPagingToggleOnShow pagination controls. When Off, the web part shows up to maxNewsToShow items in a single page.
itemsPerPageSlider 1–205Items per page when pagination is enabled (disabled control when showPaging is Off).

Appearance

PropertyTypeDefaultDescription
fixedHeightSlider 0–1000, step 250Fixed container height in pixels. 0 = auto height.
containerPaddingSlider 0–40, step 20Inner padding around the web part content in pixels.
borderRadiusSlider 0–200Rounded-corner radius for the web part container in pixels.
imageFitDropdowncoverCSS object-fit: cover, contain, fill, none, or scale-down.
imageSourceDropdownBannerImageBannerImage uses the page's BannerImageUrl / Bonzai Page Banner override; Thumbnail uses BannerThumbnailUrl from the SharePoint Pages API.

Content Visibility

PropertyTypeDefaultDescription
showDateToggleOnShow published / first-published / modified date.
dateStyleChoice grouptexttext (e.g. "21 April 2026") or numeric (e.g. "21/04/2026"). Shown only when Show Date is On.
dateMonthFormatDropdownlongText style month: long ("April") or short ("Apr").
dateShowYearToggleOnInclude year in text-style dates.
dateOrderDropdownDMYNumeric order: DMY, MDY, or YMD.
dateSeparatorDropdown/Numeric separator: /, -, or ..
dateYearDigitsDropdown4Numeric year digits: 4 or 2.
showAuthorToggleOnShow "Published by {author}".
showCategoryToggleOnShow Category label when the column exists.
showTagsToggleOffShow tag chips when tags are available.
showViewsToggleOnShow the lifetime view count from the Search API.
showUrlToggleOnShow the page URL under the title (Row template).
showThumbnailToggleOnShow the article thumbnail/banner image.
showExcerptToggleOnShow a short description / excerpt.
showLikesToggleOnShow like count (falls back to the likedByInformation endpoint when the field is not populated).
showCommentsToggleOnShow comment count (falls back to the Comments endpoint when the field is not populated).

Search & Filters

PropertyTypeDefaultDescription
enableSearchToggleOffShow a search box above the list. Searches title and excerpt (debounced, 400 ms).
showSearchButtonToggleOnShow an explicit magnifier button next to the search box.
enableFiltersToggleOffShow end-user filter controls: Page Type, Category, Tags, Date From, Date To.
showPromotedItemsToggleOffLegacy toggle passed to the service. Showcase value is the primary curation mechanism.
enableContentTargetingToggleOffFilter items by the viewer's SharePoint group memberships against a TargetAudience column on the list.

Advanced

PropertyTypeDefaultDescription
descriptionMulti-line TextOptional description surfaced for documentation/authoring context.
helpUrlTextOptional help URL link.
viewNameText""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 imageSource property. When BannerImage, the web part reads BannerImageUrl and the overrideImageUrl from the Bonzai Page Banner webpart in CanvasContent1, then falls back to getpreview.ashx. When Thumbnail, it reads BannerThumbnailUrl from 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 FeatureModern EquivalentNotes
Display templatesdisplayTemplate dropdown4 templates: List, Tile, Card, Row
Showcase + TagsShowcase value + Categories/Tags multi-selectsShowcase marks items; categories and tags refine filters in the property pane and at runtime.
View name text fieldShowcase + filtersLegacy viewName is retained on the interface but no longer used for filtering. "TodayAndBeforeOtherNews" is migrated to an empty string automatically.
Audience targetingenableContentTargeting + TargetAudience columnMatches the viewer's SharePoint group memberships client-side.
Brick theme colorsTheme Manager web partCSS custom properties applied via loadBonzaiTheme() on init.