Intro to Client Side Solutions in SharePoint 2013

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

Pranav Sharma Eugene Wilson Hector Ramos
Almond Labs
“Working to create products and solutions that improve
user adoption, engagement and productivity with
SharePoint.”

Intro to Client Side
Solutions in
SharePoint 2013
ALMOND LABS
SATURDAY SEPTEMBER 21, 2013
+1 (866) 773-9175 | SALES@ALMONDLABS.COM 310/7/2013

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

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

Required learning
• JavaScript
• jQuery
• Knockout
• JSON
• SharePoint REST Services

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

jQuery
Built on top of JavaScript, jQuery
provides a verb oriented framework
that simplifies almost every aspect of
client side development.

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

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";
}

With jQuery
$(".Flyout").hide();

Knockout.js
Knockout provides a complete solution
for using MVVM practices in client side
development, including two way data-
binding and easy extensibility.

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

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>

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>

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

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..."
}
]

Demo
Knockout.js

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

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

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

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

Demo
SharePoint search tasks rollup

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

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

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

Demo
• Task List KPI
• Associated Document Upload

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

Demo
Interactive Search Ratings

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/

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/

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

Intro to Client Side Solutions in SharePoint 2013

Intro to Client Side Solutions in SharePoint 2013

Recommended

Recommended

More Related Content

More from SharePoint Saturday New Jersey

More from SharePoint Saturday New Jersey (12)

Recently uploaded

Recently uploaded (20)

Intro to Client Side Solutions in SharePoint 2013

Editor's Notes