The document outlines tips and tricks for building Microsoft Teams applications using the SharePoint Framework (SPFx), highlighting various components such as bots, connectors, and tabs. It emphasizes the integration of SharePoint web parts into Teams, focusing on deployment, customization, and the use of adaptive cards. Additionally, resources and best practices for development and testing within the Teams environment are provided.

1. SharePoint
Office 365
Microsoft Teams
Build your first MicrosoftTeams App using SPFx

2. Hi! I’m Seb!
@sebastienlevert | http://www.sebastienlevert.com | Product Lead at

3. Agenda
Tips and Tricks
SharePoint
Framework and
Microsoft
Teams
Microsoft
Teams as a
Development
Platform
Demos

4. Agenda
Tips and Tricks
SharePoint
Framework and
Microsoft
Teams
Microsoft
Teams as a
Development
Platform
Demos

5. Microsoft Teams as a
Development Platform

6. Extensible Platform
Bots
Help users get tasks done in calls,
conversations and online meetings
Connectors
Post rich updates to channels
Apps & Deployment
All content across all teams and
channels in one place
Tabs
Surface rich content within
Teams
Activity feed
Engage users via feed
notifications
Messaging extensions
Allow users to query and share
rich cards in conversations
Calling + Meetings
Enhance Calls and online Meeting
with Calling and Media bots
Microsoft Graph
Gateway to your data in
Microsoft cloud
Conversations
Inform &
notify
Apps
Dashboards
& tools

7. Tabs
+ Teams-aware webpages embedded in Microsoft
Teams.
+ Can be added as part of a channel inside a team,
a group chat or as a personal app.
+ Built as any other webpages and leverages the
Microsoft Teams Javascript SDKs

8. Bots
+ Enable the Conversation as a service scenarios
+ Reacting to conversations, acting as an assistant,
etc.
+ Using the Bot Framework and all bots magical
features (LUIS, Azure, etc.)

9. Messaging Extensions
+ Interactions with your services through buttons
and forms
+ Fully integrated and native on all platforms
+ Can search, or initiate actions, in any system
+ Based on the Adaptive Card standard

10. Agenda
Tips and Tricks
SharePoint
Framework and
Microsoft
Teams
Microsoft
Teams as a
Development
Platform
Demos

11. SharePoint Framework
and Microsoft Teams

12. SharePoint Framework Components

13. SharePoint Framework
+ Since SPFx 1.8
+ Availability to create Teams Tabs using the same
tooling
+ SPFx 1.10 brought the availability of personal
tabs and native mobile support!

14. Make your Web Part available as a
Teams tab
{
// ...
"supportedHosts": ["SharePointWebPart", "TeamsTab"],
// ...
}
HelloWorldWebPart.json

15. Add the required icons
+ Create a teams folder
+ Add an icon and an outline image for your app using
your web part id
+ *Only required if you have an existing pre SPFx 1.8 web part

16. Bundle and package!
gulp bundle
gulp package-solution

17. Syncing it to Microsoft Teams

18. Magic

19. What’s the trick?
+ SharePoint Framewok Teams tabs use a jumpstart page that handles
authentication
+ /_layouts/teamslogon.aspx?spfx=true&dest={Url}
+ The web part is hosted on a page that holds “only” a single web part canvas
+ {Url}/_layouts/15/teamshostedapp.aspx?list={ListId}&id=1&web
PartInstanceId={WebPartInstanceId}

20. Agenda
Tips and Tricks
SharePoint
Framework and
Microsoft
Teams
Microsoft
Teams as a
Development
Platform
Demos

21. Demos

22. Agenda
Tips and Tricks
SharePoint
Framework and
Microsoft
Teams
Microsoft
Teams as a
Development
Platform
Demos

23. Tips and Tricks

24. Understanding the Teams Context
if (this.context.microsoftTeams) {
this.context.microsoftTeams.getContext(context => {
this._teamsContext = context;
resolve(undefined);
});
} else {
resolve(undefined);
}
HelloWorldWebPart.ts

25. Supporting SP and Teams
themes
if(this._isRunningInTeams()) {
import("./HelloWorld.Teams.module.scss");
if(this.props.teamsContext.theme == "dark") {
import("./HelloWorld.Teams.Dark.module.scss");
}
}
HelloWorld.tsx

26. Making it event prettier
+ Use Office UI Fabric for anything that would be
consumed through SharePoint and Teams
+ Use Fluent UI (Codename Stardust, codename
Semantic UI) if your goal is to deliver a Teams-
only SPFx web part

27. Test with the real thing
+ Don’t just test in the Workbench, test in Teams
+ The web experience is nice, but sometimes
misleading
+ Test in your production environment (SSO,
Conditional Access, etc.)
+ Use the Developer preview option

28. It can be just about Teams…
{
// ...
"hideFromToolbox": true,
// ...
}
HelloWorldWebPart.json

29. Resources

30. Resources
+ https://github.com/sebastienlevert/sp-dev-fx-webparts/tree/dev/samples/react-graph-calendar
+ https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-
teams-tab
+ https://github.com/SharePoint/sp-dev-training-spfx-teams-dev
+ https://developer.microsoft.com/en-us/fabric
+ https://microsoft.github.io/fluent-ui-react/
+ https://slevert.me/ESPC19-SPFx-Teams

31. Thank you!
@sebastienlevert | http://www.sebastienlevert.com | Product Lead at