SlideShare a Scribd company logo
1 of 12
Download to read offline
The Virtual Hub
Content, Conversation & Connection
Deep dive technical training for IT Pro’s, Developers, and Champions
https://aka.ms/VirtualHub
Host SharePoint Framework web part as
MS Teams messaging extension
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)
Virtual Hub - Host SharePoint Framework web part as MS Teams messaging extension
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
Planet Explorer
 A Bot
 MS Azure web app
 SPFx web part
 MS Teams
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.
SharePoint Framework Solution
 SPFx v1.11
 Extend the teams manifest in your SPFx solution with a composeExtension
 Responding to user interactions
 Communication with Bot
Demo
Implement SPFx web part
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
Demo
Deploy SPFx web part as messaging extension
Thank You!

More Related Content

What's hot

2 Build Apps for Any Devices With Power Apps
2 Build Apps for Any Devices With Power Apps2 Build Apps for Any Devices With Power Apps
2 Build Apps for Any Devices With Power AppsKumton Suttiraksiri
 
Blazor + Bot Framework = a Microsoft Teams Platform Dream Team
Blazor + Bot Framework = a Microsoft Teams Platform Dream TeamBlazor + Bot Framework = a Microsoft Teams Platform Dream Team
Blazor + Bot Framework = a Microsoft Teams Platform Dream TeamThomas Gölles
 
Sp administration-training-prism
Sp administration-training-prismSp administration-training-prism
Sp administration-training-prismThuan Ng
 
SPVIE - Slidedeck Get started with developing for Microsoft Teams
SPVIE - Slidedeck Get started with developing for Microsoft TeamsSPVIE - Slidedeck Get started with developing for Microsoft Teams
SPVIE - Slidedeck Get started with developing for Microsoft TeamsPaul Keijzers
 
SFDC Lightning Demo
SFDC Lightning DemoSFDC Lightning Demo
SFDC Lightning DemoSamar Saha
 
Customizing SharePoint and Microsoft Teams with SharePoint Framework web parts
Customizing SharePoint and Microsoft Teams with SharePoint Framework web partsCustomizing SharePoint and Microsoft Teams with SharePoint Framework web parts
Customizing SharePoint and Microsoft Teams with SharePoint Framework web partsOlli Jääskeläinen
 
Getting Started with SharePoint Development
Getting Started with SharePoint DevelopmentGetting Started with SharePoint Development
Getting Started with SharePoint DevelopmentChakkaradeep Chandran
 
Chatbot technology- The innovative enterprise collaboration
Chatbot technology- The innovative enterprise collaborationChatbot technology- The innovative enterprise collaboration
Chatbot technology- The innovative enterprise collaborationKushan Lahiru Perera
 
Design and Implement Azure Web Apps
Design and Implement Azure Web AppsDesign and Implement Azure Web Apps
Design and Implement Azure Web AppsAyush Rathi
 
Powerapps & Flow
Powerapps & FlowPowerapps & Flow
Powerapps & FlowXpand IT
 
O365Con18 - Best Practice with Company Video on Microsoft Stream - Michael Greth
O365Con18 - Best Practice with Company Video on Microsoft Stream - Michael GrethO365Con18 - Best Practice with Company Video on Microsoft Stream - Michael Greth
O365Con18 - Best Practice with Company Video on Microsoft Stream - Michael GrethNCCOMMS
 
An In-Depth Look at Office 365
An In-Depth Look at Office 365An In-Depth Look at Office 365
An In-Depth Look at Office 365Sharepoint360
 
WPF Unleashed: Building Application with Visual Studio 2008 SP1
WPF Unleashed: Building Application with Visual Studio 2008 SP1WPF Unleashed: Building Application with Visual Studio 2008 SP1
WPF Unleashed: Building Application with Visual Studio 2008 SP1Dave Bost
 
Exploring the PowerApps advantage
Exploring the PowerApps advantageExploring the PowerApps advantage
Exploring the PowerApps advantageMalin De Silva
 
Chris O'Brien - Ignite 2019 announcements and selected roadmaps
Chris O'Brien - Ignite 2019 announcements and selected roadmapsChris O'Brien - Ignite 2019 announcements and selected roadmaps
Chris O'Brien - Ignite 2019 announcements and selected roadmapsChris O'Brien
 
PL-900 Microsoft Power Platform Fundamentals
PL-900 Microsoft Power Platform FundamentalsPL-900 Microsoft Power Platform Fundamentals
PL-900 Microsoft Power Platform FundamentalsNanddeep Nachan
 

