Download to read offline
Uploaded bySonja Madsen
JavaScript Frameworks for SharePoint add-ins Cambridge
This document provides a quick start guide to JavaScript frameworks for developing SharePoint apps. It introduces several popular JavaScript frameworks and libraries including jQuery, Bootstrap, LESS, and Modernizr. jQuery is described as the most popular JavaScript library for easier DOM element selection and AJAX calls. Bootstrap is explained as an open-source framework for developing responsive, mobile-first projects with pre-built CSS and JavaScript components. LESS and SASS are defined as languages that extend CSS with features like variables and mixins. The document also covers validation plugins, polyfills/shims, and provides demo code examples of Bootstrap and validation in SharePoint apps.
Internetâ—¦
More Related Content
Similar to JavaScript Frameworks for SharePoint add-ins Cambridge
JavaScript Frameworks for SharePoint add-ins Cambridge
- 1. Quick Start Guideto JavaScript Frameworks for SharePoint Apps SharePoint Saturday Cambridge e By Sonja Madsen
- 2.
- 3. JavaScript Frameworks andLibraries SharePoint Saturday Cambridge
- 4.
- 5. JavaScript Frameworks Standardized codestructure and rules HTML, CSS and JS Front-end frameworks CSS to position elements Typography styles Browser compatibility Standard CSS classes Set of tools Imposes no structure
- 6. jQuery JavaScript library Most popular Open-source Releasedin 2006 Easier to select DOM elements Used in Bootstrap and other libraries
- 7. jQuery Start with $(document).ready(function(){ AJAXcalls $.ajax({ Element selector $(".item") Chaining $(".item").addClass("blue").slideDown("slow"); Jquery.ui, jquery.validation
- 8. Bootstrap The most popularHTML, CSS, and JS framework for developing responsive, mobile first projects on the web Open-source Twitter Bootstrap in 2011 Bootstrap 3.0 - mobile first Bootstrap 4 alpha
- 9. 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
- 10. Bootstrap • Grid • Forms •Navigation, tabs • Popovers, badges, collapse, pagination…
- 11.
- 12.
- 13. DEMO Bootstrap withLESS SharePoint hosted app
- 14. Bootstrap Themes Bootswatch –free themes at bootswatch.com Wrapbootstrap – payed themes at wrapbootstrap.com Official Bootstrap themes - http://themes.getbootstrap.com/collections/all
- 15. LESS Extends the CSSlanguage, adding features that allow variables, mixins, functions Bootstrap is based on LESS Bootstrap 4.0 is based on SASS
- 16. jQuery 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();
- 17. Data rules • data-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"
- 18.
- 19. Modernizr Detects HTML5 andCSS3 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
- 20. Modernizr Yepnopejs is deprecated Modernizr.load({ test:Modernizr.borderradius, yep : alert("This browser supports border radius."), nope: 'PIE_IE678.js' });
- 21. Respondjs It loops throughthe 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
- 22. Polyfills, shims Shim: ageneric 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
- 23. Links jQuery http://api.jquery.com/ Bootstrap tutorial http://www.tutorialspoint.com/bootstrap/bootstrap_tutorial.pdf Modernizrhttp://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 LESS http://lesscss.org/
- 25. Stick around forSWAG! (Prize drawing at 5.00 p.m) • All our volunteers and organisers do not get paid for running SPS SQLSaturday Cambridge and do it because they believe in the power of community (or are just plain nuts). Please show your gratitude for making this possible by: • Giving them a hug • Shaking their hand • Saying thank you • Coming back next year • Consider getting your company to pay for a precon next year • Speading the word • Getting involved yourself • But most of all, by enjoying the day! • Don’t forget to thank the sponsors for their support • Thank the speakers for donating their time, energy and expenses
- 26. Stick around forSWAG! (Prize drawing at 5.00 p.m) SQLCloud — XBox One!!! (make sure you know how to play the Jet Set Willy vendor competition!) SQLCloud—Dark Side Of The Moon, The Wall and Wish You Were Here Microsoft — MCP Voucher Data Idols — Supercar Driving Experience Profisee — Signed MDS Book and £50 Amazon Voucher SQLSentry — Plan Explorer PRO License Pyramid Analytics—Coffee Machine Effektor — Lego Big Ben Rencore — SPCAF Professional License (valued at $2099!) Axioworks — Amazon Fire TV and £75 Amazon Voucher DELL — Beats by Dr Dre Headphones Redgate — DLM Workshop Pluralsight — Annual Plus subscriptions All Your Base Conference — 3 x Conference Tickets VisualSP—Annual training subscription Loads of books and much much more!!!