SharePoint Extensibility Build modern SP solutions Full-trust JavaScript based framework running in the main app Use modern auth to integrate with Graph SP add-ins Provider-hosted based via iframes Low-trust, end user acquisition model Distribute via Office Store Teams Platform Build apps to custom tailor your teams Modern embedding via tabs Enhance integrations via bots, messaging extensions, Adaptive cards, and Graph Add communication services, e.g. programmable voice and video Outlook Platform Build Add-ins Build solutions that extend Office applications Bring external data into Office, automate Office documents, expose third-party functionality in Office clients, and more. For example, use Microsoft Graph API to connect to data that drives productivity. Create new rich, interactive objects that can be embedded in Office documents

1. Surfacing SPFx Solutions in
SharePoint, MS Teams, and Outlook Add-in

2. Jenkins NS
Office Development MVP | MCT | Solution Architect | International Speaker
16+ Years of experience
Microsoft Teams, Power Platform and SPFx Specialist
International Speaker | Blogger | Author| Trainer
SPS Bangalore Organizer
aOS Ambassador
@jenkinsns
https://www.facebook.com/msteamsinfo
in/jenkinsns
jenkinsns@gmail.com
http://www.jenkinsblogs.com
jenkinsns
https://www.facebook.com/spfxinfo/
https://www.youtube.com/user/jenkinsns

4. SharePoint Framework

5. SharePoint Extensibility
Build modern SP solutions
 Full-trust JavaScript based framework
running in the main app
 Use modern auth to integrate with Graph
SP add-ins
 Provider-hosted based via iframes
 Low-trust, end user acquisition model
 Distribute via Office Store
Teams Platform
Build apps to custom tailor your
teams
 Modern embedding via tabs
 Enhance integrations via bots,
messaging extensions, Adaptive
cards, and Graph
 Add communication services, e.g.
programmable voice and video
SharePoint and Teams
Outlook Platform
Build Add-ins
 Build solutions that extend Office
applications
 Bring external data into Office,
automate Office documents, expose
third-party functionality in Office
clients, and more. For example, use
Microsoft Graph API to connect to
data that drives productivity.
 Create new rich, interactive objects
that can be embedded in Office
documents

6. Our Expectations
Information the team cares about should be
available regardless of the tool / workload
Make it possible to bridge team collaboration
and external communication
End user
Reduce the number of places and ways to
manage and deploy solutions to end usersIT admin
Reach multiple workloads with a single solution
Reduce number of developer concepts and
experiences
Developer
 Enable users to collaborate around the
same content in SharePoint, Teams and
outlook
 Centralized Admin experience and tools,
including LOB app distribution
 Common developer framework for
building solutions targeting both
SharePoint and Teams experiences

7. Single platform for hosted experiences
Build your solution to run across Teams, SharePoint, outlook and (eventually) all of Office
Rich canvases
Provider-hosted appsO365-hosted apps
(“SPFx solutions”)
Microsoft Graph
Common platform and runtime

8. Benefits of SPFx Office Add-in
No change in development model
Single code base across MS Teams + SharePoint + Outlook
Hosted in SharePoint / SPFx Hosting model
Easy to access Graph API

9. Surfacing SPFx in Teams

10. Different Context in SPFx
 this.props.context.pageContext
 this.props.context.sdks.microsoftTeams.context
 this.props.context.sdks.office.context

14. Demo

15. ?

16. Thank You