Filter on Headers in Data Form Webpart with Linked Data Source (SP2010)

I’ve been struggling with this for a couple of days and finally stumbled onto the solution. Here is the scenario.

I had several identical lists targeted to different sets of users. Lists are all in same site. The customer wanted a roll-up view on the site home page displaying only a few columns from the lists. I did the usual to create the roll-up view:

  1. Created a Linked Data Source in SharePoint Designer that merged the data in all the lists.
  2. Inserted a blank Data View on the home page
  3. Add my Linked Data Source to the Data View
  4. Added the columns I wanted in the Data View which included a People Picker column which displayed a single user.
  5. Enabled Sort & Filter on Headers for the Data View

This is when I ran into the problem. Sorting and Filtering worked correctly on all but the People Picker column. When displaying the “Sort & Filter” dropdown for this column I got this:

    

This is not very user-friendly.

I searched high and low but was unable to find a solution. I finally noticed that there are a couple other fields related to the People Picker field, namely “<ColumnName>.title”. You’ll see these in the Data Source task pane which displays all columns in the data source. To get this to work I did the following:

I changed the “value-of select” to use <ColumnName>.title.


Then, in the XSL that creates the Table Headers, I modified the “sortable” parameter value and the “fieldtype” parameter value changing the first to “1” and the second to “Text” (see below). Important note: this technique does not work for multi-select people picker columns.


The result was a usable filtering list.

Advertisements
Posted in Uncategorized | Leave a comment

Customizing the SharePoint 2010 RSS Viewer Web Part (part 2 of a two part post)

In part 1 of this post, I provided a walkthrough of how I created the following value-of select statements, which I will now use to create the custom XSL Style sheet for the RSS Viewer web part. I want to take a moment to thank Justin Fentress for helping with this part. As you’ll see, making sense of the out-of-the-box (OOTB) RSS Viewer web part XSL Style sheet is quite challenging.

Copy the OOTB Style sheet from the RSS Viewer web part and paste the code into an XML editor (I use NotePad ++).

 

 

 

 

 

 

 

 

 

There are over 300 lines of code but it turns out you only need to modify a few sections. Since this is for an RSS Feed, the following sections apply:

The RSSMainTemplate section displays the name of the RSS Feed (Home: NewsLibrary in this case) which we don’t need. So we can delete the following lines from this section. It also calls the RSSMainTemplate.body, so let’s look at that next.

The RSSMainTemplate.body is what we are most interested in as it will display the content of the RSS Feed. Delete the lines I have highlighted below (everything between the xsl:for-each statement). This is the code that provides the “expand/collapse” behavior in the OOTB web part.

Next, add the three value-of select statements created in part 1 of this post. This is what should be in the RSSMainTemplate.body section now.

The next to last step is to completely remove the RSSMainTemplate.description section. This section is used to display the contents of the “Description” node of the RSS feed XML. We no longer want to display all of that content. After deleting this section and copying/pasting this new XSL Style sheet into the RSS Viewer web part the result should look something like this:

The final step is to add the CSS styling around each value-of select statement. By viewing the HTML source of the https://volunteer.heart.org we can determine the correct styling. The final XSL Style sheet now looks like this (only showing the RSSMainTemplate and RSSMainTemplate.body)

And the customized RSS Viewer web part looks like this:

Posted in Uncategorized | 1 Comment

Customizing the SharePoint 2010 RSS Viewer Web Part (part 1 of a two part post)

Out-of-the-box (OOTB), the RSS Viewer web part provides a very basic display of an RSS feed. Fortunately, there is an option for editing the XSL Style sheet. With a custom style sheet, you can select and style nearly anything in the RSS feed to meet your needs. Here is an example of how you can do this.

We’ll use this great looking public web site for our example – https://volunteer.heart.org. It offers an RSS feed that contains the news items that appear on the main page under the “National” tab. We will use the RSS Viewer web part and a custom style sheet to display the same news items, styled the same way (with help from our good friend Justin Fentress), on our own site.

I’ve create a new page called CustomRSSViewerWebPart.aspx on my development SharePoint environment, added the RSS Viewer web part, dropped the RSS feed URL in the web part properties and ended up with this result.

Clicking on the News item title provides a bit more content (see below), but not exactly what I want. What I want is the Thumbnail image, the Title (linked to the Item) and the Brief.

