Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
SharePoint Saturday Gulf 
#SPSGulf 
Client Side Rendering in SharePoint 2013 
(DeepDive) 
Muawiyah Shannak 
Our Sponsors:
Twitter: @MuShannak 
Blog: mushannak.blogspot.ae 
LinkedIn: linkedin.com/in/shannak 
Slideshare: slideshare.net/MuawiyahSh...
Agenda 
• Introduction 
• CSR Model 
• Advantages 
• Building CSR Template
OOTB List forms and views
Customize SP 2013 forms & views
What is Client-side rendering (CSR) 
Client-side rendering enables you to customize UI components by 
using JavaScript on ...
Server Side Render 
Request 
HTML 
Content DB 
Server 
Processing 
Browser
Client Side Render (CSR) 
Request 
JSON 
Browser 
Content DB 
Server 
Processing 
JSON to HTML
CSR advantages over other options 
Single field, entire view or form 
Rendering is performed on the client 
side. 
Web dev...
Build and Use CSR Template
Build CSR Template 
Field 
(internal 
name) 
Display 
mode 
Function return 
string (html) 
value
Where we can use CSR Templates 
Override fields render in 
display, edit and new 
forms. 
Display Templates 
• Fields 
• I...
CSR & List Views
CSR Item Template
CSR & Forms
OnPreRender and OnPostRender 
: The JavaScript event handler for the event that 
occurs immediately before the field is re...
Link CSR files
Samples 
http://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a
Our Sponsors: 
SharePoint Saturday Gulf 
#SPSGulf 
Thank You!
SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
Nächste SlideShare
Wird geladen in …5
×

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

14.465 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie, 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: 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!

×