Client Script In SharePoint 2013

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

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

Leveraging
Knockout and
REST in
SharePoint 2013
ALMOND LABS
THURSDAY JUNE 20, 2013
+1 (866) 773-9175 | SALES@ALMONDLABS.COM 36/28/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
• 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
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
• JavaScript
• jQuery
• Knockout
• JSON

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=Baltimore SharePoint User Group
Google Search API
http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Baltimo
re SharePoint User Group

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

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 by providing REST
data services and allowing complex customizations without needing
access to the server.

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/

Client Script In SharePoint 2013

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Empfohlen

Empfohlen (20)

Client Script In SharePoint 2013

Hinweis der Redaktion