Creating a simplified Master–Detail functionality using SharePoint Designer 2010

This assumes you have two Lists. One list is the lookup table (we’ll called it FAQTopics) that you want to group by. The other list is a table (I called it FAQ List) that has the rest of the data you want to display. In this scenario I want my lookup table to show on the left side of the screen and when I click one of the items on this table I want the list on the right to update and only show the rows that are in that match. In this case, the master is the FAQTopics list and the detail is the Topics list.

If you need to be able to change the item that is selected by default or have a link to the page with a certain topic selected, I suggest you try an enhanced version of this.

• Create a new web part page
  1. Open SharePoint Designer 2010
  2. Go to Site Pages
  3. Click Web Part Page from the Pages ribbon and select the desired web part layout. Pick on that has at least a left and right web part area for our purposes since we want the list of topics on the left and the FAQs on the right.
  4. Rename the file as a desired. I called it FAQ.aspx
  5. Right-click new page and select Edit File in Advanced Mode.
• Add the FAQTopics to the page
  1. Click on one of the left web part zones
  2. Click the Insert ribbon and choose Empty Data View from the Data View button. This will create a DataFormWebPart. This will work best since it gives us access to the html directly and allows us to easily customize the selected row styles.
  3. Click the Click here to select a data source link in the middle of the DataFormWebPart and select FAQTopics (you may have called it something different). The screen won’t change much, but open the Data Sources Details panel (if it is not all ready visible). Here you will see a list of columns from the FAQTopics.
  4. Drag over the column you want to display in the FAQTopics list. In my case, I used Title. Please, note, this field should uniquely identify the row.
  5. On the Options ribbon, set any filters or sorting you may need by clicking the Filter and Sort & Group buttons.
  6. You can now test what we have done. Click the Home ribbon and then click the Preview in Browser button. This will open your page up in the browser. It should show a list of rows from your FAQTopics table.
• Add the FAQ List to the page
  1. Click on one of the right web part zones
  2. Click the Insert ribbon and choose FAQ List from the Data View button. This will create a XsltListViewWebPart. Note, we didn’t create an Empty Data View (like we did for the FAQTopics) and instead selected the FAQ List. This causes SharePoint Designer to use the default XsltListViewWebPart. You could use a DataFormWebPart like we did for the FAQTopics, but you may lose some functionality. For example, if you want to use the Rating stars to allow users to rate the FAQs, they don’t really work when you use the DataFormWebPart and instead you just get the number stored in the database. So, depending on your needs, pick the appropriate web part. The rest of the steps are the same regardless.
  3. You can now test what we have done. Click the Home ribbon and then click the Preview in Browser button. This will open your page up in the browser. It should show a list of rows from your FAQTopics table and also have the list of FAQs on the right side. They are independent of each other right now, but we’ll connect them next.
• Connect the two lists
  1. Right-click anywhere in the FAQTopics web part on the left and choose Add Connection.
  2. Choose Send Row of Data To (the default).
  3. Click the Next button.
  4. Click Connect to Web Part on this page (the default).
  5. Click the Next button.
  6. Choose FAQ List from the Target Web Part drop down list.
  7. Choose Get Filter Values From from the Target action drop down list.
  8. On the right set of columns (called Inputs to FAQ List) in the list of columns scroll down to the column you want to group by and will match the text in the FAQTopics. In my case the column is called Topic.
  9. Click the column (it shows as <none> initially) to the left of the Topic column. You will notice that <none> turns into a drop down list. Select the matching column from the list. In my case, I selected Title.
  10. Click the Next button.
  11. Select Title from the Create a hyperlink on drop down list.
  12. Check the Indicate current selection using checkbox.
  13. Click the Modify button and select the column that uniquely identifies the row. In my case, this is Title.
  14. Click the Next button.
  15. Click the Finish button.
  16. You can now test what we have done. Click the Home ribbon and then click the Preview in Browser button. This will open your page up in the browser. It should the two lists like before, except this time the first item in the FAQTopics (the one on the left) should be bold (the default style for the currently selected row). You can each row and the list on the right side (FAQ List) should update to show only the rows that match the selected FAQTopic.
• Tweak the UI (optional)
  1. This step is totally optional if you are happy with the default styles, etc of the topics on the left.
  2. Do a search for bold in FAQ4.aspx. You will find a tag like this:
     
     <xsl:attribute name="style">
          <xsl:if test="$CurrentRowKey = $dvt_curselkey">font-weight: bold;</xsl:if>
     </xsl:attribute>
     
     This adds the style=”font-weight:bold:” to the link tag. You can modify this or if you prefer, you can add a css class reference by adding the following lines after the lines for the style attribute.
     
     <xsl:attribute name="class">
          <xsl:if test="$CurrentRowKey = $dvt_curselkey">selected</xsl:if>
     </xsl:attribute>
     
     In this case if the row is selected we the link tag to have class=”selected” to it. Then in your stylesheet you create a .selected style. The name (selected) is not important, but it does need to match what you have in your stylesheet.