What's hot (20)

2 Build Apps for Any Devices With Power Apps
2 Build Apps for Any Devices With Power Apps2 Build Apps for Any Devices With Power Apps
2 Build Apps for Any Devices With Power Apps
 
Microsoft Graph Community call 2-6-18
Microsoft Graph Community call 2-6-18Microsoft Graph Community call 2-6-18
Microsoft Graph Community call 2-6-18
 
Blazor + Bot Framework = a Microsoft Teams Platform Dream Team
Blazor + Bot Framework = a Microsoft Teams Platform Dream TeamBlazor + Bot Framework = a Microsoft Teams Platform Dream Team
Blazor + Bot Framework = a Microsoft Teams Platform Dream Team
 
Sp administration-training-prism
Sp administration-training-prismSp administration-training-prism
Sp administration-training-prism
 
SPVIE - Slidedeck Get started with developing for Microsoft Teams
SPVIE - Slidedeck Get started with developing for Microsoft TeamsSPVIE - Slidedeck Get started with developing for Microsoft Teams
SPVIE - Slidedeck Get started with developing for Microsoft Teams
 
SFDC Lightning Demo
SFDC Lightning DemoSFDC Lightning Demo
SFDC Lightning Demo
 
Customizing SharePoint and Microsoft Teams with SharePoint Framework web parts
Customizing SharePoint and Microsoft Teams with SharePoint Framework web partsCustomizing SharePoint and Microsoft Teams with SharePoint Framework web parts
Customizing SharePoint and Microsoft Teams with SharePoint Framework web parts
 
Microsoft Office Delve
Microsoft Office DelveMicrosoft Office Delve
Microsoft Office Delve
 
Getting Started with SharePoint Development
Getting Started with SharePoint DevelopmentGetting Started with SharePoint Development
Getting Started with SharePoint Development
 
Chatbot technology- The innovative enterprise collaboration
Chatbot technology- The innovative enterprise collaborationChatbot technology- The innovative enterprise collaboration
Chatbot technology- The innovative enterprise collaboration
 
Design and Implement Azure Web Apps
Design and Implement Azure Web AppsDesign and Implement Azure Web Apps
Design and Implement Azure Web Apps
 
Powerapps & Flow
Powerapps & FlowPowerapps & Flow
Powerapps & Flow
 
O365Con18 - Best Practice with Company Video on Microsoft Stream - Michael Greth
O365Con18 - Best Practice with Company Video on Microsoft Stream - Michael GrethO365Con18 - Best Practice with Company Video on Microsoft Stream - Michael Greth
O365Con18 - Best Practice with Company Video on Microsoft Stream - Michael Greth
 
Microsoft Teams Graph API
Microsoft Teams Graph APIMicrosoft Teams Graph API
Microsoft Teams Graph API
 
An In-Depth Look at Office 365
An In-Depth Look at Office 365An In-Depth Look at Office 365
An In-Depth Look at Office 365
 
WPF Unleashed: Building Application with Visual Studio 2008 SP1
WPF Unleashed: Building Application with Visual Studio 2008 SP1WPF Unleashed: Building Application with Visual Studio 2008 SP1
WPF Unleashed: Building Application with Visual Studio 2008 SP1
 
Exploring the PowerApps advantage
Exploring the PowerApps advantageExploring the PowerApps advantage
Exploring the PowerApps advantage
 
Developing apps for share point 2013
Developing apps for share point 2013Developing apps for share point 2013
Developing apps for share point 2013
 
Chris O'Brien - Ignite 2019 announcements and selected roadmaps
Chris O'Brien - Ignite 2019 announcements and selected roadmapsChris O'Brien - Ignite 2019 announcements and selected roadmaps
Chris O'Brien - Ignite 2019 announcements and selected roadmaps
 
PL-900 Microsoft Power Platform Fundamentals
PL-900 Microsoft Power Platform FundamentalsPL-900 Microsoft Power Platform Fundamentals
PL-900 Microsoft Power Platform Fundamentals
 

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

Bring your SharePoint apps to MS Teams
Bring your SharePoint apps to MS TeamsBring your SharePoint apps to MS Teams
Bring your SharePoint apps to MS TeamsNanddeep Nachan
 
