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, Address, Phone, Email, Hours, Image, and MapImage 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, configure field visibility, display layout (Cards/List), 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" link opens the address in Google Maps for easy navigation.
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 |
| Image | Image or Hyperlink | No | Office photo URL |
| MapImageUrl | Image or Hyperlink | No | Static map image URL (MapImage also supported) |
| Latitude | Number | No | Optional coordinate for directions |
| Longitude | Number | No | Optional coordinate for directions |
Property Pane Configuration
Title Settings
| Property | Type | Description |
|---|---|---|
title | Text | Web part title |
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: MapPin) |
titleIconUrl | Text | Custom icon URL (overrides icon name) |
description | Text (Multiline) | Optional description below the title |
showMoreText | Text | Text for footer link |
showMoreUrl | Text | URL for footer link |
chromeType | Dropdown | Chrome type: None, Title Only, Border Only, Title and Border |
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 |
itemsPerPage | Slider (3-24) | Locations per page (step: 3, default: 9) |
showPaging | Toggle | Enable pagination (default: On) |
fixedHeight | Slider (0-800) | Fixed height in pixels (0 = auto) |
Features Checklist
- ✅ Cards and List display layouts
- ✅ Search functionality
- ✅ Office images and map images
- ✅ Contact information (phone, email)
- ✅ Operating hours
- ✅ "Get Directions" link (Google Maps)
- ✅ Pagination
- ✅ View-based filtering