1. Let's build with SharePoint Web parts, extensions, and much more
5/22/2018 5:02 AM
BRK3267
Let's build with SharePoint Web parts, extensions, and much more
Luca Bandinelli
Paolo Pialorsi
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. Goals Learn how to extend SharePoint modern experiences
with SPFx components:
Recap of What SPFx Web Parts are
Go Deep on SharePoint Extensions
Understand Microsoft Graph integration
Introduce per tenant Web APIs and permission scopes configuration

3. SPFx Development in SharePoint
SharePoint [empowers you to]
Share and work together
Inform and engage people
Transform business process
Harness collective knowledge
Protect and manage
Extend and develop
SharePoint Framework [enables]
Modern client-side development
Lightweight web and mobile
Industry leading client side solutions On-Premises and in the Cloud
An Application Development Framework that aligns 1st and 3rd parties
Backward compatible components
Open source tools and JavaScript web frameworks in SharePoint pages

4. Building out the User Experience
TechReady 23
5/22/2018 5:02 AM
Building out the User Experience
SharePoint Framework
Provider Hosted 
Web Parts
Extensions
Add-ins
Experiences
MS Graph
CSOM
Client side Tools
Package Deployment
SP APIs
Development
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5. Client-side Web Parts They are still web parts!
5/22/2018 5:02 AM
Client-side Web Parts
They are still web parts!
Built for the modern, JavaScript-driven web.
Runs directly inside a SharePoint Page.
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

6. Let’s talk about the Tech
5/22/2018 5:02 AM
Let’s talk about the Tech
Client side technology
Responsive by design
Open source toolchain
Platform agnostic
JavaScript (TypeScript)
Based on the latest industry standards
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

7. Server side tool comparison
SharePoint Server Side
IIS Express C#
Project Templates
MSBuild
SharePoint Client Side
Microsoft Confidential

8. Demo SharePoint Framework - Client Side Web Parts Microsoft Build 2017
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

