Applies to SharePoint 2013, 2016, Office 365
This is not a comprehensive guide to the XMLViewer web part or csrShim but provides the information necessary to enable CSR. For additional details about how to use csrShim see the csrShim Documentation on GitHub.
How to Get the Code
The example created using the steps in this post can be found in full as part of the csrShim repository:
The full project can be found on GitHub:
You can download or clone the repository directly from that site. You can also view the code directly on the site.
Why the XMLViewer and not the RSSViewer
The RSSViewer does not allow the execution of code within script blocks generated by XSL. XMLViewer is able to support all of the same feed types as the RSSViewer but it allows csrShim script blocks to be executed.
Additionally, csrShim can easily be extended to support custom XML Feeds.
Standard Client Side Rendering
Additional information about how to use standard client side rendering with list views can be found in my earlier List View Client Side Rendering (JSLink) Primer series.
SharePoint does not support using standard CSR with XMLViewers (No JS Link property is defined). However, csrShim exposes parameters that will enable this functionality including the same set of event callbacks and templates described in the above guide.
csrShim is an open source solution that fills the gap of many of the limitations presented by the OOTB client side rendering.
csrShim is an XSLT solution that can be used to:
- Enable JSLink CSR with Content by Query web parts
- Enable JSLink CSR with XMLViewer web parts supporting RSS, RDF, Atom, and Atom2
- Can be easily extended to enable JSLink CSR with XMLViewer web parts and custom XML
- Solve the multiple list views per page issue through simple parameter configuration
csrShim is available through GitHub at:
In the following example, we will be targeting on premise SharePoint 2013. We will be using a publicly available RSS feed from Netflix regarding their DVD service. However, csrShim easily handles other common feed types as well.
To use csrShim, an XMLViewer web part only needs the csrShim.xsl stylesheet from the csrShim project. However, an XSL Wrapper will also be required to pass parameters.
Upload the csrShim.xsl stylesheet to a library on your site (The Style Library of the root site of a site collection is a great spot for this!).
The XMLViewer webpart does not expose XSLT Parameter properties as do the XSLTListView and Content by Query web parts. There are no ParameterBindings elements to be found in their definition.
In order to pass parameters to csrShim, an XSL Wrapper stylesheet is required. This is a very simple file (A sample wrapper is included in the csrShim Examples folder). Here is what ours will look like:
<?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl x d ddwrt asp SharePoint ddwrt2 o __designer" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal" xmlns:o="urn:schemas-microsoft-com:office:office" ddwrt:ghost="show_all"> <xsl:import href="/Style Library/csrShim/csrShim.xsl"/> <xsl:variable name="BaseViewID" select="50"/> <xsl:variable name="JSLink" select="'/intranet/Style Library/csrShim/FeedDisplay.js'"/> </xsl:stylesheet>
Here’s what’s happening up there:
- Lines 1-14 are just standard XSL boilerplate. Just copy this into your own, you shouldn’t need to change this at all.
- Line 16 imports the csrShim stylesheet (just adjust the href value to point to your csrShim location (relative to the site))
- Line 17 sets the value for the BaseViewID parameter
- Line 18 sets the value for the JSLink parameter. Update this to point to your JSLink file(s) relative to the domain
Upload the XSL Wrapper stylesheet to a library within your site (The Style Library of the root site of a site collection is a great spot!).
A simple JSLink file, FeedDisplay.js, has been put together (available in the Example folder in the csrShim project) to display this particular feed.
For details about how CSR templates and event callbacks work see the List View Client Side Rendering (JSLink) Primer series. For this sample, we’ll just take a look at the parts unique to this solution.
The header and footer templates take advantage of the csrShim ContextInfo (ctx) object’s RootData property since this contains additional information about the feed itself. In this case the title of the feed and the description are used. These values are not guaranteed and are up to the feed provider.
The item template could be an item template for standard list items. The only thing of note here is that the Netflix feed supplies an HTML description and we are breaking it apart to show the included picture next to the description (rather than above it as it comes from the feed).
Upload the FeedDisplay.js file to a library within your site (The Style Library of the root site of a site collection is a great spot!).
Configuring an XMLViewer to use csrShim
Adding an XMLViewer to a Page
On a web part page where you want to display your feed:
- Edit the page
- Click the Add a Web Part button in the zone where you wish your feed to end up
- Choose XML Viewer under Content Rollup
- Using the web part dropdown, choose Edit Web Part to open the toolpane
- Set the value of the XML Link property to: http://dvd.netflix.com/Top25RSS?gid=307
- Set the value of the XSL Link to the XSL Wrapper uploaded earlier (NOT csrShim directly):
- Click OK
- Stop Editing the Page
The RSS feed should now use the CSR display:
The craziest part of this whole solution is how outdated these movies are!
Best Practices for csrShim with XMLViewers
- Always use an XSL Wrapper around csrShim so that you can set parameters
- Provide a unique BaseViewID to prevent conflicts with the default value of 1 (standard CSR with list views uses this value)
- If reusing JSLink files between CQWPs, list views, and/or feeds, use the ctx.ShimType property to create conditional property retrieval as needed
- Explore the ctx object to see what properties are available in the RootData and the ListSchema objects
- Feed properties are not guaranteed. Always check for the values existence before using it
- Wrap your JS Link code in an Immediately Invoked Function Expression (IIFE)
- Unlike an RSSViewer web part, there is no row limit property for the XMLViewer. If you wish to restrict the number of results, increment a count in the Item template and stop returning values when that count is exceeded