Gaetan Bouveret@gbouveret
Olivier Carpentier@olivierc
Le nouveau SharePointFramework (SPFx)
AgendaDécouvrir SPFxClient Side Web PartsALM (Application Lifecycle Management)Questions / Réponses
Découvrir SPFx
SharePoint Development ModelEvolution
2003
ASP.NETASP.NET Web Parts, Full Trust APIs, Server Side Event Receivers…
2007
ASP.NETASP.NET Web Parts, Full Trust APIs, Server Side Event Receivers…
2010
ASP.NETASP.NET Web Parts, Full Trust APIs, Server Side Event Receivers…
2013ASP.NETASP.NET Web Parts, Full Trust APIs, Server Side Event Receivers…
2001
ASP Digital Dashboards, File System Storage, etc.
Server Side Development
of customers are leveraging cloud for their applications—from pilots to production apps2
72%“Nearly of large enterprises will likely have hybrid cloud deployments by the end of 2017”1
50%
Sources:1. Gartner, Inc. 2013. Press Release: http://www.gartner.com/newsroom/id/25993152. 451 Research, Hosting and Cloud Study, 2014
SharePoint is the place where your Teams will go to work. A refreshing change which places our beloved platform back as the leader in its space, especially when you consider the integrations with the rest of the Office 365 Suite. – Benjamin Niaulin, Sharegate
The new SharePoint based on SPFx
7
SharePoint Framework
SharePoint framework
LOB Systems and Cloud ServicesMicrosoft Graph
Team Site
Pages & Parts
App & Custom Portal
ISVs
SPFx:ProDev
UX Layer Extensio
ns
• Modern Tool Chain• Outillage Dev Web/Front • Amélioration de la qualité de
code• Déploiement / Test / Debug
simplifiés et rapides• Office UI Fabric
• UI controls, Styles, CSS• Ce sont ces outils qu'utilisent les
équipes Microsoft
Open Source Tooling Support
Poste local Visual Studio / Code NodeJS $ npm -g install npm@next Yeoman and gulp $ npm i -g yo gulp Yeoman SharePoint generator $ npm i -g @microsoft/generator-sharepoint
Tenant Office 365 Developer Collection de site "Dev" Bibliothèque avec page Workbench (upload) App Catalog
Prérequis / EnvironnementPréparer votre environnement de développement
N° 10
Enterprise-Grade
Modern Toolchain
User Focused
Customer
PatternsMicrosoftConsistentPlatform
UX Extensions Data Access Eventing Solutions HostCustom Presentation
2016 Client Side and Open Source
Client Side and Remotely Hosted
REST and Cleaner Contracts
Web Hooks and Web Sockets
Cloud SaaS and Client Side Logic
Accelerating Web Development
Client Side Web Parts
Processus de construction d’une nouvelle WebPart
Install SharePoint Generator
Scaffold SharePoint Web Part Project
Build Web Part Code
Test
Local
SharePoint
Package/Deploy
Available on Classic and Client-Side Pages
Available on Classic and Client-Side Pages
Available on Classic and Client-Side Pages
Ship
Package/Deploy
npm install generator SharePoint
yo sharepoint webpart
Code
gulp serve
workbench
gulp package-solution
gulp upload-cdn
workbench
Texte• Texte courant
Local & SharePoint workbench
N° 14
Workbench local Test/debug rapide des
WebParts (mock) Workbench dans SharePoint
(dev): Interaction avec SharePoint Attention, l'exécution
reste locale Prévisualisation en mode
mobile et tablettes
N° 15
Démo : Web Part Build Flow
Le nouveau Properties Panel
N° 16
Réactif ou non réactif Basé sur les contrôles d’Office UI Fabric Possibilité de créer ses propres types de
propriétés Types disponibles OOB
• PropertyPaneTextField• PropertyPaneDropdown• PropertyPaneSlider• PropertyPaneToggle• PropertyPaneCheckbox• PropertyPaneChoiceGroup• PropertyPaneLink• PropertyPaneLabel• PropertyPaneHorizontalRule
Le nouveau Properties Panel
N° 17
Plusieurs modes de navigation disponibles : • Simple, Accordéon ou par Pages Utiliser une
image ou une « font image » Office UI Fabric
Modèles standards: React, Knockout, no framework Possible d’ajouter un Fx JS externe (jQuery, Angular v2,
…) ou autres Présence en standard de React Office UI Fabric est basé sur React (
https://github.com/OfficeDev/office-ui-fabric-react/) DocumentCard, Persona DatePicker, Dialog, Panel Etc.
Intégrer un Framework JavaScript
N° 18
Méthodes• REST API (https://consoto.sharepoint.com/_api/lists/$select=id)• Search Rest API / Office Graph (
https://consoto.sharepoint.com/_api/search/query)• JSOM • Microsoft Graph (https://graph.microsoft.com)
• Microsoft Graph SDK JavaScript• https://github.com/microsoftgraph/msgraph-sdk-javascript
Accèder à SharePointInteragir avec les listes, les éléments, les fichiers, etc.
N° 19
N° 20
Démo : Advanced Web Parts
ALM
Upload CDNPublication des développements
$ gulp –ship$ gulp deploy-azure-storagedeploy-azure-storage.json { "workingDir": "./temp/deploy/", "account": "<!-- STORAGE ACCOUNT NAME -->", "container": "helloworld-webpart", "accessKey": "<!-- ACCESS KEY -->" } write-manifests.json { "cdnBasePath": "<!-- PATH TO CDN -->"}
CDN
BLOB Azure
App (JS / CSS / images, …)
CatalogApp &
WebPart
Deploy
Package
Office 365 Public CDN Preview
N° 23
package-solution.json{ "solution": { "name": "helloworld-webpart-client-side-solution", "id": "ed83e452-2286-4ea0-8f98-c79d257acea5", "version": "1.0.0.0" }, "paths": { "zippedPackage": "helloworld-webpart.spapp" }}
Packaging SharePoint AppMise à disposition des WebParts
$ gulp package-solution
• http://dev.office.com/sharepoint • https://github.com/SharePoint• https://channel9.msdn.com/blogs/OfficeDevPnP• http://dev.office.com/sharepoint/docs/spfx/web-parts/get-
started/build-a-hello-world-web-part • https://github.com/SharePoint/sp-dev-fx-webparts • https://sharepoint.github.io/modules/_sp_client_preview_.html• https://github.com/oliviercc/sp-client-custom-fields• https://github.com/oliviercc/spfx-40-fantastics
Pour aller plus loinLes ressources indispensables
N° 25
N° 26
@microsoftfrance @Technet_France @msdev_fr
N° 27
N° 28