Modern SharePoint Web Parts – Part 2

This is the second of a two-part article about web parts for the Modern SharePoint page. In the first part of the article, we showed how to add web parts to a Modern SharePoint page, and listed the web parts (as of the time of writing) which display static content. In this post, we’ll look at dynamic content web parts.

Dynamic Content Web Parts

These are web parts which display information based on a filter or search, so the resulting content will vary depending upon the content within your SharePoint environment. The results will be updated when new content exists that meets the criteria you’ve specified.

Document Library Web Part

NOTE: As of early November 2017, the Document Library Web Part is in Preview, and may not be fully available in your tenant. This web part allows you to select a library within the current SharePoint site, from which to display contents. In the resulting web part display, you can use the column headers to sort, group, and filter items as you would within the library itself. Any settings you change in this way do not affect the underlying library, and do not persist when your page reloads. A user can also click on the See All link within the web part, to open the underlying library, though be aware that it opens on the same tab unless the user right-clicks and chooses to open in a new tab. Coming soon is a feature allowing users to create and upload files in the library from within the web part.

If the selected library has multiple Views created within SharePoint, then in the web part’s edit pane you can select one of those views to display in this web part. You can also select from 4 sizes for this web part: Autosize, to size the web part to display all items in the library, or Small (5 items), Medium (15 items), or Large (30 items).

Events Web Part

This is a relatively new web part which is being released along with the new Communication sites. It will display the events from a single events list on the current SharePoint site, as filmstrip-style tiles within the web part. After the page is saved, users can click on an event tile to open it (in the same browser tab), and they can click on + Add Event to add an item to the underlying events list. A very cool feature here is that if you add an event in this way, you can also add a map, an image, an online meeting link, and invitees’ names. However, you can only view those extra fields when navigating to the event from the Modern page – the new event is saved in the SharePoint Events list, but if you view the event from there, you won’t see the “Modern” fields (at least for now, that’s the case). Users can also click on Add to my calendar in an event tile, to download an .ics file to save in their personal calendar – that’s a pretty nifty feature!

The edit pane of this web part gives you options to select the events list, the category (for example, Meeting or Holiday – it’ll only list categories which are in use in the selected list), and the timeframe (for example, This Week, This Month, etc).

Clicking on See All takes you to a page which displays all of the events in this list in a similar tiled view, and also allows you to specify a date range or to view a different events list. Changing these settings here doesn’t affect the Events Web Part display, they’re just for the users to get a different view of the events in this list.

Note that the Events Web Part doesn’t (yet) seem to display recurring events, and you can’t add a recurrence when adding an event from the Events Web Part.

Group Calendar Web Part

This web part was added in August 2017, and displays a selected number of events from the calendar related to a single Office 365 Group. By default, it displays events from the Group related to the current SharePoint page, but you could select a different Group if you wish, via the Edit pane. In addition, the Edit pane allows you to select the number of events to display, from 1 to 10, with the default being 3.

Note that there’s a Sync calendar link in the upper right, which allows users to refresh the calendar after adding an event. Also, you can view either Upcoming or Past events using the tabs at the top of the web part.

Highlighted Content Web Part

There’s a lot to the Highlighted Content Web Part… This web part displays current content based on content type, or a filter or search. When you select to add this web part, it will automatically display cards showing the eight most recent documents you’ve accessed on the current site.

But you get lots of options on this web part when you click the Edit icon. There are options for which content you wish to display, how you want it filtered and sorted, and which layout you want. We’ll look at each section.

Content: These options essentially allow you to use this web part as a simple replacement for a Content by Search Web Part. You can first select the scope from which you want to display items – this site, a document library on this site, this site collection, or all sites. Next, you can select from any SharePoint Content Type (or all of them), or you can click Add content type if you wish to display multiple content types.

Note that not every content type is listed here. For example, I have a custom content type that’s published to this site, and it’s not available to display in this web part. However, if I select All content types, then items of my custom content type are also displayed. Also, see the note below about filtering by Managed Property.

If you choose to display Documents, then you can also choose which type of documents you want to show (i.e. Word, Excel, PDF, etc). Here again, you can click on Add document type if you wish to display multiple (but not all) document types.

Filter and sort: Here you can filter and sort in a number of different ways, as shown in the screenshots below.

If you select to filter by Title includes the words or Content includes the words, then you’ll also see a text box to enter the search words by which you want to filter. If you select to filter by Recently added or Recently changed, then you’ll get a dropdown to select a timeframe, such as Today, or Earlier this month, or Last Year. If you select Created By or Modified By, then you can enter a person’s name, or even a portion of a name.

If you select to filter by Managed property, this allows you to locate and enter a filter criterion against a SharePoint Search Managed Property. The “Find a managed property” box lets you narrow down the managed properties that appear in the “Managed property name” dropdown. For an example of using this filter, I can display only the items of my custom content type (which isn’t available in the Source Content Type list above) by filtering here by the ContentType Managed Property. Using Managed Properties is beyond the scope of this article, but you can read more about SharePoint Online Search here.