Surfacing SPFx Solutions in SharePoint, MS Teams, and Outlook Add-in
Surfacing SPFx Solutions in SharePoint, MS Teams, and Outlook Add-inSurfacing SPFx Solutions in SharePoint, MS Teams, and Outlook Add-in
Surfacing SPFx Solutions in SharePoint, MS Teams, and Outlook Add-inJenkins NS
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx) in 1 hour
Convert your Full Trust Solutions to the SharePoint Framework (SPFx) in 1 hourConvert your Full Trust Solutions to the SharePoint Framework (SPFx) in 1 hour
Convert your Full Trust Solutions to the SharePoint Framework (SPFx) in 1 hourBrian Culver
 
Grow your SharePoint development platform with SharePoint Framework
Grow your SharePoint development platform with SharePoint FrameworkGrow your SharePoint development platform with SharePoint Framework
Grow your SharePoint development platform with SharePoint FrameworkDipti Chhatrapati
 
ESPC19 - Supercharge Your Teams Experience with Advanced Development Techniques
ESPC19 - Supercharge Your Teams Experience with Advanced Development TechniquesESPC19 - Supercharge Your Teams Experience with Advanced Development Techniques
ESPC19 - Supercharge Your Teams Experience with Advanced Development TechniquesSébastien Levert
 
Building share point framework solutions
Building share point framework solutionsBuilding share point framework solutions
Building share point framework solutionsDipti Chhatrapati
 
Grow your SharePoint development platform with SPFx
Grow your SharePoint development platform with SPFxGrow your SharePoint development platform with SPFx
Grow your SharePoint development platform with SPFxDipti Chhatrapati
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Brian Culver
 
SharePoint Framework SPFx
SharePoint Framework SPFxSharePoint Framework SPFx
SharePoint Framework SPFxVladimir Medina
 
Bring together SPFx Solutions in SharePoint and MS Teams​
Bring together SPFx Solutions in SharePoint and MS Teams​Bring together SPFx Solutions in SharePoint and MS Teams​
Bring together SPFx Solutions in SharePoint and MS Teams​Jenkins NS
 
Build MSTeams Customizations with SPFx
Build MSTeams Customizations with SPFxBuild MSTeams Customizations with SPFx
Build MSTeams Customizations with SPFxKirti Prajapati
 
Real World SharePoint Framework and Azure Services
Real World SharePoint Framework and Azure ServicesReal World SharePoint Framework and Azure Services
Real World SharePoint Framework and Azure ServicesBrian Culver
 
CCI 2017 - Introduzione a SharePoint Framework (SPFx) - Fabio Franzini
CCI 2017 - Introduzione a SharePoint Framework (SPFx) - Fabio FranziniCCI 2017 - Introduzione a SharePoint Framework (SPFx) - Fabio Franzini
CCI 2017 - Introduzione a SharePoint Framework (SPFx) - Fabio Franziniwalk2talk srl
 
Office 365 Developer Bootcamp: Microsoft Teams
Office 365 Developer Bootcamp: Microsoft TeamsOffice 365 Developer Bootcamp: Microsoft Teams
Office 365 Developer Bootcamp: Microsoft TeamsDavid Schneider
 
Building apps using azure for microsoft teams
Building apps using azure for microsoft teamsBuilding apps using azure for microsoft teams
Building apps using azure for microsoft teamsJenkins NS
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)Brian Culver
 
Microsoft teams & bot framework - A developer's perspective
Microsoft teams & bot framework - A developer's perspectiveMicrosoft teams & bot framework - A developer's perspective
Microsoft teams & bot framework - A developer's perspectiveThomas Gölles
 
Introduction to development using the share point framework mv ps
Introduction to development using the share point framework mv psIntroduction to development using the share point framework mv ps
Introduction to development using the share point framework mv psUsama Wahab Khan Cloud, Data and AI
 
ESPC19 - Build Your First Microsoft Teams App Using SPFx
ESPC19 - Build Your First Microsoft Teams App Using SPFxESPC19 - Build Your First Microsoft Teams App Using SPFx
ESPC19 - Build Your First Microsoft Teams App Using SPFxSébastien Levert
 
Target SharePoint and Teams with SharePoint Framework
Target SharePoint and Teams with SharePoint FrameworkTarget SharePoint and Teams with SharePoint Framework
Target SharePoint and Teams with SharePoint FrameworkHaaron Gonzalez
 

Similar to Virtual Hub - Host SharePoint Framework web part as MS Teams messaging extension (20)

Bring your SharePoint apps to MS Teams
Bring your SharePoint apps to MS TeamsBring your SharePoint apps to MS Teams
Bring your SharePoint apps to MS Teams
 
