sharepoint framework : le développement sharepoint nouvelle génération
TRANSCRIPT
![Page 1: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/1.jpg)
![Page 2: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/2.jpg)
Gaetan Bouveret@gbouveret
Olivier Carpentier@olivierc
Le nouveau SharePointFramework (SPFx)
![Page 3: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/3.jpg)
AgendaDécouvrir SPFxClient Side Web PartsALM (Application Lifecycle Management)Questions / Réponses
![Page 4: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/4.jpg)
Découvrir SPFx
![Page 5: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/5.jpg)
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
![Page 6: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/6.jpg)
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
![Page 7: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/7.jpg)
The new SharePoint based on SPFx
7
![Page 8: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/8.jpg)
SharePoint Framework
SharePoint framework
LOB Systems and Cloud ServicesMicrosoft Graph
Team Site
Pages & Parts
App & Custom Portal
ISVs
SPFx:ProDev
UX Layer Extensio
ns
![Page 9: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/9.jpg)
• 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
![Page 10: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/10.jpg)
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
![Page 11: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/11.jpg)
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
![Page 12: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/12.jpg)
Client Side Web Parts
![Page 13: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/13.jpg)
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
![Page 14: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/14.jpg)
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
![Page 15: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/15.jpg)
N° 15
Démo : Web Part Build Flow
![Page 16: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/16.jpg)
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
![Page 17: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/17.jpg)
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
![Page 18: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/18.jpg)
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
![Page 19: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/19.jpg)
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
![Page 20: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/20.jpg)
N° 20
Démo : Advanced Web Parts
![Page 21: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/21.jpg)
ALM
![Page 22: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/22.jpg)
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
![Page 23: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/23.jpg)
Office 365 Public CDN Preview
N° 23
![Page 24: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/24.jpg)
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
![Page 25: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/25.jpg)
• 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
![Page 26: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/26.jpg)
N° 26
![Page 27: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/27.jpg)
@microsoftfrance @Technet_France @msdev_fr
N° 27
![Page 28: SharePoint Framework : le développement SharePoint nouvelle génération](https://reader036.vdocuments.net/reader036/viewer/2022062412/5880f8e91a28abc3368b5d4d/html5/thumbnails/28.jpg)
N° 28