One reason why I love the modern page experience is how quickly you can build out beautiful content in SharePoint as a Power User! In this post, I’ll show how to leverage modern web parts to build modern pages for your company office locations. Show them all together on one page using the Highlighted Content web part and in as much time as it takes for search to crawl your pages, you’ve built a company-wide office locations page with map images linked to each location… quick, easy, modern, responsive, awesome!
Tip: When building modern pages in SharePoint, always do a bottom-up design. Build all detail pages first, followed by the summarized, top-level page. This is so you have detail pages to link to when you build the top-level page!
[Update August 1, 2018] With the recent Page Properties announcement from Microsoft, I’ve updated the technique used in this post to leverage them instead of relying on the Title property. A big improvement!
Steps
- Decide if you’ll be displaying the company-wide office location summary page in the same site the location pages have been created in or a different one.
If the same site, add a column directly to the Site Pages library of type choice (I’ve called mine PageType). This is adding a list column. If a different site, I recommend going to the Site Settings on the site where the location pages will be built and adding a site column of type choice (I’ve called mine PageCategory) and then adding it to the Site Pages library.
For both options, I’ve added several choice values to demonstrate how this technique could be used to categorize many different types of pages. For location pages, ensure one of the choice options is Location.
Both options are shown in the 2 images below.
- Build a modern page for one of your office locations. Some great modern web parts to include on your location page to make it visually appealing are:
- Web parts:
Bing maps: specify the office location to render the geo-location. Don’t forget to customize the Pin label to include the floor or any other information relevant to your location. You have 4 “view types” to pick from: Road, Aerial, Bird’s eye, and Streetside.- People: specify office manager, office contact(s), etc.
- Text: include office hours, phone #, etc.
- Weather: relatively new web part to specify the office location for local weather
Use your creative side to come up with a visually appealing location page. Mine is below!
- Update the page property by selecting the new Page details option on the page editing ribbon. This will open a property pane on the right side of the page. Whether you’ve added a list or a site column, this behavior is the same. Select Location as the choice value:
- Save and publish the page.
- Build remaining office location pages by clicking ‘New… Copy of this page’ while on the above page. This way, you will build a consistent look to all of your pages. When you copy the page, it also copies the page properties ensuring each copied location page already has the choice value of Location. Awesome!
- When all location pages are built and published, it’s time to build the final summary modern page to show them. Whether you’re building it on the same or a different site, we’ll use the Highlighted Content web part to display the company-wide office location pages.
- If you’re on the same site as the location pages, add a new site page with the Highlighted Content web part and select the Page library on this site source to target pages in the current site. Use the Page properties filter to show all pages where the PageType is Location.
- If you’re doing this on a different site from where the location pages were created, add a new site page with the Highlighted Content web part and the Select sites source and select the site where the location pages were created. In my example, I’ve created the location pages in Location Communication Site. You must use the automatically generated managed property, PageCategoryOWSCHCS, to filter the pages where its value is Location.
- Whether the summary location page is created in the same or a different site, the displayed results are the same. A key difference is when using the managed property technique, you must wait for the location pages to be indexed by the search crawler.
The Highlighted Content web part on your company-wide locations page will appear as shown below… quick to build and looks great!
Conclusion
The ability to tag modern pages is a welcome addition to the page editing experience in SharePoint. Although this post demonstrates how to build a company-wide office location page, the same technique could be used for organizing and displaying pages for many other use-cases.
Thanks for reading.
-JCK
Credit: Photo by Benjamin Child on Unsplash
An engaging design. Currently, we tag pages by adding a column with managed property to the pages library or using a classification label in the filter. As you say, naming convention is important particularly as the modern search results move to displaying name rather than title.
Hi Keith,
Agreed. I have also used managed properties many times for tagging and subsequently showing pages with the tag in search web parts. The technique in this post is a simpler approach and likely sufficient in this case. I published a 2-part blog series in December 2017 on exactly the approach you talk about where I created some custom content types for different types of pages to create an O365 Adoption Center. I’m keenly interested to see the new page tagging feature that will be rolling out shortly – should make it much easier.
-JCK
Hi Joanne,
Page tagging and highlighted web part you showed, rolls up pages/results from a single document library. Is there a way to roll up all pages with a particular tag from all sites in SPO?
Hi Nirav,
Yes, if they all have the same tag associated to the same search managed property then you can. For that you would choose “All sites” as the source.
-JCK