Surfacing SPFx Solutions in SharePoint, MS Teams, and Outlook Add-in
Surfacing SPFx Solutions in SharePoint, MS Teams, and Outlook Add-inSurfacing SPFx Solutions in SharePoint, MS Teams, and Outlook Add-in
Surfacing SPFx Solutions in SharePoint, MS Teams, and Outlook Add-in
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx) in 1 hour
Convert your Full Trust Solutions to the SharePoint Framework (SPFx) in 1 hourConvert your Full Trust Solutions to the SharePoint Framework (SPFx) in 1 hour
Convert your Full Trust Solutions to the SharePoint Framework (SPFx) in 1 hour
 
Grow your SharePoint development platform with SharePoint Framework
Grow your SharePoint development platform with SharePoint FrameworkGrow your SharePoint development platform with SharePoint Framework
Grow your SharePoint development platform with SharePoint Framework
 
ESPC19 - Supercharge Your Teams Experience with Advanced Development Techniques
ESPC19 - Supercharge Your Teams Experience with Advanced Development TechniquesESPC19 - Supercharge Your Teams Experience with Advanced Development Techniques
ESPC19 - Supercharge Your Teams Experience with Advanced Development Techniques
 
Building share point framework solutions
Building share point framework solutionsBuilding share point framework solutions
Building share point framework solutions
 
Grow your SharePoint development platform with SPFx
Grow your SharePoint development platform with SPFxGrow your SharePoint development platform with SPFx
Grow your SharePoint development platform with SPFx
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
SharePoint Framework SPFx
SharePoint Framework SPFxSharePoint Framework SPFx
SharePoint Framework SPFx
 
Bring together SPFx Solutions in SharePoint and MS Teams​
Bring together SPFx Solutions in SharePoint and MS Teams​Bring together SPFx Solutions in SharePoint and MS Teams​
Bring together SPFx Solutions in SharePoint and MS Teams​
 
Build MSTeams Customizations with SPFx
Build MSTeams Customizations with SPFxBuild MSTeams Customizations with SPFx
Build MSTeams Customizations with SPFx
 
Real World SharePoint Framework and Azure Services
Real World SharePoint Framework and Azure ServicesReal World SharePoint Framework and Azure Services
Real World SharePoint Framework and Azure Services
 
CCI 2017 - Introduzione a SharePoint Framework (SPFx) - Fabio Franzini
CCI 2017 - Introduzione a SharePoint Framework (SPFx) - Fabio FranziniCCI 2017 - Introduzione a SharePoint Framework (SPFx) - Fabio Franzini
CCI 2017 - Introduzione a SharePoint Framework (SPFx) - Fabio Franzini
 
Office 365 Developer Bootcamp: Microsoft Teams
Office 365 Developer Bootcamp: Microsoft TeamsOffice 365 Developer Bootcamp: Microsoft Teams
Office 365 Developer Bootcamp: Microsoft Teams
 
Building apps using azure for microsoft teams
Building apps using azure for microsoft teamsBuilding apps using azure for microsoft teams
Building apps using azure for microsoft teams
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
Microsoft teams & bot framework - A developer's perspective
Microsoft teams & bot framework - A developer's perspectiveMicrosoft teams & bot framework - A developer's perspective
Microsoft teams & bot framework - A developer's perspective
 
Introduction to development using the share point framework mv ps
Introduction to development using the share point framework mv psIntroduction to development using the share point framework mv ps
Introduction to development using the share point framework mv ps
 
ESPC19 - Build Your First Microsoft Teams App Using SPFx
ESPC19 - Build Your First Microsoft Teams App Using SPFxESPC19 - Build Your First Microsoft Teams App Using SPFx
ESPC19 - Build Your First Microsoft Teams App Using SPFx
 
Target SharePoint and Teams with SharePoint Framework
Target SharePoint and Teams with SharePoint FrameworkTarget SharePoint and Teams with SharePoint Framework
Target SharePoint and Teams with SharePoint Framework
 

More from Nanddeep Nachan

Prompt to Pixel: DALL-E Magic
Prompt to Pixel: DALL-E MagicPrompt to Pixel: DALL-E Magic
Prompt to Pixel: DALL-E MagicNanddeep Nachan
 
Knowledge Quest Teams Bot.pptx
Knowledge Quest Teams Bot.pptxKnowledge Quest Teams Bot.pptx
Knowledge Quest Teams Bot.pptxNanddeep Nachan
 
