SharePoint Unite 2017 Session

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