Microsoft Teams community call-September 2019

Getting started Framework Components ResourcesMicrosoft Teams | Design Guidelines
Build with us
Millions of people use Office 365 every day. Building for our platform puts your app at the
center of all the action.

BUILD ON TEAMS

Getting started Framework Components ResourcesBuild on Teams
Teams is about collaboration
So make your app about collaboration.
Collab in Channels
Interacting in front of or with a group of people increases your app’s visibility and enhances
discoverability. To meet this mark the content should be actionable and not simply informational
Sharing
Message extensions allow sharing and interaction in 1:1, Group chat, Teams, and from the
Commandbox. Link Furling just makes that better in the future.
Proactive in channel
Help with discovery. Maximize usage with actionable messages
User Customizable
When users get your data the way they want it is satisfying. Customizing notifications is always a
great start.
Teams is the hub. Bring content to the user in the right place and at the right time. If they need
to hunt for your app after they’ve started using it, you’ve already lost.
1:1 Apps create a hole
that users can't get out of…
DON’T BE AN APPHOLE

SCENARIOS FIRST

Getting started Framework Components ResourcesScenarios first
A bot is not a scenario…
Jamming a scenario into a feature usually confuses users.
Who is your hero?
Who are they? What do they do? Name names. How do they feel now? How will they feel when you
are successful?
Tell the story first, ignore solutions at this stage
We are all in the business of thinking about solutions. Don’t do that yet. Tell the story of the user
journey like a children’s book first. Feelings matter here.
Elevator pitch – in one breath
Keep it Simple. You need this to sell the concept to your colleagues anyway!
”Make it easy to turn incoming requests into tasks and visually manage workflow”
Use this one-liner to keep yourself on track and manage scope creep as well as shipping an MLP.
Minimum Lovable Product.
?

Decision Criteria
How often will
it be used?
What ROI does it
provide for the team?
Does it solve a real
problem ?

Quickly outline your flow in front of your users
Highlight status changes and events you can either automate, push as notification, or use as a manual input

DESIGN TOOLS

Getting started Framework Components ResourcesDesign tools
The most important tools are…
Fast and don’t put a barrier between you and your discussion with the user.
Fast and interactive
Use a whiteboard, post-its, and markers. Detail the flow first then draw boxes and get some content
in them. Be fast and loose. Make mistakes. That’s what an eraser is for.
Your users
You are not the user. Even if you are building this for yourself get another person who is not your
friend to help you figure out the flow, and then the actual content.
Questions not answers
Be a 3 year old and ask “Why” until you have reduced the concept past a technology or a tool. Get to
the most generic understanding of the flow. Even if you think you know the answer. Ask the question.
You well be surprised how a small nuance can change everything
Boxes and words
For each major interaction ask other people what the words are that go in the box. What is the most
important order of things

Getting started Framework Components ResourcesDesign tools
You can draw a box
…and doing it in front of your users is a fast prototype.
Fail here or in code, your choice
The more code you write the less happy you will be to change it.
Getting it right here is very cheap, and the feedback loop is fast.
This is agile.
Document the key beats
Sure you need to handle some error cases, but cover the golden
path first, make sure your flow is appealing and you are bringing
the right elements to your users at the right time.
Backtrack and cover the rest
What does setup look like, how do you handle errors or conflicts,
secondary scenarios.

YOU GET ONLY
ONE FIRST DATE

Getting started Framework Components ResourcesYou only get one first date
First impressions matter
Even if your date looks great on paper, if they want to eat your brains there will be no second date.
Build an MLP not an MVP
As tempting as it may be to ship something there is very little forgiveness from users. They tend to
hold a grudge. Ship a minimum LOVABLE product and remember you are not the judge. Bring in
some users before sending your app into the world.
Great documentation goes a long way
Tell users what your app does in the long and short description fields of your app, not how
awesome you or your company is. This is a swipe left or swipe right moment or you.
Find a designer to do your icon
Everyone knows someone who is a designer or wants to be one. You should specialize in code,
don’t try and throw something together in paint. Also run the icon choices past your users before
locking in. This is cheap if you have to hire someone.
Find a writer
Consistent style, good grammar, and correct spelling go a long way to instill confidence.
Misspelled words, bad grammar, and Google translate make you look like a Twitter troll bot.

Getting started Framework Components ResourcesYou only get one first date

Getting started
Here’s everything you need to showcase your brand in Microsoft Teams.

