1. DEV103 – Web Part Transformers – More than meets the eye By: D’arce Hess

2. Agenda Introduction References What is Client Side Rendering? Lists Questions Code

3. Introduction

4. D’arce Hess @darcehess https://www.linkedin.com/in/darcehes s Darce.Hess@avepoint.co m

5. Lists

6. Custom Lists Document Libraries AnnouncementsEventsTasks Types of Lists Calendars

7. Where we came from Used XSLT Overrides Used Custom Code Solutions 

8. I XSL T SAID NO ONE EVER!

9. What is Client Side Rendering

10. Can use jQuery to aid in development across the platform Use CSS to control look & feel Easier to create than XSLT Alternate to: Custom.NET Web Parts Custom.NET Applications Script Editor hacks Enter Client-Side Rendering

11. FieldsEdit Forms ValidationList Views http://dev.office.com/patterns-and-practices-detail/1851 Control the rendering of SharePoint data with JavaScript

12. Overrides rendering of Header Item Footer Create any HTML/CSS Applies to all lists on page* Use the list title for targeting

13. Real World Examples Custom News List

14. Custom Events List Custom Links ListCustom List

15. Where is jsLink referenced? The jsLink field is found in the edit-mode menu for the web part. ~sitecollection/SiteAssets/announcement.js

16. Where to Store files Store files in “Site Assets” It’s ok to use SharePoint Designer or Visual Studio

17. Where are Display Templates Located in _catalogs/masterpage

18. Where to override for Display Template Use to overwrite the List Template

19. Why would you want to change the look? Takes up too much space on the page. Want a new look and feel Adds visual indicators to a user about functionality.

20. Our Demo List

21. Without altering the template

22. Lots of columns Doesn’t fit well in small sections All of our Columns

23. You can only use one script per type of list on a page.

24. The Code

25. Example

26. Overriding the List Template Each list comes with a default ListTemplateType. This is what we will override to create our own HTML presentation.

27. Use the Internal Column Name *Remember that you have to use the internal field name, not the column display or your field will return “undefined”.

28. Demo

29. References http://dev.office.com/patterns-and-practices-detail/1851

30. Questions