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:
