►
Description
Viva Connections & SharePoint community call on June 16. Demos: Building a safer custom Content Editor Web Part with SPFx, Getting started on using GitHub Codespaces with your SharePoint Framework solutions, MyShifts – SharePoint Framework Viva Connections - Adaptive Card Extension. Project releases: PnPjs Client-Side Libraries - v3.4.0 GA, CLI for Microsoft 365 – v5.4.0 preview, and PnP Modern Search – v4.7.0 preview. Delivered 2 web part and 2 ACE samples. Register for Sharing is Caring events – “Writing for the Web” and “Power Platform Samples Contributors.” The host of this call is Patrick Rodgers (Microsoft) | @mediocrebowler. Q&A takes place as always in chat throughout the call.
Learn more
• See the full blog post for this call in the Microsoft 365 platform community blog - https://aka.ms/m365pnp/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community
A
Hello
and
welcome
to
the
viva
connections
sharepoint
framework
bi-weekly
sync,
it
is
june
16
2022.,
I'm
your
host
on
this
call
patrick
rogers,
welcoming
you
back
again
for
another
call:
we've
got
a
great
agenda
for
you
this
week,
as
always
latest
updates
around
the
sharepoint
framework
patterns
and
practices
updates
across
the
program.
New
community
samples
we'll
do
our
optional
picture
time
with
together
mode,
and
then
we've
got
three
great
demos
from
christoph
emmanuel
and
siddharth,
so
aiming
for
a
safer
content.
A
Editor
web
part
getting
started
on
using
github
code
spaces
and
as
well
my
shifts
and
another
adaptive
card
extension
so
really
excited
to
see
all
three
of
those,
but
first
some
quick
updates
to
get
through
if
you're
looking
for
ways
to
get
involved
in
pnp
and
participate
in
the
program
as
well
as
participate
in.
These
calls
very
much
encourage
you
to
reach
out
about
doing
a
demo
love
to
get
folks
scheduled
to
do
a
demo.
You
can
follow
the
link
down
there
in
the
bottom
right
corner
ak
dot.
A
You
can
contribute
to
any
of
the
repositories
on
github,
we'll
show
those
links
here
in
just
a
second,
but
that
can
involve
reporting
issues.
We
don't
like
issues,
but
we
love
to
hear
about
them.
Cause
that
way
we
can
get
them
fixed.
Submitting
pull
requests
as
well
as
helping
others
with
their
issues,
and
questions
are
all
great
ways
to
get
involved
and
you
can
always
provide
feedback.
How
are
these
calls
going?
Where
can
we
help
with
more
documentation
and
generally?
A
Where
else
can
we
help
and,
of
course,
positive
feedback
is
okay
too,
if
we're
doing
something
you
like,
we
could
perhaps
do
a
little
bit
more
of
it.
Moving
on
to
the
next
slide,
this
is
our
page.
Oh
links,
I'm
not
going
to
read
all
these
links
to
you,
but
the
first
section
there
is
our
developer
videos.
These
are
going
to
be
topic
focused.
A
So
if
you
want
to
learn
about
auth
or
learn
about
call
into
the
graph
or
using
different
technologies,
those
developer
videos
are
going
to
walk
you
through
to
help
you
get
started
there.
Then
we've
got
our
community
videos,
those
are
going
to
be
recordings
of
this
call
or
other
community
calls,
as
well
as
various
other
community
events
and
things
that
happen
throughout
the
year
great
way
to
get
caught
up.
A
Obviously
none
of
us
have
the
time
to
go
to
all
these
calls,
so
that
section
is
a
great
way
to
get
involved
and
catch
up
on
things
you
might
have
missed
or
just
review
something
you
saw
a
couple
months
ago
and
and
want
to
refresh
yourself
on
the
details
and
then
we've
got.
These
are
the
github
repositories
or
github
organizations.
Excuse
me,
I
was
talking
about
a
second
ago
and
we've
got
pnp
office,
dev,
microsoft,
graph
and
sharepoint.
A
All
of
those
welcome
your
input
and
your
contributions
and
your
feedback
and
so
encourage
you
to
get
involved
in
any
and
all
of
those
where
you
have
interest.
You
are
welcome
everywhere,
so,
hopefully
you
find
a
spot
to
jump
in
and
help
out
and
then
sample
galleries.
We've
got
a
tons
and
tons
of
tons
of
great
samples,
so
m365
samples
is
the
unified
sample
gallery.
That
kind
of
rolls
up
all
of
the
samples
from
across
lots
of
different
repositories
makes
a
lot
easier
to
find
stuff.
A
Instead
of
having
to
hunt
across
github,
we've
got
team
samples,
spfx,
webparts,
adaptive
card
extensions
power
platform,
samples,
sharepoint
framework
extensions
as
well
as
list
formatting
samples,
so
all
great
ways
to
get
started
and
learn,
and
all
of
those
links
can
be
found
at
aka
dot.
Ms
slash
m365
slash
community
and
encourage
you
to
check
that
out.
That's
got
links
to
all
the
community
calls
links
to
all
of
these
samples,
all
these
repositories
and
all
the
videos
so
ak
dot,
msl
m365,
slash
community
we've
got
a
bunch
bunch
of
bunch
of
calls.
A
So
if
you
can't
make
it
to
all
these,
of
course,
you
can
always
catch
up
again
on
the
youtube
there,
but
we've
got
our
platform
call.
That's
the
weekly
call
hosted
by
microsoft,
folks,
demoing,
what's
coming
new
on
the
platform
as
well
as
adaptive
card
extensions,
microsoft,
identity,
office,
add-ins,
power
platform,
mike's
m365
and
power
platform
community
and
the
viva
connections
in
sharepoint
framework
bi-weekly,
which
is
the
call
you
are
on
right
now.
All
of
those
can
be
found
at
ak.
A
Dot
m,
slash,
aim,
365
calls
and
that'll
get
you
the
invite
to
any
and
all
of
those
calls
if
you
would
like
to
join
ones.
Perhaps
you
haven't
heard
before
lots
and
lots
and
lots
interesting,
stuff
and
great
topics
across
all
of
those
forums
and
next
up
on
tuesday,
this
coming
tuesday
june
21st.
Is
the
microsoft
365
platform
call
this
latest
news
across
microsoft,
365
from
the
engineering
teams,
as
well
as
updates
on
monthly
community
contributions
and
then
we'll
do
another
together
mode
photo
there.
A
But
we
got
three
demos
coming
up
from
rebec,
nick
and
alex
on
microsoft,
graph
postman,
using
the
microsoft
graph,
powershell
sdk
for
common
operations
and
getting
started
with
the
ui
library
for
azure
communication
services
so
definitely
check
that
out
next
week
or
if
you
can't
make
it.
Of
course,
the
recording
will
be
available
on
the
youtubes
for
you
to
catch
up
with
later.
And
if
you
have
some
questions
about
how
to
get
started,
helping
out
david,
how
would
they
get
involved.
B
Well,
we
have
a
program
for
that,
patrick
I'm
glad
you
asked
it's
called
sharing
is
caring
friends
and
it's
a
program,
that's
providing
hands-on
guidance
for
you
to
get
involved
in
the
community
in
a
variety
of
ways.
Perhaps
you'd
like
to
learn
how
to
write
better
in
writing
for
the
web
or
you
want
to
contribute
to
documentation
through
our
community
docs
or
you'd
like
to
submit
a
power
platform
sample
spfx
sample
or
any
of
those
plethora
of
sample
opportunities
that
patrick
had
mentioned.
B
These
are
safe
space
opportunities
for
you
to
get
involved
in
the
community
where
we
will
walk
you
through
hand
in
hand
together
how
to
accomplish
these
tasks
safe
space
opportunities
because
they're
not
recorded
so
you're
free
to
ask
any
and
all
questions.
You'd
like
and
you're,
going
to
collaborate
with
members
of
the
team,
members
of
microsoft,
mvps
and
other
amazing
contributors
in
the
community.
They
are
scheduled
throughout
the
month.
They
are
absolutely
free
to
join
and
we
encourage
you
to
come
collaborate
with
us
coming
soon.
Hot
off
the
heels
of
build
a
few
weeks
ago.
B
Is
the
power
platform
power
pages.
It's
going
to
be
a
two-part
event
for
us
our
two
two-part
session.
I
should
say
that
we're
gonna
get
everyone
involved
in
building
power
pages
and
hugo
as
the
new
cpm
is
excited
to
get
his
little
hot
hands
on
that,
so
be
on
the
lookout
for
that
date
to
get
scheduled
here
soon.
B
Now,
once
you
do
contribute,
we
want
to
show
our
appreciation
in
a
formal
and
official
way,
so
the
recognition
program
is
powered
by
credly
and
it's
set
up
to
do
just
that.
It
is
going
to
provide
you
official
and
accredited
badges.
Yes,
those
same
badges
that
you
get
when
you
pass
a
certification
exam
they're
going
to
sit
right
next
to
it,
which
means
that
you
can
associate
them
to
linkedin.
You
can
add
them
to
your
twitter
account.
B
You
can
share
them
with
clients
and
managers,
letting
them
know
you're,
making
a
difference
in
the
community
in
a
formal
and
official
way.
So
we
appreciate
all
that
everyone
has
done.
We
ask
you
to
please
opt
in.
You.
Do
need
to
opt
in
to
be
included
in
the
recognition
program.
You
can
do
so
at
ak,
dot,
ms4
m365pmp
dash
recognition,
and
you
only
need
to
do
it
once
not
once
per
year,
not
once
per
week,
not
once
for
a
month
just
once
in
your
whole
life,
and
we
will
track
you
forever,
but
we're
not
stalking.
C
On
the
sharepoint
framework,
excellent,
so
let's
go
through
this
quickly.
So,
first
of
all,
a
release
candidate
is
the
latest
version
of
the
sharepoint
framework.
1.15
gaa
is
right
now
scheduled
to
happen
next
week,
but
I
cannot
promise
the
exact
date
yet
if
there's
any
last
minute
changes
on
the
ga,
but
it's
pretty
close
on
the
release
candidate.
C
So
if
you're
using
release
candidate
this
we're
not
expecting
your
code
to
require
any
other
changes,
then
updating
the
actual
packets
names
and
references,
quick
reference
slide
an
update
on
how
the
usage
is
going
worldwide
and
we
do
have
millions
and
millions.
Tens
of
millions
of
monthly
active
users
using
components
built
with
sharepoint
framework
by
our
partners
and
customers.
So
really
recall,
all-time
highest
usage
is
now
on
tuesday
this
week.
C
So
the
growth
is
that
the
growth
curve
is
quite
nice,
so
we
can
kind
of
predict
where
we
will
be
within
end
of
this
calendar
year
and
then
on
the
last
slide
quickly
on
that
one
as
well,
no
updates
on
the
1.15
except
quite
important
one.
So
it
seems
to
be
that
we
are
getting
node.js
version.
16
support
included
in
the
1.15,
so
we
were
basically
bending
on
end-to-end
testing
on
this
one,
and
it
seems
to
be
that
we
are
good
to
go.
C
A
D
Yes,
the
pmpjs
crew
will
be
absolutely
thrilled
when
that
115
drops,
because
we
will
not
have
the
dependency
to
do
some
changes
to
use
the
version
3
release,
and
so
speaking
of
the
version,
3
release
version
3.4
got
released
on
june
10th
and
it
was
mammoth
I'm
just
saying
here
we
have
general
documentation
updates,
but
there
were
a
lot
of
them.
I'm
also
saying
various
bug
fixes,
but
there
were
a
lot
of
them.
D
Definitely
go
check
out
the
changelog
in
our
github
repo
to
see
all
the
details
on
that
some
ads
that
we
should
point
out.
We
added
schedule
publish
to
client-side
pages.
We
are
patrick
added
paging
support
for
the
graph,
which
is
a
great
ad.
So
that
means
that
you
can
get
pages
of
information
when
you
make
calls
to
big
collections
of
data
like
users
and
groups
etc.
So,
that's
a
big
ad.
D
We
added
recycle
bin
support
to
sharepoint.
We
added
the
entire
bookings
endpoint
to
the
graph,
and
we
added
beta
support
for
canceling
requests.
If
canceling
fetch
requests
are
something
that
you're
interested
in
definitely
go
check
that
out
and
give
us
some
feedback
on
that,
and
we
did
have
to
do
one
regression
push
so
version.
3.4.1
was
released
on
june
13th.
That
was
to
reverse
an
issue
with
the
library,
not
loading
for
the
safari
ios
browser
a
few
versions
ago.
D
Any
pr
is
added
or
merged
into
the
repo.
That's
going
to
be
in
the
next
day's
v3
nightly
build.
So
if
you
want
to
test
anything
if
you've
submitted
an
issue
and
that
test
is
out-
and
you
want
to
make
sure
it's
working
good
before
we
get
to
the
official
release,
check
out
that
nightly,
build
test
that
out
for
us
that
can
be
a
big
help
to
make
sure
that
we
get
everything
correct
before
the
actual
monthly
builds
and,
as
always,
follow
us
on
m365
pmpjs
on
twitter.
For
all
the
updates
back
to
you,
patrick.
A
Thanks
julie
so
updates
on
the
cli
for
microsoft,
365.
new
preview,
5.4
out
with
support
for
upgrading
spfx
projects
to
the
v
115
rc
0,
remove
planner
tasks
simplified
with
planner
working
with
planner
buckets,
improved,
retrieved
list
site
columns
as
well
as
other
updates.
We've
installed
the
preview
version
5.4
via
any
of
those
commands
there
and
as
well.
A
You
can
use
the
docker
containers
that
are
set
up
to
nicely
include
all
of
the
dependencies
in
the
environment,
ready
to
run
for
everything
about
the
cli,
so
a
fantastic
tool
to
have
in
your
tool
belt.
You
can
check
out
the
release,
notes
at
that
link
there
and
follow
at
cli
microsoft,
365
on
twitter,
and
that
will
get
you
the
latest
updates,
as
well
as
ak
dot.
Ms
slash
cli
dash
m365
for
all
the
docs,
so
encourage
you
to
check
out
the
cli.
Had
you
not
next
up
is
spfx
reusable
components.
A
This
is
a
set
of
react
controls,
so
3.8
brings
some
enhancements
to
the
people.
Picker
adaptive
card
host
and
various
section
background
fixes
and
those
are
designed
to
be
used
in
the
body
of
your
web
parts
or
application
customizers,
and
then
we've
got
the
react.
Property
controls.
370
version
is
designed
to
be
used
in
the
edit
pane
of
your
sharepoint
framework
web
parts,
thanks
of
course,
to
all
of
the
contributors
for
this
and
for
all
the
contributors
across
all
of
our
resources.
There.
A
A
The
latest
updates
around
the
controls-
and
this
is
a
great
place
if
you're
just
finished
sharing,
is
carrying
or
looking
at
somewhere
to
jump
in
the
controls
are
a
really
great
place,
because
you
can
sort
of
work
in
a
little
more
atomic
fashion
on
working
on
some
contributions
there,
as
opposed
to
some
of
the
other
things
that
have
a
bit
more
of
a
learning
curve,
but
definitely
encourage
you
to
grab
these
check
them
out,
use
them
to
jump
start.
Your
projects
will
save
you
a
ton
of
time.
A
Next
up
is
p
p,
modern
search,
a
k,
dot.
Ms
slash
pnp
search
the
july
2022
release
is
four
seven
zero
and
that
is
got
support
for
adaptive
card,
rendering,
as
well
as
various
other
fixes
and
new
features.
You
can
see
in
the
release
notes.
It
also
features
release,
notes
so
check
those
out
and
just
a
reminder.
The
version
three
branch
of
the
pnp
search
stuff
is
in
just
sort
of
long
term
maintenance
mode.
E
E
E
E
I
just
wanted
to
point
out
that
you
know
we've
always
seen
a
lot
of
contributors,
the
same
contributors
over
and
over
doing
amazing
samples,
but
I'd
like
to
point
out
that
these
two
updates
here
are
from
relatively
new
contributors
to
the
community.
I
want
to
make
it
clear
that
everyone
is
welcome
to
contribute
to
samples
either
update
samples
or
add
new
samples,
everyone's
welcome
and
we
certainly
appreciate
everyone's
work.
Thank
you
and
with
that,
let's
pass
it
to
david
for
aces.
B
Awesome,
thank
you.
Hugo
we've
got
a
new
sample
card
composition,
multi-card
view
very
cool
by
marcin,
allows
you
to
show
different
views
within
your
card
for
different
cards.
Very,
very
cool
check
that
out
and
marcin
is
by
the
way
on
pnp
weekly
this
week,
so
check
that
out
with
vesa
and
waldek
as
well.
We
have
an
update
on
the
my
360
m365
groups
by
nandeep,
with
new
search
and
grouping
capabilities,
so
we're
processing
more
prs,
always
welcoming.
As
hugo
had
mentioned.
B
A
C
Yay,
so
let
me
share
my
screen
and
put
the
recording
on
as
well
one.
Second,
I
will
get
you
in
the
screen
in
a
second.
We
are
recording
already
well,
let's
wait
for
a
while
and
to
get
the
full
room
again.
We
do
have
enough
people
in
this
car
we're
hitting
again
most
likely
150
pretty
much.
Oh,
I
didn't
enable
my
video
wait.
Wait.
Wait!
Wait!
Do
more
few
more
few
more
rows,
one
more
row!
Anybody
anybody!
Anybody
missing!
C
I
guess
we'll
do
the
hand
waving
in
here
thanks
everybody
for
joining
once
again,
let's,
let's
do
some
hand
craving
and
crap
a
gift
for
animation
out
of
it.
What
are
you
david
watching
mark
upstairs?
Yes,
I
know
yeah.
I
was
looking
a
bit
more
above
me,
cool
excellent
everybody.
Thank
you
for
joining
will
crop
a
keep
animation
out
of
this
one.
Thank
you.
Everybody!
Thank
you
for
being
part
of
the
community
and
back
to
you,
patrick.
F
All
right,
my
topic
today
is
to
talk
about
an
old
friend,
the
content
editor
web
part
and
its
evolution
into
the
sharepoint
framework.
A
few
of
my
published
recently
published
solutions.
So
today
we're
going
to
talk
about
the
cherry-picked
content
web
part,
which
is
my
flavor,
so
the
cherry
flavor
of
the
content
editor
web
part
in
spfx.
F
So
today,
when
I
look
at
microsoft,
365
there's
a
lot
of
those
connectors
that
allow
us
to
enhance
the
different
parts
of
of
the
platform.
So
we
have
connectors
for
power
to
mate
power
bi
for
microsoft
graph
as
well-
and
this
is
a
kind
of
how
I
see
the
content
in
the
web
bar
the
script
editor
web
part
and
also
the
page
url
web
part
these.
These
were
my
connectors
that
allowed
me
to
bring
more
to
the
sharepoint
pages
at
the
time.
F
F
Well,
unfortunately,
I
would
say
for
me
the
content,
editor
web
part
and
the
script
editor
web
part
didn't
make
it
so
now
we've
lost
those
two
web
parts.
Something
new
we
have
is
the
embed
web
part
which
is
kind
of
a
mix
between
the
page,
your
web
part
and-
and
I
don't
know
what
what
else
the
content
into
web
part.
F
Maybe
it
has
more
restricted
capabilities
and,
for
example,
scripts
are
not
allowed
and
but
fortunately
we
have
the
shotgun
framework,
and
this
is
what
allows
us
to
bring
back
the
content
web
part
in
a
custom
form.
So
there
are
a
few
solutions
that
are
available
around
the
web.
I
mentioned
here
the
the
script
editor
web
part,
which
already
really
was
created
by
us,
I'm
not
sure
if
I
pronounce
it
right,
mikhail
or
michael.
F
So
I
just
learned
today
that
there's
a
fresh
update
to
that
web
part,
so
very,
very
nice
to
hear
that
this
is
still
alive
and
kicking.
I
also
had
my
own
flavor,
which
I
call
the
dangerous
content
web
part
and
I'll
explain
in
the
next
slide.
What
I
mean
by
that
and
if
you
search
the
web
again,
you'll
find
a
few
others.
F
Why
did
we
lose
the
content
in
editor
web
parts?
So
I'm
not
sure
I
have
all
the
explanations,
but
what
I'm
hearing
from
microsoft
there's
a
few
issues
with
it.
First
there's
a
security
issue.
Imagine
you
get
someone
who
just
copy-pasted
code
from
found
on
the
web
and
there's
a
risk
of
script
injection
here
as
a
security
breach.
F
F
F
It's
also
something
that
html
the
standards
are
bringing
now
it's
more
in
an
experimental
stage,
but
it's
going
to
be
hopefully
at
some
point
part
of
the
html
standards.
So
for
me
what
it
meant,
I
told
you
about
the
dangerous
contented
dangerous
content
web
part,
which
was
my
equivalent
of
this
content
later
web
part.
So
now
we're
moving
to
the
save
content
web
part,
which
is
the
dangerous
content
web
part
with
the
sanitizer,
some
issues,
the
sanitizer
first-
and
maybe
that's
why
it's
still
experimental.
F
We
are
not
sure
that
it
captures
all
the
unsafe
parts.
So
definitely
you
can
remove
the
scripts.
You
can
remove
the
events
from
your
code,
but
then
there
are
some
trickier
parts
that
are
really
difficult
to
identify
these
kind
of
script
injections
cross
cross
site,
scripting
that
I
was
talking
about.
So
it's
not.
I
would
imagine
at
this
point
not
100
reliable.
F
It
might
be
also,
even
if
it
works,
it
might
become
useless
because
well
you
had
some
nice
clip
that
did
something
and
you
remove
the
script.
Then
you're
left
with
nothing.
So
not
a
big
gain
here
and
you
still
have
the
governance
question
because
we
haven't
changed
anything
in
the
way
we
manage
the
the
scripts
themselves,
the
snippets
okay.
So
that's
what
I
was
thinking
about
and
then
a
couple
of
months
ago
I
captured
on
on
github
on
github
pnp.
I
came
across
that
issue
that
was
opened
by
magazines.
F
F
I'd
say
it's
a
common
approach
when
you
do
content
management.
I
have
a
few
examples
on
the
on
this
slide.
It's
also
kind
of
what
the
current
embed
web
part
is
doing.
Where
you
can
choose
the
locations
of
different
sites.
You
can
pull
the
web
pages
from,
and
I
I
put
here
the
issue
so
number
two,
two
two
eight
on
pnp
as
a
reference:
okay,
so
now
we're
moving
to
demo
time.
F
So
let
me
show
you-
and
so
I
I
built
that
web
part
based
on
that
id
and
I
called
it.
The
cherry
picked
web
part,
meaning
that
you
only
go
to
those
snippets.
You've
been
allowed
to
pick
so
I
I
have
already
built
the
the
web
part
I'm
going
to
to
show
a
little
bit
of
the
code
very
soon,
but
that's
what
it
looks
like.
F
So
I'm
going
to
edit
more
because
this
mode
is
not
really
useful
here
going
to
edit
mode,
and
this
is
the
property
pane
of
that
web
part.
And
you
can
see
here
that
I,
when
I
pick
my
file,
I
can
only
choose
from
a
set
of
approved
libraries
and
then,
when
I
pick
one
library,
I
have
that
cascading
selection,
so
I'll
also
show
that
code,
a
cascading
selection
that
allows
me
to
pick
the
the
code
snippet.
F
So
the
web
part,
this
cherry
picked
content
web
part.
It
comes
with
16
samples,
so
they
are
self-sufficient.
It
means
that
you
can
just
upload
them
to
a
library
of
your
choice
and
then
you
can
run
them
with
the
sample,
so
I'm
not
going
to
to
show
the
16
of
them.
I'm
just
going
to
to
share
with
it
a
few
here
right
here.
You
have
the
google
map
as
an
example,
and
what
would
I
choose
here?
F
So
let
me
show
you
html
html
fragments,
so
that's
something
I
I
don't
know
the
exact
stage
right
now
of
the
markdown
web
part,
but
something
I
struggled
a
little
bit
with
in
the
beginning
of
modern
sharepoint
was
that
the
markdown
web
party?
They
give
you
a
lot
of
layout
flexibility.
So
that's
one
way
to
address
it.
It's
to
use
this
new
content.
Editor
web
part
other
example
the
countdown
here.
F
F
F
F
What
you
can
see
here
immediately
is
that
the
text
font,
the
font
and
the
font
color
change
and
from
black
to
white.
So
that's
kind
of
the
point
of
the
iframe.
This
isolated
content
is
that
it
allows
you
to
avoid
any
conflict
if,
if
needed,
it
allows
you
to
avoid
any
conflict
between
the
page
itself,
the
scripts
and
the
css
of
the
page
and
the
scripts
and
the
css
of
your
own
snippets.
F
Let
me
pull
here
a
few
more
or
so
here,
for
example,
I
have
a
banner
most
of
my
examples.
I
would
say
in
most
of
my
examples.
The
iframe
is
the
preferred
way.
This
is
kind
of
an
exception.
You
said
you
see
if
I
want
to
insert
a
banner
in
my
page
here.
Banner
is
really
at
the
wrong
place
because
it's
at
the
top
of
the
iframe.
F
So
what
I'm
going
to
do
is
uncheck
that
box
and
then
I
get
the
banner
exactly
what
I
where
I
want
it
here
at
the
top
of
the
page,
so
I
I
definitely
need
to
to
move
to
the
code,
but
I'm
going
to
show
you
one
more
example,
because
it
shows
something
very
interesting
here.
So
one
of
the
little
additions
I
made
to
that
web
part
was
to
pull
what
it
does
it.
It
passes
the
context.
F
The
web
part
context
over
to
the
snippet,
which
means
that
within
the
snippet
you
can
leverage
that
context,
and
in
this
example
you
see
that
I
used
the
microsoft
graph
toolkit.
So
I
have
a
lot
well,
there
are
lots
of
capabilities
with
the
toolkit.
I
love
it
and
what
this
web
part
allows
you
to
do
is
take
those
snippets.
F
Okay,
so
I'm
going
to
to
move
to
the
code
so
the
way
it
works
to
to
make
sure
that
those
users
are
going
to
stick
to
the
libraries,
the
libraries
in
that
sample
the
libraries
are
hard-coded
in
the
code
itself.
In
my
case,
it's
just
a
static
list.
You
can
see
for
the
demo.
I
just
added
here.
Cherry
picked
samples
library.
F
You
could
do
it
in
a
more
dynamic
way,
but
the
fundamental
idea
here
is
that
the
users
cannot
reach
it.
It's
embedded
in
the
web
part
itself
and
the
code
checks
this
list
in
edit
mode.
So
when
you
pick
the
when
you
pick
the
snippet,
it's
it
relies
on
this
list
and
also
in
rendering
time
at
reading
it
time.
F
I,
I
guess
most
of
you
are
familiar
with
the
inner
html
property
in
in
javascript,
so
it's
kind
of
the
evolution
of
inner
html
that
we're
using
it,
which
is
called
so.
The
method
is
called,
create,
contextual
fragment,
and
this
is
the
magical
method
that
allows
you
to
transform
that
text
fragment
into
html
elements
and
scripts.
So
just
really
a
one-liner
here,
a
few
more
a
few
more
things
about
the
codes.
F
To
conclude
the
presentation,
I'm
using
react
memo
here
to
limit
the
number
of
refreshes,
so
you
can
imagine
that
because
we
are
parsing
that
code,
we
might
have
quite
a
few
elements
inside
here.
So
react.
Member
allows
me
to
only
refresh
the
code
when
the
fragment
changes
when
we
pull
a
new
fragment.
F
I
was
also
talking
about
the
the
property
pane
so
in
in
my
previous
presentation
a
couple
of
months
ago,
I
showed
you
how
you
could
kind
of
bypass
those
built-in
functions
that
you
have
available
within
the
sharepoint
framework.
Here
I
did
the
opposite.
I
reused
the
built-in
function,
so
I
have
a
property
pane
drop
down
here
and
I
use
this
to
create
a
drop
down
menu
and
a
cascading.
It's
actually
a
cascading
drop
down
menu.
So
if
you're
interested
in
building
cascading
drop
down
menus
from
those
built-in
functions,
you
can
check
here.
F
A
Yes,
sorry,
we
got
emmanuel
for
his
first
demo
with
us,
so
we'll
welcome
him
to
the
call
and
if
you
are
ready
to
take
over
the
screen,
you
can
begin
your
demo.
Thank
you
christo
for
that
awesome
thing
with
the
sanitizing
html
and
stuff,
and
if
you
have
a
link,
you
paste
that
there
for
folks
to
go
check
out
the
code
themselves
and
I
see
somebody's
screen
so
looks
like
you're
ready
to
go.
Yes,
it's
my
screen.
Okay,
perfect!
Thank.
A
G
Thank
you
very
much
for
having
me
today.
It's
really
a
pleasure
to
be
here,
and
so,
let's
start
to
see
what
what
is
the
topic
for
today
today
is.
The
topic
is
call
spaces
and
sharepoint
framework,
because,
yes,
we
can
use
because
spaces
and
support
framework
to
develop
our
new.
Let's
say
your
new
project
in
the
next
weeks
or
in
the
next
month
or
year,
but
first
of
all,
what
is
it.
G
Like
me,
for
example,
I
have
a
at
home
my
gaming
machine
machine
for
working,
but
I
have
also
three
laptop
one
is
for
working
and
the
two
others
are
for
netflix
er
but
yeah.
I
can-
and
I
can
work
also
from
that
machine,
because
I
use
course
spaces,
for
instance,
so
yeah
your
developer
environment
is
on
the
cloud
and
it's
very
easy
to
reconfigure
everything
and
in
addition,
you
don't
have
any
local
repository.
G
So
this
is
great
for
two
reasons.
The
first
reason
you
don't
have
the
node
modules
folder
in
your
on
your
machine,
and
we
have
a
lot
of
notes
folder
in
our
machine
and
the
second
one
is
the
the
letter
property
because
you
don't
have
the
source
code
on
your
machine.
So
if
someone
steal
your
laptop,
you
don't
have
any
problem
about
the
intellectual
property
of
the
source
code.
G
Okay
and
yes,
every
developer
can
use
his
own
private
cost
basis
because
you
are
the
only
owner
of
your
spaces
and
no
one
can
access
to
your
space
directly.
So
you
cannot
use
in
excuse
like
it
works
on
my
machine
and
then
someone
else
touch
it,
because
it's
not
possible
to
access
to
other
cost
basis,
and
you
can
work
directly
online
in
the
browser.
If
you
want,
you
cannot
have,
let's
say
user
studio
code
or
visual
studio,
install
it
on
your
machine.
G
So
this
is
why
you
can
work
directly
from
your
chromebook
or
your
mobile
phone,
but
you
can
also
connect
cosplaces
and
visual
studio
code
with
a
one
click
if
you
want,
but
I
will
show
you
later
in
the
demo.
Okay-
and
it
was
also
in
the
visual
studio.
2022
is
in
preview,
but
it
works
as
well
and
you
can
configure
your
container
as
you
want,
and
I
mean
if
you
want
to
install
the
node
version
and
14
or
16,
or
you
want
to
install
the
yeoman
latest
version
on
the
previous
version.
G
G
G
And
it's
not
it's
not
very
much
honestly,
because
if
you
let's
say
take
a
machine
with
two
calls,
for
instance,
and
you
work
for
20
days,
you
spend
14
each
month,
so
it's
very,
very
cheap,
honestly
and
yeah,
and
also
you
have
to
pay
also
the
storage,
but
the
storage
is
cheaper
than
the
machine.
So
for
one
gigabyte
you
spend
0.007
dollars.
G
So
nothing
at
the
moment
you
can
access
co-spaces
from
your
organization
account
it's
not
possible
at
the
moment
to
access
cosplaces
and
use
cospaces
for
your
personal
account,
but
maybe
in
the
few
in
a
few
months
or
years,
who
knows
it
is
possible
also
to
use
as
a
private
user.
These
kind,
of
course
spaces.
Okay.
G
So
let's
see
I
am
a
developer,
so
I
like
to
share
some
code
as
some
demos
honestly,
instead
of
talk
so
here
this
is
my
github
account
and
if
I
go
to
my
meetup
account-
and
I
create
a
new
repository-
oh
sorry,
and
now
here
a
new
repo
here,
call
it
sap001
something
similar.
It's
a
public.
Okay.
I
create
repository
just
like
that.
Okay,
if
you
are
spaces,
enable
on
your
on
your
machine,
okay,
you
can
just
let's
say
it's
better.
If
I
create
sorry,
I
create
a
new
one.
G
G
Guitar
is
creating
for
me
a
new
cosplaces
and
this
build
is
connecting
okay.
It
takes
me
maybe
more
or
less
30
seconds
or
okay,
less
than
30
seconds,
maybe
three
seconds
at
the
moment,
and
here
you
have
a
lot
of
stuff
installed
by
by
default.
I
mean
I
zoom
a
little
bit,
so
you
have
a
python
node.js,
dotnet
and
and
if
I
click
here,
not
heavy
another
version,
I
have
a
latest
version
of
node,
for
instance,
and
I
have
also
an
nvm.
G
G
Spaces
I
can
configure
my
development
account
development
containers,
sorry
with
a
lot
of
let's
say:
personalization.
Okay,
so
I
can
show
you
here
with
your
alpine
or
a
debian,
kubernetes
or
stuff
like
that,
for
instance,
I
can
also
choose
alpine
okay
and
the
version
of
alpine
and
github
create
for
me
a
new
dev
container
and
I
can
create.
G
I
can
use
this
container
and
then
configure
my
container
from
this
file,
but,
of
course,
for
sharepoint
framework
you
have
to
install,
for
instance,
yeoman
gulp
a
lot
of
stuff
okay.
So
it's
not,
let's
say
useful
that
every
time
you
have
to
create
a
new
dev
container,
json,
okay.
So
this
is
why
I
create
this
template.
G
It's
on
my
github
account
and
every
time
I
don't
like
to
let's
say
to
show
my
to
show
my
stuff
because
I'm
not
essays,
but
I
it's
on
my
github
at
the
moment.
So,
if
you
want
you
can
you
can
follow
the
project
and
customize
your
environment?
If
you
want-
and
here
I
created
a
new
folder
called
dev
container,
so
this
is
a
kind
of
let's
say
best
practice.
Okay,
so
here
in
this
folder,
I
create
two
staff.
G
One
is
a
json
file,
call
it
that
container
json
and
another
one
is
a
script
file:
okay,
the
dev
container-
and
I
I
define
that
my
I
try
to
zoom
a
little
bit.
Sorry,
I
take
the
image
directly
from
the
our
valdec
image
from
from
docker
with
the
latest
version
of
the
sharepoint
framework.
Okay-
and
this
name
of
the
image
of
course-
and
I
also
open
directly
the
port
that
we
are
using
for
our
sharepoint
framework
project.
G
Okay
and
you
can
also
add
attributes
to
the
port
like
the
name
or
yes,
this
label
is
just
a
name
or
stuff
for
that,
and
then
you
can
also
personalize
your
visual
studio
code
because,
for
instance,
here
I
install
a
lot
of
extension
directly
from
user
studio
if
you
use
a
pseudocode
without
every
time
you
add
to
this
project,
this
exception,
okay.
So
in
this
case
I
take
the
helio
extension
pack
for
a
sharepoint
framework
and
I
installed
everything
from
there.
G
So,
in
this
case
you
have
a
your
let's
say,
environment
after
running
in
30
seconds,
for
a
sharepoint
framework,
okay
and
at
the
end
I
call
a
bus
script
that
is
located
in
the
same
folder
here,
spf
setup,
and
also
here
I
call
npm
install.
So
I
don't
have
every
time
to
initialize
with
a
new
npm
install
every
time,
my
new
project
and
I
also
trust
the
dev
set
locally.
Okay
and
time
to
time,
do
you
have
a
problem
with
this
command,
and
so
you
have
to
rebuild
the
container?
G
Okay,
let's
see
if
you
are
lucky
later
during
the
demo?
Okay,
so
how
you
can
use
it!
This
template,
I
mark
the
repository
as
a
template
and
if
I
click
on
use,
template
use
this
template.
Okay,
I
can
create
a
new
repo,
okay,
it's
public,
but
it's
okay,
and
if
I
create
a
repository
from
here,
as
you
can
see
here,
I
have
a
new
repository
with
the
same
files
as
before.
G
So
it's
more,
let's
say
fast,
but,
as
you
can
see
here,
maybe
in
less
than
one
minute
you
have
a
development
environment
up
and
running,
but
only
the
first
time,
because
if
you
open
again
because
spaces
after
after
maybe
or
maybe
after
the
first
time,
you
have
the
same
environment
up
running
in
the
20
seconds.
Okay
and
from
here
I
have
my
environment,
so
I
can
start
to
work
with
with
the
sharepoint
directly.
Okay,
for
instance,
I
can
create
a
new
project.
G
Okay,
no
from
here
I
can
okay,
the
name
of
solution
is
web
part.
Hello
world
react
web
part
so,
and
you
start
to
beat
everything
because
I
I
everything
is
solid
on
this
container,
as
I
mentioned
before-
yellowman
gold
and
stuff,
and
that-
and
I
also
trusted
the
certificate.
Okay.
In
addition,
I
just
opened
the
port
here
in
the
as
you
can
see
here.
I
have
this
kind
of.
Let's
say
this
link
is
just
for
you
and
github.
Try
to
log
in
with
your
github
account
at
this
link.
G
So
it's
not
public,
so
it's
just
for
you,
okay
and
you
cannot
access.
Only
from
your
account
to
this
link,
I
think
is,
is
not
finished
but
of
course
also.
This
is
a
let's
say.
This
task
is
more
faster
than
on
your
local
machine,
because
you
are
in
the
cloud,
and
also
the
disk
for
from
github
is
is
less,
is
a
it's
faster
than
your
disk.
Of
course,
now
it
takes
little
bit.
So
I
can
open
a
previous
project
here.
Maybe
no,
it's
almost
finished
now.
G
G
G
Also
here
you
terminal
your
terminal
and
launch
the
cool
cell.
Okay,
it's
very
easy!
So
it's
like
you
work
on
the
local
machine
and
after
let's
say,
and
one
second
two
seconds
five
seconds.
I
don't
know
how
many
seconds.
Okay,
you
start
to
build
your
project
and
launch
your
website
with
your
dev
stuff.
Okay,
so
and
then
for
the
rest
is
the
same.
I
don't
have
too
much
time,
but
the
last
thing
is
that
you
can
also
use
the
browser
version,
but
if
you
want,
you
can
also
open
everything
in
user
studio
code.
G
If
you
have
you
just
do
the
code
install
it,
you
don't
have
to
open
visual
studio
code
and
then
launch
call
spaces
but
directly
front
cost
basis.
You.
You
can
open
this
video
code
and,
as
you
can
see
here,
you
start
my
visual
studio
code
locally
and
you
can
use
your
visa
studio
code
directly
within
everything
installed,
like
your
let's
say,
extensions
and
stuff
like
that,
okay.
G
G
A
H
I
I
We
are
storing
it
in
the
application
root
folder
of
the
spfx
in
the
user's
onedrive.
In
the
xpfx
web
client
acceptative
reference
I'll
talk
about
it
in
a
few
time,
and
it's
basically
to
you,
know
kind
of
give
a
personalized
experience
in
the
viva
connection
board
and
there's
also
a
configurable
option
to
whether
show
the
ship
title
or
date
is
level.
Okay.
I
In
terms
of
exploring
the
concept,
it
was
more
like
calling
the
graph
api
from
the
adaptive
card
extension
and
using
graph
api
to
store
and
read
the
user's
settings
in
the
application,
personal
folder
usage
of
multiple
quick
views
and
state
management.
I
would
like
to
call
out
a
blog
from
wildex,
through
which
I
was
able
to
get
the
reference
on
how
to
easily
store
the
user
settings
in
the
user's
onedrive.
So
this
is
the
link
to
that
particular
blog
where
he
has.
I
You
know
nicely
said
how
we
would
be
able
to
use
it
in
here
quickly
going
to
the
demo,
so
I
have
kind
of
everything
set
it
up.
So
this
is
my
dashboard,
for
example,
and
this
is
the
adaptive
card
extension
we
are
talking
about.
So
what
it
is
doing
is
it
is
getting
a
shift
from
the
local
from
the
selected
or
the
configured
team
here.
This
would
be
the
immediate
shift
which
would
be
upcoming
for
the
current
logged
in
user.
I
If
you
click
on
view
all
you
would
be
able
to
see
all
the
other
shift,
which
would
be
kind
of
coming
in
the
recent
times,
and
you
will
also
have
an
option
to
configure
the
team.
So
basically,
this
is
what
the
whole
idea
was
to
make
the
adaptive
card
extension
configurable,
based
on
the
current
logged
in
user.
I
So
this
is
this
was
the
whole
idea
of
you
know,
kind
of
creating
it,
and
if
we
see
the
data
where
the
configurable
in
this
case,
I
just
need
to
have
the
current
logged
in
the
configure
teams
id
which
from
where
we
have
to
get
the
shifts
it
is
stored
here
as
in
shift
via
settings.json
file.
It
is
nothing
but
an
simple
attribute
to
store
the
selected
team
id
in
the
users,
one
drive
so
that
it
would
be
configurable
based
on
the
logbook
user,
so
coming
to
the
code
walkthrough.
I
What
we
do
is
basically
we
kind
of
register
certain
views
here
by
default.
There
will
be
one
card
view
and
multiple
quick
view.
One
quick
view
to
show
all
the
upcoming
shift.
Then
there
is
a
quick
view
to
show
the
configurable
team
a
drop
down
option
and
there
is
a
success
message:
when
user
clicks
on
a
particular
select
or
configure
a
particular
team,
then
this
is
the
second
method
just
to
initialize
the
graph
client.
I
The
next
method
is
where
we
basically
kind
of
first
get
the
current
logged
in
user
information,
his
join
team
and
then
we
are
able
to.
We
are
trying
to
get
the
settings.json
file
from
the
approved
folder
and
if
it
is
not
found
it
means
the
user
has
not
yet
configured
the
adaptive
card
extension
and
we
we
are
just
showing
the
title.
Like
you
know.
Your
card
has
not
been
configured.
I
We
have
to
make
and
graph
api
call
to
themes,
less
team
ids,
let's
schedule
shift
wherein
we
are
getting
all
the
shared
shift,
which
start
time
is
greater
than
now,
and
then
we
are
filtering
based
on
the
current
logged
in
users
so
that
we
only
able
to
see
the
shift
which
are
assigned
to
us
and
then
it's
just.
If
the
length
is
zero,
we
are
saying
you
don't
have.
I
Any
upcoming
shift
enjoy
your
family
time
kind
of
thing
and
coming
to
the
card
view
card
view
is
again
based
on
how
what
is
the
state
of
the
current
data?
If
there
is
an
error
code,
it
means
we
did
not
found
any
shift,
and
we
can
just
you
know,
tell
them
that
probably
user
might
choose
a
shift
team.
Where
shift
app
itself
is
not
configured,
then
we
can
show
this
error
message.
I
Then
the
next
thing
is,
in
the
card
view
yeah
in
the
card
view
the
buttons
which
are
there.
So
there
are
two
scenarios
here:
either
we
would
be
only
showing
the
configure
button
if
there
is
no
shift
available,
but
if
there
is
ifs
available,
it
would
be
view
all
button
plus
the
configure
teams
button-
and
this
is
the
configure
teams
view
which
basically
kind
of
shows
the
drop
down
so
more
or
less.
I
What
we
need
to
send
here
is
the
teams
which
the
current
logged
in
has
joined
or
he
is
part
of,
and
they
select
a
team
id
to
basically
pre-configure
the
selected
team.
When
user
clicks
on
configure
teams
button,
this
is
the
adaptive
card.
It's
again
simple.
A
choice
set
adaptive
card
where
we
have
data
been
passed
as
the
teams
and
the
display
name
to
be
displayed
in
the
drop
down
and
the
id
corresponding
to
it,
and
on
save
button
we
would
basically
pass
the
id
to
basically
save
it
so
in
action.
I
This
is
where
we
are
actually
storing
the
selected
team
id
again
same
thing.
We
would
have
to
make
a
put
request
to
that
particular
file
with
the
data
which
we
have,
which
would
be
just
this
shift
team
id
and
once
it
is
saved,
we
are
making
the
graph
api
call
again
to
basically
change
the
state
and
everything
the
next
is
submit
message.
This
is
very
simple
as
soon
as
user
has
clicked
on
saved,
we
are
just
showing
this
saved
successfully
error
message:
success
message
onto
the
view,
then,
on
click
of
action.
I
The
next
thing
is
the
quickview,
where
actually
we
are
displaying
the
list
of
all
the
upcoming
shift
in
this.
What
we
need
is
we
need
to
pass
all
the
shifts
which
are
there
the
title
of
the
quickview,
the
subtitle
in
the
description
and
the
adaptive
card
is
where
the
all
the
magic
happens
for
how
we
are
kind
of
displaying
all
the
upcoming
shift
in
a
simple
list
view
to
show
the
display
name
to
show
the
start
time
to
store
the
end
time.
I
I
A
Awesome
stuff,
thank
you
so
much
great
stuff,
as
always
so
encourage
folks
to
check
out
that
code
for
really
excellent
examples
of
using
those
adaptive
card
extensions.
So
thank
christophe,
manuel
and
snarth
for
their
great
demos.
Today,
really
awesome
stuff
from
all
three
of
you.
Thank
you
so
much
for
sharing
your
work
with
us
here
today.
A
Thank
you
to
all
of
you
for
joining
us
on
the
call.
Today
the
recording
will
be
available
in
about
24
hours
on
the
m365
community,
youtube
channel
ak
dot.
Ms
slash
m365,
slash
videos:
you
can
follow
us
there
on
twitter,
our
next
call
being
in
two
thursdays
june
30th,
and
we
have
the
general
dev
call
next
thursday
at
the
same
time,
june
23rd.