2. Agenda
Time Topic / Activity Speaker
9.00
12.00
Introduction to Microsoft Teams Development David
12.00
13:00
Lunch Break
13.00
16:00
Getting Started with the Microsoft Graph Stefano
16.00
17.00
Sharing & Networking
17:00 SharePint Washbar
4. Call to action
Join Office 365 developer program
https://dev.office.com/devprogram
to leverage all resources for Office 365
development learning
Build applications on Office 365 platform
Attend MVP led local community events to
continue learning on Office 365 development
Share your feedback on Bootcamp at
https://aka.ms/o365devbootcampfeedback
9. Reach your users in their chats, channels, notifications, and personal workspace
Available now
Bots
Help users get
tasks done in
conversations
Connectors
Post rich updates
to channels
Tabs
Surface rich
content within
Teams
Office
Store
Drive engagement
by submitting
your app to the
Office Store
Actionable
Messages
Add rich
interaction to your
connector cards
Activity
Feed
Engage users
via feed
notifications
Compose
Extensions
Allow users to query
and share rich cards
in conversations
Available in Developer Preview
10. Rich surface area for your app
As simple as hosting your existing
web app
Team productivity: within channels
Personal productivity: app flyout
Your services, experience, & users
11. Push rich interactive cards
into channels
Users can take quick actions like
comment, select options, set a
date
Uses incoming webhook API
Fully supported in both Teams
and Outlook
12. Notify users personally via the
activity feed
Same API as sending bot
messages
Deep link straight into tabs
13. Bots make it easy for users to interact
with your app in Team conversations or
1:1
Built using Microsoft Bot Framework
Complete tasks via basic commands,
menu or natural language
Rich Microsoft Teams features, e.g.
Input menus
Dynamic message updates
Integrate with tabs
14. Personalize Teams Compose box with
your App & Services content
Users can query and insert your app
content into conversations
Example: Bug details from VSTS
Example: Sales opportunities from CRM
You can reuse services you built for
Bots or Tabs
15. Microsoft Teams Apps
• With a single package, deliver one or more capabilities to end users, in
contexts that make sense in your experience
Single App definition – manifest.json
Single package (.ZIP) used for Sideloading or Office Store
submission
16. Register and submit your app
today to the Office Store
Your app will be ready in the
Developer Preview once approved
17. Light up your experience how and where you want it:
Teams Scope - your experience exists in the team context
• Team owners may add your experience to a team:
• Bots and Compose Extensions – available on all channels
• Teams Tabs (“Configurable”) – added and customized on a per-channel basis
Personal Scope – your experience exists in an individual user context
• Individuals add the experiences they want for personal use
• Bots and Compose Extensions – available in 1:1 chat
• Personal Tabs (“Static”) – available to end users via the App bar or alongside 1:1 bots
18. Tabs - Bring your own Service
• Light-weight Javascript APIs to tie your experience to Teams context
Connectors – Leverage the Connectors Developer Portal
• Build once, run on both Outlook and Teams
• Use new Actionable Cards layouts
Bots – Build using the Bot Framework
• Use the .NET and Node.js SDKs, or call the REST endpoints with your language of
choice
• Teams Extension SDKs facilitate easy access to Teams-specific functionality
• Flag important messages for inclusion in Activity Feed
Compose Extensions – Reuse your bot
• Use the .NET and Node.js SDKs, or call the REST endpoints with your language of
choice
• Teams Extension SDKs facilitate easy access to Teams-specific functionality
19. These are your services, hosted by you,
in your cloud
Build, test, deploy are your processes
For testing within Microsoft Teams,
create an Apps package, and sideload
into a team
20. ISVs – Distribute through the Office Store
• Create or use your existing DevCenter / Seller
Dashboard account
• Upload your package and enter your product page
metadata
• Office Store Validation ensure compliance with Office
Store Policy
• Validated apps are published into the Office Store and
will appear in Microsoft Teams Discovery view
Line-of-Business apps – Sideload your package
• Leverage the same testing methodology to deploy
within your org
• Note: Enhanced LOB support coming soon
22. Embed-ready web UX on
web/desktop, deep link to native
apps on mobile
Leverages Microsoft Teams Tab
Library javascript for context and
interactivity
Team or Personal Scope
23. Configuration Page: page used
to add or update the tab and set
content page
Content Page: the primary page
displayed in the tab
Remove Page: optional page
displayed when a tab is removed
24. Used to add/edit a tab
Must reference Microsoft Teams Tab
Library
Sets the contentUrl for the tab
Calls setSettings to save tab
configuration
Must call setValidityState to enable
the save button and notifySuccess
microsoftTeams.initialize();
microsoftTeams.settings.registerOnSaveHandler(function
(saveEvent){
microsoftTeams.settings.setSettings({
entityId: "someid",
contentUrl: "https://somedomain/tab.html",
suggestedDisplayName: "Tab Title",
websiteUrl: "https://somedomain/info.html",
removeUrl: "https://somedomain/tabremove.html"
});
saveEvent.notifySuccess();
});
function onSaveClick() {
microsoftTeams.settings.setValidityState(true);
}
25. getContext returns team/channel context:
• tid – id of tenant
• groupId – id of the O365 group
• teamId – id of the team
• channelId – id of the channel
• entityId – id of the entity
• theme – theme of the teams client
• locale – the locale of the client
• upn – UPN of the user
microsoftTeams.getContext(function (context) {
// context contains all context info
});
26. Share a Link from your Tab
Trigger the creation of a deep link to a specific Entity for a
user to copy / paste into a conversation.
Resultant link may be clicked on by any user to launch the
tab and navigate directly to that Entity.
Generate your own Deep Link
Programmatically create your own link, for use via bot or
other code flows.
microsoftTeams.shareDeepLink({
subEntityId: <subEntityId>,
subEntityLabel: <subEntityLabel>,
subEntityWebUrl: <subEntityWebUrl>
})
https://teams.microsoft.com/l/entity/
<appId>/<entityId>
?webUrl=<entityWebUrl>
&label=<entityLabel>
&context=<context>
27.
28.
29. Tabs in Microsoft Teams
• Put information at the fingertips of users
• Leverage collaborative nature of the product
• Minimize context switching – easy to find what users needs
• Focus on content that makes sense in the solution
• Minimize extra chrome – focus on what you want the user to do
• Design for bite-size tasks – power users should use your full SaaS
30. Configurable Tabs
• In a channel, tabs should allow the user to configure the view to the
relevant content
• Content should be the same for all users – leverage collaboration
• Content should be locked – don’t allow users to browse away
Static Tabs
• In personal scope, this content should be the relevant for either the all-up
app (e.g. Help, FAQ, forums) or for a personal view of the experience
32. Web Service you create and host, using
whatever web technology you prefer (though
we recommend Node.js or .NET on Azure)
Built using Microsoft Bot Framework,
leverage other tech like LUIS
Node.js and .NET/C# libraries, or call REST
APIs directly
New Microsoft Teams Extension libraries
(Node.js and .NET) facilitate channel-
specific functionality
33. Set up basic development environment and install Bot Builder and
Microsoft Teams extension SDKs for chosen language
Leverage existing Bot Framework sample or Teams Getting started
sample
Run locally in the Bot Emulator
34. Register your bot in the Bot Framework Dev Portal
• Set a unique bot name and handle
• Set your bot Endpoint – your hosted domain, or your debug instance (we recommend
Ngrok)
• Create an AppID (aka BotID) and Password
• Add Microsoft Teams as a Channel
Note: for 1:1 bot, you may reference your bot directly via its AppID
Enter your AppID and Password into your Development environment
Build and publish or run locally with Ngrok
35. Create a Teams App Manifest
• We have provided a SimpleBot package in MSDN –
a basic bot manifest with sample icons
Add your BotID in the Bots object
Sideload into a Team
{
"manifestVersion": "1.0",
"version": "1.0.0",
“id": "%APP_GUID%",
"packageName": "com.samples.samplebot",
"developer": {
"name": "Microsoft",
"websiteUrl": "https://www.microsoft.com",
"privacyUrl": "https://www.microsoft.com/privacy",
"termsOfUseUrl": "https://www.microsoft.com/termsofuse"
},
"name": {
"short": "Sample Bot App"
},
"description": {
"short": "This is a sample bot manifest",
"full": "This is a sample bot manifest that has the bare minimum you need for a bot, which
will work in Teams and Personal scopes."
},
"icons": {
"outline": "contoso20x20.png",
"color": "contoso96x96.png"
},
"accentColor": "#60A18E",
"bots": [
{
"botId": "%BOT_FRAMEWORK_ID%",
"scopes": [
"team",
"personal"
]
}
],
"permissions": [
"identity",
"messageTeamMembers"
]
}
36. Responsive messages (via 1:1 or @mentioning in channel)
Proactively create messages
• Create direct (1:1) message – must know user ID
• Create new channel reply – bot must be added to team and know channel
information
Update messages sent by Bot
One-way only – e.g. push notifications
37. User to bot
• Plain or rich text
• Inline images
• Note: files not currently supported
Bot to user
• Plain text
• Markdown or XML
• Cards
• Hero Cards
• Thumbnails
• Sign-in
• Carousel or List layouts
• Buttons
• openUrl – open in browser
• imBack – trigger chat response
• invoke – silent JSON payload
38. Bot only listens to @mentions
• Replies go to the conversation thread
Inbound payload in channels as flagged as
isGroup and contains Teams channel data:
"channelData": {
"channel": {
"id": "19:293ecdb923ac4458a5c23661b505fc84@thread.skype",
},
"team": {
"id": "19:293ecdb923ac4458a5c23661b505fc84@thread.skype"
},
"tenant": {
"id": "72f988bf-86f1-41af-91ab-2d7cd011db47"
}
}
39. Retrieve a list of all team members, including:
• Name
• Email
• AAD Object
• UPN
Retrieve a list of all channels
@Mentioning users
Proactively create New Reply chain
Team/channel event monitoring
• User addition/remove
• Channel creation/removal/renaming
40. Bots in Microsoft Teams
• Whether used as a CLI for your SaaS, or a conversation bot to facilitate work,
create the experience that makes the most sense for your product.
• Take advantage of scope to provide the appropriate information in channel
or via 1:1.
• Leverage the Bot Framework and Microsoft Teams Extension SDK to gain
insight to the team and channel, or act as an intelligent notification system.
• Leverage Static Tabs to provide additional help and user education, right
alongside the chat stream.
47. Cloud-hosted service that listens to user
requests and responds with cards or rich
media
Leverage the Bot you’ve already built, or
build another
Define commands and parameters in the
manifest.json
Handle via Bot Framework activity,
leveraging the Microsoft Bot Extension
SDKs
"composeExtensions": [
{
"botId": "57a3c29f-1fc5-4d97-a142-35bb662b7b23",
"scopes": [
"personal"
],
"commands": [{
"id": "searchCmd",
"description": "Search Bing for information
on the web",
"title": "Search",
"initialRun": "true",
"parameters": [{
"name": "searchKeyword",
"description": "Enter your search
keywords",
"title": "Keywords"
}]
}
]
}
],
48. Compose Extensions in Microsoft Teams
• Share content that makes sense in conversations.
• Add on as part of your core Bot offering to facilitate easier management.
• Take advantage of the rich card types provided as part of the platform.
• Optimize search results to keep compose extensions snappy and responsive.
51. Leverage webhooks to send activity into
Teams
Build your own connector, registering on
the Connector Developer Portal
Simply add Connector ID to manifest.json
Leverage new Actionable Messages, to
allow users to get inline work done
56. Use the Activity Feed to send important
information to your users
Leverage your existing Bot, to tag specific
messages as notification alerts
Encode a deep link to your entity (tab) to allow
one-click navigation to your content
58. Channel Tabs
• Sharing group
information
• Pin information or tools
important for the
channel
Connectors
• Simple push
notifications across
channels (Outlook &
Teams)
Notifications
• Get work done
inline
• Keep users focused
on tasks that matter
Channel Bots
• Coordinate the
group
• Broadly share
• Push notifications
Compose Extensions
• Provide contextual
shortcuts to information
users need
Personal Tabs
• Focus on the user
• Provide help or other
information
Personal Bots
• Simplify commands
• Q&A
• Provide individual
insight
59. Channel Tabs
• Team account list
• Target / metrics
dashboard
Connectors
• Simple push
notification from
other tools
Notifications
• Flag important
action items
Channel Bots
• Channel
notifications of wins
/ losses
• In-group
opportunity queries
Compose Extensions
• Quick way to send links
to opportunities
Personal Tabs
• Filtered account list
• Personal dashboard
Personal Bots
• Personal queries
60. Channel Tabs
• Project Kanban
• Task list
• Project schedule
• Burndown chart
• Other dashboards
Connectors
• Simple push
notification from
other tools
Notifications
• Flag important
action items
Channel Bots
• Channel
notifications on
status changes
• Group queries
Compose Extensions
• Quick way to send links
to tasks
Personal Tabs
• Personal to-do / tasks
Personal Bots
• Personal queries
62. Environment
• Download and install Visual Studio 2017 https://www.visualstudio.com/
• Download and install Visual Studio Code https://code.visualstudio.com/
• Download and install NodeJS https://nodejs.org/en/
• Download and extract ngrok https://ngrok.com/
63. Enable Sideloading
1. Sign in to Office 365 with your administrator account.
2. Select Admin to go to the Office 365 Admin Center.
3. From Settings, select Services & add-ins or Apps.
4. From the list of services and add-ins, or apps, select Microsoft Teams.
5. On the Microsoft Teams settings screen, switch both Allow external apps in Microsoft Teams
and Allow sideloading of external apps to On, and then select Save.
64. Enable Script Lab
1. After log-in, go to Admin Center
2. Go to settings – select Services & Add-ins
3. Upload Add-ins
4. When new Add-ins page shows up, search “Script Lab”, then click “Add” and follow instruction on
the page till completion
66. Lab Files
Get lab files:
- https://goo.gl/Z3jMZ3
Get full training:
- git clone https://github.com/OfficeDev/TrainingContent.git
67. How to create a Teams App
Develop components
HTML
TypeScript / JavaScript
.NET
Integrate with Teams
Microsoft Teams JavaScript Library
Bot Builder SDK - Node.js & C#
Package and deploy
Host web pages and services
Create and package manifest
Sideload/publish package
71. Build a basic
Microsoft Teams Bot
Overview of building a Microsoft Teams Bot
Bot Framework vs Webhook (Custom Bot)
Conversation Basics
Channel Conversations and 1:1 Conversations
Messages, Cards and Actions
Events
Testing your Bot
DEMO
72. Overview of building a Microsoft Teams Bot
Design a great bot
Be responsive – respond to
messages and events
Recognize and respond to
questions and non-questions
Have a personality
Develop your bot
Bot Builder SDK for .NET
Bot Builder SDK for Node.js
Register and deploy your bot
Get a Bot ID and App ID/Secret
and configure bot
Make sure bot is reachable from the internet
Enable analytics
74. Conversation basics
Activity objects are used to pass information back and forth between bot and channel (or user).
Messages property
Text (Plain / Markdown)
Attachments (Simple media / Cards)
Entities (Users, Bot client)
Dialogs manage conversation flow
Pre & Post events for prompts & replies
Dialog stack and state managed by Bot Framework
Values passed to/from dialogs
StateService
User
Conversation
Private (User in Conversation)
75. Channel conversations and 1:1 conversations
Channel conversation
Access to channel data, including members
Events when users added/removed from channel
Messages will contain ‘at’ (@) references
1:1 conversation
Access only to user – not team
Event when user initiates conversation
No ‘at’ references
76. Messages – Text formats
Format From user to bot From bot to user Notes
Rich text Basic markdown, no tables
Pictures
Maximum 1024×1024 and 1 MB in PNG, JPEG, or GIF format; animated
GIF not officially supported
Cards Currently supports Hero, Thumbnail, and Office 365 Connector cards
Emojis Currently supports emojis via UTF-16 (such as U+1F600 for grinning face)
77. Cards
Hero
Largest card
Best used for articles, long descriptions
or scenarios where your image is telling
most of the story
Thumbnail
Short and sweet
Ideal for short answers, or if you want to
return several cards at once to provide options
Good for deep link to tab or service
Office 365 Connector Card
Most flexible
Provides for multiple sections, images and fields
Also supported in O365 Groups (Exchange)
78. Actions
CardAction.Type CardAction.Value
openUrl URL to be opened in the built-in browser
imBack Text of the message to send to the bot (from the user who clicked the button or tapped the card).
This message (from user to bot) will be visible to all conversation participants
*Not recommended for bots in channels
invoke Payload of message to send to the bot (from the user who clicked the button or tapped the card).
This message will not be visible.
79. Events
Activity objects are used to pass information back and forth between bot and channel (or user).
Activities can represent Events, denoted by ActivityType == ‘conversationUpdate’
Team Member Events
teamMemberAdded
teamMemberRemoved
Payload object contains
added/removed members
*Adding bot fires this event
Channel Events
channelCreated
channelRenamed
channelDeleted
ChannelData object reflects
current state
Team Events
teamRenamed
ChannelData object reflects
current state
80. Testing your Bot
Bot registration portal
Help confirm registration settings
Simulates 1:1 conversation
Bot Framework Emulator
Separate download
Does not require registration
Can connect to bot on localhost
Supports speech recognition
Send sample Team Member Events
ngrok Tunnel
Separate download
Forwards internet requests to local machine
Allows inspection of request/response
84. Build a Microsoft
Teams Tab
Overview of building a Microsoft Teams Tab
Tab content and configuration
Interacting with Teams and External Systems
Azure Active Directory and Microsoft Graph
DEMO
85. Overview of building a Microsoft Teams Tab
Design a great tab
Select relevant app functionality
Scope and focus the user experience
Integrate and streamline access
Develop your tab
HTML/JavaScript/TypeScript
REST services
Deep Linking and context
Deploy your tab
Sideload to Teams app
Submit to Office Store
86. Tab Configuration and Content
Tab Configuration
Configured in manifest
Displayed when Tab added to Channel
Collect information
Call setSettings() specifying Content Url and Entity Id
Tab Content
Rendered in IFRAME
Url specified by configuration page
Inspect context for EntityId/SubEntityId
Retrieve state based on Entity/SubEntity/User
87. Interacting with Microsoft Teams
Teams API provides context for User / Team / Organization
Getting Context through URL placeholders
Placeholders specified in URL in manifest
Resolved at runtime
Placeholders for each property of Context object
{upn}, {teamId}
Getting Context through the JavaScript library
Library provides function to get context
microsoftTeams.getContext()
Asynchronous method with only success callback
Returns context object
Property Description
teamId The team ID in the format 19:[id]@thread.skype
channelId The channel ID in the format 19:[id]@thread.skype
Locale Lowercase lang-locale
theme default | dark | contrast
entityId The entity id you set up on your config page
subEntityId The sub entity id you set up on your config page
upn The user identifier in email format
tid Guid identifying the current Tenant ID
groupId Guid identifying the current O365 Group ID
88. Interacting with external services
Authenticating
Authentication cannot occur in IFRAME
Teams JavaScript library facilitates popup and
cross-window communication
microsoftTeams.authentication.authenticate({
url: <auth URL>,
width: <width>,
height: <height>,
successCallback: <successCallback>,
failureCallback: <failureCallback>})
In <auth URL> signal result and pass data
microsoftTeams.authentication.notifySuccess(token)
microsoftTeams.authentication.notifyFailure(err)
Redirecting across domains
Tabs can only show pages in validDomains list of manifest
Call microsoftTeams.navigateCrossDomain(yourNewUrl) to
request the IFRAME containing your page is redirected to the
specified URL.
(Could also display page in popup via authenticate)
90. Call to action
Join Office 365 developer program
https://dev.office.com/devprogram
to leverage all resources for Office 365
development learning
Build applications on Office 365 platform
Attend MVP led local community events to
continue learning on Office 365 development
Share your feedback on Bootcamp at
https://aka.ms/o365devbootcampfeedback
Hinweis der Redaktion
Generated project:
Review folders: src, manifest, package
Review gulp tasks: manifest, build, serve
Source files:
*.html files: “inject” comments
Used to inject TypeScript compiled output into page
Net result is HTML/JavaScript in same page
Every page needs “microsoftTeams.initialize()”, and is called in TypeScript object constructor
webpack.config.js defines “output / library” around line 61. This library name is a namespace, used to qualify TypeScript objects
Generated project:
Review folders: src, manifest, package
Review gulp tasks: manifest, build, serve
Source files:
*.html files: “inject” comments
Used to inject TypeScript compiled output into page
Net result is HTML/JavaScript in same page
Every page needs “microsoftTeams.initialize()”, and is called in TypeScript object constructor
webpack.config.js defines “output / library” around line 61. This library name is a namespace, used to qualify TypeScript objects
Dialog example (https://github.com/Microsoft/BotBuilder-Samples/tree/master/CSharp/core-BasicMultiDialog):
Root dialog calls Name dialog
Name dialog prompts for name. Upon response, returns to caller passing name via Context.Done() method
Root dialog calls Age dialog, passing name. (Pass via constructor on class)
Age dialog prompts “Hello [name], what is your age?”. Upon response, returns to caller passing name via Context.Done() method
User state applies to user for all conversations
Conversation state applies to all users in that conversation
Private state applies to current user in current conversation
Teams will send notifications to your bot for changes or events that happen in contexts where your bot is active. You can use these events to trigger service logic, such as:
Trigger welcome message when your bot is added to a team.
Query and cache team information when the bot is added to a team.
Updated cached information on team membership or channel information changes.
Remove cached information for a team if the bot is removed.
Since bot is scoped to team, no events for team creation/deletion provided.
When bot is added/removed, TeamMember events are sent.
Generated project:
Review folders: src, manifest, package
Review gulp tasks: manifest, build, serve
Source files:
*.html files: “inject” comments
Used to inject TypeScript compiled output into page
Net result is HTML/JavaScript in same page
Every page needs “microsoftTeams.initialize()”, and is called in TypeScript object constructor
webpack.config.js defines “output / library” around line 61. This library name is a namespace, used to qualify TypeScript objects
Design
Focused functionality
Tabs work best when they’re built to address a specific need. Focus on a small set of tasks or a subset of data that’s relevant to the channel the tab is in.
Reduced chrome
Avoid creating multiple panels in a tab, adding layers of navigation, or requiring users to scroll both vertically and horizontally in one tab. In other words, try not to have tabs in your tab.
Integration
Find ways to notify users about tab activity by posting cards to a conversation, for example.
Conversational
Find a way to facilitate conversation around a tab. This ensures that conversations center on the content, data, or process at hand.
Streamlined access
Make sure you’re granting access to the right people at the right time. Keeping your sign-in process simple will avoid creating barriers to contribution and collaboration.
Develop
Any editor
Call any service
Deploy
Seller Dashboard is used to submit to store
Not necessary for tabs – can sideload
To provide a seamless tab experience, perform provisioning and authorization on configuration page when possible.
If context has entity/subentity, then respond to a deeplink
State storage is developer’s responsibility
Generated project:
Review folders: src, manifest, package
Review gulp tasks: manifest, build, serve
Source files:
*.html files: “inject” comments
Used to inject TypeScript compiled output into page
Net result is HTML/JavaScript in same page
Every page needs “microsoftTeams.initialize()”, and is called in TypeScript object constructor
webpack.config.js defines “output / library” around line 61. This library name is a namespace, used to qualify TypeScript objects