1. JavaScript Libraries for SharePoint Developers @CapAreaSP January 21 st, 2015 Timothy Ferro

2. © 2014 RDA Corporation. All rights reserved. RDA Corporation RDA helps our clients leverage technology to get their businesses moving. We solve complex business challenges that can often get companies stuck, costing them time, resources, and money. What makes us different than other custom application services is that we start with the business problem first. RDA’s experienced team takes the time to understand our clients' business needs and offers several ways to work together, including on site, field teams, and in our corporate development center. Our development services include.NET, SharePoint, business intelligence, cloud and mobile applications. http://www.rdacorp.com

3. © 2014 RDA Corporation. All rights reserved. Agenda My Background Overview SharePoint & Office 365 JavaScript Options JavaScript Tips Must Have JavaScript Libraries Niche JavaScript Libraries Must Have JavaScript Snippets Demo Questions References

4. © 2014 RDA Corporation. All rights reserved. My Background Senior Software Engineer at RDA Corporation Senior SharePoint Developer / SharePoint Architect Author / Editor / Speaker / Blogger / Tweeter 7+ Years Architecting and Developing SharePoint Solutions ferro@rdacorp.com www.timferro.com @timferro

5. © 2014 RDA Corporation. All rights reserved. Publications Technical EditorWhite Paper Author

6. © 2014 RDA Corporation. All rights reserved. Overview of SharePoint & Office 365 JavaScript Options Content Editor Web Part Script Editor Web Part SharePoint Designer or Server Side Code Injection RegisterClientScriptBlock vs RegisterStartupScript Web Parts/Delegate Controls/Application Pages Custom Action to Register Code SSOM or JSOM Client Side Code Injection SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady) CSS JavaScript Injection

7. © 2014 RDA Corporation. All rights reserved. JavaScript Tips JavaScript !== jQuery jQuery is cross browser tested JavaScript Library Where to store them? CDN vs Document Library vs 15 Hive Enable Blob Cache Use a Rich Editor like Visual Studio or NotePad++ Organize your files in folders Learn non-SharePoint JavaScript Multiple SharePoint Access Options JSOM, SPServices, Rest, DOM Minimal Download Strategy (MDS) Compliant Code

8. © 2014 RDA Corporation. All rights reserved. Must Have JavaScript Libraries jQuery (http://jquery.com/)http://jquery.com/ jQueryUI (http://jqueryui.com/)http://jqueryui.com/ SPServices (http://spservices.codeplex.com/)http://spservices.codeplex.com/ DataTables (http://www.datatables.net/)http://www.datatables.net/ jqPlot (http://www.jqplot.com/)http://www.jqplot.com/

9. © 2014 RDA Corporation. All rights reserved. JavaScript Library: jQuery/jQueryUI jQuery (http://jquery.com/)http://jquery.com/ jQueryUI (http://jqueryui.com/)http://jqueryui.com/

10. © 2014 RDA Corporation. All rights reserved. JavaScript Library: SPServices SPServices (http://spservices.codeplex.com/)http://spservices.codeplex.com/

11. © 2014 RDA Corporation. All rights reserved. JavaScript Library: DataTables DataTables (http://www.datatables.net/)http://www.datatables.net/

12. © 2014 RDA Corporation. All rights reserved. JavaScript Library: jqPlot jqPlot (http://www.jqplot.com/)http://www.jqplot.com/

13. © 2014 RDA Corporation. All rights reserved. Niche JavaScript Libraries Bootstrap (http://getbootstrap.com/)http://getbootstrap.com/ Moment.js (http://momentjs.com/)http://momentjs.com/ bxSlider (http://bxslider.com/)http://bxslider.com/

14. © 2014 RDA Corporation. All rights reserved. Must Have JavaScript Snippets Print Page Option Select/Deselect All Checkboxes Disabling Right Click Validating an Email Registering JavaScript on All Pages in Office 365

15. © 2014 RDA Corporation. All rights reserved. JavaScript Snippet: Print Page Print Page Option

16. © 2014 RDA Corporation. All rights reserved. JavaScript Snippet: Select All Select/Deselect All Checkboxes

17. © 2014 RDA Corporation. All rights reserved. JavaScript Snippet: Disable Right Click Disabling Right Click

18. © 2014 RDA Corporation. All rights reserved. JavaScript Snippet: Email Validation Validating an Email

19. © 2014 RDA Corporation. All rights reserved. JavaScript Snippet: JavaScript on all Pages Registering JavaScript on All Pages in Office 365

20. © 2014 RDA Corporation. All rights reserved. Demo Office 365 jQuery SPServices jqPlot

21. © 2014 RDA Corporation. All rights reserved. References http://www.rdacorp.com/2014/12/javascript-libraries-net-sharepoint-developers/ http://www.timferro.com/wordpress/archives/806 http://www.c-sharpcorner.com/UploadFile/81a718/7-jquery-code-snippets-every- web-developer-must-have/ http://www.c-sharpcorner.com/UploadFile/81a718/7-jquery-code-snippets-every- web-developer-must-have/ http://blogs.msmvps.com/windsor/2014/07/28/session-recording-javascript-and- jquery-for-sharepoint-developers/ http://blogs.msmvps.com/windsor/2014/07/28/session-recording-javascript-and- jquery-for-sharepoint-developers/ http://www.timferro.com/wordpress/archives/841 https://github.com/vball525/o365 http://www.rdacorp.com/2015/01/tips-tricks-building-javascript-applications- sharepoint/ http://www.rdacorp.com/2015/01/tips-tricks-building-javascript-applications- sharepoint/ https://groups.google.com/forum/#!topic/DotNetDevelopment/QC0sC-bJBMU http://www.spcaf.com/blog/sharepoint-javascript-context-dev-part-1/

22. © 2014 RDA Corporation. All rights reserved. Tim Ferro Senior Software Engineer at RDA Corporation Senior SharePoint Developer / SharePoint Architect Author / Editor / Speaker / Blogger / Tweeter 7+ Years Architecting and Developing SharePoint Solutions ferro@rdacorp.com www.timferro.com @timferro