Getting started Framework Components ResourcesThe basics
This area hosts Activity, Chats, Teams,
Meetings, Files, and Apps. If someone uses
your app every day, this is where they will
pin it.
Immersive experience
Work gets done in the canvas. Conversations
happen here. When you build a tab for an
app or a channel, they’ll show up here too.
Tabs and conversations
Get a bird’s-eye view of your work across
different teams and channels. Have one-on-
one conversations with bots, scan and
organize your tasks, or search your recently
viewed files.
Personal apps

Getting started Framework Components ResourcesThe basics
Each app uses this area differently, but in
general, it allows users to navigate to specific
content like a one-on-one chat with
someone, a channel in a team, or a list of
upcoming meetings.
Instant notifications
When users open a document, this is the view
they will get. To keep things focused, we’ve
moved the conversation to a narrow right
pane. Keep that size in mind if your service
inserts custom cards into chat.
Stage View
To keep Microsoft Teams easy to use on
mobile, we’ve streamlined the functionality.
Bots and connector cards will be available in
this view and we’ve made sure that if you are
using a standard card type, it will render
perfectly in our mobile experiences.
Mobile

Getting started Framework Components Resources
Bots are conversational apps that perform a
narrow or specific set of tasks. They give you
an opportunity to communicate with users,
respond to their questions, and proactively
notify them about changes. They’re a great
way to reach out.
Bot framework
The basics
Message extensions allow you to share
rich cards in a conversation. A card can hold
instructions to complete a complex task or a
simple GIF. These extensions are one of the
best ways to create shareable content and
serve information quickly.
Messaging extensions
Cards are actionable snippets of content that
you can add to a conversation through a bot,
a connector, or app. Using text, graphics, and
buttons, cards allow you to communicate with
an audience.
Customizable cards

Framework
A short tour to help you understand how the Teams platform works for your app.

Getting started Framework Components ResourcesTabs
Content and conversations,
all at once
Tabs are canvases that you can use to share content,
hold conversations, and host third-party services, all
within a team’s organic workflow. When you build a tab
in Microsoft Teams, it puts your web app front and
center where it’s easily accessible from key
conversations.

Guidelines
A good tab should display the following characteristics:
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.
Personality
Your tab canvas presents a good opportunity to brand your experience.
Incorporate your own logos, colors, and layouts to communicate
personality.
Your logo is an important part of your identity and a connection with your
users. So be sure to include it.
• Place your logo in the left or right corner or along the bottom edge
• Keep your logo small and unobtrusive

Tab layouts
Single Canvas
This is one large area where work gets done. OneNote and Wiki follow
this pattern. If you have an app that doesn’t separate content into
smaller components this would be a good fit.
Column
Columns are great for workflows that move an item from one column to
another to indicate a new status. Consider supporting drag and drop for
those scenarios. We recommend using dialogs or inline expansion for
detail views.

Tab layouts
List
Lists are great for sorting and filtering large quantities of data and are
great at keeping the most important things at the top. It is helpful to use
sortable columns. Actions can be added to each list item under the
ellipsis menu.
Grid
Grids are useful for showing elements which are highly visual. It helps to
include a filter or search control at the top.

PRO TIP Please work with our visual style so your service feels like a part of Teams.
Avoid creating multiple panels in a tab, adding layers of navigation, or requiring users to scroll both vertically and horizontally in one tab.
Best Practices
Always include a default state
Include a default state to make tabs easy to set up even if your tab is configurable.
Deep linking
Whenever possible, cards and bots should deep link to richer data in a hosted tab. For example, a card may show a summary of bug data, but
clicking it can shows the entire bug in a tab.
Naming
In many cases, the name of your app may make a great tab name. But consider naming your tabs according to the functionality they provide.

Getting started Framework Components ResourcesBots
Start talking
Bots are conversational apps that perform a
narrow or specific set of tasks. They give you an
opportunity to communicate with users, respond
to their questions, and proactively notify them
about changes. They’re a great way to reach out.

Guidelines
What does it do?
The value proposition
Explaining with a clear example what your bot does at the very beginning
will give users a reason to engage, and the right words to use. Welcome
messages should tell users the value of the bot, and how to interact with it
for the main scenarios.
Tours
We love to see tours offered at the very beginning. This is a great
opportunity to use a carousel and walk users through scenarios you offer.
Listen for ”tour”, “help”, and “what do you do” to resurface this content
Unauthenticated queries
Before forcing users to sign in, how can you help them understand the
value of your service?
This bot will help you submit time away from work, and
keep track of paid holidays. You can ask about “upcoming
holidays” or submit “time off”. Take a tour to see all the
things the bot can do and how to use its tabs.

