2473474-Microsoft Teams Extensibility

Microsoft Teams
Developer Overview
Tom Jebo
Agenda
What is Microsoft Teams?
Tab Overview
Design & Config
API
Bot Overview
Design
Build
Conversation
Events
Actionable Messages
Activity Feed
Compose Extensions
Apps and Side Load
Office Store
Resources
Chat-based workspace in Office 365
Build apps with a rich set of capabilities to enable these higher-performing teams
Extension Points in Teams
Tabs Bots Connectors Actionable Activity Compose Office

Surface rich Help users get Post rich updates to Messages Feed Extensions Store
content within tasks done in channels
Add rich Engage users Allow users to query Drive engagement
Teams conversations
interaction to your via feed and share rich cards by submitting
connector cards notifications in conversations your app to the
Office Store
Available now Available in Developer Preview
Reach your users in their chats, channels, notifications, and personal workspace
Microsoft Teams Extension Points
Tabs Bots Connectors

Surface rich Help users get Post rich updates
content within tasks done in to channels
Teams conversations
Available now
Demo
Tab code/feature walkthrough

Tab Design
Relevance – channels are specific

Static – personal experience
Scope – provide boundaries that make sense
Access – Office Groups, streamlined access
Bots – reaching out, being helpful
Tab Considerations
Configurable vs Static
Configuration(required), reconfiguration, removal
Content – HTML based, hosted
Manifest – JSON based
Package – manifest.json + 2 icons
Tab Content
Requirements:
- Secure https endpoint
- Allow iframe
- https://statics.teams.microsoft.com/sdk/v1.0/js/MicrosoftTeams.min.js
- call microsoftTeams.initialize();
Demo
Tab code/feature walkthrough

Configuration
configUrl
<html> microsoftTeams.settings.setValidityState(true)
<body>
<form>
<input> type=… Save
microsoftTeams.settings.setSettings({entityId, contentUrl, suggestedTabName, websiteUrl,

removeUrl})
Tab Auth Considerations
Authentication
1. Silent – existing Azure AD token
2. Pop-up – non-AAD
- microsoftTeams.authentication.Authenticate()
- microsoftTeams.authentication.Success/Failure()
Deep Linking
• Get and Copy link
• Generation https://teams.microsoft.com/l/entity/<appId>/
<entityId>?webUrl=<entityWebUrl>&label=<en
tityLabel>&context=<context>
• Share
microsoftTeams.shareDeepLink()
Example Deep Link
appId
https://teams.microsoft.com/l/entity/
fe4a8eba-2a31-4737-8e33-e5fae6fee194/ entityWebUrl
tasklist123?webUrl=https://tasklist.example.com/123
&label=Task List 123 context
&context={"canvasUrl": "https://tab.tasklist.example.com/123","channelId":
"19:cbe3683f25094106b826c9cada3afbe0@thread.skype"}
Teams js API
microsoftTeams microsoftTeams.settings
getContext getSettings
initialize registerOnRemoveHandler
navigateCrossDomain registerOnSaveHandler
registerOnThemeChangeHandler setSettings
shareDeepLink setValidityState
microsoftTeams.authentication
authenticate https://msdn.microsoft.com/en-us/microsoft-teams/jslibrary
notifyFailure
notifySuccess https://statics.teams.microsoft.com/sdk/v1.0/js/MicrosoftTeams.min.js
Bots
Interact in both 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
Demo
Bot Demo
Bot Design
Intelligent vs CLI
Drive users as much as possible
Be responsive – respond to every message

Narrow scope
Say hello – use bot events. Use regular expressions
Still can be intelligent (i.e. LUIS)

Bot Framework
Build the code: https://aka.ms/bf-createsdkbot

Register at https://dev.botframework.com/
Provide information about the bot
Icon, name, handle, description, msg URL,
admin account.
Get Microsoft App ID and secret/password
Highly recommend Azure Bot Service!
https://docs.microsoft.com/en-us/bot-framework/azure/azure-bot-
service-quickstart
Build a Bot
Build the code using Teams extension for BotBuilder
C#: Install-Package Microsoft.Bot.Connector.Teams

