Spunite17 Converting your CEWP Customisations
0 likes88 views
This document discusses converting existing customizations built with JavaScript/jQuery to the SharePoint Framework (SPFx). It outlines the benefits of SPFx, including better manageability, deployment, and security. It then demonstrates the steps to convert a sample customization, including copying code, adding references, importing scripts, using properties, and deploying the solution. Some potential hurdles discussed are using REST APIs and disabling reactive property changes. The overall goal is to help clients modernize existing custom code to take advantage of SPFx.
![© 2015 PAIT Group
2. Add references to Config.json
"jquery": {
"path": "https://code.jquery.com/jquery-1.12.4.min.js",
"globalName": "jQuery"
},
"flip": {
"path": "https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js",
"globalName": "jQuery",
"globalDependencies": ["jquery"]
}](https://image.slidesharecdn.com/spunite17convertingyourcewpcustomisations-171101105930/85/Spunite17-Converting-your-CEWP-Customisations-19-320.jpg)
Spunite17 Converting your CEWP Customisations
- 2. SPFx Mark Rackley mrackley@paitgroup.com Converting Your CEWP Customizations to the SharePoint Framework
- 3. © 2015 PAIT Group Mark Rackley / Partner & CSO • 20+ years software architecture and development experience • Office 365 MVP, SharePoint Junkie since 2007 • Event Organizer (SharePointalooza.org) • Blogger, Writer, Speaker • Bacon aficionado @mrackley www.MarkRackley.net www.PAITGroup.com www.SharePointaLooza.org www.StratusForms.com #SayNoToInfoPath
- 4. © 2015 PAIT Group WHAT’S UP WITH THIS SESSION?
- 5. © 2015 PAIT Group WHAT’S UP WITH THIS SESSION? Have existing jQuery/JavaScript solutions Need to better understand the SharePoint Framework Don’t know or don’t want to learn TypeScript Don’t know or don’t want to learn React Need to know how to get started FOR CLIENT SIDE DEVELOPERS THAT…
- 6. © 2015 PAIT Group Goals for the Session What is the SharePoint Framework? Why do we need the SharePoint Framework? Converting a Customization to the SharePoint Framework
- 7. © 2015 PAIT Group WHAT IS THE SHAREPOINT FRAMEWORK (SPFx) SharePoint framework LOB Systems and Cloud Services Microsoft Graph (coming soon) Modern client-side development Lightweight web and mobile Used to build Modern SharePoint Page Backward compatible Supports open source tools and JavaScript web frameworks
- 8. © 2015 PAIT Group THE SHAREPOINT FRAMEWORK Finally! A management and deployment story for our client side web parts Works in Classic and Modern Pages Users can set properties instead of having to modify script Local Workbench for development and debugging TypeScript (if you are a .NET Dev) You GET to learn new (marketable) skills Mobile friendly Works the same in On Premises and Online GOOD
- 9. © 2015 PAIT Group THE SHAREPOINT FRAMEWORK The process can initially be daunting if you are a .NET developer (Change is hard) TypeScript (If you are JavaScript developer) Lack of Visual Studio Tooling There is no store You HAVE to learn new skills WHAT HURDLES WILL YOU FACE?
- 10. © 2015 PAIT Group JavaScript/HTML/CSS An open mind (it’s a brave new world) Node.js, NPM, Yeoman, Gulp??? (open source FTW!) TypeScript (Enterprise JavaScript Development) Office UI Fabric (Front-end visual Framework) VisualStudio Code SKILLS YOU NEED TO EMBRACE
- 11. © 2015 PAIT Group WHY DO YOU NEED THE SHAREPOINT FRAMEWORK
- 12. © 2015 PAIT Group WHY DO YOU NEED THE SHAREPOINT FRAMEWORK Stop polluting the global namespace Better for the mobile application Prevents non-devs from potential security risks of putting unknown scripts on page STOP SCRIPT INJECTION
- 13. © 2015 PAIT Group WHY DO YOU NEED THE SHAREPOINT FRAMEWORK Stop polluting the global namespace Better for the mobile framework Prevents non-devs from potential security risks of putting unknown scripts on page STOP SCRIPT INJECTION Create manageable projects for multiple devs Deploy solutions easily to multiple sites or pages Use properties and keep users out of scripts ENTERPRISE READY
- 14. DEMO: A CUSTOMIZATION WITHOUT THE SHAREPOINT FRAMEWORK
- 15. DEMO: CONVERTING A CUSTOMIZATION TO THE SHAREPOINT FRAMEWORK SOURCE CODE: HTTPS://GITHUB.COM/MRACKLEY/IGNITE2017
- 16. © 2015 PAIT Group The Steps we walked through in the demo 1. Copy scripts and css files to your SPFx project 2. Add references to external scripts to Config.json 3. Import and add appropriate changes to the main .ts file 4. Take advantage of Properties to make your solution configurable by the users 5. Package and deploy your solution
- 17. © 2015 PAIT Group 1. Copy script files to your SPFx project • Copy your .js and your .css files to /src/webparts/webPartName folder • (Optional) Copy our third party files to the same location if you do not wish to reference them via CDN.
- 18. © 2015 PAIT Group 2. Add references to Config.json • Add to externals section of Config.json • Add path to library • Add globalName if other libraries are dependent • Indicate globalDependies
- 19. © 2015 PAIT Group 2. Add references to Config.json "jquery": { "path": "https://code.jquery.com/jquery-1.12.4.min.js", "globalName": "jQuery" }, "flip": { "path": "https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js", "globalName": "jQuery", "globalDependencies": ["jquery"] }
- 20. © 2015 PAIT Group 3. Make changes to main.ts Import externals Add external css Add local .js and .css files Use the pageContext object instead of _spPageContextInfo
- 21. © 2015 PAIT Group Import externals import 'jquery'; import 'flip'; declare var $;
- 22. © 2015 PAIT Group Add external css import {SPComponentLoader} from '@microsoft/sp-loader'; SPComponentLoader.loadCss("<url to css file>");
- 23. © 2015 PAIT Group Add local .js and .css files require('./PAITGroup.PromotedLinks.js'); require('./PAITGroup.PromotedLinks.css'); require('./masonry.pkgd.min.js');
- 24. © 2015 PAIT Group Use the pageContext object this.context.pageContext.site.absoluteUrl
- 25. © 2015 PAIT Group 4. Take advantage of properties For the interface /src/webparts/<project>/<project>WebPartPartProps.ts For the labels in the property panel /src/webparts/<project>/loc/en-us.js /src/webparts/<projct>/mystrings.d.ts For default values /src/webparts/<project>/<project>WebPart.manifest.json To create the property panel /src/webparts/<project>/<project>WebPart.ts
- 26. A COUPLE OF OTHER POTENTIAL HURDLES
- 27. © 2015 PAIT Group Use REST to get the Form Digest if needed var getDigestCall = $.ajax({ url: <site url> + '/_api/contextinfo', method: "POST", headers: { "Accept": "application/json; odata=verbose" } }) data.d.GetContextWebInformation.FormDigestValue
- 28. © 2015 PAIT Group Disable reactive property changes protected get disableReactivePropertyChanges(): boolean { return true; }
- 29. © 2015 PAIT Group 5. Package and deploy your solution • Update “cdnBasePath” in writes-manifest.json • gulp bundle –ship • gulp package-solution –ship • Upload files in /temp/deploy to CDN location • Upload app package at /sharepoint/solution to app catalog Deploy your SharePoint client-side web part to a Azure Storage account https://dev.office.com/sharepoint/docs/spfx/web-parts/get- started/deploy-web-part-to-cdn
- 30. Thank you http://www.paitgroup.com http://www.markrackley.net mrackley@paitgroup.com @mrackley © 2016 PAIT Group http://www.PAITGroup.com December 14,2016