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

11,801 views
11,054 views

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
4 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total views
11,801
On SlideShare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
156
Comments
4
Likes
2
Embeds 0
No embeds

No notes for slide
  • My name is Muawiyah Shannak, I’m a SharePoint Architect and one of UAE-SPUG Leaders

  • 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.
  • 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
  • Go to Site contentAdd an App form Apps Store
  • RequestRetrieve item(s) from databaseBind item(s) to ASP.NET Control(s)Return rendered HTML
  • 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
  • Go to Site contentAdd an App form Apps Store
  • 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.
  • 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#>”
  • UseClient-Side Rendering to Customize the Default List View~site/Style Library/CSR/FirstDemo.js
  • Full Page: RequiredApp Parts and Custom Actions: OptionalCustom Action also known as “UI command extensions”
  • UseClient-Side Rendering to Customize the Default List View~site/Style Library/CSR/FirstDemo.js
  • Full Page: RequiredApp Parts and Custom Actions: OptionalCustom Action also known as “UI command extensions”
  • Full Page: RequiredApp Parts and Custom Actions: OptionalCustom Action also known as “UI command extensions”
  • Full Page: RequiredApp Parts and Custom Actions: OptionalCustom Action also known as “UI command extensions”
  • UseClient-Side Rendering to Customize the Default List View~site/Style Library/CSR/FirstDemo.js
  • UseClient-Side Rendering to Customize the Default List View~site/Style Library/CSR/FirstDemo.js
  • 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: 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. 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 http://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a
    19. 19. Our Sponsors: SharePoint Saturday Gulf #SPSGulf Thank You!

    ×