►
From YouTube: Adaptive Cards community call – March 2022
Description
The following topics are covered in this month’s community call. Demo: Adaptive Cards Host Control in Microsoft PnP Library (use an Adaptive Card in an SPFx solution that allows UI changes at runtime) – Fabio Franzini (Apvee Solutions), Designer Device Emulator (quick way to see Adaptive Card layout at various selected screen resolutions) – Will Shown (Microsoft), and 15 minute live Q&A – host and demo presenters answer questions about their demos and on building Teams apps with React; which React library to use - React Northstar, React Teams or Fluent UI? This call was hosted by J.P. Roca (Microsoft) | @jpthepm. Recorded on March 10, 2022.
Stay connected:
• Twitter - https://twitter.com/microsoft365dev
• YouTube - https://aka.ms/M365PnP/videos
• Blog - https://aka.ms/m365pnp/community/blog
• Recurrent Invite - https://aka.ms/adaptivecardscommunitycall
• Next call – April 14th at 09:00am PT
A
A
Then
we
will
have
will
go
ahead
and
show
off
a
community
contribution
or
an
internal
team
contribution
as
well
or
a
device
emulator
on
our
adaptive
cards
designer
which
is
super
cool,
and
then
we
can
go
ahead
and
end
the
session
with
a
q,
a
as
always
we're
going
to
start
off
with
the
adaptive
cards
host
control,
and
I
will
pass
on
control
to
fabio
fabio.
You
can
go
ahead
and
start
sharing
your
screen.
B
B
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
it's
the
same
identical
functionality
as
on
a
web
part,
but
want
to
have
a
different
ui.
For
example,
one
customer
wants
the
button
and
the
text
box
or
a
different
control
in
a
specific
layout,
but
different
customers
want
to
change
the
layout.
B
B
B
C
B
Using
a
key
and
a
value
and
in
this
implementation,
because
I
want
to
have
a
very
deep
integration
from
the
adaptive
card
to
the
context
of
the
sharepoint
framework,
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
an
already
created
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.
B
But
there
are
some
problems
to
use
this
fluent
ui
implementation
and
another
things
there
are
no
and
a
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
through
the
front
ui
elements
and
then
render
in
an
integrated
way
with
the
additional
point.
B
B
So
first
of
all,
this
is
a
sharepoint
workbench.
Of
course.
Behind
this
I
have
an
sharepoint
framework
solution
that
contains
an
aware
part
that
offers
my
adaptive
card
the
os
control.
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.
B
Of
course,
the
basic
background,
the
text,
but
it's
the
same
for
the
action
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.
B
First
of
all,
this
is
the
simple
web
part
that
use
basically
the
adaptive
card.
The
os
demo
react
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
the
same
dropdown
of
the
team.
If
I
want
to
use
the
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.
B
You
see
that
we
have
a
lot
of
properties,
the
card,
it's
the
payload
of
the
adaptive
card,
the
data
object.
If
we
want
to
apply
the
classic
css
property
as
a
react
property
for
for
the
component,
if
you
want
to
apply
some
css
class
name
to
the
component,
this
property
is
used
to
pass
the
fluent
ui
theme.
B
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,
the
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
I
call
back
for
the
errors.
B
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,
you
are
able
to
read
this
this
custom
property
and
then
use
inside
this
control,
and
there
are
another
strange
for
me.
Property
is
a
unique
controlling
page.
This
is
used
in
a
specific
case.
B
B
B
B
Needed
to
understand,
if
it's
possible,
to
have
only
a
unique
control
inside
the
page
or
it's
possible
to
have
more
than
one
control
inside
the
same
page,
and
then
this
this
control
inside
the
implementation
are
able
to
set
different
css
custom
variables
to
apply
different
colors
and
then
understand
if
we
have
to
apply
the
section
colors
or
maintain
the
default
colors
as
the
default
colors
for
for
this
menu.
This
is
the
only
this
property
is
present
only
to
resolve
this
problem.
B
D
B
B
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
far,
not
the
same
of
the
sharepoint
framework
in
satisfactory
point.
B
B
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.
B
Let
me
show
you
the
core:
it's
this
one
and
I
use
the
adaptive
card
sdk
to
parse
the
payload
to
apply
to
expand
with
the
with
the
context,
to
the
specific,
the
data
that
you
want
to
render
inside
your
your
card
and
then
by
using
the
team
provider,
I'm
able
to
apply
the
sharepoint
framework,
so
the
fruit
ui
theme
inside
the
adaptive
card
that
I
want
to
render,
but
the
very
implementation.
The
very
the
very
part
of
this
implementation
is
the
elements
that
I
already
re-implemented.
B
Basically
by
take
the
short
code
of
each
choice
that
we
input
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
use
control.
Of
course,
I
use
the
react
front,
ui
component,
to
render
the
checkbox
the
button
for
for
the
icons
and
basically
for
all
the
action
and
all
the
elements
inside
the
adaptive
card
1.5,
so
some
few
slides.
B
B
In
this
slide,
you
can
find
some
references.
The
first
link
is
the
page
of
the
the
the
pnp
reasonable
react
controls.
This
is
for
the
adaptive
card
dust.
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
pm
instagram
framework,
the
web
parts
samples
and,
at
the
end,
if
you
want
to
contact
me,
I
repeat:
I'm
fabio,
I'm
the
ceo
of
the
v
solution.
It's
on
a
start-up.
B
Objective
to
create
a
solution
for
the
microsoft
365
platform,
and
I
must
mdp
in
two
categories:
the
business
application
and
office
development
category.
So
if
you
want
to
send
me
an
email
or
follow
me
on
twitter
or
contact
me
by
linkedin,
you
can
find
all
the
information
you
see
in
this
in
this
slide.
A
You
thank
you.
Thank
you,
so
much
fabio
and
I
went
ahead
and
pasted
all
of
the
links
about
fabio
and
and
his
work
in
in
the
chat
for
anyone
to
to
quickly
reference
there.
Thank
you
so
much
for
for
sharing
that
we'll
save
the
questions
for
for
the
end
of
the
presentation,
I'll
go
ahead
and
share
my
screen
again.
A
E
E
So
it's
a
really
simple
feature.
Basically,
this
is
emulating
what
an
adaptive
card
will
look
like
on
certain
widths
by
default.
There's
the
unconstrained
width
and
we've
added
some
pretty
simple
category
as
a
small
mobile.
This
includes
the
wcag
1.4.10
standard,
320
pixels
large
mobile
414
is
reasonably
popular
small
tablets.
These
are
all
fairly
popular
resolutions
that
users
would
extensively
like
a
large
number
of
users
might
extensively.
A
E
F
A
A
We
have
three
of
our
our
valuable
community
members
as
well
tim
tamas,
who
was
here
two
months
ago
and
luis
who
will
be
presenting
during
this
conference
about
adaptive
cards
today
you
can
register
at
the
link
at
the
bottom
teamsnation.rockslash
register.
This
is
a
completely
community
driven
conference.
So
it's
awesome
to
see
members
of
our
community
presenting
at
this.
Please
show
your
support
during
this
conference.
I
know
I
will
be
attending
and
learning
about
adaptive
cards
today
in
teams.
It's
it's
rare,
to
see
something
like
the
adaptive
cards.
A
A
B
E
B
Create
code
normally
by
using
the
typescript
and
then
compare
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.
B
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
same
web
part
in
each
fairpoint
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
for
the
web
part,
because
the
adaptive
card
extension
with
parts
have
a
specific
model
designed
for
a
specific
scenario.
B
B
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
so
by
using
this
adaptive
card
os
control
inside
an
application
extension.
You
are
able
to
design
the
ui
of
this
extension
by
using
the
adaptive
card
and
then
save
the
payload
of
the
card,
for
example
inside
on
a
star
point
list
or
library,
and
then
change
a
runtime
payload
reload
the
page
and
apply
this
new
ui
without
reconcile
anything.
A
Awesome,
thank
you
so
much
for
for
that
explanation.
Fabio.
We
have
another
question
in
the
chat
from
chris
asking
when
slash
will
power
automate,
support,
replacing
adaptive
cards
and
teams
messages?
Chris,
I
don't
have
the
answer
to
your
question.
Right
now,
it
looks
like
matt
will
be
trying
to
get
an
answer
for
that
in
the
near
time
frame
here.
A
A
B
Yeah,
let
me
here
again
the
screen
and
okay.
So
inside
the
link
that
I
share
with
you,
you
are
able
to
find
the
the
page
that
describes
this
adaptive
card
host
control
is
inside
the
dmp
sharepoint
framework
controls
react
controls
basically
inside
your
solution.
You
have
to
first
of
all
install
the
library
as
a
npm
package,
of
course,
and
then
you
can
click
on
the
adaptive
card
host
page
and
then
inside
this
page.
B
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
properties
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.
B
One
property
is
the
context
of
the
sharepoint
for
the
web
part
or
in
general,
for
the
sharepoint
is
a
context
because
we
need
to
inject
a
runtime,
some
context,
property
that
come
from
the
sharepoint
framework
to
use
in
the
future
implementation
of
the
new
elements
or
action
that
they
need
to
to
have
a
deep
integration
with
sharepoint
framework.
So
in
the
future
we
had
more
properties,
but
at
this
moment
you
can
use
this
description
inside
this
page.
A
Thank
you.
Thank
you
fabio
again.
We
have
another
question
from
brad
asking:
do
you
have
an
eta
for
1.6?
I'm
assuming
this
is
for
adaptive
cards,
schema
version
1.6
and
unfortunately
we
don't
have
an
eta
just
yet
we
are
really
hoping
to
get
it
out
by
the
first
half
of
2022
right
now.
Our
team
is
very
focused
on
our
accessibility
story
and
making
sure
that
our
product
is
very
accessible
to
all
kinds
of
users.
A
We've
been
fixing
any
accessibility
bugs
that
we've
found
on
our
repo
and
really
making
sure
that
that
adaptive
cards
is
accessible
to
to
all
kinds
of
users.
So
this
has
delayed
the
release
a
little
bit,
but
we
are
still
shooting
for
for
first
half
of
2022
to
get
version
1.6
out.
Currently.
The
first
feature
that
has
rolled
out
for
version
1.6
is
a
horizontal
carousel
control.
A
E
I
did
in
chat,
so
react
teams
is
just
more
abstract
component
library,
that's
built
on
top
of
react.
Northstar.
There
are
depending
on
like
what
your
design
system
or
like
what.
What
features
you
want
to
roll
out
with
your
app
react
teams
might
not
have
the
flexibility
or
all
the
components
that
you
would
need.
So
you
can
just
use
react
north
star.
E
There
are
teams,
themes
that
you
can
use
there
there's
also.
The
upcoming
fluent
ui
react
components
which
makes
improvements
on
all
of
the
implement
implementations
that
came
before
it.
I'd
highly
recommend
using
that,
if
you're
able
to
take
a
dependency
on
something
that's
about
to
be
released,
but
not
not
not
there
just
yet,
it's
just
got
a
lot
of
good
stuff
in
there
I'll
post
a
link
to
that
as
well.
G
A
C
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
fabia
main.
B
B
If
you
want
to
use
react,
if
you
want
to
use
different
kind
of
react,
library
for
the
ui
or,
for
example,
angular
or
different
framework,
you
are
able
to
do
in
in
in
point
framework,
but
I
already
mentioned
inside
the
first
slide.
The
reason
why
I
choose
to
use
the
adaptive
card
is
a
specific
situation.
B
C
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
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.
D
B
B
A
A
Here.
You
can
learn
more
about
the
adaptive
cards
product
as
well
as
our
our
roadmap,
our
repo,
and
also
find
tools
and
sample
cards
on
made
with
cards
dot.
Io.
Here
you
can
learn
more
about
the
microsoft
365
developer
community
calls
like
this
one
and
their
cadence.
You
have
all
of
the
the
calls
and
all
of
their
links
in
aka.ms
m365pn,
and
this
will
conclude
the
march
2022
adaptive
cards
community
call
thank
you
so
much
fabio
for
for
showing
your
sharepoint
framework
solution.
Thank
you.