►
Description
SharePoint Framework Community call on January 28. Demos delivered: 1) Building personal events web part with SPFx and Microsoft Graph Toolkit, 2) Connecting to external APIs in SPFx – case Soccer Highlights and 3) Send Notifications to Microsoft Teams from SPFx solution using Microsoft Graph. Released PnPjs v2.1.0 – January 15th and v2.1.1 patch - January 28th. Updates for all other products delivered earlier in January. 3 samples delivered recently. The next AMA on PnPjs is scheduled for February 9th. The host of this call is Patrick Rodgers (Microsoft) @mediocrebowler. Q&A takes place in chat throughout the call.
Learn more:
• See the full blog post for this call at: http://aka.ms/m365pnp-blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• 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
Hello
and
welcome
to
the
sharepoint
framework
at
javascript
special
interest
group
bi-weekly:
sync,
it
is
january
28
2021,
if
you
can
believe
it,
I'm
patrick
rogers
your
host.
For
this
call,
we
have
a
great
agenda.
As
usual,
the
latest
update
on
sharepoint
framework
patterns
and
practices
updates
across
our
various
program
offerings.
We
have
new
community
sample
updates,
we'll
do
our
picture
time
and
we've
got
again
three
great
demos
from
hugo
jerry
and
luis.
A
So
looking
at
building
personal
events,
web
parts
with
spf,
x
and
microsoft,
graph
toolkit
super
cool
and
excited
to
see
that
we've
got
a
connecting
to
external
apis
and
spfx
case
soccer
highlights,
I
can't
think
of
a
better
use
case
for
sharepoint
than
soccer
highlights
and
luis
manas
will
close
things
out
with
sending
notifications
to
teams
from
spfx
using
the
microsoft
graph.
So
three
very
cool
demos,
we'll
have
those
just
shortly
here
in
the
call.
A
Often
we
get
questions
about
how
to
participate
in
sharepoint
patterns
and
practices,
and
we've
got
lots
of
great
ways
to
participate.
We
invite
all
of
you
whoever
you
are
wherever
you
are
to
participate.
You
can
always
do
a
demo
on
this
call
love
the
demos
on
these
calls
so
just
reach
out
to
myself
or
visa,
and
we
will
get
you
scheduled.
It
might
not
be
immediately
on
the
next
call,
but
it
will
be
absolutely
on
the
soonest
call
we
can
get
you
scheduled.
A
Those
demos
can
cover
anything
spf
x,
maybe
provisioning
related
anything
you
create
on,
for
this
call
would
typically
be
client
side
development
oriented
and
we
have
the
general
development
call
for
other
types
of
development,
so
lots
of
opportunities
to
do
demos
just
get
in
touch
with
us.
You
know
absolutely
welcome
whoever
you
are.
I
know
lots
of
folks
are
doing
amazing
work
for
their
companies
and
their
customers
and
would
love
to
show
that
off
to
the
community.
We
all
learn
a
lot
from
each
other
through
those
demos.
A
Likewise,
you
can
also
contribute
on
github
contributing,
can
take
a
number
of
forms
from
reporting
issues
you
might
find
in
any
of
our
offerings,
as
well
as
submitting
pull,
requests
to
either
add
new
functionality
or
fix
issues
and
as
well.
Helping
with
issues
and
questions
folks
might
have
in
the
issues.
Lists
is
always
very
helpful,
so
appreciate
everybody
that's
jumped
in
and
helped
there
we've
seen
a
lot
of
new
faces,
contributing
on
github,
which
is
fantastic.
I
know
a
lot
of
people
are
coming
out
of.
A
The
sharing
is
caring
program,
which
david
will
talk
about
here
in
a
little
bit,
so
really
excited
to
see
that
growth
and
really
want
to
thank
everybody
for
their
interest
and
getting
involved.
So
thank
you.
Thank
you.
Thank
you
and
finally,
you
can
always
provide
feedback
on
the
things
we're
doing
in
patterns
and
practices.
How
are
these
calls?
How
is
our
documentation,
and
where
else
can
we
help?
Positive
feedback?
Is
okay
too,
and
I'll
just
make
a
note
on
documentation
feedback.
A
It
really
helps.
If
you
have
suggestions
or
ideas
on
how
to
improve
it,
letting
us
know
we
should
make
the
documentation
better.
I
think
you
know
we
all
agree.
Documentation
can
always
be,
but
if
you
have
specific
feedback
around
documentation,
that's
always
very
helpful
to
do
a
little
bit
of
targeted
adjustments
and
as
well.
We,
of
course
you
know,
accept
pull
requests
for
the
documentation
too.
A
So
here's
all
our
links,
the
first
link
there
to
our
developer
videos.
These
are
all
the
developer,
focused
videos
around
building
different
solutions,
different
technologies,
different
authentication
scenarios.
We
also
have
our
pnp
videos.
These
are
the
community
call
recordings
recordings
of
our
monthly
calls
and
other
community
events
will
be
found
in
that
category
as
well.
We
have
a
set
of
open
source,
github
repositories,
sharepoint
pnp
office,
dev
and
microsoft.
Graph
orgs
absolutely
encourage
everybody
to
get
involved
in
any
and
all
of
those
as
your
interests
dictate.
A
All
of
them
are
open
to
your
feedback.
Your
contributions
and
you
know,
sharing
your
ideas
so
encourage
you
to
get
involved
and
then
sample
galleries.
You've
got
great
sample
galleries
for
web
parts,
extensions
list,
formatting
and
teams
samples
and,
as
I've
said
many
times,
this
is
the
first
place
I
go
when
I'm
trying
to
figure
out
something
and
want
to
learn
from
what's
already
out
there
from
the
community.
So
it's
a
great
way
to
figure
out.
A
You
know
how
people
are
solving
different
problems
and
there's
so
many
great
samples
out
there,
where
you
can
often
find
maybe
not
the
whole
solution
to
your
question,
but
absolutely
a
lot
of
great
ideas
on
how
to
get
started.
Solving
your
problem
and
then
finally,
the
last
last
link
the
main
one
to
really
remember
ak
dot.
Ms
slash
m365
pnp
is
the
sharepoint
patterns
and
practices
landing
page
and
that's
going
to
get
you
links
to
all
of
this
other
content
that
I've
just
described.
So
that's
the
one
link
to
remember
ak
dot.
A
B
Things
over
to
david
awesome.
Thank
you,
patrick
well,
for
those
that
are
new
to
the
community
or
have
been
with
us
for
a
while.
As
you
know,
this
is
a
open
source,
inclusive
community,
so
we
invite
everyone
to
not
only
use
the
resources
and
tools
available
to
you
through
the
pnp
initiative,
but
also
contribute
back
with
that.
B
Though,
we
understand
that
there
can
be
some
hurdles
that
you
might
meet
up
with,
such
as
things
like
understanding,
github
how
to
use
a
lot
of
the
tools
such
as
node
or
the
the
framework
and
the
tooling
for
development.
The
sharing
is
caring.
Initiative
provides
hands-on
small
session
guidance
where
we
can
get
together
and
go
through
the
process
of
contributing
for
the
very
first
time
together
or
submitting
to
community
docs.
It's
all
free
all
hands
on
safe
space,
nothing's
recorded.
So
you
can
bring
your
questions.
Our
sessions
are
growing.
B
As
you
can
see,
we
already
have
five,
including
a
new
ama
that
happens
once
a
month.
It's
going
to
be
after
the
monthly
call,
and
it's
going
to
be
thematic
for
a
pnp
initiative
in
february.
It's
going
to
be
the
pmpjs
team,
so
we
invite
you
to
come
with
all
your
pmpgas
questions
as
well
as
any
other
questions
you
might
have
that
we
can
cover
across
the
pmp
initiative
as
well.
We've
got
a
new
site
design
that
matches
the
primary
pnp
site,
so
we're
excited
about
that
and
a
new
office
hours
initiative.
C
C
So,
but
I'm
now
talking
about
weeks
almost
days
rather
than
months,
so
the
1.12
is
coming
out
relatively
soon
like
mentioned,
it
will
have
the
note,
412
and
14
support
and
call
up
before
support
and
so
we'll
finally
modernizing
the
baseline
tooling,
it
will
have
more
access
on
the
base
structure
and
the
context
to
our
domain
dependency
and
for
as
an
example.
Whenever
the
web
part
white
is
being
adjusted,
you
will
get
an
event
on
a
web
part.
C
C
So
you
can
create
your
microsoft
themes
manifest
rather
than
us,
auto,
generating
that
for
you,
whenever
you're
synchronizing
to
the
team,
so
we'll
use
whatever
you
provide
whenever
you
click
or
whenever
stuff
is
getting
synchronized
to
the
team
side,
we'll
also
support
creating
microsoft
teams,
meeting
applications
and
we'll
upgrade
the
microsoft
teams
sdk
to
1.8
level,
so
good,
good,
good,
refresh
coming
up
with
this
one.
I
like
that
within
upcoming
weeks
rather
than
within
months,
and
then
we're
looking
into
having
another
version
before
build
as
well.
Have
we
communicated
that
before?
C
Maybe
not.
Maybe
this
is
the
first
time
we're
actually
saying
that
anyway,
and
obviously
we're
focusing
on
on
making
things
and
collecting
the
feedback
from
you
and
the
community
and
addressing
those
more
efficiently,
also
after
the
1.4
rates.
But
that's
a
quick
update
on
that
one.
Let's
show
it
back
to
patrick.
A
A
It
included
isolated,
runtimes
for
sharepoint
and
graph
library,
support
for
the
node
15
webpack
5
module
resolution,
an
ad
chunk
stream
version
for
node.js,
as
well
as
a
lot
of
other
updates
and
fixes
so
encourage
folks
to
to
try
that
release
out.
Let
us
know
some
feedback.
There
shouldn't
be
any
breaking
changes
to
any
consumers
of
the
library,
but
we
did
change
a
lot
of
the
files
internally.
A
So
if
you
find
some
issues,
please
let
us
know
please
report
those
and
we
can
absolutely
do
our
best
to
get
those
fixed
quickly,
speaking
of
which
we're
going
to
have
a
2-1-1
patch
out
today
there
was
a
issue
reported.
We
had
a
thing
with
the
new
isolated
runtimes
we
weren't,
taking
into
account
some
of
the
global
header
settings,
so
we've
got
that
fixed
and
we'll
get
that
out
later
today.
A
We've
also
got
some
other
fixes
that
were
reported
that
were
not
really
related
to
the
big
changes
for
210
but
happy
to
get
those
included
as
well.
So
we'll
have
full
details
and
a
change
log
and
everything
else.
Once
we
get
that
out
later
today,
please
direct
all
feedback
to
the
issues
list,
pnp.github.io,
slash
pmpjs
for
all
your
documentation.
You
can
follow
us
on
twitter
at
m365
pnpjs.
A
A
With
that
we
will
move
on
to
the
cli
cli
for
microsoft.
365.
We
got
a
new
beta
3.5
out
with
converting
files
to
pdf
using
graph,
sending
adaptive
cards,
creating
azure
ad
apps
passing
content
from
files
using
the
at
token,
which
is
similar
to
the
way
the
azure
cli
handles
that
improvements
to
the
sharepoint
page
management
commands
and
more
install
the
beta
version
from
npm
with
npm
install
dash
g
at
p,
p,
slash,
cli,
dash,
microsoft
365
at
next.
A
A
Picker
are
three
new
and
improved
controls,
so
very
cool
to
see
this
all
continue
to
grow.
Thank
you
to
all
these
great
contributors.
I
know
there's
a
lot
of
folks
working
on
the
reusable
controls
and
making
them
better
and
adding
new
controls.
So
thank
you,
everyone
for
all
the
work
there
and
all
the
improvements.
It
really
makes
a
big
difference
and
excited
to
see
all
of
these
areas
continue
to
grow
and
grow.
So
thank
you
to
everybody
and
last
but
not
least,
our
community
yeoman
generator,
so
we
are
at
generator.
A
116
0
is
the
latest
version
that
is
out.
Angular
11
is
now
supported,
which
is
a
big
improvement
or
a
big
update
there.
So
I
think,
thanks
to
chan,
dani
prajpati
for
all
the
work
there
around
angular
so
appreciate
getting
that
updated
and
in
there
providing
folks
a
great
new
option
for
building
your
sharepoint
framework
solutions
with
angular
other
other
updates,
fluent
ui
to
fabric
seven
ping,
pgs
2013,
vue.js
updates,
styling,
low
dash,
jquery
updates
and
then
the
property
controls
that
we
talked
about
on
the
last
slide
have
all
been
updated
as
well.
A
I
encourage
everybody
to
check
this
out
as
a
great
way
to
jump
start.
Your
project
development
npm,
install
dash
g
at
p,
p,
slash
generator
spfx
to
get
you
the
latest
version
of
the
yeoman
generator
and
then
modern
search,
so
modern
search,
v4
release
build
your
own
customized,
modern
enterprise
search
experience,
ak
dot.
Ms
p
p
dash
search
for
all
the
details
and
samples
and
examples
there,
but
that
is
now
been
released.
So
you
can
check
that
out.
A
Start
building
search
portals
if
you
find
issues
or
have
ideas,
absolutely
report
those
and
encourage
folks
to
get
involved
with
the
search
stuff
as
well
so
v3
support
for
bug,
fixing
docks
are
available,
v3170
released
on
january
16th,
and
that
was
bug
fixes.
So
the
v3
stuff
is
mostly
in
maintenance
mode.
At
this
point
and
v4
is
released
on
january
18th,
so
very
excited
to
have
that
out,
for
everybody
supports
the
graph
search
api
as
well
as
a
sharepoint
search
api.
A
So
you
can
choose
where
to
target
your
searches,
re-architect
it
to
be
modular
and
then
feel
free
to
test
and
provide
feedback.
Of
course,
you
know
always
on
all
our
projects.
We
welcome
and
encourage
your
feedback
and
there
is
no
direct
upgrade
from
v3,
so
it's
just
a
full
full
change
from
v3
to
v4.
So
keep
that
in
mind
as
you
look
to
update
your
search
portals
and
now
spfx
samples
with
hugo,
I.
D
Almost
feel
like,
I
should
be
letting
you
speak
to
it,
but
I'll
make
an
exception,
so
the
spfx
samples
are
repositories
that
allow
you
to
share,
but
also
obviously
fine
samples
that
you
can
use
in
your
day-to-day
coding
activities.
We
have
a
few
samples
in
both
our
extensions
repository
and
our
web
parts
repository
one
new
one
from
michael
mayo,
which
allows
you
to
add
a
whole
bunch
of
folders
all
at
once
in
the
document
library
using
a
single
command.
It's
very
awesome.
D
We
also
have
robin
who
updated
his
machine
translation,
application
extension
which
allows
you
to
translate
pages,
but
he's
actually
made
it
a
lot
easier
to
package
and
deploy
the
solution
on
the
web
part
side.
We
have
the
new
content.
Query
web
part
that
we
demoed,
I
believe
last
call
with
david
and
myself:
we've
added
the
ability
to
add
microsoft,
graph
toolkit
support
to
the
content.
Query
web
part.
There's
new
updates,
also
coming
soon
on
that
web
part,
so
keep
an
eye
for
that.
D
A
C
Let
me
share
my
screen
and
enable
the
video
and
there
we
go,
and
let
me
put
that
one
over
there,
so
we
can
actually
see
everybody
in
the
call
and
let
me
enable
the
video
as
well.
If
I
have
time,
I'm
already
recording
this
stream,
because
I'm
being
smart
this
time,
if
you
can
get
the
everybody
in
the
call
just
saving
few
seconds,
I
think
we
are
hitting
the
max
550
attendees
everybody
waving
everybody
great
to
see
you.
We
can
almost
see
the
sharepoint
monkey
in
the
back
row
as
well.
C
A
D
Joao
mendez
is
a
senior
microsoft,
365,
architect
and
solution,
developer
who's
created
and
submitted
many
amazing
samples,
but
usually
because
of
scheduling
conflicts.
He
rarely
has
the
opportunity
to
present
his
contributions
on
these
calls,
so
today
I'll
be
presenting
one
of
joao's
latest
samples
on
his
behalf.
D
D
You
can
usually
recognize
java's
samples
because
they
always
look
very
professional.
In
fact,
it's
it's
often
very
difficult
to
distinguish
his
web
parts
from
the
out
of
the
box.
Microsoft.
365.,
and
if
you
know
me,
that's
one
of
my
you
know
holy
grail,
is
you
always
want
to
make
sure
that
people
can't
distinguish
first
party
from
third
party
web
parts?
D
So,
like
his
other
samples,
the
code
is
often
deceptively
simple,
and
because
of
this
I
always
recommend
you
take
a
look
at
the
code
to
learn
some
very
useful
development
patterns.
The
web
part
I'm
going
to
be
showing
you
today
supports
themes,
section
background
colors.
It
can
also
be
used
as
a
sharepoint
web
part
as
a
team's
personal
map
or
a
teams
tab.
D
D
D
On
the
right
here
is
usually
see
a
preview
of
what
the
component
is
going
to
look
like.
This
is
obviously
using
sample
data
when
you,
when
you
go
to
the
mgt
playground,
but
you
can
actually
sign
in
and
use
your
own
credentials
to
actually
test
this
and
then
usually
on
the
right
of
the
playground.
You
actually
have
a
place
where
you
can
edit
the
code
and
preview,
but
here's
the
cool
thing
about
the
microsoft
graph
toolkit
is
for
me
to
display
an
agenda.
D
The
only
thing
I
have
to
do
once
I've
set
up
the
graph
toolkit
to
work
in
my
solution
is,
I
can
just
call
the
component
by
going
mgt
dash
agenda.
That's
it
right.
I
can.
I
can
pass
additional
parameters
and
additional
settings,
but
that's
really
it.
In
fact,
joao's
sample
shows
how
to
use
themes
in
the
in
the
extension.
D
The
only
thing
that
we
need
to
keep
in
mind
here
is
that,
because
the
web
part
uses
the
graph
toolkit
and
the
graph
toolkit
uses
your
microsoft
graph
to
require
information,
you
need
to
make
sure
that
you
authorize
your
web
part
when
you
deploy
it
to
have
access
to
the
api.
Now,
unfortunately,
it
was
not
able
to
grab
a
screenshot
before
I
authorized
here.
D
One
thing
I
should
point
out
is
that
it's
actually,
that
page
is
actually
pretty
slow.
When
you
first
go
to
the
page,
it
will
show
everything
as
being
zero,
pending
request,
zero
approve
requests
and
so
on.
Just
take
a
break.
Take
a
few
seconds
and
the
page
will
update
and
then
you'll
see
all
the
information.
D
So
what
would
happen
in
the
normally?
What
would
happen
when
you
deploy
the
web
part
is
you'd
have
to
go
to
the
pending
request
and
approve
all
the
requests
one
by
one,
just
to
authorize
your
web
part
to
have
access
to
this
stuff.
But
that's
pretty
much
all
you
need
to
do
to
use
a
web
part
like
joao's
or
your
own.
Obviously,
but
let's,
let's
show
you
here.
D
So
these
are
the
kind
of
the
the
the
api
requests
that
are
made
by
the
web
part
now
in
joyous
sample
he's
only
accessing
the
calendar
stuff,
but
if
you
want
to
use
the
microsoft
graph
toolkit
like
the
full
extent
of
the
graph
toolkit
components,
there's
obviously
a
few
requests
that
you
would
make.
I
would
recommend
you
only
make
the
api
request
for
the
things
that
obviously
you'll
be
using.
D
I've
already
deployed
the
web
part
and
I've
already
authorized
it.
So
now,
if
I
go
to
a
page-
and
I
just
search
for
the
mgt
events-
webpart
here's
what
it
does
right,
it
automatically
goes
and
gets
my
events.
I
know
it's
hard
to
show
the
full
thing
here,
but
it
retrieves
my
events
and
then
displays
them
in
a
fancy.
Calendar
now
draw
again
always
applies
extra
extra.
D
D
If
you
look
at
the
properties
that
the
web
part
does
it
allows
you
to
specify
a
title,
and
you
can
also
specify
how
many
days
you
want
to
show
one
of
the
things
that
joao
does
is
he
makes
the
web
part
the
property
pane
non-reactive?
That
means
that
it's
not
going
to
refresh
every
single
time.
You
change
something.
It's
only
going
to
refresh
once
you
click
apply
here.
D
I
don't
have
any
more
events
for
the
next
eight
days
so
or
more
than
eight
days,
so
it
doesn't
matter
for
me
to
change
this,
but
the
other
thing
that
the
web
part
does
is.
If
I
go
to
the
section
which
hosts
the
web
part
here-
and
I
change
the
section
section
background
color
you'll
notice
that
the
web
part
is
actually
aware
of
the
section
colors.
D
So
that's
a
very
cool
feature
here
that
I
recommend
you
try
to
do
in
every
web
part
because
again
you
don't
have
control
over
what
colors
people
will
be
using
in
their
in
their
sharepoint
site
or
where
people
will
be
dropping
the
web
parts.
So
at
the
very
least,
you
should
make
sure
that
it's
going
to
look
good
in
whatever
section
theme
you're
using
all
right.
Let's
go
back
to
the
code
now,
there's
lots
of
lots
of
areas
of
code
and
we
have
to
go
fast.
D
D
The
first
thing
that
you
do
in
the
sample
is
that
you
have
to
go
to
your
package.json
and
you
actually
have
to
tell
it
that
you're
going
to
be
using
mgt
dash
react
now.
The
microsoft
graph
toolkit
is
available
as
a
non-react
component
or
a
non-react
package
and
a
react
package.
Joao
uses
the
react
package
which
makes
it
even
easier
and
obviously
react
solution
to
use
this,
so
you
would
obviously
go
npm
install
at
microsoft.
D
D
Luckily,
the
microsoft
craft
toolkit
has
the
concept
of
providers
right,
so
there's
always
a
provider
that
provides
authentication
and
there's
also
a
sharepoint
provider
in
this
case
that
uses
the
sharepoint
contacts
to
pass
the
credentials
to
the
microsoft
graph
toolkit.
So
this
is
the
first
thing
you
do
in
your
web
part.
Is
you
register
the
provider
that
you
want?
If
you
were
using
teams,
you
would
obviously
use
the
teams
provider
to
do
this
to
make
the
web
part
work
with
with
the
themes.
D
Joao
uses
different
themes
that
that
he's
predefined
for
a
default,
dark
and
high
contrast.
You
could
use
a
different
approach
to
do
this.
I
like
his
approach
because
he
ultimately
gets
to
control
a
subset
of
colors
in
in
his
web
part
and
then
in
your
web
part
itself.
You
just
say:
okay,
I
want
to
support
a
theme
provider.
I
want
to
capture
the
current
theme
variant
and
then
in
the
on
initialize
of
the
web
part.
D
We
we
go
to
the
mgt
providers.
We
say
the
global
provider
for
all
the
mgt
webparts
are
using
the
sharepoint
provider
and
we
pass
the
context
of
the
current
web
part.
Now
there
is
a
little
issue
with
this,
which
I
you
know
the
microsoft
craft
toolkit
team
is
aware
of.
Is
that
if
you
have
more
than
one
web
part
on
the
page
that
uses
the
microsoft
graph
toolkit
because
of
the
concept
of
global
providers,
you
might
have
some
some
issues
here
with
having
multiple
microsoft,
craft
toolkit
webparts.
D
I'm
pretty
sure
that
this
is
something
that's
that's
going
to
be
solved
soon,
but
that's
something
to
be
aware
of
now,
because
we
want
to
make
the
web
part
be
aware
of
themes.
We
use
the
again
the
theme
provider
and
we
use
the
theme
variant
to
say,
try
to
get
the
current
theme
and,
if
there's
an
event
where
the
theme
changes,
please
let
us
know
by
calling
the
theme
changed
event.
D
Finally,
in
the
web
part
joao
uses
a
little
bit
of
logic
here
to
determine
whether
we're
currently
in
a
microsoft
teams
context,
and
if
we
are,
he
actually
applies
the
themes
accordingly
for
the
for
the
colors
all
right
and
then
so.
This
is
the
the
theme
change
event.
So
we
just
capture
the
current
theme
and
we
re-render
the
web
part.
It's
actually
very
straightforward
to
do
this,
that's
why
I
think
that
everyone
should
do
this
in
their
web
parts
and
then
this
is
the
part
where
we
apply
the
theme.
D
D
D
If
you're
using
the
react
version
of
the
microsoft
graph
toolkit,
you
don't
need
to
prefix
everything
by
mgt.
It
happens
to
know
right,
I'm
I'm
here,
I'm
the
agenda
component
and
it
knows
how
to
render
it
and
then
in
the
web
part.
I
know
this
is
very
deceptive,
but
in
the
web
part
all
the
draw
does
he
passes
the
agenda
control.
He
tells
number
days
that
he
wants
to
display
and
he
passes
a
template.
D
One
of
the
cool
things
about
mgt
is
you:
can
template
templatify
templatificate,
whatever?
The
word
is
to
actually
control
how
the
events
are
rendered
and
that's
important,
because
you
don't
always
want
to
just
use
the
standard
layout
and
that's
definitely
what
chihuahua
does
here.
So
he
passes
an
event,
template
and
the
event.
Template
is
actually
created
in
the
mgt
event
component
and
all
he
does
and
I'm
not
going
to
spend
too
much
time
on
this.
D
He
also
does
the
same
thing
for
mgt
person.
So
all
the
attendees
on
the
call
are
on
the
accounter
and
he
does
that
by
simply
using
the
person
component
from
the
microsoft
graph
toolkit
and
he
just
passes
the
email
address
of
the
user.
Id
you'll
notice
here
he's
also
got
a
flag
to
show
whether
the
person
is
actively
present
or
not,
but
it's
actually
read
right,
so
I
know
I've
gone
through
a
lot
of
code.
I
hope
that
you'll
you'll
be
encouraged
to
go.
Look
at
the
code.
D
You
can
find
the
code
at
this
url
here.
If
you
don't
have
the
time
to
write
the
url,
you
can
just
go
to
aka.ms
and
just
look
for
it.
If
you
want
more
information
about
the
microsoft
craft,
toolkit
go
to,
mgt.dev
is
probably
the
easiest
way
to
get
started
and
then,
if
you
want
to
send
your
kudos
to
joao
for
the
amazing
work,
he's
been
doing.
That's
his
twitter
account
here
and
if
you
want
to
complain
about
stuff,
you
can
definitely
reach
out
to
me
at
bernieage.com.
A
Awesome
work,
as
always
thank
you,
hugo
very
cool
sample
to
see
that
and
great
use
of
the
microsoft
graph
toolkit,
which
is
a
fantastic
way
to
get
a
lot
of
amazing
functionality
into
your
apps
quickly
built
around
the
microsoft
graph,
so
very
cool
stuff.
Next
up
is
jerry
jerry
if
you're
ready
to
go,
go
ahead
and
take
over
the
presentation.
E
So
hello
and
welcome
everyone.
My
name
is
jerry
asser,
I'm
a
microsoft
mvp
for
office,
apps
and
services.
I
work
at
dxe
technology
as
a
collaboration
architect.
So
today
I'm
going
to
show
you
a
very
interesting
sample
that
I
developed
for
an
internal
at-home
scenario
that
I
faced
in
the
in
the
last
holidays.
So
basically
in
the
next
10
15
minutes
I'll
show
you
how
I
developed
this
web
part.
So
the
the
basic
idea
behind
this
sample
was.
E
You
know,
as
I
told
everyone
last
time,
that
I
was
actually
I'm
not
a
developer,
but
I
you
know
like
to
learn
things
especially
around
sharepoint
framework
development.
So
while
I
was
learning
it,
I
saw
my
kids
actually
searching
on
the
internet
for
the
crazy
soccer
videos
or
the
recent
soccer
highlights,
but
so
they
were
going
to
youtube
and
they
were
going
to
the
you
know,
google
or
bing
and
searching
for
those
highlights.
E
But
during
that
process
I
I
saw
that
they
were
actually
getting
a
link
to
the
sites
which
were
not
actually
safe
for
the
kids,
the
the
sites
have
you
know,
dialogues
and
alerts
and
messages,
and
some
some
pictures
that
definitely
should
not
be
visible
to
you
to
younger
to
some
kids.
So
that's
where
I
thought
of
building
something
that
where
they
can
go
and
safely
browse
the
content
without
worrying
about
those
links.
E
E
So
I
thought
that
I
can
build
something
like
a
hierarchical
component,
where
I
can
display
those
videos
in
a
certain
ways
that
they
can
easily
browse
them
and
they
can
see
almost
all
the
detail,
that's
available
by
the
by
the
api
so
and
I
ended
up
finding
a
github
repo
that
has
link
of
a
lots
of
public
api
that
have
been
categorized
by
the
type
of
ports,
entertainment
images,
pictures,
videos
and
other
stuff.
So
I
was
able
to
grab
that
api,
which
is
provided
by
sportback.
E
So
as
an
overview
again,
just
like
I
said
this
web
part
is
just
a
very
basic
example
of
how
we
can
call
an
external
api
into
an
spfx
web
part.
So
nothing
new.
If,
if
you,
if
you're
learning
spfx
as
a
starter,
your
first
thing
you'll
do
is
use
a
fetch
api.
So
you
will
see
that
how
you
can
call
something
from
from
a
url
and
then
display
it
on
the
screen.
E
The
the
basic
data
that
is
exposed
by
the
api
is
just
the
title
of
the
highlight:
the
the
teams
that
are
involved,
the
the
actual
videos,
if
you
have
one
or
many,
the
the
highlights
work
in
different
differently
in
in
the
in
the
highlight
world.
They
are
shown
as
a
full
highlight
of
the
game,
so
you
can
see
something
like
10
to
15
minutes
video,
where
everything
is
much
more
detailed
or
if
you
are
much
of
you
know,
like
action
viewer,
you
can
actually
go
and
see.
E
E
Once
you
have
the
data
available,
you
have
a
couple
of
options
to
display
that
you
can
develop
everything
by
yourself.
You
can
actually
build
the
ui
by
for
abusing
your
component,
so
you
can
have
a
video
component
that
shows
the
the
video
and
then
you
can
have
a
video
list
component
where
you
can
bind
your
the
video
to
the
screen,
or
there
was
a
second
option
where
they
are.
You
know
the
api
is
providing
an
add-in
or
a
widget
that
you
can
easily
embed
into
the
page.
E
So
initially,
my
development
was
mostly
around
building
everything
custom,
but
then
I
realized
that
the
ui
was
much
simple.
It
was
there
were
not
many
options
for
me
to
to
show,
or
it
will
take
a
lot
of
effort
for
me
to
as
a
starter,
to
actually
build
a
great
ui
and-
and
that's
where
I
I
actually
dropped
the
question
on
the
on
the
samples,
github,
repo
and
and
thanks
for
hugo,
who
actually
replying
to
me
about
something
that
was
really
fantastic.
E
So
you
can
see
on
the
screen
that
I
use
the
film
strip
control
that
basically
allows
us
to
display
that
information
in
much
much
richer
fashion,
without
worrying
about
any
of
the
complexities
behind
how
you
you
display
the
information.
So
I
ended
up
just
reading
the
data
and
using
the
the
sample
that
was
provided
by
hugo
on
his
github
repo
and,
of
course,
one
of
his
great
blog
series
about
how
you
can
start
developing
a
great
ui
using
sharepoint
framework.
I
was
able
to
get
started
right
away
when
I
started
working
from
scratch.
E
I
found
that
it
would
be
hard
for
me.
So
again,
I
went
back
to
the
samples
gallery
found
one
of
the
one
of
the
web
part
that
was
actually
developed.
I
think
it
was
a
meeting
web
part
that
was
developed
some
time
ago
and
I
looked
at
that
code
ran
that
sample
and
understood
how
those
links,
work
and
eventually
was
able
to
develop
a
pretty
nice
looking
web
part
in
the
end.
E
E
So
what
what
feedback
I
got
based
on
their
testing
is
that
that
the
the
full
view
is
or
flat
mode
is
definitely
helpful
because
they
can
see
the
video
without
maximizing
it.
So
I
left
it
there
and
that
flat
screen
is
actually
is
using
the
custom
paging,
and
I
will
have
to
go
back
and
tell
you
that
again,
I
did
not
created
it
from
scratch.
I
started
the
the
basic
architecture
of
how
paging
worked,
how
you
basically
collect
the
data
in
an
object,
and
you
know
slice
it
based
on
your
paging.
E
Once
I
did
the
basic
paging.
I
went
back
and
found
another
sample
on
the
sample
gallery
and
I
realized
how
it
works.
I
made
it
some
testing
and
eventually
use
the
same
idea
and
implemented
it
in
the
web
part
so
again,
a
great
way
of
reusing
the
component
that
the
community
build
and
and
develop
it.
So
again,
I
if
I
have
to
build
something
for
my
work
or
something
else.
I
can
actually
use
the
same
sample.
So
let
me
just
go
ahead
and
show
you
how
the
web
part
works.
E
E
I
will
leave
it
in
the
in
the
slides,
so
you
can
see
that
there's
a
title
and
there's
a
url
and
thumbnail
there's
a
date,
and
then
there
are
two
sites
that
the
played
the
competition
name
and
video,
and
you
can
see
that
the
video
is
actually
highlight
and
in
some
of
the
cases
the
video
will
be
highlight
and
then
there
will
be
a
sub
level
where
they
will
be
have
more
videos
available
there.
So
you
can
actually
plug
them
directly
from
your
code.
E
You
can
see
that
there
is
definitely
a
lot
of
a
chance
of
improvement
like
the
idea
of
having
ability
to
search
based
on
competition,
maybe
having
a
drop
down.
That
shows
all
the
unique
competitions.
So
it's
something
that
I
did
for
fun,
so
I
didn't
vent
for
it.
But
definitely
anybody
could
do
that
because
all
the
information
is
available
in
terms
of
the
github
repo.
It
was
right
here.
This
is
the
api.
You
can
go
there
and
search
for
github
public
apis,
and
you
can
see
that
there
are
lots
of
apis
available.
E
You
don't
have
to
use
the
git
hub
api
for
your
first
web
part
that
almost
everybody
use,
so
you
can
pick
up
any
of
the
apis
from
here
and
then
play
with
it,
because
every
api
works
differently
in
terms
of
how
you
call
it.
So
let's
go
back
to
the
actual
web
part.
So
this
is
the
page
I
just
created.
So
let
me
add,
a
web
part
so
again
I'll
search,
click
on
plus
and
search
for
software
and
here's
the
web
part.
E
So
once
I
add
the
web
part-
and
you
know-
I
think
I
already
had
it
at
the
web
part
on
the
page
before
so
it
automatically
picked
up
all
the
properties.
But
let
me
just
show
you
how
it
works.
So
if
I
click
on
the
edit
properties,
the
the
first
thing
you
will
notice
that
I
am
using
some
of
the
spfx
reusable
components
on
the
page
other
than
the
the
film
strip,
which
is
the
ui
fabric.
E
But
you
can
see
on
the
right
that
I
can
have
a
title
of
the
web
part
that
will
be
visible
on
the
screen.
I
have
a
paging
slider,
so
I
can
just
control
how
many
videos
I
want
to
see,
but
this
control
is
more
applicable
to
the
the
flat
mode.
So
if
I
enable
the
flat
mode,
you
can
see
that
this
goes
basically
to
the
standard
full
size,
video
which
I'm
using
the
full
width
of
the
available
zone.
E
So
you
can
change,
you
can
select
that
you
know
and
and
control
how
many
videos
you
want
to
see.
So
you
can
set
it
to
one
or
two,
and
then
your
pager
will
automatically
show
that.
So
let
me
show
it
back
to
set
it
back
to
the
filter
mode
and
once
you
click
publish,
you
can
then
see
the
the
videos
you
can
see
that
you
can
scroll
to
the
right.
The
code
base
that
I
have
is
little
older
than
the
code
base.
That's
on
github
github
is
a
little
bit
newer.
E
E
Definitely
not
I'm
going
to
play
versa,
so
you
can
see
that
when
I
click
on
play
it's
playing
the
video
right
now
I
can
hear
the
audio
is
there,
you
might
not
be
able
to
hear
it,
but
it's
basically
full
fidelity
view
you
can
click
on
full
screen.
You
know
there
are
do
have
some
icons.
There
links
there
that
are
displaying
because
of
the
widget,
and
you
know
using
some
cool
logic.
You
can
actually
hide
them
if
needed.
E
One
great
thing
about
this
widget
is
that
it
actually
shows
you
any
available
live
games
that
are
happening
right
now,
so
any
free
games
that
are
happening
will
appear
as
green
on
the
top,
and
if
you
click
on
this
link,
it
will
take
you
to
that
video
link
and
basically
plays
that
live
game
as
well.
So
it's
also
a
great
way
of
accessing
those
videos
and
the
paging,
of
course
works
for
them,
as
I
showed
before
works
on
the
more
the
the
flat
screen
mode.
So
this
is,
you
know
nothing
special
here.
E
E
So
it's
basically
high
fidelity
video,
though
another
thing
that
I've
noticed
that
on
on
something
like
youtube,
you
find
videos
of
the
game
that
are
very
recently
finished,
but
they
are
very
low
quality.
But
I
found
that
this
api
provide
all
the
videos
in
hd,
so
you
can
quickly
watch
the
highlight
and
move
on
all
right.
So
with
that,
let
me
jump
into
the
the
implementation
of
how
I
did
that.
E
E
E
So
again,
as
a
starter,
you
can
use
fetch
api
or
you
can
use
xcs,
I'm
basically
using
it,
because
it's
the
code
look
much
simpler
and
once
you
have
the
the
data
you
can,
I'm
putting
it
in
my
in
the
web
part
state
so
that
I
don't
have
to.
I
can
easily
slice
it
and
page
it
once
I
have
the
the
data
ready,
I'm
actually
passing
it
to
the
next
component,
which
is
the
the
component
that
displays
the
data.
So
there
are
two
different
ways
that
I'm
showing
it.
E
So
you
can
see
that
I
have
the
page
items.
The
page
items
are
actually
the
the
smaller
chunk
of
the
the
page.
So
if
I
say
from
video
one
to
five
th,
there
will
be
a
loop
to
handle
the
cup
of
the
pages,
so
you
can
see
that
I'm
adding
show
showing
the
the
buttons
on
the
page
and
the
same
logic
is
used
for
displaying
the
the
videos
you
can
picture
right
here.
So
if
the
video
is
in
flat
mode,
you
can
see
that
I
am
using
the
video
list.
E
E
C
Excellent
great
job,
terry
related
on
that
one
and
I'd
like
to
note
that
it's
not
necessarily
a
business
scenario
but
again,
there's
a
lot
of
good
cool,
learnings
related
on
react,
components
and
status.
Switching
and
all
of
that
in
that
sample
as
well
and
luis,
I
I
think
you
have
relatively
important
and
really
cool
but
and
not
super
complex
scenario.
Is
that
the
case
right,
yeah,
luis?
Let's
jump
on
your
side.
F
F
You
can
find
me
on
twitter
at
luis
manus,
so
feel
free
to
reach
out
and
in
this
demo
I'm
gonna
show
you
how
we
can
send
notifications
on
microsoft,
themes
from
using
the
graph
api
and
from
spfx
web
part.
The
sample
is,
is
already
published
at
the
url
below
so
feel
free
to
get
the
code
and
and
give
it
a
try.
F
F
The
icon,
which
actually
as
far
as
I've
seen,
is
the
teams
application
that
is
sending
the
notification,
then
actor
plus
reason
the
the
actor
who
did
the
activity
and
any
test
with
the
reason
of
the
notification,
a
time
stamp
and
more
text
with
the
location
and
the
and
the
test
preview.
The
location
usually
is
something
like
your
themes
and
channel
and
and
so
on,
and
all
of
this
is
pretty
well
documented
in
the
in
the
url
in
below
as
well.
F
Teamsactivity.Send,
okay
and
also
the
application,
the
team's
application
manifest
needs
1.7
or
greater,
and
when
you
are
creating
your
team's
manifest,
you
need
to
specify
a
couple
of
nodes.
One
is
the
web
application
info,
and
in
this
section
you
need
to
specify
the
id
of
the
azure
active
directory
application
and
also
the
the
resource,
which
is
actually
the
the
reply
url
in
the
app
in
in
azure
active
directory
and
also
the
themes.
F
And,
finally,
you
have
to
specify
also
in
the
manifest
the
activity
section,
finding
the
kind
of
activities
activity
types
that
you
want
to
use
when
sending
the
notification
and
for
each
activity
type.
You
need
to
specify
the
type
which
is
just
a
unique
name
in
the
in
the
manifest
a
short
description
and
then
the
important
part,
which
is
the
template
test.
F
F
So
once
you
have
the
requirements
and
you
can
send
notifications,
for
instance,
to
a
specific
user
and
then
you
have
the
the
endpoint,
this
is
a
screenshot
from
postman,
so
you
can
see
we
are
calling
the
user
sendpoint
with
the
user
id
and
then
teamwork
send
activity
notification.
This
is
the
full
endpoint.
If
we
want
to
notify
the
specific
user
and
then
we
have
to
provide
the
the
body-
and
this
is
the
json,
so
we
have
the
topic
section
with
source
property.
F
The
source
either
has
to
be
entity
url
or
test
the
value
which
is
the
topic
value
and
basically,
if
the
source
is
entity
url,
then
the
value
needs
has
to
be
a
microsoft
graph.
Url
like
microsoft.themes
whatever,
or
something
like
that,
and
if
you
specify
test,
then
it's
going
to
be
just
a
plain
test
value
and
finally,
the
web
url,
which
is
optional.
F
So
in
this
case,
for
instance,
if
the
template
test
was
actor
created,
workspace
workers
pay
title,
then
you
can
provide
the
workspace
title.
The
actor
is
is
out
of.
The
box
is
always
be
replaced
by
the
entity
that
is
sending
the
notification
okay,
and
if
we
want
to
send
the
notification
to
a
team,
then
we
are
posting.
The
request
to
a
different
endpoint
is
by
the
way
this
functionality
is
only
available
in
the
veta
endpoint.
F
F
As
you
can
see
here,
I've
already
registered
an
app
and
I've
already
configured
the
permissions
to
be
able
to
send
notifications,
as
you
can
see
here,
teamsactivity.cent
and
if
we
go
back
to
the
manifest
the
resource
is
my
reply:
url
and
the
different
activities.
I've
already
registered
a
couple
of
activities,
workspace
created
and
just
read
this
okay
with
the
template
test
and
and
so
on.
F
And
now
there's
a
different
notification
and
if
you
click
here
now,
you
are
being
redirected
to
a
specific
message,
and
this
is
because,
if
we
take
a
look
to
the
body
in
this
case
the
source
is
text
and
not
entity
url.
So
we
are
able
to
provide
that
url
that
we
want
to
be
redirected.
The
user,
when
you
click
in
the
notification
and
keep
in
mind
that
at
this
stage
the
url
must
start
with
teams.microsoft.com.
F
F
F
Already
seen
this
and
let's
take
a
very
quick
look
to
the
main
code.
Basically,
the
web
part
itself
has
been
installed
as
a
team
staff,
so
there's
a
manifest
for
the
web
part
and
in
the
manifest
I'm
specifying
the
web
application
info
section.
In
this
case,
the
id
is
the
one
from
the
sharepoint
online
application
that
you
already
have
installed
in
your
azure
active
directory
and
also
the
different
activity
types
that
you
want
to
define
in
the
in
the
manifest
so
well.
F
The
web
part
is
just
loading,
a
react
component
and
sending
some
properties
from
the
from
the
context.
As
he
already
mentioned.
We
are
also
using
here
the
microsoft
graph
toolkit
the
react
wrapper.
So
hugo
has
given
you
all
the
information,
so
I'm
using
here
the
people
picker
as
you
can
see
from
the
mgt
react,
and
I'm
just
configuring
the
component
to
solve
users
that
are
part
of
the
team.
F
This
is
important
because
if
you
try
to
send
a
notification
to
a
specific
team
for
a
user,
that
is
not
a
member
of
the
team,
you're
gonna
get
an
exception
as
well.
So,
in
this
case,
I'm
filtering
the
the
different
users
by
the
ones
that
are
part
of
the
team
and
well
all
the
magic
is
in
this
function.
That
is
pretty
much
the
same
as
we
already
already
seen
in
postman.
F
So
we
post
to
the
specific
themes
with
the
json,
the
activity
type,
the
file
in
the
manifest
the
test
that
I've
already
entered
in
the
ui
and
the
specific
user
id
that
I
want
to
to
notify
and
using
the
graph
client
from
the
sharepoint
framework.
We
are
doing
the
post
and
sending
the
notification.
Well,
that's
all.
Actually
the
web
bar,
maybe
is
not
very
interesting,
but
I
guess
you
can
imagine
quite
a
few
scenarios
where
you
want
to
send
notifications,
and
I
think
this
is
actually
pretty
cool
to
to
have
this
endpoint
available.
A
Thank
you,
english
wow.
I
sounded
really
loud
there,
so
hugo
jerry
luis.
Thank
you
very
much.
Awesome
demos
today
really
appreciate
it
really
great
stuff.
If
you
are
interested
in
demoing,
please
reach
out
to
myself
or
visa
would
love
to
get
you
on
a
future
call.
This
recording
will
be
available
in
24
hours
on
the
microsoft
365
community
youtube
channel.
You
can
follow
us
on
twitter.