9. Tenant wide deployment
Microsoft Build 2017
5/22/2018 5:02 AM
Tenant wide deployment
Available for all SPFx Components
Works for both Web Parts and Extensions
Developers code it, Admins govern it
Admins can decide not to make the component(s)
available on the whole tenant immediately
In that case, installing the app in the site collection
is required
Not suitable for all scenarios
Any feature framework definitions in the SharePoint Framework
solution will be ignored
Warning is provided at compilation time for developers
in case of Extensions {
"solution": {
"name": "tenant-deploy-client-side-solution",
"id": "dd4feca4-6f7e-47f1-a0e2-97de8890e3fa",
"version": " ", "skipFeatureDeployment": true },
"paths": {
"zippedPackage": "solution/tenant-deploy-true.sppkg“ }
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

10. SPFx Client Side Extensions

11. Application Customizer
5/22/2018 5:02 AM
SPFx Extensions
Built with the same architecture of SPFx Web Parts
The same tool chain and deployment model as client side web parts.
Derive from a strongly typed base class wherever possible rather than manipulating the page DOM directly.
Replacing custom actions and JSLinks
Work with NoScript via tenant app catalog
Work in site collection app catalog
Create custom field, footers and headers as well as custom command on both modern list and libraries and Pages. The same governance and ALM models available for SPFx web parts are also applied to Extensions
Application Customizer
List, Libraries, Pages
Command Set
List, Libraries
Field Customizer
List, Libraries
Toolbar
ECB
Add custom rendering script to well- known placeholders
Extend the modern list command surface
Customize how columns are rendered
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

12. Extensions Execution Logic
SharePoint Service
SharePoint API
User navigates to the list, library or page
Server Returns:
Application Data (List data or Page data)
SPFx JavaScript Libraries
Manifest for all active SPFx components (extensions, web parts)

13. Extensions Execution Logic
SharePoint Service
SharePoint API
Application starts rendering
SPFx requests the component scripts from their location (normally a CDN)
Application finishes rendering
Web parts and extensions are executed
Note: for field customizers data is not rendered until extension code is executed

14. Extensions Execution Logic
SharePoint Service
SharePoint API
List View Command Sets can be used to introduce new custom actions to a list.
Can be configured to be active when numerous items are selected.
Specific areas in the page are available for Application Customizers to embed customizations
for end users. Application Customizers can be also invisible for the end users.
List View Field customizers can be used to customize experiences around the specific fields. They can be associated to a specific field instance to make a customization execute when it’s used.

15. Demo SharePoint Framework - Client Side Extensions Part 1
Microsoft Build 2017
5/22/2018 5:02 AM
Demo
SharePoint Framework - Client Side Extensions Part 1
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

16. Consuming Microsoft Graph And Web APIs

17. Consuming Web APIs
SharePoint Online relies on the oAuth2 and Explicit flow to obtain access tokens from AAD; that applies for modern apps, web parts and extensions where request of access data initiates on the browser (JavaScript)
SharePoint Online
Azure Active Directory

18. Consuming Web APIs
SharePoint Online relies on the oAuth2 and Explicit flow to obtain access tokens from AAD; that applies for modern apps, web parts and extensions where request of access data initiates on the browser (JavaScript)
SharePoint Online
Azure Active Directory

19. Data, Script Tags, SPO bearer Token
Consuming Web APIs
The browser (JavaScript) makes a call to a SharePoint REST end-point ('/_api/SPOAuth.Token/Acquire) to obtain the authorization (token) to access a specific resource
SharePoint Online
Azure Active Directory
Browse to …sites/Site1/Pages/Default.aspx
Data, Script Tags, SPO bearer Token
Browse to …/_api/SP.OAuth.Token/Acquire*

20. Consuming Web APIs
SharePoint then calls AAD which retrieves the security scopes to access a specific resource from the configuration of the SharePoint Online app principal
SharePoint Online
Azure Active Directory
Browse to …sites/Site1/Pages/Default.aspx
Data, Script Tags, SPO bearer Token
(S2S) GetToken [/oauth2/token]
App ID: ff1-ce
audience:
Browse to …/_api/SP.OAuth.Token/Acquire*
Delegation Token with default scopes
ReturnURL: *.SharePoint.com
Delegated Token passed back to the browser

21. Consuming Web APIs
Browser then has the necessary token to make the call to Microsoft Graph
SharePoint Online
Azure Active Directory
Browse to …sites/Site1/Pages/Default.aspx
Data, Script Tags, SPO bearer Token
(S2S) GetToken [/oauth2/token]
App ID: ff1-ce
audience:
Browse to …/_api/SP.OAuth.Token/Acquire*
Delegation Token with default scopes
ReturnURL: *.SharePoint.com
Delegated Token passed back to the browser
GET

22. SPFx: Available End-Points & Permission Scopes
Power BI
EndPoint:
Scopes: Report.Read.All
Microsoft Graphs
EndPoint:
Scopes: Group.ReadWrite.All, Reports.Read.All, Files.Read, People.Read, Sites.Search.All, Sites.Read.All, Users.Read.All
Microsoft Flow
EndPoint:
Scopes: Flows.Manage.All, Flows.Read.All, Activity.Read.All 
Yammer
EndPoint:
Scopes: user_impersonation 
Office 365
Service Comm.
EndPoint:
Scopes: ServiceHealth.Read
PowerApps
EndPoint:
Scopes: play_powerapps

23. Demo SharePoint Framework - Client Side Extensions Part 2
Microsoft Build 2017
5/22/2018 5:02 AM
Demo
SharePoint Framework - Client Side Extensions Part 2
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

24. Web APIs and Permission Scopes configuration
Microsoft Build 2017
5/22/2018 5:02 AM
Web APIs and Permission Scopes configuration
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

25. A Common Business Requirement Architecture
Azure AD Application
Custom REST API
SharePoint Framework 
Web Parts
LOB System
Extensions
Custom API
DBMS

26. Web APIs and Permission Scopes Configuration
5/22/2018 5:02 AM
Web APIs and Permission Scopes Configuration
Enable SPFx components to access specific Web APIs
as well as additional permission scopes from Global available End Points
Uses AAD implicit flow and ADAL.JS library
Part of SPFx client libraries
Web APIs and Permission Scopes managed by Microsoft still available
Tenants can control additional access through per tenant AAD Service Principal
Managed by SharePoint Online infrastructure
Coming soon!
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

27. Web APIs and Permission Scopes Configuration
5/22/2018 5:02 AM
Web APIs and Permission Scopes Configuration {
"WebApiPermissionRequest": {
"ResourceId": “GUID goes here",
"Scope": “GUID goes here", }
Integrated in Developers Tools
Developers specify the Web API they need access to as well as
permission scopes as part of the package-solution.json file
Approved by Administrators
Tenant administrators are notified that solution requires access
to additional Web APIs and can manage such requests
from SharePoint directly
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

28. Data, Script Tags, SPO bearer Token
Consuming Web APIs
Now the browser (JavaScript) makes a call directly to AAD (ADAL.js) to obtain the authorization (token) to access a specific resource
SharePoint Online
Azure Active Directory
Browse to …sites/Site1/Pages/Default.aspx
Data, Script Tags, SPO bearer Token
ADAL.
App ID: ff1-ce
audience:

29. Data, Script Tags, SPO bearer Token
Consuming Web APIs
AAD checks if in the Service Principal the Web API has been registered and, if yes, returns back the token with the configured (per tenant) scopes
SharePoint Online
Azure Active Directory
Browse to …sites/Site1/Pages/Default.aspx
Data, Script Tags, SPO bearer Token
ADAL.
App ID: ff1-ce
audience:
Audience Registered No
Yes
No Token Returned
Delegation Token with registeres (per Tenant) scopes
ReturnURL: tenant.SharePoint.com

30. Consuming Web APIs
Browser then has the necessary token to make the call to Microsoft Graph
SharePoint Online
Azure Active Directory
Browse to …sites/Site1/Pages/Default.aspx
Data, Script Tags, SPO bearer Token
ADAL.
App ID: ff1-ce
audience:
Audience Registered No
Yes
No Token Returned
Delegation Token with registeres (per Tenant) scopes
ReturnURL: tenant.SharePoint.com
GET
{ } API

31. Demo Develop, deploy and use Extensions with 3rd party Web API
Microsoft Build 2017
5/22/2018 5:02 AM
Demo
Develop, deploy and use Extensions with 3rd party Web API
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

32. Roadmap – Per Tenant Web APIs Configuration
Today [Preview]
Late 2017
Token Returned by SharePoint
SPFx components have access to a fixed set of Web APIs and permission scopes
ADAL.js integration (implicit flow)
SPFx components can request additional access to web APIs or permission scopes
Per Tenant Permission management UX in SharePoint

33. Key topic breakouts below and the full listing of 70+ sessions at
Learn more
Key topic breakouts below and the full listing of 70+ sessions at
Code
Title
Day
Time
Pillar
BRK2250
SharePoint Development in the Enterprise (What's New, What's Coming)
Tuesday
4:00PM–5:15PM
Extend and develop
BRK2422
Discover SharePoint Server 2016 Feature Pack 2 and Beyond
Wednesday
9:00AM–10:15AM
BRK3039
Integrate OneDrive and SharePoint files, collaboration and sharing using Microsoft Graph
BRK3066
Advancing the SharePoint Developer Community (PnP)
Thursday
BRK3267
Let's build with SharePoint (Web Parts, Extensions and much more)
12:30PM–1:45PM
BRK3252
Geek out with the product team on SharePoint lists and libraries
10:45AM–12:00PM
BRK4031
Building the modern SharePoint experience: Best practices from Microsoft for developing with SPFx
Friday

34. Please evaluate this session
Tech Ready 15
5/22/2018
Please evaluate this session
From your
Please expand notes window at bottom of slide and read. Then Delete this text box.
PC or tablet: visit MyIgnite
Phone: download and use the Microsoft Ignite mobile app
Your input is important!
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.