SharePoint Online Web Part Connections

We love SharePoint Online web parts here at Lightning Tools, but one thing we’ve missed from SharePoint on-premises has been the ability to connect web parts to each other on a page. In April 2019, Microsoft released the first few built-in (“First party”) SharePoint Online web part connections, which is great news! Dynamic Data functionality (Microsoft’s term for this) became available worldwide by the end of April 2019. In this article, we’ll  look at these three new web part connections:

• Connect a File Viewer Web Part to a Document Library Web Part
• Connect a List Properties Web Part to a List Web Part
• Connect an Embed Web Part to a List Web Part

April 2020 update: We’ve recently released version 3.0 of our modern Lightning Conductor content rollup web part, which now can use data connections to dynamically filter and format views of SharePoint and other Microsoft 365 content. Learn more…

Connect a File Viewer Web Part to a Document Library Web Part

This web part connection allows you to select a file in a Document library web part, and have a preview of the file display in a connected File viewer web part. Both of these web parts have been around for a while, but the ability to connect them was added in April 2019. To try this, add a Document library web part to a page, and choose a library from the current site (your only option) to display.

Next, add a File viewer web part to the page, perhaps beside or below the Document library web part. As soon as you click to add the File viewer, the Recent Documents dialog will automatically appear as it normally does, but this is not what you want, so click Cancel. So now you have a blank File viewer, and the only option appears to be to add a file. To make a connection, you must edit the File viewer web part.

Then click the not-very-obvious three ellipses in the upper right corner of the Edit Web Part pane… which allows you to Connect to source.

Here, you can select from a drop down list of any Document library web parts you may have on this page. The drop down will also show List web parts on the page, but the File viewer will error if you attempt to select an item from a connected List web part. At least at this point, it’s designed only for Library files.

After making the connection and publishing the page, you’ll see a preview of a file you select in the Document library web part.

When no document is selected, users will see text in the File Viewer which lets them know to select a file from the specified Document Library web part to preview it:

Connect a List Properties Web Part to a List Web Part

This is similar to the previous connection but it allows users to see all fields of a selected list item. To try this, add a List web part to a page, and select any list from the current site to display. Next add a List Properties web part. This is a new web part, specifically designed to be connected, so it’s a little more clear what to do… click on the Connect button. This opens the web part’s edit pane if it wasn’t already open, and then you still must click on the … in the upper right corner to Connect to source.

More options are available in this web part than there are in the File Viewer. Not only can you choose which List web part on this page to connect to, but also which columns to display.  There is a Display drop down, but currently the only option is Selected Item – presumably more options will come later which may give a purpose to the Size drop down.

An important option is whether or not to allow users to edit the item right within this web part, which is a nice feature. With this option enabled, you can place the List Properties web part to the right of a List web part, and the functionality will be similar to the information/edit pane on a List page.

You can also select a Document Library web part in the List Properties web part’s Source field, in which case the web part displays the document’s properties (columns), rather than a preview of it. This probably only makes sense if you have some metadata columns included in your document library – otherwise the only choice is to display the document’s Title and/or Name.

During testing a few issues came up which may be resolved by the time you read this. One was that folders do not seem to be supported currently. That is, if you switch to another folder in the List web part, selecting an item within the folder does not display it in the List Properties web part. Another issue is that you can select multiple items, and the List Properties web part will appear to allow you to bulk-edit the fields, but it does not appear to work.

Connect an Embed Web Part to a List Web Part

The third and final connection that’s currently available allows a video, image, or location (for example) to be displayed when a list item (containing one of those things) is selected from a List web part. This one is a little more complex. The Embed web part allows you to display content from sites that allow iframe-based embedding, such as YouTube or Bing maps. When it’s connected to a List web part, you can add a variable within the embed code which takes its value from one of the columns displayed in the List web part, for an item the user selects.

The resource link at the end of this article gives three examples: displaying a YouTube video based on the video id, displaying an image based on a SharePoint URL, and displaying a Bing map based on latitude and longitude. We’ll look at another example, displaying a website page depending on the item selected in a list.

In this example, we have a list of products displayed in a List web part (as above), and each item includes a link to its page on our website. When you add an Embed web part, you’re prompted to enter embed code. As with the other connections, click on the … in the web part’s Edit pane to Connect to source. Then you can select a Document or List web part from your page to connect to.

Note that for these web part connections you can only use embed code which is iframe based. For a website URL as we’re using for this example, that means code similar to this, if you’re putting the web part in a full-width section, and you want it to scroll vertically:

<iframe width=”1000” height=”600” src=”YourURL”  scrolling=”yes”</iframe>

However, since we’ve connected this to a List web part, we’ll use a variable in place of specifically naming YourURL. To do this, when you get to src=” type [$ and then a list of available columns from that connected List should appear. Select the column which contains the URL of the web page. Note that this should be a Text field, not a Hyperlink/URL type field. The code requires text only.

Here’s the completed embed code for this example:

And for this scenario, it’s a good idea to switch the toggle to Resize to fit the page.

Before an item in the List web part is selected, the connected Embed web part isn’t quite as helpful as the others were…

After selecting an item in the list above, the related web page is displayed below.

What’s next?

Microsoft is sure to extend Dynamic Data functionality to other modern web parts over the coming months, so watch this space for further updates. In addition, Lightning Tools’ developers are working on Dynamic Data web part connections among our client-side web parts for SharePoint Online. Think, for example, of connecting aggregated content from the Lightning Conductor with a chart in our Data Viewer. Or connecting one Data Viewer to another to view (and style) parent-child relationships among SharePoint lists or external data sources.

Resource: Connect Web Parts in SharePoint Online (Microsoft support article)

April 2020 update: The Lightning Conductor SPFx client-side web part can now be connected to other Lightning Conductors as well as page and user data, and soon will connect to the Data Viewer.

We’ve also released Lightning Filters, a set of free Modern filter web parts, so you can filter the Lightning Conductor (or your own web parts) by date, user, choices, and more!