Downloaded 14 times
Uploaded bySonja Madsen
Quick start guide to java script frameworks for sharepoint apps spsbe-2015
The document serves as a quick start guide for using JavaScript frameworks in SharePoint apps, focusing on jQuery and Bootstrap. It provides an overview of key features, functionalities, and example code snippets for integrating these frameworks with SharePoint. Additionally, it discusses the role of validation libraries and tools like Modernizr and Respond.js for enhancing compatibility and performance in web development.
Quick start guide to java script frameworks for sharepoint apps spsbe-2015
- 1. Quick Start Guideto JavaScript Frameworks for SharePoint Apps #SPSBE20 Sonja Madsen April 18th, 2015
- 3. JavaScript Frameworks andLibraries
- 4.
- 5. JavaScript Frameworks Standardizedcode 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 mostpopular 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 / SharePointlist 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-6col-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.
- 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 <inputtype=“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.
- 22. Modernizr Detects HTML5and 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 isdeprecated Modernizr.load({ test: Modernizr.borderradius, yep : alert("This browser supports border radius."), nope: 'PIE_IE678.js' });
- 24. Respondjs It loopsthrough 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 oursponsors!
- 29.