►
Description
Viva Connections & SharePoint community call on April 7. Demos - Enabling any control to be used in the SPFx property pane with a custom solution, ACE with a card view and multiple quick views to display the M365 (Unified) groups in a tenant, and Viva Connections ACE as a input form for data and actions. Project releases for SharePoint Framework – v1.15 (Beta), PnPjs Client-Side Libraries – v3.2.0, and PnP Modern Search – v4.6.0. Announced the Microsoft 365 Unified Sample Gallery plus delivered 1 ACE sample. 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 at: https://aka.ms/m365pnp/community/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
Hello
and
welcome
to
the
sharepoint
framework
and
viva
connections-
bi-weekly
sync,
it's
april,
7
2022,
I'm
your
host
on
this
call,
patrick
rogers.
We've
got
a
great
call
for
you
again
this
week.
Our
agenda
is
going
to
be
updates
across
the
patterns
and
practices.
Program
updates,
sharepoint
frameworks,
some
new
community
samples,
another
community
info,
we'll
do
our
picture
time
and
together
mode,
and
then
we've
got
three
great
demos
again
for
christoph
non
deep
and
paulo.
A
If
you
are
interested
in
participating
in
the
patterns
and
practices
community,
certainly
I
would
encourage
everyone
out
there
to
reach
out
about
doing
a
demo.
There's
a
link
down
there
in
the
bottom
right
corner
of
the
slide
ak
dot.
Ms
slash
m365,
slash,
request,
slash
demo,
m365
pnp.
Excuse
me,
but
we'd
love
to
have
the
demos.
It's
really
exciting
to
see
all
the
great
work
and
all
the
great
ideas
you
have
out
there
for
your
customers
and
your
companies.
A
So
as
long
as
it's
okay
to
share
with
the
world
would
love
to
have
you
demo
that
work
on
this
call?
So
please
do
reach
out
and
get
registered
and
we'll
get
you
signed
up.
We
are
sometimes
excuse
me
booked
out
a
month
or
two
depending
on.
What's
going
on,
so
don't
be
discouraged,
we'll
get
you
a
slot,
get
you
booked
and
have
you
on
the
call
just
as
soon
as
we
can.
Of
course,
we
also
welcome
your
contributions
on
github
that
comes
with
reporting
issues.
A
Submitting
pull
requests
are
helping
others
with
their
issues
and
questions,
and
as
with
everything,
we
appreciate
your
feedback.
How
are
the
calls?
How
is
our
documentation?
Where
else
can
we
help
and
of
course,
positive
feedback?
Is
okay
too?
If
you
like
something
we're
doing,
let
us
know,
perhaps
we
can
do
a
bit
more
of
it
lots
and
lots
of
links
on
this
screen.
The
main
one
you
need
to
know
is
ak
dot.
A
Ms
slash
m365
pnp,
that's
going
to
get
you
the
all
up,
landing
page
for
all
of
the
patterns
and
practices
program
stuff
spanning
our
developer.
Videos,
which
are
topic
focused
videos
to
get.
You
started
on
various
developer
activities
such
as
auth
or
adaptive
card
extensions
or
sharepoint
framework.
Things
like
that.
We've
got
our
community
videos
which
are
going
to
be
the
recordings
of
this
call.
The
other
thursday
call
our
tuesday
calls
and
various
other
community
calls
and
community
videos.
A
Those
are
going
to
be
more
informational
and
less
sort
of
developer
topic
focus,
but
they
usually
include
the
great
demos,
so
some
good
developer
content
there
as
well.
Of
course,
all
of
our
open
source
organizations,
pnp
office,
dev,
microsoft,
graph
and
sharepoint.
Welcome
your
contributions
and
feedback
across
all
those
areas
and
as
well
check
out
all
of
our
great
sample
galleries
is
a
fantastic
place
to
see
how
others
have
solved
similar
problems
and
get
started.
A
So
this
is
a
sample
gallery
aggregating
samples
for
various
technologies
across
m365,
so
graph
samples,
sharepoint
framework
samples,
all
the
stuff
from
the
great
the
pnp
sample
galleries,
all
aggregated
in
one
spot,
easily
findable
searchable
by
topic
by
author
by
technology.
That's
ak
dot!
Ms
slash
m365
samples,
really
encourage
you
to
check
that
out.
It's
a
great
way
again
to
find
the
samples
you're
looking
for
and
see
what
else
might
be
available
to
help
you
get
started
on
your
work.
A
B
Thank
you,
patrick
well.
Well,
friends.
Welcome
to
the
call
again
today,
sharing
is
caring
is
a
program
that
is
here
to
provide
you
hands-on
guidance
on
how
you
can
get
more
involved
in
all
those
initiatives
that
patrick
was
mentioning
now.
Why
do
we
have
this?
Because
we
understand
that
there
are
hurdles
to
getting
involved
at
times?
Perhaps
you've
never
interacted
with
github
never
done
a
pull
request.
B
B
Now,
once
you
have
contributed
in
many
many
levels,
we
want
to
celebrate
that
the
recognition
program
is
here
to
provide
formal
and
official
recognition
for
all
the
amazing
work
that
you
are
doing.
It's
powered
by
credly.
Yes,
that's
credibly
the
same
organization
that
provides
you,
those
certification,
badges
from
microsoft.
When
you
get
certified,
so
all
of
your
community
contributions
will
sit
right
next
to
them.
You
can
attach
them
to
your
linkedin
share
them
on
twitter.
Put
them
on
your
website.
Share
them
with
your
manager.
Ask
for
a
raise.
B
It
is
going
to
be
awesome,
so
we
do
need
you
to
opt
in
aka
dot,
ms4,
m365,
pnp,
recognition,
we'll
tie
that
to
your
github
account
and
your
other
contributions.
You're
doing
and
we
will
send
those
badges
out
you've
been
seeing
them
they're,
going
to
become
even
more
opportunities
and
fun
campaigns
throughout
the
year,
so
no
charge
absolutely
free.
Aka.Ms
forward,
m365
pnp
dash
recognition,
patrick
back
to
you.
A
C
Excellent,
so
let's
go
to
the
usage
slide,
so
no
actual
numbers
on
this
one
again,
but
we
have
tens
of
millions
of
monthly
active
users
on
extensibility
built
with
sharepoint
framework,
so
not
and
that's
third-party
extensibility,
meaning
partners
and
customers
who
are
building
stuff,
and
we
did
again
all-time
record
this
monday,
which
is
really
cool.
So
the
growth
curve
is
quite
cool.
C
Looking
as
we
keep
on
growing
on
the
users
worldwide,
not
significant
amount
of
updates
on
the
roadmap
slide
and
roadmap
side
of
the
house,
we
will
release
the
next
version
of
1.50
in
preview,
not
today,
maybe
maybe
next
tuesday.
We
were
initially
thinking
this
week,
but
we
had
some
people
out
this
week
in
whitman
and
and
we
are
trying
to
figure
out
making
sure
that
the
version
is
working
properly.
C
In
that
version
you
will
get
the
first
time
the
new
component
type,
which
is
for
customizing
lists
and
edit
forms
and
review
films
in
in
lists
and
libraries.
I
did
a
live
demo
on
that.
One
on
the
tuesday
platform
called
this
week
so
check
the
recording
out,
if
you're
interested
in
seeing
into
that
in
practice
and,
of
course,
as
product
1.15
is
estimated
to
be
released
in
end
of
tune.
C
A
Thanks
basement
for
those
updates
and
really
looking
forward
to
115
release
a
lot
of
great
stuff
going
to
be
included
in
that
one
so
excited
for
that
all
right,
pbjs,
client,
side
library
is
version
3.2
we're
going
to
release
that
on
april
8th,
that's
tomorrow,
this
friday,
that's
got
a
lot
of
great
stuff
in
it.
We
got
a
lot
of
good
fixes
in
there.
A
lot
of
fantastic
documentation
updates
really
excited
to
get
that
in
there
as
well.
A
We've
got,
I
think,
the
esm
for
node
16
or
node
what
12
14
16..
I
think
we've
got
that
all
sorted
out.
We
had
some
some
friction
there
when
we
first
released
so
really
excited
for
this
release.
I
hope
you
could
check
it
out.
We'll
have
all
the
details
in
the
changelog
and
the
docs.
Once
we
get
those
things
pushed
out,
I
want
to
remind
folks
we
do
have
the
nightly
builds
so
npm
install
at
pnp
sp
at
v3
nightly.
A
Those
are
built
nightly,
as
the
name
would
imply,
but
gives
you
a
chance
to
try
out
stuff
that
we
might
have
fixed
a
bug
and
merge
that
change,
but
the
the
actual
it
won't
be
included
in
a
major
release
until
whenever.
But
you
can
always
check
out
the
updates
each
night
so
encourage
you
to
try
those
out
and
look
forward
to
that
version.
3.2
release
tomorrow,
so
great
stuff
there,
and
with
that
we'll
go
to
cli
for
microsoft.
A
365
released
version
5.1
with
a
bunch
of
new
updates
for
validating
sharepoint
framework
projects,
improving
your
s,
improved
upgrading
of
your
spfx
projects,
new
settings
to
automatically
copy
device
code
to
the
clipboard
and
then
removed
commands
they're
obsolete
for
some
of
the
apis
that
are
getting
deprecated
so
fantastic.
To
continue
to
see
these
updates
flow
through
as
well.
We've
got
npm
install
dash
g,
app
pnp,
slash,
cli,
dash
microsoft
subscribe
at
latest,
we'll
get
you
the
stuff
there
and
remember:
there's
a
fantastic
docker
container
capability
for
the
cli.
A
I
want
to
call
them
vms,
but
that's
not
right,
docker
container
for
to
use
the
cli
and
get
all
the
latest
features
without
having
to
keep
your
local
system
up
to
date.
You
can
just
run
that
straight
into
docker,
so
excited
to
again
see
this
continue
to
grow.
Release.
Notes
there
at
the
bottom
pmp.github.io
slash
all
of
those
things,
hashtag
v510,
so
check
out
the
cli
fantastic
updates
continue
to
flow
into
that
from
tons
of
great
community
contributors.
So
thank
you
and
speaking
of
great
community
contributors.
A
A
So
you've
got
a
variant
theme
provider,
a
monaco
editor,
which
is
a
really
neat
thing
to
see
integrated
there,
enhancement
for
multiple
controls,
spfx
114
support
and
various
other
fixes
release,
notes
there
and
then
we've
got
the
react,
property
controls.
These
are
designed
to
be
used
in
the
edit
pane
of
your
web
part.
That's
version.
360
also
has
new
monaco
editor
support,
supporting
spf,
x,
114
and
some
various
other
fixes.
A
You
can
find
the
release
notes
there
thanks
to
everyone
that
contributed
on
the
reusable
controls,
love
to
see
these
continue
to
grow,
full
details
there
on
the
two
links
below
and
the
twitter
at
m365
pnp
controls
as
well.
You
can
follow
that
for
the
updates
moving
right
along
to
modern
search,
aka,
ms
p
search
for
all
the
latest
details,
we've
got
a
4.6.0
beta
is
out.
That's
the
going
to
be
the
april.
2022
release
still
can't
believe.
It's
2022
myself,
pnp
modern
search,
released
latest
to
see
all
the
docs
there.
A
Thank
you
to
all
the
folks
that
have
contributed
to
the
modern
search
and
it's
exciting
as
well
to
see
this
continue
to
grow.
Everything
in
pnp
continues
to
grow
and
get
better
thanks
to
all
of
your
contributions,
and
it's
just
really
exciting
to
see
for
all
of
these
components.
I
know
I
keep
saying
it,
but
I
generally
mean
that
the
work
everyone
is
doing
across
these
is
just
fantastic,
and
it's
really
fantastic
to
see.
B
A
Awesome
thanks
for
that
great
update
and
the
whoosh
sound
is
optional
in
your
ace.
If
you
don't
want
the
sound
to
play
there,
when
you
hide
the
ace
optional
picture
time
based
I'm
gonna,
let
you
go
ahead
and
take
over
the
presentation
and
we
can
do
our
together
mode
shot.
So
if
you're
interested
go
ahead
and
turn
on
your
camera
and
looks
like
folks
are
doing
that,
waiting
for.
A
A
D
C
Getting
there
so
wait,
wait,
wait!
Not
yet,
let's
wait
for
the
seats
to
fill
in
and
before
we
start
recording.
I
will
start
actually
the
recording.
Already.
There
are
still
some
free
seats,
there's
still
some
free
seats.
If
you
enable
the
video
I
will
enable
mine
as
well
and
there
we
go
now
we're
getting
everybody
in
here.
Am
I
getting
there
as
well?
Oh
some
ghost
on
the
front
row
as
well.
Let's
do
something
hand,
saving
everybody.
C
A
E
E
I've
released
a
number
of
solutions
over
the
years,
but
more
on
my
personal
blog
or
my
personal
stuff,
and
this
year
I
have
done
more
heavy
contributions
to
the
community,
and
so
this
is
a
short
list
of
what
I've
done
and
in
particular
that
was
also
2022
was
my
first
year
to
start
publishing,
known
modules.
So
today
the
ones
we're
going
to
focus
on
are
the
property
paying
portal.
E
This
is
a
node
module
that
you're
going
to
install
through
an
npm
install
and
then
the
sample.
The
related
sample
that
you
can
find
on.
Pnp
is
react,
ppp
and
then
whatever,
because
it's
supposed
to
be
a
series
of
different
controls,
I'm
going
to
showcase
so
right
now,
there's
one
but
that's
supposed
to
more
is
supposed
to
come
in
in
the
future.
I'm
mentioning
also
some
other
work
here,
because
it's
kind
of
related
to
what
I'm
presenting
today
and
I
think
it's
worth
taking
a
look.
E
So
the
property
pane
wrap,
is
another
solution
that
is
supposed
to
help
the
property
pane
and
I'm
also
listing
here.
The
cherry
picked
content
web
part
because
it's
also
a
solution
that
is
using
the
portal
so
other
stuff
to
explore
if
you're,
if
you're
interested
okay,
so
the
objective
for
today
property
paying
portals.
So
we
are
looking
at
the
right
hand
side
of
this
web
bar.
E
So
it's
the
one
that
you
trigger
when
you
click
on
this
little
pen
here
in
the
top
left
and
it's
going
to
open
the
property
pane
and
what
the
property
pane
is.
Is
that
configuration
form
that
allows
you
to
enter
specific
values,
specific
parameters
that
are
going
to
to
customize
your
web
parts?
So
in
my
screenshot
here,
for
example,
I
have
picked
san
diego
did
I
mention
out
of
san
diego,
a
nice
reminder
here,
and
so
I
picked
the
location
and
this
is
rendered
here.
E
So
if
we
take
a
closer
look
at
the
the
code
on
here,
on
the
left
hand,
hand
side,
you
can
see
an
example
of
a
property
pane
with
some
controls,
description,
slider,
checkbox
drop
down,
so
I
would
say
some
standard
controls
and
if
you
look
at
the
code
in
spfx,
this
is
what
it
looks
like
on
the
right.
So
it
could
be
a
little
bit
surprising
at
first,
but
spfx
is
not
using
directly
elements
or
react
components.
E
It
uses
this.
This
wrapper
function
so
a
kind.
I
would
say
it's
a
kind
of
flow
code
here,
we're
having
in
the
property
pane
where
the
sharpen
framework
offers
this
wrapper
function.
That
takes
care
of
all
you
know.
Everything
that's
happening
behind
the
scene
and
all
you
have
to
do
is
include
the
json
to
configure
the
the
control.
E
So
this
this
is
very
convenient,
very,
very
easy
to
use.
The
issue
is
what,
if
you
want
to
insert
a
control
that
is
not
covered
by
the
out
of
the
box
functions?
So
that's
one
of
the
questions
here.
Other
question
is
what,
if
you
want
some
interaction
between
the
controls,
so,
for
example,
you
have
a
cascading
drop
down.
You
want
to
select
a
site,
and
then
you
need
to
select
a
list
in
the
site
or
you
want
to
select
country,
and
then
you
want
to
select
a
city
in
that
country.
E
E
So
you
have
all
this
extensibility
model
that
is
available
within
the
property
pane.
Simply
if
you
start
using
it
you're
going
to
see
that
it's
not
very
straightforward,
it
takes
some
time
to
get
into
it.
So
and
maybe
I'd
be
interested,
you
know
for
for
you.
Listening
to
this
presentation,
I'd
be
interested
to
hear
how
you
you
deal
with
that.
So
how,
when
you
have
to
a
need
for
custom
controls,
how
do
you
insert
them?
How
do
you
build
them
and
have
them
in
the
property
page
here?
E
I
just
mentioned
that
on
pnp,
and
it
was
mentioned
a
little
bit
earlier
in
the
call
a
new
release
in
pnp.
We
have
those
two
packages.
We
have
the
reusable
react,
controls
that
go
in
the
main
panel
of
the
sharpened
framework,
and
then
we
have
dedicated
property
paint
controls
that
are
supposed
to
go
in
the
property.
E
So
that's
currently
I
think
I
would
say
probably
the
best
solution.
I've
seen
around
the
issue
here
is
that
so
you're
going
to
use
the
ones
on
the
right
to
to
build
your
property
pain.
The
issue
is
that
you're
limited
to
the
one
that
are
made
available
by
the
library
and
the
other
issue
is
that
maybe
you
already
have
your
own
set
of
your
own
library,
your
own
set
of
controls,
and
these
are
the
ones
that
you
would
like
to
use.
So
that's
what
I'm
going
to
to
demonstrate
today.
E
E
Oh
okay,
so
it
seems
that
it's
demo
time.
Let
me
try
and
switch
to
my
demo
here,
okay,
so
so
this
is
my
demo.
This
is
the
code
part,
and
so
hopefully
we
will
have
some
time
to
get
back
to
to
it,
but
for
now
let
me
go
to
the
workbench
here
and
I
have
already
started
this
this
demo,
this
web
part,
so
I'm
going
to
click
here
on
on
the
little
pen
and
I'm
opening
the
property
pane
controls,
I'm
here
in
in
light
mode.
E
E
I
have
also
regular
html
controls.
So
this
is
a
big
evolution.
We've
seen
last
year
that
now
that
we're
not
supporting
internet
explorer
anymore,
our
legacy
edge.
We
can
start
using
those
directly.
Instead
of
going
to
a
library,
we
can
start
using
directly
the
html5
controls
here
in
well
in
our
solutions
and
in
particular
in
the
property
page.
So
that's
exactly
what
I
have
here.
E
Let
me
do
a
demo
one
here
so,
for
example,
I'm
going
to
pick
a
start
date
of
april
11th
here
and
then
I'm
going
to
pick
an
end
date
and
you
see
that
all
the
dates
before
april
11th
have
been
disabled.
I'm
just
using
the
here
are
the
capabilities
of
html5
controls,
and
I'm
going
to
pick
this
one.
So
again
here
you
just
have
out
of
the
box.
Html
controls.
E
Okay,
I'm
going
just
to
play
with
the
toggle
here,
which
is
well
a
little
bit
more
advanced
customization,
but
still
out
of
the
box.
Html
controls,
okay,
another
one,
the
microsoft
graph
toolkit,
so
microsoft
toolkit
has
a
number
of
controllers,
and
I
can
use
them
here
directly.
So
I'm
going
to
type,
let's
have
some
very
famous
people
in
my
team
here,
let's
type
patty
and
okay
and
well-
it's
not
spectacular
here,
but
you
can
see
that
the
web
part
has
been
updated
with
the
value
okay
and
the
last
one
I
have.
E
E
Okay,
so
let's
take
a
look
now
at
the
code,
so
a
few
words
about
portals.
I
I
put
a
general
definition
here:
a
technique
to
transport
to
a
distance
seemingly
inaccessible
place.
In
our
case,
we
are
in
the
context
of
react
and
ui
libraries
like
react
and
view
have
such
capabilities,
and
so
you
can
see
just
a
very
simple
sample
here.
E
So
this
is
a
technique
that
is
used
in
general
for
tooltips
and
panels.
That
kind
of
thing.
The
idea
is
that
you
don't
necessarily
have
full
control
of
the
container,
so
this
what
it
allows
you
to
do
is
have
a
child
in
your
own
branch.
In
your
own
tree
of
the
dom,
where
you
have
full
control
so
you're
going
to
apply,
you
can
apply
context,
you
can
apply
a
theme
you
can
apply.
E
Okay.
So
in
terms
of
architecture,
this
is
what
it's
going
to
look
like,
and
here
so
I'm
going
to
just
look
at
this
column
here,
the
property
pane.
So
this
is
where
you
would
have
the
built-in
controls
I
showed
earlier.
So
it's
going
to
be
property
paint
text,
for
example
those
controls
made
available
by
spfx.
E
But
in
addition
to
that,
I
will
have
that
custom
control
that
is
going
to
serve
as
a
beacon
and
it's
going
to
be
the
same,
reusable
control
host
that
we're
going
to
put
wherever
we
need
it,
and
then
we
are
managing
in
a
separate
place
here
that
is
going
to
be
more
of
the
body
of
the
web
part.
We
are
managing
these
controls
that
can
come
from
different
controls.
Libraries-
and
this
is
what
the
portal
is
going
to
do.
It's
that
those
yellow
arrows
that
you
see
here.
E
This
is
going
to
transport
your
controls
in
place
in
the
property
plane,
okay
in
terms
of
installation.
So
again
this
is
a
node
module,
so
you're
going
to
install
it.
You
would
provision
your
sharepoint
framework
web
part
and
then
install
property
paying
portal,
and
then
we
are
going
to
have
as
part
of
this
module
two
components
available:
you're
going
to
have
the
property
pane
host
that
is
going
to
go
in
in
the
property
pane.
That
is
going
to
be
that
bacon.
E
E
You
see
here
that
I
am
trying
to
implement
four
different
controls
from
mgt
person,
people
picker
group
picker,
the
team
speaker
and
so
the
only
property,
and
I
need
to
pass
to
that
control
to
that
generic
control
is
the
context
of
the
web
part.
So
what
it
really
needs
is
just
the
id
the
instance
id
of
the
web
part.
I'm
compressing
the
whole
context,
because
it's
kind
of
simpler,
but
this
is
the
only
thing
you
have
to
do
so,
the
name
of
the
property
and
then
the
context
in
the
property
plane
host.
E
E
Also,
it's
going
to
leverage
the
context
of
the
web
part
to
be
able
to
talk
to
the
host,
and
then
I
just
include
so
within
my
property
paying
portal.
I
just
include
my
controls
the
same
way.
I
would
do
it
if
I
was
putting
them
in
the
body
of
the
web
part,
so
here
people
picker.
I
have
so
these
examples.
E
E
A
few
yes,
a
few.
Thank
you
a
few
special
thanks
here
to
the
people
who
have
helped
me
on
the
way
encouraged
me.
So
you
recognize
your
name
here
on
the
on
the
slide.
Please
try
this
this
property
print
portal.
It's,
I
would
say
it's
not.
You
know
the
the
main,
the
main
pass,
it's
more
out
of
the
box
thinking,
so
I'd
be
interested
to
know
how
far
this
can
go.
A
All
right,
great
stuff,
I'm
really
sad
that
I
wasn't
able
to
see
the
demo
in
teams,
but
I'm
definitely
gonna
follow
that
up
on
the
recording
to
check
out
all
the
details
there.
It
sounded
really
great,
but
I
look
forward
to
seeing
it
actually
work.
That's
a
problem
on
my
local
teams,
but
with
that
we're
gonna
move
to
nandip
with
aces
cardview
and
multiple
quickviews
to
display
the
m365
groups
in
a
tenant
nandeep.
If
you're
ready
go
ahead
and
take
over
the
presentation.
F
So
this
sample
shows
how
to
build
the
adaptive
card
extension
with
the
card
view
and
multiple
quick
views
to
display
microsoft.
365
unified
groups
in
a
tenant
of
which
the
current
logged
in
user
is
a
owner
or
a
member,
and
the
concept
behind
this
sample
is
concentrated
around
microsoft
365
groups,
because
once
you
are
in
a
group,
you
can
be
benefited
from
group
connected
services
such
as
sharepoint,
microsoft,
teams,
yammer
and
planner.
F
A
bit
of
history
behind
developing
this
as
sample
is
that
our
organization
is
on
journey
to
microsoft,
365
adoption
and
we
are
rolling
out
various
services
to
our
users
and
we
we
have
a
mixed
set
of
users
in
our
organization.
Along
with
it.
We
also
have
users
from
non-iit
departments
like
shipping
and
packaging
and,
like
information
workers
working
from
office,
we
also
have
frontline
workers
using
mobile
experiences,
as
they
do
not
have
access
to
the
machine
all
the
time.
So
there
are
two
reasons
behind
implementing
this
solution.
F
Firstly,
that
to
support
the
needs
of
information
worker,
as
well
as
the
frontline
workers.
We
were
looking
out
to
implement
cards
on
viva
connections
dashboard,
so
that
will
be
able
to
handle
both,
and
secondly,
that,
as
we
are
on
the
journey
to
microsoft,
365
adoption,
we
want
to
promote
the
microsoft
365,
apps
and
services
to
our
users.
We
do
not
want
them
to
restrict
the
creation
of
sharepoint
sites,
microsoft,
teams,
planner
or
yammer
communities.
We
want
them
to
explore
them
by
creating
what
they
want.
F
However,
there
are
again
downsides
to
this
thinking
too,
because,
as
we
do
not
want
them
to
restrict
the
users
from
using
group
connected
services,
we
also
want
to
have
some
kind
of
control
over
it
by
implementing
microsoft,
365
group,
expiration
policy
and
with
the
increasing
usage
of
micros
365
groups
and
microsoft
teams.
The
group
exploration
policy
provides
kind
of
a
way
to
clean
up
the
unused
groups
and
teams
that
we
have
so
microsoft
teams.
F
Another
important
thing
to
consider
is
from
the
content
and
the
user
experience
point
of
view,
because
the
excessive
content
gives
rise
to
a
content
sprawling,
so
the
contents
fall.
That
means
a
situation
wherein
excessive
number
of
abundant
or
real
rarely
used
content
in
the
form
of
microsoft,
sharepoint
sites
or
microsoft
teams
exist
within
the
organization,
and
then
it
will
surpass
your
original
content.
Even
those
kind
of
test
content
will
start
appearing
into
your
search
results.
F
So,
for
example,
if
you
have
a
consolidated
view,
something
like
this
edge
solution
that
gives
visibility
into
the
content
to
individual
on
where
they
are
contributing
to
such
as
the
excessive
content
to
avoid
the
content
sprawl.
So
at
least
they
can
self-educate
themselves
and
start
removing
the
content
which
they
don't
want.
So
these
are
the
driving
factors
behind
creating
this
s
solution
so
quickly
about
this.
F
F
So
with
that,
let's
have
a
quick
demo
of
this
sample
and
then
we
will
get
into
the
code.
So
this
is
how
the
sample
looks
like.
So
this
is
the
viva
connection,
dashboard
that
we
have
on
to
the
sharepoint
home
site,
and
this
is
the
solution
that
we
have
developed.
So
this
one
is
standing
along
with
other
kind
of
cards
that
that
can
be
placed
onto
the
visual
of
offer
dashboard.
F
So
once
you
click
on
view,
it
will
give
us
a
basic
information
about
that
group,
the
description
of
the
group
and
then
the
visibility
of
that
group,
whether
it
is
a
public
or
a
private
group,
and
then,
for
example,
if
that
group
is
connected
with
microsoft,
sharepoint
site,
it
will
give
you
the
option
to
open
that
sharepoint
site
like
this
way.
At
the
same
time,
for
example,
if
it
is
connected
with
microsoft
teams,
in
that
case,
it
will
give
you
the
option
to
open
that
in
microsoft
screen.
F
So
once
you
click
on
here,
it
will
take
you
to
the
regular
experience
and,
from
here
you'll,
be
able
to
open
up
that
team
which
is
associated
with
that
site.
So
the
other
thing
that
we
are
planning
to
do
on
on
this
particular
is
solution.
Is
that
we
are
going
to
add
the
group
expiration
date
so
that
when
prior
to
group,
expiration
policy
triggers,
we
will
be
able
to
get
the
information
about
when
this
group
is
going
to
expire
and
then
what
are
the
resources
that
I'm
going
to
lose?
Because
of
that.
F
F
I
will
be
able
to
view
by
this
kind
of
an
edge
solution,
because
what
happens
usually
is
that
we
we
do
get
the
email
from
the
office
65
group,
expiration
and
from
there
we
have
to
remember
okay.
This
was
the
group
that
I
had
created
and
then
what
are
the
resources
or
what
are
the
services
which
are
which
were
associated
with
that
group
start
digging
into
the
information
and
try
to
see
what
kind
of
an
group
that
we
had
created
where
it
was
associated
with
the
sharepoint
site
with
microsoft
teams.
F
So
this
kind
of
unconsolidated
view
will
give
you
those
kind
of
an
fixed
view
and
then
from
there
you
will
be
able
to
take
a
very
much
good
decisions,
whether
you
want
to
continue
with
that
or
no
again,
we
are
planning
to
add
a
renewal
kind
of
things
right
from
here,
so
that,
once
you
click
on
the
button
here,
the
group
can
be
renewed
from
here
as
well,
by
using
the
graph
api.
So
these
are
at
least
couple
of
things
that
we
have
in
a
plan
to
do.
F
This
is
the
same
experience
that
you
get
so
this
was
the
quick
demo
how
this
works
with
that,
let's
get
into
the
code
and
see
how
the
code
looks
like.
So,
as
I
said,
this
particular
sample
has
been
developed
with
spfx
version
1.13.1,
which
you
can
see
the
reference
in
the
package.json
file.
Then
again,
we
do
have
few
of
the
considerations
from
the
permission
configuration.
F
So
we
need
a
few
set
of
permissions
configured
in
the
file
which
is
which
can
be
found
under
the
config
folder
package
solution.json,
and
then
we
need
to
have
certain
web
api
permission
request
specified
here.
So
either
you
can
specify
group
dot,
read
dot,
all
permission
to
read,
group
properties
and
membership,
or
you
can
specify
directory.read.all
to
read
the
data
in
your
organizations
directory
such
as
user
and
groups
and
again
you
will
need
user.read.all
to
read
the
user
profiles
information.
F
So
these
are
the
three
or
at
least
these
two
combination
of
group,
dot,
read
directly
or
dot,
read
and
user
dot.
Read
will
be
needed
to
run
this
as
sample.
Then
again
we
do
have
a
service
created
under
the
services
folder,
so
this
service
will
help
you
to
get
the
group
related
information.
So
this
service
has
got
two
major
methods
implemented
inside
it.
So
first
one
is
the
get
my
member
groups
which
will
return
the
groups
of
which
the
current
logged
in
user
is
a
member
of.
F
So
this
is
a
simple
plain
graph
api
call
which
will
help
you
to
get
all
of
the
groups
where
you
are
a
member
second
thing
or
the
second
method
that
we
have
here
is
get
my
owner
groups,
which
is
again
simply
written
you.
The
groups
where
the
currently
logged
in
user
is
the
owner
of-
and
just
one
thing
here,
is
that
we
will
still
have
to
use
this
owned
objects
kind
of
an
api
from
the
graph,
but
because
we
don't
have
directly
my
own
group
kind
of
anything
here.
F
So
our
member
of
our
owner
of
conditioning
available
here,
so
we
will
still
have
to
use
owned
object
and
once
we
get
that
at
least
we
will
have
the
entire
information
about
the
groups
where
you
are
a
member
of
and
the
group
where
you
are
owner
of
and
we
can
use
that
information
in
our
s
class.
So
we
have
this
s
class
here,
which
is
this
file
that
contains
the
definition
of
s
which
extend
from
the
base
adaptive
card
extension
class.
And
then
we
have
a
major
method
here,
called
as
on
init.
F
F
So
this
card
view
will
display
the
group
summary
and
again
it
will
have
a
button
to
open
a
quick
view.
So
this
this
one
will
give
you
the
list
of
all
of
the
groups
that
we
have
and
then
list
a
list
of
the
groups
where
you
are
a
member
and
owner.
And
then
there
will
be
a
button
to
go
to
that
members
group
or
to
the
owners
group,
and
once
we
click
that
button.
There
will
be
another
view,
which
will
be
a
quick
view
that
that
will
be
seen
to
us.
F
So
this
quick
view
displays
the
groups
count
by
the
owner
groups
as
well
as
the
member
groups.
So
again,
this
one
is
supported
by
the
template,
which
is
this
group
summaryviewtemplate.json,
and
then
this
json
will
render
all
of
the
groups
that
we
have
and
then
again
that
will
be
a
link
next
to
each
of
the
group
to
get
into
the
more
details
of
that
group,
which
is
our
group
listing
view.
F
So,
for
example,
if
I
just
open
up
that
view
again,
so
it
is
the
quick
view
available
which
display
the
groups
based
on
the
selection
from
the
group
summary
view
which
we
have
seen
previously
so
example.
We
can
click
on
the
owner
group
that
we
want
to
see
or
member
groups
that
we
want
to
see
based
on
the
selection
that
we
have
done
on
to
our
previous
quick
view.
This
view
will
take
the
action
and
then
it
will
show
the
information
about
that
particular
groups
where
we
are
owner
or
where
we
are
members.
F
So
it
can
detect
this
data
from
state
that
which
group
type
we
had
selected,
whether
it
was
owner
group
or
a
member
group,
and
from
there
it
can
go
ahead
and
do
the
more
processing
and
dynamically
here
in
the
on
action.
It
will
make
a
call
to
the
service
again
just
to
see
that
whether
that
particular
group
has
been
associated
with
any
of
the
sharepoint
side
or
if
that
group
has
been
associated
with
any
of
the
microsoft
teams
team.
F
So
from
here
it
will
show
the
information,
a
basic
information
about
that
group,
like
the
display
name
of
that
group,
a
description,
the
visibility
that
we
have
seen,
whether
it
is
a
public
or
a
private
group,
and
then
what
kind
of
an
action
that
we
can
take.
So,
for
example,
if
it
is
associated
with
with
sharepoint
site,
we
will
be
able
to
see
this
option
or,
for
example,
if
it
is
associated
with
teams,
will
be
able
to
see
this
option.
F
So
this
was
basic
about
the
code
like
how
this
code
has
been
developed
coming
to
the
deployment
part.
So
this
one
is
a
pretty
much
straightforward
deployment
that
we
just
have
to
prepare
and
deploy
the
solution
package
by
running
the
commands,
like
bundle
followed
by
the
package
solution,
and
then
we
just
need
to
deploy
the
generated
package
to
the
sharepoint
tenant
app
catalog.
But
the
major
thing
here
is
when
it
comes
to
the
graph
apis.
F
So
after
deploying
the
solution
to
the
netapp,
catalog,
sharepoint
administrator
needs
to
approve
the
graph
api
permissions
from
the
sharepoint
admin
center
by
going
to
the
advanced
and
then
api
access
blade.
So
I
just
want
to
share
a
word
of
caution
here,
because
the
api
used
here,
which
is
group.all,
is
considered
to
be
a
risky
permission
level,
because
it
allows
the
app
to
read
group
properties
and
membership
and
read
the
calendar
and
conversation
for
all
the
groups.
So
definitely
your
organization's
digital
security
team
will
not
like
it.
F
They
will
raise
the
concern,
so
maybe
consider
something
like
directory.read.all
that
allows
app
to
read
data
from
your
organization's
directory,
such
as
users,
group
and
apps,
without
going
into
the
membership
or
conversation
kind
of
details,
all
right
so
away
with
that
here
are
the
references,
the
code
sample
and,
for
example,
if
you
want
to
see
how
this
sample
has
been
developed
here
is
my
blog
with
that.
Thank
you
very
much,
and
thank
you
very
much
for
giving
the
opportunity
to
present
this
and
back
to
you
vesa.
Thank
you.
D
Paulo
take
it
away.
Thank
you
visit.
Thank
you,
patrick
yeah,
so
today
we
want
to
talk
about
how
we
can
use
adaptive
card
extensions
with
hpfx
in
order
to
collect
input
data
through
forms
and
to
act
against
those
data
with
custom
actions.
So
briefly,
let
me
explain
you
the
idea
and
then
we
will
move
to
the
demo
side.
D
Then
you
can
also
configure
actions
which
can
be
buttons
to
submit
your
data
or
other
actions
which
will
make
your
cards
more
interactive
from
an
end
user
point
of
view.
Whenever
there
will
be
an
action
triggered
inside
the
card
you
can
easily
in
the
code
base
of
your
electric
current
extension,
create
an
on
action
method
which
will
intercept
the
action
submitted
by
the
user
and
in
there
you
will
be
able
to
use
your
code
and
to
work
with
your
state,
your
properties
and
invoke
the
backend
api
and
stuff
like
that.
So
let's
say
that.
D
Let
me
show
you
a
couple
of
really
simple
examples
which
I
defined
that
just
for
the
sake
of
explaining
you
the
topic.
So
these
are
not
real
components,
but
these
are
just
components
that
I
created
for
the
sake
of
explaining
you
how
it
works.
So
this
is
a
very
first
and
simple
one
where
I
can
create
and
show
you
a
quick
view
in
an
adaptive
card
extension
through
which
I
can
collect,
for
example,
the
selection
of
a
menu
in
a
company
food
court.
D
Just
to
make
an
example-
and
let
me
just
pick
the
meat
and
an
apple
pie-
and
I
don't
know
a
beer,
because
I
like
drinking
beers
and
when
you
book
your
lunch,
you
can
get
the
action
of
booking
the
lunch
and
you
can
collect
the
information
provided
by
the
user.
How
can
you
create
such
a
solution
with
adaptive
card
extensions?
Of
course
you
will
have
to
create
an
ace
with
spfx.
D
We
have
already
seen
in
these
bi-weekly
calls
multiple
times
how
you
can
do
that,
so
you
use
the
human
generator
for
sharpening
framework
and
you
inherit
from
base
adaptive
card
extension,
and
in
this
case
I
defined
a
couple
of
quick
views.
The
very
first
one
is
the
choose
menu,
quick
view
which
will
rely
on
the
fact
that
in
my
adapter
account
extension
in
this
state,
I
define
the
main
course
the
dessert
and
the
beverages
that
I
want
to
select
and
in
the
choose
menu
quick
view.
D
I
will
simply
rely
on
the
json
of
the
adaptive
card,
so
I
defined
a
column
set
in
my
json
definition,
but
I
have
a
column
where
I
provide
the
title
of
the
card.
Then
I
have
a
description
and
then
I
start
collecting
all
of
the
choices
from
my
user,
so
I
can
rely
on
the
input
dot,
something
components
that
we
have
in
the
adaptive
card
syntax
and
here
I'm
using
the
choice
set.
I
will
call
main
course
this
specific
choice.
D
The
structure
of
my
data
object
so
that
when
I
will
click
on
the
submit
button,
the
on
action
event
for
the
submit
action
will
set
the
state
of
my
adaptive
card
extension
component
to
the
choices
made
by
the
user,
and
then
I
can
move
to
another
quick
view
which
will
simply
recap
the
options
just
one
more
thing,
because
I
want
to
show
you
what
you
can
do
using
adaptive
card
extensions
here.
There
is
a
much
more
complex
scenario
of
the
form
which
can
show
items
in
read-only
or
by
clicking
on
an
icon.
D
You
can
enable
the
edit
form
you
can
play
with
it.
You
can
collect
input
data
and
do
whatever
you
like,
using
a
really
nice
ui
based
on
the
adaptive
card
syntax,
and
in
order
to
do
that
with
aces,
it
is
really
easy
and
simple
again
using
the
json
syntax
of
the
adaptive
code
extension.
We
have
plenty
of
options
and
let
me
very
briefly
show
you
what
I
mean.
First
of
all,
if
you
think
about
the
ui,
we
have
the
button
to
edit
or
to
save
or
cancel
the
editing.
D
Well,
here
we
have
an
image
which
is
the
edit
button,
and
here
I
say
that
the
action
for
this
button
is
toggle
visibility
by
clicking
on
this
button.
All
of
these
components
with
these
ids
will
change
their
visibility
status.
So
if
they
are
visible,
they
will
have,
they
will
become
hidden
and
the
other
way
around.
So,
for
example,
I
play
with
the
edit
button-
and
I
hide
myself
and
I
will
show
the
save
and
the
cancel
button,
and
when
I
will
click
on
save,
I
will
submit
you
see.
D
I
have
another
action
here
and
the
same
happens
for
the
cancel,
which
will
simply
reverb
the
status
of
the
form.
Then
I
have
a
column
set.
I
have
one
column
through
which
I
define
the
read-only
version
of
my
data,
which
is
not
really
interesting.
I
simply
add
the
data
binding
right
here
and
then
I
have
another
op,
sorry,
another
column
right
here,
which
is
the
edit
form
and
which
is
the
one
I'm
showing
or
hiding
being
based
on
the
toggle
visibility,
selection
control,
and
here
I
have
all
of
the
input
fields.
D
D
I
can
collect
numbers
dates
and
times
as
well
as
I
can
provide
a
toggle
button
or
a
choice
set
as
we
saw
before,
and
then,
whenever
the
user
will
click
on
the
action
to
submit
data
we
again
is
like
as
before,
in
the
on
action
event,
we
can
collect
data
and
store
the
result
in
our
state
and
then
eventually
in
a
backend
service.
This
just
to
give
you
an
idea
of
what
you
can
do
and
how
powerful
is
the
adaptive
card
extension
syntax.
D
A
Thank
you
for
condensing
that
a
little
bit
there
at
the
end,
three
great
demos
again,
so
thank
you
to
christoph
nandip
and
paulo
for
those
demos.
I
will
look
forward
to
watching
the
recordings.
Hopefully
everybody
else
is
able
to
see
them
without
a
problem.
Well,
thank
everybody
for
joining
us
today
on
the
call
the
recording
will
be
available
in
about
24
hours
on
the
youtube
channel,
aka
dot.
Ms
slash
m365
pmp,
slash
videos
follow
us
on
twitter.
Our
next
call
will
be
april.