►
Description
In this 15-minute Developer focused demo, Garry Trinder orients you to see how the JS library can be used to add native Teams functionality into your applications. Install the library, note how APIs are grouped by capabilities that access functionality within Teams, initialize library, explore usage of capabilities – specifically context and chat. In demo, step through adding Teams chat to an app with a few lines of JS code. Fourth installment in a 5-part series.
This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 21, 2023.
Demo Presenter
• Garry Trinder (Microsoft) | @garrytrinder
Supporting materials
• Training - Build and deploy apps for Microsoft Teams using Teams Toolkit for Visual Studio Code | aka.ms/learn/teamstoolkit
• Documentation – Teams Toolkit Overview | https://learn.microsoft.com/microsoftteams/platform/toolkit/teams-toolkit-fundamentals?pivots=visual-studio-code
• Documentation – Teams JavaScript client library | https://learn.microsoft.com/microsoftteams/platform/tabs/how-to/using-teams-client-library
• Documentation - people module | https://learn.microsoft.com/javascript/api/@microsoft/teams-js/people
• Documentation - chat module | https://learn.microsoft.com/javascript/api/@microsoft/teams-js/chat
Previous demos in this series
• Demo 3 - Teams Toolkit Learn Path - Build a Microsoft Teams tab app using Teams Toolkit for Visual Studio Code – Garry Trinder (Microsoft) | @garrytrinder (3/7)
• Demo 2 – Teams Toolkit Learn Path - Build a bot using Teams Toolkit for Visual Studio Code - Garry Trinder (Microsoft) | @garrytrinder - (2/28)
• Demo 1 – Teams Toolkit Learn Path – Get started building apps for Microsoft Teams using Teams Toolkit for Visual Studio Code - Garry Trinder (Microsoft) | @garrytrinder – (2/21)
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home
A
Foreign
hi
everyone,
my
name,
is:
go
trinder
I'm,
A,
Cloud,
developer
Advocate
at
Microsoft,
and
as
we
mentioned,
this
is
another
session
in
the
teams.
Talk
at
learn
path.
Today,
we're
going
to
be
covering
how
to
add,
chat,
capabilities
to
your
Microsoft
teams,
app
using
the
team's
JavaScript
client
Library.
A
A
If
this
is
the
first
time
that
you've
seen
one
of
those
sessions,
then
there
is
content
already
available
for
you
to
to
consume,
because
we've
already
started
with
week,
one
we
kind
of
got
started
with
teams
toolkit
how
to
install
it
and
how
to
create
a
project
from
the
sample
Gallery.
Then,
the
next
week
I
showed
you
how
to
build
a
bot
using
toolkit.
A
Then
we
moved
on
to
building
tabs
had
a
week
off,
and
then
this
week
we
are
at
the
team's
JavaScript
library
stage
and
next
week
we'll
be
talking
about
how
to
deploy
and
publish
the
apps
that
we
are
creating
using
teams
to
talk
it
into
our
Microsoft,
365,
tenants
and
Azure
so
week.
Four.
This
is
where
we
are
at
the
at
the
moment
and
if
you
want
to,
you
know,
go
and
take
a
look
at
this
learn
path.
It
is
all
all
live.
A
You've
got
Visual
Studio
code
extension
if
you're
a
JavaScript
or
typescript
developer
and
you're
on
Windows
or
Mac
OS
and
Linux
teams.
Toolkit
Visual
Studio
code
is
the
the
tool
for
you.
It's
going
to
help
you
create,
build
and
deploy
your
apps
much
easier
and
and
faster
than
doing
it
on
your
own
and
there's
also
the
teams
toolkit
for
visual
studio
2022.
So
if
you
dotnet
and
c-sharp
developer,
and
just
on
Windows
using
visual
studio,
then
then
take
a
look
at
at
the
toolkit
for
visual
studio.
A
Although
for
this
series,
we're
just
concentrating
on
visual
studio
code
extension
at
the
moment,
so
moving
on
add
to
some
prerequisites
of
the
things
that
I'm
going
to
show.
You
is
obviously
we
need
a
Microsoft
365
tenant
with
the
the
ability
to
upload
custom
apps.
You
obviously
need
Visual
Studio
code
for
teams
toolkit,
because
it's
a
visual
studio
code,
extension
and
because
we're
doing
JavaScript
development,
you'll
also
need
node
installed.
Node,
16
and,
above
will
be,
will
be
fine
so
on
to
the
topic
of
today.
A
What
is
the
team's
JavaScript
library?
Well,
it's
a
JavaScript
library
that
can
be
used
to
integrate
native
functionality
from
Microsoft
teams
into
your
own
applications,
so
being
able
to
reuse
some
of
the
things
that
that
your
end
users
would
use
on
a
daily
basis,
like
maybe
a
people.
Picker
lots
of
other
features
in
there.
You
can
reuse
these
these
components
so
that
you
don't
have
to
build
things
from
scratch.
A
You
can
just
use
things
that
are
already
natively
available
to
to
you
as
a
developer
in
the
platform
to
build
your
own
apps
and
make
them
more
consistent
and
and
user
friendly,
and
as
well
as
being
able
to
use
different
components.
It
actually
provides
you
with
with
with
helpers
as
well.
That
makes
it
easy
to
access
the
context
in
which
your
app
is
running.
So,
if
you're
running
in
teams,
do
you
want
to
access
the
the
IDS
of
that
team
and
SharePoint
URLs?
A
Maybe
in
the
background
as
well
and
the
the
library
helps
you
with
that.
So
how
do
you
get
a
hold
of
the
the
library?
How
do
you
install
it
in
your
in
your
project
and
you
can
install
it
from
npm
or
using
yarn
or,
if
you're,
not
using
the
package
manager
at
all,
and
you
can
simply
reference
the
the
Javascript
file
from
the
office
CDN
and
in
terms
of
teams
toolkit?
A
This
is
already
provided
for
you,
so
you
don't
actually
have
to
do
the
install
when
you
create
a
new
tab
project,
it's
already
there
and
available
installed
ready
for
for
you
to
to
use
now.
The
team's
JavaScript
client
library
has
a
number
of
apis
and
they're
grouped
into
what
are
called
capabilities,
and
these
capabilities
are
provided
to
to
access
function,
different
types
of
functionality
with
within
teams.
So
you
can
see,
we've
got
a
number
of
different
capabilities.
A
We've
got
capabilities
such
as
chat
and
calendar
being
able
to
use
dialogues,
maybe
checking
profiles
or
using
the
search
capability
in
teams
as
well
lots
of
different
capabilities
in
there.
But
you,
the
first
capability
that
you're
going
to
start
with,
is
the
app
capability,
and
the
reason
for
that
is
because
you
have
to
initialize
the
library
if
you
want
to,
if
you
want
to
use
it.
A
A
Now,
after
the
the
library
is
initialized,
then
you
can
actually
start
to
use
some
of
the
the
functions
on
these
capabilities.
You
know
that
they're
actually
going
to
work.
So
a
common
kind
of
starting
point
is
the
ability
to
get
context
of
your
app,
and
you
can
do
that
by
calling
the
the
get
context
function.
A
So
there
are
a
few
other
objects
on
there
and
to
check
that
out
and
but
it's
very
very
useful.
What's
something
for
information
in
there
so
now
that
we
understand
how
to
initialize
the
the
library
and
actually
use
the
get
context
function
to
to
get
that
that
understanding
of
the
environment
that
our
app
is
is
running
in
and
using
other
capabilities-
and
here
is
example
of
using
the
chat
capability.
Let's
say
we
want
to
create
a
new,
a
new
chat
from
our
application.
See
here,
we've
got
a
chat.
A
That's
already
been
created,
it's
got
more
than
one
recipient
in
there.
It's
got
some
default
text
in
there
as
well,
to
send
in
in
the
message-
and
we
can
do
that
using
the
team's
JavaScript
library
by
importing
the
chat
namespace
and
then
what
we
do
is
we
just
make
sure
that
this
capability
is
actually
supported
in
the
host
that
their
application
is
running
in,
and
we
do
this
just
in
case
say,
for
example,
you've
got
your
web
application.
You
might
be
running
outside
of
teams.
If
this
is
running
outside
of
teams.
A
This
is
going
to
return
false.
It's
inside
teams,
it's
true,
then
we
can
safely
move
to
actually
use
some
of
the
functionality
on
this
capability.
So
in
this
example,
we
can
use
open
group
chat
and
we
can
pass
in
a
collection
of
users
to
add
into
the
chat
we
can
pass
in
a
title
and
the
message
really
really
simple
way
of
being
able
to
to
add.
A
You
know
a
nice
native
capability
into
into
your
app
now
over
the
last
few
weeks,
we've
kind
of
talked
about
their
support
scenario,
so
I
just
wanted
to
go
back
to
that,
and
so
in
this
scenario
it
might
be
that
you've
got
a
tab.
That's
helping
you
manage
support
tickets
and
as
an
employee,
you
could
see
us
Port
tickets
in
there
and
you
might
want
to
start
a
chat
with
the
engineer.
A
A
Using
teams
talk,
it
I've
just
created
a
project
using
the
the
tab
template-
and
this
has
scaffolded
me
a
a
basic
project
and
I've
got
a
tab
component
here
which,
which
represents
the
the
actual
tab,
our
user
user
interface
and
I've
opened
the
package.json,
because
I
just
want
to
show
you
where
the
team's
JS
reference
in
there,
it's
already
added
in
as
a
dependency.
So
at
this
point
all
I
did
was
I
just
created
the
app
I
hit.
A
F5
teams
talk,
it
did
all
the
hard
work
for
me
in
the
background
and
I've
sideloaded.
My
my
app
into
teams
and
now
I
can
I
can
see
my
my
tab
and
I've
got
development
server
running
as
well,
so
any
changes
that
I
make
automatically
appear
in
the
browser
window
without
me,
actually
having
to
to
refresh
that.
So,
let's
just
take
a
look
at
the
the
the
tab
that
we've
got
at
the
moment.
It's
very
simple:
we've
just
got
a
a
button
which
has
non-click
event
handler.
A
That
calls
start
chat
function
which
has
nothing
in
it.
So
it
just
doesn't
do
anything,
and
so,
let's
set
up
a
scenario
where
I
can,
when
I
click
the
button
I'll
get
a
people
picker
and
the
people
who
I
choose
in
that
picture.
It's
going
to
create
a
a
chat
for
them
in
in
teams.
So
in
the
interest
of
time,
I'm
just
going
to
copy
and
paste
some
code
and
I'm
going
to
put
that
into
the
start,
chat
function
and
I'm
going
to
hit
save.
A
A
So,
as
I
mentioned,
you
need
to
import
the
the
app
capability
for
us
to
initialize
the
the
library
and
get
our
context
and
I've
also
included
the
people
and
the
chat
capability
in
here,
so
that
we
can
just
check
and
call
the
is
supported
function
which
which
exists
on
all
of
these
capabilities.
Just
to
see
you
know,
are
they
both?
Are
they
both
supported?
So
in
this
case
they're
both
going
to
return?
A
So
it's
going
to
tell
us
what
what
host
is
it
running
in
and
whether
it's
going
to
be
on
the
web
client
or
whether
it's
going
to
be
on
the
desktop
as
well
so
I've
saved
that
so
if
I
click
Start
chat,
I've
now
got
a
native
dialog
box
and
I
can
just
search
for
people
in
here.
So
let's
do
a
Dell
and
Nesta
and
of
course,
Megan
can't
forget
Megan
click
done
and
this
is
going
to
create
a
chat.
A
So
it's
already
added
the
three
people
in
that
I
I
wanted
and
I
picked
in
the
people
picker,
and
then
it's
it's
noticed
in
here
that
we've
got
teams
web
client
in
there.
So
it's
pulled
from
from
Context
and
then
I
can
click
Send
and
that's
going
to
send
that
message.
It's
also
going
to
create
the
chat
as
well.
So
you
can
see
really
quite
simple
way
of
being
able
to
integrate
some
native
capabilities
of
teams
into
your
app
using
the
team's
JavaScript
library
in
just
a
few
lines
of
code.
A
A
So
please,
if
you're
interested,
if
you
haven't
looked
at
it,
yet
go
check
that
out,
AKA
dot,
Ms,
slash,
learn,
slash
teams
talk
it
and
next
week
we
will
be
covering
the
final
module,
which
is
deploying
and
Publishing
your
team's
app
to
your
organizational
store
and
to
Azure
as
well
using
teams
toolkit
and
with
that
yeah
done
excellent.
Thank
you.
Thank
you
and
Gary
really
really
awesome.
Stuff
awesome,
awesome,
stuff,
foreign.