Intro to Client Side Solutions in SharePoint 2013 “Leveraging Knockout and REST to enable rich client side customizations in SharePoint 2013” Highlights Review the technologies used in client side development Show examples of functional solutions developed using these technologies Almond Labs Saturday April 12, 2013 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com “Working to create products and solutions that improve user adoption, engagement and productivity with SharePoint.” Jay Landrum Co-Founder, Almond Labs AlmondLabs.com/Blog @AlmondLabs 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

Intro to Client Side Solutions Short history of SharePoint development Client side technologies Customizing SharePoint 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

SharePoint Development SharePoint 2007 – Server side code Web Parts, User Controls SharePoint 2010 - Client side object model CSOM built to support Silverlight but not complete SharePoint 2013 - Prioritizes client side development App model Office 365 and hosted SharePoint environments Search display templates List views Possibly turn this into a timeline 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

Why client side solutions? Fast prototyping and development Low impact deployment and updates No more recycled app pools! No downtime! No need to access the server Errors can be identified through the browser Allows significant customizations with just SharePoint designer 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com Required learning JavaScript jQuery Knockout.js JSON SharePoint REST Services Script on Demand 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com Java… script? Pros Client side code (runs in the browser, not on the server) Easy deployment enables quick, iterative development Dynamic typing and magic! Cons Development and cross browser support can be cumbersome Getting at back-end data can be difficult 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com jQuery Built on top of JavaScript, jQuery provides a verb oriented framework that simplifies almost every aspect of client side development. 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com jQuery Pros Simplifies and enables very quick client side development Solves the problem of cross browser support Numerous plugins exist to enhance the functionality Formally adopted by Microsoft Cons Constantly being supported/updated so you won’t have the latest version for very long 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com Without jQuery if (!document.getElementsByClassName) { document.getElementsByClassName = function (cn) { var allT = document.getElementsByTagName('*'), allCN = [], i = 0, a; while (a = allT[i++]) { a.className == cn ? allCN[allCN.length] = a : null; } return allCN; var flyouts = document.getElementsByClassName("Flyout"); for (var x = 0; x < flyouts.length; x++) { flyouts[0].styles.display = "none"; document.getElementsByClassName() is not supported by IE8 This isn’t even the largest example I found online. 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com With jQuery $(".Flyout").hide(); Change this transition to type out each individual character. One line of code. 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com Knockout.js Knockout provides a complete solution for using MVVM practices in client side development, including two way data- binding and easy extensibility. 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com Knockout.js Pros Solves the problem of creating dynamic, data-driven UI’s on the client side Does not depend on jQuery or other libraries Very complete and well documented Almost forces good development practices Adopted by Microsoft Backwards compatible to IE6 Cons Does not integrate with jQuery 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com Without Knockout.js <div id="Container"></div> <script type="text/javascript"> var data = […]; var ul = document.createElement("ul"); for (var x = 0; x < data.length; x++) { var li = document.createElement("li"); li.innerHTML = data[x].Name; ul.appendChild(li); } document.getElementById("Container").appendChild(ul); </script> 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com With Knockout.js <div> <ul data-bind="foreach: Data"> <li data-bind="text: Name"></li> </ul> </div> <script type="text/javascript"> function ViewModel() { var self = this; self.Data = […]; } ko.applyBindings(new ViewModel()); </script> 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com JSON Most simply, a way of representing data Lightweight and designed to be readable Becoming the standard of how data is passed on the web 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

JavaScript Object Notation Single record (object) { Name: "SharePoint Saturday Twin Cities", Description: "Our mission is to bring the..." } Collection of records (array of objects) [ }, Name: " SharePoint Saturday Twin Cities", Description: "A year-round resource..." ] 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com Demo Knockout.js 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com REST-ful web APIs REST web API’s provide a technology agnostic method of interacting with data. Generally, API endpoints support Create, Read, Update, and Delete operations (GET, POST, PUT, DELETE) Generally defined by readable Urls - In previous iterations, Microsoft supplied “Object Model” implementations for specific languages such as .NET and JavaScript. 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com REST Example Google Search https://www.google.com/search?q=SharePoint Saturday Boston Google Search API http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=ShareP oint Saturday Boston 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com SharePoint 2013 REST API All REST endpoints exist under /_api/ (aka /_vti_bin/client.svc) Some highlights are: Retrieving/updating the state of a site, sub site or list Retrieving/updating data from a list or document library Running search queries Read the current user’s social feed 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

Tips for the SharePoint API Operates similarly to the existing CSOM Deferred loading of collections or complex types $expand=<field> query string parameter expands deferred types Collections For list data, lookup and choice values $filter=<query> QS parameter is used to filter returned data $select=<fields> QS parameter is used to limit the returned fields If possible, use a more specific API endpoint Instead of: /_api/lists(guid’<Guid>’)?expand=Fields Use: /_api/lists(guid’<Guid>’)/Fields 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com Script on Demand SharePoint scripts are now loaded on demand RegisterSod(script name, script url); SP.SOD.loadMultiple([…], function() { … }); 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com Demo REST API Demo SharePoint search tasks rollup Blog post: http://www.almondlabs.com/blog/intro-to-client-side-solutions/ Source code: https://github.com/landrumjc/SP13ClientPresentation Using the Script Editor web part Blog post: http://www.almondlabs.com/blog/configurable-client-side-web-parts/ Source code: https://github.com/Almond-Labs/SP2013-Starter 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

SharePoint Customizations List Views JSLink property Supports customizing entire list views or individual field rendering Common customization: creating a simple KPI Search Display templates Supports customizing specific types of search results Common customization: enabling PDF hover panel previews 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

JSLink to Customize List Views Configuration point to register a custom JavaScript file designed to override the default behavior of a list, list view or individual field JSLink can be configured Through schema (deployed as a feature) Through the List View Web Part properties Through list form web part properties 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com Demo Task List KPI Blog post: http://www.almondlabs.com/blog/intro-to-client-side-solutions/ Source code: https://github.com/landrumjc/SP13ClientPresentation Formatted log field Source code: github.com/landrumjc/SP13ClientPresentation/blob/master/AlmondLabs.SP13Clie... Associated Document Upload Blog post: http://www.almondlabs.com/blog/html5-creating-custom-fields/ Source code: https://github.com/Almond-Labs/Custom-Lookup-Field 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

Search Display Templates Configuration point to register a custom template file (built in JavaScript) to change the display of search results Configured through Search Settings Content Search Web Part 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com Demo Interactive Search Ratings Blog post: http://almondlabs.com/blog/adding-interactive-ratings-to-sharepoint-2013-search-results- part-1/ Source code: https://github.com/landrumjc/SP13ClientPresentation 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com Summary SharePoint 2013 prioritizes client side development With JavaScript, jQuery and Knockout, it’s easy to develop and deploy customizations The 2013 REST API makes it easy to interact with SharePoint data from client code Blog post: http://almondlabs.com/blog/intro-to- client-side-solutions/ 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com

+1 (866) 773-9175 | sales@almondlabs.com References SharePoint 2013 REST Services: http://msdn.microsoft.com/en-us/library/fp142385.aspx, http://msdn.microsoft.com/en-us/library/jj860569.aspx and http://msdn.microsoft.com/en-us/library/jj164022.aspx SharePoint 2013 Search REST API http://blogs.msdn.com/b/nadeemis/archive/2012/08/24/sharepoint-2013-search-rest- api.aspx SharePoint 2013 Rest API http://platinumdogs.me/2013/03/14/sharepoint-adventures- with-the-rest-api-part-1/ Search keyword query syntax: http://msdn.microsoft.com/en-us/library/ee558911.aspx Search Display Templates: http://msdn.microsoft.com/en-us/library/jj945138.aspx JSLink feld rendering: http://www.lestersconyers.com/custom-field-rendering-with-jslink/ JSLink Primer: http://www.idubbs.com/blog/2012/js-link-for-sharepoint-2013-web- partsa-quick-functional-primer/ Knockout.js http://knockoutjs.com/ jQuery http://jquery.com/ 11/20/2018 +1 (866) 773-9175 | sales@almondlabs.com