How to Connect Web Parts in SharePoint Online - Part 1

SharePoint web parts can turn your SharePoint sites from good to excellent in many ways. They can help you in enhancing functionality and content management. They are powerful and feature-rich. There are many web parts made available for users to make their SharePoint sites exceptional in terms of flexibility in displaying content and utilizing unmatched capabilities of the platform. Content editor, search, media web part, and contact details are some of the most popular web parts in SharePoint.

Overview

Today we are going to discuss how you can connect different web parts to accomplish more productive objectives. Web parts have a crucial role to play in setting up a modern SharePoint page in all its glory. You cannot connect all web parts, but some key web parts can be connected to assure a better interactive experience for the user. The dynamic page experience created by joining web parts ensures that the page viewers will find it very useful and friendly.

File viewer web part, list properties web part and embed web part are some of the web parts you can connect in SharePoint Online. To give you a clear idea about how to do this and what are the steps involved, we will show you 3 instances.

Connecting File Viewer Web Part and Document Library Web Part

In this instance, the file viewer webpart and document library web part are connected to ensure that users can browse campaign documents that are set as a library with ease. By connecting these web parts, the user will be able to read the content on each page without opening each file or leaving the page. Here are the steps:

• Go to your page and add a document library web page and a file viewer web page.
• Select ‘Edit web part’ option from the left side of the web part.
• From the property pane, click on the ellipses and choose ‘Connect to source’.
• Choose the preferred document library from the drop-down list shown under Connect to source.
• Close the property pane and choose ‘Save as draft’ at the top of your SharePoint page.
• You can test the connection by selecting a document and if you can see the document in the file viewer web part, the connection is successful.
• You can now click ‘Publish’ to make the experience available for users.

Connecting List Properties Web Part and List Web Part

Next, we will show you how to connect a list properties web part with list web part. This can be done to display only required information when accessing a large list with multiple columns. By connecting these web parts, we will ensure that the user will get to see only the list properties they prefer when selecting an item. Here are the steps:

• Go to your page and add a list web part and a list properties web part.
• Click on the ‘Edit web part’ option next to the list properties web part. The property pane will pop up.
• Select the ellipses and choose ‘Connect to source’.
• There will be a drop-down under the ‘Connect to source’ option that allows you to pick the preferred list.
• Choose the type of information you wish to display before the users, from the ‘Display’ section.
• Go to the ‘Fields to display’ section and choose the checkboxes according to what columns you wish to draw values from.
• Click on ‘Save as draft’ option from the top of the page and test the connection.
• Choose any item from the list and check whether the required information is displayed in the list properties web part.
• Make the page available for everyone by clicking on the ‘Publish’ option.

Connecting Embed Web Part and List Web Part

Our third instance shows how to connect an embed web part and a list web part to display selected video, images, or location in a list web part. Here are steps to perform this connection.

• Let us choose a YouTube video first and select the video ID (the code after “V=” part in its URL).
• Make a list by including a title column and a column for showing the video ID.
• Go to your SharePoint page and add a list web part.
• Do not forget to choose the list with the video IDs.
• Also, include an embed web part into the page and click on ‘Edit web part’ option.
• Click on the ellipses placed at the top portion of the property pane and choose ‘Connect to source’.
• You shall now choose the list from the drop-down placed under ‘Connect to source’.
• Go to the ‘Website address or embed code’ section and enter the YouTube link.
• Make sure you add a ‘[$’ before the video ID in the YouTube URL and a ‘]’ at the end.
• Select ‘Save as draft’ and test connection by selecting an item and confirm whether the video is displayed in the embed web part.
• Click on ‘Publish’ to make the video available for users.

There are similar steps for adding an image and location map. Stay tuned for our next blog to get the step by step instructions for those processes. You can also subscribe to our blogs for regular updates. Have a good day!