Guidelines
A good bot should display the following characteristics:
Avatars
Bot avatars in Teams are shaped like hexagons so people can quickly tell
that they’re talking to a bot instead of a person. You’ll submit your avatar
as a square and we’ll crop it for you. When it comes to avatars, we
recommend making yours legible from 2 feet away and using a higher
contrast.
Buttons
We support up to six buttons per card. Be concise when writing button
text, and keep in mind that most buttons should only address the task at
hand.
Cards and graphics
Graphics are a good way to tell a story, but not all bot conversations
require graphics, so use them for maximum impact.

Fail with excellence
Respond to users and failing gracefully, like this:
Your bot should also be able to respond to things like 'Hi', 'Help', and
'Thanks' while taking common misspellings and colloquialisms into account.
Your bot should be able to handle the following types of queries and inputs:
• Recognized questions
These are the ”best case scenario” questions you’d anticipate from users
• Recognized non-questions
Queries about unsupported functionality, random pieces of information,
or when someone wants to curse at your bot.
• Unrecognized questions
Unintelligible inputs (i.e., gibberish).

Use LUIS and train to succeed
## SMS
- text
- text please
- send text
- txt pls
- txt please
- sms
- sms pls
- sms please
- msg
- msg pls
- msg please
- mssg
- mssg pls
- mssg please
- message
- message pls
- message
please
- imessage
- imessage pls
- imessage
please
- im
- im pls
- im please
- dm
- dm pls
- dm please
You are not the user
Age, vertical, and local jargon make a difference

Personality matters

Leave the user in control. Provide notification
settings that include frequency and priority.
How often should you use your bot
to reach out to a user?
When a state has changed
For example, if an assignment is marked as complete, when a bug changes,
when new social media is available, or when a poll has been completed.
When the timing is right
Your bot can act like a daily digest, sending a notification to the user or
channel at a specific frequency.
Avoid creating “notification blindness” from too many notifications that are
not critical for the user.
Bundle notifications, tune them to signals that are important and provide
individual users and teams a way to customize how often bots interject
themselves into a conversation

Using tabs
Tabs make your bot much more functional. With tabs, you get the following:
A place to host standing queries
In one-on-one conversations, tabs can house user-specific information and
lists. They’re also a good place to maintain bot responses to frequently-
asked questions (so users don’t need to keep asking).
A place to finish a conversation
You can link to a tab from a card. If your bot provides an answer that
requires a few more steps, it can link to a tab to complete the task or flow.
A place to provide some help
Add a tab that educates users about how to communicate with your bot.
You can provide some context for what it does or FAQs.

Best Practices
Bots aren’t assistants
Unlike agents (like Cortana), bots act as specialists.
Discourage chit chat
Unless your bot is for conversation, find ways to redirect chit chat towards task completion.
Introduce some personality
Keep your bot personality consistent with the voice of your product. Think of your bot as speaking for your company.
Maintain tone
Determine whether you want your tone to be friendly and light, “just the facts”, or super quirky.
PRO TIP When writing your bot script, ask yourself: “Will my company be embarrassed if a response is screen captured and shared?”

Encourage easy task flow
Bots
PRO TIP Embedding parts of your site in a tab will help someone maintain the context of a conversation as they use your service. It removes the
need to launch your service in a browser and switch back and forth between apps.
Best Practices
Support multi-turn interactions while still allowing for fully formed questions. Anticipating the next step will help users get through task flows much easier.
If a user takes several steps to complete a task, allow your bot to take them through each step, but finish by having it suggest a quicker path. For example, if a
user has taken several conversational turns to set a meeting (by first specifying a meeting, then identifying with whom, then stating the time, then stating the
day), finish the conversation with the following suggestion: “Next time, try asking if you can ‘schedule a meeting with Bob at 1:00 tomorrow”.

Getting started Framework Components ResourcesMessage extensions
Share your content in a
channel or chat
Message extensions allow you to share rich cards in a
conversation. A card can hold instructions to complete a
complex task or a simple GIF. Microsoft Teams comes equipped
with several message extensions already. If you look below the
compose box, you’ll see a “GIF” icon. That’s a message
extension! These extensions are one of the best ways to create
shareable content and serve information quickly.

