Quickstartguidetojavascriptframeworksforsharepointapps spsbe-2015-150419032642-conversion-gate01
Download as PPTX, PDF0 likes497 views
This document provides an overview of JavaScript frameworks and libraries that can be used to build SharePoint apps, including jQuery, Bootstrap, Modernizr, and Respond. It describes what each framework does, how to get started with it, and provides examples of how elements in SharePoint can be represented using each framework's APIs and CSS styles.
Quickstartguidetojavascriptframeworksforsharepointapps spsbe-2015-150419032642-conversion-gate01
- 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!