Wednesday, February 21, 2018

Modern SharePoint Web Parts – Part 1

Microsoft released the “Modern” page experience for team sites in SharePoint Online in the Fall of 2016. This included the ability to add web parts directly within the page user interface, but there weren’t very many Modern Web Parts available at that point. 

There are 22 web parts available to add to a modern SharePoint page. You can see an overview of the Modern Web Parts on this Microsoft page, which includes links for further information on each web part.

Bing Maps Web Part

The Bing Maps Web Part allows you to display a map of any address or point of interest you enter. By default when it’s added to a page, it displays the “road” view of your current location, but then you can type in the location you wish the map to display to users, and you can switch to Aerial (satellite) view or Streetside view (which is not available for all locations).

Bing Maps Web Part

Embed Web Part

When you select the Embed Web Part, the editing panel immediately appears, allowing you to paste a website address or embed code. For example, you could embed a YouTube video on your page, allowing users to play the video directly from there. Note that this is different from the Link Web Part, which will only display a preview of a video and require the user to actually follow the link to play it.

Embed Web Part

File Viewer Web Part

This is the new version of what had been called the Document Web Part. According to announcements at Ignite, this web part will allow previews of 270 types of files, so it’s no longer just for documents. However, as of this writing (just after Ignite), while the web part’s name has been changed, it currently still only displays an Office document (i.e. Word, Excel, PowerPoint).
Document sources

Hero Web Part

This web part was added with the rollout of Communication sites in the summer of 2017. It’s a visually attractive web part which allows you to add visual links to pages, images, or documents in various layouts. Microsoft has quite a detailed page about this web part, as it’s a big part of a Communication site.
Hero Web Part - tile layout options
After adding a link by clicking Select Link in one of the Hero content areas, an image from the link will be displayed automatically; for example, this might be an image from a document you’ve linked to. When you hover over the tile or layer, you’ll now see a small edit icon in the lower right, which you can use to edit the link text, the image, and some other options – the sections are described below. In the lower left is a Move icon, to move the tiles/layers around within the Hero Web Part.

Image Web Part

Image sourcesThis web part allows you to choose an image from recently uploaded images or from the current SharePoint site, from a link to OneDrive or another SharePoint site, or to upload an image from your computer.


Image Gallery Web Part

Image Gallery editThis web part gives you a way to display a collection of images rather than a single image. You can add a title for the collection at the top of the web part. Editing the web part allows you to select the layout (Tiles or Carousel), and if you’re using the Tiles layout you can also select the aspect ratio (1:1 square – the default, 16:9 wide, or 4:3 standard).
To add images, you can either browse to select them from SharePoint or from your computer as you can with other web parts, or you can drag images directly onto the web part while the page is in Edit mode. After an image is uploaded, click the Edit icon to edit its properties: Title, Caption, and Alternative Text. The Title and Caption will be visible to the user when they view the full-size image by clicking on it from the Tiles layout, and the Title (only) will appear below the image when you use the Carousel layout. You can rearrange the images by dragging them within the web part when you’re in the Tiles layout.

Link Web Part

This web part allows you to enter a single link to a URL, and displays a preview of the page, video, or image. You can choose to remove the display of either the URL or the preview by clicking the x next to it. There are no options available via the Edit icon.

Link Web Part

Office 365 Video Web Part

Here, you can select one video to display from your O365 Video portal. Note, however, that Office 365 Video is being replaced by Microsoft Stream, which has its own Modern web part
[described in the Dynamic Web Parts section of this article], so I won’t go into detail on the O365 
Video Web Part.


In Part 2 of this article, we’ll explore Modern Web Parts which display varying content, depending 
upon the criteria set in the web part.

No comments:

Welcome to SharePoint Server 2019, a modern platform for choice and flexibility

“Without continual growth and progress, such words as improvement, achievement, and success have no meaning.” Benjamin Franklin Thi...