SharePoint Framework (SPFx) Gosia Borzecka @gosiaborzecka

About me www.gosiaborzecka.net @gosiaborzecka

Agenda What is SharePoint and Office 365 Overview of SPFx Demo Summary QA

What is SharePoint?

SharePoint on-premises SharePoint Online

What is Office 365?

Office 365 Roadmap

SharePoint Development Farm based Sanboxes SharePoint Add-ins Manual injecting JS file

What is SharePoint Framework (SPFx)? Client-side SharePoint development Open Source tooling Responsive and mobile-ready Works for SharePoint Online and SharePoint on-premises

Modern Pages https://blogs.office.com/en-us/2016/05/04/the-sharepoint-framework-an-open-and-connected-platform/

Main Components NodeJS Npmjs Gulp TypeScript Yeoman build & run the applications NodeJS manages the dependencies required for the application Npmjs automate the tasks of building and running the solution Gulp Build the application and compile into clean, simple JavaScript code TypeScript create a solution structure for the application Yeoman

Extra Components Visual Studio Code GitHub JS Frameworks edit and manage the source code Visual Studio Code contribute the source GitHub use any type of JS Framework (React, AngularJS, KnockoutJS etc..) JS Frameworks

IIS Express C# Project Templates MSBuild

How to start? npm install –g bower npm install –g yo npm install –g tsd npm install –g gulp-cli npm i @microsoft/generator-sharepoint

DEMO Modern Page Environment Display Mode Page Context Debugging Logging Mock Data List Deploy on SharePoint DEMO

Workbench Local SharePoint Runs on https://localhost Has no SharePoint Context Use mock data SharePoint Runs on SharePoint Site (https://<your-sharepoint-site>/_layouts/15/workbench.aspx) Has SharePoint Context Use SharePoint data

Helpful commands create new project / add new web part yo @microsoft/sharepoint create new project / add new web part gulp bundle build and bundle project gulp serve bundle project and start Workbench gulp package-solution build solution package (.spapp) gulp nuke delete build and intermediate folders gulp test run tests gulp trust-dev-cert generates and trusts a development certificate --ship argument to execute a release build

Property Pane Text Button Checkbox ChoiceGroup Custom DropDown PropertyPaneTextField Text PropertyPaneButton Button PropertyPaneCheckbox Checkbox PropertyPaneChoiceGroup ChoiceGroup PropertyPaneCustomField Custom PropertyPaneDropdown DropDown PropertyPaneHorizontalRule HorizontalRule PropertyPaneLabel Label PropertyPaneLink Link PropertyPaneSlider Slider

Environment import { EnvironmentType } from '@microsoft/sp-client-base'; this.context.environment.type Values: EnvironmentType.Tests – Tests context EnvironmentType.Local – SharePoint Workbench EnvironmentType.SharePoint – Modern SharePoint page EnvironmentType.ClassicSharePoint – Classic SharePoint Page

Display mode DisplayMode.Edit DisplayMode.Read

Logging Log.info('HelloWorld', 'Info message', this.context.serviceScope); Log.warn('HelloWorld', 'Warn message', this.context.serviceScope); Log.error('HelloWorld', new Error('Error message'), this.context.serviceScope); Log.verbose('HelloWorld', 'Verbose message', this.context.serviceScope);

Deploy > $creds = Get-Credential > Connect-SPOService -Url https://<TENANCY>-admin.sharepoint.com/ -Credential $creds > Set-SPOTenant -PublicCdnEnabled $true > Set-SPOTenant -PublicCdnAllowedFileTypes "CSS,EOT,GIF,ICO,JPEG,JPG,JS,MAP,PNG,SVG,TTF,WOFF,TXT" > New-SPOPublicCdnOrigin -Url "https://<TENANCY>.sharepoint.com/sites/<SITE>/siteassets/cdn" > Get-SPOPublicCdnOrigins

Deploy https://publiccdn.sharepointonline.com/<TENANCY>.sharepoint.com/<your- CDN-origin-Id> gulp bundle –ship gulp package-solution –ship …\temp\deploy -> copy to CDN …\sharepoint\solution\<webpartname>.sppkg -> deploy on app

UI Fabric Fonts, icon Colour Component Front-end experiences for SharePoint Powers Microsoft’s own experiences Available out-of-the-box Design web parts seamlessly Office UI Fabric React includes a rich set of reusable controls Fonts, icon Colour Component

Microsoft Graph

SPFx is open source https://github.com/OfficeDev/office-ui-fabric-react https://github.com/OfficeDev/generator-office https://github.com/SharePoint/sp-dev-docs

If you want to know more! Dev Office https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview Waldek Mastykarz https://blog.mastykarz.nl/ Andrew Connell http://www.andrewconnell.com/ Vesa Juvonen http://blogs.msdn.com/vesku Jeff Teper http://blogs.office.com SharePoint Saturday http://www.spsevents.org/ UK Community Days http://uk.communities.tech/

https://dev.office.com/

@gosiaborzecka Q&A www.gosiaborzecka.net

SAY THANK YOU TO OUR SPONSORS!

Sponsor Raffle!!! Each sponsor stamp will opt you into their raffle prize and mailings Collect 9+ sponsor stamps on your Badge to be eligible for the Xbox Hand entire Badge/ ribbon back into registration desk at end of day We will draw Badges for prizes at 5pm in Cromwell (if you are drawn and do not have the pre- requisite stamp/s….. You lose!) SQLCloud: XBox One-S with Forza Horizon 3 Bundle; Amazon Fire TV with 4K Ultra HD; Raspberry Pi 3 Starter Kit; dbWatch: Apple iPad Mini; Skybow: Marshall Speaker; Coeo: A free place on any Coeo training course, RRP £600; Edison365: Helicopter ride (lunchtime session prize) and a Fire TV Stick; Pyramid Analytics: Amazon Echo; Quest: Samsung Gear S2 Smartwatch; DBPro/ SQLGovernor: Splash-proof JBL bluetooth speaker; Redgate: SQL Monitor License - with 12 months support and upgrades; Axioworks: Amazon Echo Dot; Idera: $100 Amazon card; Lightning Tools: Lego Technics Race Car; SQL Sentry: SQL Sentry license and 1 year of support (worth $2994); Locke Data: R for Data Science: Import, Tidy, Transform, Visualize, and Model Data; SharePoint Unite /BMM Media: A free pass to SharePoint Unite 2017 conference in Haarlem, Netherlands, on the 25th & 26th October. worth €699. travel and hotel not included; PASS: Recording (download) of all sessions from PASS Summit 2016

Social Make sure you tweet on #spscambridge or #sqlsatcambridge During the event we have Giant Jenga, Sack races and Conker Fights! After event, join us for a post event SharePint/ SQLPint from our bar Don’t forget to thank Sponsors, Volunteers and Speakers! The event will close at 6.30pm

Thank you! www.gosiaborzecka.net @gosiaborzecka