6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 1
Jay Landrum
Co-Founder, Almond Labs
@AlmondLabs
Almond Labs Identity ...
6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 2
Pranav Sharma Eugene Wilson Hector Ramos
Almond Labs
“Working to crea...
Leveraging
Knockout and
REST in
SharePoint 2013
ALMOND LABS
THURSDAY JUNE 20, 2013
+1 (866) 773-9175 | SALES@ALMONDLABS.CO...
Customizing SharePoint
• SharePoint 2007 – Server side code
• SharePoint 2010 - Client side object model
• CSOM built to s...
Why client side solutions?
• Fast prototyping and development
• Low impact deployment and updates
• No more recycled app p...
Required learning
• JavaScript
• jQuery
• Knockout
• JSON
• SharePoint REST Services
6/28/2013 +1 (866) 773-9175 | SALES@A...
Java… script?
Pros
• Client side code (runs in the browser, not on the server)
• Easy deployment enables quick, iterative ...
jQuery
Built on top of JavaScript, jQuery
provides a verb oriented framework
that simplifies almost every aspect of
client...
jQuery
Pros
• Simplifies and enables very quick client side development
• Solves the problem of cross browser support
• Nu...
Without jQuery
if (!document.getElementsByClassName) {
document.getElementsByClassName = function (cn) {
var allT = docume...
With jQuery
$(".Flyout").hide();
6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 11
Knockout.js
Knockout provides a complete solution
for using MVVM practices in client side
development, including two way d...
Knockout.js
Pros
• Solves the problem of creating dynamic, data-driven UI’s on the client
side
• Does not depend on jQuery...
Without Knockout.js
<div id="Container"></div>
<script type="text/javascript">
var data = […];
var ul = document.createEle...
With Knockout.js
<div>
<ul data-bind="foreach: Data">
<li data-bind="text: Name"></li>
</ul>
</div>
<script type="text/jav...
JSON
• Most simply, a way of representing data
• Lightweight and designed to be readable
• Becoming the standard of how da...
JavaScript Object Notation
• Single record (object)
{
Name: "SharePoint User Group Baltimore",
Description: "Our mission i...
Demo
• JavaScript
• jQuery
• Knockout
• JSON
6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 18
REST-ful web APIs
• REST web API’s provide a technology agnostic method of
interacting with data.
• Generally, API endpoin...
REST Example
Google Search
https://www.google.com/search?q=Baltimore SharePoint User Group
Google Search API
http://ajax.g...
SharePoint 2013 REST API
All REST endpoint exist under /_api/
(aka /_vti_bin/client.svc)
Some highlights are:
• Retrieving...
Tips for the SharePoint API
• Operates similarly to the existing CSOM
• Deferred loading of collections or complex types
•...
Demo
SharePoint search tasks rollup
6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 23
SharePoint Customizations
• Search
• Display templates
• Supports customizing specific types of search results
• Common cu...
The Best Part
Display templates and customized list views can be
applied through configuration.
List Views
• List View Web...
JSLink to Customize List
Views
• Configuration point to register a custom
JavaScript file designed to override the
default...
Demo
• Task List KPI
• Associated Document Upload
6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 27
Search Display Templates
• Configuration point to register a custom
template file (built in JavaScript) to change
the disp...
Demo
Interactive Search Ratings
6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 29
Summary
SharePoint 2013 prioritizes client side development by providing REST
data services and allowing complex customiza...
6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 31
References
• SharePoint 2013 REST Services: http://msdn.microsoft.com/en-
us/library/fp142385.aspx, http://msdn.microsoft....
Upcoming SlideShare
Loading in …5
×

Client Script In SharePoint 2013

0 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
0
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
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
  • 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.
  • Client Script In SharePoint 2013

    1. 1. 6/28/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. 6/28/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. Leveraging Knockout and REST in SharePoint 2013 ALMOND LABS THURSDAY JUNE 20, 2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 36/28/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 6/28/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 • Allows significant customizations with just SharePoint designer 6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 5
    6. 6. Required learning • JavaScript • jQuery • Knockout • JSON • SharePoint REST Services 6/28/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 6/28/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. 6/28/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 6/28/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"; } 6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 10
    11. 11. With jQuery $(".Flyout").hide(); 6/28/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. 6/28/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 Cons •Does not integrate with jQuery 6/28/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> 6/28/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> 6/28/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 6/28/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..." } ] 6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 17
    18. 18. Demo • JavaScript • jQuery • Knockout • JSON 6/28/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 6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 19
    20. 20. REST Example Google Search https://www.google.com/search?q=Baltimore SharePoint User Group Google Search API http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Baltimo re SharePoint User Group 6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 20
    21. 21. SharePoint 2013 REST API All REST endpoint exist under /_api/ (aka /_vti_bin/client.svc) Some highlights are: • Retrieving the state of a site, sub site or list • Retrieving data from a list or document library • Running search queries • Read the current user’s social feed 6/28/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 6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 22
    23. 23. Demo SharePoint search tasks rollup 6/28/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 6/28/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 6/28/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 6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 26
    27. 27. Demo • Task List KPI • Associated Document Upload 6/28/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 6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 28
    29. 29. Demo Interactive Search Ratings 6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 29
    30. 30. Summary SharePoint 2013 prioritizes client side development by providing REST data services and allowing complex customizations without needing access to the server. 6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 30
    31. 31. 6/28/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 • 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/ 6/28/2013 +1 (866) 773-9175 | SALES@ALMONDLABS.COM 32

    ×