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”:
