►
Description
SPFx & JavaScript SIG PnP community call – June 4. Two demos: User profile property sync between SPFx and Azure AD, and JS “styling” inside SharePoint components. Released PnPjs Client-Side libraries v2.0.6, and SPFx Generator v1.13.1. Added PnP Modern Search as re-occurrent topic in call. Expect updates on Search parts and Search Custom Renderer focus areas. Targeting early July for release of SharePoint Framework v1.11 - SPFx support in store (AppSource) and additional Microsoft Teams integrations. Nine samples delivered – 2 extensions and 7 web parts. The host of this call was Vesa Juvonen (Microsoft) @vesajuvonen. Q&A takes place in chat throughout the call.
Demos:
• Demo: SharePoint User Profile Property Sync with SPFx and Azure Function | Sudharsan Kesavanarayanan (NTT Ltd) | @sudharsank
• Demo: CSS in JS with SharePoint Framework | Sergei Sergeev (Mastaq) | @sergeev_srg & Andrew Koltyakov (ARVO Systems) | @AndrewKoltyakov
References:
• See the full blog post for this call at: http://aka.ms/spdev-blog.
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos
A
Welcome
everybody:
this
is
shipment
framework
and
JavaScript's,
a
special
interest
group.
It
is
the
by
weight
class
Inc
today
is
june
4th,
and
we
do
have
a
lot
of
lot
of
stuff
to
cover
again
today,
like
typically
having
this
community
calls,
and
so
we're
gonna
start,
do
a
quick
update
on
the
shape
on
framework
what's
latest
on
that
one
I'm
not
going
to
actually
talk
about
too
much
on
that
one,
no
demos,
this
time
significantly
update
since
the
last
time,
but
we're
going
to
recap
their
roadmap
and
maybe
some
high-level
timelines
on
the
upcoming
steps.
A
Then
we
have
a
big
list
of
patterns
and
practices
update,
so
basically
our
open
source
projects
and
what's
happening
there.
What's
the
latest
on
PHAs
office
resistive,
our
CLI
espírito
controls,
yeoman
generator
and
BMP
solution,
every
one
of
them
are
somehow
related
on
client
side,
development
and
quite
often
use
with
SharePoint
framework
or
in
Mike's
of
themes,
development
as
well
so
super
cool
stuff,
and
we
have
also
a
lot
of
new
community
samples.
A
Thank
you
to
those
that
one
so
who
is
gonna
cover
those
after
that
quick
list
of
projects,
and
then
we
have
two
demos
today
so
should
Harsin
will
start
super
cool,
a
sharepoint
user
profile,
property,
sync
coordinator
or
admin
tool.
We
share
pod
framework
inertia
functions,
really
cool
stuff
available
in
the
samples
as
well
and
then
Sergei
and
entry.
A
We're
going
to
talk
about
CSS
and
JavaScript
with
SharePoint
framework,
so
really
cool
topics
as
well,
most
likely
at
least
the
second
demo,
with
Sergey
and
Anna,
is
going
to
take
a
slightly
more
than
two
15
minutes
or
20.
It's
going
to
take
20
to
25
minutes.
So
that's
why
we
only
have
two
demos
today,
but
let's
see
how
it
goes
up,
trying
to
be
against
relatively
fast
on
the
interest.
A
So
at
PMP
being
the
BMP
J's,
which
doesn't
have
to
be
used
and
ship
on
favor,
it
could
be
used
in
noches
as
well,
which
is
an
interesting
dimension
on
there,
but
be
basically
volunteer
for
any
of
the
BMP
team
members
and
then
say
that
hey
I
want
to
do
a
demo
and
we'll
schedule
to
a
community
call
and
give
you
a
spot
or
15
minutes.
Typically,
unless
you
need
more
time
to
do
a
demo
now.
Obviously,
the
demo
should
not
be
product
sales
pitches.
A
But
if
you
have
really
cool
solution,
architecture-
and
you
concentrate
on
explaining
your
learnings
related
on
the
existing
implementation,
which
we've
done
and
that's
what
we're
looking
for
or
if
you
have
an
open
source
solution
or
his
shared
example-
and
those
are
super-
welcome
in
here-
really
an
important
thing
as
well
contributing
github,
but
we
do
have
multiple
kit
of
repos
and
where
you
can
actually
participate
and
help
us
with
the
issues
and
help
us
with
the
probe
request
and
the
most
important
part
provide
feedback,
provide
feedback,
provide
feedback.
Let
us
know
what
works.
A
What
doesn't
work
with
you
need
help,
so
we're
able
to
address
that
super
important
thing,
I
need
to
know
as
an
example.
What's
the
let's
say,
what's
holding
you
back
if
you're
not
using
SharePoint
framework,
if
you're
not
using
shape
on
framework
for
Microsoft
team's
development,
why
not?
Can
we
help
you
on
that?
What's
the
missing
gap,
so
we're
able
to
address
the
product
gaps
and
also
address
the
guidance
gaps,
because
that's
why
this
cost
access?
So
please,
please,
please
give
their
feedback
coming
now,
quick
recap
on
our
resources
and
assets.
A
We
have
two
different
YouTube
channels.
We
have
the
official
Microsoft
uses
for
developer
videos,
which
is
the
official
Microsoft
365
YouTube
channel,
where
we
have
build
videos
and
all
the
community
core
videos
cross
Microsoft
races
throughout
them.
We
have
the
Microsoft
racist
worship
on
community
video
channel,
where
we
have
also
MVB
videos
and
specific
playlists
from
MVPs
and
community
members.
We
have
multiple
different
open
source
assets
and
options
available.
A
We
have
several
galleries,
14
samples
list,
formatting
examples,
bit-part
samples
and
then,
if
you're
looking
into
or
basically
concluding
that
way,
there's
too
many
URLs
I
can't
handle
this.
Go
to
the
MSM
365
P
and
B,
which
is
the
welcome
page,
so
much
less
racist,
but
there's
a
practice
and
from
there
you'll
find
all
of
the
different
things.
A
What
we
do
so
links
to
the
links
to
the
user
videos
links
to
do
all
of
the
projects,
and
all
of
that,
so
that's
the
URL
to
remember
now,
quick,
also
promote
here,
if
you're
not
familiar
with
contributing
in
a
kids
hub
or
you're,
afraid
of
doing
that,
and
you
don't
quite
know
what
so
how
to
get
started.
We
do
have
our
sharing
a
scaring
initiative
run
by
David,
Warner
and
Hugo
Bernier
will
basically
they
help
you
to
get
started
really
from
scratch.
A
So
basically
you
don't
have
to
have
any
previous
knowledge
from
Kidz
hub
usage
or
contributions
usage.
This
initiative
is
there
to
help
you
to
learn
how
to
get
started
and
they
have
specific
training
sessions
so
the
next
time.
The
first
time
contributor
sessions
are
in
tune,
18th,
19th
and
22nd.
So
if
you
go
a
game,
a
sharing
is
caring.
You
can
see
and
download,
invites
and
register
those
sessions
are
super
super
valuable
thing
to
do.
Thank
you.
A
David
and
Hugo
for
running
the
show
in
here
now
we
do
have
also
next
SharePoint
monthly
community
call
coming
it's
just
to
promote
that
one
I
always
win
the
monthly
community.
Call
we
as
a
Microsoft,
we
present
fully
to
call-
and
we
typically
have
a
one
specific
topic
in
the
monthly
community
call
for
40
minutes.
The
next
Tuesday.
A
We
have
really
cool
topic,
which
is
Microsoft
search,
UX,
customizations,
out-of-the-box,
customization,
so
search
first
verticals
and
refiners
for
SharePoint
content,
and
this
is
something
which
is
totally
released
and
already
in
the
ongoing
virtual
conferences
and
but
we
basically
demo
what's
possible.
What's
coming,
what
are
the
options
to
use
out-of-the-box
capabilities
of
creating
a
modern,
SharePoint
shirt's
experience,
so
really
really
cool
stuff
as
well.
So
you
don't
want
to
miss
that.
That's
on
next
Tuesday
at
8
a.m.
Pacific
time
now
pick
off
data
ownership
on
Fame
website.
A
So
next
version
will
be
upon
framework
at
one
point
11.
It
is
currently
scheduled
to
happen
in
early
July,
there's,
probably
first
time,
I'm
actually
saying
ex-police
its
timelines
for
it,
but
yeah
so
we're
targeting
that
to
happen
in
July.
Do
you
know
various
reasons
there
are
certain
dependence
is
related
on
the
SharePoint
framework
support
in
the
store,
and
that
gives
you
an
insight
that
we're
actually
to
open
up
the
shipment,
flavor
store,
apps
or
so
sofa
shape
and
framework
starting
in
July,
and
that's
really
really
cool.
A
So
you
will
see
more
announcements
of
this
one,
but
basically
what
it
means
is
that
you,
as
a
honestly
or
a
developer,
you
can
implement
your
own
Japan
framework
webpart
and
put
it
in
app
stores
or
in
the
office
store
and
have
it
as
an
SPF
X
solution
available
for
any
people
in
the
world,
and
we
support
also
well
any
people
of
the
world.
But
anyway,
our
customers
and
we
also
support
SB
effects
based
Microsoft
team's
extensibility.
A
In
this
scenario,
so
you
can
definitely
target
implementer
upon
framework
based
Microsoft
themes,
tab
or
a
personal
application
and
ship
it
in
the
app
source
and
then
you're
able
to
actually
get
money,
hopefully
from
your
license
model
from
this
customer,
so
really
cool
stuff
coming
in
July
and
plenty
of
other
topic
in
the
in
the
roadmap
wrote
in
this
massive
but
we're
trying
to
get
to
do
stuff
sooner
or
later.
Now.
A
One
of
our
key
priorities
for
the
upcoming
months
is
also
the
reliability
and
then
the
let's
say
the
quality
of
the
code
and
quality
of
the
service.
So
we're
really
focusing
on
on
helping
your
life
and
making
the
service
more
reliable
as
law,
you
can
always
improve
and
reliability
and
performance.
Now,
let's
go
to
the
BMP,
J's,
client,
side,
libraries,
so
B&B
chains,
clients
at
libraries,
the
2.06
VHS
is
in
version
to
version
2.0.
A
Six
is
scheduled
to
happen
on
June
5th
and
the
new
statement,
if
and
on
the
IE
polyfills,
with
the
8th
of
may
release,
probably
not
the
August
release
will
need
to
expand
these
dates
in
the
in
the
future.
Certainly,
and
thank
you
everybody
for
your
feedback.
Absolutely
there
are.
There
are
really
nice
setup
videos
available
already
previously
released
by
David
how
to
get
started
on
using
BM
das
v2.
If
you're
using
BMP,
JavaScript
score
or
the
BMP
is
version
1.
Please
update
the
BMV
JV
it's
much
more
performant
and
much
bundle.
A
2
sizes
are
much
more
smaller
last
week
is
still
on
a
family
leave,
so
Julian
and
Roy,
and
the
team
will
handle
things.
Patrick
we'll
be
back
in
July
now
office,
365
CLI,
quick
update
in
here
the
latest
version
is
2.10.
The
latest
of
things
is
really
around
helping
the
upgrade
the
SharePoint
framework
projects.
We
are
already
testing
towards
to
SharePoint
framework
1.11
release
so
that
whenever
the
SharePoint
framework
1.11
will
be
out
plan
to
happen
in
July,
there
will
be
an
upgrade
command,
so
updated
or
ready
for
us
raises
to
us
their
lives.
A
So
that's
going
to
help
you
to
make
the
upgrades
to
the
SharePoint
framework
latest
version
as
soon
as
possible
and
and
the
really
cool
part
is
the
code
tour
and
we're
going
to
help
you
to
basically
perform
to
need
a
changes
within
your
solution.
There's
also
other
updates
in
here
related
on
how
to,
for
example,
either
Microsoft
to
do
little
to
do
list
or
a
day
to
do
tasks
and
then
other
operations
and
more
and
more
sample
scripts
available
how
to
get
started
on
that
one,
so
really
cool
stuff.
A
It's
be
effects,
reusable
components,
not
that
much
new
here
done
a
new
version.
There
is
a
significant
amount
of
these
controls
already
available
in
both
weird
controls
and
and
property
controls.
So
please
do
take
advantage
of
these.
The
latest
version
is
being
1.18,
so
these
are
free
to
take
advantage
already
free
to
use
by
you
in
your
solutions
as
well.
So
super
super
useful
thing
and
increases
your
productivity
enormously,
so
really
really
really
cool
stuff,
BMPs
pfx,
human
generator.
A
The
latest
version
being
one
point
eleven,
one
so
to
say
a
small
updates
on
this
one
and
the
angular
9
elements.
Potentially,
in
future
purple
and
J
is
potentially
in
the
future,
react
chest
hooks
support
for
new
web
part,
so
a
new
version
of
react
will
is
supporting
react
hooks
and,
yes,
part
of
the
open
source
version
of
the
yeoman
generator.
That's
the
react
packages
will
be
actually
having
that
kind
of
the
implementation
available.
If
you
choose
that
option,
so
really
cool
stuff.
Coming
on
this
side
as
well,
have
a
look
on
this.
A
It
really
is
really
really
useful
human
generator.
It
increases
your
productivity
as
well
like
all
of
these
products
are
doing.
Our
projects
are
doing
that's
what
they're
targeted
to
do
now.
Pmp
modern
search,
I
know
that
front
corner
couldn't
actually
join
today,
but
they
came
as
B&B
search
we're,
including
an
updates
of
this
one
in
this
project.
In
this
solution
as
well,
but
3.13
release
happens
pretty
recently,
May
20
2011
ow
new
stuff,
new
optimization.
A
This
is
the
last
version
using
the
existing,
a
let's
say,
code,
branch
and
and
right
now,
no
new
features
would
be
requested
from
the
community.
Only
bug
fixes
so
there's
an
ongoing
refactoring
happening
and
there's
going
to
be
a
new
major
version.
Hopefully,
release
relatively
soon
in
July,
August
timeframe,
with
the
additional
capabilities
so
really
cool
stuff.
On
this
side
as
well,
now
BMPs,
we
have
examples,
hugo.
I
know
that
you're
on
the
Bob
I
am
thank.
B
You
so
we've
had
a
lot
of
samples.
Since
our
last
meeting,
we
have
a
new
announcements,
application
customizer
by
mouth
I,
see
he
actually
took
samples
from
waldek
and
Sudarsan
and
looked
at
the
SharePoint
starter
kit
alert
notification
component
and
he
actually
created
a
new
component
that
creates
announcements
on
the
top
of
the
page.
Our
June
modified
the
SP
effects,
festival
and
updated
it.
B
This
was
originally
an
update
from
our
extension
from
Anu,
and
then
we
have
a
whole
bunch
of
new
web
parts
at
a
Cadle
MSSD
FX
webparts
one
is
from
siddharth
which
allows
you
to
create
teams
messages.
So
it
shows
you
know
your
the
teams.
You
belong
to
the
channels
and
allows
you
to
send
messages
to
it.
There's
a
new,
really
cool
word
on
scramble
game
from
neo,
burkina
I,
have
to
admit.
I
spent
way
too
much
time
when
I
was
testing
it,
it
was
really
really
fun.
I
encourage
you
to
play
with
it.
B
There's
a
new
update
from
Louis
I
just
pushed
in
this
morning
that
allows
you
to
create
it's
a
outlook
head
and
that
allows
you
to
create
to
do
tasks
from
within
outlook,
and
then
we
have
updates
from
Zach
Roberts
with
react.
My
groups
both
George,
who
is
going
to
be
demoing
this
in
two
weeks,
I
believe
which
is
this
page
hierarchy.
I
component
growl
updated
his
my
tasks,
webpart
Zach
Roberts,
updated
his
react.
My
groups
way
apart
and
I,
updated
David,
Warner
and
Bo
Cameron's
webpart
called
theme
major.
A
Excellent
Thank
You
Hugo
and
that
one
it's
really
great
to
see
all
of
these
contribution
and
in
every
single
by
week
we
have
more
and
more
stuff
available
again
just
to
remind
on
these
solutions.
So
these
are
all
MIT
license.
They
are
there
for
you
to
take
advantage
or
demonstrating
a
pattern
showing
how
things
work,
and
then
you
look,
you
can
learn
from
them
and
then
you
can
implement
your
customer
cases.
Customer
projects
based
on
the
Linux
of
their
solutions,
and
this
way
we
all
will
from
each
other
and
that's
a
win-win
for
everybody.
A
C
Everyone,
so
my
name
is
Judith
and
k7r.
Heinen
and
I
am
working
as
a
SharePoint
consultant
identity
based
in
Singapore,
and
my
blog
site
is
SP
knowledge,
calm
and
some
of
my
social
accounts
here.
So
today
we
are
going
to
see
about
a
solution
called
SP
ups
property
sync,
where
I
have
designed
this
solution
using
SharePoint
framework
version.
One
point:
10
and
I
have
been
using
Emma's
graph,
API
and
as
your
function.
C
So
so
some
of
the
features
like
there
is
a
flexible
property
mapping
where
the
administrator
can
choose
which
property
to
map
and
then
which
property
to
sync,
whether
it
can
be
a
manual
or
a
template
based-
and
there
is
also
bulk
sync
features
available,
and
this
solution
is
access
control
based
on
a
SharePoint
group.
Only
the
site
administrator
can
provide
the
SharePoint
group.
C
So
only
the
members
on
this
group
can
access
this
solution
and
the
final
thing
is:
I
have
used
a
PNP
PowerShell
using
Azure
function
to
handle
the
updation
in
the
SharePoint
User
Profile
service
supporting
artifacts
I,
have
used
PNP,
SP
and
PNP
graph
and
SP
effects,
property
controls
and
controls.
React
and
I
have
also
used
react
editable
table
to
provide
the
dynamic,
inline
editing
and
there
are
two
other
links.
C
I
have
been
used
for
reference,
so
one
is
the
link
from
the
article
from
visa,
which
was
a
couple
of
years
ago,
where
I
have
used
for
my
solution,
some
of
the
information
I
captured
here
and
mainly
on
the
the
properties
which
are
automatically
synchronized
and
the
property
names,
and
also
the
JSON
format
which
I
have
used.
This
same
JSON
format
used
here
with
slight
modifications
and
another
URL
is
a
video,
a
great
video
by
Paulo
on
how
to
use
the
PNP
PowerShell
in
a
Geo
functions.
C
Okay,
let's
go
to
the
demo.
So
this
is
the
profile
property
sync
page,
where
I
have
already
added
this
to
the
SharePoint
page.
So
first
I
would
like
to
show
the
properties,
so
this
property
will
be
available
only
to
the
site
administrators
and
if
you
go
back
to
the
go
back
as
a
normal
user
and
when
you
try
to
edit
this,
so
it
is
restricted,
so
only
the
site
administrator
will
be
able
to
edit
the
properties
and
the
properties
like
the
library.
C
So
when
you
have
created
the
certificate,
then
you
can
use
the
option,
use
the
certificate,
so
there
will
be
a
flag
which
will
I'll
be
showing
later
on
and
the
date
format
where
all
the
details
shown
here
will
use
the
same
date.
Format,
and
these
are
all
the
sharepoint
groups
who
will
have
access
to
this
solution.
So
not
all
the
users
will
have
access
to
this.
C
Only
the
members
of
this
group
will
have
access
and
the
last
is
the
use
page
fold
width
and
since
I
have
used
this
in
the
sharepoint
page,
it
is
using
the
full
width,
which
is
the
communication
side
and
in
case.
If
you
want
to
test
this
solution
in
a
workbench,
then
you
can
use
this
option
so
that
it
will
use
the
full
page.
I
have
used
the
workbench
customizer
functionality
to
make
it
as
a
full
page.
C
C
So
the
list
will
have
the
default
properties
which
are
enabled
by
default,
and
you
can
also
add
more
properties,
the
custom
properties,
whichever
you
have
created
in
your
Azure
ad,
so
you
can
choose
whichever
properties
you
can
synchronize
and
then
you
can
generate
a
JSON
file
or
CSV
file.
Both
are
supported,
so
you
can
just
toggle
it
and
then
can
just
generate
the
JSON
file
and
they
can
also
create
a
CSV
file.
C
So
this
is
a
sample
CSV
file
where
I
have
used
to
only
three
or
four
property
city
state
postal
code
and
country
and
this
user
ID
by
default.
It
will
be
appended
to
the
property
file,
which
is
the
unique
identifier
to
update
the
property.
This
is
the
sample
CSV
file,
and
this
will
be
the
sample
JSON
file,
where
you
can
replicate
this
code
and
then
you
can
add
more
use
of
properties
and
everything.
So
here,
I
have
allowed.
I
have
used
the
people
picker,
where
I
have
allowed
of
only
twenty
peoples.
C
Maybe
you
can
allow
more.
So
let
me
choose
one
user.
So
there
are
two
options:
you
can
initialize
the
manual
properties
or
the
gate
as
your
properties.
So
let
me
choose
just
for
properties
as
of
now
for
demonstration.
So
when
you
click
initialize
manual
properties,
you
will
be
able
to
key
in
the
property
values
and
when
you
click
on
get
a
zoo
properties,
so
automatically
the
data
from
a
zoo
will
be
pulled
and
then
displayed
it
here.
C
So
if
you
see,
if
you
see
the
ru
property
here,
city
state
and
everything
will
be
same
here-
that
is
T,
so
I
have
also
cleared
loaded.
The
relevance
here,
I
have
added
custom
property
city
state.
These
are
all
not
the
default
properties,
but
this
solution.
You
can
also
use
the
default
properties
to
update,
for
example,
Department
office,
location,
mobile
number
and
everything.
So
as
of
now,
this
properties
are
not
it's
it's
cleared,
so
let
me
try
to
update
it.
So
when
you
click
update
user
properties,
so
that's
it.
C
C
Maybe
we
can
check
back
later.
So
the
next
option
is
sorry
bulk,
sync,
where
you
can
select
the
data
file,
whether
CSV
or
JSON,
so
I'll
just
upload
the
sample
file,
so
I'll
just
use
CSV,
so
click
upload,
so
it
will
automatically
provide
what
are
all
the
details.
What
are
all
the
user
details
you
have
added
in
the
CSV
file,
then
you
can
choose
it
and
then
you
can
just
update
the
properties.
So
the
same
goes
for
JSON.
C
So
whenever
the
files
has
been
uploaded,
so
you
can
monitor
whoever
has
uploaded
or
whatever
the
files
and
everything
and
actions
when
you
click
on
it,
you
can't
see
the
details.
So
what
all
the
users
have
been
updated
from
this
file,
so
you
can
see
the
details,
and
that
is
also
another
tab
called
templates
generated,
but
whatever
the
property
mapping,
you
have
downloaded,
so
everything
will
be
stored
here
and
you
can
see
this
file
has
whatever
the
properties
included.
C
So
you
can
see
the
properties
here
can
check
the
actions
and
then
you
can
see
the
properties
here
so
as
of
now,
I
have
updated
to
3%
so
here
so
the
first
is
using
the
rju
property
and
the
second
one
is
using
the
template.
So
when
you
click
on
this
action,
so
you
can
see
the
user
value,
so
everything
is
updated.
If
there
is
any
error
you
can
can
see
it
here
and
the
empty
values
are
not
updated.
For
example,
if
you
see
here
so,
if
you,
you
can
also
provide
the
empty
values
in
case.
C
C
So
when
you
refresh
it
so
let
it
refresh
and
the
second
one
is
sorry
Lee
undone
Grady.
So
this
is
Lee
and
this
is
Grady.
So
this
is
refreshed,
and
you
can
see
here-
the
city
state,
postal
code
and
country.
It
is
updated
and
when
you
check
for
Grady-
and
if
you
see
here
for
Grady
cities
to
state
2
and
country
two,
when
you
check
here,
you
can
see
cities
country.
C
So
this
is
the
solution
and
I
have
used
true
list.
So
this
is
the
property
mapping
list.
So,
based
on
this
exact
you
flag,
all
the
properties
will
be
displayed
on
the
property
mapping
here.
So
the
administrator
can
go
and
change
the
exact
you
flag,
instead
of
deleting
the
record
so
that
it
will
appear
only
the
active
properties.
And
if
you
have
any
other
custom
properties
defined
in
the
as
your
ad,
then
you
can
also
add
that
custom
property,
a
title,
the
property
name
as
your
property
name
and
SP
property
name.
C
And
then
this
auto
sync
is
nothing
but
to
provide
an
information
to
the
user,
whether
they
are
trying
to
update
the
auto
sync
property
or
not.
If
they
have
chosen
the
auto
sync
property
and
then
updated
with
the
manual
value,
so
maybe
SharePoint
to
UPS
will
sync
automatically
at
that
time.
The
auto
sync
will
override
it
in
case
if
the
value
is
different
for
imagery
ad.
C
C
So
this
is
the
value
that
they
have
already
notes
and
it
will
be
transformed
to
this
value
and
then
send
it
to
the
Joe
function,
and
this
is
the
PowerShell
script
which
I
have
included
in
my
solution.
So
basically,
I
have
created
two
function
called
to
connect.
The
SP
online
one
is
using
the
cert
and
the
other
one
is
using
the
credentials
the
service
account
and
then
the
service
account
password
so
other
than
that.
C
So
I'll
be
setting
the
list
item
once
the
trigger
button
is
once
the
button
is
clicked.
The
Abbaye
property
is
click,
then
the
status
will
be
set
to
in
progress
and
after
that,
I
will
be
connecting
to
the
admin
URL
and
then
I
will
be
updating
the
properties.
So
here,
where
I'll
be
choosing,
because
in
SharePoint
the
department
has
two
values,
one
is
Department
and
other
one
is
the
SPS
department.
C
Likewise
the
title
and
office
so
for
this
I
had
used
the
if
condition
to
map
both
the
properties
to
update
both
the
properties
and
then
I
will
be
updating
the
status
with
updated,
and
if
there
is
any
error,
I'll
be
updating
the
error
file
error
status.
So
this
is
the
PowerShell
script,
so,
let's
dive
into
the
code.
C
So
first
this
is
a
webpart
file
where
I
have
defined
two
functions.
One
is
get
user
web
properties,
as
I
already
mentioned,
the
wrapper
properties
can
be
editable,
one
Li
by
the
site
administrator,
so
I
have
here
just
use
with
the
property
pair,
where
part
information
control
to
just
display
the
information
to
the
end-user.
Another
function
called
get
admin
report
properties
where
I
have
defined
all
the
controls,
so,
whichever
I
have
shown
in
the
property
I
have
design
all
the
controls
and
on
the
property
panel
configuration
start.
C
So
in
the
help
of
file,
if
you
see
I
have
used
PNP
yes,
so
here
I
have
used
the
selective
imports
and
then
the
graph
for
fetching
the
user
information
from
a
zoo.
So
the
main
function
here
is
using
the
graph
to
get
the
users
based
on
the
filter,
query,
which
I
will
be
showing
it
in
the
the
next
tab
and
the
other
functions
are.
C
Everything
is
normal
using
the
SVP
and
PJs,
and
one
more
function
is
run
as
you
functions,
where
I'll
be
configuring,
all
the
URLs
and
then
I'll
be
sending
the
calling
Dodger
function,
sending
some
parameters.
So
this
is
how,
while
calling
the
a
function
and
in
the
actual
web
part,
so
here
I
am
using
the
selected
fields,
the
ID
user
principal
names
and
then
the
whichever
the
properties
you
have
selected
in
the
property.
Dialog
I'll
be
mapping
it
and
then
joining
it,
and
then
I
will
be
sending
the
select
query
tool.
C
A
Excellent
son,
thank
you
sweetheart,
don't
don't
close
yet
can
we
can
we
just
in
case
just
to
recap:
gonna
go
back
on
the
blog
post,
which
is
showed
from
me
from
which
is
two
years
old.
It's
which
reminds
me
how
old
I
am,
but
basically
just
to
recap.
What's
the
issue
here
so
out
of
the
books
in
SharePoint
Online,
you
have
a
user
profile
and
user
profile
information
which
you
might
want
to
show
in
the
UX
and
all
of
that.
But
the
number
two
is
the
challenge.
A
So
you
can
modify
what
attributes
from
your
local
Active
Directory
with
number
one
step
is
being
replicated
to
the
Azure
Active
Directory,
but
you
cannot
modify
what
are
the
attributes
which
are
getting
synchronized
from
Azure,
Active,
Directory
to
SharePoint
service
or
SharePoint
Online
Services,
and
that's
really
the
challenge
and
that's
why
we
need
to
have
these
custom
synchronization
tools
implemented,
which
are
then
taking
advantage
of
the
bulk
import,
tooling
and
and
whatever
the
truth
hurts
urn
is
implementing
in
here.
So
that's
really
the
business
scenario.
Just
to
recap:
why
does
this
success
now?
A
I
have
to
say
super-clean
implementation
is
super
cool.
It
shows
really
nicely
how
to
use
craft,
how
to
use
B
and
besides
going
BMPs
pfx
controls
and
many
of
the
other
things
as
well
and
and
panels
and
pop-ups
and
all
of
that
stuff.
So
a
lot
of
a
lot
of
powerful
scenarios
shown
in
this
one
so
really
great
stuff.
Thank
you.
So
it
hurts
on
on
that.
Thank
you,
cool
I,
think
that
sums
up
this
one
so,
and
there
was
a
few
questions
in
the
chat
window.
D
Hello,
everyone
and
we'll
start
with
a
quick
introduction,
so
my
name
is
Sergei
Sergei
I've
been
working
with
SharePoint
and
Microsoft
365
for
many
years,
mostly
as
developer,
because
I
love
development
and
also
I'm
open-source
contributor
I
contribute
to
my
own
projects
on
github
and
also
on
community
driving
projects.
Andrew.
E
Thank
You
Sergey,
just
a
few
words
in
myself.
I
do
SharePoint
as
well,
so
for
a
pretty
long
time,
I
would
say
like
10
years
or
who
counts
heaping
P
community.
Some
of
you
might
know
me
as
a
guy
answering
questions
about
being
bgs
and
who
doesn't
use
mean
P,
yet
stop
doing
it
now
and
go
and
that
it
has
a
dependency
on
the
next
project.
E
I
also
do
some
stuff,
not
necessarily
a
related
to
Gia's
example
for
egoland,
but
mostly
always
connected
to
sharepoint
and
today,
which
is
obvious
from
the
title
o
on
this
slide:
we're
covering
a
concept
of
styling
components
with
energy,
yes,
and
to
be
even
more
precise
in
SharePoint
framework.
So
let's
get
started
with
the
what's
it
all
about
sees
us
in
GS
and
what
the
heck
Sergey
tell
us
more.
Please
yeah.
D
Yeah,
that's
true
that
citizen
gist
is
not
a
silver
bullet
and
that
gesture
modern
alternative
to
no
proven
things.
But
historically,
when
we
talk
about
just
pure
CSS,
then
CSS
has
some
problems,
maybe
some
difficulties,
so
you
can
see
some
of
them
on
the
screen.
So
you
don't
have
example:
deigning
runtime
functionality.
You
do
not
have
your
architecture
probably
know
about
this
specificity,
bottles
etc,
and
that
is
why
you
can
handle
all
these
situations
using
CSS,
just
approach
them
even
more
and
what.
E
D
First
thing
is
that
you're
absolutely
right
that
you
can
solve
all
this
exclusion
using,
for
example,
CSS
modules
or
CSS
and
CSS
language
extensions
like
less
as
SS,
you
can
use
naming
conventions.
Basically,
this
is
something
which
is
available
by
default
in
SharePoint
framework,
but,
additionally,
you
can
use
CSS
ingest
as
well
yeah
and
when
it
comes
to
pros
of
this
new
modern
approach
them
with
CSS
ingest,
you
receive
automatic
local
scoping,
also
code,
analysis
and
suggestions.
You
do
not
have
these
problems
with
specificity.
D
D
E
My
experience
I
mostly
had
no
issues
with
CSS
which
would
be
crashed
by
all
of
these
pros.
However,
some
of
them
I
really
need
to.
My
heart,
may
be
on
the
first
position.
I
would
place
the
possibility
of
using
all
the
features
from
JavaScript
and
apply
them
to
CSS.
At
the
same
time
is
a
late
in
all
the
main
entity,
components
within
reusable
module
and
also
which
is
really
important.
Personally
I
feel
myself
much
more
productive
when
applying
CSS
in
gs,
style
of
coding,
but
I
guess
everything
has
a
price.
D
Sure
there
are
some
some
trade-offs
and
the
the
first
and
maybe
the
most
common
and
the
most
popular
drawback
is
runtime
cost.
Simply
because
my
CSS
images
pattern
or
CSS
changes,
approach
or
citizen,
just
libraries,
they
use
a
bit
different
way
of
applying
styles
to
page,
usually
they
simply
inject
required
styles
in
the
wrong
time
and
also
they
use
special
hash
calculation
functions
or
on
which
calculate
some
kind
of
hash
based
on
your
CSS
style
properties.
D
That
is
why
sometimes,
for
example,
if
you
have
a
lot
of
components
on
your
page,
hundreds,
maybe
thousands
of
components.
If
you
display
a
list
of
something,
then
you
might
have
parents
issues
if
you
we'll
use
CSS
just
wrongly.
That
is
why
you
should
pay
special
attention
at
this
point.
Also,
you
cannot.
You
cannot
dive
into
CSS
Neuse
library
without
some
some
knowledge,
so
we
should
learn
how
it
works,
how
to
do
things,
etc.
D
You
cannot
migrate
for
one
citizen,
J's
library
to
another,
because
there's
no
such
things
as
interoperability
and
also
additional
problem
is
that
everybody
knows
CSS,
but
only
some
people
knows
some
success
in
J's
libraries.
That
is
why,
every
time
you
introduce
Assassin
GS
in
your
code,
then
you
add
some
additional
layer
of
complexity
in.
E
My
experience
I've
faced
little
or
no
runtime
cost
ever,
however,
I
apply
the
concept
in
moderation,
but
definitely
agree
that
new
toys
bring
something
new
to
learn,
and
it's
really
a
true
story
when
I
show
this,
as
in
yes
to
my
colleagues,
some
of
them
scratch
their
heads
and
struggle
a
bit
before
even
accepting
the
concept,
but
so
far
we
talked
about
the
concept
itself,
but
not
specific
tools.
Why
not?
To
fix
it?
Yes,.
D
When
it
comes
to
libraries,
then
we
can
divide
all
libraries
into
two
big
categories:
the
first
one
is
framework
agnostic
and
second,
one
is
framework
dependent.
So
we
see
that
when
we
talk
about
framework
agnostic,
then
we
have
emotion,
type
style
offered
it
and
some
others
and
forever
dependent.
We
also
have
emotion
because,
for
example,
this
library
can
be
used
in
in
two
modes
at
the
same
time,
so
yeah
it's--that's---
these
are
the
the
most
I
would
say
the
most
popular
libraries
and
these.
E
D
E
A
D
Start
the
type
style
type
style,
that's
framework,
agnostic
library,
if
you
remember
from
the
slide
and
that's
the
that's
the
home
page
of
the
type
style,
and
we
the
API,
is
quite
simple
and
that's
the
reason
why
I
like
this
library,
basically,
this
style
function,
that's
the
core
function
from
core
import
from
type
style,
and
in
this
function
you
pass
an
object
which
describes
your
Styles.
Basically,
this
object
contains
CSS
properties
and
the
return
value
of
this
function,
just
their
unique
string-
and
you
can
later
on
you
apply
this
unique
string
to
your
example.
D
React
based
component,
like
this
I
think
that
this
code
is
very
well
familiar
for
you.
Additionally,
this
type
style
library
has
a
helper
method
called
style
sheet.
For
example,
if
you
want
to
style
the
whole
component,
and
if
you
have
a
few
different
elements
inside
your
component,
then
you
can
simply
use
style
sheet
function
which
accepts
an
object
with
keys
and
every
key.
That's
just
as
a
result.
It
will
be
unique
class
name.
So
we
call
this
function
like
this
will
describe
all
your
elements
of
your
component
and
then
in
your
react
component.
D
In
the
same
way,
and
a
very
similar
way
to
our
SharePoint
framework
using
apply
these
unique
classes
to
corresponding
markup
so
yeah,
this
is
the
demo.
So
my
demo
only
a
slightly
simpler,
they'll
profile:
silk
because
I
have
on
one
button
and
you
can
click,
it
changes
the
state.
You
also
can
edit
section
and
you
can
select
different
styles
for
section,
and
you
see
that
the
button
changes
its
styles
accordingly,
so
it
reacts
to
different
or
it
reacts
to
team
change
and
now
let's
go
and
see
how
it
works
from
code
perspective.
D
Then,
let's
go
and
see
what
is
here
here.
I
have
my
webpart
component
and
what
is
the
most
important
thing
is
that
I
used
theme
and
I
use
react
building
context
provider
in
order
to
push
my
film
value
from
my
top
level
web
part
to
all
child
components
so
that
on
every
every
level
in
hierarchy,
I
can
get
my
theme
value
and
style
my
components
according
to
themes
from
SharePoint.
So
this
little
trick,
which
gives
me
this
opportunity,
also
I,
have
a
code
which
subscribes
to
theme
change
event.
D
So
this
is
the
way
how
I
am
able
to
react
to
these
changes.
So
every
time
a
user
changes,
the
team
then
I
call
this
render
method
again
and
everything
is
got,
render
it
according
to
to
a
new
theme
and
then
I
have
this
type
style
button
component.
So
if,
if
I
open
this
folder,
then
there
are
two
files.
The
first
one
is
react
component
itself
and
the
second
one
is
styles
for
this
component.
D
So
here
I
have
style
sheet
function
that
we
saw
before
and
then
I
have
to
adjust
to
keys,
that's
root,
polymer
and
then
my
button
element
and
all
the
sss
styles
required
for
my
body
and
finally,
if
go
here,
then
I
use
this.
Just
custom
react
hook,
which
returns
but
styles
object
with
all
the
properties
I
defined
in
my
style,
the
TS
file,
so
in
a
way
which
is
very
similar
to
as
Perfect's
I
simply
apply
different,
unique
cross
names
to
my
elements.
D
So
if
I
go
here
and
if
I
add
something
different
like
this,
then
I
can
I
can
go
ahead
and
simply
change
the
the
class
name
here.
So
you
know
how
it
works,
and
if
we
open
the
the
hook
itself
used
in
styles,
then
the
hook
simply
listens
to
theme,
changes
and
every
time
have
a
different
theme.
Then,
if
it
applies
different,
different
styles
using
using
great
style
function.
So
here
this
great
Styles
function.
D
It
accepts
SharePoint
theme,
and
this
is
the
reason
why
I
can
likely
use
different
colors,
and
this
is
the
reason
why,
when
I
change
my
section
to
ground
colors,
then
my
background
color
button,
for
example,
it
also
changes
from
from
blue
to
teal
yeah.
So
this
is
it
from
my
site.
Your
journal
entry
thank.
E
You,
okay,
let
me
share
my
screen:
I'm,
going
to
expose
a
bit
of
specific
of
using
style
components.
That's
a
pretty
popular
library
out
there.
It's
made
specifically
for
react.
I
get
reacted
the
thing
I
use
day-to-day.
So
it's
not
a
problem
for
me.
Style
components
have
nice
site,
neat,
documentation
and
grade
did
have
a
story.
This
thing
takes
might
be
felt
sort
of
funny.
However,
it's
actually
an
absolutely
well
it
JavaScript.
E
What
we
can
see
here
is
actually
called
text
and
played
literal,
and
that
guy
is
nothing
else,
but
a
function
when
you
import
styled,
you
can
define
which
Dom
element
type
to
use,
for
example,
enter
tag
deep
span
whatever
in
and
then
provide
Styles.
This
way,
in
most
cases
that
Styles
can
be
copied
from
or
to
SAS
modules,
and
the
syntax
is
mostly
the
same.
That
is
for
me,
who
perrolli
use
30%
of
sass
features
at
all.
E
Not
only
plain
CSS
can
be
here,
but
also
some
dynamic
part
provided
we
ygs
callbacks
and
the
component
actually
ends
up
as
a
usual
react
component
can
be
exported,
reused,
composed
and
configured
with
properties
to
use
these
in
as
perfect
solution,
almost
none
of
the
bayonetted
specifics
should
be
cared
about.
Learning
curve
for
a
react.
Developer
is
actually
really
tiny
and
dreaming
by
use
case
most
can
be
easily
result
using
style
component
documentation.
E
However,
some
favors
of
flavors
of
SP
fix
can
be
added
to
make
solution,
for
example,
thing
where
and
my
example
shows
the
usage
of
style
component
in
a
spare
fix,
and
it's
really
close
or
in
some
parts,
even
identical
to
the
previous
demo,
held
it
by
sergey,
and
in
my
example,
I
also
receive
sim
provider
using
a
sim
variant
using
sim
provider
and
try
get
theme
method
also
subscribed
for
theme
change.
You
went
and
pass
it
down
to
the
style
to
components.
E
However,
in
my
sample
it's
much,
the
usage
is
much
simpler
due
to
the
fact
that
I
am
meeting
some
extra
complexity
like
up
context,
which
is
really
great
in
the
real
life
applications.
But
the
idea
is
to
show
how
to
use
a
specific
library
within
SharePoint
framework,
let's
dive
to
the
code,
so
this
part
is
identical
to
previously
shown
and
what
it
does
it
receives.
This
seam
and
bypass
it
down
to
the
properties
the
style
component
is
represented
by
these
Mario
actually
receives
properties
from
theme.
E
We
can
define
CSS
as
in
the
same
manner
as
if
it
were
sass
module,
for
example,
and
we
can
also
bypass
these
properties.
So
the
properties
passed
to
you,
this
component
ends
up
being
available
in
these
GS
callbacks
and
we
can
receive
them
using
standard
to
JavaScript
manner,
provide
alternative,
valid
sensor,
one
and
so
on,
and
this
component
is
a
reusable
unit
which
can
be
imported
somewhere
in
the
plication
and
used
as
a
wrapper
around
other
parts
of
the
application.
E
Not
necessarily
should
be
you
one
single
component
for
all
styles,
but
what's
important,
is
that
these
class,
for
example,
is
defined
here.
So
we
bypass
all
the
properties
from
here
and
the
downside
of
styled
components,
which
is
not
actually
a
huge
downside,
but
the
nuance
to
know
is
that
if
you
don't
install
the
visual
studio
plugin
for
dealing
with
style
components,
this
part
will
be
just
a
plain
text
without
any
intellisense
without
a
helper
about
methods.
Without
all
these
staff
and
helpers
from
the
visual
studio
code
and
plucking
in
particular.
E
So
do
you
have
the
best
experience
with
style
component?
You
got
to
recall
to
install
visual
streaker,
styl
components,
plugin
and
then
all
that
features
are
activated
and
let's
switch
to
the
SharePoint
page.
Here
we
are-
and
this
is
our
humble
web
part
and
let's
go
to
settings
change
and
look
change
the
look
themes
and
select
a
couple
of
different
themes,
just
to
show
how
it
reacts
so
the
web
part
using
where
synced
provider
receives
new
theme
and
reflects
it
in
the
UI
automatically
and
instantly.
E
A
E
Exactly
and
even
more
and
all
the
concept
of
how
the
library
is
used
in
a
SharePoint
framework
are
almost
identical,
so
the
difference
is
a
little
bit.
So
only
the
specifics
how
the
library
is
used,
so
any
documentation
for
CSS
and
GS
in
my
case,
tile
component
would
work
for
a
developer
or
dealing
with
the
SharePoint
for
work,
so
nothing
new
will
be
brought.
So
you
can
replace
one
library
with
another
and
only
the
specifical,
for
that
external
implementation
will
make
sense,
yeah
and.
A
And
one
point
related
on
also
on
the
topic
recovering:
that
was
a
really
great
demo
by
the
bio
surgery
on
the
on
the
background
section
background
handling,
because
that's
that's
really
the
key
on
understanding
that
okay,
so
when
I
ain't
user,
flips
dissection
background,
how
do
I
deal
with
that
in
my
style,
so
really
really
cool
and
a
simple
way
of
actually
doing
that
so
really
cool
stuff,
and
thank
you
entry
on
that
now.
Thank
you.
Suit,
harson,
awesome,
absolutely
brilliant
demo
on
the
capability
and
thank
you,
sir
kay
and
untrue
on
that
discussion.
A
There
was
good
feedback
related
on
the
discussion
format
and
also
what
we
were
showing
it's
super
important
thing:
how
do
we
handle
the
styling
inside
of
SharePoint
framework
components
in
the
way
that
it's
it's
adapting?
What
the
SharePoint
Beit
is
showing
and
also
how
it
controls
the
styling
it
exposed
as
Max's
themes,
tab
or
a
personal
application,
so
that's
definitely
an
option
as
well.
Now
we
are
running
out
of
time.
So
that's
fine
I'm
going
to
just
summarize
the
things,
so
the
recording
of
the
the
community
call
will
be
available
within
24
hours.
A
In
marks
of
choices
to
I
share
my
community
B&B
YouTube
channel
if
they
came
a
century's,
it's
like
the
NP
videos
and
you
can
follow
what's
happening
in
the
Microsoft
raises
to
active
or
M,
chooses
right,
B&B
next
trip
on
framework
or
is
within
two
weeks
on
June
18th
and
then
next
Microsoft
resistive.
Our
general
div
goal
is
on
June
11
so
week
from
now,
and
then
we
have
the
June
monthly
community
core,
but
we're
going
to
talk
about
the
search,
extensibility
out-of-the-box
next
Tuesday.
A
So
a
lot
of
course
coming
up,
I
and
obviously
all
of
the
course
are
getting
recorded.
All
of
the
demos
are
getting
recorded
and
published
in
the
huge
channel
as
well,
so
you
can
easily
follow
up
on
what's
happening.
You
do
not
have
to
turn
on
all
of
these
course.
You're
gonna,
always
catch
up
on.
What's
is
happening
in
the
recordings,
but
the
course
have
the
advantage
of
having
the
chat,
which
absolutely
is
beneficial.
A
Now,
if
we
have
a
look
on
the
whole
list,
of
course,
and
there's
also
adaptive
cars,
monthly
community
call
craft
monthly
community
call
with
just
this
week
by
then
the
demonic
on
political
teams,
monthly
community
calls
and
all
that
stuff.
Now
we
are
having
an
internal
discussion
in
myself.
Should
we
reduce
the
number
of
these
goals
consolidate
and
all
of
that,
the
based
on
the
feedback
which
you
gave
us
actually
lasts
within
the
past
survey?
The
answer
goes:
do
not
reduce
the
calls
keep
on
the
weekend.
A
Keep
on
executing
as
many
calls
us
as
there
are
and
like
today,
we
had
178
I
was
the
maximum
today
on
the
attendance
side,
so
there's
clearly
a
demand
for
this
course
and
obviously,
if
you
want
us
to
reduce
the
number
of
course,
we
will
start
reducing
that,
but
we're
trying
to
figure
it
out
that
the
balance
between
these
things
no
time
explicitly
for
Q&A,
we
were
answering
some
of
the
Q&A
calls
in
the
chats
as
today.
So
let's
close
up,
thank
you
and
one
more
time.
A
Sweetheart,
some
and
true
answer
key,
create
demos,
super
valuable
stuff
for
sharing
for
everybody
else.
For
all
of
the
other
people
attending
and
if
you're
interested
in
doing
a
live
demo,
just
just
being
any
of
the
BMP
team
members-
and
we
will
schedule
scheduled
on
any
of
the
upcoming
course
as
well-
a
gameis
entries,
it's
5:00
p.m.
be
on
a
top
right
corner
of
the
screen.
A
Just
to
remind
you
for
the
one
URL
where
you
can
find
all
of
the
details
related
on
what's
happening,
community
call
invites
the
team
members
open
source
stuff
from
a
single
location,
but
thank
you
everybody
for
joining.
Thank
you
for
lively
discussion
in
the
chat
window.
Thank
you
for
sharing
your
knowledge
between
the
others
in
the
community
have
a
great
weekend
and
we'll
continue
well
tomorrow,
as
through
Friday
and
which
is
a
tribute
normally
a
working
day.
But
anyway,
the
weekend
is
coming
as
well
and
we'll
be
coming
back
on
the
ship.