Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Client Script In SharePoint 2013
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. 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.”
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. 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
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. 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. 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. 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
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. 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. 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
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. 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
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
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. 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
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. 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. 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
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
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
“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.