►
Description
In this 13-minute developer-focused demo, Amrutha Srinivasan from the Microsoft Graph team builds a simple Microsoft To Do app, a time aligned Wallpaper change app and a people presence status app using the Electron Provider found in the recently released Microsoft Graph Toolkit v2.1. Look at the code for importing and initializing the provider, for adding MGT Components needing authentication, and for rendering results. This PnP Community demo is taken from the Microsoft Graph community call – April 2021, recorded on April 6, 2021.
Demo Presenter - Amrutha Srinivasan (Microsoft) | @amruthasrin
Supporting documents:
• Documentation - Electron Provider | https://docs.microsoft.com/en-us/graph/toolkit/providers/electron
• Learn Module - Get started with Microsoft Graph Toolkit | https://aka.ms/mgt-learn
• Repo - Microsoft Graph Toolkit v2.1 | https://aka.ms/mgt
• Documentation – Microsoft Graph Toolkit Overview | https://aka.ms/mgt-docs
• Playground – Microsoft Graph Toolkit Playground | https://mgt.dev
Stay connected:
• Twitter - https://twitter.com/microsoft365dev
• YouTube - https://aka.ms/M365DevYouTube
• Microsoft 365 Developer Blog - https://aka.ms/M365DevBlog
• Microsoft 365 PnP Blog - https://aka.ms/m365pnp/community/blog
A
Now,
before
I
get
into
what
that
is
in
case
you're,
not
aware
of
the
toolkit,
I
thought
I'd
give
you
a
brief
intro.
So
the
microsoft
graph
toolkit
is
a
collection
of
ui
components
and
authentication
providers
that
make
using
the
graph
really
really
easy
and
help
you
create
these
data
rich
and
user-centric
experiences
with
very
few
lines
of
code
in
your
application.
A
So
there
are
two
parts
to
that:
ui
components
and
authentication
providers.
So
when
you
talk
about
the
ui
components,
these
are
fully
functional
right
out
of
the
box
and
they
use
data
from
the
graph
and
they
help
you
render
it
really
beautifully
with
just
basically
two
to
three
lines
of
code
and
the
best
place
to
kind
of
explore.
A
As
you
can
see,
this
actually
is
pulling
data
from
the
graph
to
render
this
for
you.
Similarly,
you
have
a
component
like
mgt
agenda,
so
all
you
have
to
do
is
include
this
html
tag
and,
of
course,
import
our
library
and
authenticate
to
get
all
of
this
beautifully
rendered
agenda
data
and
they're
super
customizable
with
your
own.
You
can
add
your
own
css
make
them
match
the
look
and
feel
of
your
application.
A
So
that's
that's
where
ui
components
are
concerned
and
they're.
Oh
sorry,
there
are
a
lot
more
components
here
on
the
left
that
you
can
go
and
look
at
and
play
with.
So,
as
you
can
imagine,
all
of
these
components
use
the
use
the
graph
in
a
different
way.
They
call
different
graph
apis,
so
we
have
to
first
be
authenticated
with
microsoft,
identity
to
be
able
to
get
these
access
tokens
for
the
graph
and
that's
where
our
authentication
providers
come
in.
A
So
we
have
different
authentication
providers
for
the
different
platforms
that
you
may
want
to
build
on
that
help
abstract
away
all
of
that
code
that
you
would
need
to
get
access
tokens
not
only
for
these
ui
components
to
work,
but
also
it
gives
you
a
graph
endpoint
to
call
any
graph
api
of
your
choice
and
so,
like
I
said
we
have
different
providers
for
different
platforms.
So
if
you
were
building
a
web
application,
you
would
be
using
our
m
subprovider
if
you
were
building
a
sharepoint
web
part
you'll
be
using
our
sharepoint
provider.
A
Similarly,
if
you're
using
it,
if
you're,
building
a
teams,
tab
you'll
be
using
our
teams
provider
and,
last
but
not
least,
if
you're
building
an
electron
app,
you
can
use
our
electron
provider
and
there's
a
very
simple
example
of
how
you
would
use
an
m
cell
provider
here
for
our
web
app
for
a
web
application.
So
all
you
need
to
do
is
import
the
provider
from
our
package
and
then
say:
providers.google
provider
initialize,
the
amsa
provider,
with
a
client
id
of
your
app
app
registration,
and
that's
basically
it
that's
all.
A
You
need
to
do,
get
to
get
authenticated
and
then
you
can
start
using
our
ui
components
or
even
call
the
graph.
So
with
that
intro,
let's
jump
to
our
electron
up.
So
here.
I've
basically
have
a
very
simple
electron
app
here
and
for
those
of
you
who
don't
know
what
electron
is
or
I've
never
worked
with
it
before
electron
is
a
framework
to
build
native
applications
that
are
cross-platform
because
they're
based
on
very
fundamental
web
technologies
like
html
and
javascript,
with
a
node.js
backend
and
a
chromium,
front-end
and
so
yeah.
A
So
they
cross
platform
and
they
allow
you
to
build
and
it
allows
you
to
build
native
app
experiences
and
a
lot
of
actually
a
lot
of
the
most
common
apps
that
we
use
on
windows,
like
microsoft
teams
and
even
vs
code.
That
you're
looking
at
right
now
are
electron
applications
and
electron
has
two
kinds
of
processes
main
and
renderer
right,
and
you
can
think
of
main
as
back
end
and
render
as
the
front
end.
So
the
main
process
is
responsible
for
the
application
life
cycle
for
all
native
interactions
and
also
for
creating
render
processes.
A
So
this
is
just
a
very
basic
typescript,
electron,
quick,
start
kind
of
template
project
that
I
cloned
from
github.
All
I've
done
right
now
is
I
downloaded.
I
npm
installed
these
three
packages,
so
the
first
one
is
mgd
components
which
contains
all
the
ui
mgt
components
that
we're
going
to
be
using.
A
This
is
the
electron
provider
itself
it's
in
its
own
package
and
then
mgt
element
is
the
base
package
that
allows
these
components
and
providers
to
interact
with
each
other
and
what
we're
going
to
be
building
today
is
a
very
simple
to
do
application,
so
we
can
go
over
here.
So
now
we're
going
to
try
to
get
authenticated
first
using
the
provider
so
in
the
main
process
we're
going
to
be
initializing.
A
What
I've
done
here
is
I've
created
a
config
object
of
all
the
the
details
that
you
would
need
to
pass
to
initialize
electron
authenticator
like
your
app
registration,
the
window
on
which
you
want
to
get
authenticated,
which
is
this
browser
window
instance
and
all
the
scopes
that
you
would
need
to
call
all
the
apis
or
to
render
all
the
ui
components
and,
last
but
not
least,
initialize
the
authenticator
and
we're
done
with
this
part.
So
there's
only
one
step
left,
which
is
in
the
renderer
process.
B
A
A
So
I
added
mgt
login,
which
is
our
login
component
mgt
person,
which
shows
personal
details
of
the
person
logged
in
and
mgt
to
do
basically
displays
all
your
to-do
information
from
microsoft.
To
do
so,
wait
till
it
runs
again.
I
think
it's
taking
more
time
than
usual,
because
I'm
sharing
my
screen
so
just
to
recap:
we
initialize
the
electron
authenticator
and
the
main
process
and
we
initialized
electron
provider,
and
then
we
added
some
mgd
components.
B
In
the
meantime,
for
folks
that
are
following
the
staff,
jeremy
just
put
out
a
quick
survey
out
there
and
we're
just
interested
in
knowing
how
many
devs
are
actually
doing
actually
doing
dev
and
like
an
alt
right
now.
But
if
you
can
just
do
a
thumbs
up
on
jeremy's,
both
we're
just
surveying.
Just
quick
surveys.
Try
to
understand
like
where
you
guys
are
actually.
A
Password
and
then
once
you're
logged
in
the
login
component
will
display
your
name
and
your
picture
and
yeah.
So
all
of
this
data
just
rendered
right
away
and
that's
pretty
much
how
easy
it
is
to
get
started
with
the
electron
provider.
And
so,
as
you
can
see,
this
is
the
login
component,
and
then
you
have
the
person
component.
That
has
a
picture
and
also
your
status,
your
name
and
you
can
always
customize
the
amount
of
data
you
want
to
display
here
and
then
all
of
your
to-do
tasks
straight
from
microsoft.
To
do
now.
A
A
A
My
app
actually
turns
to
dark
theme-
and
I
did
this
solely
for
the
purpose
of
showing
off
that
mgd
supports
dark
theme
and
all
you
have
to
do
to
enable
that
is
to
add
a
class
to
all
your
mgt
components
or
in
your
document,
in
your
body,
dot
element,
but
also
my
wallpaper
changed
to
this
giraffe.
That's
telling
me
that
it's
watching
me
and
I
need
to
get
back
to
work.
A
Similarly,
when,
when
I'm
done
with
work,
I
like
to
appear
away-
and
I
also
have
this
bad
habit
of
lingering
on
on
my
laptop
when
I'm
done
with
work,
but
really
I
should
be
working
out.
So
I
have
my
wallpaper
reminding
me
that
I
need
to
go
work
out
with
this
cute
little
kitten,
so
how
I'm
doing
that
is
in
this
application.
A
C
A
And
what
I'm
basically
doing
is
pulling
presents
data
from
the
graph
every
five
seconds,
and
this
is
how
I'm
doing
it.
So
you
can
subscribe
to
the
on
state
changed
event
on
the
provider
that
will
fire
every
time.
There's
a
log
in
or
log
out.
So
I'm
checking
here
if
a
person
is
signed
in
and
then
I'm
calling
this
function
called
check
presence
that's
going
to
pull
data
every
five
seconds
from
the
graph
for
the
presence
data.
So
this
is
how
I'm
calling
the
graph.
A
I'm
checking
what
the
status
is
and
based
on
that
I'm
changing
the
wallpaper
using
the
wallpaper
npm
package
and
one
more
thing
I'm
doing
is
I'm
also
able
to
manually
set
the
presence
over
here,
because
in
our
person
component
we
use
a
different
polling
frequency
to
poll
for
presence.
But
since
I
am
pulling
presents
every
five
seconds,
I
want
to
manually
update
that
every
time
I
find
every
time
I
get
the
presence
data,
so
I
just
pull
the
mgt
person
dom
element
and
then
I
manually
add
the
presence
object.