Guidelines
A good message extension should display the following characteristics:
Single parameters are easier
Message extensions can hold up to five parameters, but we recommend
limiting yourself to a single parameter as often as possible.
Include a default query
Even before your user types anything you can show a list of results.
Whatever entity of yours the user has interacted with last is likely
something they want to share. Track an MRU list in your web pages as well
as what is used in teams and show it to the user when you load the
control.
Card file size
If your card content is relatively large consider that it will impact
performance on this list. Each result is actually a complete card so multiply
your card size by the number of results returned.

Users can select an entity from your
message extension…
…and add it to their message
Message extensions
Now the conversation is about an item in your service and
users can use the card to check out the details.

PRO TIP Try not to include optional parameters in your message extension. People tend to feel obligated to fill out every parameter before they
execute a search.
Keep it simple
A message extension should be light-weight and fast or it will lose its utility. If your search requirements are very complex or multiple parameters are
necessary even in the simplest case, it’s OK to include them.
Best Practices
Optimize your search results
A snappy message extension will return an easily digestible list of search results. We recommend including an image and no more than two lines of
text.
Optimize your cards
Each message extension produces in a card. Since it’s the last thing your user will see, make sure your cards are useful, good-looking, and easy to
share.

Getting started Framework Components ResourcesCards
Create a lightweight,
adaptable card
Cards are actionable snippets of content that you can add
to a conversation through a bot, a connector, or app.
Using text, graphics, and buttons, cards allow you to
communicate with an audience.
Our card framework eliminates the burden of designing a
fully functional UX. We developed several standard card
types and each one fits within our supported platforms.

Guidelines
Think of a card as a response to a user question or a setting. A card can respond to a direct question (like, “How many open bugs do I
have?”) or to a condition (like, “Send a list of my open bugs at 9 am every day”). A card should include any of the following elements:
Envelope text
Best used for chat messages. For example, if you want a bot to say: “Here’s
what I found!” or “Time for your 1:00 news digest”, that message is best
displayed in envelope text.
Envelope text is a great way to inject a little personality into your service—
just remember to keep it relatively short.
Title
Your title will always be the largest text in your card. It also serves as your
“hook”, so try to keep the title short, memorable, and easy to scan.
Subtitle
Best used for attribution, taglines, or as a secondary directive. This
component appears just below your title.
1
2
3

Text
Best used for plain text in the body of your card. Your max length depends
on the card type you’ve selected.
Buttons
Best used to open web pages, tabs, or additional chat content. Make sure
to keep your button text short and to the point.
You can include up to 6 buttons per card, but we’d recommend following a
‘less is more’ philosophy here.
Tap region
This is the clickable region of your card. Most users will want to click on
images automatically, so try and craft your text so they know where they
should tap or click.
5
6
7
Image
Images scale to fit their container. Hero cards have a max width of 420px,
thumbnails have a max width of 100px, and list views only allow for 32px in
desktop mode.
4

Types of cards
Some cards are best used to present standalone or individual pieces of content. We designed the following hero, thumbnail, and sign on cards for that
purpose.
Hero
Our largest card. Best used for articles, long descriptions, or scenarios
where your image is telling most of the story.
Thumbnail
Short and sweet. These cards are ideal for short answers, or if you want to
return several cards at once so the user can choose from a bunch of
options. We think these are a great way to deep link to another tab or a
web service.

Types of cards
purpose.
Connector Card
From the Office connector framework
Adaptive cards
For more extensive layout control and the ability to handle forms inline

Types of cards
purpose.
Sign in
Some services require users to sign in independently of our authentication.
In that event, you would present a sign-in card before the user can
connect to your service.

Card collections
We also have standard card types that are best used when you want to present several pieces of content at once or in quick succession. For that
purpose, we have a carousel, a digest, a list, and what we call a ‘bubble merge’.
Carousel
Best used for articles, shopping, and browsing through cards.
Digest
Best used for news, digests, and whenever you want the user to view
multiple cards at once. We recommend using thumbnail cards for digests.

Card collections
We also have standard card types that are best used when you want to present several pieces of content at once or in quick succession. For that
purpose, we have a carousel, a digest, a list, and what we call a ‘bubble merge’.
Lists
Lists are a great way to present a scannable set of objects in a “pick one of
these” scenario. Lists are best used for items that don’t need a lot of
explanation.
Bubble merge
Some interesting effects can be achieved by sending one hero and several
thumbnails in quick succession. We recommend this approach when you
want to serve a main result but include a few more related items.