using Microsoft.Bot.Connector.Teams.SampleBot.Shared;
javascript: npm i botbuilder-teams Develop
your way
var builder = require("botbuilder");
REST APIs: https://docs.botframework.com/en-us/restapi/connector/#navtitle

Scopes: team vs personal
How your bot is added counts
Demo
Bot Demo
Microsoft Teams
Bot Conversations Basics
Receiving: Activity object (type message)
text = “hello”
channelId (always “msteams”)
from.id – unique to user
channelData.tenant.id – AAD
channelData.channel.id & name*
conversationData.id and isGroup*
entities*
TeamsChannelData channelData = activity.GetChannelData<TeamsChannelData>(); string
tenantId = channelData.Tenant.Id;
Bot Conversation Creation
Add vs @mention – provides id’s for creating conversations
and other operations
Channel – enumerate team roster.
Conversations created with unique user/tenant ID
bot.beginDialog() / CreateConversation()
/conversations/ (1:1) /conversations/{conversationId}/activities/

(channel)
Example 1:1 Conversation Starter
Id of the target User
Id of the Channel
Id of the Conversation
Sending/Reply:
await connector.Conversations.SendToConversationAsync((Activity)newMessage);
Activity reply = activity.CreateReply($"You sent {activity.Text}

which was {length} characters");
await connector.Conversations.ReplyToActivityAsync(reply);
/v3/conversations/<conversationId>/activities/<activityId>/
Example reply with
@mention
NEW! Message Update:
origAttachment.content.subtitle = 'Assigned to Tom Jebo’;
var updatedMsg = new builder.Message()
.address(address) Update method or
.textFormat(builder.TextFormat.markdown) REST endpoint
.addAttachment(origAttachment)
.toMessage();
session.connector.update(updatedMsg, function(err, addresses)
{ if (err) { console.log(`Could not update the message`); }
/v3/conversations/<conversationId>/activities/<activityId>/
Events for Bots
Team member or Bot addition/removed
- to a team
- for personal context
Channel updates
Team name updates
Example:
Bot added for personal context
- conversationUpdate
- membersAdded
- no channelData.team property
Possible action:
Welcome message for user
vs. team…
Send Cards
Property Type Description
title Rich text Title of the card. Maximum 2 lines
subtitle Rich text Subtitle of the card. Maximum 2 lines
text Rich text Text appears just below the subtitle
Image displayed at top of card. Aspect

images: [] Array of images
ratio 1:1 (square)
Array of action Set of actions applicable to the current card.

buttons: []
objects Maximum 6.
This action will be activated when the user

tap Action object
taps on the card itself
Demo
Bot code/feature walkthrough

Newer Features in Teams Extensions
Actionable Activity Compose Office

Messages Feed Extensions Store
Add rich Engage users Allow users to query Drive engagement
interaction to your via feed and share rich cards by submitting
connector cards notifications in conversations your app to the
Office Store
Available in Developer Preview
Connectors with Actionable Messages
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
Office365 Connectors in Teams
Office365 Connectors with Actions!
No need to leave Teams channel

conversations
Stay focused and take quick actions

Demo
Messages with Actions

Connector/Actionable Message Architecture
12 message
response
Connector or message
send card
Bot
Connector Service
1 event
Data,
Service,
Etc… Microsoft Teams
Connector/Actionable Message Architecture
12
Connector or send http postcard
update
Bot
Connector Service
Data,
Service,
Etc… Microsoft Teams
Demo
Messages with Actions

Activity feed
Notify users personally via the

activity feed
Same API as sending bot messages
Deep link straight into tabs
Demo
Notifications in the Activity Feed

Compose Extensions
Personalize Teams Compose box with

your App & Services content
Users can query and insert your app

content into conversations
You can reuse services you built for

Bots or Tabs
Demo
Compose extension in action

Compose Extension Architecture
1 send request
Your Bot Code invoke/searchCmd

Connector Service
3 response
composeExtension.attachments[…]
Bot Builder SDK
2 Query
Data,
Service, Microsoft Teams
Compose Extension Design
Optimize search results – keep it responsive!

Optimize cards – useful, attractive and shareable.
Compose Request Activity
• message type “invoke”

• name composeExtension/query
• value.commandId (e.g. “searchCmd”)
• value.parameters (name, value, skip, count)
• other properties same for @ and message
Compose Response
• composeExtension object
• composeExtension.type (“result”)
• composeExtension.attachmentLayout (“list” or “grid”)
• composeExtension.attachments
Cards:
Thumbnail
Hero
O365 connector
Authentication
1. Query secure resource

2. Check Teams userid
3. Needs auth, return login
action
4. notifySuccess ( security code)
Demo
Compose extension in code

Microsoft Teams is open!
Register and submit your app

today to the Office Store
Microsoft Teams App = Tabs,
Connector, Actionable Messages, Activity
Feed, Bots & Compose Extensions
Your app will be ready in the

Developer Preview once approved
Demo
Apps in Teams
Office Store
Create a developer account
Register in the Seller Dashboard
Submit zip package to the Office Store
https://msdn.microsoft.com/en-us/microsoft-teams/submission
New Features Summary
Actionable Messages on Connector cards
User Notifications (Activity Feed)
Compose Extensions
Office Store
App Platform
Wrap-up
All these features and more in Developer Preview
Submit your app: aka.ms/SubmitTeamsApp
Resources
https://dev.office.com/microsoft-teams/explore-microsoft-teams
https://dev.office.com/microsoft-teams/ + tabs | bots | composeextenstions | activityfeed | connectors
https://msdn.microsoft.com/en-us/microsoft-teams/samples https://aka.ms/bf-createsdkbot
https://dev.botframework.com/
https://docs.microsoft.com/en-us/bot-framework/azure/azure-bot-service-quickstart
Suggestions:
mailto://microsoftteamsdev@microsoft.com
Problems:
StackOverflow "microsoft-teams“
https://aka.ms/microsoftteamsplatformsuggestions
Thank You!
Questions?

2473474-Microsoft Teams Extensibility

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

2473474-Microsoft Teams Extensibility

Uploaded by

Copyright:

Available Formats

Microsoft Teams

Tabs Bots Connectors Actionable Activity Compose Office

Available now Available in Developer Preview

Tabs Bots Connectors

Tab code/feature walkthrough

Relevance – channels are specific

Tab code/feature walkthrough

microsoftTeams.settings.setSettings({entityId, contentUrl, suggestedTabName, websiteUrl,

• Get and Copy link

&label=Task List 123 context

Interact in both Team conversations or 1:1

Built using Microsoft Bot Framework

Complete tasks via basic commands, menu

Rich Microsoft Teams features, e.g.

Be responsive – respond to every message

Say hello – use bot events. Use regular expressions

Still can be intelligent (i.e. LUIS)

Build the code: https://aka.ms/bf-createsdkbot

Build the code using Teams extension for BotBuilder

C#: Install-Package Microsoft.Bot.Connector.Teams

REST APIs: https://docs.botframework.com/en-us/restapi/connector/#navtitle

/conversations/ (1:1) /conversations/{conversationId}/activities/

Id of the target User

Activity reply = activity.CreateReply($"You sent {activity.Text}

title Rich text Title of the card. Maximum 2 lines

subtitle Rich text Subtitle of the card. Maximum 2 lines

text Rich text Text appears just below the subtitle

Image displayed at top of card. Aspect

Array of action Set of actions applicable to the current card.

This action will be activated when the user

Bot code/feature walkthrough

Actionable Activity Compose Office

Available in Developer Preview

Push rich interactive cards

No need to leave Teams channel

Stay focused and take quick actions

Messages with Actions

Messages with Actions

Notify users personally via the

Notifications in the Activity Feed

Personalize Teams Compose box with

Users can query and insert your app

You can reuse services you built for

Compose extension in action

Your Bot Code invoke/searchCmd

Optimize search results – keep it responsive!

• message type “invoke”

1. Query secure resource

Compose extension in code

Register and submit your app

Your app will be ready in the

Register in the Seller Dashboard

Submit zip package to the Office Store

You might also like