When you add a modern page to a site, you add and customize web parts, which are the building blocks of your page. You can connect some web parts to each other to create an interactive and dynamic experience for your page viewers. For example, you can connect a Document library web part to a File and Media web part. When a user clicks a file name in the Document library list, the File viewer shows the contents of that specific file. Or, connect a List properties web part to a List web part with lots of information to only show specific information.
Notes:
-
Some functionality is introduced gradually to organizations that have opted in to the Targeted Release program. This means that you may not yet see this feature or it may look different than what is described in the help articles.
-
The web parts in this article are not available for use on classic pages.
Web parts you can connect include: the List properties web part and File and Media web part. Here are some examples of how you can use these connected web parts.
Show a file based on what a user selects in a document library (connect a File and Media web part to a Document library web part)
In this example, users can browse through a library of marketing documents and see the content in a selected file without leaving the page, and without having to open each file.
To do this:
-
On your page, add a Document Library web part with the library you want to use, and add a File and Media web part.
Note: If you're adding the File and Media web part for the first time, the Recent documents pane will open. Select Cancel on the bottom right of this pane.
-
Select Edit properties
-
Select the ellipses (...) at the top right of the property pane, and then select Connect to source.
-
Under Connect to source, select the document library you want to use from the drop down list.
-
Select the X at the top of the pane to close it.
-
Select Save and close at the top of the page.
-
Test your connection by selecting a document from the Document library you chose. You should see the document displayed in the File and Media web part.
-
When you're ready for your audience to see the page, select Republish at the top right of the page.
Show an item in a list based on what a user selects in a List web part (connect a List properties web part to a List web part)
When you have a large list with many columns, it can be hard for users to find the specific information they are looking for. With the List properties web part, a user can select an item from a List web part and see only the value(s) you specify. In the following example, a List web part contains a list of Regional offices. When the user selects an item from the list, the List properties web part displays only the Office name and Sales data.
To do this:
-
On your page, add a List web part with the list you want to use, and then add a List properties web part.
-
Select Edit properties icon
-
Select the ellipses (...) at the top right of the property pane, and then select Connect to source.
-
Under Connect to source, select the list you want to use from the drop-down list.
-
Under Display, select what you want the user to see on your page.
-
Under Fields to display, select the check boxes next to the columns that you want to show values from.
-
Select Save and close at the top of the page.
-
Test your connection by selecting an item from the list you chose. You should see the value you specified in the List properties web part.
-
When you're ready for your audience to see the page, select Republish at the top right of the page.
Filter a list based on a selection in another list or library
With dynamic filtering, you can filter one list based on a selection made in another list. In the following example, the Marketing Documents library is filtered by a selection in the Project Information list. The "Marketing" value in the Project Team column is selected, so only documents owned by the Marketing team are displayed in the Marketing documents library.
To do this:
-
On your page, select Edit and add a List web part or a Document library web part, then select the list or library with the values you want to filter by.
-
Add another List web part or a Document library web part and select the list or library that contains the information you want to filter.
-
Select the list or library web part you want to filter and select the Edit properties
-
Under Dynamic filtering, slide the toggle to the On position.
-
Select the column you want to filter in the field Column in [your list name] to filter.
-
Under List or Library containing filter value, select the list or library you added to your page in Step 1.
-
Under Column containing the filter value's properties, select the column that has the values you want to filter by.
-
Select Apply.
Using the example image at the beginning of section, the Dynamic filtering options for the Marketing documents library would look like the following:
-
When you’re done, select Save and close at the top of the page, or if you're ready for your audience to see the page, select Republish at the top right of the page.
