►
From YouTube: Using the MGT Files Components in your solutions
Description
In this 21-minute developer focused demo, Sébastien Levert reviews two MGT components - Files and File list that handles files and folders stored in Teams, SharePoint and OneDrive. Files presentation capabilities include layouts, custom file icon, related information – drive, site, user and group IDs, also properties and details. File list capabilities highlighted include ability to display, upload, query for files/folders, get files by insight type, file extension and access through breadcrumb navigation. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 8, 2022.
Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert
Supporting materials:
• Documentation - File component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/file
• Tool - Microsoft Graph Toolkit Playground – File | https://mgt.dev/?path=/story/components-mgt-file--file
• Repo - MGT Sandbox | https://github.com/sebastienlevert/mgt-sandbox
• 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 | https://youtu.be/JkgFrbtwdJU?t=476
• Microsoft Graph Toolkit – Using Login Component in your solutions – 14 December 2021 | https://youtu.be/HfBVaeGRDw8?t=2375
• Microsoft Graph Toolkit – Using the Person Component in your solutions – 4 January 2022 | https://youtu.be/kZ_JwZpbJb4?t=1158
• Microsoft Graph Toolkit – Using the People Component in your solutions – 11 January 2022 | https://youtu.be/WU_CqJC5fyQ?t=2163
• Microsoft Graph Toolkit – Using the People Picker Component in your solutions – 18 January 2022 | https://youtu.be/YG16snk1fJU?t=2424
• Microsoft Graph Toolkit – Using the Teams Channel Picker Component in your solutions – 25 January 2022 | https://youtu.be/F5JcbIlxSpo?t=2293
• Using the MGT Agenda and Tasks Components in your solutions – 1 February 2022 | https://youtu.be/Ddc0vZYAXDs?t=2619
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
Today
I
want
to
talk
about
our
graph
toolkit.
We've
covered
a
lot
of
our
components.
Already
the
person
components
the
people
tasks
agenda
to
do
today.
I
want
to
focus
on
something
that
is
really
near
and
dear
to
my
heart,
which
is
files
coming
from
a
a
strong
sharepoint
background.
I've
been
working
with
files
and
sharepoint
onedrive
and
teams
forever,
and
I'm
excited
today
to
showcase
how
we're
thinking
these
should
be
handled
within
the
microsoft
graph
toolkit
before
we
go
any
further.
A
A
You
don't
have
to
rebuild
all
of
these
functionalities
to
build
a
capability
that
goes
on
and
fetches
files
based
on
a
group
id
or
a
team
id
or
any
of
these
things,
and
it's
basically
drag
and
drop
inside
your
app.
You
don't
really
have
to
build
any
big
capabilities
to
include
mgt
in
your
app
they're,
beautiful
they're,
themed
around
microsoft
365,
so
they
really
look
native
to
the
platform,
but
they're
also
very
flexible,
think
about
how
you
might
want
to
bring
your
own
brand
inside
these
controls.
A
This
is
all
absolutely
possible
and
it
works
everywhere.
You
want
to
work
in
sharepoint.
You
want
to
work
in
teams.
You
want
to
work
in
electron.
You
want
to
work
just
as
a
regular
spa
that
is
totally
outside
of
these
constructs
you're,
more
than
welcome
to
bring
mgt
to
any
of
the
apps
that
you
are
building.
A
A
But
what
we're
also
thinking
about
is
how
we
can
bring
these
multiple
files
together
as
part
of
the
file
list,
bringing
a
total
folder
as
part
of
it,
or
even
building
a
full
browsing
capability
with
files
and
folder
to
be
able
to
navigate
your
onedrive
or
to
be
able
to
navigate
a
group
list
of
folders.
Well,
that's
exactly
what
the
mgd
file
is
in.
Ngt
files
are
and
they
work
really
really
closely
together.
A
A
A
Why
do
we
need
all
of
them?
Files.Tree
will
give
you
access
to
your
onedrive
to
your
personal
content,
so
files
that
really
is
really
about
the
current
user.
That
is
logged
in
files
that
read
write,
which
actually
we
don't
necessarily
need
files
that
tweet
when
we
do
that.
But
I
love
to
have
them
all
spread
out.
A
A
A
First,
one
an
mgt
file,
the
mgtt
file
component,
takes
in
a
file
query
you
can
identify
specifically
which
file
you
want
to
have
access
to
which
in
that
case,
is
this
file
that
could
be
coming
from
something
you
stored
somewhere
in
your
app.
It
could
also
be
coming
from
another
graph
call
where
you
wanted
to
see
these
files
or
whatever
you
really
decide
what
you
want
to
do
with
these
queries.
A
A
But
the
next
thing
I
want
to
show
is:
maybe
this
layout
here
might
be
a
little
bit
too
too
noisy.
Maybe
in
your
app,
you
don't
have
that
much
space
that
you
can
allow
to
a
single
file.
So
you
want
to
change
the
way
that
the
presentation
is
done.
So
you
have
ways
to
identify
the
same
file
with
the
same
file
query,
but
we're
changing
the
view.
A
One
line,
two
lines,
three
lines:
these
three
options
are
actually
options
on
the
mgt
file
and
you're
gonna
see
later,
we've
been
able
to
control
these
also
through
the
mgt
file
list.
So
what
does
it
look
like?
Well,
we're
going
to
have
a
more
compact
here,
a
little
bit
less
and
more
like
the
bigger
capability
right
here.
A
So
all
of
these
controls
are
available
like
this,
so
you
can
literally
choose
out
of
the
box
three
different
views
in
here.
You
also
can
overwrite
the
entire
view
of
it
and
run
with
your
own
template
here.
We're
giving
you
the
full
object,
the
full
file
object
and
you
can
render
it
the
way
you
want
it
to
do
that
way.
A
You
will
be
able
to
use
any
capabilities,
any
html
tags,
any
react
components
to
render
it
and
really
render
it
the
way
you
want
it
to
be,
then
afterwards,
you
can
also,
for
example,
if
you're
connecting
to
either
an
internal
system,
or
you
really
want
to
provide
your
own
icon.
There
are
ways
to
do
that,
so
you
can
simply
specify
a
file
icon
here,
I'm
just
referring
to
a
png
file
that
is
stored
in
our
repo
and
when
I
do
this
here,
it's
just
going
to
show
up
with
the
graph
icon.
A
A
You
can
also
identify.
Okay,
I
want
a
specific
drive
id
drives.
Are
the
construct
of
document
libraries
across
all
of
microsoft?
365.
onedrive
is
a
drive,
a
sharepoint
document.
Library
is
a
drive.
So
basically,
here,
if
you
know
exactly
which
drives
you're
looking
for
each
of
them,
has
a
unique
id.
So
you
can
simply
just
say:
hey.
You
know
what
I
want
to
have
this
file
right
here.
This
drive
and
I
want
to
have
this
item
id
within
it
or
I
can
also
use
the
item.
A
The
item
path,
so
I
don't
have
to
know
exactly
the
id.
I
can
actually
use
just
the
name
of
the
path,
so
basically
a
folder
or
the
name
of
the
file,
and
that's
going
to
make
us
successful
by
being
able
to
see
these
right
there
so
we're
showing
two
different
mgt
files.
In
this
specific
case,
you
can
do
the
same
thing
with
group
id
so
think
about
how
you
want
to
integrate
with
teams.
A
Potentially
these
group
ids
are
the
same
as
the
team
ids,
so
you
can
go
fetch
for
all
the
join
teams
that
you're
a
part
of
identify
the
one
you
want
to
talk
about.
So
a
good
example
of
this
would
have
been
to
integrate
with
a
team's
channel
picker
that
we
discussed
earlier,
based
on
the
results
of
that,
we
could
have
feed
the
information
in
here
and
select
a
single
file
from
there,
and
then
it
shows
here
two
different
ways
of
showing
the
same
file
either
through
the
id
or
through
the
item
path.
A
You
can
use
the
exact
same
capability
here,
so
you
can
say
I
want
to
connect
to
this
user
id
and
that
person
gave
me
access
to
this
specific
item
id
or
this
specific
file.
So
now
you
can
go
here
and
see
hey.
This
is
exactly
that.
That's
megan,
so
I
just
added
an
mgt
person
right
here,
just
to
showcase
that
we're
actually
connecting
to
megan
and
not
to
my
own
sebastian's
onedrive,
and
I
can
see
all
the
different
files
that
are
being
available
as
part
of
it.
A
You
might
not
like
this
experience.
Maybe
the
title:
you
don't
want
the
title
to
be
this
one.
You
don't
want
the
the
second
line
to
be
the
modified,
the
size
or
whatsoever.
Something
you
can
do
is
customize
your
properties.
So
here
you
can
say
the
first
one.
Actually
I
want
to
have
the
last
date
time.
The
the
the
second
one
I
want
to
have
the
site
is,
and
the
third
one
I
want
to
have
the
name
which
then
looks
like
the
following.
Then
we
changed
it
all
up.
A
We
modified
these
capabilities
so
think
about
how
you
would
be
able
to
even
change
totally.
What
are
the
properties
that
you
want
to
use
and
that's
a
great
way
to
really
match
the
result
that
you're
expecting
from
mgt
to
what
your
app
should
be
showing
in
any
of
these
apps.
So
these
are
all
different
capabilities
that
are
super
super
super
useful
for
us
last
thing
that
I
wanted
to
show
for
this.
One
is
this
here
here.
A
What
we're
doing
here
is
I
just
added
an
id
in
here,
and
that
id
is
something
that
I'm
using
in
javascript
I'm
going
to
go
and
get
that
component
get
the
id
and
provide
a
file
details
directly
to
this
one.
So
if
we're
looking
a
little
bit
down
in
the
code,
we
have
the
ability
here
to
say:
hey,
you
know
what
this
custom
file
details
that
I
have
up
top
just
fill
it
with
this
here.
A
So
it's
a
side
whatever
size
you
want,
whatever
name
we
want
in
here
and
then
it's
going
to
be
able
to
render
so
think
about
it
could
even
integrate
with
line
of
business
application
data.
That
is
not
even
in
microsoft,
365.
It
could
be
from
another
repository
and
then
you
would
have
the
rendering
to
be
exactly
the
same
as
your
microsoft
365
data.
So
that's
actually
really
really
really
cool
for
people.
A
So
a
lot
of
capabilities
exist
with
files
and
there's
even
more
that
you
can
do
with
files,
but
I
think
where
it
really
shines
is
when
you
aggregate
multiple
files
together
within
a
file
list.
So,
let's
go
and
see
how
we
can
work
with
a
file
list.
Well,
the
first
file
list
is
the
most
simple
one
look
at
here:
mgt
file
list.
How
simple
is
that
that's
just
give
me
a
file
list
that
file
list
when
there's
nothing
configured
to
it,
we're
going
to
automatically
go
and
integrate
with
your
onedrive.
A
So
here
you
see,
I
have
my
entire
one
drive
right
here.
I
have
all
my
folders
all
my
files
on
my
one
drive.
I
can
even
click
here
and
show
more
items
so
here
it
is
completely
configurable
where
you
want
to
be
able
to
highlight.
Okay,
I
want
to
have
a
page
size
of
50
items
or
five
items
or
25
items
you
decide,
and
then
we
also
built
automatically
the
automatically
expanding
capability.
So
you
just
click
on
it
and
then
it
loads
the
rest
of
the
content
and
happens
it
to
the
current
control
by
default.
A
When
you
click
on
something
nothing
happens,
though,
you
can
always
hook
your
code
to
the
item.
Click
here.
That
means
you
will
be
able
to,
for
example,
to
react
to
something
that
happened.
I
clicked
on
this
folder.
Maybe
I
want
to
change
the
root
of
my
component
or
I
want
to
open
it
in
a
new
tab
to
be
able
to
see
the
file
we're
going
to
see
an
example
of
that
a
little
bit
later,
but
I
wanted
to
make
sure
that
I
was
mentioning
it
second
thing.
A
Well,
I
think
it's
fair
to
say
that
when
we
have
a
file
list,
we
want
to
be
able
to
upload
something
right.
So
in
that
case
we're
uploading
to
our
onedrive
and
that's
why
we
needed
to
have
these
read
write
capabilities,
so
I
can
click
on
upload
files
and
select
my
gt
announcement
here
and
automatically
it's
going
to
upload.
It's
going
to
say
that
it's
done,
that's
really
really
cool.
We
also
support.
A
Let
me
just
quickly
do
this
here
should
actually
be
supporting
this.
If
I
do
this,
I
also-
I
don't
know
if
you
see,
but
right
now,
I
just
dragged
and
drop
a
file
from
another
folder.
I
have
drag
and
drop
over
here
and
automatically
these
files
are
updated
when
you're
going
to
reload
the
component
automatically.
These
files
will
go
and
be
shown
in
their
respective
order.
A
To
do
that,
you
just
need
to
enable
the
file
upload
to
be
true,
and
that's
it
you're
good
to
go
then
afterwards.
You
can
also
do
a
specific
query.
You
can
say
hey,
you
know
what
I
want
the
query
to
be
just
the
children
of
this
item.
So,
for
example,
this
is
a
folder,
so
you
can
say
the
content
of
this
folder.
I
want
it
to
be
added
and
to
be
showcased
in
here,
so
you
could
go
to
any
document
library,
any
site,
any
team,
any
one
drive
and
show
the
current
capabilities
underneath.
A
What
you
can
also
do
is
multiple
queries,
so
you
say
I
want
to
have
files
coming
from
here,
also
coming
from
here
and
also
coming
from
here.
So
you
can
do
all
of
these.
That's
really
cool,
so
you
can
combine
files
from
coming
from
multiple
places
which
in
that
case
will
say:
that's
a
folder
mockups
and
then
this.
So
you
will
have
the
mixed
capabilities
in
there.
A
That's
amazing,
because
it
really
enables
you
to
match
data
together
coming
from
multiple
sources,
a
couple
of
other
scenarios
same
thing
with
group
id
and
items.
So
you
have
the
exact
same
capability
when
you
have
a
group
and
a
path
so,
for
example,
think
about
teams
that
would
be
a
team
and
the
general
folder
which
we
see
right
here.
A
We
have
the
same
thing
with
an
insight
type
so
think
about
there's
three
different
insights,
like
the
trending,
the
shared
and
the
used
in
microsoft,
365,
or
in
that
case
these
are
the
latest
files
that
I
used
as
a
user.
These
are
all
there
so,
for
example,
when
you're
building
an
experience
where
you
have
a
file
picker,
you
might
want
to
start
with
this,
because
this
is
where
it's
really
useful,
because
those
are
the
files
you
use
like
the
latest,
one
that
you
used.
So
it's
great
to
start
with
these
kind
of
files.
A
Now
you
can
also
answer
a
question
around
file.
Extensions.
Well,
file
list
allows
you
to
do
a.
I
just
want
to
hear
about
doc
and
excel
xlsx,
for
example.
So
here
these
are
the
ones
that
are
on
my
onedrive
that
are
excel
and
documents
and
word
documents.
These
are
the
only
ones
we're
filtering
out
all
the
rest
from
here.
A
Finally,
I
think
this
is
where
it
really
shines
is
all
the
capabilities
that
we
have
in
mgt
file
list
all
combined
together,
where
we're
going
to
be
able
to
build
a
full
breadcrumb
and
navigation
capabilities
in
there.
So,
for
example,
if
I
go
here,
I
have
my
files
and
when
I
go
to
my
dex
here,
well,
I'm
going
to
see
all
the
files
from
dex.
I
can
go
back
to
files
can
go
to
mock-ups.
I
have
all
of
them
right
here.
A
If,
for
any
reason
I
don't
see,
I
don't
have
a
data,
I
am
able
to
override
the
template
when
there
is
no
data
and
that's
going
to
automatically
say
sorry.
No
files
are
available
in
this
folder
and
this
is
what's
going
to
be
rendered
to
the
screen.
So
you
have
the
ability
to
bring
your
own
messaging
to
bring
your
own,
maybe
even
iconography
in
there,
and
how
do
we
do
that?
Well,
we
just
hook
up
right
here
to
our
different
components.
A
Here
we
have
the
mgt
file
list,
breadcrumb,
which
I
named
it
and
we're
doing
just
a
little
bit
of
logic
right
here,
where
we
add
the
event
listener
to
a
click
and
then,
if
there's
a
detail,
then
we
just
change
the
capabilities.
We
change,
which
folder
is
the
root
of
the
of
the
entity
file
list
component,
and
we
do
some
management
around
the
breadcrumb
item.
So
this
also
behaves
good
and
if
not,
I'm
just
going
to
window
that
open
this
file.
A
So
if
I
click
here
automatically,
I'm
just
now
in
my
onedrive-
and
I
just
saw
that
file,
so
you
can
really
build
the
experience.
You
want
to
really
expand
on
your
scenarios
and
really
build
the
entity
filers
component,
that
you
really
need.
So
just
as
a
recap,
a
couple
of
resources.
If
you
want
to
go
in
and
check
the
code
that
we
used
today
go
to
the
ak.msl
mgt
sandbox
have
a
look
at
all
the
other
resources
and
back
to
you
visa.