1. Getting Started With JavaScript Libraries for Office 365 Developers @SPSaturday_DC #SPSDC October 3 rd, 2015 Timothy Ferro

2. Office 365 / SharePoint Implementations * Upgrades Hybrid * Portals Workflows * Search Data Analytics Visualization * Warehouse Big Data * SQL Server Tableau Cloud Enterprise Transformation Hybrid * Platform Services Mobile * Security Application Integration Digital Marketing Internet Sites * CMS eCommerce * Sitecore Transform your business with RDA! rdacorp.com | 888 441-1278 | marketing@rdacorp.com

3. © 2015 RDA Corporation. All rights reserved. RDA Corporation RDA provides analysis services to help our clients evaluate their options and determine the best platform solution for their needs—whether cloud-based, on-premises, or hybrid. We also deliver full lifecycle application development services, helping build, implement, deploy, host, manage, scale and support those solutions. RDA first takes the time to understand our clients' business needs and then maps an appropriate technology solution, optimized to the cost, scale, mobility and security requirements of their business. http://www.rdacorp.com Established in 1988, RDA's corporate office and Development Center are located in Baltimore with additional technology teams in Atlanta, Charlotte, Philadelphia, and Washington, D.C.

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

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

6. © 2015 RDA Corporation. All rights reserved. Publications Technical EditorWhite Paper Author

7. © 2015 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

8. © 2015 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: Visual Studio or NotePad++ Visual Studio Code Organize your files in folders Learn non-SharePoint JavaScript Multiple SharePoint Data Access Options JSOM, SPServices, REST, SOAP, DOM Minimal Download Strategy (MDS) Compliant Code

9. © 2015 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/ New -> ADAL.js (https://github.com/AzureAD/azure- activedirectory-library-for-js)https://github.com/AzureAD/azure- activedirectory-library-for-js

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

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

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

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

14. © 2015 RDA Corporation. All rights reserved. JavaScript Library: Active Directory Authentication Library (ADAL) for JavaScript ADAL.js (https://github.com/AzureAD/azure- activedirectory-library-for-js)https://github.com/AzureAD/azure- activedirectory-library-for-js

15. © 2015 RDA Corporation. All rights reserved. Niche JavaScript Libraries Bootstrap (http://getbootstrap.com/)http://getbootstrap.com/ Moment.js (http://momentjs.com/)http://momentjs.com/

16. © 2015 RDA Corporation. All rights reserved. Must Have JavaScript Snippets Get InternalName for a SharePoint List Column Registering JavaScript on All Pages in Office 365 Function to simplify REST calls to SharePoint

17. © 2015 RDA Corporation. All rights reserved. JavaScript Snippet: Get SharePoint Column Internal Name http://sympmarc.com/2015/01/27/get-the-internalname-for-a-sharepoint-list-column/

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

19. © 2015 RDA Corporation. All rights reserved. JavaScript Snippet: SharePoint REST Function SharePoint REST function for simplifying calls http://blogs.msmvps.com/windsor/2015/02/13/reduce-code- need-for-rest-api-calls-with-sprestrepository/

20. © 2015 RDA Corporation. All rights reserved. Demo: JavaScript in Office 365 Office 365 Developer Tenant JavaScript jQuery SPServices jqPlot

21. © 2015 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/ http://sympmarc.com/2015/01/27/get-the-internalname-for-a-sharepoint-list- column/ http://sympmarc.com/2015/01/27/get-the-internalname-for-a-sharepoint-list- column/ http://blogs.msmvps.com/windsor/2015/02/13/reduce-code-need-for-rest-api-calls- with-sprestrepository/ http://blogs.msmvps.com/windsor/2015/02/13/reduce-code-need-for-rest-api-calls- with-sprestrepository/

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