The document discusses extending Microsoft Teams with SharePoint Framework (SPFx) web parts. It provides an overview of the session which includes demos on how to create a new SPFx web part to be used in Teams, how to import an existing web part to Teams, and how to modernize a web part to work in Teams. The goal is for attendees to understand how to develop SPFx web parts that can be used in both SharePoint and Teams and how to modify existing web parts to surface in Teams.
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Extending Microsoft Teams with SPFx webparts
1. Extending MicrosoftTeams with SPFx webparts
Level: 100-200 ||Teams track
Who wouldn't want to just develop once and then run their code everywhere? Now with SPFx (SharePoint
Framework) 1.8 being out, we're getting one step closer to that, as we're given an elegant way to bridge the gap
between your portals built on SharePoint, and MicrosoftTeams where most of the collaboration happens.Teams is
just getting more and more powerful - and you can make it even more powerful by extending it.
This session contains an overview ofTeams extensibility scenarios, what SPFx is, and a closer look on how they
work together.We're taking a closer look (with demos!) at two different scenarios: how to create a new SPFx
webpart to be used withTeams, and how to modernize a webpart you already have running in your environment.
After this session, you're familiar with the basics of developing SPFx webparts to be used both in SharePoint and
Teams, as well as how to modify your existing webparts to surface them inTeams.
All of the code included in the demo will be available on GitHub after the session.
@koskila | https://www.koskila.net
3. Platinum Sponsors
Gold Sponsors
Silver Sponsors
Thank You for being a part of
Office 365 & SharePoint
Saturday Nashville!
Office 365 & SharePoint Users Group
4. Who’s speaking?
• Antti K. Koskela, Escalation Engineer for
Valo Solutions
• From Finland, 2017 USA, 2018 Montréal
• A dev since 2004 (an accountant before
that, started with PHP, then Java,
eventually C#)
• Bending and twisting SharePoint into
different shapes since MOSS
• Blogging at https://www.koskila.net and
https://www.valointranet.com !
@koskila | https://www.koskila.net
6. Session
The session will include a quick overview and a few demos of
the capabilities of:
Overview ofTeams & its extensibility scenarios
What is SPFx ?
How do they work together?
3 demos:
How to create a new SPFx webpart to be used withTeams
How to import a previously existing webpart toTeams
How to modernize a webpart you already have running in your
environment.
@koskila | https://www.koskila.net
7. Session: Structure
A quick look intoTeams (5 mins)
A quick look into SFPx (5 mins)
An overview ofTeams extensibility (5 mins)
SPFx +Teams (5 mins)
Demos (30 mins)
Discussion (5 mins)
@koskila | https://www.koskila.net
8. Session: Goals
The attendees (that’s you!) are familiar with:
Teams extensibility and SPFx
The basics of developing SPFx webparts to be used both in
SharePoint andTeams
How to modify your existing webparts to surface them in
Teams.
@koskila | https://www.koskila.net
10. Are/were you …
A developer?
An IT Pro?
A power user?
UsingTeams?
Familiar with SPFx?
Familiar withTeams extensions?
Here last year?
@koskila | https://www.koskila.net
11. Teams – why should I care?
@koskila | https://www.koskila.net
12. “To empower every person and every organization on the
planet to achieve more.”
Microsoft’s mission statement.
https://www.microsoft.com/en-us/about
Teams (both free and enterprise version) possess a huge role in this.
@koskila | https://www.koskila.net
15. Teams adoption is huge and growing
91 of Fortune100 useTeam
@koskila | https://www.koskila.net
https://www.microsoft.com/en-us/microsoft-365/blog/2019/03/19/microsoft-teams-experiences-intelligent-workplace/
https://office365itpros.com/2019/01/31/teams-growth-accelerating/
16. Adoption in IT companies
@koskila | https://www.koskila.net
Spiceworks’ business chat app report
November 2018
https://www.spiceworks.com/press/releases/spiceworks-study-reveals-adoption-of-microsoft-teams-accelerating-in-the-workplace/
20. SPFx vs “Traditional” SharePoint
SharePoint Framework
Client-side execution model
Rendered & executed in page context
Only way to customize modern pages
Open source cross-platform tooling
Responsive, accessible & mobile friendly
Scoped to tenant or site
Limited to creating client-side web parts
& UI extensions
Farm solutions
• Full server-side API
• Only supported in on-premises
environments
• Built withVisual Studio on
Windows
• Scoped to farm
• Build web parts, timer jobs,
event receivers, feature
receivers, etc.
24. SPFx vs “classic” client-side options
• Script EditorWebParts
• Obvious choice of developers for customizing DOM on classic SharePoint sites.
• Script can be edited by any user with permissions
• Cannot be added to “NoScript” sites
• App Parts
• Developed using Add-in model (iframe)
• Cannot access DOM of SharePoint page
• Development and deployment is complicated, performance is questionable
• SPFxWebParts
• Client side web parts, leverages modern JavaScript frameworks
• Can be used with classic or modern SharePoint pages
• Development can be complicated, but at least the community is good and
possible side effects are limited
26. Teams Extensibility
Tabs (Team and Personal)
Bots
Connectors
Messaging extensions
Activity feed integrations
Outgoing web hooks
27. Teams Extensibility
Using SPFx is not necessarily – it’s just one scenario!
Citizen Developer scenarios:
ExtendTeams with Flow (https://flow.microsoft.com/en-
us/blog/introducing-the-flow-tab-in-teams-and-new-teams-triggers/
)
QnA Maker & Bot Framework enable no-code bots forTeams (and
other channels): https://thomy.tech/how-to-create-your-own-qa-
bot-for-microsoft-teams-with-no-code/
@koskila | https://www.koskila.net
29. @koskila | https://www.koskila.net
SharePoint as the hosting platform for your MicrosoftTeams solutions
SharePoint
Online
js
JavaScript Library
js
JavaScript Library
Office 365 public CDN
js
SPFxTeams solutions are deployed to
Office 365 tenants using tenant app
catalog-Typical options for the sppkg
file packaging and hosting available.
SPFxTeams
Application
SPFxTeams application exposed in the
MicrosoftTeams as a tab (IFrame).Assets
are hosted in SharePoint and published to
Teams using standardTeams model.
All typical configuration available as for
any SPFx solution – like asset
packaging, CDN configuration, asset
provisioning etc.
1
2
3
Objective:Simplifydeploymentand
hostingfordevelopers.Remove
requirementsforAzureADspecificappsor
configurationsthroughAzureAdminUI
31. Business value
• The demos show how to
develop or reuse your SPFx
webparts inTeams
• Single effort -> multiple
channels
@koskila | https://www.koskila.net
32. DEMO 1
How to create a new extension
using SPFx?
@koskila | https://www.koskila.net
39. What’s next?
• So, first step ofTeamsifying an SPFx webpart is easy
• You might run into issues with authentication, pop-ups, style inconsistencies or your webpart
trying to navigate elsewhere
• Most of the stuff probably works in browser, desktop could cause issues
• Improvement:
• RecognizeTeams context and make styles compatible
40. DEMO 3
Update the webpart to
actually function withTeams.
@koskila | https://www.koskila.net
41. DEMO 3
1. Reupload a dev version of the package
2. Verify it’s now loaded from localhost
3. Update to SFPx 1.8
4. Grab the context if it exists
5. Adjust the styles
6. Reload in browser and enjoy
45. Conclusions
• Teams:
• Microsoft’s Hub for collaboration
• SPFx:
• Client-side framework for building SharePoint extensions
• Teams + SPFx:
• Develop with SPFx = works inTeams and SharePoint
• Demo 1:
• Creating a new SPFx webpart that’s compatible from the get-go
• Demo 2:
• Surfacing your SPFx webpart inTeams
• Demo 3:
• Modifying your existing SPFx webparts to be compatible withTeams
@koskila | https://www.koskila.net
47. Resources & Further reading
• Code samples:
• https://github.com/koskila/sp-dev-fx-
webparts/commits/moderncalendarteamsdemo_v2/samples/js-modern-calendar
• Microsoft’s guides etc:
• https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-
web-part-as-ms-teams-tab
• My blog post containing slides, code, etc:
• Will be published at https://www.koskila.net/?p=4278
@koskila | https://www.koskila.net
“With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready from day one.”
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview
https://www.linkedin.com/pulse/what-sharepoint-framework-spfx-mark-kashman/