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.
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.
10. Client Side Render (CSR)
Request
JSON
Browser
Content DB
Server
Processing
JSON to HTML
11.
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
14. Build CSR Template
Field
(internal
name)
Display
mode
Function return
string (html)
value
15.
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
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
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