Purview Days 2023 - Graph Notifications - A better way to process M365 Audit ...
Purview Days 2023 - Graph Notifications - A better way to process M365 Audit ...Purview Days 2023 - Graph Notifications - A better way to process M365 Audit ...
Purview Days 2023 - Graph Notifications - A better way to process M365 Audit ...Nanddeep Nachan
 
Building Bots with Teams Toolkit
Building Bots with Teams ToolkitBuilding Bots with Teams Toolkit
Building Bots with Teams ToolkitNanddeep Nachan
 
Power Apps for Azure Cloud Professionals
Power Apps for Azure Cloud ProfessionalsPower Apps for Azure Cloud Professionals
Power Apps for Azure Cloud ProfessionalsNanddeep Nachan
 
aMS Pune - Building apps for Teams meetings
aMS Pune - Building apps for Teams meetingsaMS Pune - Building apps for Teams meetings
aMS Pune - Building apps for Teams meetingsNanddeep Nachan
 
Universal Actions for Adaptive Cards on Microsoft Teams
Universal Actions for Adaptive Cards on Microsoft TeamsUniversal Actions for Adaptive Cards on Microsoft Teams
Universal Actions for Adaptive Cards on Microsoft TeamsNanddeep Nachan
 
Building Bots with Azure and consume anywhere.pptx
Building Bots with Azure and consume anywhere.pptxBuilding Bots with Azure and consume anywhere.pptx
Building Bots with Azure and consume anywhere.pptxNanddeep Nachan
 
Power Platform Custom Connector Deep Dive.pptx
Power Platform Custom Connector Deep Dive.pptxPower Platform Custom Connector Deep Dive.pptx
Power Platform Custom Connector Deep Dive.pptxNanddeep Nachan
 
Sessionize Custom Connector
Sessionize Custom ConnectorSessionize Custom Connector
Sessionize Custom ConnectorNanddeep Nachan
 
SharePoint PnP Viva Connections & SPFx JS SIG Call - My M365 Groups
SharePoint PnP Viva Connections & SPFx JS SIG Call - My M365 GroupsSharePoint PnP Viva Connections & SPFx JS SIG Call - My M365 Groups
SharePoint PnP Viva Connections & SPFx JS SIG Call - My M365 GroupsNanddeep Nachan
 
Information Barriers in MS Teams
Information Barriers in MS TeamsInformation Barriers in MS Teams
Information Barriers in MS TeamsNanddeep Nachan
 
PL-100 Microsoft Power Platform App Maker
PL-100 Microsoft Power Platform App MakerPL-100 Microsoft Power Platform App Maker
PL-100 Microsoft Power Platform App MakerNanddeep Nachan
 
Explore Microsoft Power Platform Center of Excellence
Explore Microsoft Power Platform Center of ExcellenceExplore Microsoft Power Platform Center of Excellence
Explore Microsoft Power Platform Center of ExcellenceNanddeep Nachan
 
SharePoint PnP Demo - Questionnaire Teams Meeting App with SPFx
SharePoint PnP Demo - Questionnaire Teams Meeting App with SPFxSharePoint PnP Demo - Questionnaire Teams Meeting App with SPFx
SharePoint PnP Demo - Questionnaire Teams Meeting App with SPFxNanddeep Nachan
 
Protect Office 365 with Azure Sentinel
Protect Office 365 with Azure SentinelProtect Office 365 with Azure Sentinel
Protect Office 365 with Azure SentinelNanddeep Nachan
 
SharePoint PnP Demo - react-manage-o365-groups
SharePoint PnP Demo - react-manage-o365-groupsSharePoint PnP Demo - react-manage-o365-groups
SharePoint PnP Demo - react-manage-o365-groupsNanddeep Nachan
 
SharePoint PnP Demo - react-display-hierarchy
SharePoint PnP Demo - react-display-hierarchySharePoint PnP Demo - react-display-hierarchy
SharePoint PnP Demo - react-display-hierarchyNanddeep Nachan
 
SharePoint PnP Demo - react-google-fit
SharePoint PnP Demo - react-google-fitSharePoint PnP Demo - react-google-fit
SharePoint PnP Demo - react-google-fitNanddeep Nachan
 
Demystifying the microsoft lists magic
Demystifying the microsoft lists magicDemystifying the microsoft lists magic
Demystifying the microsoft lists magicNanddeep Nachan
 

More from Nanddeep Nachan (20)

