►
Description
SharePoint PnP Community - SPFx & JS SIG call on August 27. Three demos delivered: 1) Building an accessible Accordion web part, 2) Building company Phone Directory solution with SPFx and Microsoft Graph, and 3) Enhanced Power Apps Web Part - Cool Power Apps integration scenarios with SharePoint. Released PnP CLI for Microsoft 365 beta v3, React Controls beta v2 and React Property Controls beta v2. Released 8 web part samples. Added new contributor training sessions on Sharing is Caring site. Register for PnP Virtual Conference on September 1st. The host of this call was Patrick Rodgers (Microsoft) @mediocrebowler. Q&A takes place in chat throughout the call.
Demos:
• Building an accessible Accordion web part – Erik Benke (Mentor Graphics) | @erikjbenke
• Building company Phone Directory solution with SPFx and Microsoft Graph – Dipen Shah (Stridely Solutions) | @Dips_365
• Enhanced Power Apps Web Part - Cool Power Apps integration scenarios with SharePoint – April Dunnam (Microsoft) | @aprildunnam & Hugo Bernier (Tahoe Ninjas) @bernierh
Learn more:
• See the full blog post for this call at: http://aka.ms/m365pnp-blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
Hello
and
welcome
to
the
sharepoint
framework
and
javascript
special
interest
group
meeting
for
august
27th
can't
believe
we
are
already
almost
through
august.
We
got
a
great
meeting
for
you
today.
Our
agenda,
for
today
is
standard
updates
from
the
sharepoint
framework.
We
got
the
patterns
and
practices
updates
and
we
got
some
new
community
samples
to
talk
about
them.
We
got
three
great
demos
from
eric,
dippen
and
april
and
hugo
are
presenting
in
order
there
accessible
accordion
pattern
phone
directory
and
then
also
enhanced
powerapps
web
parts,
so
very
excited
to
see
all
of
those.
A
So
let's
get
through
our
intro
stuff,
so
we
can
get
to
those
great
demos
as
quickly
as
possible.
I
do
want
to
remind
folks
we've
got
lots
of
great
opportunities
to
participate
in
the
sharepoint
framework
patterns
and
practices
program,
whether
it's
this
call
or
the
program.
Overall,
we
got
demos,
so
you
can
demo
anything
sharepoint
framework,
anything
at
pnp.
A
All
these
demos
are
fantastic.
I've
said
almost
every
call.
These
are
my
favorite
parts
of
the
call.
Are
the
demos
so
really
love
those
demos
and
appreciate
those
demos
from
everybody
that
gives
them
contributing
on
github.
That
could
be
reporting
issues,
submitting
pull
requests
or
helping
others
with
issues,
that's
a
great
way
to
get
back.
If
you
have
a
few
minutes-
and
you
see
a
question-
you
have,
you
might
know
the
answer
to
or
can
help
with,
love,
love
love
for
you
to
help
out.
A
A
Obviously,
anyone
and
everyone
is
welcome
here
in
the
pnp
community
to
do
demos
to
contribute
and
to
provide
feedback
any
of
these
channels.
Everybody
is
welcome.
The
door
is
wide
open,
come
on
in
we'd
love
to
have
you
so
please,
if
you're
interested
in
doing
a
demo
or
getting
more
involved,
please
just
reach
out
we'd
love
to
help
you
get
started
and
we'll
talk
a
little
bit
in
a
second
about.
The
sharing
is
caring
initiative,
which
is
a
great
way
to
get
started
with
that
as
well.
A
A
All
of
them
do
encourage
contributions
and
reporting
issues
and
helping
out
where
possible,
some
of
them
have
certain
repos
that
maybe
are
not
looking
for
contributors
as
such,
but
maybe
they
have
some
source
code
or
samples
there,
but
all
of
them
all
four
of
those
locations
are
incredibly
valuable
resources
for
you
to
get
started
on
your
sharepoint,
pnp
or
microsoft.
Graph
development
experiences
so
definitely
check
those
out
sample
galleries.
We've
got
samples
for
web
parts,
extensions
list,
formatting
and
teams
samples.
A
So
if
you
have
a
cool
idea
for
a
sample,
I
absolutely
encourage
you
to
get
that
submitted.
Put
that
in
so
we
can
include
that
in
our
list
of
samples
and
it'll
get
updated
on.
This
call
and
other
calls
so
encourage
you.
I
know
a
lot
of
you
are
doing
great
work
for
your
customers
and
your
companies
where
appropriate
and
where
possible,
I
would
love
if
you
can
share
that
with
the
community.
A
Obviously,
you
know
be
careful
with
with
sharing
that
kind
of
work
get
get
approvals,
but
when
you
can
love
to
have
those
samples
up
for
everybody
else
to
learn
from
and
see
the
cool
work
that
you
have
done
and
then
finally
open
source
initiatives
and
samples
ak
msm,
365
pnp,
the
one
link
to
rule
them
all
will
get
you
access
to
all
of
these
other
links.
So
that's
kind
of
a
landing
page
for
all
of
the
patterns
and
practices
stuff
all
up
and
then
finally
aka
dot.
A
B
Yes,
sir,
thank
you
so
sharing
is
caring,
is
an
initiative
by
pnp
to
provide
guidance
and
hands-on
instruction
for
everyone
in
the
community
wants
to
get
a
little
more
involved.
So
typically,
the
first
barrier
of
entry
for
contributing
is
just
the
confusion
around
how
to
work
within
and
around
github.
So
we
have
first-time
contributor
sessions
available
to
provide
you
some
of
that
introductory
information
on
how
you
can
get
involved
with
the
github
experience
in
relation
to
pnp.
We
also
have
a
community
docs
session.
B
So
if
you
want
to
submit
new
documents-
and
these
are
absolutely
for
everyone-
non-dev
dev-
anyone
who
wants
to
contribute
into
the
community
is
welcome
to
any,
and
all
of
these
now
we're
amping
up
the
number
of
sessions
for
september.
But
we
are
not
interfering
at
the
week
of
ignite,
so
you'll
notice.
There
is
a
jam-packed
collection
of
dates
surrounding
ignite
and
the
rest
of
the
month,
as
well
as
a
brand
new
session
on
using
the
pnp
spfx
samples
in
conjunction
with
nvm.
So
we
understand
that
some
of
you
may
feel
like
hey.
B
I
want
to
contribute,
but
I
also
just
need
some
guidance
on
how
to
get
started
with
all
of
these
samples
that
are
available,
and
so
we're
really
here
to
provide
that
guidance
not
only
from
a
contribution
perspective,
but
a
consumption
perspective
so
go
to
that
link
aka
ms
sharing
is
caring.
Lots
of
event
session
dates
available
for
you,
as
well
as
asia,
pacific
friendly
times
now
available,
so
starting
at
4
a.m.
Pacific.
B
A
Awesome.
Thank
you
for
that
and
thank
you
for
doing
these
sessions.
Your
fantastic
sessions.
I
know
we've
gotten
wonderful
feedback
from
folks
who've
attended
them,
so
do
encourage
anybody.
That's
interested
sign
up
for
those
they
are
free
and
certainly
encourage
you
to
check
those
out.
So
some
training
training
announcement
we've
got
the
pnp
virtual
conference
coming
up.
That
is
on
september
1st,
which,
if
I
am
not
mistaken,
how
dates
work
that
is
next
week
next
tuesday,
I
believe
so
akms
p
p
virtual
conference.
A
I
think
you
can
still
sign
up
there
and
again
it's
free.
It's
a
great
all-day
conference
put
on
entirely
by
the
community.
It's
all
mvp
driven,
I
think
myself
and
others
will
be
in
the
q
a
at
the
end
or
whatever
we're
calling
that
at
the
end,
but
the
rest
of
it
is
completely
put
on
by
the
community.
It's
really
outstanding
to
see
that
I
know
paulo
and
others
have
done
a
lot
of
great
work.
A
C
Yep,
so
let's
go
through
this
quickly,
so
just
a
recap
on
on
some
of
the
latest
material
which
we
have
available
so
obviously
we're
working
on
on
heavily
on
the
sharepoint
framework,
solution,
solutions
and
store
right
now.
Actually,
I
should
be
in
a
meeting
where
we
are
planning
the
improvements
on
this
one,
but
I
will
get
there
later
on
the
hour,
but
anyway,
so
there's
an
additional
documentation
and
guidance
available
related
on
how
to
get
your
stuff
unsure
about
framework
solutions
in
store.
C
And
how
do
you
expose
your
solutions
for
the
hundreds
of
thousands
of
end
users
for
microsoft,
teams
which
I
won't
use
it
so
both
works
related
on
the
microsoft
teams.
We
also
have
a
new
focus.
Well,
updated
focus
map
really
updated
focus,
but
there's
a
new
article
series
related
on
building
four
microsoft
teams
using
sharepoint
framework,
which
we
will
be
evaluating
and
improving,
proving
one
step
at
a
time.
C
So
this
is
really
cool
stuff
as
well,
because
the
sharepoint
framework
gives
you
the
capability
on
implementing
ux
capabilities
for
microsoft
teams
without
hosting
without
operations
on
that
side,
so
we'll
to
take
care
of
the
hosting
of
your
solution
and
all
of
that
and
that's
the
beauty
of
sharepoint
framework
for
sure
and
cdn
and
all
of
that
stuff
and
the
last
piece
last
night
quickly
on
my
side.
So
right
now
we're
still
kind
of
trying
to
figure
out
what
will
be
the
sharepoint
framework
1.12
exactly
so.
What
are
the
things?
C
C
Branding
settings
in
portals
there
will
be
cool
announcements
coming
in
ignite
within
a
few
weeks,
related
on
additional
settings
and
capabilities
in
modern
portals
and
those
will
be
available
in
the
api
level
as
well
and
better
microsoft
teams,
embed
support,
microsoft,
sharepoint
framework
store
improvements
in
the
pipeline
and
then
a
lot
of
other
stuff
in
the
sharepoint
side
as
well.
But
that's
a
quick
summary
from
the
engineering
on
those.
A
Awesome,
thank
you
visa
for
that
update.
So
quick
updates
on
the
pnp
program,
offerings,
pnp,
client,
side,
pmpjs
library,
209
is
planned
for
september,
4th
release,
we'll
have
bug,
fixes
and
a
few
new
features.
It
has
been
a
very
busy
month
for
myself
and
a
lot
of
the
other
core
maintainers.
So
it's
it's
going
to
be
a
fairly
light
release,
but
there
is
still
time
if
there's
stuff
you
would
like
to
see
get
into
that
release.
A
We,
of
course,
are
accepting
pull
requests
and
encourage
you
to
get
those
submitted
and
we
can
hopefully
get
those
included
in
that
release
as
well.
I
know
just
a
minute.
Thank
you.
Of
course,
all
our
contributors
remember
we're
trying
to
help
get
everybody
on
to
the
m365p
and
pjs
twitter
account
so
do
encourage.
A
D
D
D
So
we've
got
some
improvements
around
creating
sharepoint
sites
and
we've
had
some
great
documentation
created
by
velen
georgiev
around
using
certificate-based
authentication
with
the
cli,
which
would
really
help
you.
If
you
wanted
to
do
you
know
app
only
scenarios
with
with
the
microsoft
365
apis,
so
I'd
encourage
everyone.
If
you
want
to
get
ahead
before
we
release
the
version
3
at
the
end
of
this
month,
which
is
only
a
few
days
away
and
that
you
can
pick
up
the
version
3
in
beta.
Please
contact
us
through
the
github
repository.
D
D
A
Great,
thank
you
gary
for
that
update,
so
moving
on
to
the
reusable
components
so
v2
beta
release
of
the
react,
controls
and
the
property
controls
encourage
everyone
to
check
that
out.
That
updates
support
for
react.
16
version
16
as
well
as
some
of
the
office
ui
fabric
v6
features.
So
you
can
install
that
the
commands
are
there
on
the
page,
and
these
are,
of
course,
a
great
collection
of
reusable
controls
that
you
can
use
to
jump,
start
your
projects
and
get
a
great
out
of
the
box.
A
A
Sharepoint
framework
yeoman
generator.
This
allows
you
to
use
a
bunch
of
different
frameworks,
install
a
bunch
of
different
capabilities
such
as
those
pnp,
reusable
controls
into
your
project
without
having
to
do
extra
steps
post
generator
execution.
So
if
you,
if
your
shop,
if
your
company
has
some
extra
stuff,
you
want
to
do
the
pnp
spfx
generator
is
a
great
place
to
get
started
with
that.
And
of
course,
you
do
end
up
with
a
quote:
unquote
real
spfx
project.
A
Under
the
hood,
it's
got
all
the
same
dependencies
as
the
microsoft
generator,
so
you'll
get
a
real
regular
project
once
it
is
all
done
and
then
no
update
this
week
on
the
modern
search
still
encouraging
folks
to
try
out
the
version.
Three
stuff
great
features
there
to
create
a
modern
search
portal
with
a
set
of
web
parts.
Current
version
we're
not
looking
for
new
features
at
this
point.
A
We're
only
doing
bug,
fixes
and
we'll
have
more
information
soon
on
what
can
come
with
the
you
know,
what
will
maybe
come
version
four
or
whatever
we
will
see
what
comes
next
for
modern
search,
so
a
fantastic
way
to
build
modern
search
portals
and
again
build
on
a
lot
of
this
wonderful
community
work
for
your
customers,
and
you
know
companies
without
having
to
invest
that
time
yourself
and
then
samples.
I
think
hugo
is
going
to
cover
this.
E
E
E
We
also
have
a
new
cascading
management
data
using
the
graph
api
by
anub
tutti
and
a
web
part
by
me,
which
is
purely
intended
for
you
to
actually
use
the
microsoft
365
cli
to
upgrade
applications
or
up
upgrade
web
parts.
Thank
you
for
for
updating
some
web
parts.
We
have
none
deep
that
made
some
updates
and
I
did
some
updates
as
well.
E
A
A
So
now
we're
going
to
go
to
the
demos,
but
first
before
we
do
the
demos,
we're
gonna,
try
and
do
this
thing,
so
everybody
who's
interested.
Please
turn
on
your
video
and
by
turning
on
your
video,
you
can
send
to
be
part
of
our
together
mode
photo
which
will
be
displayed
on
the
internet
for
all
kinds
of
various
marketing
purposes,
with
random
people,
and
so.
C
C
So,
let's
see,
let's
try
to
do
this
fast,
so
we
have
enough
time
for
the
demos,
but
I
think
it's
great
great
great
idea
to
actually
get
this
done
and,
let's
see,
do
we
get
more
people.
We're
still
are
getting
people
good
good.
This
people
are
super
efficient.
This
is
really
good.
Everybody
was
ready
to
go
on
doing
this.
So
what
we're
planning
to
do?
We
talked
about
this
one
like
patrick.
What
we're
planning
to
do
in
the
future
is
is
hopefully
between
always
just
before
we
start
the
demos.
We
can
actually
do
this.
C
Somebody
has
a
really
big
head
on
this
third
row.
There
we
go
so,
but
just
before
the
demos
do
a
create
screenshots.
I
think
it's
just
especially
now
that
everybody
is
working
from
home
and
we
don't
see
too
many
people.
I
think
this
shows
the
community.
So
thank
you.
Everybody
we're
not
seeing
any
more
people
joining
in,
so
I
will
take
a
screenshot
a
few
of
them,
one,
two
three
done
and
another
one
still
one.
Two
three
done
and
let's
do
one
crazy
one.
One
two
three
go
crazy.
C
A
F
F
It
works
great
for
adding
faqs
to
pages,
and
I
so
I'm
a
board
member
of
the
portland
sharepoint
users
group
and
I
originally
created
it
as
part
of
an
intro
to
the
sharepoint
framework
presentation
that
I
did.
I
got
a
lot
of
interest
and
suggestions
from
the
participants
there
and
in
just
a
moment,
you'll
see
a
demo.
When
I
show
you
the
demo
it'll,
it's
actually
going
to
be
based
on
some,
how
some
of
them
used
it
within
their
company's
tenant.
F
Actually
so
real
life
example
there
and
it
leverages
the
react,
accessible,
accordion
library.
I
chose
this
for
several
reasons.
For
one
I
just
like
the
way
it
looked
visually
and
also,
very
importantly,
accessibility
was
a
high
priority
for
that
library.
So
it
works
very
well
with
screen
readers
and
it's
easily
customizable
via
css
and
there's
a
link
to
the
code
at
the
bottom.
All
right.
F
So
what
I'm
going
to
show?
You
is
a
similar
to
what
they
did,
but
not
identical
for
obvious
reasons,
but
this
will
give
you
an
idea
of
what
they
did
and
the
first
thing
I'm
going
to
show.
You
is
the
underlying
lists
that
I've
set
up,
because,
if
you're
going
to
use
this
web
part,
you
need
to
have
your
data
in
a
list
in
order
to
surface
it
within
the
accordion.
F
So
here's
a
teams
faq
list
that
I
created,
for
instance,
and
when
you
create
the
list
you're
going
to
want
to
keep
the
default
title
column
and
then
you'll
add
an
additional
content
column
and
it
needs
to
be
called
content.
You
can
make
it
a
multiple
lines
of
text
column
and
enable
enhanced
rich
text.
If
you
want
to
and
as
you
can
see
from
from
this
view
of
this
list,
I've
used
images
and
hyperlinks
in
this
particular
list,
and
then
I
also
have
another
one
here,
which
is
the
sharepoint
faq.
F
And
so
you
can
see
that
I
have
a
placeholder
that
prompts
me
to
choose
a
list
that
meets
the
correct
specifications
and
clicking
on
this
button.
Or
of
course
you
can
use
a
little
pencil
icon
too
open
up
the
property
pane
here
and
so
I'll
give
my
accordion
a
title
which
will
be
displayed
just
above
it
so
call
it
teams
faq,
and
then
I
select
the
list
that
I
want
to
use
in
the
accordion.
So
in
this
case
teams
faq,
and
so
that
adds
that
I'm
also
gonna.
F
I
can
also
add
additional
ones
to
the
same
page
and
so
I'll
add
another
one.
And
in
this
case
this
is
going
to
be
my
sharepoint
faq
and
I'll
select
that
list
and
now
that's
there
as
well.
So
it's
also
very
easy
to
so
let
me
publish
this
out,
and
so
there
those
are
on
the
page
and
it's
very
easy
to
to
update
content
as
well
like,
for
instance,
if
I
want
to
add
a
new
item
to
my
accordion.
I
add
a
new
item
in
my
list.
F
F
This
is
what
was
built
using
the
react
framework
and
in
the
interest
of
time
I'm
just
gonna
show
you
my
react
component
file
from
react,
accordion.tsx,
which
is
where
most
of
the
heavy
lifting
for
this
web
part
occurs
at
the
top.
We
have
our
imports.
Of
course,
I've
highlighted
a
few
here,
there's
the
sp
library
which
we
use
for
accessing
the
sharepoint
rest
api,
so
that
we
can
grab
the
data
from
our
selected
list
that
we
want
to
populate
the
accordion
with
the
pmp
placeholder
control
is
also
used.
F
Moving
down
into
the
react
accordion
class
on
line
20,
we
can
see
our
constructor
method.
This
is
important
for
setting
initial
state
for
the
component,
so
we
initialize
the
state
in
line
25,
and
then
we
invoke
the
get
list
items
method
to
populate
the
items
array
with
the
list,
data
that
we
want
to
have
in
state
for
our
accordion
react
component
and
then
moving
out
to
line
31
here.
There's
our
get
lists.
F
I'm
creating
a
list
selected
variable
a
boolean
type,
that's
true
when
list
id
is
not
undefined
and
has
a
length
greater
than
zero,
and
what
we're
going
to
display
for
this
div
depends
on
whether
the
list
selected
variable
is
true
or
false.
If
it's
false,
because
no
list
has
been
selected,
as
you
can
see,
in
line
56
through
63
that
we're
going
to
display
the
placeholder
component
that
prompts
the
user
to
select
a
list.
F
When
I
showed
you
the
demo,
like
my
first
accordion,
I
typed
in
teams,
faq
and
then
starting
in
line
67,
we
begin
to
generate
the
accordion
itself,
there's
a
number
of
components
here
that
are
part
of
the
library
and,
as
you
can
see,
they're
nested
within
each
accordion
that
we
create
we're,
probably
going
to
have
more
than
one
item.
So
that
means
multiple
accordion
items.
Accordion
item
here
represents
a
single
collapsible
section
of
the
accordion
and
includes
a
header
and
a
panel.
F
You
can
see
how
that's
laid
out
in
line
70
through
79,
so
in
order
to
have
each
item
in
our
sharepoint
list
represented
in
its
own
collapsible
section
of
the
accordion,
I
use
the
map
function
as
a
way
to
iterate
through
each
of
the
items
within
our
react.
Accordion
state
and
you
can
see
that
in
line
68
and
then
I
feed
the
value
of
the
title
of
the
particular
item
line
73
into
the
accordion
item,
budding
component.
F
It's
a
little
scary
looking,
but
that
was
intentional
on
the
react
developers.
Parts
other
concerns
that
you
might
expose
your
users
to
cross-site
scripting
attack.
If
you're,
not
careful.
In
this
case,
though,
it's
not
a
concern
right
because
we're
within
the
context
of
sharepoint-
and
we
know
exactly
where
this
data
is
coming
from.
F
That
is
it's
coming
from
the
content
field
of
a
list
item
and
the
reason
I
need
this
instead
of
just
item
dot
content
sort
of
like
I
did
with
the
item.title
value,
is
to
be
able
to
support
enhanced
rich
text
within
the
content
field,
since
sharepoint
provides
that
as
html
markup.
So
I
need
to
treat
it
as
html
instead
of
just
text.
F
Hugo
actually
took
me
off
to
this
simple
approach
when
I
was
looking
at
much
more
complex
ways
to
enable
enhanced
rich
text
in
the
web
parts,
so
I
really
appreciate
his
his
guidance
and
contribution
there.
So
that
is
it.
Thank
you
and
once
again,
here's
where
you
can
find
the
code
and
also
how
to
reach
me
as
well.
G
I'm
little
bit
excited
as
my
first
demo
to
the
pnp
country
community
and
thanks
for
giving
the
opportunity,
I
am
the
pensia
and
let
me
take
an
introduction
of
mine
that
I'm
technically
at
the
strategy
solution
and
working
on
the
sharepoint
and
office
365
stuffs
and
handling
the
all
the
stuffs
regarding
the
microsoft
365
for
the
stylish
solutions
you
can
reach
me
out
on
the
any
twitter
account
and
the
linkedin
account
as
well.
I
would
like
to
demonstrate
demonstrate
the
demo
of
the
telephone
directory.
G
I
really
explored
the
graph
api
and
its
usage
regarding
the
user's
conversation
and
to
get
the
user's
information
from
the
active
directory
and
explore
some
fluid
fluid
ui
control
as
well
summary
of
these
web
parties.
People
employee
of
the
organization
can
find
out
the
employee
to
connect
to
contact
them
by
email,
address
and
phone
number
and
business
phones.
G
G
G
G
Here
I
have
initialized
the
ms
graph
graph
client
object
as
well
as
my
ms
graph
service
instance.
I
have
initialized
on
onto
the
webpart
file
and
I'm
passing
it
through
webpart
properties
to
the
other
components
into
the
ms
graph
service.
I
have
created
methods
to
connect
with
the
graph,
so
I
have
created
the
three
methods:
the
get
user
profile
by
email
address,
so
people
will
get
the
data
get
user
properties
by
last
name
as
well
as
it's
by
first
name.
So
here
I
have
filtered
filter
by
the
specific
property
of
the
users.
G
Into
the
main
webpart
file,
I
have
used
the
pivot
element
pivot
element
to
to
make
the
tabbing
into
the
web
part.
So
I
created
the
pivot
check
pivot
section
over
here
and
create
three
pivot
item
for
that
for
each
pivot
item
I
have
select.
I
have
given
the
item
key
over
there
and
I
am
checking
that
I
selected
key
to
the
below
of
that
section.
So
I
can
know
that
which
tab
is
active
right
now
and
based
on
that,
I
am
calling
the
component
for
that.
So
by
first
name.
G
G
G
G
A
Thank
you
great
demo,
really
slick
implementation.
There
were
a
couple
questions
there
in
the
chat
if
you
can
follow
up
on
those
that
would
be
fantastic,
but
really
great
demo.
Thank
you.
Thank
you.
Thank
you
for
submitting
that
doing
that
today.
For
us,
I
think
that's
a
really
slick
implementation
of
a
pattern
that
can
be
applied
to
a
lot
of
different
kind
of
use
cases.
So
thank
you
for
that
and
then
finally,
our
last
demo
of
today
is
going
to
be
april
and
hugo.
H
H
Yep
thanks
thanks
patrick
yeah,
so
I'm
really
excited
to
be
here
to
show
off
the
enhanced
powerapps
web
part
that
hugo
built
being
a
heavy
powerapps
user
and
sharepoint
user
myself.
I
know
that
this
web
part's
really
going
to
make
a
lot
of
my
fellow
power
rappers
excited
because
it
really
addresses
some
of
the
long-standing
feature
requests
which
I'll
show
off
today.
H
H
So
to
get
that
you
would
go
to
powerapps
find
the
app
you
want
to
embed
in
sharepoint
click,
the
dots
go
to
the
settings,
oops
sorry
go
to
details,
not
settings,
and
then
you
can
either
copy
the
app
id
or
the
web
link,
whichever
one
then
the
web
part
will
take
that.
So
I'm
going
to
copy
that
link
and
you
paste
that
in
and
as
soon
as
you
do
that
it
updates
the
web
part
and
you
see
your
embedded
power
app,
but
really
with
the
out
of
the
box.
H
That's
the
only
thing
we
can
configure
other
than
showing
or
hiding
a
border
for
that.
So
if
I
publish
this
you'll
kind
of
see,
so
one
of
the
main
feature
requests
that
you'll
see
in
the
community.
Is
this
current
web
part?
You
can't
really
make
it
take
up
the
full
real
estate
of
the
screen,
it's
kind
of
forced
at
a
certain
aspect
ratio
on
here.
So,
even
though
this
is
a
tablet
based
power
app,
it's
not
taking
up
the
full
real
estate
of
the
screen.
H
H
H
You'll,
see
that
if
we
expand
out
the
appearance
section,
so
we
can
take
advantage
of
certain
aspect
ratios
that
you
would
be
familiar
to
you
if
you
already
in
power
apps.
So,
for
example,
I
have
this
power
app
open.
If
I
go
to
file
settings
and
screen
size.
These
are
the
same
aspect
ratios
that
you
currently
get
within
powerapps,
so
you
can
take
advantage
of
those
in
his
enhanced
web
part.
H
But
one
of
the
things
that
gets
me
really
excited
about
this
web
part
is
the
ability
to
pass
in
dynamic
properties.
Okay.
So
to
me
this
is
a
game
changer.
This
is
something
that
I've
personally
wanted
for
a
while,
and
I
know
everyone
in
the
community
has
but
to
be
able
to
have
a
scenario
where
you
notice.
I
already
have
a
list
here
on
this
page
with
some
list
formatting
on
it,
and
this
is
the
list,
is
the
back
end
of
my
powerapp.
So
wouldn't
it
be
great
if
we
could
have
these
two
talks.
H
H
All
we
have
to
do
is
turn
on
the
pass
dynamic
properties
option
here
and
then
it's
going
to
tell
us
what
source
you
want
to
connect
to.
So
we
only
have
one
list
on
here,
so
I'm
going
to
connect
that
to
my
time
off
request
list,
and
then
we
just
use
the
drop
down
to
select
okay.
What
do
we
want
to
pass
into
that?
So,
in
my
case,
I'd
like
to
get
the
id
of
this
currently
selected
item
and
pass
that
here
into
the
power
app.
H
So
I'm
going
to
select
the
column
containing
the
filter
value
option
and
he
could
have
made
it
more
easier
because
we
can
just
use
the
drop
downs
and
point
and
click.
So
now
I'm
just
going
to
select
my
id
field
and
then
the
only
other
thing
we
have
to
do
is
specify
the
parameter
name.
So
this
is
the
parameter
value
that
powerapps
is
going
to
look
for
so
that
it
knows
how
to
get
the
parameter
value.
H
So
I'm
going
to
call
this
id
because
that's
what
I
already
have
coded
into
my
powerapp
so
now
all
I
have
to
do
is
like
click
out
of
this.
Let's
republish
this
app
and
let's
see
I'm
going
to
select
this
one
here
and
you
see
as
soon
as
I
do
kind
of
reevaluates,
and
it
takes
me
directly
to
that
record
in
my
power
app
automatically.
H
H
Okay
and
you
can
just
do
a
check.
So
you
see
I'm
checking
to
see
if
there's
a
parameter
using
the
param
function
called
id
and
if
that's
not
blank,
I'm
going
to
set
a
global
variable
called
selected
item
to
the
selected
item
from
my
entry
with
that
parameter
value.
So
that
sets
the
item
and
then
I'm
saying
navigate
to
my
edit
screen.
H
If
that
parameter
value
is
there,
so
in
my
edit
screen,
I'm
just
have
a
form
control
and
I'm
setting
that
item's
property
of
the
form
control
to
that
selected
item
value,
so
it
just
gets
passed
in
seamlessly
right
so
again,
game
changer
here
now.
The
other
thing,
though
so,
wait,
there's
more
that
this
will
do
is
theming.
H
So
if
you
have
a
sharepoint
theme-
and
you
want
that
to
apply
to
your
powerapp,
we
can
pass
your
sharepoint
theme
elements
to
the
powerapp.
So
you
have
one
consistent
holistic
brand,
so
we
can
select
the
theme
option
and
we
can
control
all
these
different
theme
variants
from
sharepoint
to
pass
that
into
powerapps.
So,
for
example,
I
could
take
our
button
background,
hovered
variable
and
once
I
select
that
I
can
pass
that
into
powerapps,
so
I
already
have
this
kind
of
wired
up.
H
Let's
see,
let's
select
that
one
this
time
I
can
make
it
change
this
background.
Color
based
off
of
the
theme-
and
I
happen
to
just
select
one
where
it's
already
blue
and
it
matches
the
exact,
but
it's
really
simple-
to
wire
up
on
the
powerapps
side
of
things
as
well.
So
if
we
go
back
to
the
power
app,
you
see
that
I
have
this
rectangle
control.
H
So
again,
I
can
target
a
parameter
which
I
did
in
the
app
on
start
called
selected
theme,
and
I
can
pass
in
a
parameter
of
theme
and
I
can
go
into
my
object
and
I
can
say
if
that
parameter
is
not
blank
use
the
color
value
that
I've
passed
it
in
otherwise
use
whatever
hard-coded
one.
I
have
so
again
game
changer.
This
is
something
that
we
could
do
in
teams,
there's
like
a
team
stain
that
we
could
hear
it.
H
E
Thank
you.
Let
me
share
my
code.
Okay.
So
if
you
look
at
the
out
of
the
box
web
part,
really
this
is
the
out-of-the-box
web
part.
If
you
look
at
the
code
that
it
produces,
it
just
produces
an
iframe
that
has
a
whole
bunch
of
parameters
and
a
whole
bunch
of
things.
So
the
first
thing
that
I
did
and
I'm
sorry
this
this
code
is
actually
embarrassingly
simple.
E
So
the
first
thing
that
I
did
in
my
web
part
itself
is:
I
actually
imported
the
dynamic
property
from
the
component
base
so
that
I
can
make
dynamic
properties.
I'm
sorry.
I
have
a
hard
time
saying
that
word
in
english
property,
then
what
I
did
is
I
imported
some
dynamic
property
pane
of
field
set,
so
I
can
actually
show
those
dynamic
properties
in
the
property
pane.
E
E
Then
what
I
do
is
I
define
a
dynamic
property
of
type
string,
which
is
going
to
be
the
value
that
we
want
to
pass
as
a
dynamic
property.
I
also
keep
track
of
the
name
of
that
thing.
The
other
thing
that
I
do
is
I
make
the
web
part
theme
aware.
So
I
I
do
capture
the
theme
provider
and
the
theme
variant.
E
E
And
then
all
I
really
do
is
I
get
the
value
of
the
dynamic
property
if
it's
available.
Otherwise
I
just
say
it's
not
defined
while
I'm
there,
I'm
also
grabbing
the
locale,
so
the
the
current
language
configuration
of
the
current
context
so
that
we
can
pass
that
information
to
the
powerapps
as
well
and
then
I
grab
the
client
with
the
web.
Part
is
actually
very
well
aware
of
its
own
width
and
trying
to
get
the
components
inside
the
web.
E
Part
to
be
aware
of
their
width
doesn't
always
work
so
well,
but
if
you
let
the
web
part
notify
it's.
It's
children
elements
that
it's
been
resized.
It's
a
lot
easier
to
do
this.
So
that's
what
I
do
here
and
then
really.
This
is
probably
cheesy
code,
but
I
just
calculate
the
aspect.
Ratio
based
on
the
selection
that's
been
made
and
that
allows
me
to
calculate
the
height
of
the
web
part
based
on
the
width
of
the
web
part,
and
I
pass
all
this
information
to
the
component
and
then
in
the
property
pane
itself.
E
E
I
use
the
property
pane
toggle
here
to
actually
do
some
some
interesting
stuff.
The
property
pane
toggle
is
the
one
that
allows
you
to
say.
Yes,
it's
on
or
no
it's
off,
and
that's
where
I
say:
do
you
want
dynamic
properties
and
then
what
I
do
here
and
again.
This
is
another
thing
that
I
don't
think
a
lot
of
people
are
aware
of.
E
I
grab
the
property,
the
dynamic
property
value
and
the
name,
and
then
what
I
do
here
is
I
iterate,
through
all
the
theme
values
that
have
been
selected
by
the
user
and
I
pass
those
values.
I
just
concatenate,
basically
a
really
ugly
url,
where
I
pass
in
the
query.
String,
I
pass
all
the
theme
values
that
I
want
to.
I
want
to
send
to
powerapps
and
then
I
build
a
really
really
ugly
frame.
E
Url
again,
I
say
ugly,
it's
actually
not
that
far
from
the
original
url,
if
you,
if
you
paid
attention
earlier-
but
I
do
add
some
extra
values
here
and
then
I
really
all
I
do.
Is
I
import
the
same
iframe
or
just
render
the
same
iframe
with
the
extra
width
and
height
preset
and
the
frame
border?
Obviously
reset
is
really
that
simple.
E
But
I'm
also,
I
would
love
if
you
have
any
feedback
or
any
ideas
or
things
that
you've
been
wanting
to
have
in
the
powerapps
webpart,
that's
not
available.
Please
don't
hesitate
to
reach
out
to
me
or
april
and
I'll
see
what
I
can
do
about
this.
Of
course,
I
welcome
contributions.
It's
on
the
spfx
webparts
repo,
so
you
can
look
at
the
code.
You
can
submit
prs,
but
that's
it
for
me.
Really
thank
you
april
for
demoing
this
and
april.
I
don't
think
you
mentioned.
E
A
Fantastic
demo
really
appreciate
that
going
back
to
the
slides,
thank
you
eric
dippin
and
april
and
hugo
for
some
fantastic
demos.
Three
great
demos
again
would
encourage,
of
course,
if
anybody
out
there
is
interested
in
doing
a
demo,
anybody
at
all
please
reach
out
to
myself
or
vasa,
and
we
will
work
on
getting
you
scheduled.
A
It
might
not
be
the
next
immediately
next
call
because
sometimes
we're
scheduled
out
a
couple
weeks,
but
we'll
absolutely
get
you
demoed
at
get
you
scheduled
to
demo
and
encourage
you
to
please
reach
out
to
us.
If
you
are
interested,
we
have
a
couple
minutes
for
q
a
so
if
you
have
questions
feel
free
to
put
them
into
the
chat,
but
I'm
going
to
work
through
closing
out
the
rest
of
the
call.
A
So
thank
you,
everybody
for
the
demos.
Thank
you.
Everybody
for
attending
the
recording
will
be
available
in
around
24
hours
on
our
youtube
channel.
You
can
always
subscribe
to
our
channel
today.
Follow
us
on
twitter,
365,
dev
or
m365
pnp.
Our
next
spfx
call
is
in
two
weeks
september.
10Th
at
7
am
pacific
time.
A
That's
just
the
same
time
as
this
call
started
today
and
our
next
general
dev
special
interest
group
call
is
next
thursday
in
one
week
on
september
3rd
again
same
time
as
this
call
started
today,
our
september
monthly
community
call
for
sharepoint
will
be
september,
8th
and
great
agenda
coming
up.
For
that
we'll
be
announcing
that
a
little
bit
before
the
call
so
developer
community
calls
great
set
of
calls.
A
I
encourage
you
to
check
these
out,
I'm
not
going
to
read
all
of
these,
but
I
know
like,
for
example,
the
microsoft
graph
group,
the
microsoft
teams
team
struggle
with
what
to
say
there
are
both
doing
some
fantastic
community
calls.
I
encourage
you
to
check
out
both
of
those,
and
all
of
these,
in
fact
encourage
you
to
check
those
out
lots
of
great
calls
going
out
in
the
community
lots
of
great
community
events.
So
I
encourage
you
to
take
advantage
of
those
things,
especially
while
everything
is
virtual.
A
It's
easy
for
really
everybody
to
get
to
participate
in
all
these
great
events,
which
I
think
is
fantastic.
So
with
that
it
doesn't
look
like
there's
any
last-minute
questions.
So
I'll
just
say
again.
Thank
you
to
eric.
Thank
you
to
different.
Thank
you
to
april.
Thank
you
to
hugo,
thank
you
to
all
of
you
for
attending
the
call
today
and
look
forward
to
talking
to
everybody
again
soon.
Thanks
bye,.