►
Description
Viva Connections & SharePoint community call on May 19. Demos: Building Office Locations Viva Connections Adaptive Card Extension with SPF and Using Adaptive Cards Designer control from the PnP control gallery in SPFx solutions. Project releases: PnPjs Client-Side Libraries v3.3.2 GA and CLI for Microsoft 365 v5.3.0 beta. Latest SPFx v1.15 beta to be released very, soon. Features outlined in this session. Learn: Registration open for Power Platform Samples Contributor - May 31, and new Writing for the Web - June. The host of this call is Patrick Rodgers (Microsoft) | @mediocrebowler. Q&A takes place as always in chat throughout the call.
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 bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-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 - http://aka.ms/m365pnp
A
Hello
and
welcome
to
viva
connections
sharepoint
framework
bi-weekly
sync,
it
is
may
19th,
which
seems
impossible
2022.,
I'm
patrick
rogers,
you're
hosting
this
call.
We
got
a
great
agenda
for
you,
as
always
latest
updates
on
the
sharepoint
framework
updates
across
the
patterns
and
practices
program.
New
community
samples,
we'll
talk
about
picture
time
together
mode,
and
we
got
great
demos
from
anup
and
fabio
building
office
locations,
viva
connections,
adaptive
card
extension
with
spfx
and
using
adaptive
cars
designer
control
from
the
pmp
control
gallery
and
spfx
solutions.
A
We've
got
lots
of
opportunities
to
participate
in
the
pnp
program
and
this
call
and
our
other
calls.
First
of
all,
I
would
encourage
everybody
listening
if
you've
got
something
cool
you're
working
on
for
your
customers,
your
company
and
you
are
able
to
not
everything
can
be
demoed
publicly,
but
if
you
are
able
to,
we
would
really
encourage
you
to
reach
out
get
a
demo
spot.
There's
a
link
down
there
in
the
bottom
right
corner
to
reserve
that
spot
might
not
be
like
the
next
call.
A
Sometimes
we're
booked
out
a
little
bit,
but
we
will
get
you
a
session.
So
please
do
reach
out.
Love!
Love
love
to
see
the
community
demos
from
everybody
out
there
and
all
the
great
work
you
are
doing
contributing
on
github,
of
course,
is
always
valuable
across
all
of
the
different
organizations
and
repositories,
and
then
finally,
we
always
appreciate
your
feedback
on
these
calls
and
feedback
on
the
rest
of
the
program.
How
are
we
doing?
Where
can
we
help
with
our
documentation?
Where
else
can
we
help
generally
and
of
course,
positive
feedback?
A
Is
okay
too,
if
you're
really
doing
something
you
like,
you
can
let
us
know,
and
we
could
always
do
maybe
a
little
bit
more
of
that.
Next
up
is
our
giant
pedro
link,
so
we've
got
developer
videos.
Those
are
going
to
be
topic,
focused
videos,
so
learning
about
different
things,
authentication,
aces,
sharepoint,
framework,
microsoft
graph.
A
Then
we've
got
our
community
videos
which
are
going
to
be
the
recordings
of
these
calls.
So
this
call
our
other
thursday
call.
The
tuesday
calls
all
of
our
sort
of
community
calls
and
and
those
sorts
of
things
as
well.
We've
got
a
bunch
of
open
source
repositories,
different
organizations
on
github
there,
pnp
office,
dev,
microsoft,
graph
and
sharepoint,
and
then
tons
and
tons
of
great
samples.
These
keep
growing,
which
is
really
fantastic
to
see
so
ak
dot.
A
Finally,
that's
all
a
lot
to
remember.
We've
now
got
a
new,
updated
link
here
for
ak
dot.
Ms
slash
m365
community,
so
an
updated
link
for
all
of
these
resources.
I
know
we've
been
saying
there
was
one
link
to
rule
them
all,
but
we've
decided
to
change
that
a
little
bit
so
ak
dot.
Ms
m365
slash
community,
so
a
little
bit
of
change
there,
but
takes
you
to
all
the
same
great
resources
so
encourage
you
to
check
that
out.
Microsoft,
365,
developer,
community
calls.
A
These
are
a
bunch
of
different
calls
across
a
lot
of
different
topic
areas
and
certainly
encourage
you
to
check
out
any
and
all
of
these,
as
you
have
time,
but
of
course
they
are
all
recorded,
so
you
can
catch
up
later.
I
know
these
don't
always
fit
into
everyone's
schedule.
All
the
time
totally
understandable
you
can
always
get
the
invites
there
at
the
link
on
the
bottom
ak
dot.
Ms
slash
m365
slash
calls,
but
then
all
of
these
are
recorded.
You
can
always
catch
up
later,
so
don't
feel
bad.
A
If
you
can't
make
everyone,
none
of
us
can
next
up,
we've
got
our
tuesday
call
the
next
one
is
going
to
be
24th
of.
May
that's
the
microsoft
365
platform
call.
This
is
a
call
hosted
by
microsoft,
with
microsoft,
presenters
on
various
topics
about
what's
new
across
the
service
and
next
week
we've
got
carina
and
vasa
talking
about
the
microsoft
viva
isp
benefits
program
and
sacha.
We're
gonna
actually
do
this.
A
The
second
half
of
the
hour
will
be
a
watch
party
for
the
build
2022
keynote
which
will
be
kicking
off
well
next,
tuesday.
So
look
forward
to
seeing
that
look
forward
to
seeing
all
of
you
next
week
we'll
talk
about
that
a
little
bit
more,
I'm
sure
later,
and
then
we
also
have
a
collaborative
app
session
scheduling
now
available.
So
you
can
check
these
out.
These
are
breakout
sessions
on
demand.
These
are
all
part
of
microsoft,
build
so
ak
dot.
Ms
m365
slash
build
22..
A
This
is
a
great
way
to
you,
know,
sort
of
find
some
topic
area
stuff.
You
want
to
hear
more
about
stuff.
You
want
to
learn
more
about
sign
up,
for
those
certainly
encourage
you
to
check
all
of
those
out
and
then
I
believe
I
hope
I'm
not
saying
this
wrong.
I
believe
most
of
that
will
be
recorded
and
available
later,
as
well
again,
if
you're
not
able
to
attend
for
for
time
zone
reasons
or
schedule
reasons,
no
worries
and
I'll
hand
things
over
to
david
for
sharing
his
caring.
B
All
right,
thank
you,
patrick
well,
friends,
as
you
may
or
may
not
know,
sharing
is
caring
is
a
program
here
that
is
going
to
provide
you
hands-on
guidance
in
a
number
of
areas
that
you
may
be
a
little
unfamiliar
with
areas
that
might
be
new
to
you.
These
are
safe
space,
hands-on,
live
and
in
living
color
sessions
where
we
are
going
to
collaborate
together.
That
means
that
we
don't
record
them
so
you're
free
to
ask
any
and
all
questions
that
you
may
like.
I
know
when
I
first
started.
B
It
was
very
scary
and
sometimes
I'd
ask
questions.
Thinking
should
I
already
know
this.
It's
always
okay,
to
ask
questions,
but
when
it's
recorded
can
be
a
little
scary,
so
we
invite
you
to
join
power
platform.
Samples
contributor,
scheduled
community
docs
is
scheduled.
Writing
for
the
web
is
a
brand
new
session
with
emily,
mancini
and
hugo
bernier.
That's
going
to
be
really
cool
in
showing
how
you
can
be
more
effective
in
writing
for
the
web,
which
is
useful
for
all
of
us
as
we
are
building
our
digital
assets,
so
please
don't
hesitate
to
join.
B
We
would
love
to
have
you
collaborate
with
us
now,
once
you
have
collaborated
and
you've
contributed
to
a
number
of
those
samples
that
we've
talked
about
or
you've
written
documentation.
We
want
to
recognize
you
for
all
the
amazing
work
you're
doing
so.
The
recognition
program
is
here
to
provide
that
celebration
and
official
recognition
for
you.
It
is
powered
by
credly
the
same
credly
that
handles
the
microsoft
certification
badges,
and
that
means
that
they
can
sit
right
alongside
those
certification,
badges
and
you
can
associate
them
to
linkedin.
B
You
can
associate
them
to
your
blog
to
your
website,
share
them
on
twitter.
I
we
know
that
you're
doing
amazing
work
and
we
want
to
recognize
it.
So
it
costs
nothing.
We
cover
all
the
costs
of
credly.
We
do
need
you
to
opt
in
ak
dot.
Ms
forward
slash,
m365
pnp
dash
recognition,
we've
been
seeing
a
bunch
of
badges
to
share
in
the
last
few
days
and
even
more
are
coming
so
feel
free
to
opt
in
there.
Everybody
and
thank
you
for
all
the
work
you're
doing
patrick
back
to
you.
A
C
Excellent,
let's
be
quick
on
this
one,
just
to
show
you
the
rolling
28
days
usage
worldwide
since
july
2019,
we
are
seeing
a
nice
uptake
on
the
on
the
things
just
call
out
few
things.
There
was
a
small
data
hiccup
on
autumn
this
last
year
and
then
we
can
also
see
that
we
are
back
in
line
on
the
growth.
So
after
the
slowness
in
april,
which
is
a
seasonal
drop
which
is
actually
interesting,
you
can
see
the
same
job
happening
every
single
year
around
the
april
time
frame.
C
But
but
I
guess
it's
the
spring
breaks
and
the
eastern,
and
all
of
that
which
is
always
impacting
the
usage.
Now,
let's
go
to
the
following
slide,
which
is
the
latest
update
on
what's
happening,
so
the
1.15
and
the
next
beta
now
are
just
testing
the
1.15
next
beta
verifying
that
everything
is
working
and
and
we're
about
to
release
that
so
within
by
by
end
of
june.
So
roughly
in
mid-june,
we
will
well
actually
earlier
than
that
we'll
have
a
release
candidate
out
and
then
we're
going
to
ga
the
1.15
right
after
that.
C
So
things
are
looking
really
good
for
the
new
customizers,
which
are
targeting
for
edit
lists
and
library
forms
and
a
few
other
things
as
well.
There's
going
to
be
a
lot
of
additional
capabilities,
also
queued
for
1.16
and
1.17,
so
1.16
version
is
coming
out
the
preview
version
of
that
in
july,
so
a
few
weeks
after
the
1.15
release,
which
is
already
having
new
things
in
the
pipeline,
one
thing
to
call
out.
D
Here
well,
thank
you.
Everyone
version
3.3
was
released,
may
17th.
Unfortunately,
we
had
some
some
pretty
issue
fun
issues,
so
we
had
a
path
issue
with
a
new
post
install
script
that
we
added
that
will
essentially
put
as
as
you're
installing
the
pnp
js
and
the
pnp
graph
libraries.
It
would
notify
you
if
you
are
using
the
sharepoint
framework
and
need
to
do
some
additional,
getting
started
steps.
D
Well,
we
had
a
path
issue
resolved
that
in
3.3.1
and
then
found
out
the
very
next
day
that
the
macos
operating
system
didn't
like
one
of
the
commands
in
the
post
install
script.
So
we
had
to
do
another
release
3.3.2
that
fixed
that
and
that
happened
yesterday.
So
all
of
that
everything
should
be
running
nicely.
Now
we
did
a
bunch
of
general
documentation,
updates
some
samples
and
and
various
updates.
D
We
did
add
a
couple
of
new
functions:
a
get
locked
by
user
method
for
the
files
area
is
added
and
we
added
the
ability
to
create
a
chat
message
to
a
team
channel,
and
then
there
was
a
bunch
of
other
reported
issues,
etc.
If
you
go
and
check
out
the
changelog,
you
can
get
all
of
those
details.
Please
remember
that
we
are
on
twitter
m365pmpjs
and
also
that
we
do
nightly
builds
so
anytime.
We
merge
any
pr's.
D
Those
updates
will
be
in
the
nightly
release,
so
you
can
test
those
out
ahead
of
a
formal
release
and
certainly
if
you
have
any
issues,
go
to
our
issues
list
and
submit
any
questions
and
or
other
things
you
might
find
to
that
list.
That
is
all
we
have
for
today.
Patrick
glad
that
I
could
make
it
I'm
glad
you
can
make
it
too
julie.
A
So,
sweet
thanks
so
much
for
that
update
and
now
we'll
move
on
to
cli
for
microsoft,
365.,
great
updates
from
adam
and
martin,
our
new
maintainers
of
the
cli,
I
believe,
have
just
been
added
to
the
team
so
excited
to
see
them
join
in.
We
got
a
new
beta
version,
5.3
out
with
managing
lists
and
list
item
permissions,
retrieving
a
list
of
security
alert
for
your
tenant,
easily
opening
the
management
page
for
an
azure
ad
app
extending
support
for
planner.
You
can
always
install
that
5.3
beta
with
the
commands
you
see
there.
A
Ms
cli
cli-m365
to
get
all
the
updates
and
all
of
the
information
about
using
the
cli
so
certainly
check
that
out
and
then
we've
got
updates
on
the
reusable
components.
We've
got
two
sets
of
reusable
controls.
The
first
is
the
react
controls
three
eight
zeros
has
some
updates
there
for
the
people,
picker
adaptive
card
host
and
support
for
section
backgrounds,
as
well
as
some
various
fixes
and
those
react
controls
again
are
the
ones
designed
to
be
used
in
the
body
of
your
web
parts
or
application
customizers,
and
then
we
have
the
react.
A
Property
controls.
That's
at
370
updates
around
the
property
field
list,
picker
the
property
field,
color
picker
and
the
property
controls
again
are
those
designed
to
be
used
in
the
edit
pane
of
your
sharepoint
framework
web
parts
so
really
exciting
to
see
those
continue
to
evolve
and
grow
and
want
to
thank
everybody
there
in
the
list
for
helping
out
continuing
to
enhance
and
improve
and
build
new
controls,
fantastic
stuff
to
see
there
more
information.
A
The
two
links
down
there
at
the
bottom:
sp
dash
fx
dash
property
dash
controls
and
sp
dash,
fx
controls
dash
react.
You
can
always
follow.
M365
pnp
controls
on
twitter
for
all.
The
latest
updates
love
to
see
that
modern
search.
Finally,
here
before
we
get
to
some
sample
updates,
aka
dot,
ms
slash
pnp,
search,
building,
modern
search
experiences
with
flexible
spfx
web
parts.
Adaptive
card
support
is
in
the
works.
They're
gonna
be
really
excited
to
see
that
come
along,
but
the
461
is
the
april
release.
B
Yes,
absolutely
well,
we
don't
have
any
new
samples,
so
we
got
a
sad
cat,
but
we
are
open
for
samples,
love,
new
samples,
and
I
know
that
there
are
a
number
of
prs
that
are
in
progress.
We
promise
those
will
get
processed
here
soon,
but
we
just
want
to
encourage
everyone
to
continue
to
support
and
provide
those
demos
and
samples
to
these
repos.
We
love
everything
you're
doing
and
if
you
have
any
questions
or
are
not
sure
how
to
submit
then
reach
out,
we
can
get
you
in
steering
is
caring
or
provide
some
support.
A
C
C
What
are
we
gonna
do
today?
Let's
do
team
rabbit?
Okay,
let's
do
the
I'd
like
to
auditory.
Here
we
go.
We
have
50
seats
in
the
room,
that's
not
yet
not
yet
not!
Yet,
let's
wait
for
the
people
to
enable
the
video,
so
I
will
enable
my
camera
as
well.
So
I
will
be
here.
We
have
one
more
row
to
fill
five
seats
or
so
or
six
seats.
Oh,
this
is
starting
to
look
really
really
good.
C
I
will
click
the
the
recording
enable
the
videos
we'll
we'll
do
some
hand
waving
here
for
a
while.
Still,
I
think
we
have
a
few
more
sets,
but
let's
do
something
waving
thanks
everybody
for
joining
and
thank
you
for
being
part
of
this
awesome
community
really
really
pleased
to
have
you
here
again
so
awesome.
Thank
you.
Everybody
really
really
great
excellent
and
then
back
to
patrick.
E
All
right,
I
have
started
sharing
my
screen
now,
thanks,
patrick
hello,
everyone
and
welcome
to
this
demo
on
adapter
card
extensions,
in
particular
the
office
locations,
adapter
card
extension
right.
My
name
is
I'm
a
microsoft
mbp
and
the
developer
at
a
company
called
content
plus
cloud
in
london,
united
kingdom.
I
write
blogs
on
a
platform
called
medium
under
the
username
another
I'm
on
twitter,
under
the
username
on
hotels
and
getting
my
github
username
is
another.
You
can
follow
me
on
those
platforms
if
needed.
E
E
So
so
car
title
will
find
with
that
card:
icon
will
leave
it
empty
and
then
the
image
to
show
on
the
card
I'll
just
pick
a
random
image
from
the
web
and
we'll
see
that
soon
and
then
there
is
a
property
to
say,
show
quick
view
as
list
we'll
set
that
to
no
and
then
the
next
thing
it
asks
is
the
data
source.
So
basically,
this
adaptive
card
extension
shows
all
the
different
offices
that
are
present
in
our
in
our
tenant
or
in
our
company.
E
So
these
offices
are
might
be
stored
in
different
places.
So
that's
what
we
are
looking
at
here,
so
it
is
asking
where
are
the
offices
stored?
So
let's
pick
the
data
source
as
local,
so
once
we
pick
that
it
says
we
need
to
manage
the
38
or
four
offices,
so
we
are
using
here
a
nice
pnp,
reusable
control,
so
it
asks
the
details
for
the
office.
So
here
we
are
saying
that
we
are
going
to
provide
the
data
locally.
E
So
let
me
give
these
details
that
I
have
copied
across
so
firstly,
we'll
give
the
name
of
the
office,
which
is
london
office
and
then
we'll
give
an
address,
and
then
it
asks
for
the
latitude
and
longitude
so
I've
copied
these
values.
I'm
just
pasting
them
over
here
and
longitude
map
image
link.
We
will
leave
that,
as
is
for
now
I'll
I'll,
explain
the
details
in
a
minute
soon
and
then
we'll
it
asks
for
the
time
zone.
E
E
So
if
there
are
more
offices,
you
know
we
can,
you
know,
go
ahead
and
add
other
offices
needed,
but
for
this
demo
I'll
just
say,
there's
only
one
office
and
once
we
do
that,
you
can
see
that
over
here
it
says
that
we've
got
one
office
and
then,
let's
quickly
go
through
the
other
properties.
It
says
whether
to
show
search
box
or
not
we'll
say
that
yes
and
then
there
is,
there
are
some
properties
related
to
maps.
E
We
say
yes
to
that
and
then
provide
the
api
key
and
then
some
other
properties
like
whether
it
has
to
show
the
local
time
we
say
yes
and
then
what
what
api
should
it
use
to
show
the
local
time
there
are
a
couple
of
apis
temporal
and
looks
luxon.
We
will
have
a
look
at
these
in
a
minute
and
then
it
says
whether
to
show
local,
whether
yes
or
no.
E
E
The
time
in
london
office
is
1522,
which
is
the
same
time
zone
as
the
current
user,
which
is
myself
and
then
the
address,
and
then
the
the
map
itself
of
the
office
and
then
the
the
weather
in
london,
which
is
very
nice
today,
21
degrees
and
sunny,
and
then
there
are
some
other
buttons
as
well
get
directions
clicking
on
that
it
opens.
You
know,
bing
maps
and
you
know
asks
you
can
give
a
from
address
and
then
you
can
take
a
look
at
the
map
and
then
the
other.
E
This
is
like
contact
the
manager
that
opens
the
chat
in
teams
and
finally,
more
details
takes
you
to
the
to
the
internet
page.
We
set
that's
fine.
Now
you
might
say
you
know
you
would.
If
the
data
source
is,
we
don't
want
the
data
source
to
be
local,
there
might
be
some
terms
in
the
taxonomy
which
which
have
the
offices
defined
already,
and
that's
what
I
have
here
exactly.
There
is
a
term
store
called
as
offices
and
in
this
I
have
about
six
offices
over
here
and
then
each
office.
E
E
What
we'll
do
is
we'll
we'll
use
the
id
of
this
term
set
I'll,
just
copy
that
and
then
go
back
here
and
then
change
the
data
source
from
text
from
local
to
taxonomy,
and
then
it
asks
the
for
the
id
of
the
term
set
and
paste
that,
and
then
you
can
see
that
there
are
six
offices,
okay
and
then
the
third
option
for
the
data
source
is
a
list
as
well.
So
if
you
have
offices
in
a
separate
list,
then
you
can
supply
that
as
well.
E
Okay,
so
now
let
me
just
save
this
as
craft
and
then,
when
I
click
on
view
details
again
and
now
it
shows
all
the
other
offices.
So
you
can
see
here,
we've
got
the
bangalore
office
and
now
the
local
time
in
bangalore
is
1954,
which
is
4
hours
and
30
minutes
ahead
of
us,
and
then
you
know
all
the
other
offices
you
know
with
their
respective
time
and
the
map
and
weather
as
well
and
yeah.
E
So
that's
how
we
can
see
all
the
offices
now,
the
the
other
functionality
that
exists
in
this
is
the
search
functionality.
So
if,
if
you
want
to
search
for
something,
if
let's
say
if
you
want
to
search
for
the
seattle
office,
so
if
I
type
in
settle
instead
of
seattle
or
making
a
spelling
spelling
mistake
on
purpose
and
then
search
for
that,
you
can
see
that
you
know
search
for,
settle
and
then
the
return
results
in
seattle.
E
Was
this
you
know
here
we
have
a
property
which
says
show
maps
in
quick
view
and
then,
if
I
set
that
to
no
and
then
say
that
again
and
then,
when
we
click
on
view
details
now
you
see
that
there
are
no
maps
in
quick
view.
However,
you've
got
this
button
called
as
open
in
maps,
which
is
nothing
but
the
the
geolocation
action
provided
by
viva
connections.
I
think
this
is
part
of
spfx,
1.14
or
15.
I'm
not
sure.
However,
there
is
information
on
how
to
use
this
as
well.
E
So
when
I
click
on
that,
it
doesn't
work.
Sorry
about
that.
I
should
have
tested
it
before
before
letting
you
know,
but
there
is
a
glitch
of
course.
The
democrats
have
decided
that
that
they'll
not
coordinate
with
me,
but
essentially
the
idea
was
when
you
click
on
that
it
should
open
a
pop-up
and
then
show
the
map
anyway.
Let's,
let's
have
a
look
at
the
code,
so
so
what
are
the
different
features
used
in
this
case?
These
are
not
sharepoint
features.
E
E
We
are
using
a
temporal
api
or
loxon
to
to
get
the
local
time,
and
then
we
are
using
the
geolocation
action
type
which
for
some
reason
is
not
working
currently
and
then
finally,
I
mean
the
geolocation
action
in
this
solution
is
not
working.
So
I
need
to
take
a
look
at
that
and
then
the
final
bit
is
caching,
so
we
are,
you
know,
wherever
possible.
We
are
using
a
lot
of
caching
in
in
the
solution
right.
E
So
let's
take
a
look
at
the
code,
so
the
code
itself
is
part
of
the
pnp
asus
repository,
so
there's
an
is
called
as
image
card
office
location.
There's
a
pending
pull
request,
like
david
mentioned
earlier,
with
some
updates,
so
that
will
be
merged
soon.
So
in
that
case,
we've
got
this
adapter
card
extension.ts
file
and
that
file
what
it
does
is.
It
has
a
method
called
as
load
offices
which
you
know
which
which
has
functionality
in
order
to
load
the
offices
based
on
the
data
source.
E
So
what
we
do
is
we
switch
on
the
data
source
and,
depending
upon
what
has
been
selected,
we
either
get
the
data
source
from
the
local
properties
or
from
the
term
set
or
from
a
list.
So
in
this
case
we
have
selected
the
data
source
as
taxonomy,
so
let's
have
a
look
at
how
the
how
the
terms
from
the
terms
set
are
being
obtained.
E
So
there's
a
method
called
as
get
office
terms.
Now
we
are
using
pnpjs
to
call
this.
Let's
see
how
we
are
doing
that
so
there's
a
file
called
as
office
location
service
and
that
in
that
file
we
are
using
pnpjs,
in
particular
the
extend
factory
method
in
order
to
extend
the
term
store
and
to
define
our
own
methods
in
order
to
you
know
or
our
own
functions
in
order
to
get
the
offices
or
the
in
this
case
the
terms.
E
So
there
are
some
nice
samples
available
with
respect
to
pnpjsv3
which
which
provide
the
same
information.
So
what
I've
done
is
I've?
Just
used
one
of
those
samples
and
then
changed
the
code
slightly
right,
so
we've
got
this
function
called
as
get
office
terms,
and
what
we
are
doing
here
is
with
pnpjs.
We
are
saying,
get,
firstly,
get
the
term
set
based
on
the
term
set
id
and
then
get
all
the
terms
under
those
and
in
particular,
just
get
the
id
and
the
labels
and
the
properties
of
the
terms.
E
So
once
we
have
all
the
terms,
these
are
nothing
but
all
the
six
offices
that
we
saw
earlier.
We
just
map
all
those
terms
into
a
custom
object.
So
we
get
the
you
know
the
different
properties,
like
the
name
of
the
term,
which
is
name
of
the
office,
the
the
address
latitude
and
longitude
the
time
zone
who
the
manager
is
and
what
the
page
is
etcetera.
B
E
We
also
set
something
called
as
filtered
offices
which
we'll
have
look
at
in
a
minute
and
finally,
we'll
say
the
card
view
to
render
is
the
initial
card
view,
which
shows
us
the
number
of
offices
right
so
just
to
tell
you
where
we
are
now
so
currently,
we've
got
all
the
data
related
to
offices
from
the
term
store.
It
is
now
present
in
the
in
the
state
variable
called
as
offices.
Then
the
next
steps
are.
E
Yes,
we
can
take
a
look
at
those,
so
one
of
such
views
is
the
card
view.
So
what
we
do
here
is
we
we
get
the
title
from
the
properties
and
then
we
calculate
the
number
of
offices
using
the
length
property,
and
then
we
just
say
we
have
how
many
our
number
of
offices.
So
in
this
case
we
got
six
offices.
So
that's
the
that's
the
information
we
display
right.
So
that's
the
car
view,
which
is
very
simple
and
then
when
when,
when
we
click
on
view
details
what
happens?
E
E
Now
I
won't
be
going
into
the
details
of
this
json
file
because
it's
just
like
I
said,
a
simple
json
file
with
some
text
or
some
you
know
buttons
etc,
which
shows
all
the
different
you
know
properties
of
of
the
office.
But
we
will
take
a
look
at
how
we
are
supplying
data
to
this
json
file
so
that
they
get
displayed.
E
E
So,
firstly,
we
have
this
object,
called
as
quick
view
data
in
which
you
know
we
need
to
set
what
office
we
are
going
to
show,
and
you
know
whether
we
have
to
show
the
search
or
not
whether
we
have
to
show
the
weather
or
not
show
the
time
or
not,
etc.
So
all
this
data
is
gathered
into
this
object
and
it
is
set
initially
with
some
values
and
then
what
we
do
is
from
the
state
we
get
which
office
needs
to
be
displayed.
E
So
there
is
an
index
that
we
we
set
so
by
default.
That
index
will
be
zero,
so
it
will
show
the
the
first
office
from
the
offices
array
and
then
what
we
do
is
for
each
office.
We
call
different
methods
so
well.
If
the
map
has
to
be
shown,
then
we
we
call
a
function
which
we'll
have
look
at
in
a
minute.
If
we
need
to
show
the
time,
then
we
call
the
function
that
shows
the
time.
E
So
in
order
to
get
the
map,
we
have
a
method
called
as
get
office,
location
map,
details
and,
as
you
can
see
over
here,
what
we're
doing
is
based
on
the
map
source.
If
it
is
bing
or
google,
we
just
call
the
call
this
url,
which
gives
us
the
static
image
for
the
for
that
particular
location
based
on
the
latitude
and
longitude
that
is
passed,
and
that's
what
you
see
over
here
in
the
quick
view,
and
then
for
the
time
I
said,
like
I
said
earlier,
we've
got
two
apis.
E
One
is
the
temporal
api
which
is
which
is
slightly
new.
It
is,
it
will
be,
I
think
it
will
be
used
quite
heavily
in
the
future,
because
you
know
it
there
will
be
no
need
to
use
any
third
party
libraries,
basically
with
the
help
of
for
temporal,
so
it
will
all
be
a
part
of
the
of
the
javascript
engine
that
the
process
will
run.
So
I
think
the
pro
the
proposal
is
still
in
the
last
phase,
but
it
will
be
available
soon.
E
So
you
know
how
many
hours
or
minutes
the
the
the
office
time
is
ahead
of
or
behind
us
and
then
we'd
do
some
computation
to
compose
this
nice
thing
to
say
the
local
office
is
ahead
of
or
behind
so
many
hours
etc,
and
show
that
information,
and
that's
what
you
see
over
here
in
this
case
seattle
is
eight
hours
behind
london
and
then,
finally,
in
order
to
show
the
weather,
we
use
the
open
weather
map
api.
This
is
a
simple
http
call.
E
Finally,
whenever
the
user
clicks
the
search
button,
which
is
called
the
fuse.search
method,
which
then
goes
ahead
and
does
the
search
in
the
office
area
right
so
there
there
are
quite
a
few
sessions
from
from
patrick
from
waste
and
valdec
and
from
paolo.
You
can
take
a
look
at
those
to
get
more
information
on
asus
and
these
are
the
resources
that
were
used
in
today's
demo.
Thank
you.
F
Okay,
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.
F
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
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.
F
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
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.
F
This
is
the
result,
so
this
is
just
two
samples
of
the
same
web
part
that
was
rendered
inside
a
sharp
point
page
or
inside
on
a
teams
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.
F
So
now
it's
time
to
the
adaptive
card
design
control,
so
this
control
at
this
moment,
it's
not
available,
would
be
available
in
the
next
version.
I
hope
of
the
pnp
react
control
it's
not
available,
because
I
spend
a
lot
of
time
to
understand
how
to
put
this
so
the
standard
designer
by
using
the
sdk
inside
and
react
control.
F
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.
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.
F
It's
the
standard
adaptive
card
designer
that
it's
hosted
inside
on
a
fluent
ui
panel,
because
the
the
adaptive
car
designer
need
to
fit
all
the
space
inside
the
page
and
if
you
want
to
try
to
put
this
designer
inside
on
a
web
part,
would
be
on
a
problem
on
the
hate
of
of
the
web.
Part,
for
example,
so
I
want
to
share
the
demo.
F
This
is
the
the
web
part
that
I'll
really
show
you,
and
these
were
part
hosts
in
this
case,
two
controls.
The
first
one
is
the
adaptive
card
post
and
you
are
able
to
see
the
a
simple
adaptive
card
rendered
here
and
then
another
button
to
open
the
new
control,
the
designer
control.
So,
first
of
all,
we
can
change.
Of
course,.
F
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
on
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.
F
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
team's
light
team
dark
and
hide
contrast
in
this
way
you
are
able
to
see
the
same
card
in
the
different
themes
theme
or
the
default
that
come
from
this
specific
sharepoint
site.
Another
cool
feature:
it's
this
one,
the
breakpoints.
F
This
is
not
available
at
this
moment
in
in
the
default
adaptive
card
designer.
Now,
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.
F
F
Of
course,
and
at
this
moment
we
have
an
empty
card,
but
the
controller
have
the
possibility
to
just
return
on
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.
But
it's
not.
F
It's
the
same
for
this
label
and
this
one
and
this
comp
er.
These
are
these
properties,
come
from
the
the
data
structure
that
I
pass
it
to
the
context
that
I
pass
it
to
the
adaptive
card
and
if
I
click
on
the
preview
mode,
I'm
able
to
see
my
image,
my
name
and
my
email
of
this
tenant
that
come
directly
from
the
sharepoint
framework
context.
F
F
F
Add
the
choice
speaker
to
to
set
the
the
breakpoint,
for
example,
and
at
the
end
we
attach
the
car
designer
directly
to
a
specific
div
inside
the
react
element.
I
used
a
simple
trick
to
resolve
the
problem
of
the
adaptive
car
designer
sdk
that
this
problem
is
that
you
are
not
able
to
set
on
a
payload
of
the
card
if
the
monaco
editor,
it's
not
loaded.
F
So,
in
this
case,
I
show
just
on
a
spinner,
and
then
I
check
that
if
the
monaco
editor
is
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.
F
These
objects
are
the
peers
and
the
ps
is
used
when
you
have
to
desi
to
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.
F
I
finish
so
next
step.
The
first
one
was
the
creation
of
the
adaptive
card,
the
host
component.
It's
already
done
the
second
it's
the
adaptive
card
designer
component
will
be
available.
I
open
the
next
version
of
the
library
I'll
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
fluid
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.
F
A
That
so
thanks
very
much
to
hadoop
and
fabio
for
some
great
demos
there,
so
the
recording
for
this
call
will
be
available
about
24
hours
on
the
microsoft
365
community,
youtube
channel,
aka
dot.
Ms
m365
slash
videos
follow
us
on
twitter
there.
Our
next
viva
connections
call
will
be
june,
2nd
at
7
a.m.
Pacific.
So
the
same
time,
that's
in
two
weeks
and
our
next
general
dev
call
will
be
next
thursday
may
26th.
A
At
the
same
time
available
all
the
community
calls
again
available
at
ak
dot.
Ms
slash
m365
calls.
I
want
to
thank
all
of
you
for
joining
us
today.
I
want
to
thank
again
our
presenters
today
and
thank
you
for
all
the
great
work
you're
all
doing
as
part
of
the
community
and
look
forward
to
talking
again
soon
have
a
great
rest
of
your
week.
Bye.