O365 Saturday - Deepdive SharePoint Client Side Rendering
Download as PPTX, PDF2 likes1,028 views
This document provides an agenda for a presentation on Client Side Rendering in SharePoint. It will include an introduction to CSR, a deep dive, and a demo. It discusses how CSR allows developers to modify specific areas of lists, forms, and views using JavaScript and UI templating, rather than having to redevelop entire features. This avoids issues like previous requests requiring full new features and redevelopment. The demo will cover overriding fields in views and forms, applying validation, and using JavaScript templating to modify display forms.
O365 Saturday - Deepdive SharePoint Client Side Rendering
- 1. Deep Dive SharePoint Client Side Rendering http://business365.azurewebsites.nettwitter: #business365sg Riwut Libinuko Microsoft MVP
- 2. Connect with Me http://blog.libinuko.com @cakriwut http://www.youtube.com/user/cakriwut/ Riwut Libinuko I love coding, robotics, financial engineering and foods. I use Lego Mingstorm, Arduino, Raspberry Pi for my projects. My latest project is to create PBX using Raspberry Pi and Sipura 3102. Active contributors to MSDN Forum, Code Sample Gallery, Curah, Nuget, Codeplex and many more.
- 3. Agenda Introduction to Client Side Rendering Client Side Rendering Deep dive Demo
- 4. Story of Elephant and Blind Man "Hey, the elephant is a pillar," said the first man who touched his leg. "Oh, no! it is like a rope," said the second man who touched the tail. "Oh, no! it is like a thick branch of a tree," said the third man who touched the trunk of the elephant. "It is like a big hand fan" said the fourth man who touched the ear of the elephant. "It is like a huge wall," said the fifth man who touched the belly of the elephant. "It is like a solid pipe," Said the sixth man who touched the tusk of the elephant.
- 5. Story of SharePoint and… 5 PreSales – “It’s a portal that also serves as service and development platform for all of business application. When installed, it’s provide anything you need easily and quickly.” Infra Team – “We need 4 environment (dev-staging-preprod-prod) with same configuration. Each environment will need X number of servers and SQL server. ” Manager – “This is the productivity platform that provide cost reduction and increase productivity. But I have limited budget to spend.” Business User – “It can replace our old system and I want the same look and feel – and user experience with the old system. SharePoint can do anything easily and quickly.” Developer – “Too much limitation compared to ASPNET/MVC. I can not do SQL queries. I can not find the file in IIS. Its too difficult!”
- 6. ..this always happening.. 6 Engineer thinks that List view is a good tools (display user list data, user can modify it) Business wants to retain old apps looks and feel, highlight some important data etc. SharePoint Developer We create Webpart, Features and Web Solution Package but, need small customization Feature Plan New Redevelop Visual WebPart to display Grid with desired style YES NO Item context menu NO YES List item filtering NO YES List item search NO YES Link to Excel NO YES 1 simple request = 1 new feature + 4 or more REDEVELOPMENT
- 7. What if..? Developer can modify only on specific area and retain other functions? twitter: #business365sg http://business365.azurewebsites.net
- 8. ..the smart developer.. 8 Engineer thinks that List view is a good tools (display user list data, user can modify it) Business wants to retain old apps looks and feel, highlight some important data etc. SharePoint Developer Ok, we will modify only the specific area. Can be delivered without WSP deployment! but, need small customization Feature Plan New Redevelop Visual WebPart to display Grid with desired style YES NO Item context menu NO YES List item filtering NO YES List item search NO YES Link to Excel NO YES 1 simple request = 1 new feature + 0 REDEVELOPMENT
- 9. Introducing Client-Side Rendering Client Side Rendering modification - 4 different area of modification Fields, Item, Header, Footer - 4 different specific form fields modification (NewForm, EditForm, DisplayForm and View) - PreRender + PostRender customization - Use JavaScript and UI rendering - Modify only specific area and retain functionalities of un- modified area where developer turn the focus on UI rendering and modify only the specific area using new UI templating in Javascript List Fields Footer Header Item OnPostRender OnPreRender NewForm EditForm DisplayForm View
- 12. (function () { })(); CSR Pattern Register Override Register the overrides to DOM, so it will be part of call sequence Create Rendering Logic function RenderingTemplate(ctx) { // Logic } Function that will override rendering logic. Apply Rendering Logic Apply rendering logic to overrides any of 9 possible location FieldName – is internal fieldname that will be treated HTML Override – is the actual HTML tag to override. This can be pure HTML string, JavaScript function or both. If you embed JavaScript in HTML, the JavaScript should be enclosed in <#= #>. For example “<p><#= ctx.CurrentItem.Title #></p>”. var NewTemplateCtx = {} NewTemplateCtx.Templates = {}; NewTemplateCtx.Templates.Header = "HTML Override, including opening html tag"; NewTemplateCtx.Templates.Item = RenderingTemplate; NewTemplateCtx.Templates.Fields = { "FieldName" : { "View|DisplayForm|EditForm|NewForm" : "HTML Override"} } NewTemplateCtx.Templates.Footer = "HTML Override, including closure html tag"; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(NewTemplateCtx); 1 2 3 Add reference to the script in Webpart’s JSLink property , Note token options 1. ~site 2. ~sitecollection 3. ~layouts 4. ~siteLayouts 5. ~siteCollectionLayouts 4
- 13. Tools and Framework • JSOM, Javascript SharePoint Object Model – ECMA script to execute SharePoint API • Javascript framework such as Jquery, Mustache, Accordion etc. • Debugging tools IE, Chrome developer tools 13
- 14. Snippet for today demo 14 Function Override template The main function that defines new rendering logic. - ListTemplateType , integer that correspond to List BaseID (for example 100 for custom list) - fieldInternalName , change according to the field internal name what will be modified - item, header, footer, postRender, preRender , refers to the function override that will return HTML string 1 https://github.com/cakriwut/Business365.CSR
- 15. Snippet for today demo 15 Function fldSetup Function to prepare rendering, validation and postback during field Edit/New - formCtx, current field context - resultCallback, callback function to return the result of HTML element to SharePoint - valicationCallback, callback function to render any error message back to form - validators, array of custom validators object for the field. The validator object must define Validate prototype. 2 https://github.com/cakriwut/Business365.CSR
- 16. Demo Add JS reference to SharePoint ListView, NewForm, EditForm and DisplayForm • Login to SharePoint Online • Use bower to download all Javascripts and CSS components • Add Javascript reference to SharePoint • Modify JSLink in ListView, NewForm, EditForm and DisplayForm • Ready for next step..
- 18. Demo Overriding Field in View and DisplayForm In this demo we will go through the steps to modify List View and Display Form. I will modify the percentage field to show percentage bar and percentage value, instead of showing only percentage value. We will start by using Override snippet, identify field internal name and change rendering logic.
- 20. CSR Pattern for NewForm/EditForm • Use callback function to return field value from target HTML element. (Register callback function during initiation) • Use callback function to display validation message to target HTML element. (Register callback function during initiation) • Can contains one or more validators. Each validator is a Javascript object that contains Validate() prototype. • Error from server side validation will switch form mode from NewForm to EditForm. (Client side validation will not change the form mode) https://github.com/cakriwut/Business365.CSR
- 21. Demo Overriding Field in NewForm and EditForm In this demo, we will change a simple Country text field into dropdown input. The value will be loaded from REST service. Then we continue to make a cascading drop-down list, where Country dropdown will filter City dropdown. You will learn using promise javascript and how to return custom input HTML value to SharePoint during form submit.
- 23. Demo Applying Custom validation Applying custom validation can not be this easy. We can create simple client side validation or even validation that will trigger server side even. In this demo we will validate NRIC text box according to the algorithm defined for NRIC validation.
- 25. Demo Overriding DisplayForm using JS Templating (MustacheJS/Handlebar) Modifying DisplayForm is always become a dilemma, since CSR only provide per field modification. In this demo I will show the secret of DisplayForm and how to modify the rendering. As a bonus, I will extend the trick by applying JS Templating using Handlebars.
- 27. IdeasForFree Blog from Riwut Libinuko, a hands on IT Architect, also Microsoft SharePoint Server. Shares articles, tips and trick, troubleshooting on SharePoint and other technologies. Find out more at the http://blog.Libinuko.com
Editor's Notes
- #5: What is Client Side Rendering? [Pause] Client-Side rendering enables you to customize UI components by using JavaScript on the client as opposed to on the server.
- #10: What is Client Side Rendering? [Pause] Client-Side rendering enables you to customize UI components by using JavaScript on the client as opposed to on the server.
- #13: (function () { // Initialize the variable that stores the objects. var overrideCtx = {}; overrideCtx.Templates = {}; // Assign functions or plain html strings to the templateset objects: // header, footer and item. overrideCtx.Templates.Header = "<B><#=ctx.ListTitle#></B>" + "<hr><ul id='unorderedlist'>"; // This template is assigned to the CustomItem function. overrideCtx.Templates.Item = customItem; overrideCtx.Templates.Footer = "</ul>"; // Set the template to the: // Custom list definition ID // Base view ID overrideCtx.BaseViewID = 2; overrideCtx.ListTemplateType = 10057; // Assign a function to handle the // PreRender and PostRender events overrideCtx.OnPreRender = preRenderHandler; overrideCtx.OnPostRender = postRenderHandler; // Register the template overrides. SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); })(); // This function builds the output for the item template. // It uses the context object to access announcement data. function customItem(ctx) { // Build a listitem entry for every announcement in the list. var ret = "<li>" + ctx.CurrentItem.Title + "</li>"; return ret; } // The preRenderHandler attends the OnPreRender event function preRenderHandler(ctx) { // Override the default title with user input. ctx.ListTitle = prompt("Type a title", ctx.ListTitle); } // The postRenderHandler attends the OnPostRender event function postRenderHandler(ctx) { // You can manipulate the DOM in the postRender event var ulObj; var i, j; ulObj = document.getElementById("unorderedlist"); // Reverse order the list. for (i = 1; i < ulObj.children.length; i++) { var x = ulObj.children[i]; for (j = 1; j < ulObj.children.length; j++) { var y = ulObj.children[j]; if(x.innerText<y.innerText){ ulObj.insertBefore(y, x); } } } }
- #28: In Slide Show mode, click the arrow to enter the PowerPoint Getting Started Center.