1. SharePoint Framework and Modern Sites
Eric J Oszakiewski
Development Manager – General Motors
twitter.com/eoszak
youtube.com/sharepointeric

2. Agenda Intro (< 5 min)
Overview of Classic vs. Modern site differences (5-10 min)
SharePoint Framework review and installation/configuration (5-10 min w/ demo)
Creating a simple app (5 min w/ demo)
Deploying to SP2019 and activating on modern site (5 min w/ demo)
Q&A (~5 min)

3. Intro Programming since 1982 (TSO, Phoenix, BASIC, DASD)
12 years developing with SharePoint (started with WSS 2.0)
Current project: migrate 12k site collections to SP2019 on prem
Side projects: Xamarin mobile apps, .Net Web API, Azure CI/CD

4. Classic vs. Modern sites, lists, libraries
User Custom Actions
Supported
Supported except ScriptBlock or ScriptSrc
SharePoint Designer
Not supported
JSLink, custom CSS and custom masterpage
Office or Reporting tools (InfoPath, Access, SSRS, PowerPivot)
Discuss classic and modern site differences
Only available in classic: Ribbon toolbars, Tree view, External Data columns and Publishing Columns.
User Custom Actions ok except ones involving injection of scripts or scripted code, so no ScriptBlock or ScriptSrc actions.
SharePoint designer will work on classic sites in 2019 but not on Modern sites. PowerApps for customizing and Flow for workflows.
No JSLink, custom CSS and customized masterpages.
No SharePoint Server Publishing and Minimum Download Strategy.
Mention InfoPath
No Access, SSRS and PowerPivot Gallery
Potential branding problem!

5. So, what are some branding options?
Custom theme
Office UI Fabric design toolkit (React or AngularJS)
On-Prem limited to colors and fonts only
Opt out of the modern list/library experience
No content rendered with modern look
Deprives users from improved experience
SharePoint Framework application extension (replaces Custom Actions and web parts!)
Branding using Themes
Office UI Fabric design toolkit (Adobe XD) to design a custom look and feel using either React or AngularJS. On-Prem, is limited to colors and fonts only. SPO can take advantage of also including an updated header and footer, logos, etc.
You can opt out of the modern list/library experience, which will not render any content with the modern look. This may allow a more backwards-compatible result, but will ultimately not be compatible in future releases at some point. Not to mention the fact users should be allowed to enjoy the updated experience and take advantage of modern features and benefits.
SharePoint Framework, forward looking approach to platform customization

6. SharePoint Framework
Originally we built managed & full trust code to highly customize SharePoint
Not suitable for multi-tenant, SPO environment
SharePoint Framework (SPFx) released in Feb 2017
Provides a standardized framework for custom extensions and applications on SPO in a supported, future-prepared way
Modern web stack technologies
Streamlined experience
New development model for SharePoint user interface extensibility.
Structured and supported approach to extend the SharePoint UI by using client-side frameworks and modern web technology.
Originally we built managed & full trust code to highly customize SharePoint. Used to build .Net C# projects: feature receivers, event receivers, staplers, visual web parts or even state machine workflows.
Doesn’t allow for a multi-tenant, cloud-based approach.
SharePoint Framework was released in response
A supported and future-prepared way
Standardized framework using modern web stack technologies
Plays well with IDEs and platform-agnostic tools such as node.js, gulp, webpack and yeoman.
Streamline the development experience without requiring the tools for actual execution of the code.

7. Pros/Cons
Pros
SPFx does not run in an iFrame like traditional add-ins (SHA, PHA)
Better control over arbitrary HTML and JS
Tenant-wide deployment in SPO (not available on prem at this time)
Cons
Possible learning curve
Limited to client-side code
Unlike SHAs and PHAs, SPFx apps don’t run in an iFrame.
Fully trusted client-side solutions.
Better control over arbitrary HTML and JS.
Option to deploy farm (or in this case tenant) wide, however that is currently only available in SPO.
Limitation to client-side code only. Although we can do quite a bit using client-side code, REST APIs, even JS CSOM, the entire suite of functionality is not available in client side SharePoint, which could cause disruption for some who are expecting or depending on this.

8. Improvements with Modern
Column formatting
Nice improvements to lists and libraries in 2019, for example the ability to format columns. There are two ways to do this, one is using a SharePoint Framework Field Customizer extension, the other is using a JSON object to define the rules for how you want your columns to render. In versions prior to SharePoint 2016, developers would replace cell data with images or colors using either a formula in a calculated column, using JSLink to include a PreRender Template, or even just adding the JS code right to the page. In 2019 injected JS code isn’t possible without a SPFx solution, but you can use the other method, by modifying the display of the column using JSON syntax.

9. Improvements with Modern{
"$schema": "
"elmType": "div",
"attributes": {
"class": <= 70,'sp-field-severity--warning', '')" },
"children": [
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
"iconName": <= 70,'Error', '')" }
"txtContent": ]
Here is an example of how the previous image was constructed using JSON formatting on the column. Although this requires a familiarity with the JSON schema for the column object, and a comfort level with creating this in VS Code, Notepad++, Notepad, or some other IDE, it’s certainly now a lot easier than in previous versions of SharePoint!

10. Improvements with Modern
Formatting list views
This is an example of what the previous slide’s code will accomplish on a list.

11. Installing Pre-reqs Visual Studio Code (or similar IDE)
Node.js ( LTS)
npm install -g yo gulp
npm install -g
gulp trust-dev-cert (only need to do this once per machine)
(follow prompts)
Would normally do a demo here, but installation will waste a LOT of time, so show screenshots
Also ensure your version of Node.js is , currently the 10.x LTS of Node.js is not compatible with SharePoint Framework.
Note how tried spawning a webpart using of generator-sharepoint and getting issues with missing package. Went back to for this demo.

