Bring your SharePoint apps to MS Teams.pptx

1. 04 March, 2022
philly.NET Code Camp 2022
Bring your SharePoint apps to MS Teams
Nanddeep Nachan
@NanddeepNachan
Smita Nachan
@SmitaNachan

2. AGENDA
 MS Teams and SharePoint Story
 Surface SharePoint Home Site as Viva Connections App in MS Teams
 From SPFx web parts to MS Teams apps
 Deploy SPFx web part as messaging extension
 Build Microsoft Teams meeting app with SPFx
 Viva Connections Extensibility with SPFx

3. Office 365 Consultant
Speaker | Author | Blogger
Nanddeep Nachan
 Pune, India
 Twitter Handle: @NanddeepNachan
 LinkedIn: /in/NanddeepNachan
 Microsoft MVP, MCT
 SharePoint, Microsoft 365, MS Azure

4. Lead Software Engineer @TietoEVRY
Speaker | Author | Blogger
Smita Nachan
 Pune, India
 Twitter Handle: @SmitaNachan
 LinkedIn: /in/SmitaNachan
 Microsoft MVP, MCT
 SharePoint, Microsoft 365

5. MS Teams and SharePoint
Story
Better Together!

6. SharePoint 💜 MS Teams
Demo Team
General
Public Channel
Private Channel
/sites/Demo Team/
/Shared Documents
• /General
• /Public Channel
/sites/DemoTeam-PrivateChannel/
/Shared Documents
• /Private Channel
SharePoint
apps
MS Teams
apps

7. Surface SharePoint Home Site as Viva
Connections App in MS Teams
A gateway to employee experiences

8. Hybrid working and challenges
Remote and hybrid work
• Employees
• Leaders
• IT
Employee experience
Need for EXP (employee experience platforms)

9. Microsoft Viva
Viva
Connections
The gateway
to your
employee
experience
Viva
Insights
Balance
productivity
and wellbeing
Viva
Learning
Empower
people to gain
targeted
skills
Viva Topics
Discover
knowledge
and expertise

10. Set up Viva Connections
Image reference: https://docs.microsoft.com/en-us/sharepoint/guide-to-setting-up-viva-connections

11. SharePoint Framework (SPFx)
Build apps for SharePoint

12.  MSDN definition
 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 tooling / toolchain
 NodeJS, npm, Yeoman, gulp, TypeScript, and more…
 Easy integration with SharePoint data
 REST API
 Available in cloud and OnPrem
 Generally available in SharePoint Online
 Supports On-Premises from SP2016 onwards
SharePoint Framework in a nutshell

13. SPFx SharePoint Story
SharePoint Framework (SPFx)

14. SPFx for the Enterprise Solutions
MS Teams
- Build Microsoft Teams tab
- Build Microsoft Teams personal app
- SPFx web part as MS Teams messaging extension
- Meeting experiences
- Viva Connections
MS Graph
- Make Graph API calls
- Interact across M365
Power Automate
- Call Power Automate from SPFx
Outlook
- Add-ins

15. Microsoft Teams extensibility with SPFx
Extend SPFx apps to MS Teams

16. 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

17. Planet Explorer
 A Bot
 MS Azure web app
 SPFx web part
 MS Teams

18. A Bot
 Azure Bot
 Develop enterprise-grade,
conversational AI
experiences, while
maintaining control of your
data..
 MS Azure Web App / ngrok
 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.
Bot Channel
Registration

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

20.  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
Deploy SPFx web part as messaging extension

21. Demo
Deploy SPFx web part as messaging extension
Planet Explorer

22. Build Microsoft Teams meeting app with
SPFx
SPFx v1.12 support for Microsoft Teams meeting apps development

23. Microsoft Teams meeting apps
 Meeting lifecycle
 Pre-meeting app
experience
 In-meeting app
experience
 Post-meeting app
experience

24. Demo
Teams meeting app with SPFx
Questionnaire Teams Meeting App

25. Build a rich experiences for Viva Connections
with SharePoint Framework
SPFx v1.13 support for Adaptive Card Extensions (ACEs)

26. SharePoint Adaptive Card Extension
Image reference: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension
• Basic Card Template • Image Card
Template
• Primary Text Template

27. Scaffold Adaptive Card Extensions (ACE) solution

28. Demo
Viva Connections Extensibility with SPFx
Build ACEs

29.  SPFx web part as MS Teams messaging extension
 https://nanddeepnachanblogs.com/posts/2020-08-07-spfx-web-part-as-ms-teams-messaging-
extension/
 Build Microsoft Teams meeting app with SPFx
 https://nanddeepnachanblogs.com/posts/2021-03-22-build-ms-teams-meeting-app-with-spfx/
 Configure Viva Connections for MS Teams Desktop
 https://nanddeepnachanblogs.com/posts/2021-10-28-configure-viva-connections/
 Build Adaptive Card Extension with SPFx
 https://nanddeepnachanblogs.com/posts/2021-09-21-build-ace-spfx/
Resources

30.  Questionnaire Teams Meeting App (Meeting app)
 https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-teams-meeting-app-questionnaire
 Planet Explorer (MS Teams Messaging Extension)
 https://github.com/nanddeepn/code-samples/tree/master/SPFx/WebParts/spfx-ms-teams-messaging-extension
 My M365 Groups (Microsoft Viva Connections ACE)
 https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-My-M365-Groups
Code Samples

31. Thank You!
@NanddeepNachan
/in/NanddeepNachan
Nanddeep Nachan
@SmitaNachan
/in/SmitaNachan
Smita Nachan