►
Description
This tutorial will guide you on how to build Search Messaging Extensions for Microsoft Teams using the Microsoft Teams Yeoman generator (yo teams).
Demo presenter: Bob German (Microsoft) | @Bob1German
Resources:
• More on the Teams Yeoman Generator: http://aka.ms/yoteams
• Build your First Microsoft Teams App - https://docs.microsoft.com/en-us/microsoftteams/platform/tutorials/get-started-yeoman
• Learn more about the Microsoft 365 developer community at: http://aka.ms/m365pnp
A
Hi
this
is
Bob
Sherman
in
this
video
I'll
show
you
how
to
create
a
search
messaging
extension
for
Microsoft
teams
using
the
yo
team's
yeoman
generator.
So,
let's
start
by
reviewing
what
messaging
extensions
are
messaging
extensions,
allow
applications
to
extend
the
menus
and
the
command
box
in
Microsoft
team.
So
you
can
see
here
number
one
is
the
compose
box.
A
When
users
are
typing
messages,
they
can
click
there
to
add
data
from
your
application
into
the
message
that
they're
composing
number
two
allows
users
to
take
action
on
messages
and
teams
and
send
them
to
your
application
and
number
three
is
the
command
box
which
can
work
with
both
search
and
action.
Messaging
extensions
in
this
video
I'll
show
you
how
to
build
a
search
messaging
extension
that
searches
the
Northwind
database
now
in
Microsoft
team's
messaging
extensions
hitch,
a
ride
on
the
bot
infrastructure.
A
So
when
a
user
clicks
on
a
messaging
extension
teams
sends
an
invoke
activity
across
a
Shabbat
services
channel
which
handles
a
lot
of
things
like
security
and
routing
of
the
message,
and
eventually
the
invoke
activity
ends
up
at
your
bot,
which
is
a
web
service
which
could
be
implemented.
Almost
anywhere-
and
in
this
case,
if
the
messages
are
going
to
be
queries
and
that
I
will
then
make
to
the
Northwind
data
service
that
is
publicly
hosted
on
the
Internet,
so
let's
get
started
so
of
course,
I'm
going
to
begin
by
typing.
A
Yo
teams
and
I'll
give
my
app
a
name
decide
where,
to
put
it
a
couple
more
details
and
I'm
gonna
go
with
version
1.5
of
the
app
manifest
and
I.
Don't
need
a
tab,
but
I
am
going
to
add
a
messaging
extension
and
I'm
gonna
host
this.
Just
with
my
end,
Rock
URL
I've
already
registered
a
bot
against
that
URL
and
I'll
skip
the
test
framework
and
app
insights
for
this,
because
it's
just
a
demo
I
am
going
to
ask
the
yeoman
generator
to
build
a
new
bot.
A
The
code
for
the
bot
and
I'll
skip
putting
in
the
app
ID
for
now
and
I
get
a
choice
between
a
search
or
an
action
based
messaging
extension.
So
I'll
do
the
search
and
now
I
will
say,
go
ahead
and
make
a
settings
option.
I'll
show
you
what
that
does
in
a
minute
and
give
a
couple
of
little
details
about
that
and
sped
up.
Incredibly
okay,
now
I'm
going
to
go
into
visual
studio
code
and
first
I'm
gonna
work
on
the
manifest.
So
I've
already
made
some
changes
here.
A
So
I've
added
the
name
for
my
for
my
app
and
some
other
details
here.
The
description
and
I
also
went
in
and
changed
the
the
details.
The
name
of
the
compose
extension
is
a
messaging
extension
in
the
manifest,
so
I've
changed
some
filled
in
a
little
bit
more
information
right
there
and
now
what
I
can
do
is
go
back
to
the
command
line
and
type
gulp
manifest,
and
what
that
will
do
is
build
the
zip
file
to
build
the
little
application
package
which
I
can
now
upload
into
Microsoft
teams.
A
Ok
and
there
we
go
so
let's
see
what
this
does
out-of-the-box
all
I've
changed
is
the
icon.
I
really
didn't
change
the
code
at
all,
yet
so,
in
fact
the
code
won't
run
until
I
do
one
other
thing.
I
need
to
fill
in
my
bod
ID
and
bot
secret,
and
so
I
end
my
end
grok
URL.
So
I've
already
done
that
here,
but
I
wanted
to
show
you.
Let
me
pop
back
in
to
the
command
line
and
gulp
serve.
A
Is
the
command
to
just
run
this
thing
locally
debug
would
add
the
debugger
support
for
visual
studio
code
if
I
needed
that
and
now
let
me
come
in
and
actually
test
this
thing,
and
you
can
see
that
it
actually
has
a
little
pre-built
card
in
here
that
I
can
inject
into
the
conversation.
Okay,
so
not
unlike
a
cooking
show.
Let
me
show
you
the
finished
product
here,
so
suppose.
A
Hey
this
folks
are
working
on
P
and
P.
That's
great.
In
addition,
the
yeoman
generator
actually
created
a
settings
configuration
page
for
me,
so
this
doesn't
really
do
anything.
I'd
have
to
do
some
more
coding
to
add
functionality
here,
but
it's
great
that
the
yeoman
generator
actually
generated
this
webpage
for
me
and
that
it's
actually
working
on
both
the
client
side
and
the
server
side,
so
that
I
can
add
this
configuration
page
to
the
very
same
project
where
my
messaging
extension
is
running.
A
I
almost
forgot
to
show
you
the
command
bar
experience,
so
if
I
add
mentioned
the
the
application,
I'll
get
all
those
customers
again
and
once
again,
I
can
filter
it
down
and
get
to
the
information
about
one
of
the
customers
and
get
all
the
details.
So
a
quick
peek
at
the
code.
This
is
the
main
core
of
what
I
changed
from
the
yeoman
generated
code.