15. Will add a file to your solution that tells SP to permit tenant-wide deployment.

16. Currently can build either a client-side web part (CEWP or SEWP) or an Extension

17. Currently can build either an application customizer (Custom Action), Field Customizer (few slides back) or a ListView Command Set

18. Building/Testing gulp serve (to test locally)
Uses workbench.html to experiment on your local machine like a 2019 modern page
Demo

19. gulp serve on application customizer
For an application customizer, gulp serve will run the solution but point to a bad URL, because the default serve.json file is loaded with Contoso references!

20. gulp serve on webpart
If instead we were creating a webpart as opposed to an application customizer, gulp serve produces a very different result. Now it loads workbench, a local environment for testing the behavior of our web part.

21. Workbench
Workbench will allow you to select one of your transpiled projects and test it out live!

22. Workbench
You can even interact with the web part

23. Building/Testing gulp bundle --ship (to pre-package everything)
Must run before package-solution --ship!
No manifests were found in '*.json'. Ensure a build has completed successfully and that paths.manifestsMatch is correct
gulp package-solution --ship
Solution will be a .sppkg file in the /sharepoint/solution folder in the project
Do demo, show what happens if you don’t run bundle first.

24. Deploying Requires deployment to App Catalog Manual deployment
Auto-publish using gulp
npm install gulp-spsync-creds
Add code to gulpfile.js
gulp build-solution --ship
gulp upload-app-pkg --ship
const spsync = require('gulp-spsync-creds').sync;
build.task('upload-app-pkg', {
execute: (config) => {
return new Promise((resolve, reject) => {
const pkgFile = require('./config/package-solution.json');
const folderLocation = `./sharepoint/${pkgFile.paths.zippedPackage}`;
return gulp.src(folderLocation)
.pipe(spsync({
"username": "<username>",
"password": "<password>",
"site": "
"libraryPath": "AppCatalog",
"publish": true
}))
.on('finish', resolve);
}); }
Using a transpiled SPFx application in your SharePoint sites requires it being loaded to the App Catalog. For deployment you have several options. One simple method is to have someone load the package to the App Catalog manually (drag and drop, upload, etc.). Another is to use another node package called sync-creds that lets you enter credentials that have access to the App Catalog in the application, set up a task in your Gulp task runner and it will automatically push it. The risk here is the credentials are in plain text, so using some kind of Hashicorp Vault or another credential manager might be necessary.

25. Deploying PowerShell to SPO
Connect-PnPOnline -Url
Add-PnPApp -Path <path to file.sppkg> -Scope Site –Publish
(for tenant-wide deployment)
Add-PnPApp -Path <path to file.sppkg> –Publish
Another option is to use PowerShell. Here is an example using PowerShell and PnP to upload and publish the application to a SharePoint Online tenant. Notice the Tenant-wide deployment option? This is only available in SPO. On-prem installs will still need to apply it to each site collection manually.

26. Deploying
PowerShell to On-Prem using CSOM (requires adding to App Catalog first)
cls
$CSOMPath = "C:\program files\common files\microsoft shared\web server extensions\16\isapi\“
$OfficeDevPnPPath=“<path to those files>”
Import-Module "$CSOMPath\Microsoft.SharePoint.Client.dll"
Import-Module "$CSOMPath\Microsoft.SharePoint.Client.Runtime.dll"
Import-Module " $OfficeDevPnPPath\Microsoft.IdentityModel.Clients.ActiveDirectory.dll"
Import-Module " $OfficeDevPnPPath \SharePointPnP.IdentityModel.Extensions.dll"
Import-Module " $OfficeDevPnPPath\Microsoft.Graph.Core.dll"
Import-Module " $OfficeDevPnPPath\Microsoft.Graph.dll"
Import-Module " $OfficeDevPnPPath\OfficeDevPnP.Core.dll"
Import-Module " $OfficeDevPnPPath\Newtonsoft.Json.dll"
Write-Host "Connecting to app catalog..." -ForegroundColor Yellow -NoNewline
$context = New-Object Microsoft.SharePoint.Client.ClientContext(“<url to target site collection>")
$appmgr = New-Object OfficeDevPnP.Core.ALM.AppManager($context)
Write-Host "Done" -ForegroundColor Yellow
Write-Host "Locating branding app..." -ForegroundColor Yellow -NoNewline
$apps = $appmgr.GetAvailable();
Write-Host "Installing branding app..." -ForegroundColor Yellow -NoNewline
$app = $apps | Where {$_.Title -eq “my-solution-name"}
$appmgr.Install($app)
$context.ExecuteQuery()
Here’s still another example of a PowerShell script for on-prem deployment using the CSOM Office Dev PnP NuGet libraries and a couple from SP Although it looks like a lot, half of it is loading the required libraries. In the end this will activate an already deployed application in the app catalog on a desired site collection. This requires that the package was already added to the app catalog by some other means. This could easily be modified to include a section that uploads it first!

27. Summary SPFx: lightweight, standardized
Experienced developers should be able to quickly ramp up
Compatible with 2019 on-prem or SPO
Allows continued scripting customizations in a more controlled and future- oriented way.
Just one method, many others for customizing SharePoint!

28. Q&A
Questions? Feedback?

29. Thank you!
SharePoint Framework enterprise guidance - us/sharepoint/dev/spfx/enterprise-guidance
Setting up SPFx - your-development-environment
Building your first app - us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part
Connect an SPFx web part to SharePoint - us/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint
Deploy to SharePoint - parts/get-started/serve-your-web-part-in-a-sharepoint-page
Custom Action to App Extension - us/sharepoint/dev/spfx/extensions/guidance/migrate-from-usercustomactions-to- spfx-extensions
SPFx Roadmap -