Creating Connected Web parts in SharePoint

 

Recently I have come across a situation where we need a page which should be divided into 2 parts where one half should have items and based on the item selection, you should get the details (Just like a HTML frame). Most of us will come across this situation and this will be handy and simple too in SharePoint without any coding or customization using SPD or VS

Example: when you select the Item1 you should see the Details of the item1. This should be dynamic that the items and the details should be rendered from a different location (say SharePoint lists)


    

We can achieve this scenario by using the connected webparts.

 For this, you need 2 lists with at least one identical filed. In this scenario, I have created 2 lists (Items and Details)

Items list has the following items in it:

Details list has the following items in it:

Now, if you look at the lists, I have Title filed in common. Based on this I am going to create a connection between these 2 lists.

 First, to have a great view, lets create 2 list web parts on a page and add these 2 lists (Items and Details) as shown below.

 

 

Now on the items web part you see the below menu:

Actions available in connected webparts are explained here:https://office.microsoft.com/en-us/sharepoint-server-help/connect-data-in-web-parts-HA101785157.aspx

 In this case I am using Send Row of Data To (I am using this option on Items list so, selecting an item in the items list should return the corresponding information from details).

You can also use Get Filter Values From but this has to be used on Details web part as we will get the details based on the items selected.

After selecting the Details

 I have configured Connection as per the below screen shot:

We have completed creating the connected web parts. Now, if you keep updating Items and Details lists provided that the list items created have a corresponding unique identifier (in this case Title), the web parts would render the information as expected.

You could see below that I selected Test which returned Rajeev1 from details as Rajeev1 item has Title value as Test in the details list.

You could create and customize the exiting web parts using Visual Studio or SharePoint Designer to change the look and feel according to your requirement.

Comments

  • Anonymous
    January 01, 2003
    jfh
  • Anonymous
    January 01, 2003
    updated..
  • Anonymous
    September 12, 2014
    Hi, Just wondering....is it possible to add a DVWP to a custom form and send a field value of the selected row to a field?
  • Anonymous
    October 17, 2014
    The comment has been removed
  • Anonymous
    January 11, 2016
    When I am doing filtering using the connected web part, filtering works perfectly fine.
    But in the child controls where filtered data is showed if i do quick edit , after editing when i click stop it gives me an error saying "Unable to render data if problem persists contact Admin".
  • Anonymous
    March 29, 2016
    Hi ,
    I am completely new to share Point and am asked at work to create a list of policies on one column and when clicked on the link of each policy the appropriate policy details needs should be displayed on the right column. How can I do this ? Is there a video or step by step instruction ?
  • Anonymous
    July 26, 2016
    nice