Prompt to Pixel: DALL-E Magic
Prompt to Pixel: DALL-E MagicPrompt to Pixel: DALL-E Magic
Prompt to Pixel: DALL-E Magic
 
Knowledge Quest Teams Bot.pptx
Knowledge Quest Teams Bot.pptxKnowledge Quest Teams Bot.pptx
Knowledge Quest Teams Bot.pptx
 
Purview Days 2023 - Graph Notifications - A better way to process M365 Audit ...
Purview Days 2023 - Graph Notifications - A better way to process M365 Audit ...Purview Days 2023 - Graph Notifications - A better way to process M365 Audit ...
Purview Days 2023 - Graph Notifications - A better way to process M365 Audit ...
 
Building Bots with Teams Toolkit
Building Bots with Teams ToolkitBuilding Bots with Teams Toolkit
Building Bots with Teams Toolkit
 
Power Apps for Azure Cloud Professionals
Power Apps for Azure Cloud ProfessionalsPower Apps for Azure Cloud Professionals
Power Apps for Azure Cloud Professionals
 
aMS Pune - Building apps for Teams meetings
aMS Pune - Building apps for Teams meetingsaMS Pune - Building apps for Teams meetings
aMS Pune - Building apps for Teams meetings
 
Universal Actions for Adaptive Cards on Microsoft Teams
Universal Actions for Adaptive Cards on Microsoft TeamsUniversal Actions for Adaptive Cards on Microsoft Teams
Universal Actions for Adaptive Cards on Microsoft Teams
 
Building Bots with Azure and consume anywhere.pptx
Building Bots with Azure and consume anywhere.pptxBuilding Bots with Azure and consume anywhere.pptx
Building Bots with Azure and consume anywhere.pptx
 
Power Platform Custom Connector Deep Dive.pptx
Power Platform Custom Connector Deep Dive.pptxPower Platform Custom Connector Deep Dive.pptx
Power Platform Custom Connector Deep Dive.pptx
 
Sessionize Custom Connector
Sessionize Custom ConnectorSessionize Custom Connector
Sessionize Custom Connector
 
SharePoint PnP Viva Connections & SPFx JS SIG Call - My M365 Groups
SharePoint PnP Viva Connections & SPFx JS SIG Call - My M365 GroupsSharePoint PnP Viva Connections & SPFx JS SIG Call - My M365 Groups
SharePoint PnP Viva Connections & SPFx JS SIG Call - My M365 Groups
 
Information Barriers in MS Teams
Information Barriers in MS TeamsInformation Barriers in MS Teams
Information Barriers in MS Teams
 
PL-100 Microsoft Power Platform App Maker
PL-100 Microsoft Power Platform App MakerPL-100 Microsoft Power Platform App Maker
PL-100 Microsoft Power Platform App Maker
 
Explore Microsoft Power Platform Center of Excellence
Explore Microsoft Power Platform Center of ExcellenceExplore Microsoft Power Platform Center of Excellence
Explore Microsoft Power Platform Center of Excellence
 
SharePoint PnP Demo - Questionnaire Teams Meeting App with SPFx
SharePoint PnP Demo - Questionnaire Teams Meeting App with SPFxSharePoint PnP Demo - Questionnaire Teams Meeting App with SPFx
SharePoint PnP Demo - Questionnaire Teams Meeting App with SPFx
 
Protect Office 365 with Azure Sentinel
Protect Office 365 with Azure SentinelProtect Office 365 with Azure Sentinel
Protect Office 365 with Azure Sentinel
 
SharePoint PnP Demo - react-manage-o365-groups
SharePoint PnP Demo - react-manage-o365-groupsSharePoint PnP Demo - react-manage-o365-groups
SharePoint PnP Demo - react-manage-o365-groups
 
SharePoint PnP Demo - react-display-hierarchy
SharePoint PnP Demo - react-display-hierarchySharePoint PnP Demo - react-display-hierarchy
SharePoint PnP Demo - react-display-hierarchy
 
SharePoint PnP Demo - react-google-fit
SharePoint PnP Demo - react-google-fitSharePoint PnP Demo - react-google-fit
SharePoint PnP Demo - react-google-fit
 
Demystifying the microsoft lists magic
Demystifying the microsoft lists magicDemystifying the microsoft lists magic
Demystifying the microsoft lists magic
 

Recently uploaded

GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 

Recently uploaded (20)

GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 

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
  • 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

Editor's Notes

  1. Use one of the slides 1-4