Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates


Published on

In these slides we provides information about new technology (CSR) to learn you how to customize the way users interact with list data, and how to develop solutions that change the way data is rendered.

Published in: Technology, Business

SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates

  1. 1. SharePoint Saturday Gulf #SPSGulf Client Side Rendering in SharePoint 2013 (DeepDive) Muawiyah Shannak Our Sponsors:
  2. 2. Twitter: @MuShannak Blog: LinkedIn: Slideshare: Website: Muawiyah Shannak SharePoint Architect, MCC & UAE-SPUG Leaders
  3. 3. Agenda • Introduction • CSR Model • Advantages • Building CSR Template
  4. 4. OOTB List forms and views
  5. 5. Customize SP 2013 forms & views
  6. 6. What is Client-side rendering (CSR) Client-side rendering enables you to customize UI components by using JavaScript on the client as opposed to on the server.
  7. 7. Server Side Render Request HTML Content DB Server Processing Browser
  8. 8. Client Side Render (CSR) Request JSON Browser Content DB Server Processing JSON to HTML
  9. 9. CSR advantages over other options Single field, entire view or form Rendering is performed on the client side. Web developers will already be familiar with JavaScript Consistency with SharePoint OOTB views and forms
  10. 10. Build and Use CSR Template
  11. 11. Build CSR Template Field (internal name) Display mode Function return string (html) value
  12. 12. Where we can use CSR Templates Override fields render in display, edit and new forms. Display Templates • Fields • Items • Body • Group • View • Header • Footer
  13. 13. CSR & List Views
  14. 14. CSR Item Template
  15. 15. CSR & Forms
  16. 16. OnPreRender and OnPostRender : The JavaScript event handler for the event that occurs immediately before the field is rendered to its containing place. Useful usage scenario: request more dilated data : The JavaScript event handler for the event that occurs immediately after complete the field HTML render. Useful usage scenario: applying JQuery UI transformation
  17. 17. Link CSR files
  18. 18. Samples
  19. 19. Our Sponsors: SharePoint Saturday Gulf #SPSGulf Thank You!