Creating a News Carousel List-View in a SharePoint App using Client Side Rendering

In preparations for my talk on January the 30th, 2013 in just 2 days, at the Swiss SharePoint Club, in Geneva, i wanted to share something about benefits of the new Client-Side rendering feature in SharePoint 2013. (The full project is available on CodePlex at https://newscarrouselapp.codeplex.com/)

Much has been written around this capability, so I won’t go through the same theory again, however I’d like to share a practical example of using Client-Side rendering into creating a Carousel from the Announcements list, all from within a new SharePoint-hosted app.

Chris has already written an excellent article using CSR while creating a collapsible FAQ-like control, make sure you read it at http://www.sharepointnutsandbolts.com/2013/01/using-jslink-to-change-ui-of-sharepoint_20.html:

There were still some things it didn’t quite match with his solution:

  • I wanted a pure SharePoint-hosted app solution, and not a Sandbox solution
  • Changing alternate style just for simple list view does not quite fit a real-time scenario, potentially ruining the whole branding and design already put in place.

The challenges faced were mainly due to deploying and including resources (such as multiple jQuery libraries, images and potentially multiple CSS style-sheets).

I assume basic familiarity with creating SharePoint-hosted apps, which is also the easiest of the app model, as such model not only it could interact with the Host Web, but also could easily deploy Content types, custom lists of its own.

The solution you find as attached is practically containing:

  • A custom List definition (based on the Announcements list) and a new list instance (called News). Practically, at deployment on the automatically created sub-web, also a new list, called News will be created and populated with some dummy data (you find that in the list instance Elements.xml file)
  • a JavaScript file containing the actual CSR routine that would be automatically loaded while selecting the Carrousel view. The way this is bound to the actual list instance (practically to each List template) is to be found the in the Schema.xml file (News list folder in the attached VS solution). Unfortunately  the JSLink currently cannot be set via the new List designer (which I must say is an excellent addition in comparison with previous edition of Visual Studio). There a 2 ways to change it: either by editing settings of the new Data view web part – in the lowest section, or via the list view definition, as depicted in the next screen:Image
  • Multiple JQuery libraries, used by the actual slider component. These are all deployed via the Scripts module, which however copies them in JS folder in the sub-web hosting the actual SharePoint App.
  • Multiple CSS style-sheets, again deployed using the same strategy, deployed in the CSS folder. The main issue with styles is that the CSS files need to be referenced  dynamically because of the way the SharePoint app path gets constructed (described here http://technet.microsoft.com/en-us/library/fp161230.aspx), by employing some routines which enable:
  1. retrieval and decoding of the SPWebAppUrl query string parameter (parameter which gets automatically populated by specifying it in the “Query String” in AppManifest.xml) – read more here to understand how it works http://msdn.microsoft.com/en-us/library/jj163816.aspx. This is extremelly important as we need to re-create the actual path for the <link rel=”stylesheet” /> tag.
  2. Generate using Javascript, the “link” tag on the fly so that the Url is properly pointing to the final location of the CSS files, the function calls are depicted in the next picture:
    Image
  • One custom action which deals with loading all necessary jQuery libraries. This action is very important because in order to load dynamically JavaScript files, without been able to either deploy them physically in _layouts or changing the actual master page, the alternative is via ScriptLink custom action. The trick is that official documentation in MSDN only mentions that Ribbon and ECB menu actions could be created.
    It seems that it is possible to benefit from the power of creating a CustomAction which deals with dynamically loading JavaScript either via ScriptLink or by using the ScriptBlock to execute directly JavaScript code.
    Image

Ok, so at this stage we should have all resources deployed and loaded dynamically. The only part we haven’t actually discussed about is the actual CSR related part, which deals with replacing standard rendering of grid-based list view, with our own predefined. The content of the NewsCarousel.js file has everything related to generating the new HTML to render.

What is important to mention also is that you need to specify both the Header and Footer as well as the  Item templates. Is pretty self-explanatory so far, however the Array constructed  as such must be assigned at the end using the  RegisterTemplateOverrides function call of the TemplateManager. At the same time, we have the opportunity to  register 2 handlers for the  OnPreRender and OnPostRender which could give you additional hooks into before and after the HTML has been generated.

That is pretty much all, I hope it does serve as an example to learn some more about the new exciting way of using more and more client-side object model and the new SharePoint apps model.

C:\>Marius

Advertisements

2 responses to “Creating a News Carousel List-View in a SharePoint App using Client Side Rendering

  1. So much text and not a single screenshot how the final result will look like – not on codeplex, nor here. Marius, do share the end result 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s