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)
- 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:
- 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.
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.