More Interactive SharePoint Pages

Written by William Watfeh

 

For experienced SharePoint users, filtered/connected web components are a very popular feature. While this feature has long been used in classic SharePoint sites. While the functionality of modern SharePoint sites is different from that of classic SharePoint, although the current web parts include the most relevant functionality used in classic SharePoint sites.

The filtered/connected web parts that are currently available in Modern SharePoint Pages are listed below. I will go into how to use each of them later in this article.

  1. List Properties Web part: it displays properties of selected List Item
  2. File Viewer Web part: it displays file content of selected document in Library
  3. Embed Web part: it displays any type of content including Images and Videos
  4. Filter Web part based on another list or library

List Properties Web part

When users have a list with too many columns and you cannot display the necessary columns in a view without horizontal scrolling, this web part comes in handy. When a specific item is selected in the List View – part, the List Properties web part allows users to customise the columns they want to display in the web part. Here is how to set it up:

  1. Add Both “List Web part” and “List Properties Web part” on the page.
  2. On the “List Properties Web part”.
  3. Click “Connect”.
  4. In the properties pane, click on the ellipsis (…).
  5. Click “Connect to source”
  6. If you have more than one “List Web part” on the page, then select right web part/list.
  7. Choose the columns you want to display in the “List Properties Web part”
  8. You can also select if properties should be editable or read-only in the web part
  9. Save the page.
  10. Test the webpart by selecting any item from “List Web part”

File Viewer Web part

This web part allows users to view the content of a selected file without having to open it in a browser or desktop application. Here is how to set it up:

  1. Add a “Document Library Web part” and “File Viewer Web part” on the page
  2. On the “File Viewer Web part”.
  3. Click “Edit”, it will open the properties pane of the web part
  4. In the properties pane, click on the ellipsis (…)
  5. Click “Connect to source”
  6. If you have more than one “Document Library Web part” on the page, then select right web part/document library
  7. Save the page.
  8. Test the webpart by selecting any document from “Document Library Web part”

Embed Web part

This web part allows users to display dynamic content by leveraging variables in links or embed code. Here are a few examples of how to set it up for images; same logic may be used for other types of content, such as YouTube videos.

  1. Create a List, add a Hyperlink Column to it that will contain the Image URL
  2. Add a “List Web part” (select the List with Image URL’s) and “Embed Web part” on the page
  3. On the “Embed Web part”.
  4. Click “Edit” it will open the properties pane of the web part
  5. In the properties pane, click on the ellipsis (…).
  6. Click “Connect to source”, then select right web part/list
  7. Just below “Web site address or embed code”, add the embed code. In this example, the embed code is,<iframe width=”693″ height=”390″ src=”[$Image URL]” frameborder=”0″ ></iframe> where [$Image URL] is the variable that stands for the column name for the Image URLs.
  8. Save the page.
  9. Test the web part by selecting an item in “List Web part”. Then the respective Image will be displayed in Embed Web part

Filter Web part based on another list or library

In Classic SharePoint Sites, this is the same capability as Connected Web Parts. We enable “Dynamic Filtering” on the secondary web part in Modern Experience and pass on the filter details. Here is how to go about it:

  1. To have the dynamic filtering capabilities between two lists, there should be parent-child relationship that will allow the filters to work
  2. Add a “List” or “Document Library” web part to the page that will act as the parent control
  3. Add another “List” or “Document Library” web part to the page. This will be the child control.
  4. On the second web part, click “Edit”
  5. Enable the “Dynamic Filtering” to provide the column.
  6. Click on “Apply”
  7. Save the page.
  8. Test the web part by selecting an item/document from the parent “List Web part”. Items in the other “List Web part” will be filtered accordingly.

These are some useful web elements that greatly improve the user experience and content rendering for end users.