►
Description
In this 16-minute developer focused demo, the sixth session in Sébastien Levert’s MGT series. This session opens with an overview of Microsoft Graph then dives into the Teams Channel Picker component that can display channels user is a member, find a channel and show members, and send a message to channel users. Not only can you get data from Graph, but post data via Graph and optionally add a custom template experience. See code and rendering side-by-side. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 25, 2022.
Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert
Supporting materials:
• Documentation - Microsoft Teams Channel Picker component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/teams-channel-picker
• Repo - MGT Sandbox Seb’s demos | https://github.com/sebastienlevert/mgt-sandbox
• MGT Playground – Teams Channel Picker | https://mgt.dev/?path=/story/components-mgt-teams-channel-picker--teams-channel-picker
• Repo – Microsoft Graph Toolkit | aka.ms/mgt
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/MGT/docs
• Learn - Develop apps with the Microsoft Graph Toolkit | aka.ms/mgt/learn
Previous demos in Sébastien Levert’s (Microsoft) | @sebastienlevert, Microsoft Graph Toolkit (MGT) series
• Discover the Microsoft Graph Toolkit – 7 December 2021
• Microsoft Graph Toolkit – Using Login Component in your solutions – 14 December 2021
• Microsoft Graph Toolkit – Using the Person Component in your solutions – 4 January 2022
• Microsoft Graph Toolkit – Using the People Component in your solutions – 11 January 2022
• Microsoft Graph Toolkit – Using the People Picker Component in your solutions – 18 January 2022
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
Good
morning,
good
afternoon,
good
evening,
folks,
today,
I
want
to
dive
a
little
bit
deeper
into
our
microsoft
graph
toolkit
discussion,
especially
around
some
of
our
team's
components
that
we
have
built
in
to
the
graph
toolkit
first.
My
name
is
sebastian
levert.
I
am
a
senior
program
manager
on
the
graph
toolkit
team
also
doing
other
stuff,
but
the
focus
of
today
is
rearrange
the
graph
toolkit.
A
Just
as
a
recap.
What
is
the
graph
toolkit
well
graph
toolkit
is
a
collection
of
reusable
framework,
agnostic
components
and
authentication
providers.
It
allows
you
to
work
with
microsoft,
graph
so
think
about
ready-made
controls
focused
on
productivity
scenarios
that
are
pre-connected
to
microsoft
graph.
So
you
don't
have
to
build
any
of
them.
You
don't
have
to
rebuild
a
user
control.
You
don't
have
to
rebuild
a
team's
channel
picker.
You
don't
have
to
rebuild
any
of
these
scenarios.
They're
already
built
they're
already
available,
and
they
work
flawlessly
in
any
type
of
web
framework
think
react.
A
A
A
So
you
can
bring
your
own
style
guides
your
own
colors,
your
own
styling,
to
these
controls,
so
they
feel
a
little
bit
more
natural
inside
your
applications
and
finally,
it
just
works
everywhere.
You
want
to
build
within
teams,
you
want
to
build
a
spa.
You
want
to
build
a
sharepoint
framework
by
part,
or
maybe
you
want
to
build
an
electron
application.
Well,
all
of
them
will
make
these
controls
fully
shine.
A
So
today's
focus
is
about
our
team's
channel.
Picker
team
channel
picker
allows
a
user
to
go
in
start
typing
for
a
team
or
for
a
channel
and
being
able
to
select
a
channel.
We
can
think
about
some
scenarios
that
this
can
deliver.
Maybe
you
want
to
send
a
message
to
a
channel
as
part
of
your
line
of
business
application
to
spark
a
conversation,
or
maybe
even
I
don't
know
to
reply
to
an
existing
thread
that
exists
in
that
channel.
Well,
that's
exactly
one
of
the
scenarios
we're
thinking
about.
A
Maybe
you
also
just
want
to
select
a
channel
to
create
a
meeting
within
that
channel,
or
maybe
you
want
to
select
a
channel
to
identify
the
files
that
are
linked
to
that
channel.
All
of
these
different
scenarios
are
absolutely
relevant
in
this
case
and
that's
what
the
control
really
is
all
about
now
enough
for
the
slides,
we're
here
to
show
a
little
bit
of
code.
So
let
me
dive
into
that
scenario
right
away.
A
So
let
me
open
it
up.
We
are
using
the
same
simple
application
we've
been
using
for
the
last
couple
of
weeks.
All
of
that
is
available
already
on
github.
You
can
go
to
ak
dot,
ms
slash
mgt
sandbox
and
that's
going
to
lead
to
a
github
repo
that
you
can
get
and
start
playing
with
this
solution
right
away.
A
So
first
we're
going
to
focus
on
kind
of
the
general
scenario
here.
So
I
wanted
to
show
I'm
in
teams.
That's
all
the
different
teams
that
I
have
across
the
board:
retail
u.s
sales
communications
and
all
of
that.
So
let
me
go
back
to
my
app
here.
The
first
scenario
that
I
want
to
highlight
is
a
team
channel
picker
for
the
currently
signed
in
user.
A
So
the
only
thing
you
have
to
do
is
you're
looping
in
our
cdn
version
of
mgt,
using
this
script
tag
here,
which
basically
loads
mgt
in
any
type
of
html
page,
it's
going
to
load
everything.
It
needs
bring
all
the
references
being
all
the
different
components
and
you're,
basically
just
using
this
here
using
the
mgt
teams,
channel
picker
no
configuration
because
it's
really
built
for
the
connected
user,
we're
using
the
joined
teams
api
from
microsoft,
graph,
we're
also
using
some
groups
api
to
go
a
little
bit
deeper
in
that
story.
A
A
We
have
an
experience
that
as
soon
as
you
click
on
the
text
box
that
here
kind
of
the
search
box,
you're
going
to
automatically
get
an
initial
call
that
will
bring
all
the
different
teams
that
you're
a
part
of
and
will
also
allow
you
to
navigate
and
find
some
of
the
channels
you
want
like,
for
example,
sales
east,
but
sometimes
maybe
you're
like
me,
and
you
have
like,
maybe
a
little
bit
too
many
teams
that
are
available
in
in
your
teams.
Maybe
you're
part
of
hundreds
of
teams.
A
But
you
know
exactly
what
you're
looking
for
I'm
looking
for
the
sales
ease
channels,
but
I
don't
know
where
it
is:
it's
a
little
bit
lost.
I
can
go
here
and
say:
sales
east
and
automatically
it's
going
to
highlight
this,
so
it's
kind
of
a
way
to
filter
the
current
channels
to
make
it
as
easy
as
possible,
and
then
the
only
thing
you
have
to
do
is
you
click
on
it
and
automatically
it's
going
to
select
this
now
the
experience
here
I
wouldn't
say
it's.
A
So
second
scenario
I
want
to
highlight
is
that
one
here?
Let
me
on
on
comment
this
here,
which
brings
a
team
shuttle
picker
for
the
currently
cited
user,
but
want
to
know
who
are
the
members
of
that
team.
So
let
me
just
save
here
it
just
reloaded
my
html
page
and
when
I'm
looking
at
the
second
area,
what
it?
What
we're
doing
here
is
I'm
literally
delivering
a
scenario
where,
when
I'm
gonna
select
one
of
these
channel,
we
will
be
using
the
the
mgd
people
component,
and
here
you
see
it
here.
A
A
So
let
me
show
you
the
code
quickly
before
we
go
into
the
demo.
The
code
is
very
simple:
when
you're
going
to
do
a
team
speaker
when
you're
going
to
do
a
change
of
selection,
when
I'm
going
to
change
what
is
the
team
that
is
underneath
that
I'm
selecting
if
I
have
more
than
one
detail
or
I
have
more
than
zero
details
in
that
case,
I
do
have
a
team
that
was
selected.
It's
not,
I
haven't
cleared
it.
I
selected
a
team.
A
I
will
be
assigning
the
group
id
of
this
control,
this
team
group
id
being
my
mgt
people
component
and
the
beauty
of
web
components,
is
that
you
can
add
native
properties
to
out
of
the
box
html
control.
So
in
that
case
I
can
set
the
group
id
here
to
be
the
id
of
the
team
that
was
just
selected.
Then
I'm
going
to
hide
I'm
going
to
basically
display
this
control
afterwards.
So
let
me
go
through
the
example
here
I
click
here
I
go
to
my
communications
channel.
A
You
could
also
leverage
some
private
channels
from
the
api
and
then
afterwards
you
can
maybe
either
send
a
message
to
one
of
these
folks
can
go
here
and
send
an
email
start,
a
chat,
see
the
entire
people
person
card
here
or
whatever
you
want
to
do
with
this.
So
it's
easy
to
connect
the
selection
of
one
of
these
channel
with
anything
you
want
in
this
case
with
another
ngt
control
that
we
already
covered,
which
is
the
mgt
people.
A
A
It
could
have
been
or
just
a
regular
text
area
and
a
regular
button,
and
what
I'm
gonna
do
is
via
code,
I'm
going
to
add
some
functions
that
will
automatically
get
that
the
information
from
the
selected
channel
and
what
I'm
going
to.
What
I'm
going
to
do
is
the
text
area
will
allow
me
to
add
some
text
and
I'm
going
to
have
a
send
message
button
that
will
automatically
send
the
message
to
the
actual
selected
channel
that
was
selected
to
me
that
in
teams
people
will
see
a
message
popping
up.
A
A
I
will
go
and
grab
an
instance
of
the
graph
client
that
is
available
as
part
of
mgt.
So
here
we're
really
talking
about
a
little
bit
more
advanced
scenario
where
I
can
get
an
authenticated
graph
client
to
do
any
type
of
javascript
call
with
the
graph,
so
any
calls
to
graph
as
long
as
we
have
the
right
scopes
and
permissions.
A
I
will
be
able
to
go
here,
call
my
graph
client
to
this
specific
api,
which
in
that
case
is
my
slash
teams.
I
can
specify
the
id
of
the
team
and
specific
channel,
which
is
that
id
I
will
be
able
to
post
a
message
and
the
message
content
will
be
the
value
of
the
text
area
that
I
have
when
we're
done.
I'm
just
going
to
do
a
simple
alert
on
that.
The
message
was
sent,
so
let
me
show
you
how
it
works.
Let
me
go
to
my
communications
channel.
A
I'm
going
to
go
to
the
general
channel,
I'm
going
to
say
hello,
m364,
hd5
platform,
community
call.
Folks,
I'm
gonna
hit
send
message.
Then
it's
gonna
hit
this
code
and
automatically
it's
gonna
send
to
graph,
and
now
I
have
a
message
sent
that
was
just
delivered
here.
If
I
go
here,
I
just
found
like
that.
A
second
ago
my
message
was
sent,
so
it's
not
only
to
retrieve
data
and
to
select
data,
but
you
can
also,
with
the
help
of
the
client
that
is
built
into
mgt.
A
A
But
if
you
don't
like
the
loading
experience
or
if
you
don't
like
the
no
data
experience,
you
can
bring
in
your
own
experience
in
there,
you
can
bring
your
own
template
to
replace
them
to
make
them
fit
a
little
bit
more
your
brand
or
the
way
that
you're
interacting
with
your
apps
in
general.
So
in
that
case,
for
example,
when
I'm
using
the
mgt
team
channel
picker,
I
have
the
way
to
specify
you
know
what
I
want
to
override
the
template.
That
is
called
error.
A
We
have
two
templates
for
this
control:
the
error,
template
and
the
loading
template.
So
when
I'm
gonna
have
an
error-
or
I
won't
find
any
data,
I
will
just
add
a
like
a
p
here,
a
paragraph
with
sorry,
no
teams
or
channels
were
found
and
when
it's
loading,
I'm
going
to
have
the
loading
results
here
that
will
be
shown.
So
when
I
do
this,
this
one
was
already
loaded.
A
So
I
we're
skipping
the
loading
results
here,
but
if
I
say
test
seb
well
now
my
sorry
no
teams
or
channels
were
found
is
now
the
template
that
is
being
used.
So
there's
really
a
lot
of
customization
opportunities
that
lies
inside
the
mgt
controls,
and
I
highly
advise
to
look
at
those
to
really
make
them
feel
natural
for
your
users
to
have
the
same
types
of
behaviors
that
we
see
around
the
rest
of
your
application.