8/2/2018 4:49 AM Understanding the SharePoint Framework and how it affects your JavaScript customizations Mark Rackley / mrackley@paitgroup.com 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.

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 www.paitgroup.com mrackley@paitgroup.com @mrackley

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?

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

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.

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

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.

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

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.

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

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"] }

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

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

Add external css import {SPComponentLoader} from '@microsoft/sp-loader'; SPComponentLoader.loadCss("<url to css file>");

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

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

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

A Couple of other gotchas

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

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

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

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

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

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 http://myignite.microsoft.com From your phone download and use the Ignite Mobile App by scanning the QR code above or visiting https://aka.ms/ignite.mobileapp © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

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.