Download
sharepoint framework and modern sites n.
Skip this Video
Loading SlideShow in 5 Seconds..
SharePoint Framework and Modern Sites PowerPoint Presentation
Download Presentation
SharePoint Framework and Modern Sites

SharePoint Framework and Modern Sites

151 Views Download Presentation
Download Presentation

SharePoint Framework and Modern Sites

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. SharePoint Framework and Modern Sites Eric J Oszakiewski Development Manager – General Motors twitter.com/eoszak eric@oszak.com 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

  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!)

  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

  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

  8. Improvements with Modern Column formatting

  9. Improvements with Modern { "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", "elmType": "div", "attributes": { "class": "=if(@currentField <= 70,'sp-field-severity--warning', '')" }, "children": [ { "elmType": "span", "style": { "display": "inline-block", "padding": "0 4px" }, "attributes": { "iconName": "=if(@currentField <= 70,'Error', '')" } }, { "elmType": "span", "txtContent": "@currentField" } ] }

  10. Improvements with Modern Formatting list views

  11. Installing Pre-reqs Visual Studio Code (or similar IDE) Node.js (8.15.1 LTS) npm install -g yo gulp npm install -g @microsoft/generator-sharepoint@1.7.1 gulp trust-dev-cert (only need to do this once per machine) yo @microsoft/sharepoint (follow prompts)

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

  13. gulp serve on application customizer

  14. gulp serve on webpart

  15. Workbench

  16. Workbench

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

  18. Deploying constspsync = require('gulp-spsync-creds').sync; build.task('upload-app-pkg', { execute: (config) => { return new Promise((resolve, reject) => { constpkgFile = require('./config/package-solution.json'); constfolderLocation = `./sharepoint/${pkgFile.paths.zippedPackage}`; return gulp.src(folderLocation) .pipe(spsync({ "username": "<username>", "password": "<password>", "site": "https://<server>/sites/<app-catalog-url-frag>", "libraryPath": "AppCatalog", "publish": true })) .on('finish', resolve); }); } }); 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

  19. Deploying PowerShell to SPO Connect-PnPOnline -Urlhttps://tenantname.sharepoint.com Add-PnPApp -Path <path to file.sppkg> -Scope Site –Publish (for tenant-wide deployment) Add-PnPApp -Path <path to file.sppkg> –Publish

  20. Deploying 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 "Done" -ForegroundColor Yellow Write-Host "Installing branding app..." -ForegroundColor Yellow -NoNewline $app = $apps | Where {$_.Title -eq “my-solution-name"} $appmgr.Install($app) $context.ExecuteQuery() Write-Host "Done" -ForegroundColor Yellow PowerShell to On-Prem using CSOM (requires adding to App Catalog first)

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

  22. Q&A Questions? Feedback?

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