1. 8/2/2018 4:49 AM
Understanding the SharePoint Framework and how it affects your JavaScript customizations
Mark Rackley /
Chief Strategy Office / PAIT Group
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. Mark Rackley / Partner & CSO
20+ years software architecture and development experience
Office 365 MVP, SharePoint Junkie since 2007
SharePoint Client Side Developer since 2009
Event Organizer of The North American Collaboration Summit (collabsummit.org)
Blogger, Writer, Speaker
Podcaster - Techsplaining
@mrackley

3. The Problem
We’ve been creating awesome functionality using Content Editor and Script Editor Web Parts since SharePoint 2007.
How can we reuse our scripts in the new SharePoint Framework without having to rewrite them all in TypeScript and without having to have a deep understanding of the SharePoint Framework?

4. Why is it a Problem?
There is no native Content Editor Web Part or Script Editor Web Part for Modern Pages and Sites.
End Users are altering scripts causing support nightmares.
There’s not a good management and deployment story

5. The Solution!
Convert your JavaScript solutions to the SharePoint Framework using the steps outlined in this session without having to be a SharePoint Framework guru.

6. The Benefits to using the SPFx!
Use Properties for customizing solutions instead of changing the script (Keep power users out of the code)
Better management and deployment story
Works on both Classing and Modern Pages

7. Demo – Converting your CEWP Solution to the SharePoint Framework
Mark Rackley
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

8. The Steps we walked through in the demo
Copy script and css files to your SPFx project
Add references to external scripts to Config.json
Import and add appropriate changes to the main .ts file
Take advantage of Properties to make your solution configurable by the users
Package and deploy your solution

9. 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.

10. 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

11. 2. Add references to Config.json
"jquery": {
"path": "
"globalName": "jQuery" },
"flip": {
"path": "
"globalName": "jQuery",
"globalDependencies": ["jquery"] }

12. 3. Make changes to main.ts Import externals Add external css
Add local .js and .css files
Use the pageContext object instead of _spPageContextInfo

13. Import externals
import 'jquery';
import 'flip';
declare var $;

14. Add external css
import {SPComponentLoader} from
SPComponentLoader.loadCss("<url to css file>");

15. Add local .js and .css files
require('./PAITGroup.PromotedLinks.js');
require('./PAITGroup.PromotedLinks.css');
require('./masonry.pkgd.min.js');

16. Use the pageContext object
this.context.pageContext.site.absoluteUrl

17. 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

18. A Couple of other gotchas

19. 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

20. Disable reactive property changes
protected get disableReactivePropertyChanges(): boolean {
return true; }

21. 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

22. Source code https://github.com/mrackley/ignite2017

23. https://github.com/SharePoint
8/2/2018 4:49 AM
Mastering the SharePoint Framework
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

24. Please evaluate this session Your feedback is important to us!
8/2/2018 4:49 AM
Please evaluate this session Your feedback is important to us!
The slide will be replaced onsite through Silver Fox Productions with an updated QR code.
This slide is required. Do NOT delete or alter the slide.
From your PC or Tablet visit MyIgnite at
From your phone download and use the Ignite Mobile App by scanning the QR code above or visiting
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

25. 8/2/2018 4:49 AM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.