Connect Modern SharePoint Web Parts
It’s called “Dynamic List Filtering”, but it’s the concept of adding multiple web parts to a page in SharePoint, and setting them up to send data across web parts, so that one web part changes dynamically according to something that was clicked on the other web part.
Here are some of the things that you may want to display with connected web parts:
- With lists that have a lookup field / relationship, click on one item in a list web part, and it filters the items in a second list web part
- Click a document library file, display the file in the File Viewer web part.
- Click a list item, display its form in a List Properties web part.
Scenario: Connected lists
In this first example, I have a list of customers, and a list of projects. There is a lookup column in the projects list, to the customers list. So, each project is associated with one customer. Each customer can have many projects. My lookup column in the projects list is called Customer Lookup.
1. Create a new page on the SharePoint site where your lists are. Add a two-column section to the page. Now, it isn’t required to use columns, but visually it’s easier to see what’s going on.
2. In the left column, add the list web part. Choose your parent list. For mine, I’m choosing “Customers”.
3. In the right column, add another list web part. Choose your child list. Mine is “Projects”.
4. Look at the web part properties of the Projects web part. Toggle on Dynamic filtering. First, select which column in the child list to filter by. Mine is the Customer Lookup. For the list or library containing the filter value, the only option I have, is Customers, since that’s the only other web part on this page. As soon as you choose something in the second drop-down, the third drop-down will appear. It will have a list of column names in your parent list. My column containing the filter value is Customer Name. Click Apply.
For that last option, if you’re not sure which column to choose, here’s how to figure it out. Go to your child list (Projects), click the gear at the top right, and go to List Settings. Click on your lookup column, mine is “Customer Lookup”. Look at the In this column setting, and that’s the column name you’ll need in step 4.
5. Now, publish the page that you added the web parts to. Notice here that I when I click on a customer on the left, it filters the list of projects on the right, to only that customer’s projects.
Scenario: Library and File Viewer
In this second example, I have a library, and I can quickly look at each file on the same page, in a file viewer web part.
1. On a page in SharePoint, add the document library web part. Pick a document library on your site, hopefully it has some files in it.
2. Add another web part on that same page, this time it’s the File Viewer.
3. As soon as you add the file viewer, a dialog box will pop up asking you to pick a file. Don’t pick a file, click Cancel.
4. In the web part properties for the File viewer web part, click the ellipsis at the top right, and choose Connect to source.
5. A drop-down box Connect to source will appear, and the names of document library web part on that page will appear. Pick the name of your document library. Mine is the SOW Library, as you can see in the above screen shot.
6. Publish the page. Now, you’ll notice that when you select a file on the left, that file will be displayed on the right.
Scenario: List and List item properties
The third scenario, the list and list properties concept, works similarly to the doc library and file viewer. You can add a list web part and when you click on an item, it shows that item in the list properties web part on the same page. This one seems to be the least useful, in my opinion. When I go to a list, and click on an item, it already opens up in a slick little panel on the right. So, I’m not sure why I would want to go to the trouble to create a special page that sort of does the same thing (but clunkier).
1. Add a List web part to a page.
2. Add a List properties web part to the same page.
3. In the web part settings of the List properties web part, click the ellipsis and choose Connect to source.
4. In the Connect to source box, choose the name of your list. Display the selected item, and for the size, if you choose small, the web part will just be shorter, and will have a scroll bar. I choose Autosize. Pick which columns you’d like to display or hide from the form. Decide if you’d like people to be able to directly edit the item in the form on the screen, or if you’d like it to be read-only.
5. Click Apply, and Publish the page. Notice that now when you click an item in the list web part, it shows the form for that item on the right. I chose to allow users to edit, so notice that I’m directly editing the business phone field in the form on the right.
Great, now you’ve seen three ways to use dynamic list filtering in SharePoint Online. To achieve the same concept of a pretty dashboard, sometimes I use a Power App instead of web parts on a page. A Power App is much prettier, and can also be embedded on a page, using the Power Apps web part.
Here’s a one hour video of my demonstration of Dynamic List Filtering:
So isn’t “dynamic filtering” equivalent to “connections” in the classic UI?
Yes, exactly.
Great to see this feature at last. The lack of this functionality was what led me to PowerApps for the first time! Unfortunately, having added this and it worked a couple of times, my page is now freezing every time. I’m going to log it with Microsoft now.
I created another page from scratch which works, so will keep an eye on it.
Is there a way to set up the dynamic filtering from your first example by code? I tried with PowerShell Add-PnPPageWebPart but can not finde the correct syntax for the -WebPartProperties parameter to connect to the filter list.
Sorry I don’t know dev or PowerShell.
Hi Laura,
Thank you for posting this information.
Is it possible to programmatically switch views in a List webpart?
Let say, webpart has 40-60 columns to display (don’t ask why – client wants it) but it’s obvious that it will not fit on a screen.
The question is: how to create views (View1: Column1 to Column20, View2: Column21 to Column30 e.t.c.) and let user to choose view to display limited set of fields in a List webpart?
Is it feasible in general?
Thanks,
Alex
Yes, there’s a VIEW drop-down box at the top right of any list, that the end users can use to switch views.
Is there a way to allow users to search for an item in the list that is triggering the filtered web parts? Example: We have a list of machines that is 500 machines long and the users don’t want to scroll through the list. We’ve tried grouping the item, but that isn’t aiding the users in finding the machines.
No, sorry, I don’t know of a way to achieve that.
Hi Laura
I have a weird result. When I select one item, it filters everything out. If I select multiple values it works as expected. When I have nothing selected, it works as expected. Am I missing something?
It’s pretty awkward, so no, you’re not doing anything wrong.
Is there a way to preselect a filter? I have two lists, on the page, the user can select an item from List A to see the associated items in List B. There are a lot of items in List B, but maybe on 5 or so for each selection from List A. If I configure the Size property for the List B web part to autosize that takes up a lot of the page real estate. But if I set the Size property to “Small”, then it will add vertical scrollbars which is not the experience I’d like. Would love to be able to preselect the first item from List A, is that possible?
No, there isn’t a way.
Hey WonderLaura! As an MVP, can you point me to an official support resource where the classic experience connected web parts glitches are described or resolved as “won’t fix”? Does this experience work for you, when you want to paginate/filter/sort the child web part? Can’t find any official articles regarding non-modern connected web part experience any more 🙁
No there aren’t any.
Hi Laura,
This feature works only if you want to make only one filtering column? Is there any way to make multiple columns filtering on the same way?
No, it only works with one column. You’d have to create a different page to send a different column, but never 2 at the same time.
Is there a way to find the URL of a dynamic filter option. I’m creating a list of committees from a home page and would like a URL link to the page with dynamic filters and a preselection. This is driving me crazy!
No, that doesn’t exist anymore.
I hope you don’t mind a question two years later? I found your page and got the dynamic filter working, thank you! However, now that I have two lists on the page, I can no longer right-click on an item and choose Edit. So this is only for display purposes, not for editing (unless the fields that need to be edited are in the view, which is not ideal for multiple lines of text fields). Have I understood that correctly or am I missing something?
Unfortunately they don’t provide many options, so I don’t think there’s a way to do that.