This document summarizes a presentation on supercharging teams with advanced development techniques in Microsoft Teams. It outlines the agenda which includes tips and tricks, understanding Teams solutions, and using Teams as a development platform. It then dives into details on the extensible platform features in Teams like bots, connectors, apps and deployment, tabs, and more. It also covers understanding a Teams solution like citizen/maker vs pro developer options and the app manifest. The document concludes with demo sections.

2. Supercharge Your Teams
Experience with Advanced
Development Techniques
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
Understanding
a Teams
solution
Microsoft
Teams as a
Development
Platform
Demos
https://slevert.me/ESPC19-Teams

5. Agenda
Tips and Tricks
Understanding
a Teams
solution
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. 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

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

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

12. Agenda
Tips and Tricks
Understanding
a Teams
solution
Microsoft
Teams as a
Development
Platform
Demos

13. Understanding a Teams
solution

14. Citizen Developer / Maker Options

15. Pro Developer Options

16. Built on the Bot Framework infrastructure

17. The Manifest
PACKAGE
MANIFEST.JSON
COLOR ICON
OUTLINE ICON
App manifest file in
JSON format. Must be
placed at the top level
of the package.
Color icon used in app
galleries, bots, flyouts and
so on. Must be 96x96
pixels.
Outline icon used in the
app bar, pinned composed
extensions and chiclets.
Must be 20x20 pixels,
white with a transparent
background.
ZIP file

18. Localization

19. Authentication, SSO and Conditional access

20. Agenda
Tips and Tricks
Understanding
a Teams
solution
Microsoft
Teams as a
Development
Platform
Demos

21. Demos

22. Agenda
Tips and Tricks
Understanding
a Teams
solution
Microsoft
Teams as a
Development
Platform
Demos

23. Tips and Tricks

24. Embedding SharePoint with SSO!
"webApplicationInfo": {
"id": "00000003-0000-0ff1-ce00-000000000000",
"resource": "https://{tenant}.sharepoint.com/"
}

25. Your service must respond within 5
seconds or it will timeout!
Think about App Service vs. App
Function
Make it fast!

26. Debugging it locally
./ngrok http 3978 -host-header="localhost:3978“
# Update your Bot Framework Messaging Endpoint

27. 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 App
Making it shine!

28. Use the Adaptive Card designer

29. You’re a SharePoint Framework
Developer and want to only build tabs?
Utilize SPFx with Microsoft Teams!
You’re a NodeJS / React developer? Use
yo teams!
You love Visual Studio? Use the Bot
Builder!
Not sure what to use?

30. Resources

31. https://github.com/OfficeDev/TrainingContent/tree/master/Teams/
https://github.com/OfficeDev/generator-teams
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-
ms-teams-tab
https://developer.microsoft.com/en-us/fabric
https://microsoft.github.io/fluent-ui-react/
https://adaptivecards.io/designer/
Resources

32. Other cool Teams-related development sessions
When Who What
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 Elaine Van Bergen Building Better Bots
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