►
From YouTube: PnP Virtual Conference - 09/2020 - Implementing customizations for Microsoft Teams with Azure PaaS
Description
Microsoft Teams is the ultimate tool for modern workplace collaboration, and developers have the power to make people's daily lives even more productive through Microsoft Teams customizations! We can bring content where it is needed the most, and reduce the time it takes to perform frequent tasks from minutes to seconds. For example, wouldn't it be great to be able to just click on a Teams message and have an option to add it as a new task in Microsoft To Do?
If that got you all hyped up, this is the session for you! Learn how you can create Teams tabs, bots, messaging extensions, webhooks, and connectors by utilizing the Azure PaaS services, and how to further enrich these customizations with adaptive cards and notifications.
In addition to the technical knowledge, you'll also get some exciting solution ideas to take back home and suggest to your customers. The goal of this session is to make it as easy as possible for you to start developing customizations for Teams from the technical perspective, and spark up some great development ideas to get you started.
Speaker: Laura Kokkarinen (Sulava) | @LauraKokkarinen
Supporting materials:
• How we can extend Microsoft Teams with custom apps - https://laurakokkarinen.com/how-we-can-extend-teams-with-custom-apps-the-non-technical-explanation/
• What is PaaS? - https://azure.microsoft.com/en-us/overview/what-is-paas/
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices (PnP) community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
Hey
and
welcome
to
this
session
about
implementing
customizations
for
microsoft
teams
using
azure
paths
services,
my
name
is
larkov
karnen.
I
work
as
a
senior
developer
and
a
solutions
architect
at
sulawar
in
finland,
and
I'm
currently
focused
on
implementing
solutions
on
microsoft
cloud,
namely
azure,
microsoft,
365
and
the
power
platform,
I'm
also
a
microsoft
mvp
in
the
office
development
category,
and
if
you
would
like
to
follow
me
on
social
media,
you
can
find
me
on
all
of
the
platforms
by
my
name
and
in
this
session.
A
I
want
to
answer
to
a
few
questions
and
they
are
why,
and
when,
should
we
excellent
teams?
What
are
the
different
app
types
and
the
extension
points
that
we
can
use
and
how
does
azure
platform
as
a
service
relate
to
all
this?
Let's
get
this
show
on
the
road,
I
think
at
the
moment
a
lot
of
people
haven't
realized.
The
potential
teams
has
as
a
development
platform.
A
When
people
need
to
implement
some
kind
of
a
new
application.
They
just
do
what
they've
always
done
and
implement
the
functionality
somewhere
else,
but
don't
you
think
it
would
be
such
a
shame?
If
teams
actually
was
the
most
beneficial
place
for
having
that
functionality
and
that
people
don't
implement
teams
applications
just
because
they
don't
know
what
can
be
done,
especially
when
the
information
we
need
for
performing
a
certain
task
is
already
being
processed
in
teams.
It
would
just
be
an
extra
step
if
we
were
to
take
that
information
somewhere
else.
A
I'm
hoping
that
the
more
we
educate
each
other
about
the
possibilities
teams
offers
for
application
development.
It
will
become
much
more
popular
amongst
customers.
We
can't
customize
teams
in
just
any
way.
We
please.
However,
it
works
in
a
very
similar
manner
to
the
modern
sites
on
sharepoint
online.
There
are
extension
points
that
allow
us
to
insert
custom
content
and
behaviors
to
enrich
the
core
product.
A
The
different
types
of
apps
are
available
at
different
extension
points,
and
in
this
session
we
will
go
through
what
are
tabs
ports,
messaging
extensions
and
web
hooks
how
they
work
and
are
implemented
and
which
extension
points
they
can
be
used
tabs.
Allow
us
to
add
new
views
to
teams.
They
are
our
most
broad
option
for
editing
the
user
interface.
As
you
can't
extensively
modify
how
teams
looks
outside
of
them,
tabs
typically
work
in
the
context
of
a
team,
you
can
add
them
to
a
channel
and
they
appear
as
a
tab.
A
There,
the
same
way
as
posts
and
files
do
normally
behind
the
scenes.
Tabs
are
basically
web
pages.
If
you
can
imagine
something
you
would
like
to
get
done
as
a
web
page,
it
can
be
brought
into
teams
as
a
tab.
The
same
applies
to
already
existing
web
pages.
So
if
you
have
a
website
for
doing
something-
and
you
would
just
like
to
bring
it
closer
to
the
user
in
teams,
it's
merely
a
matter
of
configuration
to
make
that
happen.
A
A
natural
place
for
hosting
your
tab
is
in
azure
there.
You
will
need
to
create
a
web
app
and
with
that
comes
an
app
service
plan
and
those
are
the
two
basic
resources
you
need
for
setting
up
a
tab
in
azure.
So
you
see
a
tab
is
just
a
web
page
or
a
website
hosted
somewhere
else
in
this
case
azure,
and
it
is
brought
into
teams
by
linking
to
that
website
in
a
configuration
file
called
the
manifest.
A
The
zip
file
is
then
installed
to
the
teams
app
catalog
and
you
never
install
any
code
or
binaries
into
teams.
You
only
upload
the
manifest
file
and
the
two
logo
images
and
the
code
always
leaves
somewhere
else,
and
you
just
link
to
that
web
application
from
that
app
manifest
in
teams,
and
this
is
how
it
works
for
all
of
the
different
application
types
in
addition
to
creating
standalone
web
applications
and
hosting
them
in
azure.
You
can
also
create
tabs
by,
for
example,
creating
an
spfx
web
part
or
a
powerapp.
A
The
webpart
is
hosted
in
sharepoint
and
the
powerapp
is
hosted
in
the
powerapp
service
or
whatever
that's
called.
Then,
let's
move
on
to
bots
bots
allow
users
to
trigger
background
operations
in
a
conversational
manner.
A
bot
can
potentially
be
triggered
via
all
the
different
types
of
conversations.
A
A
In
this
example
picture,
when
the
user
clicks
on
the
new
request
button
or
types
in
new
request
to
the
chat,
the
builder
proceeds
to
offer
the
user
a
formed,
fill
at
the
core
of
the
bot
is
a
background
web
service
which
does
the
actual
work
behind
the
scenes.
So
when
a
user
talks
to
the
bot,
the
user's
message
is
sent
to
the
background
service,
which
then
does
something
basically
anything
you
want
to
do.
A
Based
on
that
message,
and
after
doing
whatever
we
want
the
background
process
to
do,
the
bot
can
send
a
response
back
to
the
user
in
teams,
and
this
whole
background
service
can
be
coded
precisely
the
way
we
want
it,
and
the
bot
is
basically
just
our
way
of
triggering
that
background
process
for
creating
bots.
You
want
to
create
a
web
app
bot
in
azure,
which
basically
gives
you
three
resources:
the
bot
service,
a
web
app
and
an
app
service
plan.
A
When
you
initially
create
the
web
app,
it
gets
created
with
the
s1
app
service
plan,
but
you
can
immediately
after
creation
downgrade
it.
So
you
don't
need
to
pay
a
lot
of
money
for
running
the
web
application,
while
you're
developing,
of
course
for
production.
That's
another
thing.
This
is
just
something
that
you
need
to
remember
to
do,
especially
if
you
don't
have
any
free,
azure
credits
at
your
developer
tenant.
Now,
let
me
show
you
a
demo
of
what
I
just
told
you.
A
A
A
We
just
click
on,
save
and
agree
to
these
terms
and
that's
it.
Then
I've
already
created
a
folder
in
my
desired
location
for
this
new
bot
project
and
I've
previously
installed
this
your
teams
generator
on
my
machine.
So
I'm
just
going
to
run
this
command
your
teams.
The
generator
will
ask
me
a
bunch
of
questions
and
then
generate
the
project
structure
for
me
and
then
I'm
able
to
continue
from
there
development
by
using
typescript
yeah.
This
folder
name
is
totally
sufficient.
As
my
solution
name,
I
want
to
use
the
current
folder.
A
A
A
For
us,
it's
going
to
take
a
couple
of
minutes.
Okay,
now
the
project
has
been
generated
and
let's
hit
code,
dot
to
open
visual
studio
code.
First,
let's
go
to
the
environment
file
and
add
the
application
secret
or
client
secret
that
we
created
earlier
over
here
and
click
save.
Then
we
want
to
run
a
bunch
of
commands
like
cop
build.
A
A
A
Here's
normally
our
app
web
app
url
but
for
debugging
purposes
we're
going
to
change
that
to
the
ncroc
url
and
then
another
thing
we
need
to
do
for
debugging
is
to
go
to
teams
and
then
apps
and
upload
a
custom
app
and
what
we're
going
to
upload
here
is
this
zip
file
that
we
generated
with
the
gob
manifest
command
and
that's
it.
We
click
on
that
and
click
add,
and
it
will
open
the
bot
now
it
has
this
help
command.
A
A
Here
so
these
are
basically
the
bot
events
on
message
on
conversation,
update
and
on
message
reaction,
and
inside
these
you
add
your
code
to
do
whatever
you
want
to
do,
and
here
we
can
see
that
when
the
context
activity
type
has
been
messaged
and
the
content
has
been
helped,
then
it
will
create
this
dialog,
which
is
here.
The
bot
also
knows
how
to
do
some
other
things
like
respond
to
hello,
and
then
it
apologizes,
if
you
try
anything
else,
so,
let's
give
that
a
go.
A
A
And
then,
if
I
like
one
of
the
messages,
then
it
will
react
to
that.
So
let
me
just
demo
that
so,
let's
like
it
there
we
go
so
yeah.
That's
basically
what
you
need
to
do
to
set
up
a
bot
for
debugging
and
when
you
are
done
with
your
application
development,
then
you
update
the
url
back
to
your
web,
app
url
and
publish
your
code
to
the
web,
app
that
we
have
here.
A
The
classic
bot
scenarios
also
use
all
the
azure
services,
such
as
those
under
cognitive
services
and
yep.
You
quite
often
will
also
use
other
azure
services,
in
addition
to
just
the
web
app
and
the
bot
service.
But
what
services
you
need
to
use
always
naturally
depend
on
the
specific
application
requirements
that
you
have.
A
A
To
sum
it
up,
bots
are
excellent
when
the
task
feels
the
most
natural
to
perform
in
a
conversational
manner.
You
shouldn't
necessarily
use
bots,
just
because
they're
cool,
but
you
know
think
about
what's
the
natural,
the
most
natural
way
for
the
user
to
perform
a
certain
task
and
sometimes
spots
can
be
the
most
natural
way.
A
They
can
be
good.
Also,
when
you
want
to
create
this
kind
of
a
chat
relay
application
like
in
these
pictures,
where
the
user
is
talking
to
the
bot
and
the
bot
is
relaying
the
message
to
a
team
where
any
team
member
can
respond
to
the
user.
The
same
approach
could
be
used
in
a
web
chat
situation
where
a
customer
would
be
talking
to
the
web
chat.
A
Bot
and
the
employee
could
receive
the
messages
and
reply
to
them
from
teams,
and
it
also
offers
us
a
chance
to
keep
both
the
users
anonymous
if
we
want,
because
both
of
them
are
just
talking
to
the
bot,
and
we
don't
necessarily
need
to
reveal
the
user's
identities
could
be
useful
in,
for
example,
feedback
or
support
support
scenarios.
If
users
are
afraid
of
bringing
up
some
topics
with
their
own
name
or
we
don't
want
users
to
contact
individual
support,
team
members
directly,
for
example,
and
finally,
bots
are
also
the
way
to
go.
A
If
you
want
to
create
a
personal
incoming
web
hook
for
notifications,
because
the
normal
incoming
web
hooks
are
only
available
within
teams.
I'll
tell
you
a
little
bit
more
about
incoming
web
books
later
then
personal
applications,
in
addition
to
having
bots
and
tabs
on
channels.
You
can
also
pin
both
these
app
types
to
the
left-hand
navigation.
A
When
you
do
this,
they
are
called
personal
apps.
Personal
apps
are
basically
apps
outside
of
the
team
context.
Hence
they
are
called
personal,
a
user
can
use
them,
regardless
of
what
teams
they
belong
to,
and
they
are
a
great
way
to
easily
offer
a
tab
or
a
bot
to
a
large
number
of
users
who
can't
belong
to
any
one
team.
How
they
work
is
that
the
custom
app
icon
is
pinned
to
the
left
hand,
navigation,
the
same
way
as
chats
teams
etc
normally
are,
and
the
less
frequently
used
applications
can
be
found
behind
three
dots.
A
A
App
setup
policies
in
the
team's
admin
center
to
compare
channel
tabs
are
good
when
you
want
to
show
content
that
is
related
to
the
team
or
the
channel
where
the
tab
is
added
and
personal
tabs
are
good
when
you
want
the
view
to
be
easily
accessible,
regardless
of
which
teams
the
user
belongs
to,
and
the
displayed
content
is
not
related
to
any
team
level
activities.
But
is
more
independent
and
the
benefits
of
having
a
bot
as
a
personal
app
is
the
esc
discoverability?
A
It's
a
lot
quicker
to
find
the
bot,
in
the
left
hand,
navigation
compared
to
going
to
the
chats
and
scrolling
through
all
the
different
recent
conversations
to
find
the
bot
conversation
that
you
had
earlier
then
messaging
extensions
behind
the
scenes.
Messaging
extensions
work
in
a
very
similar
way
to
bots,
there's
a
background
service,
that's
triggered
by
teams,
and
then
it
does
something
and
then
possibly
sends
a
response
back
to
teams.
A
A
I'll.
Tell
you
a
little
bit
more
about
this
later.
You
can
use
the
task
module
to
collect
additional
information
from
the
user
before
sending
the
data
to
the
background
service
for
processing.
In
this
example,
picture
clicking
on
the
add
a
to-do
action
would
first
open
a
pop-up
where
the
user
would
specify
the
title
and
dates
for
task.
A
In
addition
to
using
the
azure
services,
you
can
these
days
also
create
messaging
extensions
for
that
more
actions
menu
by
using
power
automate
for
that
they
are
extremely
easy
to
do.
For
me,
it
took
just
five
minutes
to
make
that
added
to
do
messaging
extension
with
power
automate.
I
highly
recommend
that
you
go
and
first
check
if
you
can
easily
implement
what
you
want
to
do
with
power
automate
before
you
start
coding
your
messaging
extension
from
scratch.
By
the
way.
This
is
quite
a
new
feature.
A
So
if
you
are
just
looking
for
a
simple
way
of
integrating
an
existing
external
system
to
teams,
then
webhooks
can
offer
you
a
very
quick
and
easy
solution
to
that.
There
are
three
different
types
of
web
hooks
outgoing
web
hooks
for
sending
a
message
from
teams
to
an
external
system
incoming
web
hooks
for
sending
a
message
from
an
external
system
to
teams
and
then
connectors,
which
are
basically
productized
incoming
web
books
by
you,
microsoft
or
third
parties.
A
A
The
difference
is
that
when
you
send
the
message
it
will
go
directly
to
the
external
system
or
service,
for
example
your
hr
system.
The
external
service,
then
does
something
based
on
the
message
and
can
even
reply
back
to
the
user
in
teams.
This
reply
message
can
even
be
shown
as
an
adaptive
card
if
desired
I'll.
Tell
you
a
little
bit
more
about
adaptive
cards
a
bit
later.
This
means
that
you
can
offer
a
bot-like
user
experience,
but
still
the
user
is
merely
talking
to
an
existing
system
or,
for
example,
an
azure
function.
A
It's
excellent!
If
your
external
system
already
offers
the
url,
where
you
can
send
the
message
and
knows
how
to
process
it
and
even
send
a
message
back
into
teams
in
the
format
that
you
want.
However,
it
is
more
likely
that
all
the
required
functionality
does
not
yet
exist,
and
in
those
cases
it
needs
to
be
implemented
which
falls
down
to
the
organization
who
offers
this
external
system
and
its
application
programming
interfaces.
A
A
In
that
case,
you
would
not
be
using
a
web
hook
but,
for
example,
a
bot
from
teams
for
relaying
that
message
between
teams
and
the
external
system.
You
could
then
perform
those
additional
operations
regarding,
for
example,
message
formatting
in
your
bot,
instead
of
them
having
it
to
be
implemented
in
the
external
application.
A
Azure
functions
are
also
cheaper
than
running
a
web
application.
So
that's
also
one
thing
you
might
want
to
consider
incoming
web
hooks
work
in
the
opposite
way
to
outgoing
web
hooks.
They
allow
an
external
system
to
send
information
to
teams
channels,
it's
very
straightforward,
to
add
an
incoming
web
hook
to
a
channel.
A
You
basically
just
add
the
incoming
webhook
app
to
the
team
and
then
specify
which
channel
you
want
to
add
it
to,
and
what
do
you
want
to
call
it
or,
alternatively,
you
can
click
on
the
connectors
for
the
channel
that
opens
the
same
menu.
You
can
also
optionally
upload
an
image
as
its
icon
upon
creation.
You
will
receive
the
url
address
where
the
external
system
needs
to
send
their
messages
for
them
to
appear
on
that
team's
channel.
That's
all
there
is
to
it
on
team's
side.
A
However,
some
code
changes
might
need
to
be
made
to
the
external
system
for
it
to
construct
and
send
messages
to
that
url
incoming
web
hooks
are
useful
when
an
external
system
already
exists.
We
only
need
to
add
a
small
piece
of
code
there
to
have
it
send
messages
to
the
channel
url,
but
keep
in
mind
that
incoming
web
hooks
can't
be
added
to
one
to
one
or
group.
Chats
and,
as
I
mentioned
before,
connectors
are
just
productized
incoming
web
hooks.
They
can
either
have
been
created
by
you,
microsoft
or
a
third
party.
A
A
They
can
be
used
from
bots
messaging
extensions
web
books
from
all
the
different
kinds
of
apps
that
allow
us
to
send
messages
to
chats
and
channels.
They
allow
us
to
define
the
structure
of
the
message.
What
info
to
show
in
which
order
in
what
format?
And
it's
also
possible
for
us
to
include
buttons
and
links
in
the
messages
that
the
user
can
then
click
for
further
actions.
A
A
There
are
also
different
kinds
of
adaptive
card
templates
available
online
that
you
might
want
to
check
out.
First
before
you
start
from
scratch.
Adaptive
cards
are
good
when
you
want
to
show
a
chat
or
a
channel
message
in
a
certain
format,
or
you
want
to
offer
the
user
buttons
for
quickly
performing
additional
tasks.
A
A
The
key
things
to
identify
before
implementing
teams
apps
are:
do
we
want
to
display
information
or
trigger
a
background
process
or
both
what
place
in
teams
feels
the
most
natural
for
the
user
to
view
information
or
trigger
the
process?
And
what
technologies
do
you
want
to
use?
Do
you
feel
more
comfortable
with
some
technology
or
language,
or
do
you
perhaps
want
to
go
outside
of
your
comfort
zone
and
learn
something
completely
new?
A
A
When
you
proceed
to
design
or
implement
your
actual
app,
you
might
also
realize
that
you
need
to
look
into
some
other
azure
services
as
well.
When
it
comes
to
languages
we
can
use
when
we
develop
these
apps
to
be
run
on
azure,
I
would
say
that
look
into
typescript
with
your
teams
for
implementing
the
tabs
there's
the
fluent
ui
react
npm
package
included
in
the
project,
and
it
allows
your
tab
to
have
the
team's
kind
of
look
and
feel
you
can
use
the
typescript
and
your
teams
for
bots
and
messaging
extensions
as
well.
A
But
if
you
are
more
familiar
with
c-sharp,
you
might
want
to
rather
use
visual
studio
with
the
new
microsoft
teams.
Toolkit
that
offers
teams
app
project
templates
that
was
just
released
this
summer,
so
make
sure
to
check
it
out.
At
some
point,
you
will
also
need
to
get
and
learn
to
use
a
tool
called
ncrock
for
debugging
your
bots
and
messaging
extensions,
and
here
are
the
other
technology
options
that
I
mentioned.