PRO TIP There’s no need to include every element in each card you create. Let your content dictate your elements.
Best Practices
Keep the noise down
It’s easy to send multiple cards into a conversation, but once cards scroll out of view, they become less useful. Try to limit yourself to the essentials. This is
especially true in a channel where users have less tolerance for what they perceive as “noise”.
Test on mobile
Mobile environments are space- and bandwidth-constrained, so be cautious about including oversized images and large data sets in lists and carousels. Also,
title widths and text lengths will truncate on mobile, so that’s another thing to keep an eye on.
Check your graphics
Graphics are going to scale, so be sure to preview them on all platforms.
Avoid including text in a graphic
Anything that needs to be read by a user should be included in a text field. Once an image is dynamically scaled, any text you add to a graphic may become
unintelligible.

Getting started Framework Components ResourcesTask modules
When a card isn’t enough
Task modules let you open a dialog. When you need
to do a little form entry, a lookup, or keep an
interaction out of a channel, pop open a dialog.

Instead of multi-turn experiences
Conversational bots asking questions for all the required fields in a “Make a
meeting” flow is tedious. Pop up a task module with a form to fill out
instead of asking lots of questions in a chat
When there is validation or lookup
Adaptive cards are great but when you need validation, or form elements
that appear based on a previous selection like “Year, make, model” chained
fields you need to use a task module to keep an open channel to your
service.
When you need more room
Task Modules can be displayed in a variety of sizes. When you need a little
more room to make your point or get things done.
A quick 1:1 experience in context
Showing an app tour in a channel is handy. Doing it without bothering
everyone else is a snap if you host yours in a task module.
Guidelines
Task modules provide an immersive experience to get a specific task done

Task modules come in two flavors
For a simple form interaction host an adaptive card. For more complex interactions like search or looking up a user you can host your UI in an iframe.
Task modules can be opened from cards or tabs.
Adaptive card forms
We’ll strip the card border and make it feel like a native dialog. Mobile
views will be responsive and pick up themes automatically.
Iframe
For lookups or validation, host your own. Make sure to check your work on
themes and on mobile and use our theme aware script in the page.

PRO TIP Every good dialog has a call to action. Tell the user what you want them to do in the title.
Best Practices
In a channel
Use task modules to have a 1:1 interaction with a user. Task modules keep you from cluttering the channel with unnecessary bot responses and avoids
redirecting the user to a 1:1 chat and losing context.
Test on mobile
While adaptive cards hosted in a task module render well on mobile, if you choose to create custom HTML it will need to use our CSS to handle theme
changes and responsive to handle the difference between desktop and mobile screen real estate.
Short interactions
You can easily create multi-step wizards but holding a user in a task module can be problematic as incoming messages encourage users to exit. Pop out to a
web page instead of a task module if your task is really involved or time consuming.
Errors
Keep errors inline. Don’t pop a dialog on top of a dialog.

Getting started Framework Components ResourcesMessage actions
Users can send a message to
your app
The starting place is a conversation. Let users send text to
your app and you can use it to create new things, add to
existing entities

Send clear text directly
Users can add message text to an entity on your service is easily. For
instance adding a message to a notes field on a
Run incoming text through NLP
Natural language processing can help extract entities in text and provide
meaning or more precise actions based on the incoming text
Describe the action concisely
Your icon will show up in the menu accompanied by your task name. Take
time to label the action in short easy to understand terms.
Guidelines
Use message text as a starting place for rich actions
NLP
Service

Getting started Framework Components ResourcesMessage Actions
Select, send, manipulate
Send text to your app
The message text gets sent to your action from the overflow menu. You
can expand the selection to surrounding messages using the graph.
Take advantage of a task module for custom interactions
Once you have the text and have processed it, invoke a task module to
allow further interactions or just to confirm the acton.

PRO TIP Start with the basics. Sending conversations with timestamps to your entities with no extra processing can be valuable.
Best Practices
Simple action names
Keep the name short, a couple of words at most.
Use a task module
Allow some control over the action by exposing it in a task module or just open it to confirm that the action was completed
Try using Natural Language Processing
NLP can help your service listen for keywords or synonyms to your entities.
Try using graph queries too
Once you are manipulating text sent by users you can take advantage of MS Graph to get more context. There are additional permissions required to do so
and you’ll need to inform the user.

