►
Description
In this 24-minute developer focused demo, Sébastien Levert in the last 9 weeks has delivered an overview and a complete component tour of MGT. Now we focus on customizations that allow you to deliver native looking experiences for your particular app. Six areas for customizations – styling, templating, and localizing components along with handling events, caching Graph calls in components and Right-to-Left support. Customizations can be Global or single instance in scope. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 22, 2022.
Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert
Supporting materials:
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/mgt/docs
• Documentation - Styling components in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/customize-components/style
• Documentation - Microsoft Graph Toolkit caching | https://docs.microsoft.com/graph/toolkit/customize-components/cache
• Documentation - Localizing the Microsoft Graph Toolkit components | https://docs.microsoft.com/graph/toolkit/customize-components/localization
• Tool - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://mgt.dev/
• Samples - MGT Sandbox | aka.ms/mgt/sandbox
• Issues – MGT Issus | aka.ms/mgt/issues
• Demos - Previous Demos for MGT | https://www.youtube.com/playlist?list=PLR9nK3mnD-OUQOW86tT5dkCRQAVGY7DlH
• Learn – Develop apps with the Microsoft Graph Toolkit | https://aka.ms/mgt/learn
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
A
We
have
gone
through
different
use
cases
different
scenarios,
but
now
today
we
want
to
go
a
little
bit
deeper
and
showcase
how
you
can
really
improve
the
experience
of
the
toolkit
with
customizing.
It
really
making
it
your
own,
so
it
fits
within
your
app
within
what
you're
building.
So
let
me
go
through
a
couple
of
slides
before
we
go
into
any
of
the
code,
so
first,
let's
cover
a
little
bit.
What
is
the
microsoft
graph
toolkit
if
it's
the
first
time
you're
hearing
about
the
toolkit?
I
think
it's
a
great
reminder
here.
A
So
the
toolkit
is
a
collection
of
reusable
framework,
agnostic
components
and
auth
providers
that
allows
you
to
access
and
work
with
the
microsoft
graph
toolkit
think
about
the
craft
toolkit
as
a
drop
in
set
of
components
that
you
can
just
drag
and
drop
into
your
app
and
that
they
are
already
connected
to
microsoft
graph.
So
you
don't
have
to
think
about
the
connectivity
think
about
how
you
need
to
build
out
all
of
these
complex
components.
You
just
use
ours
and
you're
good
to
go
to
build
an
app
that
is
connected
to
microsoft.
A
365.,
the
components
are
fully
functional,
so
they
have
all
the
behaviors
you
would
be
looking
into.
They
are
all
customizable,
which
seems
to
be
the
topic
of
the
day
right
today
and
they
work
with
any
framework
and
they
work
on
all
modern
browsers.
So
not
only
you
get
access
to
something
that
is
really
meant
for
developer
productivity,
but
you
can
use
these
in
any
of
the
frameworks.
You
might
be
using
think
about
plain
javascript.
A
Vue.Js
react,
angular,
blazer,
anything
you're.
Thinking
of
you
can
make
it
work
with
the
craft
toolkit.
Why
would
you
think
about
the
toolkit
and
why
would
you
use
it
well?
First,
it
really
cuts
on
depth
time
because
you
can
easily
add
ui
components
to
access
graph
with
just
literally
a
couple
of
lines
of
code,
a
provider,
a
login
component
and
you're
good
to
go.
A
You
can
also
make
them
really
beautiful
out
of
the
box.
They
are
really
beautiful.
They
are
meant
to
be
similar
to
the
microsoft
365
default
and
out
of
the
box
component.
So
it
feels
natural
for
users
when
they
see
these
components,
but
sometimes
you
want
them
to
be
similar
to
your
own
experiences
to
your
own
design,
guidelines
to
your
own
css
frameworks,
you're
using
so
not
only
they're
beautiful,
but
they
are
also
very
flexible
for
you
to
customize
them
and
finally,
it
works
everywhere.
A
It
works
in
any
framework
in
any
browser,
but
anywhere
also
so
think
about
maybe
you're
building
a
spa,
a
single
page
application.
Well,
you
can
use
mgt
for
that
teams
same
thing.
You
want
to
build
a
teams
app,
a
team's
personal,
app,
a
teams
tab
there.
You
go
you're
well
served
and
you
can
use
mgd
as
part
of
this.
You
want
to
use
electron
to
build
a
desktop
application
that
renders
a
web
page.
A
Today,
we're
going
to
focus
on
the
customization
story
and
we
have
kind
of
six
areas
where
we
really
believe
that
you
can
build
and
bring
customization
to
the
toolkit.
First,
you
can
style
the
components.
We're
gonna
have
a
deeper
look
at
how
styling
works
and
how
you
can
really
make
it
happen.
So
styling
is
one
of
the
type
of
opportunities
you
get
with
customizing
ngt
components.
A
A
So,
if
you're
happy
with
how
a
person
card
looks
like
you,
don't
have
to
touch
any
templating,
you
just
leverage
the
one
that
is
out
of
the
box,
but
if
you
don't
like
it
or
if
you
want
to
improve
some
of
it,
you
can
do
that
with
bringing
your
own
html,
build
your
own
logic
as
part
of
that
html
and
render
parts
of
the
entity
component
with
your
own
code.
So
you
really
have
an
extensibility
mechanism.
A
You
can
also
handle
events.
Some
of
our
components
in
mgt
will
trigger
events,
for
example,
when
you're
adding
a
new
task
using
our
to-do
or
a
platter
component.
You
will
automatically
know
that
a
task
was
just
added,
so
maybe
you
want
to
prompt
something
you
want
to
congratulate
the
user.
You
want
to
do
any
of
these.
Well,
you
have
the
ability
to
do
that.
You
can
register
events
on
all
of
these,
listen
to
them
and
act
upon
these
events
when
they
are
raised.
A
Caching,
these
applications
are
very
data.
Intensive
right,
you
have
a
lot
of
data
coming
from
graph.
You
are
storing
a
lot
of
data
on
on
your
ui.
Maybe
you
want
to
make
sure
that
the
data
is
maybe
as
fresh
as
possible,
or
there
are
some
areas
where
you
might
want
to
say
one
hour
back
in
time.
I
want
to
be
able
to
store
that
one
hour
of
data
locally,
so
I
don't
have
to
go
to
do
back
and
forth
with
our
components
with
the
graph.
A
Localizing
the
components
entity
comes
with
a
localization
helper
that
enables
you
to
provide
your
own
localized
keys
for
a
lot
of
the
labels
that
exist
in
in
the
microsoft
graph
toolkit.
So
we're
going
to
see
how
you
can
affect
some
of
the
components
how
you
can
really
improve
and
be
more
accessible
for,
people
that
are
speaking
other
languages
and
then
you're
gonna
be
able
to
do
that.
A
And
finally,
talking
about
languages
and-
and
some
languages
are
right
to
left
instead
of
left
to
right,
we're
also
providing
the
full
capability
to
have
rtl
support
on
all
of
the
components
that
are
built
within
ngt.
So
without
any
further
ado,
let's
go
and
let's
look
a
little
bit
at
how
we
can
make
it
happen.
So
let
me
go
here.
A
Let
me
do
that
and
let
me
actually
go
to
my
first
link:
I'm
going
to
go
to
aka
that
ms
slash
mgt,
slash
docs,
and
this
is
where
all
of
our
documentation
for
the
graph
toolkit
sits.
You
zoom
in
a
little
bit-
and
this
is
really
where
you're
going
to
learn
about
all
your
customization
opportunities
right
there.
So
every
single
time
we're
going
to
talk
about
customization.
A
The
best
way
to
get
started
is
to
go
in
the
table
of
content
here
on
the
left
side,
open
the
customizing
components
and
start
looking
at
this
and
you're
going
to
see
in
the
sample
that
we're
going
to
have
you're
going
to
see
all
the
links,
the
specific
customization
opportunity
that
are
included
in
the
code.
So
that
way,
it's
easy
to
find
your
way
back
to
understand
how
you
can
customize
some
of
these
components
so,
as
we
said,
styling
templating
events,
caching
and
localization,
and
right
to
left
support.
A
So
I
want
to
start
with
the
styling.
Styling
is
critical
to
really
make
mgt
feel
natural
for
the
users
that
are
using
your
components
when
you
want
to
make
a
different
preposition
for
these
users
in
terms
of
styles.
Sometimes
you
want
to
be
able
to
customize
it
as
much
as
you
want.
So
how
does
it
work
exactly?
A
Let's
go
and
see
what
documentation
tells
us
well,
what
it
tells
us
is
that
we
are
using
a
set
of
css
custom
properties
and
custom
properties
in
css
are
appearing
like
this,
we're
going
to
say
dash
dash,
and
it's
basically
work
we're
creating
a
variable
name
with
this,
and
we
say
that
the
avatar
size
here
will
be
34
pixels
what
it
means.
It
means
that,
in
our
code,
we
will
be
using
that
variable
that
you
can
override
and
you
can
bring
it.
We
can
bring
this
experience
inside
what
ngt
render.
A
A
We
had
the
last
time
we
have
added
a
couple
of
things
here,
maybe
here
a
little
of
css
we're
going
to
come
back
to
this
one
later
on,
but
I
want
to
start
with
this
styling
panel
here,
where
we
are
specifying.
Let
me
zoom
in
just
one
more
bit
we're
specifying
a
style
tag
here
and
we
say
that
an
entity
person
would
have
potentially
customized
style,
and
let's
start
with
this
here,
let
me
comment
out
this
one.
So
what
does
it
mean?
A
It
means
that
every
single
mgt
person
in
my
application
everywhere
everywhere
we're
using
mgt
person.
This
avatar
will
become
72
pixels.
So
what
I'm
gonna
hit
save
automatically
here
you
see
now
that
entity
person
just
became
way
bigger
than
it
used
to
be.
So
you
can
really
do
all
of
these
capabilities.
You
can
really
bring
whatever
you
want
from
a
sizing
standpoint,
but
also
from
this
from
a
styling
standpoint.
So
let
me
go
back
here
to
our
documentation
and
I'm
gonna
go
to
the
specific
component
that
I
want
to
customize.
A
So
all
of
them,
you
want
to
change
the
font
for
the
line
two
for
the
line.
Three,
you
want
to
change
the
the
presence
background.
Color,
you
want
to
change
the
font
family,
the
font
size.
You
want
to
do
some
text
transform.
You
want
to
do
more
detail
spacing
any
of
that.
You
can
change
them
by
using
custom
css
name,
one
of
the
ones
that
I
like
to
do
is
because
it
really
strikes
you
when
you
see
it
is
when
you're
changing
the
border
radius,
which
is
this
one
here.
A
Well,
what's
going
to
happen
here,
we're
going
to
remove
the
radius
which
basically
will
make
instead
of
a
round
avatar
we're
going
to
have
a
square
avatar.
So
when
I
go
here
now,
you
see
that
I
have
a
square
avatar,
but
what
does
it
mean?
It
also
means
that
not
just
this
component
gets
it,
but
all
ngt
person
components
so
later
on
we're
going
to
talk
localization,
but
you
can
see
here
that
all
the
capabilities
are
also
using
that
square
thing.
So
it's
really
a
global
setting.
A
A
Well,
you
can
always
use
class
names,
so
you
can
go
here
and
say:
class
equals
my
person
and
you
will
be
able
to
just
apply
the
style
to
my
person
and
now
it's
gonna
apply
it
just
to
this
one.
Because
now,
if
I
go
to
localization,
you
see
here,
I'm
still
having
the
small
one,
it's
still
the
rounded
one.
So
if
you
want
to
change
styling
for
a
single
instance,
you
can
do
it
using
classes
or
ids
or
if
you
want
to
do
global,
you
can
just
remove
this,
and
now
it's
back
to
global
here.
A
A
Second
thing
that
I
want
to
bring
up,
we
already
covered
the
templating.
We
already
covered
the
events
in
some
of
our
previous
demos,
so
I
invite
you
to
go
and
see
all
the
recorded
versions
of
of
these
previous
weeks,
where
you're
going
to
see
how
everything
around
the
templating
and
everything
around
the
events,
but
something
that
we
did
not
talk
about
is
caching.
A
So
where
do
we
store
this?
Do
we
store
that
as
a
file
on
your
desk
or
whatsoever?
What
we're
doing
is
we
are
storing
this
and
let
me
bring
that
up
here.
We
are
storing
everything
as
part
of
index
db,
so
we're
going
to
have
a
different
set
of
caches
in
there.
For
example,
we
have
the
mgt
user
cache.
So
when
you're
looking
at
me,
we
will
be
storing
the
entire
user,
and
here
you
cannot
see
super
great,
that
user,
but
we're
storing
the
entire
json
object
of
that
user.
A
So,
when
we're
querying
me,
if
we
still
have
a
valid
period
and
by
default,
it's
60
minutes.
So
if
we're
still
within
the
60
minutes,
the
data
might
not
have
changed
so
we're
just
leveraging
the
data
that
we
stored
in
indexeddb.
We
do
the
same
thing
for
people.
We
do
the
same
thing
for
photos
for
files,
even
our
ngtget
component,
that
can
request.
Basically
any
area
of
graph
will
get
stored
in
this
by
default.
But
how
do
you
even
play
with
this?
How
do
you
even
customize
this
capability?
A
A
So
every
time
I
will
load
data,
I
will
always
go
back
to
graph
and
ask
for
it.
So
I'm
going
to
save
this,
and
now
you
see
it
takes
a
couple
of
milliseconds
to
go
back
to
graph,
but
every
time
it
will
reload
you're
gonna
see
that
let's
call
it
flickering
because
we're
going
to
graph
to
grab
the
data
before
we
can
show
the
actual
component
and
here
because
it's
a
very,
very
simple
html
file,
we're
doing
we're
not
already
pre-allocating
some
space
or
whatsoever.
So
it's
normal.
A
We
see
that
flickering
in
a
real
world
application.
We
would
not
see
it
so
what
does
it
mean?
It
means
that
if
I
go
back
here
and
I
go
to
my
application-
I
look
here
and
I
refresh
I
still
don't-
have
anything
okay
cool
now.
Maybe
I
want
to
enable
just
for
people-
and
I
know
that
in
my
caching
scenario
I
have
a
people
component.
That
is
here
so,
if
I
hit
save
now,
it's
going
to
hit
graph
the
first
time,
but
not
the
second
time.
A
This
is
what
drives
this
component
right
here
and
now
I
have
all
the
data
in
there
all
the
results
that
are
coming
back
from
graph.
These
are
stored
for
a
specific
amount
of
time
that
I
can
change,
so
maybe
I'm
only
interested
into
having
an
invalidation
period
of
1000
milliseconds.
So
basically
it's
one
second,
not
great,
but
might
be
useful
in
some
scenarios.
Think
about,
for
example,
presents
presents,
would
be
a
good
example
of
something
you
want
to
limit
to
go
back
to
that
data
a
little
bit
more
often,
to
always
ensure
that
you
have.
A
The
latest
presents
information,
for
example,
but
in
that
case
I
can
put
it
to
60
000
milliseconds,
which
in
that
case
would
be
a
minute,
so
we're
going
to
store
it
for
a
full
minute.
I'm
going
to
go
to
the
caching
it's
going
to
be
stored
and
in
60
seconds
it's
going
to
go,
do
a
fetch
on
the
data
in
graph
and
we'll
be
using
it
so
quite
interesting
thing
that
we
have
there.
A
I
now
wanted
to
talk
a
little
bit
about
an
area
that
is
a
little
bit
above
styling
when
you're
building
capabilities
with
with
graph
you
often
host
your
app
either
in
teams
in
sharepoint
or
even
your
own
spa
and
you
might
want
to
support
dark
mode,
which
is
great
for
accessibility.
Well,
entity
supports
natively,
dark
mode.
The
only
thing
you
have
to
do,
for
example,
is
to
come
here
and
add,
for
example,
to
a
component.
A
A
So
that's
great
for
very,
very,
very
specific
areas
of
the
ui,
but
what
is
even
better-
and
if
I
completely
remove
this
from
here-
and
I
save
it-
I
have
a
knob
here,
basically
a
notch
in
here
where
I
can
turn
on
dark
mode
and
what
is
happening
is
when
I
hit
dark
mode.
I
append
the
same
name
so
mgt
dark,
I'm
going
to
append
it
to
one
of
the
parent
objects.
In
that
case,
I'm
going
to
append
it
to
my
body
and
everything
in
there
will
become
mgt
dark.
A
A
Same
thing
with
right
to
left
right
to
left
enables
you
to
swap
the
ui
totally
from
right
to
left,
especially
for
right
to
left
languages.
That's
something
that
you
can
do.
It's
super
helpful
and
it's
all
baked
into
the
products.
You
don't
have
to
think
about
it.
You
don't
have
to
build
it.
You
just
need
to
customize
the
colors,
potentially
using
css
and
you're,
going
to
be
good
to
go
last
sample
that
I
want
to
do
today
is
around
localization.
A
Localization
is
an
important
aspect
for
two
reasons.
First,
maybe
you
want
to
provide
other
languages
to
your
application,
but
also,
maybe
you
want
to
redefine
some
of
the
keys
that
we're
using
are
some
of
the
labels
that
we're
using
in
the
toolkit
to
make
them
potentially
more
closer
to
your
vocabulary
or
to
your
own
taxonomy.
A
So
in
this
case,
when
I
open
this
people
card,
you're
gonna
see,
send
emails,
start
chat
and
a
bunch
of
could
what
could
feel
like
hard
coded
labels
right
in
here
by
using
our
localization
helpers
and
I'm
gonna
un
comment.
This
thing
you
will
be
able
to
say
for
the
person
card
that
send
email
link
subtitle.
I
want
it
to
become
in
french
on
voice.
A
So
in
that
case
I
will
be
translating
this
entire
card
in
french.
So
it
makes
a
lot
of
sense
because
you
want
to
provide
this
so
based
potentially
on
the
the
current
language
of
the
user.
You
could
provide
this
set
of
strings
or
this
other
set
of
strings
based
on
the
language,
and
now,
when
I
save
it
go
back
to
localization
now
I
see
that
everything
is
now
somehow
in
french
and
all
the
different
capabilities
that
you
see
here
are
also
all
translated.
A
So
it
is
a
very
important
accessibility
feature
that
we
have
where
you
can
provide
this,
but
if
you
want
to
provide
it
more,
you
want
to
be
like
you
don't
like,
for
example,
the
send
email,
you
prefer
to
say,
send
a
message.
You
can
also
not
just
focus
on
the
localization
aspect,
but
maybe
more
a
specific
messaging
or
a
specific
vocabulary
that
you'd
like
to
use
in
that
case,
you're,
going
to
see
that
now
it
says,
send
a
message
instead
of
sending
an
email.
A
So
those
are
are
some
of
the
customization
opportunities
that
I
wanted
you
to
know.
That
really
brings
you
to
go
a
little
bit
deeper
in
the
toolkit
capabilities
and
how
you
can
really
make
them
your
own
inside
your
own
app
a
couple
of
resources
before
I
hand
it
over
to
you,
brian,
our
repo
aka,
ms
mgt,
our
docs
are
issues.
A
If
you
want
to
see
the
the
code
live
that
I
used
today,
you
can
go
to
the
samples
at
ak
that
ms
mgt
slash
sandbox
and
a
couple
of
other
links
here
to
get
you
started
with
mgt.
Thank
you,
everybody.
So
much
for
the
opportunity,
and
next
week
we're
going
to
go
and
start
talking
about
how
we
can
leverage
the
toolkit
in
another
area
like
teams
or
react
or
sharpen
framework
and
other
stuff
like
that.
So
talk
to
you
all
next
week.
B
Excellent,
thank
you
so
much
seb
and
sure
to
your
chagrin.
We've
actually
had
some
folks
requesting.
Can
they
have
an
individual
playlist
of
just
your
mgt
sessions
from
the
community
call
on
here?
So
we'll
actually
look
into
that
and
see
if
that's
something
we
can
support,
but
we
do
have
individual
videos
for
all
the
different
presentations
that
go
on
so,
and
thank
you
so
much
for
coming
on
to
talk
about
customizations
great,
to
see
things
like
theming
and
localization
caching,
some
of
the
areas
that
we
don't
get
to
see
every
day.