Virtual Hub - Host SharePoint Framework web part as MS Teams messaging extension

1. The Virtual Hub
Content, Conversation & Connection
Deep dive technical training for IT Pro’s, Developers, and Champions
https://aka.ms/VirtualHub

2. Host SharePoint Framework web part as
MS Teams messaging extension

3. SharePoint Framework in a nutshell
MSDN Definition
SPFx is a page and web part model that provides full support for client-side SharePoint development, easy integration
with SharePoint data, and support for open source tooling
• Open source toolchain
• Node JS, NPM, Yeoman, Gulp, TypeScript
• Choose any JavaScript Framework / Library
• Works on both SharePoint Online and On-premises
• SharePoint Online (GA)
• SharePoint 2019 (v1.4.1)
• SharePoint 2016, Feature Pack 2 (v1.1.0)

5. Microsoft Teams + SPFx
Build Teams Tab with SPFx
SPFx v1.8
Build SPFx based tab solutions
Full Teams context aware
Full support for rich clients
Supported hosts: TeamsTab
SPFx web part as MS Teams messaging extension
SPFx v1.11
Host SPFx web parts as MS Teams messaging
extension
No extra manifest.json based configuration
Build Personal app with SPFx
SPFx v1.10
App with a personal scope
Develop a version of your app that is built for an
individual user.
Supported hosts: TeamsPersonalApp

6. Planet Explorer
 A Bot
 MS Azure web app
 SPFx web part
 MS Teams

7. A Bot
Bot Channels Registration
Your own Bot hosted where you want, registered
with the Azure Bot Service. Build, connect, and
manage Bots to interact with your users wherever
they are - from your app or website to Cortana,
Skype, Messenger and many other services.
MS Azure Web App
App Service Web Apps lets you quickly build,
deploy, and scale enterprise-grade web, mobile,
and API apps running on any platform.
yo teams
Create your Microsoft Teams app using the
Microsoft Teams Yeoman generator.

8. SharePoint Framework Solution
 SPFx v1.11
 Extend the teams manifest in your SPFx solution with a composeExtension
 Responding to user interactions
 Communication with Bot

9. Demo
Implement SPFx web part

10. Deploy SPFx web part as messaging extension
 Prepare SPFx package
 gulp bundle --ship
 gulp package-solution --ship
 Deploy the sppkg to the SharePoint tenant app catalog.
 Zip teams folder and upload to Teams

11. Demo
Deploy SPFx web part as messaging extension

12. Thank You!