►
From YouTube: Building a Microsoft Teams app using the Microsoft Teams Toolkit and Microsoft Graph Toolkit
Description
In this 12-minute Developer-focused demo, Sébastien Levert creates a new Teams App. In the index.html page you will create, add the Microsoft Teams Toolkit and Microsoft Graph Toolkit, add the Teams provider and MSAL provider, then drop in components – Login, Agenda, Person, Person card, People Picker and To-Do. Then view your page on localhost. Consent to permissions required and finally install the App in Teams, no configuration required! This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on December 10, 2020.
Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert
Supporting materials:
• Website - Get started with Microsoft Graph | https://developer.microsoft.com/en-us/graph/get-started
• Website – Graph Explorer | https://developer.microsoft.com/en-us/graph/graph-explorer
• Documents - Microsoft Graph documentation | https://docs.microsoft.com/en-us/graph/
• Repo – Microsoft Graph Toolkit | https://github.com/microsoftgraph/microsoft-graph-toolkit
• Solutions - Microsoft Graph partner solutions | https://developer.microsoft.com/en-us/graph/partners
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
I
want
to
show
you
a
working
example
on
how
you
can
get
started
to
build
your
first
microsoft
teams
app
using
the
microsoft
graph
toolkit,
but
also
the
microsoft
teams
toolkit.
So
first,
I
wanted
to
start
with
kind
of
what
is
the
graph
toolkit
for
the
ones
that
are
new
to
the
toolkit,
so
the
graph
toolkit
is
a
collection
of
web
components.
So
here
web
components
is
important
which
are
all
powered
by
the
microsoft
graph.
They
are
not.
A
They
are
functional
components,
so
you
drag
them
onto
your
on
any
html
page
and
automatically
magic
happens
powered
by
the
graph.
It's
not
like.
You
have
to
bind
them
to
data
whatsoever.
It's
all
built
into
the
web
components.
The
components
are
functional
working
automatically
with
microsoft
graph
and
they
work
with
any
web
framework.
A
A
Today
we
will
be
using
the
login
component,
the
person,
the
piece,
the
person
card,
the
people,
the
people,
picker
the
agenda
and
to
do
so,
basically
in
a
seven
minute
demo
we're
going
to
cover
seven
of
those
components
quite
rapidly
and
you're
going
to
see
how
easy
it
is
to
actually
bring
into
this
first.
How
do
you
get
started?
A
Well,
the
easiest
way
to
get
started
with
the
microsoft
graph
toolkit
is
just
to
use
this
simple
script
reference
to
what
we
call
the
mgt
loader,
the
loader
will
just
make
sure
it
loads
all
the
necessary
javascript
file
in
any
html
page
and
then
afterwards.
The
only
thing
you
have
to
do
is
to
go
here
and
add
what
we
call
providers,
because
the
microsoft
graph
toolkit
is
graph
powered.
A
We
need
to
give
it
a
little
bit
of
a
context
of
what
is
the
app
that
we
will
be
using
and
what
are
some
of
the
redirect
url
that
we
want
to
use.
Also,
we
want
to
talk
about
the
scope,
so
the
sample
we're
going
to
do
today.
We
use
today
uses
a
bunch
of
different
permissions
on
the
graph,
but
here
you
can
really
just
scope
to
whatever
you
want
to
do
inside
your
app
once
this
is
done.
A
So
once
you
have
your
first
loader
reference
and
you
have
the
providers
that
are
in
there
and
here
notice
that
we
have
two
providers,
one
for
mso,
which
is
the
one
that
will
actually
do
some
of
the
work
when
you're
running
as
a
spa,
the
single
page
application
and
one
which
is
teams
that
will
do
some
work
when
you
are
embedded
in
teams.
The
beauty
here
is
that
it
understands
the
context
of
where
you
are
and
will
automatically
do
the
right
work
for
you.
A
Afterwards.
You
just
drop
in
to
your
html,
these
kind
of
components,
and
here
you
notice,
it's
mgt
dash,
login
mgt
dash
agenda
and
all
of
those
are
basically
now
that
you
loaded
mgt.
They
become
magically
native
components.
You
can
use
in
html,
so
you
don't
need
to
have
any
other
framework
so
where
you
can
just
drop
these
in
any
page
and
magic
will
happen.
So
what
I
suggest
is
why
don't
we
just
go
and
have
a
look
at
a
solution
that
we
already
built
earlier?
That
actually
runs
that.
So
let
me
go
here.
A
A
This
is
the
microsoft
teams
toolkit
that
helps
you
scaffold
an
app
really
really
really
rapidly
and
will
enable
you
later
to
also
play
around
with
the
manifest
to
install
the
app
in
teams
and
all
these
kind
of
things.
So
basically,
the
team's
toolkit
is
just
kind
of
a
an
accelera,
an
accelerated
way
to
get
your
app
inside
microsoft
teams,
but
there's
no
real
magic
around
the
toolkit.
You
just
focus
on
your
code,
so
let's
focus
on
on
our
code
here.
A
So
the
first
thing
you're
gonna
you're
gonna,
see,
is
both
of
these
integrations
here,
the
first
one.
We
are
adding
the
microsoft
teams
sdk
from
its
cdn.
Why?
Because
we
will
need
to
understand,
hey,
we
are
in
teams,
so
we
need
to
have
the
javascript
sdk
hooked
into
our
page.
So
we
know
that
we
are
working
in
teams,
then
afterwards
we
will
be
adding
the
microsoft
graph
toolkit
in
there
here.
You
see
that
we're
using
mgt
at
next.
A
So
basically,
here
we
are
running
on
the
release:
candidates
of
mgt
version
2,
which
is
very,
very
close
to
be
to
be
shipped,
which
should
be
tomorrow
morning.
Beth
promised
it.
So,
let's
all
hope
that
she
and
the
team
will
do
it
and
if
not,
they
can't
wait
for
monday.
Nobody
will
die
if
anything
happens,
but
but
the
work
you've
been
doing
and
I'm
gonna
show
you
today
is
amazing.
A
A
So
we
need
to
provide
a
page
just
for
that
and
then
the
rest
of
the
page
is
basically
just
html
here
we
or
I'm
using
here
the
grid
from
react
from
the
yeah
from
the
ui
fabric
or
fluent
ui
or
north
star
or
stardust,
depending
on
who,
when
you
started
to
use
it,
and
here
you
will
see
all
of
these
different
grids,
but
here's
the
most
important
part
mgt
login,
very
simple.
Actually
I
could
even
do
this
to
make
it
even
simpler.
A
Don't
need
that
mgt
login,
then
afterwards,
mgt
agenda,
then
afterwards
mgt
to
do
and
then
finally
mgt
people
picker,
that's
it
you
just
need
to
put
them
on
a
page
when
you're
ready,
you
can
go
to
the
terminal
and
say
npm
start
it's
going
to
start
automatically
on
your
machine,
a
local
host
that
will
be
used
to
run
this
sample.
So
let
me
show
you
quickly
here,
I'm
going
to
open
this.
A
I
can
go
to
local,
oh
local,
local,
host
3000,
and
I
want
to
go
to
the
hot
page
I'm
gonna
go
to
here
and
now
I
have
an
empty
page.
Why?
Because
I'm
not
logged
in
so
as
you
can
see,
we
have
four
components.
You
see
here
the
sign
in
component
right
there
on
top
of
the
on
left
and
least
here,
go
with
this.
A
This
one
is
not
signed
in.
I
have
my
agenda
that
is
empty,
my
tasks
are
empty
and
people
probably
won't
work
because
I'm
not
connected
I'm
just
going
to
sign
in
I'm
going
to
say
that
I
am
that
user
and
the
first
thing
you're
gonna
see
is
a
constant
screen,
saying
hey
by
the
way
you're
using
an
app
that
will
require
all
of
these
permissions.
A
So
either
you
say
accept
or
you
don't
want
a
new
hit
cancel
and
you
won't
be
able
to
use
the
app
or,
if
you're,
an
admin,
you
can
also
consent
for
all
the
users
on
behalf
of
the
organization.
So
basically
just
the
admins
would
see
the
screen
depends
on.
What's
your?
What's
your
approach
to
content,
I
I
love
to
show
the
screen
to
everybody.
So
it's
it's
clear
and
transparent.
A
I
hit
accept,
I'm
being
redirected
and
now
automatically
I
just
call
the
graph
look.
How
amazing
is
this
here?
I
have
all
my
agenda
items
that
are
coming
from
my
calendar,
all
my
tasks.
I
can
even
add
some
tasks
in
here.
I
can
search
for
people.
I
can
complete
tasks,
it's
going
to
automatically
go
to
the
graph
and
mark
this
task
as
completed.
I
can
search
for
megan
right
from
here
and
one
of
the
cool
things,
which
is
one
of
the
new
feature
that
we
have
in
mgt,
which
is
when
I
hover
on
megan.
A
I
actually
have
that
and
I
will
yes,
I
want
to
see
all
these
permissions
for
this
user.
I
will
be
to
see
here
all
of
these
things
so
who
is
megan
reporting
to
what
are
the
emails
I
have
with
her.
Her
contact
info
are
full
org
chart
here
the
emails
about
her
all
built
into
the
toolkit.
You
don't
have
to
do
anything.
Users
just
need
to
consent
to
it.
So
it's
great,
but
this
is
not
in
teams.
So
if
I
go
to
teams.
A
A
It's
gonna
ask
me
to
log
in
my
second
I'm
gonna
log
into
the
right
environment.
I'm
going
to
go
here
I'll,
just
log
in
with
my
account
and
automatically
visual
studio
will
be
connected
to
my
environment.
I'm
actually
able
to
go
back
here
and
now
I
can
actually
and
I'm
just
going
to
zoom
out.
It
looks
like
it's
not
great,
and
here
I
was
able
to
go
on
test
and
distribute
and
hit
install.
A
So
this
brought
the
app
right
in
there
there's
no
configuration
everything
is
done
for
you
all.
This
app
is
done
by
default,
all
the
the
urls
everything
is
taken
care
of
by
the
toolkit,
so
you
don't
have
to
play
around
and
then,
when
you
go
back
here
and
you
go
back
to
teams
and
you
open
the
pnp
demo
well
automatically
here,
what
is
going
to
happen
is
the
exact
same
thing
will
be
happening.
A
So
here
I
have
the
exact
same
content
where
I
can
see
my
agenda,
my
task
and
I
can
again
search
for
megan
well
with
when
I'm
not
typing
the
wrong
thing,
and
here
I
have
all
of
this,
so
quite
easy
to
bring
that
super
powerful
cape.
These
super
powerful
capabilities
with
basically
this
line
of
code
here
this
line
of
code
here
and
this
line
of
code
here.
So
I
wanted
to
kind
of
introduce
you
to
the
toolkit
like
this
with
the
microsoft
teams
toolkit.