SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
Download as PPTX, PDF4 likes15,855 views
The document discusses a presentation on client-side rendering (CSR) in SharePoint 2013 by Muawiyah Shannak, highlighting how CSR enables the customization of UI components using JavaScript rather than server-side processing. It outlines the advantages of CSR, including consistency with SharePoint forms and views, and illustrates how to build CSR templates for rendering fields and list views. The agenda includes an introduction, CSR model, and specifics on template building and usage scenarios for rendering fields in SharePoint forms.
SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
- 1. SharePoint Saturday Gulf #SPSGulf Client Side Rendering in SharePoint 2013 (DeepDive) Muawiyah Shannak Our Sponsors:
- 2. Twitter: @MuShannak Blog: mushannak.blogspot.ae LinkedIn: linkedin.com/in/shannak Slideshare: slideshare.net/MuawiyahShannak Website: mushannak-public.sharepoint.com Muawiyah Shannak SharePoint Architect, MCC & UAE-SPUG Leaders
- 3. Agenda • Introduction • CSR Model • Advantages • Building CSR Template
- 4. OOTB List forms and views
- 6. Customize SP 2013 forms & views
- 7. 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.
- 9. Server Side Render Request HTML Content DB Server Processing Browser
- 10. Client Side Render (CSR) Request JSON Browser Content DB Server Processing JSON to HTML
- 12. 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
- 13. Build and Use CSR Template
- 14. Build CSR Template Field (internal name) Display mode Function return string (html) value
- 16. Where we can use CSR Templates Override fields render in display, edit and new forms. Display Templates • Fields • Items • Body • Group • View • Header • Footer
- 17. CSR & List Views
- 20. CSR & Forms
- 21. 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
- 23. Link CSR files
- 26. Our Sponsors: SharePoint Saturday Gulf #SPSGulf Thank You!
Editor's Notes
- #2: My name is Muawiyah Shannak, I’m a SharePoint Architect and one of UAE-SPUG Leaders
- #7: 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.
- #10: XSLT:Extensible Stylesheet Language TransformationsXSLT is hard to develop/debugXSLT isn't everyone's first choice languageAsp.net Web part and pagesCustom field definition: Lots of moving parts (XML files and classes) and complexity
- #12: Go to Site contentAdd an App form Apps Store
- #13: RequestRetrieve item(s) from databaseBind item(s) to ASP.NET Control(s)Return rendered HTML
- #14: RequestRetrieve items from the SQL databaseReturn the item(s) as JSON variable inside the pageCall JavaScript rendering function when document be readyClienttemplte.js have functionality to render the list item(s)Custom JSLink templates override the OOTB templates
- #15: Go to Site contentAdd an App form Apps Store
- #16: Performance: because the rendering is performed on the client side, not the server, pages can load faster and work on the server is minimized. Flexibility: you can perform customizations on a single field or an entire view using either your own JavaScript functions or libraries such as jQuery.Standard development language (Cross-platform language): most Web developers will already be familiar with JavaScript, resulting in reduced development time for your customizations.Consistency: with SharePoint OOTB views and forms.
- #18: Initialize the variable that store the objectThe Templates.Fields property enables you to access individual list fields.The function is changing the Description item to be bold. The RegisterTemplateOverrides function call registers the templates for the list to use.Learn “<#=ctx.ListTitle#>”
- #19: UseClient-Side Rendering to Customize the Default List View~site/Style Library/CSR/FirstDemo.js
- #20: Full Page: RequiredApp Parts and Custom Actions: OptionalCustom Action also known as “UI command extensions”
- #21: UseClient-Side Rendering to Customize the Default List View~site/Style Library/CSR/FirstDemo.js
- #23: Full Page: RequiredApp Parts and Custom Actions: OptionalCustom Action also known as “UI command extensions”
- #24: Full Page: RequiredApp Parts and Custom Actions: OptionalCustom Action also known as “UI command extensions”
- #25: Full Page: RequiredApp Parts and Custom Actions: OptionalCustom Action also known as “UI command extensions”
- #26: UseClient-Side Rendering to Customize the Default List View~site/Style Library/CSR/FirstDemo.js
- #27: UseClient-Side Rendering to Customize the Default List View~site/Style Library/CSR/FirstDemo.js