ESPC19 - Build Your First Microsoft Teams App Using SPFx

2. Build Your First Microsoft Teams
App... Using SPFx!
SÉBASTIEN LEVERT
Product Lead, Valo Intranet, Canada

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

4. Agenda
Tips and Tricks
SharePoint
Framework and
Microsoft
Teams
Microsoft
Teams as a
Development
Platform
Demos
https://slevert.me/ESPC19-SPFx-Teams

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

6. Microsoft Teams as a
Development Platform

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

8. 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
Tabs

9. 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.)
Bots

10. 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
Messaging Extensions

11. I bet there’s a full session on that…

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

13. SharePoint Framework and
Microsoft Teams

14. SharePoint Framework Components

15. SharePoint Framework

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

17. 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
Add the required icons

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

19. Syncing it to Microsoft Teams

20. Magic!

21. 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&webPartI
nstanceId={WebPartInstanceId}
What’s the trick?

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

23. Demos

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

25. Tips and Tricks

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

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

28. 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
Making it event prettier

29. 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
Test with the real thing

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

31. Resources

32. 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
Resources

33. Other cool Teams-related development sessions
When Who What
Tuesday @ 14:00 Bill Ayers Turn Your Business Productivity Up To 11 with Actionable Messages and Adaptive Cards
Tuesday @ 15:15 Laura Kokkarinen Everything You Need to Know About SharePoint Site Designs as a Developer
Wednesday @ 10:15 Cameron Dwyer Building Office Add-ins Overview: Integrate. Dominate.
Wednesday @ 10:15 Sébastien Levert Supercharge Your Teams Experience with Advanced Development Techniques
Wednesday @ 10:15 Mike Ammerlaan Developing Microsoft Teams Apps: What’s New and What’s Coming
Wednesday @ 10:15 Vesa Juvonen
Latest on SharePoint Framework – Building Microsoft 365 Solutions Using Unified
Development Pattern
Wednesday @ 14:00 Mike Ammerlaan The Perfectly Tailored Productivity Suite Starts with the Microsoft 365 Platform
Wednesday @ 16:45 Jeremy Thake Enhance Your Productivity with Microsoft Graph Developer Tooling
Thursday @ 10:15 Laura Kokkarinen SharePoint and Teams Provisioning: How To Choose the Right Tools for Automation?
Thursday @ 11:45 Wictor Wilén
Creating Engaging Meeting Bots for Microsoft Teams Through Real-Time Audio and
Video
Thursday @ 15:15 Thomas Göelles & Stephan Bisser Intelligent Chat Bots in Microsoft Teams
Thursday @ 15:15 Paolo Pialorsi Advanced Development with Microsoft Graph