How to Connect Web Parts in SharePoint Online – Part 2

Connecting web parts in SharePoint allows you to make the user experience more dynamic and richer. In the first part of this blog, we have shown you how to connect the file viewer web part and document library web part. You can also learn how to connect the list properties web part and list web part, and the connection between embed web part ad list web part in the previous edition of this blog series. This blog is the continuation of the embed web part – list web part connection. Today we will tell you how to connect these web parts to show an image and a map as required.

Connecting Embed Web Part and List Web Part

How to Display an Image

Here are the steps you need to follow to set up a connection between embed web part and list web part so that when users select an image from the list, it will get displayed in the embed web part. For this connection to work well, you need to ensure that the list web part consists of URL and image titles of images in your SharePoint site. Check out the steps below:

• Create a list first and then include a title column and column for image URLs.
• Go to your page and add a list web part.
• You should choose the list in which you included the image URLs.
• Next, add an embed web part to the page.
• Click on ‘Edit web part’ option seen on the left side of the embed web part.
• Click on the ellipses at the top part of the property pane and choose ‘Connect to source’.
• You can find a drop-down below. Choose the list from the drop-down.
• Go to ‘Website site address or embed code’ section and enter the embed code.
• Click on ‘Save as draft’ to save the changes made on the page.
• You can now test the connection between the web parts by choosing an image from the list, and you should see the image in the embed web part.
• Select ‘Publish’ to make the page visible to all.

How to Show a Location

Like we did on the case above, here we are about to display a location map in the embed web part when a user picks a location added to the list. Here are the steps that let you make this happen:

• The first step is to create a list with a title column and a column defined especially for longitude and latitude.
• Go to your SharePoint page and add a list web part and select the same list which you have updated with the location details.
• Next, add an embed web part to the page and click on ‘Edit web part’.
• In the property pane, click on the ellipses and choose ‘Connect to source’.
• Select the list in the drop-down placed just under the ‘Connect to source’ option.
• Go to the ‘Web site address or embed code’ section and paste the embed code.
• From the top of the page, choose ‘Save as draft’.
• It is now time to test the connection between the two web parts. Choose an item from the list and a Bing map showing the location should appear in the embed web part.
• You can now click on ‘Publish’ option to make the page available for all users.

Additional Tips to Make the Connection Successful

As in the case of all SharePoint tutorials and techniques, there are a few basic things we would like to share with you for the best results. To make these steps work successfully, you should be using an embed code based on iframe. Please note that the embed codes that are using <script> tags will not work as it is not supported.

Check whether the websites are secure. Only HTTPS websites can be embedded through these methods. To get the image URL for an image stored in SharePoint, you need to go to the library in which they are stored. By right-clicking the image and selecting ‘Copy link’ > ‘Copy’ options you can get the desired URL.

Try these methods in your SharePoint pages and make your pages richer and great in providing the best experience. We hope you liked this blog series. Come back for more!