You can also add an additional filter, which will be inclusive (Or) – that is, either filter criterion can be met for an item to be displayed.

The Sorting options are fairly self-explanatory. I believe that Most viewed and Trending make use of the Office Graph to determine items’ rankings, but I’ve been unable to confirm that, and the results seem a little unusual to me. The two Managed Property sort options allow you to sort by a SharePoint Search Managed Property, even if you’re not filtering by it.

Layout: Lastly, the Layout section is where you can choose a general layout for the web part, as well as the number of records to display, and even whether or not to display the web part at all if no results match the criteria you’ve set. Here’s what you get in each layout type:

Cards (the default): preview image if one is available, site name, title, and most recent modification date (and by whom, including their profile picture)

Carousel: preview images with arrows to advance from one to the next, and with the title and site name beneath. This layout really only makes sense if you’re sure the items being displayed will have preview images.

Filmstrip: similar to Carousel, but shows multiple images on each “page”, depending on the width of your web part. In addition, it displays a bit more information: it includes the most recent modification date and user name and profile picture.

List Web Part

This web part is currently (as of November 2017) in preview. It allows you to display the contents of a SharePoint custom list from the current site. It’s pretty much identical to the Document Library Web Part, but for SharePoint lists: you can specify things like the View to display, the size (i.e. number of results to display), sorting, and filtering. And the user can click See All to go to the underlying list.

News Web Part

The idea behind this web part is to allow you to display announcements, updates, and so on, using images and rich text. First you can select from three layouts: Top Story, Side-by-side, or List. In each case, the four most recently created news stories will be displayed. This is the only customization option available.

Unlike many of the other web parts, you cannot add content to this web part until you exit edit mode on the page. After the page is no longer in edit mode, you can click +Add to actually create a news item. Clicking Add takes you (within the same browser tab) to a new News Page which is automatically created within the SitePages library in the current site. You can create this page in the same way you can create any Modern page: add a header image, a title, and any Modern web parts.

After you publish the news page, you’ll see the news item in the News Web Part – in a single pane, until you publish additional news pages. The image that’s displayed in the News Web Part will be either the page header image, or if there isn’t one, it’ll be the first image on the page. The page title will display, as well as around 125 characters of any text you’ve added in a Text Web Part; however, text formatting will not be displayed in the News Web Part. Users will be able to click on the images in the News Web Part to see the full news article.

After at least four news items have been added, you’ll see a See All link in the upper right corner of the web part. This takes you to a “News” page (news.aspx), which shows all news pages in this SitePages library. You can then click on Manage Posts in the upper right corner, which takes you to the SitePages library, filtered to show only pages created by you. From here you can delete or modify pages if you wish. Note that all of your SitePages are displayed here, not only the ones created via the News Web Part. (In case you’re wondering what the difference is under the covers, see this blog post by my friend Elio Struyf.) Note also that by default these news pages will appear in the News Web Part on the home page of your site, if you haven’t changed the home page from its original configuration.

Site Activity Web Part

This web part is added by default to a new Team Site home page, and it displays tiles showing recent items added or updated within the current site. The only option available in the Edit pane is to specify the number of activity tiles to display – the default is 8.

Stream Web Part

I have categorized this web part as Dynamic rather than Static content, because while you can use it to display a single video from your Microsoft Stream video portal, a more common usage might be to display contents of an entire Stream channel, as I’m showing here.

In the Edit pane, you first select the Source: Single video, or Channel. For a Single video, you then enter the URL of the video, and a starting time if you wish. For a Channel, enter the URL of the channel.

Note that when displaying a Channel, the web part displays the number of views for each video, but not likes or comments. When displaying a Single video, you can add a caption within the web part, and the number of views and likes are also displayed, though not comments. Also, in Single Video mode, or after clicking on one of the videos displayed in Channel mode, users can add the video to their watchlist, and they can Like the video right from the web part.

Yammer Feed Web Part

In this Web Part, you can display a feed from your organization’s Yammer home, or posts from a Yammer group or person, or regarding a specific tagged topic. In the Edit pane, you must enter the URL of the Yammer home page (that is, https://www.yammer.com/YourTenant.com/#/home) or of the group, person, or topic thread. You can also specify whether the web part should be Small, Medium, or Large. What you then essentially get is a live window into the Yammer feed, which allows the user to scroll through posts, reply to posts, and create new posts, all from the web part.

Note: At Microsoft’s Ignite event in late September 2017, they showed a new (upcoming) Yammer web part which displays posts as tiles.

Summary

I hope you have found this reference article useful. New functionality and additional web parts are constantly being rolled out in SharePoint Online, but this should at least give you a starting point and some ideas about what you can do with Modern web parts.