Microsoft Teams Developer Overview · 2020-02-04 · Agenda What is Microsoft Teams? Tab Overview...

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

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

Microsoft Teams Extension Points


Available now

Bots

Help users get

tasks done in

conversations

Connectors

Post rich updates

to channels

Tabs

Surface rich

content within

Teams

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();

https://statics.teams.microsoft.com/sdk/v1.0/js/MicrosoftTeams.min.js

Demo

Tab code/feature walkthrough

Configuration

<html><body> <form>

<input> type=…

configUrl

Save

microsoftTeams.settings.setSettings({entityId, contentUrl, suggestedTabName, websiteUrl, removeUrl})

microsoftTeams.settings.setValidityState(true)

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

microsoftTeams.shareDeepLink()

https://teams.microsoft.com/l/entity/<appId>/<entityId>?webUrl=<entityWebUrl>&label=<entityLabel>&context=<context>

• Share

https://teams.microsoft.com/l/entity/

fe4a8eba-2a31-4737-8e33-e5fae6fee194/

tasklist123?webUrl=https://tasklist.example.com/123

&label=Task List 123

&context={"canvasUrl": "https://tab.tasklist.example.com/123","channelId": "19:[email protected]"}

Example Deep LinkappId

entityWebUrl

context

https://teams.microsoft.com/l/entity/

Teams js API

getContextinitializenavigateCrossDomainregisterOnThemeChangeHandlershareDeepLink

microsoftTeams

https://msdn.microsoft.com/en-us/microsoft-teams/jslibraryauthenticatenotifyFailurenotifySuccess

microsoftTeams.authentication

getSettingsregisterOnRemoveHandlerregisterOnSaveHandlersetSettingssetValidityState

microsoftTeams.settings

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

Be responsive – respond to every message

Say hello – use bot events.

Drive users as much as possible

Narrow scope

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

https://aka.ms/bf-createsdkbot

https://dev.botframework.com/


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

var builder = require("botbuilder");

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

Develop your way

Scopes: team vs personalHow your bot is added counts

Demo

Bot Demo

Microsoft Teams

Bot Conversations Basics

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*

Receiving:

TeamsChannelData channelData = activity.GetChannelData<TeamsChannelData>(); stringtenantId = 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:

Activity reply = activity.CreateReply($"You sent {activity.Text} which was {length} characters");

await connector.Conversations.ReplyToActivityAsync(reply);

await connector.Conversations.SendToConversationAsync((Activity)newMessage);

/v3/conversations/<conversationId>/activities/<activityId>/

Example reply with @mention


NEW! Message Update:

/v3/conversations/<conversationId>/activities/<activityId>/

origAttachment.content.subtitle = 'Assigned to Tom Jebo’; var updatedMsg = new builder.Message()

.address(address)

.textFormat(builder.TextFormat.markdown)

.addAttachment(origAttachment)

.toMessage(); session.connector.update(updatedMsg, function(err, addresses)

{ if (err) { console.log(`Could not update the message`); }

Update method or REST endpoint

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

images: [] Array of imagesImage displayed at top of card. Aspectratio 1:1 (square)

buttons: []Array of action objects

Set of actions applicable to the current card. Maximum 6.

tap Action objectThis action will be activated when the user taps on the card itself

Demo

Bot code/feature walkthrough

Newer Features in Teams Extensions


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

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

Microsoft Teams

Connector Service

Connector or Bot

Connector/Actionable Message Architecture

Data, Service,

Etc…

message

1 message

1 event

send card

2 response

Microsoft Teams

Connector Service

Connector or Bot

Connector/Actionable Message Architecture

Data, Service,

Etc…

http post

1

send update card

2

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

Microsoft Teams

Connector ServiceYour Bot Code

Bot Builder SDK

Compose Extension Architecture

Data, Service,

invoke/searchCmd

1 send request

composeExtension.attachments[…]

3 response

2 Query

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



Suggestions:

mailto://[email protected]

Problems:

StackOverflow "microsoft-teams“

https://aka.ms/microsoftteamsplatformsuggestions

https://dev.office.com/microsoft-teams/explore-microsoft-teams

https://dev.office.com/microsoft-teams/

https://msdn.microsoft.com/en-us/microsoft-teams/samples

https://aka.ms/bf-createsdkbot



mailto:[email protected]

https://aka.ms/microsoftteamsplatformsuggestions

Thank You!Questions?

Microsoft Teams Developer Overview · 2020-02-04 · Agenda What is Microsoft Teams? Tab Overview...

Documents

Transcript of Microsoft Teams Developer Overview · 2020-02-04 · Agenda What is Microsoft Teams? Tab Overview...