Quick start guide to java script frameworks for sharepoint add ins sharepoint days
-
Upload
sonja-madsen -
Category
Internet
-
view
399 -
download
0
Transcript of Quick start guide to java script frameworks for sharepoint add ins sharepoint days
![Page 1: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/1.jpg)
Quick Start Guide to JavaScript Frameworksfor SharePoint Add-ins
![Page 2: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/2.jpg)
2
JavaScript Frameworks and Libraries
![Page 4: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/4.jpg)
Add-in (App)
SharePoint 2003-2010
.NET, SharePoint
controls, CSS and JS
libraries
JavaScript frameworks and libraries
SharePoint REST, CSOM
SharePoint 2010-2013
![Page 5: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/5.jpg)
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
![Page 6: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/6.jpg)
6
jQueryJavaScript libraryMost popularOpen-source Released in 2006Easy to select DOM elements Used in Bootstrap and other libraries
![Page 7: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/7.jpg)
7
jQueryStart with $(document).ready(function(){AJAX calls $.ajax({Element selector $(".item")Chaining $(".item").addClass("blue").slideDown("slow");Jquery.ui, jquery.validation
![Page 8: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/8.jpg)
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
![Page 9: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/9.jpg)
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
![Page 10: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/10.jpg)
![Page 11: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/11.jpg)
![Page 12: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/12.jpg)
12
What is Bootstrap?GridFormsNavigation, tabsPopovers, badges, collapse, pagination…
![Page 13: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/13.jpg)
![Page 14: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/14.jpg)
![Page 15: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/15.jpg)
![Page 16: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/16.jpg)
![Page 17: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/17.jpg)
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">
![Page 18: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/18.jpg)
18
Button HTML<a href="#" class="btn btn-default btn-md active">Cancel MEDIUM</a><button type="button" class="btn btn-success"> Success</button>
![Page 19: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/19.jpg)
DEMO Bootstrap Provider Add-in
![Page 20: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/20.jpg)
DEMO Bootstrap SharePoint hosted Add-in
![Page 21: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/21.jpg)
21
LESSExtends the CSS language, adding features that allow variables, mixins, functionsBootstrap is based on LESSBootstrap 4.0 is based on SASS
![Page 22: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/22.jpg)
DEMO Bootstrap with LESS
SharePoint hosted add-in
![Page 23: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/23.jpg)
23
Bootstrap ThemesBootswatch – free themes at bootswatch.comWrapbootstrap – payed themes at wrapbootstrap.comOfficial Bootstrap themes - http://themes.getbootstrap.com/collections/all
![Page 24: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/24.jpg)
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();
![Page 25: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/25.jpg)
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"
![Page 26: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/26.jpg)
26
Textbox validation
![Page 27: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/27.jpg)
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
![Page 28: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/28.jpg)
Support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome
![Page 29: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/29.jpg)
29
ModernizrModernizr.load({ test: Modernizr.borderradius, yep : alert("This browser supports border radius."), nope: 'PIE_IE678.js' });
![Page 30: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/30.jpg)
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
![Page 31: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/31.jpg)
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
![Page 32: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/32.jpg)
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
![Page 33: Quick start guide to java script frameworks for sharepoint add ins sharepoint days](https://reader035.fdocuments.in/reader035/viewer/2022062904/5873aece1a28aba3548b6d9f/html5/thumbnails/33.jpg)
33