![Page 1: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/1.jpg)
![Page 2: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/2.jpg)
Are you in the right spot?
![Page 3: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/3.jpg)
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
![Page 4: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/4.jpg)
![Page 5: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/5.jpg)
Part 1 Agenda
![Page 6: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/6.jpg)
![Page 7: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/7.jpg)
SharePoint 2007
Everything in the page came down from the server
![Page 8: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/8.jpg)
SharePoint 2010
We started to see more client side rendering
![Page 9: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/9.jpg)
SharePoint 2013
![Page 10: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/10.jpg)
High Level Structure of Building Client Side Solutions
Data Access / Initial
Manipulation
"Document Ready"
ViewModel /
Application Logic
Templates Application Styling
![Page 11: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/11.jpg)
![Page 12: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/12.jpg)
![Page 13: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/13.jpg)
![Page 14: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/14.jpg)
What is a widget?
![Page 15: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/15.jpg)
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?
![Page 16: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/16.jpg)
![Page 17: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/17.jpg)
![Page 18: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/18.jpg)
Services Across SharePoint Versions
Deprecated
Deprecated
Endpoint
/_vti_bin/listdata.svc
/_apiDeprecated
None
SOAP REST
https://graph.microsoft.com/v1.0
![Page 19: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/19.jpg)
Reasons to Still Love SPServices
![Page 20: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/20.jpg)
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")
});
});
![Page 21: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/21.jpg)
![Page 22: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/22.jpg)
REST requires XMLHttpRequest object
![Page 23: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/23.jpg)
$.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
});
![Page 24: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/24.jpg)
![Page 25: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/25.jpg)
![Page 26: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/26.jpg)
Namespaces
Variable
var myNamespace =
window.myNamespace ||
{};
myNamespace.myModule…
IIFE (if-ey)
(function(){
your code here
})();
![Page 27: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/27.jpg)
Equal != Equal== (Loose equality)
=== (Strict equality)
Object.is (Strict equality +)
![Page 28: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/28.jpg)
Modules – One patternfunction test() {
var myPrivateVariable = “Private”;
function myPrivateFunction(){
console.log(“Test”);
}
var myPublicFunction = function() {
myPrivateFunction();
return “Result”;
};
return {
myFunction: myPublicFunction
};
}
![Page 29: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/29.jpg)
![Page 30: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/30.jpg)
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;
}
![Page 31: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/31.jpg)
![Page 32: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/32.jpg)
cdnjs
•
•
![Page 33: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/33.jpg)
MomentJS
•
•
![Page 34: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/34.jpg)
Font Awesome
•
•
•
![Page 35: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/35.jpg)
FullCalendar
•
•
![Page 38: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/38.jpg)
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
![Page 39: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/39.jpg)
Bootstrap
•
![Page 40: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/40.jpg)
Office UI Fabric
•
![Page 41: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/41.jpg)
SPServices
•
• https://spservices.codeplex.com/
• http://sympmarc.github.io/SPServices/
![Page 42: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/42.jpg)
Widget Wrangler
•
![Page 43: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/43.jpg)
![Page 44: Are you in the right spot? - Nellis Consulting, LLCnellisconsultingllc.com/Resources/SPTechConSF2016Slides...A CSS tidbit @keyframes sideNavSlideIn {from {left: 0px;} to {left: -175px;}}](https://reader036.vdocument.in/reader036/viewer/2022063002/5f2aeec46ea7224dca22d827/html5/thumbnails/44.jpg)
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