Office 365 Developer Bootcamp Switzerland in December 2017. Introduction into Microsoft Teams Development

1. Switzerland 2017

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

3. Speakers
Stefano Tempesta
Microsoft MVP
David Schneider
Microsoft MVP

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

5. Microsoft Teams

6. Extensible platform
Build apps with a rich set of capabilities to enable these higher-performing teams

7. 181Markets
19Languages

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

21. Tabs

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>

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

31. Bots

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.

41. Compose Extensions

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.

49. Connectors

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

52. Activity Feed

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

57. Putting it all together

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

61. Fundamentals of
Microsoft Teams
Teams application packaging and testing

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

65. Developer Preview

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

68. Demo
Create and test a basic Teams App using Yeoman

69. Hands On
Lab 04 – Exercise 1

70. Fundamentals of
Microsoft Teams
Build a basic Microsoft Teams Bot

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

73. Examples of bot
personality and
response types

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

81. Demo
Create a basic Teams Bot using Visual Studio

82. Hands On
Lab 04 – Exercise 2

83. Fundamentals of
Microsoft Teams
Build a Microsoft Teams Tab

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)

89. Hands On
Lab 04 – Exercise 3
Issuewith MSAL:
npm install msal@0.1.1 --save

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