Web Parts
Locations
Display office locations with addresses, contact info, images, and directions links.
PeopleFeature Parity: 95%
Get Locations Working in 3 Steps
15-30 minutes
Prerequisites
- Bonzai 2 package installed on your site
- SharePoint list with location data
1
Create a locations list
Create a SharePoint list with Title plus optional Address, City, State, PostalCode, Country, Phone, Email, Hours, LocationImage, MapImageUrl, Latitude, and Longitude columns.
2
Add the web part
Edit your page and add "Bonzai Locations" from the Bonzai category.
3
Select your list and configure
Choose your Locations list (optionally a view), configure field visibility, display layout (Cards or List/Table), and publish.
When to Use This Web Part
Use this when you need to...
- Display office locations
- Show branch contact information
- Create an office directory
- Feature regional offices with maps and directions
Best page locations
- About Us page — office listings
- Contact page — office contacts
- People & Directory page — locations section
- Global offices page — international locations
Consider alternatives when...
- • Interactive maps — use embedded maps
- • People contacts — use People Listing
Common Configurations
Office Directory
Full office listings with all details
Best for: Contact page
Configuration
| title | Our Offices |
| displayAs | Cards |
| itemsPerPage | 9 |
| showSearch | On |
| showAddress | On |
| showPhone | On |
| showEmail | On |
| showDirections | On |
Regional Offices List
Compact list view of locations
Best for: Sidebar widget
Configuration
| title | Locations |
| displayAs | List |
| showImage | Off |
| showMapImage | Off |
| showHours | Off |
| itemsPerPage | 6 |
Searchable Office Finder
Focus on search with expanded field
Best for: Dedicated locations page
Configuration
| title | Find an Office |
| showSearch | On |
| expandSearchField | On |
| searchPlaceholder | Search by city or country... |
| showResultsOnLoad | Off |
Visual Office Grid
Image-focused card layout
Best for: Homepage
Configuration
| title | Global Offices |
| displayAs | Cards |
| showImage | On |
| showMapImage | On |
| itemsPerPage | 6 |
| showPaging | Off |
Best Practices
Add location images
Office photos make the locations more recognizable and visually appealing.
Include map images
Static map images help users quickly orient themselves. Use Google Maps or Bing Maps static image URLs.
Enable directions links
The "Get Directions" button opens Google Maps for easy navigation. Provide
Latitude and Longitude when possible — coordinates produce a more reliable destination than a parsed address string.Reference
Locations List Schema
Create a SharePoint list with these columns:
- Create a list to store locations (any name).
- Add required Title column entries for each location.
- Add optional columns for address, contact, and map details.
| Column | Type | Required | Description |
|---|---|---|---|
| Title | Single line of text | Yes | Office/location name |
| Address | Multiple lines of text | No | Full street address |
| City | Single line of text | No | Used for search and display |
| State | Single line of text | No | Used for search and display |
| PostalCode | Single line of text | No | Postal/ZIP code |
| Country | Single line of text | No | Used for search and display |
| Phone | Single line of text | No | Contact phone number |
| Single line of text | No | Contact email address | |
| Hours | Single line of text | No | Operating hours |
| LocationImage | Image or Hyperlink | No | Office photo (SharePoint Image column, hyperlink, or plain URL string) |
| MapImageUrl | Hyperlink or Text | No | Static map image URL (Google/Bing Maps static image) |
| Latitude | Number | No | Preferred coordinate for the Get Directions link |
| Longitude | Number | No | Preferred coordinate for the Get Directions link |
Automatic field discovery
Only
Title is required. The web part inspects your list at runtime and selects only those optional columns that actually exist, so missing columns are gracefully ignored — no errors when you omit fields.How Search Works
Search behavior depends on whether a view is selected:
- No view selected — matches are filtered server-side via OData against
Title, andCity,State,Countrywhen those columns exist. Note:Addressis a multi-line (Note) column and cannot be filtered server-side. - View selected — the view is fetched first, then matches are filtered client-side against
Title,City, andAddress.
Get Directions Link
The "Get Directions" button opens Google Maps:
- If
LatitudeandLongitudeare present, coordinates are used for the destination. - Otherwise the composed full address (
Address+City+State+PostalCode+Country) is used. - If no address or coordinates are available, the button is hidden.
Property Pane Configuration
Title & Navigation
| Property | Type | Description |
|---|---|---|
title | Text | Web part title (default: "Locations"). When empty, the header, icon, and description are hidden. |
titleUrl | Text | Optional URL to make the title clickable |
titleIconOption | Dropdown | Title icon mode: Select Icon or None (default: Select Icon). Choosing None hides the icon slot entirely. |
titleIconName | Text | Fluent UI icon name (default: MapPin). Hidden in the property pane when titleIconOption is None. |
titleIconUrl | Text | Custom icon image URL. When set, overrides titleIconName. |
description | Text (Multiline) | Optional description shown below the title |
showMoreText | Text | Text for the footer "show more" link |
showMoreUrl | Text | URL for the footer "show more" link (only shown when both text and URL are set) |
Data Source
| Property | Type | Description |
|---|---|---|
siteUrl | Text | Site URL where list is located (empty = current site) |
listName | List Picker | SharePoint list containing locations |
viewName | View Picker | View to filter locations |
Search Options
| Property | Type | Description |
|---|---|---|
showSearch | Toggle | Enable search functionality (default: On) |
searchPlaceholder | Text | Placeholder text for search box |
showResultsOnLoad | Toggle | Show all results initially (default: On) |
expandSearchField | Toggle | Expand search field on focus (default: Off) |
Field Visibility
| Property | Type | Description |
|---|---|---|
showAddress | Toggle | Show address (default: On) |
showPhone | Toggle | Show phone number (default: On) |
showEmail | Toggle | Show email address (default: On) |
showHours | Toggle | Show operating hours (default: Off) |
showImage | Toggle | Show office image (default: On) |
showMapImage | Toggle | Show map image (default: On) |
showDirections | Toggle | Show "Get Directions" link (default: On) |
Display Options
| Property | Type | Description |
|---|---|---|
displayAs | Dropdown | Cards or List/Table (default: Cards) |
itemsPerPage | Slider (3-24) | Locations per page (step: 3, default: 9) |
showPaging | Toggle | Show pagination controls (default: On) |
fixedHeight | Slider (0-800) | Fixed height in pixels with internal scroll; step: 50, default: 0 = auto |
chromeType | Dropdown | Chrome type: None, Title Only, Border Only, Title and Border (default: Title and Border) |
Features Checklist
- Cards and List/Table display layouts
- Debounced search with configurable placeholder and optional auto-focus
- "Show results on load" toggle (search-first experiences)
- Office images and static map images per location
- Contact information (phone, email, business hours) with tel: and mailto: links
- Full address composition from Address, City, State, PostalCode, Country
- "Get Directions" link using coordinates when available, address fallback
- Pagination with configurable items per page (3-24, step 3)
- View-based filtering with automatic fallback to standard queries
- Automatic field discovery — missing optional columns are ignored
- Cross-site list support via Site URL
- Fixed-height scrolling container (0-800px)
- Title icon (Fluent UI icon or custom image URL) and clickable title
- Footer "show more" link