Getting started Framework Components ResourcesActivity Feed
Initiate quick, easy
communication
Your notifications appear in someone’s activity feed
right next to all the other notifications about their new
@mentions, likes, and replies. There are many ways to
use the activity feed to communicate information about
your service or about a user’s content. Here are some
ideas about the kind of notifications you can send to
someone’s activity feed, depending on what your
service does.

Notifications
The activity feed is a great way to communicate with your audience. You can use it to tell people about recent updates or send important notifications.
For example, if your app focuses on task management, you can send a notification to someone’s activity feed whenever they receive a new task.
Notifications in the activity feed will show up on someone’s desktop app and their mobile app, which helps draw attention to important information.
Task list
A single notification that is part of a larger, ongoing list. For example, if
your app deals with task management, you can publish a notification to
someone’s activity feed whenever they receive a new task or when
someone else updates an existing task.
Updates
A single notification that lets a user know that something has been
updated or edited. For example, if your services helps people manage their
files, you can allow a user to “follow” a file to receive notifications
whenever the file is modified.

Notifications
The activity feed is a great way to communicate with your audience. You can use it to tell people about recent updates or send important notifications.
For example, if your app focuses on task management, you can send a notification to someone’s activity feed whenever they receive a new task.
Notifications in the activity feed will show up on someone’s desktop app and their mobile app, which helps draw attention to important information.
Reminder Service
A notification that alerts someone about an important date (a due date or
a meeting, for example). If your app is a time-sensitive reminder service,
consider using the activity feed as your primary way of sharing those
reminders.
Sender – Usually the name of your app.
Avatar – Your app’s avatar or icon.
Timestamp – An indication of when your notification was sent
Subject – This is included for notifications about chats.
Message Preview – A short preview of the message content.

PRO TIP Be careful about how often you send notifications. People can mute notifications in Teams, and they’ll be more likely to do so if your
service seems ‘noisy’.
Best Practices
Keep it short
Make sure to keep things concise because longer messages get truncated.
Bundle your notifications
If your service regularly sends a lot of simultaneous notifications, try grouping them into a single notification. For example: “30 tasks were assigned
to you”.

Getting started Framework Components ResourcesPersonal Apps
Bringing it all together
A personal app can bring your entities from all
the channels in Teams into a unified view for the
user. They combine all the framework elements
we’ve talked about into one place for the user to
get things done .

Getting started Framework Components ResourcesPersonal Apps
Guidelines
A great personal app can have the following elements.
Conversation – A 1:1 interaction between the user and your bot
My Tasks – This can be a purely personal view or an
aggregation of the user’s tasks in multiple channels
Recent – Don’t just focus on assignment or creation data, what
has the user been looking at recently
All tasks – Create an area to show all the containers or usage of
your product that the user has access to
Help – a good app has help content. While we all try to make
our services so good our customers won’t need help, there is
always something that can use explanation.

Getting started Framework Components ResourcesExamples
Things you can start building right now
Have a conversation about
work items
A tab with a list of work items it is
easy to talk about what to do next
and make sure everyone is working
on the same project
Find and share a class
activity
Use a message extension to find
and share a class activity with a
great summary and instructions for
your students
Notify users about changes
in tasks
Message specific people or call
attention to entire channel
about changes in assignments
or status of tasks
View all different team
tasks in one place
Personal apps create one place
to see all the different things a
person needs to do regardless
of which team has created the
work

Getting started Framework Components ResourcesExamples
Look up a place to eat, just
for yourself, or share it too
Access your service from
anywhere without missing a
beat.
Convert a chat to a sales
opportunity
Use the power of the graph and let
users send chats to your app to get
things done
Create a team, add
members, and a message
Onboard users on your project
the easy way.
Things you can start building right now
eam
one place
things a
gardless
ated the

Have a conversation about work items
Tabs
When your app needs a large
area to present information to
users a tab is a great place to
show a list of work items or a
dashboard

Tabs
dashboard
Chat in context
Users can chat about your page,
interact with it and draw people’s
attention to important
information all in one place

Tabs
dashboard
Chat in context
Users can chat about your page,
interact with it and draw people’s
attention to important
information all in one place
Post tab threads
Conversations within the tab will
be posted in the team’s channel
and promote your tab

Share a sales report
Message extensions
Search for or show recently
viewed reports.

Message extensions
viewed reports.
Compose with card
Add comments and @mention
the people who need to see the
information.

