1. Intro to Client-Side Rendering
By: Phil Jirsa
Thursday, November 15, 2018

2. About Me SharePoint Developer/Consultant MCTS phil.jirsa@rackspace.com
@pjirsa

4. Who Are You?
Site Collection Owner
Developer

5. Client-Side Rendering
What is it?
Why should I use it?
What can I do with it?
When should I NOT use it?
How does it work?
How can I make it AWESOME?

6. CSR (see-es-ar) noun
CSR is JavaScript code used by SharePoint 2013 list views and forms to create the final HTML output of list data to the browser.
Example: Watch me use CSR to create a SharePoint list view that will blow your mind.

7. Boring List Data

8. Less Boring List Data

9. Why CSR?

10. Why CSR?

11. CSR vs. XSL

12. CSR vs. XSL

13. CSR vs. XSL

14. CSR vs. XSL

15. Why CSR?

16. What can it do? Conditional formatting Field controls
Display Templates
Interactive UI
Present data however you want ∞

17. When NOT to use it Not an App replacement
Complex/Proprietary business logic
Form replacement
Legacy browser support

18. Server Render

19. Why XSL?
Backward Compatibility

20. After the Break
Code Samples

21. Break

23. Code Samples How CSR Works - The Basics Building on the Basics
Making it AWESOME

24. The Basics
Creating a JS file
Modifying List View

25. Building on the Basics What can I override?
What data is available to me?
Debugging my code

26. #AwesomeSauce JavaScript Template Engines The “skinny jeans” Team
Separation of Concerns

28. Demos

29. Summary Created a JS file Modified JS link property
Applied an override to a field, item, view/body
Created a re-usable template
Called Template framework to compile final HTML

31. References http://www.idubbs.com http://handlebars.js

32. Thank You!
Please submit feedback