►
Description
Microsoft 365 platform community call delivered on January 17th.
Demos in this call: Building Metaverse experiences using Teams LiveShare SDK and Create an SPFx Image Card ACE displaying image carousel - ACE learning module.
Activities: 5 articles and 1 conversation released in the last 7 days. Registration is open for 2 Sharing Is Caring sessions - Writing for the Web on Monday, January 23rd and PnP SPFx Samples w/NVM on Wednesday, January 25th.
See the blog post for this call for announcement, news and event details. The host of this call was Vesa Juvonen (Microsoft) | @vesajuvonen. Q&A takes place in chat throughout the call.
Agenda
00:00 – Intro
08:06 – Latest updates and news on the Microsoft 365 platform – Vesa Juvonen (Microsoft) | @vesajuvonen
09:44 – Together mode picture
10:56 – Demo - Building Metaverse experiences using Teams LiveShare SDK – David Rousset (Microsoft) | @davrous
31:11 – Demo - Create an SPFx Image Card ACE displaying image carousel - ACE learning module – Vesa Juvonen (Microsoft) | @vesajuvonen & Andrew Connell (Voitanos) @andrewconnell
53:09 – Closing
Learn more
• See the full blog post for this call in the Microsoft 365 platform community blog - https://aka.ms/m365pnp/blog
• Download invite for this weekly Microsoft 365 Platform community call: https://aka.ms/m365-dev-call
• 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 - https://aka.ms/m365/community
A
B
Then
after
that
roughly
10
past
15
pass
to
David.
Fruset
is
the
real
star
of
today
or
one
of
them,
and
and
he's
going
to
show
building
midverse
experiences
using
teams,
liveshare
SDK
and
that's
a
really
interesting
topic
and
and
I've
seen
some
teasers
on
that
video
and
it
looks
really
really
awesome
and
then
I'm
gonna.
Do
the
quick,
intros
and
then
AAC
Andrew
Collins
from
voidano,
is
going
to
actually
show
you
an
additional
exercise
related
on
building
Ace
experiences
for
Microsoft,
Viva
connection
or
Viva
home.
B
We'll
cover
that
a
bit
more
detailed,
Viva
Home
by
the
way
starts
rolling
out
to
targeted
release
today.
So
that's
a
good
teaser
to
know
and
I
will
explain,
and
in
the
intro
of
that
section
one
and
what
on
Earth
is
Viva
home
and
what
does
it
actually
mean
for
you
as
well?
Now
we
do
have
a
quite
a
different
set
of
assets
available
for
you
to
get
started
on
my
365
development.
B
So,
rather
than
expecting
you
to
find
the
relevant
GitHub
sample
from
the
thousands
and
thousands
of
GitHub
repos,
which
we
have,
we
actually
surface
those
samples
on
Sample
metadata
in
a
one,
centralized
location,
the
centralized
location
being
akms
M365
samples
from
where
you
can
from
one
location,
find
the
relevant
sample
for
you
and,
if
you're
wondering
that
testimony
URLs
to
remember
luckily,
there's
only
one
which
is
akms
M365,
Community
from
where
you'll
find
all
of
the
assets.
All
of
the
guidance.
All
of
the
steps
to
get
started
on
Microsoft
365.
B
I
had
a
few
different
Community
calls
available.
So
this
is
the
Tuesday
one,
which
is
every
single
Tuesday,
8,
AM,
Pacific
Time,
happens
and,
and
we
have
primarily
Microsoft
presenters
on
this
one
or
occasionally
somebody
who's,
helping
Microsoft
employees
or
delivering
content
like
today
enter
konos.
Invoitanos
is
joining
on
the
call
as
well.
We
do
have
also
three
different
monthly
Community
course,
which
are
identity
platform.
Community
called
happening
this
week
as
well
on
Thursday
9
A.M
Pacific
time.
We
also
have
the
office
and
in
community
called
Power.
B
Platform
Community
call
happening
this
week
as
well
at
8,
A.M
Wednesday,
and
so
you
want
to
probably
download
that
as
well,
and
then
we
have
the
Thursday
series,
which
is
happening
every
single
Thursday,
which
is
either
the
Microsoft
365
and
Power
Platform
communicable,
or
the
Viva
connection
and
SharePoint
Community
course,
and
those
Thursday
series
are
mainly
for
Community
demos,
which
is
a
great
way
of
learning
the
art
of
possible.
Now
coming
back
on
that
one,
you
might
be
wondering
Community
demos
well,
I
built
something
cool.
B
How
would
I
actually
get
a
opportunity
of
presenting
that
we
actually
give
you
that
opportunity,
so
you
can
participate
on
the
community
actions
in
multiple
different
ways.
You
can
actually
request
a
spot
in
our
community
course,
and
this
is
a
great
way
of
getting
visibility
for
yourself
as
well.
So
if
you're
wondering
on
there
are
these
MVPs
and
I
always
want
to
be
a
Microsoft
MVP.
B
One
of
the
easiest
way
to
get
acknowledged
on
being
an
MVP
or
getting
potential
MVP
in
the
future
is
to
do
community
called
demos
within
our
official
worldwide
Community
course,
and
you
can
easily
sign
up
or
suggest
a
demo
using
akms
Community
request
at
demo.
So
that's
a
URL
for
that
one
from
there,
depending
on
what
kind
of
demo
you're
looking
into
doing
it,
then
we'll
get
you
scheduled
on
the
Microsoft,
365
demos
or
Viva
connection,
demos
or
Power
Platform
demos
or
whatever
is
the
suitable
demo
call
for
you.
B
So
please
take
take
advantage
of
that
opportunity
great
way
of
getting
exposure.
You
can
also
contribute
in
GitHub
and,
most
importantly,
please
provide
us
feedback.
So
whatever
works,
what
doesn't
work?
Let
us
know
we
are
here
to
build
experiences
for
you,
so
we
need
to
understand
what
works
and,
more
importantly,
even
what
doesn't
work,
but
the
positive
feedback
is
always
good
as
well.
B
So
there's
like
100
module
available
for
you
to
take
it
take
advantage
and
those
modules
are
in
a
nice
series
format
and,
as
you
sign
into
the
learning
platform,
it
will
actually
tell
you
all
of
the
modules
are
already
executed
or
went
true
and
the
modules
with
it,
which
is
recommends
you
to
go
forward
in
the
future.
We
also
have
two
different
podcasts
and
video
blogs,
which
are
available
for
you
to
take
advantage.
B
The
developer,
proc
for
hosted
by
trmfa
can
pause,
shuffling
and
quite
occasionally
eyes
of
patch
and
then
rpmb
weekly
episode,
which
is
happening
in
every
single
week,
hosted
by
yours,
truly
and
world
deck
Mastercards.
Now
I
mentioned
the
sample
calories
a
bit
already
updated
picture
here,
just
to
explain.
What's
available,
we
have
1460
samples
available
from
this
one
centralized
location
provided
by
Microsoft
engineering
people
or
by
the
community.
B
So
we
want
to
make
sure
that
you,
as
a
community
member,
can
easily
find
a
starting
point
for
your
sample
or,
if
you're
looking
into
I
have
this
problem.
Maybe
somebody
has
implemented
something
similar
at
some
point.
Can
I
find
something
relevant
code
to
get
a
a
peak
on
or
get
myself
unblocked?
That's
what
the
sample
Gallery
is
all
about,
and
we
can
say
thousands
and
thousands
of
years
already
in
this
gallery
and
we're
adding
all
the
day
every
single
day,
all
the
new
samples
to
be
available
for
you
to
take
advantage.
A
Awesome,
thank
you.
That's
it!
Well
friends,
many
of
you
are
new
to
these
calls
all
the
time.
So
we
just
want
to
let
you
know
that
there
is
guidance
as
vesa
had
mentioned.
You
may
be
finding
these
samples
and
want
to
use
them
not
quite
sure
how
to
navigate
that
GitHub
landscape,
and
then
you
create
something
amazing
and
you
want
to
share
it
back
and
again.
Github
gets
in
the
way.
Well,
we
are
going
to
take
care
of
that
for
you
with
these
live
Hands-On
sessions.
A
Now
these
are
different
because
we
are
going
to
work
together.
It's
not
just
a
session.
You
come
in,
read
some
docs
and
go
off
on
your
own
to
try
to
figure
it
out
we're
going
to
do
all
of
that
together,
you're,
going
to
submit
your
pull
requests,
submit
samples
understand
the
landscape,
it's
safe
space.
A
That
means
you
can
ask
any
and
all
questions
that
you
want
without
the
worry
of
it
being
recorded,
and
so
you
are
going
to
get
involved
in
the
community
in
so
many
ways
and
we're
here
to
help
you
free
to
ask
any
questions.
Work
alongside
members
of
Microsoft
MVPs.
Other
members
of
the
community
and
work
on
amazing
stuff
together
that
we're
all
passionate
about
so
don't
hesitate
to
sign
up.
We've
got
writing
for
the
web
next
week.
We're
resetting
some
of
our
sessions
in
early
February
as
well.
A
B
B
We
were
home
actually
start
rolling
out
the
targeted
release
then
on
today,
so
we
will
start
seeing
the
Viva
Home
experiences
available
in
some
of
the
experiences
which
is
really
really
cool.
Now
there
was
also
other
blog
posts
available.
So
first
of
all,
there
was
Modern
work,
superheroes,
January
newsletter
and
latest
news
on
that
Community.
B
They
will
say
fast
Friday
when
Jeff
deeper,
the
intrazone
podcast
and
that's
a
really
interesting
story
where
Jeff,
deeper
who's,
the
president
of
of
apps
and
platform,
collaborative
apps
and
platform
in
Microsoft,
my
boss,
as
well
who's
talking
about
his
interesting
fast
Friday
upgrades,
he's
doing
every
single
Friday
for
our
organizations
it's
great
actually
inside
what
Jeff
is
always
recapping.
What
is
happening
with
the
week
and
what
is
the
important
things
for
the
5
000
employees
who
are
reporting
to
him
on
a
week
basis?
B
Now
there
was
also
two
blog
posts
from
the
Vemma
blog
site,
which
was
make
your
goals
on
reality,
with
okrs
and
new
capabilities
in
Viva
goals,
and
that's
a
great
introduction
on
the
Viva
goals,
capabilities
and
then
updates
on
the
Viva
learning
features
and
what's
coming
up
on
that
side.
Now
that's
a
pretty
fast
intro,
but
before
we
go
to
the
actual
starts
of
the
day,
let's
do
a
quick
group
photo
with
the
together
mode
with
those
who
are
willing
to
enable
the
camera
and
let's
wait
for
a
while
team.
B
B
B
Let's
do
some
recording
three
two
one
and
let's
wave
some
hands
thanks
to
everybody
for
joining
once
again
on
this
community
called
thank
you
for
being
part
of
us
and
please
keep
the
feedback
coming
on
the
on
the
chats
and
in
the
community
and
other
channels
as
well.
Thanks
everybody
awesome,
we'll
crap
a
gif
animation
out
or
not,
and
then
let's
actually
go
to
the
actual
stars
of
today.
B
So
we'll
start
flying
with
David's
Resort
and
we're
gonna
see
a
building
a
metaverse
experiences
using
Microsoft
teams
live
share
and
then
we'll
go
to
the
ace
introduction
module
where
building
experiences
there,
as
well
with
entry,
konos
and
yours
truly
but
David
I.
Guess
we'll
jump
on
your
screen
and
continue
from
there
thanks.
C
C
So
if
you've
got
questions,
feedback
feel
free
to
contact
me
also,
but
today,
let's
Deep
dive
in
a
little
bit
into
what
you
can
do
with
the
team
lifestyle
SDK.
So
it's
being
announced
at
build
in
preview
by
Satya
during
the
keynote.
If
it's
in
preview,
it
means
that
you
enabled
it.
You
need
to
enable
the
developer
mode
of
teams
to
be
to
be
able
to
have
access
to
that
and
what
you've
got
in
the
box
is
something
really
interesting
to
build
collaborative
experience
inside
a
meeting
like
this
one.
C
So
I
I'm
going
to
try
to
load
the
experience
at
the
end,
but
it
will
be
a
test
because
it
will
only
work
with
people
having
the
developer
preview
mode,
enabled
in
teams
and
and
I've
never
test
on
some
with
so
much
people
so
before
I
will
do
some
local
tests
with
you,
but
what
you
can
do
is
really
have
access
to
an
infrastructure
being
provided
by
teams,
which
means
it's
going
to
be
secure
and
compliance
by
default.
So
you
don't
have
any
back
end
to
manage
it's
going
to
use
the
fluid
framework.
C
So
if
you
don't
know
the
feed
framework,
it's
kind
of
an
abstraction
on
top
of
web
socket
to
do
real-time
communication
on
the
web,
and
this
is,
for
instance,
something
using
the
loop
component.
So
maybe
you
already
use
some
Loop
component
when
in
real
time
you
can
live
edit
with
other
colleagues.
You
know
a
part
of
of
your
components
somewhere
in
teams
Outlook
or
anywhere,
so
it's
using
socket
for
that.
So
it's
it's
using
this
field
framework
and
add
another
abstraction
layer
dedicated
for
teams.
C
So
it
means
that
you
will
have
access
to
the
context
of
team,
for
instance,
and
it's
very
low
friction
development,
because
I'm
not
a
huge
back-end
developer,
I
I
prefer
spending
my
time
on
on
the
front
end
and
I've
been
writing.
You
know
3D
engine
in
the
past
named
Babylon
GS.
That's
why
I'm
a
huge
lover
of
front-end
development-
and
this
was
a
perfect
fit
for
me
like
the
live
share.
Sdk
was
taking
care
of
the
back
end.
C
The
socket
the
secure
and
compliance
stuff
is
going
to
be
scalable
and
I
just
asked
to
focus
on
the
client
code,
so
it
also
provides
other
type
of
service.
Like
you
can
see
in
the
screenshots,
you
have
like
a
kind
of
a
surface,
a
specific
canvas
to
to
draw
on
it
in
a
collaborative
way
like
you
can
see
on
the
screenshot,
with
a
picture
of
the
various
people
participating
to
that.
So
this
is
what
you've
got
in
that
shell
for
live
share.
Sdk
is
release
DSD
card.
C
So
it's
low
friction
there,
because
you
have
a
SDK
either
for
JavaScript
or
after
script.
It's
very
fast
to
be
integrated.
The
solution
I'm
going
to
demonstrate
you
I,
was
able
to
build
it
in
two
three
days
and
mainly
it
was
because
I
was
discovering
the
platform
reading
the
dock.
Reading
the
samples
trying
to
understand
really
how
it
was
working.
C
The
great
news
is
once
again,
the
back
end
is
managed
by
teams
and
by
default
you
have
access
to
a
free,
Azure
reader
relay
when
you're
running
inside
teams,
and
then
you
have
a
local
browser
testing,
which
is
super
convenient.
We're
going
to
see
that
together,
when
you're
spending
your
time,
testing
on
your
local
machine,
so
train
what
it
does.
But
before
that
I'm
going
to
start
the
experience
to
explain
you
what
I
had
in
mind
using
this
specific
new
SDK
once
again
using
sockets
in
a
way
for
doing
a
real-time
communication.
C
So
you
see
that
it's
going
to
open
the
my
browser.
So
it's
going
to
now
load
the
3D
scene,
which
is
using
Babylon
GS,
which
is
the
and
then
3D
engine
I've
been
co-writing
with
a
friend
of
mine
and
now
is
being
the
official
3D
engine
of
Microsoft
I
can
move
inside
the
the
scene,
as
you
can
see,
and
now.
C
I
can,
for
instance,
load
another
session
to
simulate
another
user
and
I'm
going
to
split
that
in
two,
and
you
see
that
now
I've
I'm
about
to
see
the
update
position
of
my
new
user
I've
got
a
fake
name
and
a
fake
avatar
on
top
of
it
and
I
can
move
where
I
want
inside
the
apartment
and
on
the
other
side,
I
can
follow.
My
friend
and
you
see
I
we're
going
to
be
in
the
teams
meeting.
C
So
we're
going
to
be
able
to
discuss
and
I
will
be
able
to
see,
for
instance,
that
rock
main
31
is
looking
at
the
specific
part
of
the
kitchen.
So
maybe,
if
I'm
like
the
reseller
of
another
part
of
his
apartment,
I
can
ask
to
my
customer.
Are
you
currently
looking
at
this
part
of
the
kitchen?
Do
you
have
specific
question?
Are
you
worried
about
that,
and
you
see
you
can
already
have
this
kind
of
collaboration
experience
together.
C
C
I'm
moving
here
really
working
for
now
inside
my
local
machine.
You
know
it's
a
simulator
environment,
that's
being
provided
by
the
SDK
and,
of
course,
if
I
like
now
to
put
that
inside
teams,
I
need
to
package
that
as
a
team's
app.
So
if
you
don't
know
how
it
works,
the
team's
ad
is
a
web
app,
but
with
a
specific
manifest
in
this
manifest
you're
going
to
this.
C
Before
trying
at
the
end
of
this
session,
the
experience
in
this
current
meeting
I've
deployed
it
on
my
own
tenant.
So
it
should
be
a
visible
there.
So
I'm
going
to
close
this
one,
so
I'm,
currently
using
my
Dev
tenants.
So
it's
like
teams
inside
teams,
like
it's
meta
teams,
which
is
right
in
through
the
topic
of
this
metaverse,
and
you
see
that
I
have
this
new
button.
So
as
a
way
to
install
it
is
to
go
to
manage
app
upload
my
custom
package
and
then
I
have
this
new
metaverse.
C
Cement
Museum,
but
I've
got
other
one
available
and
I've
got
my
Mac
on
my
left.
Like
you
can
see,
this
is
the
the
webcam
of
my
Macintosh
and
another
session.
Also
another
user
connected
there
I'm
going
to
Click
Share
to
stage
and
is
going
to
load
the
experience
of
my
on
my
machine,
but
also
it's
going
to
automatically
load
the
experience
on
all
machine
and
all
the
people
being
connected
and
beside
I've
got
the
same
experience
inside
teams.
You
see
that
Adele
Adele
is
an
adult
too.
C
C
The
concept
is
really:
let's
try
to
visit
together,
an
environment
and,
and
potentially
also,
we
could
add
some
drawing
under
a
bit
of
top
of
it
to
function.
Say
like
oh,
this
DeLorean
need
to
be
fixed,
I
see
a
specific
issue
there.
You
can
really
come
on
together.
What's
what's
currently
going
on,
so
let's
go
into
the
source
code
now
to
understand
how
it
works.
C
So
I
took
one
of
the
sample
of
the
lifeshare
SDK.
You
got
great
many
different
samples.
One
of
it
is
named
dice
hauler,
which
is
a
very
simple
sample
that
just
show
you
how
to
update
States
between
the
various
connected
user.
So
I
took
this
one
as
a
starting
base
and
the
way
it
works
is
you
have
to
obviously
reference
the
specific
SDK
coming
from
the
live
SDK.
C
You
have
this
specific
namespace
that
is
available
to
have
the
local
testing,
like
we've,
been
able
to
do
at
the
beginning
of
the
demonstration
and
then
other
type
of
structure
that
you
need
to
read
the
documentation
to
better
understand
how
it
works.
Obviously,
I'm
building
an
app
for
a
teams
meeting
so
I'm
using
also
the
team,
GS,
GS,
SDK
and
then
I'm
going
to
define
the
data
structure.
C
So
really
some
cut
taken
from
the
the
sample
I'm
going
to
get
access
to
the
search
parameter
to
find
if
there
is
a
scene,
so
is
it
the
museum?
Is
it
the
apartment
to
prepare
the
type
of
content?
I
would
like
to
share
then
I'm
going
to
check
if
I'm
currently
running
inside
teams,
if
I'm
not
running
inside
team,
it
means
that
I'm
running
inside
my
local
simulator
and
then
I'm
going
to
prepare
some
fake
data
to
simulate
fake
user.
C
In
this
case,
I'm
going
to
initialize
the
teams
app
context,
I
will
have
access
to
the
contacts
so
inside
the
context
I
will
have,
for
instance,
access
to
the
nickname,
the
email
address
of
the
user.
That
could
then
be
convenient
to
do
a
call
to
the
graph
to
have
access,
for
instance,
to
the
profile
picture.
So
I
haven't
done
that
yet
in
the
sample,
because
I
was
lazy,
but
it
would
be
that
easy
to
set
up
SSO
and
do
a
graph
call
to
retrieve
like
the
profile
picture.
C
Thanks
to
that
and
if
we
are
not
in
teams.
So
it
means
that
we
are
currently
loading
the
experience
locally
on
your
machine
I'm,
creating
a
spec
context
and
a
fake
user.
Just
for
the
testing.
You
know,
I
have
those
weird
name
at
the
beginning.
So
it's
really.
This
part,
like
other
I,
am
in
production
in
a
way
or
on
my
local
machine
same
here,
I'm
using
one
of
the
functions
that
was
provided
by
by
the
poker
sample,
the
Azure
poker
sample
to
create
random
names.
C
So
I
just
took
this
JavaScript
that
is
going
to
Generate
random
number
on
their
name
and
a
render
picture
in
my
case
so
and
if,
if
I'm
got
a
real
user
like
I've
just
shown
you
before,
I
will
have
access
directly
to
the
user
principle
name
now.
The
next
part
you
see
that
I
was
able
to
have
either
the
term
content
shared
in
my
main
stage,
so
it's
name
stage
or
I
have
the
the
sidebar
on
the
right.
C
That's
the
name
content
and
if
the
first
time
you
also
no
it's
confined
and
the
first
time
you
can
run
it.
You
are
also
another
page
you
can
customize.
In
my
case,
I
only
show
shown
you
the
stage
page,
but
you
will
be
able
to
test
later
on
because
I'm
going
to
share
the
sample
the
other
screen,
if
you
like
to
and
then
the
join
container,
is
really
the
magic
being
done
by
the
live
share.
C
So
it's
going
to
be
transparent
and
then
once
it's
being
done,
we
are
creating
our
local
client
and
we're
going
to
try
to
join
species
by
specific,
providing
space.
Some
specific
container
schema
in
my
case.
It's
this
life's
presence,
object,
I,
hope,
you're
still
there.
Now
that
I've
done
that
it's
very
easy
to
manage
the
updates.
So
the
updates,
obviously
you
have
a
lot
of
3D
code,
so
I'm
creating
the
Avatar
body,
which
was
you
know
the
my
cone
and
my
Cube
on
top
of
it.
So
nothing
very
interesting
the
label.
C
On
top
of
my
avatar
and
the
main
code,
is
there
update
either
position
and
rotation,
so
you've
seen
that
I
was
able
to
rotate
the
cube
to
see
where
I
was
looking
at
so
the
way
I'm
doing
that
is
I
will
be
called
by
a
specific
event
that
is
there.
My
VCS
object
is
coming
from
the
live
share,
SDK
and
it's
going
to
say
like
when
you're
going
to
receive
a
new
event
like
something
has
changed.
First
I'm
going
to
check
that
I'm,
not
the
local.
C
So
you
see
outside
of
the
Babylon
GS
code
and
3D
code,
I
only
needed
to
use
the
presence
on
object
and
also
obviously
I
need
to
initialize
this
object
at
the
beginning
and
then
the
live
share.
Sdk
really
is
going
to
manage
for
me
the
various
update.
So
let
me
summarize,
I
had
to
create
The
Joint
container
with
a
specific
schema.
Then
I
have
access
to
an
object
name
of
Life
presence
and
on
these
objects.
What
I
just
need
to
do
is
to
initialize
it.
It
will
be.
C
My
local
user
and
I
will
have
an
event
saying
like
Okay.
Something
has
changed
like
a
new
user
chain
or
a
user
decided
to
to
leave
the
session.
I
have
an
event
and
then
I
need
to
do
my
update
Logics
and
then
it's
going
to
provide
me
the
data
that
has
does
that
change
between
all
session
and
the
way
I'm
going
to
update
my
position
when
I'm
moving
my
camera.
C
It's
over
there,
this
specific
Babylon
GS
function.
This
time
is
being
sent
every
time.
We've
moved
our
position
or
we've
done
a
rotation
change.
So
I
know
that
if
I
move
inside
the
scene,
I
need
to
say
to
the
live,
share:
SDK,
okay,
something
I've
just
changed
my
my
position
but
I'm
using
the
update
presence
in
this
case
of
the
SDK
and
I'm
going
to
say,
like
I'm
still
online.
But
this
is
my
new
position.
C
My
new
rotation-
and
this
is
my
the
picture
I
would
like
to
use
to
display
it
in
the
other
machine,
3D,
rendering
so
pretty
simple
code.
You
will
be
able
to
have
access
to
it
on
my
repo
before
trying
to
do
that,
live
with
you,
maybe
we'll
be
a
lucky.
You
need
to
start
with.
If
you
need
to
start
with
live
share,
you
need
to
update
your
manifest.
C
It
shouldn't
crash,
but
you
see
that
I'm
going
to
add
the
the
application
in
these
teams.
So
you
see
normally,
you
should
see
a
new
icon
being
available
there
and
if
some
of
you
got
the
teams
developer
preview
enabled
you
should
be
able
to
see
something
being
shared
on
your
on
your
screen.
So
first
the
black
screen
and
then
you
should
see
the
Babylon
GS
logo.
So
if
you
can
share
in
the
chat
how
many
people
have
something
loading?
C
Oh
I
see
a
couple
of
people.
Loading
I
never
tried
on
on
with
so
many
people.
So
the
way
to
move
inside
is
with
the
mouse
and
the
arrow
keys.
So
I
see
a
bunch
of
people
connecting
and
now
I
can
see
your
a
dead
position
and
it
stopped
okay.
So
you
we've
been
able
to
to
show
a
bit
of
it
for
a
couple
of
seconds,
but
it
was
what
I
wanted
to
show
you.
It
was
just
a.
C
It
was
just
a
test
and
I
think
we
managed
to
to
see
it
for
a
couple
of
seconds.
So
thanks
a
lot
you
will
have
access
to
the
sample
feel
free
to
give
feedback.
The
team
is
interesting
into
testing
more
the
the
app
I'm
going
to
remove
the
app
to
be
sure
that
I'm
not
breaking
the
rest
of
the
of
the
session.
B
Excellent
I
did
scrap
some
screenshots
from
my
screen.
It
was
working
for
me,
so
we
can
actually
put
it
in
the
video
recording
as
well.
So
we
can
see
me.
Mountainous
is
working
around
on
the
on
the
room,
so
we
can
now
all
see
this
is
actually
really
cool.
So
not
sure
who
is
me
Montanez,
but
yeah
excellent.
Thank
you.
David
really,
really
cool
and
really
Advanced
scenario.
Awesome,
awesome,
stuff,
so
absolutely
brilliant
cool
and
let's
go
a
bit.
B
Let's
say,
as
let's
say,
a
more
standard
mode,
so
I
want
to
do
a
few
slides
on
on
introducing
a
few
things
and
and
just
the
concept
and-
and
this
is
a
recap
from
last
week,
but
AC
is
going
to
then
do
a
live
demo
on
creating
an
spfx
image
card
ace
and
displaying
an
image
Carousel.
But
as
10
days
on
this
call
might
be
wondering
what
is
an
spfx
and
what
is
an
ace.
Let's
do
a
quick
recap
on
those
things.
B
So
Ace
is
an
extensibility
model
for
Microsoft,
Viva
connection
and
Microsoft
Viva
home
now.
Aces
might
actually
be
supported
in
the
future
in
other
Viva
modules
as
well,
but
I
cannot
provide
any
additional
details
on
that
or
any
timeline.
So
there's
a
ongoing
possibility
of
that.
Ace
means
adaptive
card
extension.
It
is
a
SharePoint
framework
component
and
SharePoint
framework
behind
us
to
see
in
this
basically
responsible
of
making
that
adaptive
card
Dynamic.
B
So
SharePoint
framework
is
the
orchestrator
hitting
the
API
getting
the
API
and
the
information
from
apis
and
then
bypassing
that
information
to
Adaptive
card
and,
and
that
makes
it
adaptive
card
extension,
so
we're
using
adaptive
cards
we're
using
graphic
using
rest
apis.
We
do
have
a
new
learn.
Module
I've
made
a
little
bit
of
English
is
hard.
We
do
have
a
new
return
module
available
at
akms
Viva
as
learn,
and
that's
basically
one
hour
and
one
hour
and
56
minutes
if
I
remember
correctly
of
52
on
learning
how
to
get
started
on
creating
this.
B
What's
cool
about
this
one
also
is
that
we
are
rolling
out
new
features,
as
mentioned
first
of
all,
SharePoint
framework.
You
probably
might
heard
about
that
one
already
it's
been
available
for
a
while.
You
can
use
it
to
build
extensibility
for
numerous
different
capabilities.
Microsoft
365
and
the
applications
are
automatically
hosted,
so
it
makes
it
super
easy
for
you
to
actually
Implement
extensibility,
which
are
then
hitting
the
apis
in,
for
example,
Microsoft,
craft
or
potentially
somewhere
else.
B
Now,
starting
today,
we
are
rolling
out
the
mics
of
Viva
Home
experience,
which
is
the
one
which
you
can
see
on
the
left
side
and
that's
starting
to
roll
out
today
to
Target
at
release
tenants
so
not
in
the
normal
production
tenants,
but
to
those
tenants
where
the
targeted
release
switch
has
been
enabled
in
the
organizational
level.
And
that
means
that
the
Viva
connection
experience
is
a
bit
kind
of
a
getting
adjusted
and
if
you
want
there
will
be
settings
and
configuration
options
of
how
to
control
this
experience.
B
The
right
side
is
more
the
traditional
Viva
connection,
experience,
which
also
had
to
exactly
the
same
mobile
experience.
But
the
desktop
experience
looks
bits
different,
but
you
can
see
those
ACS
as
in
the
cards
in
the
background,
and
you
can
use
those
cards
also
inside
of
a
SharePoint.
So
you
don't
have
to
be
inside
of
a
teams
or
inside
of
your
connection.
Those
cards
can
be
used
inside
of
a
SharePoint
quarters
as
well,
but
to
continue
our
series
on
how
do
we
build
those
Aces
Aces
AC
is
gonna
hold
AC
is
an
AC.
D
D
D
My
name
is
Andrew
Connell
I'm,
a
Microsoft
MVP
long
time
in
VP,
I,
guess
around
office
development,
where
I
focus
just
on
primarily
SharePoint
framework,
but
any
kind
of
like
Microsoft
365
development,
and
you
can
learn
more
about
me
and
the
stuff
that
I
do
from
those
links
that
you
see
there
on
the
slide.
But
what
we
want
to
do
is
I
want
to
talk
a
little
bit
more
about
this
module.
D
So
I
know
Vesta
just
mentioned
a
lot
of
stuff
about
it,
but
this
module
is
targeted
for
people
who
have
no
experience
working
with
adaptive
card
extensions,
so
Aces,
and
if
you
so,
if
you
want
to
learn
what
these
are
kind
of,
how
they
work.
My
target
audience
for
this
was
designed
for
someone
who
has
no
experience
with
adaptive
card
extensions.
I
do
have
some
expectation
that
you
know
what
the
SharePoint
framework
is
and
you've
built
a
web
part
of
the
SharePoint
framework,
which
you
don't
have
to
be
an
expert
at
that.
D
The
modules
consisted
of
like
three
sections.
Each
section
contains
about
a
10
to
15,
minute
lecture.
That
includes
slides,
but
also
has
just
it's
all
text
based
as
well,
and
then
it
also
has
a
Hands-On
lab
that
reinforces
what
you
just
learned.
It's
available
as
a
screen,
both
as
a
a
Microsoft
learning
module
all
text
based
and
then
you've
also
got
access
to
a
screencast
of
the
module
of
the
entire
module
as
well,
where
you
can
jump
between
the
different
sections
and
see
the
Demos
in
the
videos.
D
D
Instead,
I've
already
got
a
sample,
that's
up
and
running,
and
it's
working,
but
you
can
do
the
exact
same
one
I'm
gonna
do
it's
exercise
two
or
the
second
exercise
in
the
module?
So
let's
get
to
the
business
time,
there's
our
demo
pointy
and
down
pointy
in
business
side
down
all
right.
So
let
me
show
you
the
one:
that's
actually
working.
Let
me
focus
on
that
first
and
then
we'll
look
at
the
color
how
it's
implemented.
So
the
scenario
here
I've
already
got
it
running.
D
D
This
is
showing
me
a
default
image
of
Mars,
because
I
don't
have
anything
selected
yet
I,
don't
have
the
specific
image
selected
yet
or
any
detail
for
it.
So
what
this
is
is
going
to
show
us
an
image
on
the
right
hand,
side
and
then,
on
the
left
hand,
side.
It
gives
me
a
little
bit
of
information,
just
selecting
a
Rover
and
a
soul,
which
is
the
equivalent
of
a
day
that
we
have
on
Earth.
D
The
soul
is
a
is
a
day
on
Mars,
which
is
a
little
bit
longer
than
what
we
have
on
Earth,
and
then
this
little
button
here
is
going
to
allow
us
to
toggle,
but
through
the
different
images,
so
either
going
forward
through
the
images
we
return
or
going
back.
So
what
I'm
going
to
do
is
I
need
to
be
able
to
get
this
up
and
running
and
get
it
working.
D
B
D
D
All
of
these
different
images,
so
kind
of
just
jumping
through
and
looking
at
a
couple
different
pictures
and
the
cool
thing
is-
is
that
when
what
I've
done
also
done
is
that
when
I
select
anywhere
on
the
card,
it's
going
to
open
up
a
quick
view
of
the
current
image.
Give
me
the
ID
of
the
image
and
then
I'm
also
using
a
little
fact
table
to
write
some
additional
information
about
the
image
and
to
show
you
it's
Dynamic
I'll
pick
a
different
one,
there's
a
different
one:
that's
a
widescreen
one,
here's
another
one!
D
A
lot
more
rocks,
I,
don't
know
if
anybody
else
gets
excited
about
this
stuff,
but
it's
pretty
cool
there.
You
go
shadow
of
the
there
we
go.
We
got
a
wheel
right
there.
These
rovers
are
huge
if
you've
never
seen.
One
of
these
things
they're
awesome,
while
I'm
stopping
the
demo
and
switching
back
over
to
the
code.
So
we
can
look
at
that.
D
I
can
tell
you
I
got
to
go
to
the
jet
propulsion
lab
out
in
California
once
and
get
a
private
tour
and
got
to
stand
next
to
a
replica
curiosity
and
it's
it's
big.
Those
wheels
are
like
they're
they're,
not
they're,
bigger
they're,
bigger
than
what
I
can
show
on
the
screen
anyway.
So
let's
kill
the
demo
here.
Let's
go
over
to
the
code,
all
right!
So,
let's
see
how
do
we
actually
implement
this
stuff?
This
is
pretty
cool.
It's
pretty
simple!
D
Actually,
so
the
thing
with
Aces
that
I
like
to
look
at
them
is
that
when
a
lot
of
people
look
at
Aces
that
a
lot
of
people
think
that
these
things
are
something
special
and
unique
and
they're
not
they're,
really
just
I
like
to
think
of
them
as
just
a
web
part
where
SharePoint
framework
extensions
feel
very
different
from
web.
Parts
aces
are
basically
just
web
Parts.
All
right,
that's
I
think
it's
it's
a
simpler
way
to
understand
that.
So
if
we
look
at
the
root
class
for
an
ace,
let's
get
rid
of
that.
D
Let's
take
a
look
at
what
we
have
here.
So
in
this
case
it's
very
similar
to
a
react-based
web
part,
and
so
what
you're
going
to
have
is
you're
going
to
have
a
property
public
properties
for
your
for
your
component
and
you're
also
going
to
have
a
state
whenever
the
state
changes
it
triggers
the
entire
card
to
to
re-render,
okay,
you're,
not
going
to
see
a
page
refresh
or
Reflow,
or
anything
like
that,
it's
just
going
to
re-render
it
and
put
it
back
on
the
screen.
The
properties.
D
These
are
the
public
properties
that
you
can
specify
on
your
adaptive
cards,
Works
exact
same
way
as
a
web
part.
These
are
the
things
that
are
also
persisted.
So
this
is
how
I'm,
storing
like
the
the
current
day,
that's
selected,
the
Rover
that
we've
selected
and
the
API
key
as
well,
and
then
the
state
for
my
component
for
my
Ace
is
going
to
contain
a
number
which
is
the
index
of
the
array
of
the
image
in
the
array
that
we're
current.
D
We
currently
have
selected
and
we're
currently
looking
at
and
then
the
Rover
photos
is
just
going
to
be
an
array
of
all
the
photos
that
I
get
back
from
the
extension
I'm
not
going
to
go
through
the
details
of
how
I
get
all
the
data
and
all
that
stuff
and
talk
to
the
nest
to
the
NASA
open,
API
service.
That's
in
this
file
right
here
called
nasaservice.ts
and
that's
just
using
a
standard
request
to
an
open
rest
endpoint
when
you're
building
an
Adaptive
card,
Let's
Go
full
screen
here.
D
D
D
D
Is
it
saying
this
is
the
card
that
you
should
render
on
the
screen
when
you're
putting
it
on
the
page
and
that's
going
to
be
defined
here
in
this
card
view
now
the
reason
it
figured
that
out
is
because,
when
I
registered
it
previously
is
I
gave
it
an
ID
which
was
defined
up
here
in
this
constantinal
on
25
and
then
it
said
just
go,
create
an
instance
of
that
card
view
where's.
That
card
view.
Well,
that's
over
here
in
a
file
called
card
View.
D
So
this
file
contains
a
couple
different
accessor
methods
that
we
can
that
we
can
do
some
stuff
with
all
right.
So,
first
of
all,
when
someone
selects
one
of
the
buttons
clicks
one
of
the
buttons
on
my
card,
that's
the
submit
action,
and
so
I
want
to
be
able
to
do
something,
and
you
saw
that
when
I
was
clicking
the
buttons
going
back
and
forth
I
was
cycling
through
the
array
of
all
the
photos
that
I
got
back
from
Mars,
and
so
in
this
case
here
I'm
checking
to
see.
Was
it
a
submit
action?
D
No,
it
wasn't
then
get
out
of
here.
Otherwise,
go
grab
the
current
index
that
we're
on
and
simply
go
change.
The
current
index
on
the
state
value
equal
to
the
current
index
and
then
plus
and
you'll,
see
how
I'm,
just
using
a
a
positive,
1
or
negative
one
is
the
ID
to
indicate
if
I
want
to
go
forward
or
backward
I.
Don't
have
to
do
a
check
to
see
if
I'm
you
know
doing
clicking
a
next
button
or
previous
button.
D
D
So
how
do
I
get
the
data
applied
to
our
card
view?
The
way
I
do
that
is
I'm.
Checking
to
see
do
I
have
a
Rover
and
a
day
selected
if
I
do
or
if
I
do
not.
In
this
case
here
I've
got
the
exclamation
point
in
front
of
them.
If
either
one
of
those
are
empty,
then
I'm
going
to
return
back
some
default
data
using
the
image
of
Mars
that
we
have
from
Wikipedia
as
a
placeholder.
D
You
saw
that
when
I
first
started
the
demo
with
some
text
here,
this
is
pretty
cool
too,
because
under
the
older
versions
of
an
ace,
we
didn't
have
the
ability
to
set
the
alt
text
for
screen
readers.
Now
we
do
so
I'm
using
that
here
now.
The
next
thing
I'm
doing
here
is
under
the
else
statement.
I
clearly
have
a
Rover
and
a
Mars
Rover
selected,
so
I'm
going
to
change
the
Rover
name
to
just
capitalizing
the
first
letter
of
the
Rover's
name,
so
capital
c
for
curiosity
and
then
putting
the
rest
of
it
there.
D
The
image
we're
going
to
use
is
going
to
be
look
at
the
image
from
our
Rover
photos
from
our
state
property
and
grabbing
it
grabbing
the
one
out
for
the
index,
that's
currently
selected
and
then
I'm
going
to
return
back
an
object
of
four
properties.
My
primary
text,
my
image,
URL
my
image,
alt
text
and
the
title.
Those
are
four
properties
that
are
expected
on
a
card
view
for
an
image
card.
D
Finally,
I'm
also
going
to
define
the
buttons
here,
and
all
this
logic
does,
as
you
see,
is
I'm
just
adding
in
either
a
button
if
I'm
at
the,
if
I
only
want
to
return
one
button
back
like
if
I'm
at
the
very
beginning
of
my
array
or
the
beginning
of
my
collection
or
the
end
of
the
collection,
I've
got
all
this
stuff.
All
these
conditions
kind
of
defined.
D
D
Okay!
So
now,
let's
go
back
and
let's
take
a
look
at
the
quick
view.
So
what
happens
when
I
click
the
actual
quick
view?
Let's
see
what
happens
when
I
click
on
the
card
view
that
launches
the
quick
view
to
see
the
details
of
the
image
that
I
selected
all
right
got
it
out.
So,
first
of
all,
Json
there
we
go.
So
what
is
that?
That's
our
adaptive
card.
D
This
is
part
of
adaptive
cards
I'm
using
its
native
templating
capability
that
we
have
to
and
using
their
syntax,
where
I'm
doing
the
very
it's
a
very
similar
to
how
like
template,
literals
work
with
JavaScript
and
typescript,
where
I'm
using
a
dollar
sign,
surrounded
by
the
mustache
brackets
and
then
putting
the
name
of
the
property.
That
of
the
object,
that's
being
bound
to
my
card.
So
remember
in
my
data
method,
on
my
in
my
in
either
my
quick
view
or
my
card
view,
I'm
returning
back
an
object,
that's
got.
D
It's
got
a
bunch
of
properties
assigned
to
it
in
this
case
here,
I
have
a
property
named
image
source
same
thing
here:
I'm
writing
out
the
the
the
title
or
the
byline.
That
I
want
coming
right
underneath
the
the
image
and
then
I've
got
this
thing
or
then
there's
a
text
block
some
details
about
the
actual
photo
and
then
I'm
posting
out
a
fact
set,
which
is
a
a
rendering
element
that
we
have
in
adaptive
cards
and
I'm.
Just
writing
out
all
that
stuff.
D
So
that's
the
template
that
we're
going
to
use
if
I
come
over
and
look
at
the
actual,
quick
view
class
when
this
gets
activated.
This
is
what's
going
to
tell
the
rendering
engine
where's
the
Json
for
the
Adaptive
card
that
defines
the
rendering
for
this
card
and
that's
the
Json
we
were
just
looking
at
and
then
what
photo
should
we
show?
Well,
let's
go
grab
the
photo
out
of
our
state
array
to
go,
render
that
out.
So
that's
pretty
cool,
how
the
way
that
that
works.
D
It's
pretty
easy
to
go
through
and
to
pop
that
data
out.
One
of
the
things
too
that
since
I've
got
another
minute
or
so
here
that
I
want
to
just
I,
want
to
show
you
one
thing:
that's
kind
of
nice
about
this
and
it's
different
than
what
we
would
see
with
web
Parts
with
respect
to
the
SharePoint
framework.
But
it's
it's
different,
but
it's
you
would
argue,
it'd
be
nice.
If
we
had
this
in
in
SharePoint
framework,
web
Parts
Aces
were
built
from
the
ground
up
to
be
in
a
mobile
first
experience.
D
So
the
idea
is
that
you
know
performance
is
fast.
You
have
a
lot
of
these
cards
like
on
the
screen.
So
in
this
case
here
traditionally
we
have
this
get
property,
paying
configuration
in
a
web
part
where
it's
going
to
return
back
the
actual
property
pane,
but
if
you're
familiar
with
web
Parts,
you
know
that
you
usually
Define
it
inside
this
method.
With
adaptive
card
extensions,
it's
a
little
different.
D
What
that's
going
to
end
up
doing
is
that's
going
to
instead
go
render
out
or
go
load
up
our
property
payments
to
find
it
in
a
separate
class
or
a
separate
file.
Now,
why
does
it
do
that?
Because
we
have
this
other
method
here
called
load,
property,
pane
resources,
and
what
this
does
is
it's
using
this
native
capability
we
have
in
webpack
nothing
to
do
with
SharePoint
framework,
nothing
to
do
with
Microsoft.
D
This
is
a
native
webpack
capability,
where,
if
you
comment,
if
you
put
a
comment
right
before
something
that
you're
going
to
load,
then
webpack
will
split
that
out
into
a
separate
bundle
and
we'll
only
go
load
that
JavaScript
bundle
when
it's
when
it
needs
it.
So
it's
not
gonna.
So,
in
other
words,
the
way
that
this
is
set
up
now
is
that
my
adaptive
card
is
never
going
to,
in
my
bundle,
the
user.
D
So
let's
say
that
I'm,
the
let's
say,
I'm
the
editor
of
the
page,
but
all
of
you
are
consumers
of
the
page,
either
on
your
mobile
device
or
on
the
Viva
connections.
App
on
your
desktop,
whenever
you
guys
go
load
the
the
page
where
this
adaptive
card
is
going
to
be
rendered
out,
you,
your
payload,
that
you
download
is
not
going
to
include
anything
about
the
property
paying,
because
you
don't
have
the
ability,
your
users
you're.
D
Not
you
don't
have
the
ability
to
put
the
page
into
edit
mode,
so
there's
no
need
for
you
to
go
through
and
add
to
download
all
that
extra
code
in
our
cases
not
much
code.
So
it's
not
really
that
big
of
a
deal,
but
you
get
the
point.
But
for
me,
when
I
put
the
page
into
edit
mode
and
I
say,
show
me
the
property
pane.
D
That's
when
I'm
going
to
see
this
extra
bundle
get
downloaded
on
my
on
demand,
because
now
I,
my
browser
experience
needs
it
to
be
able
to
get
the
property
paying
to
do
those
edits.
So
that's
I
mean
that's
pretty
cool.
We
get
this
natively
inside
of
adaptive
card
extensions.
It
doesn't
exist
for
web
Parts.
You
can
Implement
something
like
this
yourself.
D
Kent's
horses
have
left
the
barn
so
with
that
being
said,
that's
everything
that
I
want
to
end
up
showing
here
with
this
with
this
demo,
I
have
another
one
that
will
do
next
week
that
build
that
makes
there's
a
much
more
complicated
Ace.
That's
going
to
show
you
how
to
use
the
geolocation
capabilities
that
we
have
in
Viva
connections,
both
showing
location
and
getting
a
location
in
and
picking
and
showing
the
location
from
it
as
well.
D
B
We
should
be,
we
have
two
demos
for
next
week
intentionally,
so
we're
not
going
to
have
a
third
one,
so
that
will
mean
that
will
have
the
20
25
minutes
for
that
one
as
well,
but
excellent.
Thank
you
AC
on
that
one
and
thank
you
David
to
have
to
drop
from
the
call
so
that
we
don't
get
the
first
application
and
that's
what
you
get
for.
B
Testing
is
something
which
we
haven't
verified,
but
just
to
recap
again,
the
recording
of
today's
session
will
be
available
within
24
hours
at
Microsoft,
365
community
Channel
subscribe
to
that
one.
Today
you
cannot
access
the
recording
from
the
chat.
Every
single
call,
I
do
get
requests
of
getting
access
to
that.
Video
I
cannot
give
you
that
access,
because
it
does
not
work
with
external
in
the
teams
chat
with
the
links.
B
What
is
added
there
and
that's
exactly
why
we
use
YouTube
for
getting
the
the
videos
out,
follow
us
on
Twitter
at
Microsoft
BMP,
to
also
know
about
all
of
the
great
updates.
What's
happening
around
all
of
these
areas
and
the
next
Microsoft
365
platform
call
it
happens,
24th
of
January,
which
will
be
actually
quite
SP
effects,
specific
call,
but
then,
on
the
upcoming
weeks,
we'll
have
more
craft
and
teams,
development
and
ACS
development.
B
Series
starts
after
that
next
week,
we'll
have
the
SharePoint
framework
engineering
team
actually
dropping
in
and
telling
what's
going
to
happen
within
the
first
half
of
2023,
around
SharePoint
framework
I'm
doing
some
live
demos
on
potentially
onboard
driven
bot
framework
driven
Viva
cards,
which
is
really
really
cool
as
well,
but
more
on
that
in
our
agenda
in
our
weekly
summary,
as
we
get
stuff
shared
out.
Thank
you
everybody
for
joining.
Thank
you
for
a
active
discussion
in
the
chat.
Please
keep
the
feedback
coming
and
we'll
be
back
within
a
week
thanks.
Everybody
cheers
bye-bye.