Creating a more flexible master-detail layout in SharePoint 2010

In an earlier entry I gave instructions on how to easily create a master-detail layout in SharePoint 2010 using SharePoint Designer 2010. I found one limitation of it is that the initially selected item is always the first item in the topics list. Another one is that there is no way to link to the page with anything other than the first topic selected. To get past those short comings, it requires a little bit more of tweaking. Below is the updated instructions. I have copied the previous entry and modified it.

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.

• 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.
• Add support for query string to Topics DataView
1. Right-click on one of the DataViews and then choose Manage Connections.
2. Remove the Connection we added earlier. We needed to add the connection in the first place so that it added support for current selected item.
3. Select the Topic DataView
4. Click the Parameters button and click the New Parameter button to create a new parameter called something like Topic.
5. Change the Parameter Source drop down list to Query String.
6. Enter Topic into the Query String textfield.
7. For Default value, enter the topic you would like to be selected when the page loads for the first time or there is no topic specified in the url. For example, if you topics are Topic 1, Topic 2, Topic 3 and you would like Topic 2 to be selected by default then enter Topic 2. NOTE: You can change this in the future by selecting the DataView and then Parameters again.
8. Make sure you have SharePoint Designer 2010 set to Split view so that you can see code and the Designer view at the same time.
9. Click on one of the rows in your DataView. This will show something like this:
   <td class="ms-vb">
        <xsl:value-of select="@Title"/>
   </td>
10. Replace or modify the snippet above to look like the following:
    <td class="ms-vb" nowrap="nowrap" style="height: 23px">
        <a target="_self">
        <xsl:attribute name="href">
            <xsl:text>?Topic=</xsl:text>
            <xsl:value-of select="ddwrt:UrlEncode(string(@Title))"/>
        </xsl:attribute>

    <xsl:attribute name="style">
        <xsl:if test="$CurrentRowKey = $Topic">font-weight: bold;</xsl:if>
    </xsl:attribute>
    <xsl:value-of select="@Title" />
    </a>
</td>
NOTE: If you are showing a field different than Title you will need to change @Title to the name of your field. Also, if you name your parameter something other than Topic, you will need to change the $Topic to the name you used. If you typed something else in the Query String textfield you will need to change ?Topic to that as well. I have bolded each of the items you may need to replace depending on the values you entered in previous steps.

• Add support for query string to FAQ DataView
1. Select the FAQ DataView
2. Click the Filter button on the Data View Tools | Options ribbon.
3. Select Topic from the Field Name drop down list.
4. Select Create a New Parameter… from the drop down list.
5. Change the Name of the parameter to Topic.
6. Change the Parameter Source drop down list to Query String.
7. Enter Topic into the Query String textfield.
8. For Default value, enter the topic you would like to be selected when the page loads for the first time or there is no topic specified in the url. For example, if you topics are Topic 1, Topic 2, Topic 3 and you would like Topic 2 to be selected by default then enter Topic 2. NOTE: You can change this in the future by selecting the DataView and then Parameters again.
   
• 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 = $Topic">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 = $Topic">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.