►
From YouTube: Adaptive Cards Host Control in Microsoft 365 PnP Library
Description
In this 30-minute Developer-focused demo, Fabio Franzini relates how customers commonly want same functionality, different UI. The objective was to enable customers to change UI layout at runtime (no recompiling required). Mission accomplished! This SPFx solution contains a web part that hosts an AdaptiveCardhost control. The web part that can be used in a SharePoint page, Teams tab and Teams personal app. See/hear the rationale behind this React control, why use the Adaptive Cards SDK, Fluent UI, and how control is implemented. Includes Q&A. This demo is taken from the Adaptive Cards community call – March 2022, recorded on March 10, 2022.
Demo Presenter: Fabio Franzini (Apvee Solutions) | @franzinifabio
Supporting materials:
• SPFx Controls - Adaptive Card Host | https://pnp.github.io/sp-dev-fx-controls-react/controls/AdaptiveCardHost/
• SPFx Samples - SharePoint Framework Client-Side Web Part Samples (Demo will be posted here when complete) | https://pnp.github.io/sp-dev-fx-webparts/
Learn more:
• 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
I
want
to
show
you
some
information
about
these
controls:
adaptive
card,
the
os
control
for
the
microsoft
pmp
library,
so
the
agenda
it's
this
one.
First
of
all,
I
want
to
to
show
you
and
talk
about
the
reason
behind
the
implementation
of
speech
control
and
why
I
choose
to
use
the
adaptive
card
sdk.
A
So,
first
of
all,
what
is
the
reason
behind
this
control
in
in
my
career,
I
work
with
a
lot
of
customers
that
want
to
implement
internet
info
points
by
using
the
sharepoint
framework,
and
very
often
this
customer
asked
me
so
the
same
identical
functionality
as
on
a
web
part,
but
want
to
have
a
different
ui.
For
example,
one
customer
want
the
button
and
the
text
box
or
a
different
control
in
a
specific
layout,
but
different
customers
want
to
change
the
layout.
A
A
So
I
create
this
control
as
a
react.
Control
and
this
control
is
medium
complex
because
implement
a
lot
of
things.
For
example,
internally,
you
use
the
sdk
to
take
the
card
they
load
and
render
the
adaptive
card
inside
a
specific
element
of
the
web
part.
This
control
automatically
apply
the.
If
an
object,
data
is
passed
to
the
control
automatically
apply
the
template,
so
take
the
template
by
the
the
card
and
then
expand
it
in
place
by
using
the
object
data
in
an
automatically
way
implement,
of
course,
some
callbacks
to
intercept
the
action
and
errors.
A
B
A
I
implemented
almost
all
the
elements
and
all
the
action
that
now
it's
implemented
inside
the
adaptive
card
1.5
by
using
the
fluent
ui
controls.
So
you
know
that
we
have
it's
possible
to
use
and
I
really
created
the
package
that
implements
the
fluent
ui
elements
created
by
microsoft,
but
I'm
trying
to
use
with
the
last
version
of
the
sdk
1.5.
But
there
are
some
problems
to
use
this
frequent,
ui
implementation
and
another
things.
A
There
are
no
deep
integration
with
our
point
framework,
for
example,
when
I
show
you
in
the
demo,
when
you
try
to
change
the
background
of
the
section
inside
the
page,
I
created
a
new
set
of
elements.
I'm
able
to
manage
directly
this
this
thing
and
then
I'm
able
to
pass
the
the
current
sharepoint
theme
section
theme
to
the
front
ui
elements
and
then
render
in
an
integrated
way
with
with
sharepoint.
A
A
So
first
of
all,
this
is
a
sharepoint
workbench,
of
course.
Behind
this
I
have
one
sharepoint
framework
solution
that
contains
an
aware
part
that
offers
my
adaptive
card,
the
ost
control,
and
these
were
part.
It's
very
simple
because
take
a
lot
of
json
adaptive
card
samples
and
when
you
try
to
change
this
property,
you
are
able
to
change
the
card
and
then
show
what
is
the
result
inside
the
web
part,
the
good
integration
that
I
already
mentioned.
It's
let
me
go
on
a
complex
card
like
okay.
It
is
this.
A
Of
course,
the
basic
background,
the
text,
but
it's
the
same
for
the
xbox
button,
for
example,
and
another
things-
is:
I'm
able
to
change
the
theme
applied
to
these
to
visual
part.
For
example,
I
want
to
use
the
sharepoint
theme.
Okay,
and
this
is
the
theme
that
I
take
from
the
the
section,
but
I'm
able
to
use
different
theme.
For
example,
the
theme
for
teams
default
teams,
dark
or
teams
contrast,
okay
in
which
way
I
implemented
this
component,
this
control.
So
let
me
show
you
the
code.
A
First
of
all,
this
is
the
simple
web
part
that
use
basically
the
adaptive
card,
the
os
demo
reactor
component,
and
I
pass
some
parameters
like
the
theme,
which
is
the
sample
that
I
selected
from
the
the
drop
down
and
the
team
name
that
come
from
basically
from
the
same
dropdown
of
the
team.
If
I
want
to
use
a
sharepoint
or
different
teams
team
and
inside
the
adaptive
card
host
demo
react
component,
I
have
the
core
component,
that
is
the
adaptive
card
post.
A
A
If
you
want
to
apply
some
css
class
name
to
the
component,
this
property
is
used
to
pass
the
fluent
ui
theme.
I
have
a
property
to
pass
the
host
config.
You
know
that
inside
the
adaptive
card,
the
sdk
you
are
able,
in
javascript
you're
able
to
to
pass
the
host
config
to
to
add
more
properties
and
some
callbacks.
For
example,
they
invoke
action,
and
by
using
this
action
object,
we
are
able
to
take
all
the
property
for
submit
action
or
different
action
that
we
have
inside
the
adaptive
card
and
a
callback
for
the
errors.
A
For
example,
if
there
are
some
problems
problems
to
render
without
this
card,
we
are
able
to
catch
the
errors
and
then
show,
for
example,
message
to
the
user
to
call
backs
for
elements
and
action
to
register
by
using
this
object,
register
card
object,
registry
for
the
card
element
and
action
and
a
way
to
update
the
off
capability
to
pass
custom
properties.
For
example,
if
you
custom
elements
or
custom
action
need
some
properties
that
come
from
your
web
part,
you
are
able
to
use
these
os
capabilities,
set,
custom
property
and
then
inside
your
custom
elements.
A
A
A
This
menu
is
inside
the
adaptive
card,
sdk
it's
rendered
at
the
body
level,
and
this
is
a
problem
inside
the
sharepoint
page,
because
we
are
not
able
to
style
with
the
custom
theme
properties.
This
is
this
menu
and
in
this
case,
if
we
use
more
instance
of
this
web
part,
let
me
show
you
the
this.
Is
the
order,
confirmation?
A
C
A
A
Okay-
and
this
is,
if
you
try
to
change
the
settings,
you
are
able
to
see
that
I'm
able
to
change
the
same
configuration
okay
and
it's
very
cool
because
by
the
web
part,
I
implemented
a
little
logic,
and
if
I
try
to
change
the
colors
okay,
I'm
able
to
change
the
colors
from
themes
and
then
apply
a
similar
representation
of
the
colors
inside
the
same
web
part
and
the
same
controls.
Of
course,
you
know
that
teams
use
free,
ui
react
north
star,
not
the
same
of
the
sharepoint
framework
inside
for
point.
A
So
this
is
the
implementation
of
the
controls.
It's
on
a
react,
control
implemented
as
a
function
and
a
function,
controls
that
use
a
lot
of
react
hooks
and
basically
have
the
properties
with
all
the
properties
that
I
already
saw,
and
then
there
are
some
some
code
to
manage
the
properties,
but
the
core.
It's
it's
this
one.
D
A
Basically
by
take
the
short
code
of
each
choice
that
he
inputs
and
all
the
elements
that
we
have
and
then
inside
the
internal
render
with
some
code.
So
we
don't
have
too
much
time
to
explain
all
the
code
inside
this
this
control.
Of
course,
I
use
the
react,
strength,
ui
component
to
render
the
checkbox
the
button
for
for
the
actions
and
basically
for
all
the
action
and
all
the
elements
inside
adaptive
card
1.5,
so
some
few
slides.
A
A
So
we
have
to
extend
and
implement
more
functionality
for
this
specific
control,
but
we
want
to
create
more
controls.
For
example,
I
start
to
create
the
designer
component
for
the
tmp
reasonable
react
control
to
us
inside
a
sharepoint
framework
solution,
the
designer,
basically
the
reason
it's
okay.
A
In
this
slide,
you
can
find
some
references.
The
first
link
is
the
page
of
the
the
the
pnp
reasonable
react
controls
specific
for
the
adaptive
cardboard.
It's
of
course,
the
code
it's
already
published
inside
github.
You
can
find
inside
this
ripple
and
the
demo
that
I
just
show
you
will
be
available
inside
the
repository
of
the
sharepoint
framework,
the
tmp
insertment
framework,
the
web
parts
samples
and,
at
the
end,
if
you
want
to
contact
me
repeater,
I'm
fabio,
I'm
the
ceo
of
the
v
solution.
It's
on
a
startup.
A
A
So
basically
it's
a
client-side
way
to
create
code
normally
by
using
the
typescript
and
then
compile
it
to
javascript
to
create
not
only
web
parts.
You
know
the
web
parts,
it's
a
component
that
you
can
put
inside
on
a
sharepoint
page,
but
you
can
create
a
different
kind
of
extensibility
for
sharepoint,
for
example
like
application,
customizer
field
customizer
for
leads
and
different
kind
of
web
parts,
new
type
of
the
web
part
by
using
adaptive
card.
The
name
is
a
adaptive
card
extension.
A
So
basically,
the
compilation
of
this
solution
creates
a
package
that
you
are
able
to
deploy
inside
the
sharepoint
and
then,
if
you
want,
you
can
deploy
inside
the
teams
and
then
use
the
single
part
in
each
sharepoint
or
if
I
have
time
to
add
some
things,
why?
If
it's
already
present
a
way
to
use
adaptive
card
the
ace
adaptive
card
extension,
why
I
implemented
this
kind
of
control?
A
A
I
have
a
plan
to
create
a
demo
by
using
this
adaptive
card
host
inside
an
application
customizer.
I
don't
have
an
example,
but
let
me
show
just
on
a
simple
page
with
an
application
customizer
you
are
able
to
create
a
component
to
implement,
for
example,
on
a
custom
feeder
inside
an
extra
point
page.
B
A
A
D
A
Team's
dark,
I
contrast
and
all
the
description
for
all
the
properties
of
the
controls,
so
it's
very
simple
to
use
just
install
the
library,
import,
the
adaptive
card
host
class
and
then
write
the
react
code
to
specify
all
the
property
that
you
want
to
use.
It's
very
simple,
yeah.
I
have
another
thing
to
add
at
this
moment:
there
are
no
deeply
integration
with
the
sharepoint
framework,
but
we
have
a
plan
with
you.
How
to
add
another
properties.
D
I
had
a
quick
question
so
in
terms
of
the
sharepoint,
what
fabio
is
going
over
right
now
we
do
something
kind
of
similar,
but
it's
just
based
on
the
sample
in
like
the
javascript
sdk,
for
like
lighting
up,
you
know
the
fabric
or
components
with
fluent
ui.
What's
the
difference,
I
guess
like.
What's
the
what's
the
benefit
of
using
that
library,
the
fabio
main.
A
A
If
you
want
to
use
react,
if
you
want
to
use
a
different
kind
of
react
library
for
the
ui
or,
for
example,
angular
or
different
framework,
you
are
able
to
do
in
in
in
hardpoint
framework,
but
I
already
mentioned
inside
the
first
slide.
The
reason
why
I
chose
to
use
the
adaptive
card
is
a
specific
situation.
A
D
Yeah,
sorry,
I
think
I
missed
this
book
so
so
basically
we're
doing
somewhat
similar.
So
we
take
the
so
in
the
adaptive
card
stk
like
the
javascript
sdk,
you
can
render
a
card
in
the
sharepoint
framework
and
then
there's
in
the
documentation.
There's
like
a
little
section
on
how
to
integrate
in
the
fluent
ui
stuff.
So
we're
basically
just
doing
that
and
then
the
theming
you
can
update
like
the
host
config
with
some
of
the
themes
pulled
in
from
like
the
sharepoint
environment.