Intro to Client Side Solutions in SharePoint 2013

1,505 views
1,319 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,505
On SlideShare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • “Leveraging Knockout and REST to enable rich client side customizations in SharePoint 2013”HighlightsReview the technologies used in client side development Show examples of functional solutions developed using these technologies
  • Possibly turn this into a timeline
  • document.getElementsByClassName() is not supported by IE8This isn’t even the largest example I found online.
  • Change this transition to type out each individual character.One line of code.
  • - In previous iterations, Microsoft supplied “Object Model” implementations for specific languages such as .NET and JavaScript.
  • Intro to Client Side Solutions in SharePoint 2013

    1. 1. 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 1 Jay Landrum Co-Founder, Almond Labs @AlmondLabs Almond Labs Identity Service Application Simple external authentication for on premise SharePoint
    2. 2. 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 2 Pranav Sharma Eugene Wilson Hector Ramos Almond Labs “Working to create products and solutions that improve user adoption, engagement and productivity with SharePoint.”
    3. 3. Intro to Client Side Solutions in SharePoint 2013 ALMOND LABS SATURDAY SEPTEMBER 21, 2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 310/7/2013
    4. 4. Customizing SharePoint • SharePoint 2007 – Server side code • 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 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 4
    5. 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 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 5
    6. 6. Required learning • JavaScript • jQuery • Knockout • JSON • SharePoint REST Services 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 6
    7. 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 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 7
    8. 8. jQuery Built on top of JavaScript, jQuery provides a verb oriented framework that simplifies almost every aspect of client side development. 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 8
    9. 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 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 9
    10. 10. 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"; } 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 10
    11. 11. With jQuery $(".Flyout").hide(); 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 11
    12. 12. Knockout.js Knockout provides a complete solution for using MVVM practices in client side development, including two way data- binding and easy extensibility. 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 12
    13. 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 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 13
    14. 14. 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> 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 14
    15. 15. 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> 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 15
    16. 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 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 16
    17. 17. JavaScript Object Notation • Single record (object) { Name: "SharePoint User Group Baltimore", Description: "Our mission is to bring the..." } • Collection of records (array of objects) [ { Name: "SharePoint User Group Baltimore", Description: "Our mission is to bring the..." }, { Name: "SharePoint User Group DC", Description: "A year-round resource..." } ] 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 17
    18. 18. Demo Knockout.js 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 18
    19. 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 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 19
    20. 20. REST Example Google Search https://www.google.com/search?q=SharePoint Saturday New Jersey Google Search API http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=ShareP oint Saturday New Jersey 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 20
    21. 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 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 21
    22. 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 • Use: /_api/lists(guid’<Guid>’)/Fields • Instead of: /_api/lists(guid’<Guid>’)?expand=Fields 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 22
    23. 23. Demo SharePoint search tasks rollup 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 23
    24. 24. SharePoint Customizations • Search • Display templates • Supports customizing specific types of search results • Common customization: enabling PDF hover panel previews • List Views • JSLink property • Supports customizing entire list views or individual field rendering • Common customization: creating a simple KPI 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 24
    25. 25. The Best Part Display templates and customized list views can be applied through configuration. List Views • List View Web Part Display Templates • Content Search Web Part • Search Configuration 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 25
    26. 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 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 26
    27. 27. Demo • Task List KPI • Associated Document Upload 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 27
    28. 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 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 28
    29. 29. Demo Interactive Search Ratings 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 29
    30. 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/ 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 30
    31. 31. 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 31
    32. 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 • 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/ 10/7/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 32
    33. 33. PRINCETON SHAREPOINT USER GROUP • Different SharePoint discussions each month on various topics. Announced on meetup.com • Meets 4th Wednesday of every month • 6pm – 8pm • Infragistics Office • 2 Commerce Drive, Cranbury, NJ • http://www.meetup.com/princetonSUG • http://www.princetonsug.com

    ×