Next, we’ll need to determine the best way to edit the existing style sheet to produce the desired results. The approach I took was as follows:

  1. Replaced the existing style sheet with a style sheet that displayed the raw XML.
  2. Copied/pasted the raw XML into Notepad and saved it as an XML file (I called mine RSSXMLResults.xml).
  3. Opened my SharePoint page in SharePoint Designer and added the XML file as a data source.
  4. Inserted an Empty Data View to my page and connected it to the RSSXMLResults data source.
  5. Created the new XSL value-of select statements in SharePoint Designer.
  6. Edited the OOTB RSS Viewer XSL to include the new XSL value-of select statements and CSS styling.

Here are the details for each step above.

Replaced the existing style sheet with a style sheet that displayed the raw XML.
Replace the existing style sheet in the RSS Viewer web part with this style sheet:

<?xml version=”1.0″ encoding=”UTF-8″?>

<xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”&gt;

<xsl:output method=”xml” version=”1.0″ encoding=”UTF-8″ indent=”yes”/>

<xsl:template match=”/”>

<xmp><xsl:copy-of select=”*”/></xmp>

</xsl:template>

</xsl:stylesheet>

The RSS Viewer web part will look like this:

Copied/pasted the raw XML into Notepad and saved it as an XML file (I called mine RSSXMLResults.xml).

I’ve highlighted the data we will need to create our view:
News item Title and Link (pink highlight)
News item Brief (yellow highlight)
News item Thumbnail image URL (green highlight)

Opened my SharePoint page in SharePoint Designer and added the XML file as a data source.


You may also receive a prompt confirming you want to upload the XML file to your site. Click “ok”.

Inserted an Empty Data View web part to my page and connected it to the RSSXMLResults data source.

Created the XSL value-of select statements in SharePoint Designer.

In the Data Source Details task pane, scroll down to the “Item” section and select the “title” of the first item. Then, select the “Insert Selected Field as . . ” drop down and select “Single Item View”. This will add the “title” of the item to your Data View web part.

The Data View web part should look like this.

I deleted the title label in the first cell then used the commands in the Ribbon (Data View Tools >Table tab) to add another row to my table, merge the two cells on the left and then added the Description field from my data source to the other two cells. I added the Description field using similar steps to adding the “Title” field above.

The Data View web part should now look like this:

Next, for the fun part, I modified the XSL value-of select statements in code view to get exactly what I wanted.

I clicked on the lower right cell. This will also highlight the value-of select in the code view. I then used the substring-before and substring-after functions to select the right portion of the Description field. I also enabled the disable-output-escaping attribute to get rid of the HTML tags.

Here’s the modified value-of select statement and result.

Next, I did essentially the same thing with the left cell and ended up with this result, which was close but not quite what I needed. I needed to display the image referenced by the URL.

Long story short, I ended up creating a variable to which I assigned the images URL then used an HTML <img> tag with the SRC set equal to my variable.

Lastly, I needed to change the Title so it would link to the news item on the source site. I did this by wrapping the title in an HTML <a> tag and set href equal to “link” node of the items XML (you can see the “link” node in the Data Source Details task pane).

At this point, I copied my value-of select statements and went back to the OOTB RSS Viewer web part. I’ll cover that in Part 2 of this post.

value-of select statements:

Posted in Uncategorized | 2 Comments

Using a Data View Web Part to create a cross-site lists rollup view (Office 365 SharePoint Online and SharePoint 2010)

Recently, I had a need to create a security-trimmed rollup view of list items from multiple sub sites. The specific scenario looked like this:

I wanted to see the latest Status Report from each site displayed on the Root Site. This was the desired end result:

Since this was being built on Office365 SharePoint Online (SPO), 3rd party web parts were not an option since none of them work on SPO, nor was creating a custom Web Part as the part of the OM needed to provide security trimming is not accessible on SPO. The only option was to try to use a Data View Web Part (DVWP) to create the desired result.

It turns out there is very little you can’t display with a DVWP if you are willing to enter the world of CAML queries, XSL tags and XPATH expressions; a world not for the faint of heart. However, I was convinced the solution to this problem was a Data View Web Part, and so my journey into the world of CAML, XSL and XPATH began.

My first stop was on Marc D. Anderson’s website where I purchased his eBook Unlocking the Mysteries of the SharePoint Data View Web Part XSL TagsI highly recommend adding this to your reference library. Next, I created an Office 365 SharePoint Online site collection . . . . . I added a few sub sites (HR, Legal and Finance) . . . . . . .created a custom list on the Root site and each sub site called StatusReports (with two columns – WeekEnding of type DateTime and Discipline of type Text) . . . . and then added some sample items to each list. Basically, I created what I described in Figure 1 above.

