►
From YouTube: SharePoint Framework Community Call – 6th of May, 2021
Description
SharePoint PnP Community - SPFx & JS SIG call on May 6. Demos: 1) Adding support to add video with a text to modern pages with this video banner web part, 2) Building company stories web part for story experience, and 3) Building react groups and teams web part for aggregating detailed information for end users. Latest PnP project releases – CLI for Microsoft 365 v3.9.0, Reusable SPFx React Controls v3.1.0 and Property Controls v3.1.0, and SharePoint Framework v1.12.1. Six PnP SPFx samples delivered in last 2 weeks. 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: https://aka.ms/m365pnp/community/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
You
know
anything
client-side
development.
We
absolutely
would
love
to
host
your
demos,
please
reach
out
to
myself
or
vasa,
and
that
could
be
anything
you're
working
on
for
your
customers
or
your
companies.
Of
course,
you
know
maybe
check
with
folks
make
sure
it's
appropriate
to
demo
it
publicly,
but
I
would
love
to
have
your
demos
on
here
as
well.
You
can
always
contribute
to
any
of
our
repositories
on
github.
A
Contributions
can
take
the
form
of
reporting
issues,
submitting
pull
requests
or
helping
others
if
they
have
issues
and
questions-
and
you
have
a
few
minutes
and
happen
to
know
an
answer-
that's
always
a
great
way
to
help
out
as
well.
And
finally,
we
always
appreciate
your
feedback
feedback
across
the
entire
program.
So
how
are
these
calls?
How
is
our
documentation?
A
Where
can
we
help
and
positive
feedback
is
okay
too,
because
if
you
like
something
we're
doing,
perhaps
we
could
do
a
little
bit
more
of
it.
So
thank
you
to
everybody.
That's
continued
to
give
us
feedback
and
then,
of
course,
we've
got
our
giant
pedro
links.
The
important
link
here,
aka
dot,
ms
slash
pnp,
that
is
the
patterns
and
practices
landing
page
that'll,
get
you
links
to
all
of
this
other
stuff,
as
well
as
information
about
the
rest
of
our
program
offerings.
That's
going
to
include
our
developer,
videos,
which
are
scenario-based
videos.
A
Typically
around
author,
creating
spfx
apps
or
calling
microsoft
graph
lots
of
great
videos
there
for
development
resources.
Community
videos
are
going
to
be
recordings
of
all
our
various
community
calls
such
as
this
one,
our
other
special
interest
groups,
our
monthly
calls
and
others
love
to
have
folks
catch
up
there
if
you've
missed
a
call
or
weren't
able
to
join,
live
and
then
open
source.
We've
got
a
ton
of
great
github
organizations
that
are
accepting
your
feedback
or
your
contributions
as
a
sharepoint
pnp
office,
dev
and
microsoft.
A
Graph
orgs
all
accept
and
encourage
your
participation.
So
if
you've
got
interest
in
any
or
all
of
those
areas,
please
jump
in
and
help
out
as
well.
We've
got
a
ton
of
great
sample
galleries,
teams,
spfx
power
platform,
spf,
x,
extensions
and
then
list
formatting
samples
are
all
available
and
that's
certainly
the
first
place.
I
go
when
I'm
working
on
a
solution
or
need
to
figure
out
a
problem.
Is
I
go
check
out
all
the
great
samples
across
those
repositories?
A
A
B
There
thank
you,
patrick
well
friends,
as
an
open
source
and
inclusive
community.
We
want
everyone
to
take
advantage
of
and
contribute
back
to,
the
resources
that
are
available
to
them,
but
we
understand
that
there
are
hurdles
that
can
get
in
the
way,
sometimes
things
such
as
how
to
navigate
github,
how
to
create
documentation
that
is
desired
and
needed
by
the
community.
B
We
have
a
number
of
cheering
as
caring
sessions
which
are
live,
hands-on
opportunities
for
you
to
get
involved,
learn
how
to
utilize
some
of
these
tools
and
resources
and
contribute
back
as
well
as
using
them.
We
have
a
wide
spectrum
of
topics,
as
you
can
see,
we're
not
going
to
go
through
every
one
of
them.
One
of
the
more
popular
has
become
our
ama,
so
you
see
we're
adding
more
of
those.
We
just
had
a
power
platform
samples
ama
yesterday
that
went
great.
B
We
have
a
tech
community
ama
next
week
after
the
monthly
call
and
in
june
we're
going
to
have
microsoft,
graph
and
mgt
amas,
along
with
another
teams,
development,
ama,
really
popular
everyone's
really
enjoying
the
collaboration.
All
live,
hands-on
sessions,
safe
space
opportunities
to
ask
questions.
None
of
them
are
recorded.
We
walk
you
through
together
how
to
take
advantage
of
these,
so
please
join
aka
dot.
Ms
forward
sharing
is
caring,
patrick
back
to
you.
A
Thank
you
david.
The
sharing
is
caring.
Sessions
really
are
fantastic.
So
if
you
have
questions,
it's
a
great
place
to
come
and
ask
those
questions,
get
some
feedback
and
just
learn
together,
so
great
work
by
the
folks
putting
on
those
sessions
and
great
work
by
everybody
attending
those.
So
thank
you.
Thank
you.
Thank
you
for
that,
and
now
we've
got
sharepoint
framework
updates
from
visa.
C
Cool,
let's
do
a
quick
creek
up
in
here.
So
last
week
we
announced
sharepoint
framework
1.12.1
as
the
latest
version
of
sharepoint
framework
after
doing
a
few
weeks,
long
per
public
preview
on
that,
so
making
sure
that
there's
no
last-minute
surprises
or
regressions
and
things
are
looking
actually
really
good
on
that
one.
So
we're
not
aware
of
any
critical
issues
within
the
112
one
release,
so
you
can
safely
upgrade
on
that
one
and
there's
a
lot
of
new
features
available,
all
documented
in
the
docs,
the
road
ahead
and
the
future
features.
C
So
in
build
we'll
talk
about
more
on
the
upcoming
microsoft
viva
connections,
extensibility
options
openly
and
will
actually
open
up
a
public
preview
on
some
of
these
capabilities.
So
starting
from
build,
which
is
in
the
end
of
may.
You
will
get
more
insights
on
on
what's
happening
in
microsoft,
viva
and
the
extensibility
model
in
microsoft,
viva
it
will
be
spfx
not
only
for
web
parts,
but
also
new
mobile
native
mobile
based
extensibility.
C
There's
a
lot
of
teams
improvement,
because
teams
is
being
a
big
big
big
focus
area
for
microsoft
in
general
and
spfx
is
targeting
there
as
well.
Not
taking
away
to
portals
and
pages
but
making
sure
that
you
can
actually
share
point
as
a
team's
extensibility
platform,
we're
looking
as
an
example,
potentially
on
on
removing
requirements
of
having
even
a
bot
required
for
microsoft,
teams,
meeting
applications
and
all
of
that
stuff.
So
there's
a
lot
of
a
lot
of
things.
C
What
we're
looking
into
doing
there
and
then
obviously
tooling
improvements
and
updates
as
an
example,
the
microsoft
teams
toolkit
will,
in
the
future,
support
sharepoint
framework
more
on
all
of
this
later
within
the
spring
and
in
the
build
announcements
that
was
maybe
a
teaser
with
some
never
mind.
Let's
not
actually
worry
about
that,
and
then
the
store
modernization
is
an
area
where
they're
investing
as
well.
C
So
this
is
basically
what
we're
looking
into
doing
is
that
the
sharepoint
framework
is
the
easiest
way
of
actually
building
your
enterprise
solutions
to
microsoft.
365.,
if
you
have
an
existing
website
existing
sas
application,
maybe
it
doesn't
make
sense
for
you
to
start
from
scratch
when
we're
implementing
a
web
part
or
an
a
component
or
personal
application
in
themes.
D
Awesome
so
we
have
2.5.0
scheduled
for
may
14th.
We
have
several
bug
fixes
on
deck,
there's
a
big
pr
that
will
be
merging
in
the
next
week
or
so
that
has
a
bunch
of
bug
fixes
for
isolated
runtimes.
So
that's
coming.
We
have
some
possible
new
graft.
Endpoints
for
find
rooms,
looks
we
just
got
to
get
some
documentation.
Things
tightened
up
on
that
and
that
will
be
in
a
new
repost
api
for
sharepoint.
So
for
the
client-side
excuse
me
pages
for
a
repost
news
item.
D
We
have
the
api
enabled
for
that,
so
that
all
is
coming
in
2.5
and
scheduled
for
may
14th.
Also,
v3
development
is
underway.
There
is
now
a
v3
branch,
which
is
some
suspect
at
best.
Nothing
is
going
to
work
in
it.
Let's
put
it
that
way,
but
you
can
see
sort
of
the
the
doodling
and
noodling
that
patrick
and
I
are
are
working
on
in
there
so
feel
free
to
check
out
and
and
also
still,
we
have
the
pinned
issue
for
number
1636,
which
is
the
v3
plans.
D
It's
an
overview
and
links
to
all
the
discussion,
things
that
we're
not
really
taking
a
lot
of
feedback.
At
this
point
we
kind
of
have
our
plan
solid
and
we're
moving
forward,
but
that
is
still
there
and
you
can
take
a
look
at
that
and,
as
always,
follow
us
m365pmpjs
on
twitter
and
any
issues.
Please
put
them
in
the
issue
list.
A
So
that's
great
new
capability
there
to
see
some
work
being
done
for
viva
connections,
extensibility
and
then
adding
site
app
permissions
or
managing
site
app
permissions
so
very
excited
to
see
that
as
well
new
sample
scripts,
of
course,
available
so
check
those
out.
You
can
always
install
the
latest
version.
Npm
install
dash
g
at
pmp,
slash,
cli,
microsoft,
365
at
latest
and
for
all
of
your
documentation
or
understanding
needs
ak
dot.
Msl
cli
m365
love
to
see
the
continued
evolution
of
the
cli.
A
Moving
forward
to
the
reusable
components
we
have
several
different
sets
of
components
now,
there's
kind
of
a
matrix
of
components.
So
we
have
the
react
controls
these
are
controls
designed
to
be
used
in
the
body
of
your
web
parts
or
application
customizers.
There
are
two
different
packages:
227
supports
the
spfx
1.11
or
up
to
spf,
x,
1.11,
and
then
the
3.1
is
for
spfx
1.12.1
and
likely
forward
from
there.
A
So
two
sets
of
controls
there
that,
as
as
far
as
I
understand,
are
exactly
the
same
other
than
just
the
supported
spfx
version
differences.
So
a
bunch
of
new
controls
bunch
of
control
fixes.
This
is
another
space.
I'm
super
excited
to
see
the
continued
evolution
and
work
from
the
community
on
it.
Just
keeps
getting
better
and
better
month
after
month,
and
then
we
have
the
react
property
controls.
A
These
are
controls
designed
to
be
used
in
the
edit
pane
of
your
web
part.
So
we
have
2.6,
that's
for
spfx,
1.11
and
below,
and
then
three
one
zero
is
for
spfx,
1.12.1
and
likely
for
the
future.
So
just
be
aware
of
those
version,
differences
for
the
version
of
spfx
you
might
be
working
on,
but
otherwise
the
the
control
and
using
the
controls
is
the
remains
the
same.
A
So,
thanks
to
all
the
contributors
there
who
have
contributed
over
the
last
month
to
the
reusable
controls,
this
is
another
area
that,
like
I
said,
we
could
see
continued
growth
and
expansion
and
enhancements
really
exciting.
So
thank
you
to
everybody
for
jumping
in
there
and
finally
svfx
generator.
This
is
a
community-based
yeoman
generator
designed
to
create
spfx
packages
with
all
of
the
same
underlying
dependencies,
so
you're
getting
a
quote-unquote
real
spfx
solution.
A
C
Yeah,
I
think
we're
closing
in
50,
I'm
already
recording
the
screen,
but
let's
do
some
hand
waving
everybody.
So
thank
you,
everybody,
I
think
that's
50,
that's
the
full
class
thanks
everybody
for
being
part
of
the
community.
You
are
absolutely
awesome
and
thank
you
for
helping
on
on
making
things
happen
and
let
giving
us
feedback.
That's
the
super
important
piece,
but
now
that's
it.
I
will
clip
a
picture
out
of
that
one.
Thank
you!
Everybody
and,
let's
move
into
the
demo
section
and
who
do
we
have
first
patrick
and
with.
A
F
All
right
so
modern
pages,
video
banner
in
this
demo,
I
will
show
you
and
prove
how
easy
it
is
to
build
a
nice
looking
group
part
with
spfx
and
the
pnp
libraries.
Before
I
start.
My
name
is
muhammad
khali,
I'm
a
microsoft,
365
consultant
at
bdo,
canada,
and
if
you
want
to
reach
out
I'm
I'm
available
on
twitter
and
linkedin.
F
So
that's
it
for
these
slides
I'll,
just
get
right
away
to
the
demo.
So
here's
the
web
part
I'm
talking
about
and
the
reason
I
built
this
report
is.
I
had
a
client
who
was
using
another
platform
other
than
sharepoint
and
it
was
for
marketing
purposes,
so
they're
focusing
on
media
marketing
and
they
have
flashy
things.
They
have
animations
on
their
website
and
one
of
them
was
a
widget
that
looks
exactly
like
this
so
and
they
were
like
no
we're
not
going
to
take
our
site
to
our
intranet
to
sharepoint.
F
F
So
here
in
the
basic
properties,
I
can
select
the
video,
so
you
can
upload
a
video
to
a
sharepoint
to
any
library
and
then
you
can
link
to
it
and
let's
say
I'm
going
to
choose
another
one.
So
this
one
open
now
you
can
change
the
title.
So
here
is
awesome
and
then
I
can
change
the
styles
so,
for
example,
the
colors,
the
brightness
and
the
height
of
the
the
video
itself
and
as
you
see
here,
I'm
using
the
file
picker
from
pnp
and
the
color
the
color
control
as
well.
F
So
how
long
would
it
take
to
build
a
wood
part
like
this
with
pin
like
with
spfx
and
pnp?
It's
pretty
easy.
So
if
I
show
you
in
my
code
right
here,
so
I
have
the
properties
the
for
the
wood
part.
So
I
have
the
part
title:
video,
the
color,
the
brightness
and
the
height.
And
here
I'm
just
using
the
controls
so
at
the
very
top
in
this
area.
F
So
I'm
just
having
the
the
title
here
and
this
div,
it's
just
absolutely
positioned
and
it's
flicks
with
the
css.
So
I
can
just
position
this
header
in
the
middle
of
the
the
control
itself,
the
video
and
then
here
I'm
just
controlling
with
css,
I'm
controlling
the
brightness
using
the
filter,
I'm
having
the
video
url
right
here
and
if
you
notice
I'm
using
the
react,
use
effect
and
the
user.
F
If
in
order
to
get
a
reference
to
the
video
control
right
here
and
if
the
video
changed,
I'm
just
gonna
load
the
video
control
again
so
each
time
I
change
the
video
I'll.
Just
it's
just
gonna
re-render
and
here
in
the
in
the
css
side
of
things.
As
you
see,
I'm
just
like
having
this
one,
absolutely
positioned
with
the
with
the
header
inside
and
I'm
just
having
the
video.
The
video
styles
right
here
with
object,
fit
cover.
C
Really
cool
by
the
way
I
have
to
as
a
design
we're
trying
to
unmute
pathfinder
unmute
button
as
well.
But
that's
that's
a
simple
thing
like
I
said,
but
it's
really
really
powerful
and
I
love
the
the
simplicity
of
the
code
as
well.
So,
like
I
said,
shows
the
power
of
the
spfx
for
extending
things
and
whatever
you
have
here
is
certainly
something
what
marketing
people
every
now
and
then
wants
to
their
internet.
So
it
makes
perfect
sense.
So.
A
Yeah,
that
was
a
fantastic
demo.
I
love
the
simplicity
and
I
love
that's.
I
think
that's
a
great
example
of
working
within
a
framework
like
using
the
capabilities
of
react
and
spfx
and
all
the
things
together
to
make
a
very
powerful
solution
without
having
to
do
a
ton
of
work.
Awesome,
awesome
stuff.
So
thank
you
for
sharing
that
cute.
C
A
G
G
I
thought
it
was
a
good
idea
to
show
content
that
way
to
engage
your
user
with
content
in
a
trendy
way
and
well
you
know
stories
are
everywhere.
So
why
not
in
sharepoint,
so
apologies
in
advance?
Is
you
think
it's
a
it's
a
bad
idea,
quick
about
me
section?
My
name
is
louise
manyev
and
I
work
as
a
chef
architect
at
clear
people.
G
G
G
At
the
web
part
serve
my
stories
there,
you
are,
let
me
film
out
a
bit,
so
you
can
see
on
the
story.
Republish
the
page
and
well
not
a
great
surprise
stories.
So
you
have
image
the
author
and
you
can
use
the
keyboard,
so
you
can
go
back
in
the
stories
it
has
keyboard
support
and
also
if
the
story
has
some
content
and
you
can
see
the
seymour
button
and
it
opens
the
the
content
of
the
of
the
story.
G
G
That
one
okay,
so
now
we
have
another
story
in
our
list.
So
if
we
go
back
and
reference,
hopefully
we
should
have
a
new
story.
Yeah
and
again.
If
the
story
has
the
content,
you
can
see
the
content
here
here
below
so
yeah.
This
is,
this
is
how
it
works,
and
now,
let's
go
back
actually
to
the
presentation.
G
G
G
G
G
So
I
don't
need
to
do
anything
else
and
then,
when
the
data
is
back,
we
just
map
the
the
list.
Items
to
the
story,
object
that
we
saw
in
in
a
moment
and
update
the
reactor
state
with
the
with
the
different
stories
so
in
the
render
component,
if
the
data
is
still
loading,
we
have
to
show
where
this
similar
component.
G
This
is
coming
from
the
fluid
ui,
and
this
is
just
a
placeholder,
a
great
place
holder
that
is
indicating
that
the
data
is
is
being
loaded
and
once
we
have
the
data,
we
use
the
stories
component
from
the
library,
the
react,
insta
stories,
packets,
sending
the
stories
and
configuring
some
properties
for
allowing
keyboard
navigation.
The
the
story
interval
itself
by
default
to
four
seconds,
and
we
are
looping
the
stories.
G
G
G
Gives
you
the
option
to
use
a
specific
custom
function,
as
you
can
see
here,
the
story
renderer
function
and
in
this
case
what
I'm
doing
is
fully
customizing,
how
the
stories
is
rendering
the
page
and
I'm
doing
so,
because
I
want
to
use
the
person
component
from
the
microsoft
graph
toolkit
to
render
the
user
profile
with
the
display
name
and
an
image.
So
I
don't
have
to
be
calling
graph
api
to
do
so.
The
personal
component
is
is
doing
it
for
me
and
it's
really
easy
to
configure.
G
You
just
need
the
user,
the
user
id
and
configure
how
you
want
the
avatar
and
and
it's
on
its
own
and
the
rest
of
the
function
is
just
rendered
in
the
the
url
of
the
of
the
image
with
with
some
with
some
styling.
As
you
can
see
here
with
c-more,
this
is
a
high-order
component
from
the
library
as
well.
That
allows
you
to
specify
the
function
that
you
want
to
use.
If
you
have
more
content,
so
you
see
the
see
more
link
in
the
in
the
demo.
This
is
because
of
this
this
component.
G
G
A
Awesome
stuff,
thank
you
very
much.
Now
we're
gonna
move
on
to
a
mother,
daughter,
team,
sam
and
alison
collins,
though
I
have
it
on
good
authority
that
allison's
done
all
the
work
here.
So
I'm
excited
to
see
this
welcome
to
the
call
looks
like
you've
taken
over
the
sharing
so
have
at
it.
Take
it
away.
B
Hey
patrick,
so
this
is
david,
of
course,
with
me
today,
as
mentioned
is
alison
collins
and
sam
collins,
allison
and
sam
are
the
primary
developers
of
this
sample.
Allison
is
14,
so
she
is
setting
a
record
as
our
youngest
presenter
in
the
history
of
pnp,
so
this
is
going
to
be
awesome,
allison.
Why
don't
you
start
out
by
telling
us
a
little
bit
about
this
sample.
H
Recently,
I
had
a
client
that
needed
to
display
the
sharepoint
groups
in
their
organization,
their
personal
groups,
as
well
as
showing
their
ms
team's
teams.
This
webpart
makes
use
of
the
sharepoint
site's
theme
for
styling
as
well.
It's
useful
for
site
managers,
admins
and
users
to
find
their
sites
in
its
information.
B
Now,
when
you
initially
load
this
sample,
you'll
get
these
two
buttons:
microsoft,
365
groups
and
my
teams,
both
clickable,
which
you
can
click
on
to
load
your
different
groups
and
teams.
Now
you'll
notice.
The
styling
of
this
is
matching
the
styling
of
my
theme,
so
I
can
actually
change
that.
That's
one
of
the
cool
features.
If
I
go
to
change
the
look
and
we
go
to
theme,
we
can
see
that
if
I
swip
switch
it
up,
then
it
will
swap.
B
I
can
go
to
any
of
the
other
sharepoint
themes
and
it
will
match
the
theme
of
the
site,
which
is
pretty
cool.
Now
you'll
notice,
the
additional
information
that
we
can
click
on
things
like
public,
all
private,
so
we're
able
to
swap
between
those
we
can
see
the
teams
if
I
click
on
that
and
the
groups
change.
As
I
click
on
that.
B
Additionally,
you
can
click
to
go
to
the
different
mail
properties
of
the
team
or
the
group.
You
can
click
to
go
to
the
site.
The
calendar
planner
and
you
also
have
the
visibility
identified
here.
You
can
always
click
on
the
view.
My
groups
as
well
and
one
of
the
cool
features
that
she
added
is
the
ability
to
see
the
description
so
a
lot
of
times.
We
want
to
include
additional
information
about
that
site
or
group
or
team
that
is
useful,
but
small
space
right.
B
H
H
H
Now,
let's
jump
into
the
component
denmont
function
if
you're
familiar
with
spfx
development,
you
probably
often
use
the
component
dig
mount,
but
I
want
to
show
you
specifically
how
we're
using
in
my
team,
scotland,
here's
the
component
and
mount
function
and
to
briefly
go
over
it.
I'm
doing
a
graph
api
call
to
get
the
users
teams
and
then
going
through
each
of
the
teams
and
pushing
information
and
setting
that
to
my
group
results.
Next,
I
call
the
get
mail
get
planner
and
get
scene
journal
functions.
H
H
Then
we
take
the
response
and
if
it
is
an
error,
we
return.
If
not,
and
we
get
back
our
response,
we
mount
through
the
result
and
take
each
group
and
push
the
group
display
name
id
description
and
visibility
into
the
variable.
Already
after
we've
mapped
through
the
results,
we
want
to
do
something
with
them.
We
set
my
group
results
in
state
to
be
the
array
with
the
fields
that
we
chose.
When
we
map
through
the
results,
then
we
called
three
functions.
H
H
H
So
here's
our
kit
planner
function,
that's
the
group's
planner,
this
function,
maps
through
macro
personas
and
make
a
makes
a
graph
api
call
using
the
group
id
from
the
group.
Next
we
take
the
planner
id
from
the
results
and
you
reassign
the
current
group,
its
past
value,
as
well
as
the
planner
url.
Let's
go
deeper
into
what
we're
doing
here.
H
First,
we
map
through
my
group
results,
and
we
have
a
try
statement
to
try
the
graph
abigail
to
get
that
group's
planner
using
the
group
id
then
after
we
get
the
response,
we
say
that
if
that
value
holds
something,
if
it's
greater
than
zero,
then
we
do
a
couple
things
we
create
variable
id
and
that,
through
the
result
value
we
got
back.
We
assign
the
variable
we
just
created
to
the
planner
id.
We
got
from
the
results.
H
Next
we
create
a
variable
called
planner
and
assignment
and
object,
which
is
planner
and
is
assigned
the
dynamic
girl.
Next,
we
will
go
ahead
and
create
another
variable
called
results,
and
what
this
is
doing
is
it's
combining
the
previous
group
information
in
the
name,
so
we
have
nail
description,
title,
etc,
and
then
we
take
that
and
the
planner
and
make
a
new
object.
H
The
next
part
is
to
make
sure
that
if
that
sharepoint
group
is
listed
in
the
groups
in
my
organization,
we
want
to
update
that
value
too,
so
that
the
planner
shows
up
there.
Finally,
we
set
state
and
return.
This
then
triggers
re-render
and
the
last
part
catches
any
error
and
returns
nothing
and
ally.
What
happens
if
we
don't
do
the
catch
statement?
H
H
Moving
on,
I'm
going
to
show
you
the
code
to
get
the
team
0
for
each
team.
This
looks
very
similar
to
the
get
planner
function
we
just
went
over,
but
it's
not
in
a
try
catch
statement
because
we
don't
need
to
catch
the
areas
like
the
planner.
You
just
see
if
there
will
be
role.
That
is
there
for
that
team
and
here's
the
get
together
function
and
I'll
go
over
this
briefly.
Before
going
to
more
detail
in
this
function,
we
map,
through
your
groups
and
for
each
group
we
do
a
graph.
H
After
that
we
take
the
response,
whether
it
be
an
error
or
if
it's
a
result,
if
it's
an
error,
we
return.
But
if
it's
the
result,
yay
we
make
a
variable
called
results
and
assign
it.
The
current
groups,
value
with
the
planar
invisibility
and
such
and
also
add
in
another
object.
The
web
url
final
thing
we
do
here
is
set
state
to
trigger
a
rerender.
H
Now,
let's
go
in
the
filter
section
you
can
see
in
the
photo
that
there
are
three
buttons
that
you
can
choose
from
titled
public
all
in
private.
These
are
the
buttons
that
filter
the
items
we
display.
Let
me
show
you
how
it
works
with
the
filters
I
have
all
of
them
in
a
ternary
to
determine
which
one
is
currently
selected.
This
is
you
so
that
the
selected
filter
will
have
a
different
styling
than
the
other
buttons.
So
you
know
it's
been
selected.
H
H
H
If
the
selected
mode
is
public
or
private,
we
create
a
constant
called
switched
all
we
filter
all
group
results
filtered
to
the
current
item's
visibility
to
the
constant
we
just
created
and
go
ahead
and
set
the
state
of
all
group
results
filtered
to
the
filters
groups.
We
do
the
same
for
macro
results
and
then,
after
the
else
statement
you
set
the
mode
to
be
the
mode
we
select
and
ally.
Why
did
you
set
both
my
group
results
and
all
group
results
on
the
filter,
click
so
mom?
H
I
set
both
of
them
so
that
when
you
select
a
filter
and
change
the
view
from
either
my
groups
or
groups
in
my
organization
that
filter
will
stay
applied
great
okay.
Now,
let's
go
into
the
render
section
and
go
over
how
I
use
variables
in
it.
If
you've
had
some
experience
with
the
regex,
then
you'll
see
right
away
what
I'm
doing
with
one
of
my
variables,
but
I
want
to
explain
it
and
how
I
make
the
urls
for
the
users
to
click
in
the
render.
H
H
E
H
Found
through
testing
that
sometimes
the
mail,
the
name
and
the
url
could
be
different
and
using
the
email
got
the
most
consistent
results.
And,
lastly,
we
want
to
talk
about
styles,
so
I
used
several
colors
from
your
theme.
Like
theme,
primary
theme
dark
and
more
so
I'm
going
to
go
over
those
to
wrap
up
in
the
microsoft
365
groups.module.scss
file.
I
call
several
colors
of
your
theme,
such
as
theme.
Primary
here
are
more
examples
of
theme
styling
and
we
have
theme,
light
and
theme
dark.
H
So
I
want
to
thank
the
pme
community
for
helping
me
prepare
today.
I
highly
recommend
using
the
buddy
system,
especially
if
you're
a
first
time
presenter.
It
was
really
helpful
to
have
hugo
and
david
help
us
they
collaborated
with
us
on
the
slide
deck
and
help
us
improve
our
presentation.
A
lot
you
can
get
the
cool
for
this
web
part
in
pmp
samples
and
check
out
my
new
blog
at
graphgod.net.
A
Not
really
just
fantastic,
the
future
is
bright
is
all
I
can
really
say
about
that.
So
thank
you
to
luis
mohammed
and
allison
and
sam,
and
I
guess
also
david
warner
for
helping
out
with
these
great
demos,
just
amazing
stuff
today,
all
three
of
them.
So
thank
you.
Thank
you.
Thank
you
and
really
really
excited
about
what
we've
seen
today.
A
A
At
the
same
time,
all
our
community
calls
are
available
ak
dot,
msl,
m365,
pnp
and
we've
got
a
whole
list
of
other
developer
community
calls
if
you'd
like
to
catch
up
on
any
and
all
of
these
topics.
Recordings
are
available
for
just
about
all
of
these.
I
believe
so.
You
can
always
catch
up
if
you're
not
able
to
attend,
live.
Just
want
to
thank
everybody
very
much
for
attending.
Today.
We
actually
finished
up
a
little
bit
early
today,
so
we'll
give
everybody
eight
minutes
back
for
all
the
over
minutes.