►
Description
In this 15-minute developer-focused demo, Fabio Franzini quite completely shows off the new control to be included in the next version of the PnP Reusable React controls library. The control facilitates the use of Designer inside a SPFx web part. Essentially, the Host renders a single Adaptive Card in a web part and on the selected Adaptive Card now is a superimposed button ‘Open Designer’ that brings up the new and SPFx optimized, Designer control. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on May 19, 2022.
Demo Presenter
• Fabio Franzini (Apvee Solutions) | @franzinifabio
Supporting materials
• Tools – Adaptive Cards | https://adaptivecards.io/
• SPFx Controls - Adaptive Card Host | https://pnp.github.io/sp-dev-fx-controls-react/controls/AdaptiveCardHost/
• Samples - Adaptive Card Host control | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-adaptive-card-host-control
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp
A
Hi
to
all
so
I
want
to
share
you
my
new
control,
the
adaptive
car
designer
control
and
this
control
will
be
available
inside
the
pmp
reactor
control
gallery.
So
the
agenda
is,
I
want
to
share
just
on
a
recap
of
the
previous
controlled
adaptive
card.
The
host
react
control
and
then
I
want
to
show
you
the
new
adaptive
card
designer
control
and
how
to
use
inside
sharepoint
frame.
A
So
just
a
simple
recap
about
the
adaptive
card
host.
This
react
control.
It's
a
control,
that's
able
to
by
using
the
sdk
of
the
adaptive
card
to
render
an
adaptive
card
with
the
look
and
feel
of
fluent
ui.
So
by
using
the
fluent
ui
react
control
for
actions
and
inputs
inside
a
sharepoint
framework
solution.
It's
an
console
that
take
the
adaptive
card,
the
payload,
the
adaptive,
the
the
object
data
and
the
merge
inside
by
using
the
adaptive
card,
template
extension,
so
create
a
card
and
then
render
inside
on
a
web
part.
A
For
example,
there
are
different
kind
of
properties
that
you
can
use.
For
example,
you
can
use
the
property
on
invoke
action
to
manage
the
the
action
that
you
can
execute
inside
adaptive
card,
for
example,
submit
the
action
the
on
error
or,
for
example,
the
onset
custom
element
or
onset
custom
action
to
add
more
controls
inside
this
adaptive
card
post.
A
This
is
the
result,
so
this
is
just
two
samples
of
the
same
web
part
that
was
rendered
inside
on
a
sharp
point
page
or
inside
on
a
team's
tab.
The
cool
feature
of
this
control
is
that
use
on
a
custom
theme
for
three
kind
of
team
for
for
teams,
light,
dark
and
high
contrast,
and
we
are
able
to
render
in
the
correct
way
with
the
correct,
look
and
feel
the
adaptive
card
inside
with
the
same
look
and
feel
of
the
teams,
for
example.
A
So
now
it's
time
to
the
adaptive
car
design
control,
so
this
control
at
this
moment,
it's
not
available-
will
be
available
in
the
next
version.
I
hope
of
the
gmp
reasonable
react
control,
it's
not
available,
because
I
spent
a
lot
of
time
to
understand
how
to
put
this
so
the
standard
designer
by
using
the
sdk
inside
and
react
control.
A
I
I
fixed
a
lot
of
problem
on
hosting
this
designer
inside.
I
react
control
and
I
refactor
at
the
previous
adaptive
card,
the
host
control
to
share
more
code
from
the
that
control
to
this
adaptive
card
designer
control,
the
cool
feature
is
you
have
to
use
only
one
react
control.
We
have
some
properties
that
could
be
the
same
of
the
previous
control.
A
You
need
to
pass
the
the
card
payload,
the
data,
the
fluent
ui
theme,
the
context
of
the
web
part
and
some
properties
like
enable
data,
binding
support,
show
data
structure,
toolbox
and
and
so
on,
a
cool.
A
good
thing
is,
you
have
to
think
about
this
control,
simplify
the
use
of
the
designer
inside
on
a
sharepoint
framework
web
part.
It's
very
interesting
later
I'll
show
you
some
some
demo.
A
So
I
want
to
share
the
demo.
This
is
the
the
web
part
that
I'll
really
show
you,
and
this
will
part
host
in
this
case,
two
controls.
The
first
one
is
the
adaptive
card
host
and
you
are
able
to
see
the
simple
adaptive
card
rendered
here
and
then
a
button
to
open
the
new
control,
the
designer
control.
So,
first
of
all,
we
can
change.
Of
course,.
A
The
adaptive
card
to
render
I
want
to
go
here
and
then,
if
I
click
on
the
open
designer,
we
are
able
to
see
the
adaptive
card
designer
hosted
inside
a
sharepoint
page.
So
with
this
designer
you
are
able
to
change
all
so
it's
the
same
designer
of
the
adaptive
card
and
you
are
able
to
change.
For
example,
the
element
properties.
You
are
able
to
see
the
card
structure
and
you
are
able
to
see
a
cool
feature.
A
We
can,
of
course,
click
on
preview
mode
to
see
the
preview
of
the
card
and
the
customization
that
I
added
to
this
to
the
standard
designer
it's.
For
example,
the
change
the
host
application
by
using
the
teams,
light
team,
dark
and
hide
contrast
in
this
way
you
are
able
to
see
the
same
card
in
the
different
themes
theme
or
the
defaults
that
come
from
this
specific
sharepoint
site.
Another
cool
feature:
it's
this
one,
the
breakpoints.
A
This
is
not
available
at
this
moment
in
in
the
default
adaptive
card
designer,
but
basically
it's
a
way
to
select
all
the
breakpoints
that
come
from
fluent
ui.
In
this
way,
you
are
able
to
check
the
dimension
of
your
adaptive
card
with
all
the
bread
point
that
we
have
inside
the
fluent
ui
and
then
inside
on
a
sharepoint
page.
If
you
click
on
the
fluid
or
fit
to
content,
you
are
able
to
see
the
web
part
fitted
the
content,
so
the
adaptive
card
fitted
to
the
content
of
itself.
A
A
Of
course,
and
at
this
moment
we
have
an
empty
card,
but
the
controller
have
the
possibility
to
just
with
a
property
to
share
the
payload
that
we
can
use
for
the
new
card.
The
cool
feature
that
I
added
is
these
snippets
functionality,
the
snippets.
It's
like
the
visual
studio
snippets
and
in
this
way
you
are
able
to
drag
and
drop
just
on
a
snippet
of
it's,
not
a
control.
A
But
it's
it's
a
the
payload
or
part
of
an
adaptive
card
and
in
these
simple
snippets,
you're
able
to
see
some
elements
like
an
image
that
have
on
a
specific
url
of
the
sharepoint
user
photo
and
we
have
some
property
inside
the.
So
the
query
string
and
the
user
request
ring
and
I
use
the
binding
with
the
root
context.
A
A
A
Add
the
choice
speaker
to
to
set
the
the
breakpoint,
for
example,
and
at
the
end
we
attach
the
card
designer
directly
to
an
specific
div
inside
the
react
element.
I
used
a
simple
trick
to
resolve
the
problem
of
the
adaptive
card
designer
sdk,
that
this
problem
is
that
you
are
not
able
to
set
a
payload
of
the
card
if
the
monaco
editor
is
not
loaded.
A
So,
in
this
case,
I
show
just
on
a
spinner,
and
then
I
check
that
if
the
monaco
editor
it's
loaded,
if
it's
loaded,
I
remove
the
spinner
and
then
show
directly
the
div
inside
with
adaptive
card
designer
another
thing
that
I'm
able
to
share
with
you.
It's
a
lot
of
code.
It's
shared
from
the
previous
adaptive
card,
os
control
and
I
needed
to
create
some
new
adaptive
card
designer
object.
A
These
objects
are
the
peers
and
the
ps
it's
used
when
you
have
to
desi
to
define
the
property.
For
example,
if
I
put
an
update
input
here,
this
is
the
same
data
input
that
come
from
the
adaptive
card
host
control.
But
if
you
try
to
change
this
property,
you
need
to
define
an
appear
object
for
an
element
or
an
action
to
define
all
these
properties,
and
then
I
redefined
all
the
action
and
element
ps
to
use
the
fluent
ui
action
or
fluent
ui
inputs
that
I
implemented
in
the
previous
controls.
A
I
finished
so
next
step.
The
first
one
was
the
creation
of
the
adaptive
card,
the
host
component.
It's
really
done
the
second.
It's
the
adaptive
car
designer
component
will
be
available.
I
open
the
next
version
of
the
library
I
create
an
appear
next
week
and
the
next
steps.
The
really
next
steps
is
to
create
a
new
set
of
adaptive
card
elements
by
using
fluent
ui,
react,
front,
ui,
web
components
or
microsoft,
graph
toolkit
and
then
use
directly
inside
the
designer
to
design
the
card
and
in
the
adaptive
card
also
to
host
this
card.