1. 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) |

2. +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) |

3. Intro to Client Side Solutions
Short history of SharePoint development
Client side technologies
Customizing SharePoint
11/20/2018
+1 (866) |

4. SharePoint Development
SharePoint 2007 – Server side code
Web Parts, User Controls
SharePoint Client side object model
CSOM built to support Silverlight but not complete
SharePoint 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) |

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
11/20/2018
+1 (866) |

6. +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) |

7. +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) |

8. +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) |

9. +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) |

10. +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) |

11. +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) |

12. +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) |

13. +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) |

14. +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) |

15. +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) |

16. +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) |

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: "A year-round resource..." ]
11/20/2018
+1 (866) |

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

19. +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) |

20. +1 (866) 773-9175 | sales@almondlabs.com
REST Example
Google Search
Saturday Boston
Google Search API
oint Saturday Boston
11/20/2018
+1 (866) |

21. +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) |

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
11/20/2018
+1 (866) |

23. +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) |

24. +1 (866) 773-9175 | sales@almondlabs.com
Demo
REST API Demo
SharePoint search tasks rollup
Blog post:
Source code:
Using the Script Editor web part
Blog post:
Source code:
11/20/2018
+1 (866) |

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
11/20/2018
+1 (866) |

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
11/20/2018
+1 (866) |

27. +1 (866) 773-9175 | sales@almondlabs.com
Demo
Task List KPI
Blog post:
Source code:
Formatted log field
Source code: github.com/landrumjc/SP13ClientPresentation/blob/master/AlmondLabs.SP13Clie...
Associated Document Upload
Blog post:
Source code:
11/20/2018
+1 (866) |

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
11/20/2018
+1 (866) |

29. +1 (866) 773-9175 | sales@almondlabs.com
Demo
Interactive Search Ratings
Blog post: part-1/
Source code:
11/20/2018
+1 (866) |

30. +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: client-side-solutions/
11/20/2018
+1 (866) |

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

32. +1 (866) 773-9175 | sales@almondlabs.com
References
SharePoint 2013 REST Services: and
SharePoint 2013 Search REST API api.aspx
SharePoint 2013 Rest API with-the-rest-api-part-1/
Search keyword query syntax:
Search Display Templates:
JSLink feld rendering:
JSLink Primer: partsa-quick-functional-primer/
Knockout.js
jQuery
11/20/2018
+1 (866) |