Message extensions
viewed reports.
Compose with card
Add comments and @mention
the people who need to see the
information.
Share to team
Now everyone can see the
summary, open a link to your
content or take immediate action
right from the chat.

Submit a social media post for approval
Social media dashboard
A great view of my company’s
social media engagement and
how we are trending

how we are trending
Submit a post for approval
Approval workflows get routed
to the right team for quick review
and automated posting to your
corporate social media accounts

how we are trending
Submit a post for approval
Approval workflows get routed
to the right team for quick review
and automated posting to your
corporate social media accounts
Notify the right team
Approvals are easier when no
one person is a bottleneck. Route
requests that are actionable
without leaving your working
environment. Approve from your
desktop or on the go.

Customize approval notifications
Start a workflow from a bot
or a tab
Use a Task Modal or an adaptive
card to trigger your workflow.

or a tab
card to trigger your workflow
Bundle notifications
When your flow is less time
sensitive your app can send a
digest of notifications instead of
interrupting your users with
every request.

or a tab
card to trigger your workflow
Bundle notifications
When your flow is less time
sensitive your app can send a
digest of notifications instead of
interrupting your users with
every request
Let your users have control
A customized app is an app with
user investment. The task modal
on the left can be easily built by
hosting an adaptive card

Your “task” hub
The Development channel
has some tasks for Daniella
This is a project with specific
goals and work items.

Your “task” hub
goals and work items
The Marketing channel is in
another team
But Daniella has things she needs
to do here too.

Your “task” hub
goals and work items
The Marketing channel is in
another team
But Daniella has things she needs
to do here too.
Personal apps can create a
unified view
Daniella will likely start her day
here, and it’s a great place to see
all the work she has to do in one
place… with handy links to take
her to the channels where she
needs to collaborate

Find a restaurant
Find a restaurant without
losing your place
@mentioning your app in the
command box gives users global
access to your app, while they
are anywhere in teams.

Find a restaurant
losing your place
Search with one or more
parameters
You can make your app
incredibly powerful with single
parameter or multi parameter
queries, and even default queries
you save for everyone or per
user.

Find a restaurant
losing your place
Search with one or more
parameters
You can make your app
incredibly powerful with single
parameter or multi parameter
queries, and even default queries
you save for everyone or per
user.
Share
Users can get the information
they need and get back to work
or share your card with others.

Convert chat to a sales opportunity
Message actions
Your users can send chats to your
service and include time, sender
information, text and if you use
graph chats above and below the
selection for additional context.

Message actions
Tasks where the
conversation is happening
Create one or more actions that
appear in our context menus.

Message actions
Tasks where the
conversation is happening
Create one or more actions that
appear in our context menus.
Confirm with a task module
Keeping the user in control but
using natural language
processing to extract the words
you need to get the job done
quickly and intelligently.

Onboard a team
Kicking off a new project
can be easier
Using Teams templates and your
app you can automate the
onboarding process.

Onboard a team
can be easier
onboarding process.
Simplify known workflows
Select users who will be team
owners vs team members to
comply with access and role
limitations, pick documents in
your service or on SharePoint to
add to the mix. Add a welcome
message.

Onboard a team
can be easier
onboarding process.
Simplify known workflows
Select users who will be team
owners vs team members to
comply with access and role
limitations, pick documents in
your service or on SharePoint to
add to the mix. Add a welcome
message.
Bot notification
In the new team we start the
project knowing what we are
doing and where everything is.

Thanks!
Microsoft Teams wants to hear your feedback!
If you would like to participate in future
Microsoft Teams research, please sign up
using the link below.
Your privacy is important to us, and we will
never share your information.
URL: https://aka.ms/MSTeamsResearch

Let’s Build one

Getting started Framework Components ResourcesProblem Statement
Michael is always getting
asked to do things in chats.
Managing all these requests is taking up a lot of
time, it’s frustrating not to be able to share
priorities with people requesting work.
It’s not just what he’s working on its where your
stuff in his priorities.
MB Hey dude, I need a logo. Can you bang one out
and send it to me by lunch?

Microsoft Teams community call-September 2019

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Microsoft Teams community call-September 2019

Similar to Microsoft Teams community call-September 2019 (20)

More from Microsoft 365 Developer

More from Microsoft 365 Developer (20)

Recently uploaded

Recently uploaded (20)

Microsoft Teams community call-September 2019

Editor's Notes