View
3
Download
0
Category
Preview:
Citation preview
Are you in the right spot?
Julie TurnerPrincipal Architect
Professional developer since 1995
Working with SP since 2007
Blog: http://julieturner.net
LI: https://www.linkedin.com/in/juliemturner
Twitter: @jfj1997
GitHub / Slides: https://github.com/juliemturner/demos
Part 1 Agenda
SharePoint 2007
Everything in the page came down from the server
SharePoint 2010
We started to see more client side rendering
SharePoint 2013
High Level Structure of Building Client Side Solutions
Data Access / Initial
Manipulation
"Document Ready"
ViewModel /
Application Logic
Templates Application Styling
What is a widget?
What makes a good widget?
1ISOLATED – so they won’t interfere with other
widgets or the rest of the page
Can you run multiple copies of the widget on a
page?
2EFFICIENT – so they load quickly Does the page get noticeably slower as you add
widgets?
3SELF-CONTAINED – so they’re easy to reuse Does the widget work without special page
elements such as element ID’s, scripts, and CSS
references?
4MODERN – so they’re easier to write and maintain Is the widget written in a modern JavaScript
framework such as AngularJS or Knockout?
Services Across SharePoint Versions
Deprecated
Deprecated
Endpoint
/_vti_bin/listdata.svc
/_apiDeprecated
None
SOAP REST
https://graph.microsoft.com/v1.0
Reasons to Still Love SPServices
Simple SPServices Example
var p = $().SPServices({
webURL: "\Offices\Newton",
listName: "Announcements",
CAMLViewFields: "<ViewFields>" +
"<FieldRef Name='Title' />" +
"</ViewFields>"
});
$(p.responseXML).SPFilterNode("z:row")
.each(function () {
var thisEvent = $(this);
announcements.push({
Title: thisEvent.attr("ows_Title")
});
});
REST requires XMLHttpRequest object
$.ajax({
url: “https://my.sharepoint.com/_api/web/lists/getbytitle('" +
REQUESTS_LIST + "')/items",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: loadRequestsSuccess,
error: loadRequestError
});
Namespaces
Variable
var myNamespace =
window.myNamespace ||
{};
myNamespace.myModule…
IIFE (if-ey)
(function(){
your code here
})();
Equal != Equal== (Loose equality)
=== (Strict equality)
Object.is (Strict equality +)
Modules – One patternfunction test() {
var myPrivateVariable = “Private”;
function myPrivateFunction(){
console.log(“Test”);
}
var myPublicFunction = function() {
myPrivateFunction();
return “Result”;
};
return {
myFunction: myPublicFunction
};
}
A CSS tidbit@keyframes sideNavSlideIn {
from {left: 0px;}
to {left: -175px;}
}
@keyframes sideNavSlideOut {
from {left: -175px;}
to {left: 0px;}
}
#contentBox {
margin-left:40px;
}
#sideNavBox {
position: absolute;
background: #ffffff;
left:-175px;
margin: 0;
padding: 0 0 0 20px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
float:none;
animation-name: sideNavSlideIn;
animation-timing-function: ease-out;
animation-duration: .25s;
animation-iteration-count: 1;
z-index: 999;
}
#sideNavBox:hover{
left: 0px;
animation-name: sideNavSlideOut;
animation-timing-function: ease-out;
animation-duration: .5s;
animation-iteration-count: 1;
}
cdnjs
•
•
MomentJS
•
•
Font Awesome
•
•
•
FullCalendar
•
•
jQueryUI
•
•
•
Widgets
• Accordion
• Autocomplete
• Button
• Checkboxradio
• Controlgroup
• Datepicker
• Dialog
• Menu
• Progressbar
• Selectmenu
• Slider
• Spinner
• Tabs
• Tooltip
Interactions
• Draggable
• Droppable
• Resizable
• Selectable
• Sortable
Effects
• Add Class
• Color Animation
• Easing
• Effect
• Hide
• Remove Class
• Show
• Switch Class
• Toggle
• Toggle Class
Bootstrap
•
Office UI Fabric
•
SPServices
•
• https://spservices.codeplex.com/
• http://sympmarc.github.io/SPServices/
Widget Wrangler
•
Bye, Bye!See you at Part 2
• Development Frameworks
• Best practices for deployment, maintenance, and version control
• What is SharePoint Framework
• “Power BI" in the client
Recommended