Now here are the steps to make this all work.

  1. Open the Root site in SharePoint Designer (SPD).
  2. In the Design-mode window, place the cursor in the location where you want the new DVWP.
  3. In the Ribbon, go to the Insert tab, select the Data View dropdown and select Empty Data View from the list (see screen shot below). If you select the StatusReports instead, SPD will insert a List View Web Part which doesn’t provide the flexibility we need.

    *A caveat here is that we need to have a List on the Root site to create the initial DVWP. In the case where we don’t want a List on the Root site, after we complete configuring the DVWP, we can delete the item(s) in the Root site List and then use SPD to hide the List. DO NOT DELETE THE LIST AS IT WILL DELETE THE DVWP AS WELL.

  4. In the newly inserted data view click on the link labeled Click here to select a data source and then choose the StatusReports list.
  5. You should now see a new pane appear on the right of the screen displaying the StatusReports Data Source and all of its fields. Select the WeekEnding, then, at the top of the Data Source pane, select the Insert selected fields as… dropdown and choose Multiple Item View (see screen shot below).

  1. At this point, the Ribbon commands for this data view are active so we can start using them to add parameters as well as setup our Sort & Group. Click on Add/Remove Columns in the Ribbon. This will launch the Edit Columns wizard which you can use to add the Discipline column to our view (see screen shot below).

Your DVWP should look like this so far:

  1. As a best practice, we should only query the data source for content we will us in creating our view. To do this, we launch the Data Source Properties wizard by clicking the link just below Current Data Source in the Data Source Details pane. In the wizard we’ll click on the Fields button and remove all fields except for WeekEnding, Discipline, ID and Path (see screen shot below).

Your Data Source Details pane should look like this:

  1. So far, our DVWP is only pulling info from the Root site List. We want it to pull info from the same List that is on each sub site. In order to do this, we have to change the Mode and Select Command of our Data Source Control. The DVWP uses the SPDataSource control so we’ll need to find that control in the code view and modify the DataSourceMode property and the selectcommand statement. We’ll need to change the DataSourceMode from List to CrossList and we’ll need to add this tag – &lt;Webs Scope=&quot;Recursive&quot;&gt;&lt;/Webs&gt; – to the selectcommand statement just after the View opening tag.  It should look like this:

 

  1. Click in the design mode window to apply your changes and you should see your DVWP display all the items you’ve entered in the Lists contained in the sub sites – similar to this:

Now we need to figure out how to only display the newest status report from each list. By default, the sort order is by List Item ID. For our needs, we’ll first sort our data set by site (URL) and then by WeekEnding. This will essentially group the items by List and then order them by date, assuring we’ll always have then ordered correctly. After we get the data set sorted correctly, we can use an extremely useful function that is part of the ddwrt namespace called NameChanged to select the newest List Item for our view. It will make more sense after you see the code. Let’s get started.

  1. We can setup our sorting preference by using the Sort & Group command on the Ribbon. This will launch the Sort and Group wizard. We’ll want to add FileDirRef as our first sort order (Ascending is fine) and then add WeekEnding as our second sort order (choose Descending so the newest item is at the top).

This is what my DVWP is displaying after I apply my changes:

  1. Now we’ll go back to code view and look for the XSL template called dvt_1.rowview. This is the template used to select what will be displayed in the DVWP. We can add an if statement to this template so it only selects the first item from each list to display. Here is a screen shot of the code I added to the template.

Apply the changes and the DVWP should now look like this:

So what is going on here? Well, first we need to understand what this template is doing. The template is passed a row (List Item) and usually just displays whatever is in the value-of select statement from the row. In our case, we only want it do that when the row is the first row (Item) in each List from our sorted row set. We can do this by using the NameChanged function to compare the path string (@FileDirRef) to the value we are using to sort our data (in this case, FileDirRef – represented by the 0). FileDirRef is the path of the List Item, which will be the same for each Item in the same List. The first time this function is called, @FileDirRef is an empty string so the FileDirRef it reads in the first Item will be new and the function will return that value, which is greater than 0. This will allow the rest of the statements to execute causing the current row to be selected. The next row the function iterates through will only be displayed when the FileDirRef changes. You can read more about this function here – http://msdn.microsoft.com/en-us/library/dd583143.aspx#officesharepointddwrt_namechanged.

  1. The final step is to clean up our view so it doesn’t contain the Time in the WeekEnding field. We can use the substring function to do that. I also want to display the field as a link to the Display Item Form, so I’ll add that code as well. Here is what the cleaned up code looks like:

I can also apply some styling, such as bolding the column headings (do this in design mode using the Ribbon commands). Here is what my final DVWP looks like after I removed the Root site List item.

P.S. You’ll notice I created another rollup view of the Issues List from each site. The difference is that this time I wanted all items displayed and grouped by Discipline.

Posted in Uncategorized | Tagged , , | 33 Comments