Quick Start Guide to JavaScript Frameworksfor SharePoint Add-ins

2

JavaScript Frameworks and Libraries

3

SonjaMadsen

SP2013.blogspot.com@sonjamadsendev@sonjasapps.comwww.sonjasapps.com

Add-in (App)

SharePoint 2003-2010

.NET, SharePoint

controls, CSS and JS

libraries

JavaScript frameworks and libraries

SharePoint REST, CSOM

SharePoint 2010-2013

5

JavaScript FrameworksStandardized code structure and rulesHTML, CSS and JS Front-end frameworks• CSS to position elements• Typography styles• Browser compatibility• Standard CSS classes• Set of tools• Imposes no structure

6

jQueryJavaScript libraryMost popularOpen-source Released in 2006Easy to select DOM elements Used in Bootstrap and other libraries

7

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

8

BootstrapThe most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the webOpen-sourceTwitter Bootstrap in 2011Bootstrap 3.0 - mobile firstBootstrap 4 alpha

9

ElementsCSS• 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

12

What is Bootstrap?GridFormsNavigation, tabsPopovers, badges, collapse, pagination…

17

Grid HTML<div class="col-md-12"> - entire page<div class="col-md-6”> - 50%<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12"><div class="col-md-12 hidden-xs">

18

Button HTML<a href="#" class="btn btn-default btn-md active">Cancel MEDIUM</a><button type="button" class="btn btn-success"> Success</button>

DEMO Bootstrap Provider Add-in

DEMO Bootstrap SharePoint hosted Add-in

21

LESSExtends the CSS language, adding features that allow variables, mixins, functionsBootstrap is based on LESSBootstrap 4.0 is based on SASS

DEMO Bootstrap with LESS

SharePoint hosted add-in

23

Bootstrap ThemesBootswatch – free themes at bootswatch.comWrapbootstrap – payed themes at wrapbootstrap.comOfficial Bootstrap themes - http://themes.getbootstrap.com/collections/all

24

jQuery Validation / UnobtrusiveHTML<input type=“text” id=“SiteTitle”

JavaScriptrules: {"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();

25

Data Rulesdata-rule-required="true"data-rule-email="true"data-rule-url="true"data-rule-date="true"data-rule-dateISO="true"data-rule-number="true"data-rule-digits="true"data-rule-creditcard="true"data-rule-minlength="6"data-rule-maxlength="24"data-rule-rangelength="5,10"data-rule-min="5"data-rule-max="10"data-rule-range="5,10"

26

Textbox validation

27

ModernizrDetects HTML5 and CSS3 features that your browser supports on page loadResult of “feature detection” is “yes” or “no”Adds classes to HTMLhttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-PolyfillsSupport IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome

Support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome

29

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

30

RespondjsIt loops through the CSS referenced on the pageIE8: re-requests the CSS files using Ajax Polyfill for CSS min-width and max-width in browsers that don't support CSS3 Media Queries

31

Polyfills, shimsShim: 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 browserAlso with newer browsers

32

LinksjQuery http://api.jquery.com/Bootstrap tutorial http://www.tutorialspoint.com/bootstrap/bootstrap_tutorial.pdfModernizr http://modernizr.com/docs/Respond https://github.com/scottjehl/RespondBuilding Responsive UI with Bootstrap on MVAhttp://www.microsoftvirtualacademy.com/training-courses/building-responsive-ui-with-bootstrapLESS http://lesscss.org/Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

33