►
Description
In this 13-minute developer-focused demo, Fabio Franzini educates viewers on the control by stepping through implementation of the "AdaptiveCardHost" PnP React component using the Adaptive Card SDK. The host control delivers the ability to change UI at runtime without having to recompile the SPFx solution. Simple configuration in property pane - select a card to render and apply a theme aligned to SharePoint or Teams environment. Uses Fluent UI. Walk through code and proposed future updates. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 21, 2022.
Demo Presenter
• Fabio Franzini (Apvee Solutions) | @franzinifabio
Supporting materials
• Tools – Schema Explorer | adaptivecards.io/
• Controls - Adaptive Card Host | https://pnp.github.io/sp-dev-fx-controls-react/controls/AdaptiveCardHost/
• Sample - 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
So
hello,
everyone
in
this
very
quickly
session.
I
want
to
show
you
a
control
that
I
created
for
the
pmp
control
gallery
and
the
control
is
the
adaptive
card
host
control.
So
let
me
explain
the
agenda.
I
want
to
show
you
the
reason
behind
the
implementation
of
this
control.
Why
I
choose
the
adaptive
card
sdk
to
implement
this
control,
just
an
introduction
on
how
to
use
this
control
and
then
I'll
show
you
the
code
and
different
scenario
on
use
the
control,
then
I'll
show
you
the
next
steps
of
the
implementation
and
some
references.
A
A
A
A
Almost
all
these
property
are
not
required,
but
there
are
some
properties
like
the
card
it's
required,
because
I
need
to
pass
the
template
to
to
render
the
adaptive
card
and
then
some
properties
like
the
data,
if
you
want
to
pass
an
object
that
contain
the
data
that
you
want
to
apply
by
using
the
adaptive
card
template
and
some
callbacks
to
intercept
the
actions.
For
example,
if
you
invoke
on
a
submit
action,
you
are
able
to
catch
this,
this
action
or
the
error.
A
If
there
are
some
error
in
the
rendering
of
the
of
the
card
and
another
good
part,
is
some
callbacks
to
add
custom
elements
and
custom
action,
because
adaptive
card
it's
open,
if
you
want
to
create
new
elements,
you
are
able,
and
then
you
have
to
register
this
new
element
or
action
inside
the
adaptive
card.
Sdk
object.
A
This
control
provides
some
callbacks
to
register
new
card
element
and
new
card
action,
and
there
are
another
callback
to
inject
inside
the
host
capability
object
of
the
adaptive
card,
some
custom
properties,
for
example.
If
you
want
to
pass
a
specific
property
to
all
the
action
or
all
two
elements
of
the
adaptive
current
you
want
to
render
you
are
able
to
use
the
host
capability
and
then
set
your
custom
property
with
the
proper
value.
A
Okay,
this
is
the
two
different
scenario:
the
first
one.
It's
a
web
part
that
it's
hosted
inside
on
a
sharepoint
page
and
by
this
control
we
are
able
to
use
different
kind
of
theme.
For
example,
we
are
able
to
use
the
the
default
team
applied
to
the
site
or
the
team
applied
to
the
specific
section
when
the
web
part
is
it's
rendered
or
we
can
set
different
team.
A
For
example,
I
implemented
three
team,
one
for
the
default
team
for
teams,
one
for
dark
team
and
for
I
contrast
or
if
you
want
to
use
the
same
web
part
but
hosted
as
a
tab,
you
are
able
to
do
and
automatically
so.
The
web
part
are
able
to
check
the
the
team,
apply
the
tool
to
an
asset
to
the
team
client
and
then
pass
the
correct
value
to
the
control.
A
So
the
good
part
you're
able
to
see
in
in
this
slide
is
that
all
the
ui
it's
rendered
with
the
current
theme
and
the
control
like
the
buttons
or
the
actions
or
the
input
of
the
the
card
are
rendered
by
using
the
fluent
ui
components.
This
is
the
very
interesting
feature
because
if
you
try
to
use
the
default
sdk
directly
inside
your
code,
you
are
not
able
to
render
the
fluent
ui
components
it's
rendered
by
using
the
standard
ui
of
the
action
and
element
for
for
adaptive
card.
A
But
you
know
that
exists
on
a
library
implemented
by
microsoft
to
render
the
input
end
actions
by
using
the
front
ui,
but
it's
not
working
with
the
last
version
1.5
of
the
adaptive
card.
So
basically
I
create
this
control
by
rebuild
from
scratch
all
the
controls,
all
the
input,
all
the
actions
by
using
the
latest
version
of
the
fluent
ui
available
for
sharepoint
framework.
A
So
let
me
show
just
the
demo
and
the
code,
so
this
is
the
demo
of
the
the
web
part.
Basically,
the
web
part
that
you
can
find
inside
the
pmp
webpart
examples
you're
able
to
select
the
car
that
you
want
to
render
just,
for
example,
okay,
and
you
are
able
to
set
the
theme
that
you
want
to
apply
to
the
control.
Okay.
A
Inside
the
example,
I
implemented
the
all
the
sample
that
I
found
inside
the
the
the
github
repository
for
adaptive
card,
and
this
is
one
of
the
most
complex
card
in
term
of
a
ui
that
you
can
find
for
the
examples,
and
you
are
able
to
see
that
all
the
ui
will
be
rendered
by
using
the
correct
theme.
If
I
select
the
sharepoint
and
I
try
to
change
the
section
background,
you
are
able
that
you're
able
to
see
that
the
the
theme
is
completed,
change
it.
Okay,
let
me
show
you
the
code.
A
A
I
want
to
show
you
on
a
on
a
card
that
contains
some
inputs:
okay,
another
one.
It's
this
one.
No,
this
one!
Okay,
all
the
inputs
are
the
fluent
ui
controls
and
it's
very
simple
to
use
I
created
on
a
pr-
and
I
think
that
it's
we
will
be
available
very
soon
by
adding
a
new
property
to
pass
the
context
object
of
the
web
part.
A
So
the
control,
basically,
it's
implemented
by
using
the
adaptive
card
sdk
and
it's
implemented
by
a
function,
react
component
by
using
a
lot
of
react
hooks
like
use
reference
or
user
context
to
save
some
informations
when
we
set
some
properties.
Like
the
theme,
there
are
some
code
to
create
the
theme
for
team
default,
dark
high
contrast
or
convert
the
team
that
comes
from
the
web
part
to
full
team
for
for
the
object,
and
there
are
a
lot
of
code,
but
the
the
main
part
is
this
one.
A
When
we
take
the
instance
of
the
adaptive
card
reference,
we
can
take
the
template
that
come
from
the
property
card
inject
some
context,
property.
Like
the
current
theme
and
the
context
that
comes
from
the
web
part.
We
can
expand
this
evaluation
context
inside
the
the
the
template
of
the
card
and
then
at
the
end
we
are
able
to
parse
the
card
and
then
inject
directly
inside
the
div
element
of
the
component,
all
the
the
card.
A
It's
positioned
inside
on
a
team
provider
to
apply
automatically
besides
this,
this
div,
all
the
the
team
that
come
from
from
sharepoint
framework.
I
want
to
show
you
some
calls
again,
and
this
is
the
part
when
I
implement
all
the
elements
like
the
time
he
input
or,
for
example,
inline
actions
or
command
text
input
and
a
lot
all
the
elements
and
all
the
action
are
implemented
by
using
the
fluent
ui.
A
A
So
few
words
about
me:
I'm
the
ceo,
I'm
fiber
frenzy,
I'm
the
ceo
of
the
apv
solution
and
I'm
excited
mvp
into
category
office,
office,
development
and
business
application.
So
you
can
find
some
links
like
my
email,
twitter,
account
or
linkedin
or
github.
If
you
want
to
contact
me,
please
use
this
information,
so
there
are
some
references,
the
adaptive
cards,
that
I
owe
it's
the
entry
point.