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:
- Replaced the existing style sheet with a style sheet that displayed the raw XML.
- Copied/pasted the raw XML into Notepad and saved it as an XML file (I called mine RSSXMLResults.xml).
- Opened my SharePoint page in SharePoint Designer and added the XML file as a data source.
- Inserted an Empty Data View to my page and connected it to the RSSXMLResults data source.
- Created the new XSL value-of select statements in SharePoint Designer.
- 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”>
<xsl:output method=”xml” version=”1.0″ encoding=”UTF-8″ indent=”yes”/>
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: