SharePoint Saturday Belgium 2015 session by Sonja Madsen

1. Quick Start Guide to JavaScript
Frameworks for SharePoint Apps
#SPSBE20
Sonja Madsen
April 18th, 2015

3. JavaScript Frameworks and Libraries

4. SharePoint Apps
SharePoint 2003-2010
SharePoint 2010-2013

5. JavaScript Frameworks
 Standardized code structure and rules
 HTML, CSS and JS
 Front-end frameworks
 CSS to position elements
 Typography styles
 Browser compatibility
 Standard CSS classes
 Library
 Set of tools
 Imposes no structure

6. SharePoint hosted / Provider app
 jQuery
 NuGet packages
• jQuery
• Bootstrap
• jQuery validation
• jQuery validation
unobtrusive
• Modernizr
• Respond

7. jQuery
 JavaScript library
 Most popular
 Open-source
 Released in 2006
 Easier to select DOM elements
 Used in Bootstrap and other libraries

8. jQuery
 Start with $(document).ready(function(){
 AJAX calls $.ajax({
 Element selector $(".item")
 Chaining
$(".item").addClass("blue").slideDown("slow");
 Jquery.ui, jquery.validation

10. Bootstrap
 The most popular HTML, CSS, and JS framework for
developing responsive, mobile first projects on the
web
 Open-source
 Twitter Bootstrap in 2011
 Bootstrap 3.0 - mobile first

11. Bootstrap made sites
 http://expo.getbootstrap.com/

12. Bootstrap
 CSS
 Grid, typography, code, tables, forms, buttons, images
 Components
 Glyphicons, dropdowns, input, navs, nav bars, breadcrumbs, pagination, labels,
badges, jumbotron, page header, thumbnails, alerts, progress bars, media
object, list group, panels, responsive embed, wells
 JavaScript
 Transitions, modal, dropdown, scrollspy, tab, tooltip, popover, alert, button,
collapse, carousel, affix
 Customize

13. SP Table / Bootstrap Div
 <table><tr><td>
 <div class=“container”>
<div class=“row”><div class=“col-md-6 col-xs-12”>
Phones (xs – auto width), Tablets (sm – 750px),
desktops(md – 970px), large (lg – 1170px)

14. Bootstrap / SharePoint list item form
Bootstrap - label and text field
<div class="form-group">
<label for="inputSite3" class="col-sm-2 control-label"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
Site Title
</label>
<input type="text" class="form-control" id="inputEmail3" placeholder="Site Title" required />
</div>
SharePoint – label and text field
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader">
<label for="inputSite3" class="ms-standardheader">
Site Title
</label>
</h3></td>
<td valign="top" width="350px" class="ms-formbody">
<!-- FieldName="Title"
FieldInternalName="Title"
FieldType="SPFieldText"
-->
<input type="text" class="ms-long ms-spellcheck-true"" id="inputEmail3" placeholder="Site Title" required />
</td>
</tr>

15. CSS Classes
Bootstrap
<div class=“col-md-6 col-md-offset-2 hidden-xs col-lg-12”>
Office 365
<div autoid="__Microsoft_O365_ShellG2_Core_templates_cs_k" class="o365cs-nav-header16 o365cs-base o365cst
o365spo o365cs-nav-header o365cs-topnavBGColor-2 o365cs-topnavBGImage" id="O365_NavHeader">
Custom LESS stylesheet with Bootstrap
<div class=“col-md-6 col-md-offset-2 hidden-xs –col-lg-12”>
HTML
<div class=“demoblock”>
LESS
.demoblock
{
. col-md-6;
.col-md-offset-2;
.hidden-xs;
.col-lg-12;
}

17. DEMO Bootstrap
SharePoint hosted app

18. Bootstrap Themes
 Bootswatch – free themes at bootswatch.com
 Wrapbootstrap – payed themes at
wrapbootstrap.com

19. Validation with jQuery
 Jquery.validation
 Jquery.validation.unobtrusive

20. Validation / Unobtrusive
HTML
<input type=“text” id=“SiteTitle”
JavaScript
rules: {
"SiteTitle": { required: true,
minlength: 5 }
},
messages: {
"SiteTitle": {
required: "Please enter the site
title.",
minlength: "Minimum length is 5
letters."
}
}
HTML
<input type="text“ id=“SiteTitle”
data-rule-required="true"
data-msg-required="The Site Title
field is required.“
data-rule-minlength="5"
data-msg-minlength="The
minimum length is 5 letters.“
JavaScript
$form.validate();

21. DEMO Validation

22. Modernizr
 Detects HTML5 and CSS3 features that your browser
supports on page load
 Result of “feature detection” is “yes” or “no”
 Adds classes to HTML
https://github.com/Modernizr/Modernizr/wiki/HTML5-
Cross-browser-Polyfills
 Support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+,
Chrome

23. Modernizr
 Yepnopejs is deprecated
Modernizr.load({
test: Modernizr.borderradius,
yep : alert("This browser supports border radius."),
nope: 'PIE_IE678.js'
});

24. Respondjs
 It loops through the CSS referenced on the page
 IE8: re-requests the CSS files using Ajax
 Polyfill for CSS min-width and max-width in browsers
that don't support CSS3 Media Queries

25. Polyfills, shims
 Shim: a generic code, a library that brings a new API
to an older environment
 Polyfill: downloadable code with fallback for
functionality that is not available in your browser
https://github.com/Modernizr/Modernizr/wiki/HTML5-
Cross-browser-Polyfills

27. Links
 jQuery http://api.jquery.com/
 Bootstrap tutorial
http://www.tutorialspoint.com/bootstrap/bootstrap_t
utorial.pdf
 Modernizr http://modernizr.com/docs/
 Respond https://github.com/scottjehl/Respond
 Building Responsive UI with Bootstrap on MVA
http://www.microsoftvirtualacademy.com/training-
courses/building-responsive-ui-with-bootstrap

28. PlatinumGoldSilver
Thanks to our sponsors!

29. Thank you!