- May 21, 2019
- Posted by: Damian Gibbs
- Category: How-To
SharePoint lists can be a powerful way to store and display data, but getting two lists to interact with each other on the same page has never been easy. In this blog post we will show you how to easily connect two lists on a single page using WebParts. We will create a child parent relationship between the lists that will allow users find related material quickly and easily.
This example will demonstrate how to display dynamic content on a SharePoint site by connecting to another web part. In this example, we use “Embed web part” to do this. The first thing we need to do is create two list (Items list “Project” and Detail list “Milestone”). To link to these two lists, we have to create a lookup field “Project” in “Milestone” list at first as shown below.
After these lists have been created add the list web part “Project” into a modern page (please make sure the column “Title” is displayed in current list view because this column is key to filter the Detail list “Milestone”). Next add an “Embed web part” into a modern page. Edit this “Embed web part” and set the property “Connect to source” with Items list “Project”. And then set another property “Website address or embed code” with the below code:
“<iframe width=”400″ height=”463″ src=”https://<tenant>.sharepoint.com/sites/<sitename>/Lists/Milestone/AllItems.aspx?FilterField1=Project&FilterValue1=[$Title]” frameborder=”0″ scrolling=”no”> </iframe>”
The source of the Iframe is the link of the list view of Detail list “Milestone”. The parameter “FilterField1” is the name of the lookup column “Project” which could be used to filter the list. The parameter “FilterValue1” is the value from Items list “Project”. When clicking each item in the list web part “Project”, it will post the value of the column “Title” of selected item from Items list “Project” to “Embed web part” and then this value would be used to filter the data in lookup column “Project”.
This is how you could get dynamic data between two linked list. Here is screenshot about how to display details when clicking one specific item from Items list “Project”:
I am having trouble getting this to work. I have a classic SP Site that I used many Web Part Connections on and we are now switching to modern sites. I need to recreate those connections and I am stuck. I found your post and tried it out without any luck. Not sure what is causing the issue. I have 3 lists (2 Custom Lists Suppliers, Material Source) and a Contacts List. Suppliers has 2 lookup columns to the contacts list Full Name Column and the Material Source has a lookup to the Suppliers Supplier Column. I used your embed code above and changed the “Project” and “Title” references to Supplier as that is the values used for both the new column name and the lookup value column. Can you help me identify the issue. I need to get this to work with these 3 lists and then for another 9 or 10 sets for different department.