1 / 32

Intro to Client Side Solutions in SharePoint 2013

Intro to Client Side Solutions in SharePoint 2013. Almond Labs Saturday April 12, 2013. “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.

vielka-buck
Download Presentation

Intro to Client Side Solutions in SharePoint 2013

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Intro to Client Side Solutions in SharePoint 2013 Almond Labs Saturday April 12, 2013 +1 (866) 773-9175 | sales@almondlabs.com

  2. “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 +1 (866) 773-9175 | sales@almondlabs.com

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

  4. 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 +1 (866) 773-9175 | sales@almondlabs.com

  5. 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 +1 (866) 773-9175 | sales@almondlabs.com

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

  7. 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 +1 (866) 773-9175 | sales@almondlabs.com

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

  9. 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 +1 (866) 773-9175 | sales@almondlabs.com

  10. Without jQuery • if (!document.getElementsByClassName) { • document.getElementsByClassName = function (cn) { • varallT = document.getElementsByTagName('*'), allCN = [], i = 0, a; • while (a = allT[i++]) { • a.className == cn ? allCN[allCN.length] = a : null; • } • returnallCN; • } • } • varflyouts = document.getElementsByClassName("Flyout"); • for (var x = 0; x < flyouts.length; x++) { • flyouts[0].styles.display = "none"; • } +1 (866) 773-9175 | sales@almondlabs.com

  11. With jQuery • $(".Flyout").hide(); +1 (866) 773-9175 | sales@almondlabs.com

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

  13. 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 +1 (866) 773-9175 | sales@almondlabs.com

  14. Without Knockout.js • <divid="Container"></div> • <scripttype="text/javascript"> • var data = […]; • varul = 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> +1 (866) 773-9175 | sales@almondlabs.com

  15. With Knockout.js • <div> • <uldata-bind="foreach: Data"> • <lidata-bind="text: Name"></li> • </ul> • </div> • <scripttype="text/javascript"> • functionViewModel() { • var self = this; • self.Data = […]; • } • ko.applyBindings(newViewModel()); • </script> +1 (866) 773-9175 | sales@almondlabs.com

  16. 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 +1 (866) 773-9175 | sales@almondlabs.com

  17. 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: "Our mission is to bring the..." • }, • { • Name: " SharePoint Saturday Twin Cities", • Description: "A year-round resource..." • } • ] +1 (866) 773-9175 | sales@almondlabs.com

  18. Demo Knockout.js +1 (866) 773-9175 | sales@almondlabs.com

  19. 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 +1 (866) 773-9175 | sales@almondlabs.com

  20. 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=SharePoint Saturday Boston +1 (866) 773-9175 | sales@almondlabs.com

  21. 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 +1 (866) 773-9175 | sales@almondlabs.com

  22. 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 +1 (866) 773-9175 | sales@almondlabs.com

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

  24. 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 +1 (866) 773-9175 | sales@almondlabs.com

  25. 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 +1 (866) 773-9175 | sales@almondlabs.com

  26. 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 +1 (866) 773-9175 | sales@almondlabs.com

  27. 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 +1 (866) 773-9175 | sales@almondlabs.com

  28. 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 +1 (866) 773-9175 | sales@almondlabs.com

  29. 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 +1 (866) 773-9175 | sales@almondlabs.com

  30. 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/ +1 (866) 773-9175 | sales@almondlabs.com

  31. +1 (866) 773-9175 | sales@almondlabs.com

  32. 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 • JSLinkfeld rendering: http://www.lestersconyers.com/custom-field-rendering-with-jslink/ • JSLinkPrimer: 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/ +1 (866) 773-9175 | sales@almondlabs.com

More Related