►
Description
Viva Connections & SharePoint community call on January 12th.
Demos: Getting started with hTWOo React controls for Microsoft 365 and Adaptive Cards design samples for Viva Connections.
Releases: PnPjs Client-Side Libraries, CLI for Microsoft 365, Microsoft Graph Developer Proxy, and Viva Connections Toolkit for VS Code. Plus 3 SPFx and 1 ACE samples.
Announced: Sharing-Is-Caring training dates, Community Recognition Program badges for 2023, and Learning Module – Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections.
Please see the blog post for this call for project updates, news and events details. The host of this call is Garry Trinder (Microsoft) | @garrytrinder.
Agenda
• 08:12 – SharePoint Framework – Vesa Juvonen (Microsoft) | @vesajuvonen
• 09:48 – PnPjs Client-Side Libraries – Julie Turner (Sympraxis) | @jfj1997
• 11:05 – CLI for Microsoft 365 – Garry Trinder (Microsoft) | @garrytrinder
• 12:27 – Microsoft Graph Developer Proxy – Garry Trinder (Microsoft) | @garrytrinder
• 14:18 – PnP SPFx Controls – Alex Terentiev (Microsoft) | @alexaterentiev
• 15:05 – Viva Connections Toolkit for Visual Studio Code – Vesa Juvonen (Microsoft) | @vesajuvonen
• 15:28 – PnP Modern Search – Garry Trinder (Microsoft) | @garrytrinder
• 15:51 – PnP Samples - Hugo Bernier (Microsoft) | @bernierh
• 16:55 – PnP SPFx ACEs Samples - David Warner II (Microsoft) | @DavidWarnerII
• 17:13 – Together mode picture – Vesa Juvonen (Microsoft) | @vesajuvonen
• 18:19 – Demo – Getting started with hTWOo React controls for Microsoft 365 – Julie Turner (Sympraxis) | @jfj1997
• 37:47 – Demo – Adaptive Cards design samples for Viva Connections – Alex Clark (Microsoft) | @sharepointalex
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/m365/community
A
B
B
We
have
the
latest
update
on
the
SharePoint
framework
from
Vasa,
then
we'll
go
through
all
the
usual
updates
across
pmpjs
CLI
for
Microsoft
365.,
reusable
PMP,
spfx
controls,
fever
connections,
toolkit
and
the
PMP
search
web
pass,
as
well
as
actually
there's
a
few
things
missing
on
there.
We
need
to
update
this
and
we're
going
to
go
through
the
spfx
samples,
we'll
have
the
Microsoft
graph
developer
proxy
updates
as
well
to
to
cover
and
we're
going
to
go
through
the
pitch
time
as
well.
B
B
If
you're
not
building
anything
or
want
to
present
anything,
then
you
can
participate
by
contributing
on
GitHub
and
there's
lots
of
Open
Source
repositories.
Where
you
can
report
issues,
you
can
get
involved
to
contribute,
doing
pull
requests
and
and
submit
your
code.
I've
just
generally
been
a
good
egg
and
helping
out
on
on
the
issues
list.
You
know
answering
people's
questions
and
just
generally
helping
people
out
another
way
is
you
can
provide
feedback?
B
B
So
if
you
want
to
get
on
the
call
do
a
demo,
we've
got
the
akms
link
there
on
the
screen,
fill
out
the
the
form
and
we'll
see
if
we
can
get
you
a
demo
spot.
So
we
have
lots
of
resources
in
the
community
and
we
have
the
Microsoft
365,
Community
videos
and
so
on
there.
That's,
where
you'll
find
all
of
the
recordings
for
previous
calls,
the
the
four
recordings,
but
also
the
individual
sessions
as
well.
B
So,
if
you're
looking
for
anything
and
that
you
may
have
missed
before
you
want
to
catch
up
on,
that's
the
best
place
to
to
view
that,
like
I
mentioned,
we've
got
the
open
source
repositories
as
well
check
out.
Those
would
be
lots
of
opportunities
to
to
get
involved.
You
know
raising
issues
submitting
pull
requests.
B
We
also
have
the
sample
galleries
as
well.
We
have
sample
galleries
for
for
everything.
We've
got
the
unified
sample
Gallery,
where
you
can
find
samples
for
teams,
SharePoint
framework
Power,
Platform
list
formatting
list
it
goes
on,
but
that's
the
one
place
that
if
you
want
to
find
things
that
people
have
already
built,
learn
from
them,
that's
a
great
place
to
start,
and
everything
here
is
available
through
the
Microsoft
365
platform
Community
website.
B
So
this
isn't
the
only
call
that's
happening
throughout
the
the
community.
We've
got
other
community
calls
that
take
place.
We
have
the
weekly
Microsoft
365
platform,
call
that
takes
place
on
a
Tuesday.
We
also
have
calls
for
identity
office,
add-ins,
Power
Platform
as
well,
and
we've
also
got
this
call.
The
Viva
connections
and
SharePoint
framework
call
so
again
plenty
of
calls
to
get
involved.
If
any
of
those
take
your
interest,
please
go
along
and
and
see
what
people
are
talking
about.
B
Talking
of
the
next
Microsoft
365
platform
call
so
as
well
as
the
the
usual
updates.
We
have
two
demos
coming
up
for
the
17th
of
January.
First
demo,
we
have
David
ruse,
and
so
this
is
a
metaverse
experience
implemented
as
a
team's
meeting
app
using
teams
live
share
SDK.
This
is
awesome.
This
is
3D
experiences
in
teams.
B
If
you've
followed
David
on
online
swear
on
LinkedIn
he's
already
done
a
kind
of
a
teaser.
It
looks
like
it's
going
to
be
a
really
good
demo
to
to
watch
and
following
David
we've
got
vaser
and
Andrew
who
are
going
to
continue.
The
Viva
connections
learn
module
and
this
will
be
for
tutorial
too,
and
David
leave
over
to
you
for
the
how
to
get
started.
C
Awesome,
thank
you
Gary.
Well,
friends,
as
you
are
going
to
see,
there
are
tons
of
opportunities
to
participate
in
collaborate
in
our
community,
but
you
may
find
that
there
are
times
when
you're
not
quite
sure
how
to
navigate
that
landscape.
For
example,
I
want
to
submit
some
samples,
but
how
does
GitHub
work
or
I'd
like
to
present
a
little
better
on
these
calls?
How
could
I
learn
a
little
few
tips
and
tricks
well,
sharing
is
caring
is
a
program
that
provides
Hands-On
collaborative
guidance.
C
What
that
means,
it
means
we're
going
to
get
on
sessions
together,
live
on
how
to
do
a
number
of
these
topics,
such
as
first-time
contributions
to
GitHub
in
ways
that
you
maybe
didn't
even
know
exist.
Perhaps
you
want
to
submit
samples,
maybe
in
Power
Platform
spfx,
we
got
you
covered.
These
are
safe
space
opportunities,
which
means
that
we're
going
to
be
together,
live
on
calls
and
we're
going
to
allow
you
to
ask
any
and
all
questions
you
want
without
recording
them.
C
So
it's
a
safe
space
to
collaborate
meet
others,
a
like-minded,
passionate
individuals
like
yourself
in
the
community
that
want
to
do
more.
We
have
a
number
of
sessions
scheduled
for
this
month
more
coming
next
month.
In
fact,
we
have
one
today,
on
our
first
time
contributor
you
can
register
at
AK
dot.
Ms
sharing
is
caring,
keep
an
eye
on
that
we'll
be
adding
more
sessions
soon,
absolutely
free
of
charge.
There
is
no
cost
for
it.
We
absolutely
want
to
collaborate
with
you
and
bonus
once
you
do
contribute
to
the
community.
C
We
want
to
recognize
all
the
amazing
work
that
you're
doing
and
we're
going
to
be
able
to
do
that
with
our
community
recognition
program.
This
is
a
formal
and
official
way
to
recognize
what
you're
doing
powered
by
credly
that
same
credly.
That
creates
those
badges
that
you
get
when
you
get
certified.
C
We're
going
to
give
you
some
too,
for
the
amazing
work
that
you're
doing
and
again
no
cost
whatsoever
we're
covering
that
cost
with
credly,
and
it's
our
way
of
saying
thank
you
a
little
way
of
recognizing
in
a
formal
and
official
way,
absolutely
able
to
share
these
on
LinkedIn
share
them
on
Twitter,
associate
them
to
your
LinkedIn
profile,
share
them
with
your
clients
and
managers.
Let
them
know
that
you
are
making
a
difference
and
it's
our
way
of
saying
thank
you.
So
there's
no
cost
we
do
need
you
to
opt
in.
C
We've
got
some
brand
new
badges
as
you'll,
see
for
CLI,
for
Microsoft,
365,
adaptive
card
extensions,
PNP,
Powershell
list,
formatting
and,
of
course,
a
bunch
of
new
initiatives
we're
going
to
do
this
year.
So
thank
you.
Everyone
looking
forward
to
recognizing
you
even
more
in
the
community
Gary
back
to
you.
B
Cheers
David.
Thank
you
very
much
for
that.
It's
absolutely
fantastic,
just
want
to
say.
David
has
been
absolutely
awesome.
Getting
these
together,
certainly
for
a
CLI
for
Microsoft
365.,
it's
great
to
see
a
badge
out
there
for
for
people
to
be
who
to
recognize
their
contributions,
which
is
fantastic.
D
I'll
be
relatively
fast
because
we're
quite
delayed
on
the
schedule
so
right
now,
I
just
from
a
usage
perspective,
spfx
is
being
used
by
tens
of
millions
of
monthly
active
users,
are
creating
custom
or
using
custom
shape
and
framework
components
built
with
or
used
within
the
Microsoft
365,
or
what
all-time
highest
usages
right
now
on
Tuesday
this
week,
so
we
can
see
the
The
Continuous
growth
on
spfx
usage.
All
up,
let's
go
to
the
following
slide.
D
Just
to
remind
everybody,
we
did
release
a
new
Microsoft,
reviewer
learning
module,
which
is
focusing
on
the
Vlog
connection
and
Viva.
Home
is
development,
so
Viva
Home
is
something
new
which
is
starting
to
roll
out
relatively
soon
to
every
tenant
within
the
world,
and
you'll
see
more
news
on
that
one.
We
did
announce
the
Vivo
home
actually
in
October
2021,
but
you'll
see
more
and
more
features
rolling
out.
Quite
soon,
let's
go
to
the
following
slide
right
now.
The
latest
version
is
1.16.1
and
that
was
released
in
the
13th
of
November.
D
1.17
is
going
to
be
scheduled
to
go
out
in
the
first
quarter
of
2023,
so
that
means
by
end
of
March
and
we'll
have
actually
the
engineering
team
joining
us
on
the
Tuesday
call
within
two
weeks.
If
I
remember
correctly,
to
talk
about
what's
included
in
1.17
and
what's
actually
happening
there
as
well
in
general,
we're
looking
into
doing
a
more
detailed
spfx
V2
later
in
2020,
true,
but
that's
a
quick
update
on
the
spfx
status
for
all
up.
But
let's
then
move
to
pmp.js.
E
Yes,
we
have
a
release
happening
tomorrow.
We
have
some
general
documentation
updates
and
we
had
a
contributor
contribute,
some
updates
to
SP
create
sites,
there's
a
new
get
site
status
that
improves
and
some
improvements.
Excuse
me
to
the
typing.
So
that's
a
handy
new
ad
I
spent
a
significant
part
of
my
Christmas
holiday
overhauling
the
graph
one
drive
endpoint,
so
you're
going
to
see
a
big
update
there.
E
I
literally
could
not
put
all
the
things
in
the
slides,
so
you'll
have
to
go
check
out
our
release,
notes
for
that
information
and
Patrick
did
a
write-up
of
the
20
2022
year
in
review.
So
you
can
check
that
out
and
see
all
the
updated
statistics
from
this
year
and,
as
always,
please
check
out
our
V3
nightly
builds.
E
B
Julie,
thank
you.
Okay,
moving
on
to
stay
alive,
Microsoft
365
updates,
we
have
a
new
release
version
6.1.
We
have
tons
of
new
commands
across
SharePoint
Power
Platform,
Microsoft
teams,
planner
Azure,
ad
Microsoft
search
and
purview.
So
if
you
want
to
get
the
latest
version,
you
can
get
that
from
npm,
just
use
the
at
latest
tag
or
if
you're
using
Docker
again
use
the
the
latest
tag
to
get
this.
B
This
latest
version
to
use
that
check
out
the
release,
notes
because
there's
tons
of
changes
in
there
as
well,
which
I
just
couldn't
film
the
slides
we
as
David
Owens
mentioned
as
well.
We
do
have
a
badge
now,
so,
if
you're
looking
at
contributing,
contribute
to
CLI
for
Microsoft
365,
get
yourself
that
awesome
looking
badge
and
on
the
on
the
topic
of
contributions.
B
I
want
to
actually
make
a
point
of
saying:
nandeep
nachan,
who
has
been
a
contributor
for
years
on
the
CLI
here's
100th
PR
earlier
this
week,
which
is
an
incredible
achievement.
We
you
know
such
an
impact
on
the
CLI,
adding
new
features
all
the
time
can't.
Thank
you
enough
for
the
the
work
you've
done
with
us.
B
But
basically
it's
a
tool
to
simulate
throttling
errors
and
responses
from
Microsoft
graph
and
any
other
API
as
well.
So
the
version
0.3
release
is
out.
You
can
get
it
from
the
link
on
the
screen
just
kind
of
cover.
What
is
new,
so
we've
opened
up
the
the
proxy
so
that
you
can
use
any
API
previously.
B
It
was
just
Microsoft
graph
that
we
tracked
the
the
requests
and
we've
also
added
guidance,
so
that
if
you
have
any
requests
that
don't
use
the
the
select
query
stream
parameter,
then
we'll
actually
give
you
some
guidance
say:
look.
You
know
you
might
want
to
change
this
and
we
also
actually
changed
the
way
that
you
close
the
the
proxy
to
control
and
close
rather
than
enter.
B
We've
got
a
GitHub
issue
with
a
few
examples
in
the
git
repository,
so
we'd
like
that,
like
if
you
could
check
that
out,
we're
bringing
in
notifications
of
beta
endpoints
as
well
so
again
just
to
make
sure
that
you're
using
the
V1
endpoints
in
your
production,
apps
and
also
supporting
plugins
as
well,
so
we're
going
to
have
a
a
plug-in
extensibility
model.
So
you
as
a
developer,
can
actually
inject
your
own
behaviors
from
your
own
apis
into
the
into
the
proxy
okay.
Moving
on
spfx,
reusable
controls,
Alex
yep.
F
Thank
you
so
nothing
too
much
new
in
here.
We
are
still
on
3.12
for
react.
Controls
on
311
for
property
controls.
We
have
a
bunch
of
work
items
in
the
repository,
so
feel
free
to
participate.
If
you
have
time
for
contributions,
please
go
there
select
once
Malaysia
or
some
small
Improvement
and
just
create
tpr,
we'll
be
happy
to
review
it
and
Mark
you
as
a
contributor
for
the
controls
so
yeah.
F
B
G
We
have
thank
you.
We
have
new
samples
from
new
contributors.
We
have
a
new
holiday
calendar
by
Harminder
Singh,
that's
his
first
sample.
It
allows
you
to
show
holidays
for
a
location
and
it
picks
up
the
location
from
the
user's
office
location.
We
have
an
update
by
consti
by
for
the
tab
accordion
with
Rich
Text,
where
he
fixed
some
clicking
issues
and
added
German,
localization
and
Marcus
Miller
has
added
a
new
webpark
called
offer
creation,
which
allows
you
to
actually
build
a
document.
G
C
D
I
will
look
at
my
screen
and
those
who
are
willing
I
will
put
ourselves
in
the
camera.
I
am
actually
already
recording,
but
let's
wait
a
while
until
we
get
50
seats
in
a
room,
I
will
not
put
the
camera
on
my
side.
I
don't
need
to
be
in
the
picture.
We'll
have
50
states
in
a
room.
Let's
see
if
how
many
people
we
get
there,
let's
wait
few
more
seconds
until
we
start
waving,
I
can
say:
Chris
there.
I
can
see
a
lot
of
familiar
faces.
D
Few
more
seats
in
the
room,
a
few
more
seats,
a
few
more
seats,
few
more
seats,
few
more
seeds,
few
more
States,
a
few
more
States,
and,
let's
actually
maybe
I'll,
do
it
myself
anyway.
So
let's
do
a
plan
handwaving
everybody!
Thank
you
for
joining
once
again
awesome
to
have
you
in
a
call,
thank
you
for
being
part
of
this
community
I'm
sitting
right
next
to
you.
Chris
Chris
is
over
there
excellent
thanks,
everybody
we'll
crop
a
key
FUNimation
out
of
that.
Thank
you.
D
E
All
right,
so
my
name
is
Julie.
Turner
I
am
with
some
Praxis
Consulting
and
today
I
am
going
to
give
you
a
overview
and
some
demo
on
the
H2O
react
component
library,
and
so
this
library
is
a
collaboration
between
myself
and
Stefan
Bauer
of
NAD
design,
and
so
let
me
just
quickly
give
you
a
little
visualization
of
who
I
am,
but
we're
going
to
move
really
quickly
because
that's
not
very
important
all
right.
E
So
what
is
H2O
H2O
is
an
open
source
alternative
to
Microsoft's,
fluent
UI
web
design
system
at
its
core.
So
there's
an
a
piece
of
this
called
H2O
core,
which
is
a
style
guide
based
on
HTML
and
CSS,
to
create
the
implementations
for
then
any
framework.
Unlike
the
fluent
UI
web
system
that
is
available,
that's
only
react
controls.
This
is
an
HTML
and
CSS
based
Library,
so
that
you
can
use
that
design
language
in
any
framework.
E
In
addition
to
that,
we
have
built
a
react
library
of
those
controls
and
that's
what
I'm
going
to
show
you
today.
So
how
do
we
get
started?
We
get
started
by
creating
your
SharePoint
framework
solution
using
react.js.
You
can
also
build
an
external
react.js
application
and
use
this
these
components
in
that
as
well.
You
would
then
install
H2O
react
and
you
do
that
by
just
an
npmi
install
of
the
H2O
react.
Library,
you
set
up
theme
support
you
initialize
icons.
E
You
then
create
your
class
or
function
component,
and
then
you
import
the
H2O
react
component
that
you
need
one
of
the
main
features
of
the
react
component
library
is
we
try
to
build
extensibility
in
at
the
core,
so
every
component
has
a
sort
of
template
or
style
to
it
that
that
extensibility
right
at
its
core,
and
so,
if
you
look
at
the
little
image
I
have
here
on
the
screen.
The
item
marked
with
a
red
too
the
interface.
E
The
props
interface
for
every
single
component
in
our
library
contains
an
element
at
least
one
called
root
element
attributes.
And
what
that
is,
is
it's
an
HTML?
It's
a
typed
HTML
attributes
list,
for
whatever
the
root
element
is
of
the
component
Now
by
default.
That's
HTML
elements.
So
it's
a
a
a
generic
element,
but
for
each
one,
when
we
Implement
them,
we
change
out
HTML
element
to
whatever
that
root
element
is
all
in
the
render
method.
E
So
if
you
were
to
see
online
35,
this
is
a
the
root
element
of
this
component
is
a
div
element,
so
we
would
change
that
root
element,
attributes
to
the
attributes
for
an
HTML
div
element
and
what
that
gives
you
is
a
way
to
do
any
add
any
attribute.
That
is
an
HTML
attribute
of
a
div
element
to
this
control.
E
Okay,
so
that's
the
overview,
and
now
let
me
just
dive
right
into
the
demo.
So
let
me
get
out
of
of
the
slides
and
we're
going
to
come
back
over
here,
and
so
we
have
is
the
landing
page
I
just
wanted
to
show
it
the
landing
page
for
the
H2O
site.
So,
as
I
mentioned,
we
have
H2O
core,
we
have
H2O
react.
So
core
is
the
HTML
and
CSS
straight
up.
You
can
use
that
and
there
is
a
there
is
documentation
on
how
to
get
started
with
core,
so
that
will
help
you.
E
Then
we
have
the
documentation
and
all
the
information
for
our
H2O
react.
We're
going
to
dive
into
that.
We
also
have
another
Library
called
H2O
icons.
These
are
all
3
200
office,
fluent
UI
icons,
converted
to
SVG
icons,
so
I'm
going
to
show
you
a
little
bit
more
about
that
as
well
all
right,
so
let
me
get
out
of
the
lead
documentation.
This
is
the
landing
page
for
the
H2O,
react
components
and
so
right
off.
E
We
start
with
a
getting
started
page
and
this
walks
you,
through
step
by
step
so
essentially
you're
going
to
install
H2O
react.
The
library
has
a
dependency
on
H2O
core
and
that
gets
installed
for
you
as
a
dependency.
So
you
don't
have
to
worry
about
that
part
of
it.
The
next
step
we're
going
to
do
is
we're
going
to
import
the
core
Styles.
So
all
those
styles
that
HTML
and
CSS
live
in
that
core
library
and
we
need
to
add
an
import
to
get
those
Styles
into
our
solution.
E
So
the
way
we
do
that
is,
we
go
into
our
root
web
web
part
scss
file
and
we
add
a
global
decorator
to
our
import
and
I'm
going
to
show
you
this
live
and
then
we
have,
to
you
know,
add
an
in
import
into
our
root
react
element
to
put
the
class
name
as
the
Styles
dot
my
root
webpart.
So
that's
this
class
name,
that's
in
our
scss
file.
We
need
to
import
that
into
the
root
div
of
our
entire
react
project
and
the
reason
that
we
do.
E
1.16
is
a
feature
in
the
config
file
in
the
config
directory
folder
there's
a
sas.json
file
and
we
need
to
include
this
quiet
depths
equal
true
and
it's
a
long
story
on
why
that's
necessary,
but
essentially
it's
to
quiet
warnings
about
the
version
of
SAS
that
we're
using.
So
we
will
go
through
that
in
we,
so
we
won't
go
into
that
any
more
detail.
E
You
can
also
use
this
new
tool
that
Stefan
built
called
the
icon
tool,
and
so
this
is
a
listing,
it's
very
similar
to
Chris
Kent's
flycon.
It's
a
listing
of
all
the
icons
that
are
available
and
what
you
basically
can
do
is
go
through
and
pick
the
icons
that
are
ones
that
you
want
to
include
in
your
project
and
once
you've
picked
all
the
ones
that
you
want.
E
You
can
click
this
download
button
and
it
gives
you
an
SVG
symbol,
set
file
that
you
can
then
add
to
the
assets
of
your
project
and
then
import
that
into
your
solution,
and
so
how
you
would
do
that
is
you'd
get
that
symbol
set
file
added
into
like
your
assets
or
somewhere
else,
and
then
you
import
that
symbol
set
file.
After
you
add
at
the
root
Source
an
image.d.ts,
it
could
actually
be
anything.
E
So
I'm
going
to
say
import
symbol
set
file
from
that
SVG
and
then,
instead
of
not
passing
anything
when
I
init
symbols
I'm
going
to
pass
in
the
name
of
that
symbol
set
file,
and
so
that
would
then
add
those
icons
and
then
I
can
reference
them
when
I'm
using
icons
in
my
work
other
than
that,
we
can
also
just
include
the
H2O
icons
library
and
then
pick
out
the
entire
SVG,
all
3200
icons
and
pass
those
in
and
initialize
those.
So
that's
another
way
to
do
it.
Another
thing
we
do
is
support
theming.
E
So
if
you're
in
SharePoint
framework
I
have
created
a
class
called
the
spfx
themes
class-
and
it
takes
all
of
that
boilerplate
code
that
you
need
for
theming
support
and
consolidates
it
so
that
you
only
really
need
a
couple
lines
of
code
to
add
theming
support
and
it
really
does
clean
up
your
base
class.
So
we
need
to
to
use
that
we
need
to
import
themes,
provider
and
that's
an
SP
component
object.
We
also
need
to
import
that
spfx
themes,
class
and
the
interface.
E
So
then
we
create
a
private
variable
for
the
the
theme
and
create
an
instance
of
it,
and
then
we
want
to
know
whether
or
not
we
have
Microsoft
teams.
So
we
can
because
this
Library
does
support
the
theme
of
Microsoft
teams,
so
if
you're
building
SharePoint
framework
Solutions,
where
you're
surfacing
them
not
only
in
SharePoint
but
also
in
Microsoft
teams,
we
can
set
this
up
so
that
we
get
the
the
theming
to
match
the
team's
user
interface.
E
Then
we
need
to
create
an
instance
of
our
theme
provider
and
then
we
call
the
class
spfx
themes
with
the
init
theme.
Handler,
we
pass
in
our
root
Dom
element.
We
pass
in
our
theme,
provider
and
optionally
pass
in
our
Microsoft
teams,
which
lets
us
know
if
we're
in
teams
or
not.
If
there
is
no
theme
provider
service,
if
you're
using
it
outside
of
SharePoint
framework,
there's
also
ways
to
use
that
at
without
the
property
all
right.
E
And
so
then
we
get
started
using
the
components
so
I'm
going
to
essentially
go
through
a
demo
now,
where
I'm
going
to
show
how
to
actually
use
these
components.
But
let
me
just
point
out
here,
on
the
left
hand
side
that
we
have
grouped
our
all
our
components
into
different
categories.
So,
if
you've
ever
heard
me
talk
about
Atomic,
Design
This
is
sort
of
a
methodology
to
break
our
components
into
smaller,
reusable
pieces.
So
we
at
the
very
lowest
place,
have
things
called
atoms
and
so
showing
you
something
like
a
button.
E
E
It
shows
what
the
different
arguments
are
for
the
that
component
and
then
gives
you
examples
of
how
to
implement
each
different
version
of
that,
and
if
you
click
on
the
show
code,
it's
going
to
give
you
the
code
for
how
to
use
that
and
react,
and
then
you
can
customize
it
up
so
that
it
looks
the
way
you
need
it
to
look
all
right
enough
of
all
that,
let's
go
to
our
demo
page.
So
I
have
a
SharePoint
framework
solution
running.
Hopefully
it's
still
running.
E
Let
me
just
double
check
that
everything
is
good.
Let
me
refresh
our
page,
so
that
we
we're
sure
that
everything
is
going.
Okay
and
I
have
a
button
right
now
that
has
a
dog
icon
on
it.
So
that's
all
pretty.
Let's
start
back
in
our
project,
so
here's
our
SharePoint
framework.
This
is
a
1.16.1
project.
We
have
imported
the
H2O
react
library
and
I've
also
included
the
H2O
icons
Library.
E
This
is
our
SAS
file
with
our
quiet
dependencies
equal
true,
so
we've
got
both
of
those
things.
This
is
our
root
components,
scss
module
file
and,
as
I
pointed
out,
I
have
a
root
class
for
our
component
and
inside
of
that
I
have
a
global
import
of
the
Styles.
So
this
gets
us
all
the
styles
for
all
the
components
that
are
included
in
the
H2O
core
Library.
E
E
The
fluent
UI
regular
icons
in
my
on
init
I've
consumed
the
theme
provider
and
then
I've
initialized,
my
icons
passing
in
that
fluent
UI,
regular
icon
set,
and
that
allows
me
I
just
want
to
point
out
like
if
you've
built
a
SharePoint
framework,
1.16
project,
there's
a
lot
of
boilerplate
code
for
themesport,
that's
included,
you
don't
need
any
of
that
anymore,
so
you
can
clean
it
out
and
you
just
are
left
with.
Essentially
your
on
init
and
your
render
method.
E
I
just
showed
you,
you
inspect
the
element.
We
do
need
to
improve
that
that
interface,
so
that
you
can
get
the
IDS
on
the
screen,
so
you
don't
have
to
inspect
them,
but
we'll
get
to
that
as
shortly.
So
this
is
how
you
then
add
a
button.
So
now,
if
I
wanted
to
add
something
new,
let's
say
I
wanted
to
add
something
more
complicated.
So
let
me
come
down
here.
We
have
organisms,
we
have
cards,
here's
the
H2O
document
card,
so
this
is
a
document
card
layout.
E
That's
some
people
like
to
use
the
card
layout,
and
so,
if
we
show
this
code,
we
can
see
that
essentially
it's
a
root
component
for
the
document
card
and
then
it's
a
bunch
of
molecules
that
are
the
implementation
of
each
one
of
the
pieces
of
this.
So
we
have
the
card
image.
We
have
the
card
location,
the
card
title
and
then
this
card
footer
that
includes
an
avatar
and
the
name
of
the
person
and
the
change
date,
and
so
I
can
essentially
just
copy.
E
There
we
go
and
then
I
need
to
get
all
these
Imports
and
sometimes
yeah
there
we
go
so
what
I
want
to
show
here
is
note
that
the
import
is
coming
from
the
H2O
react
library,
but
with
a
selective
import.
So
there
is
so
this
allows
you
to
be
very
selective
about
which
components
get
included
in
your
bundle,
so
that
you
can
make
sure
that
your
bundle
size
is
as
small
as
possible.
So
I'm
just
going
to
resolve
these
various
Imports.
So
there's
image,
here's
card
location
there.
E
It
is
here's
card
title
there
that
is
here's
card
footer!
That's
that
and
now
one
of
the
other
things
I
want
to
do
here
is
the
Avatar
image
size
has
an
enum
whom
who
who
Avatar
size
so
I'm
going
to
do?
Who
oh
typo,
who
Avatar
size
there
it
is
so
I
want
to
include
that
and
then
I
can
do
dot
32.
So
we
can
oops
px32,
there's
that
and
I.
E
All
right,
let's
say,
and
then,
if
we
come
over
here
and
we
go
to
our
component,
let's
see
if
that
renders
and
everything
is
coming
is.
Are
we
having
a
build
error?
Oh
it's
just
being
Wicked
slow
yeah.
Let
me
try
restarting
it
really
quickly
because
I
want
to
let
our
next
speaker
have
his
time
come
on.
A
E
A
E
There
it
is
all
right,
and
so
then
we
have
our
card
in
our
solution.
So
obviously
you
can
combine
all
of
these
elements
in
various
different
ways
to
make
up
your
own
controls
and
certainly
if
you
have
ideas
for
controls
or
you're
having
problems
with
one
of
the
controls
or
need
any
assistance.
Obviously
you
can
submit
issues
to
our
repo,
which
we
would
happily
take
and
try
to
assist.
I
also
have
some
documentation
in
our
Solution
on
contributing.
E
So
if
you
wanted
to
contribute
any
controls
to
our
solution,
you
can
check
out
our
contributing
documentation.
If
you
have
questions
or
concerns
or
whatever
or
want
to
get
more
help
on
getting
started,
please
submit
an
issue
to
our
GitHub
repo
and
so
with
that,
I
will
send
it
back
over.
So
our
next
presenter
can
take
over.
H
All
right
so
I'm
going
to
take
you
through
a
repository
that
we've
got
on
GitHub
relatively
new
when
it's
been
there
for
a
while,
but
we
kind
of
wanted
to
to
raise
awareness
of
it
a
little
bit,
and
these
are
samples
for
Viva
collections.
I've
got
some
slides
just
to
give
a
little
bit
of
context.
I
won't
spend
too
much
time
on
on
slides
and
then
we'll
dive
into
the
into.
H
Repo
just
a
little
bit
about
me
for
those
that
don't
know
me
so
my
name's
Alex
Clark,
there's
my
Twitter
handle.
If
you
do
follow
me,
you'll
see
lots
of
stuff
that
either
is
related
to
two
or
four
wheels
or
photography,
occasionally
a
little
bit
of
running
so
I'm
A
Cloud
solution,
architect
at
Microsoft,
been
working
with
SharePoint
for
a
very
very
long
time
now.
H
So
that
is
me
and
here's.
What
we're
going
to
cover
so
I'll
do
a
really
quick
overview
of
view.
The
connections
just
conscious
there's
a
lot
of
you
on
the
call
I'm,
not
sure
you
know
everyone's
sort
of
level
of
experience,
so
I'll
give
a
really
quick
overview
of
what
viewer
connections
is
and
obviously
for
a
lot
of
you.
H
H
It's
powered
by
modern
SharePoint,
so
typically
a
SharePoint
home
site,
which
is
normally
going
to
be
your
intranet
embedded
in
teams.
So
we've
got
a
dedicated
teams
app,
which
is
now
there
and
teams
admin
Center
that
you
can
go
and
allow
brand
put
your
own
company
logo
Etc,
build
your
intranet
site
and
then
deliver
that
into
teams.
So
we've
got
the
pin
DAP
in
teams,
so
employees
can
access
it
and
get
access
to
the
internet
straight
through
teams.
H
So
a
little
bit
of
an
overview,
I'll
be
the
connections
in
general
and
then
I
forgot.
This
next
slide
was
animated,
I'm,
not
really
sure
what
it
does.
So
it's
disappeared
off
the
top
of
the
screen,
and
so
with
that
comes
the
mobile
app
in
teams.
So
the
team's
mobile
app
includes
either
connections,
as
you
can
see
in
there
and
we've
got
different
things.
H
We've
got
the
dashboard,
which
is
why
I'm
going
to
talk
around
we've
got
the
feed
where
we're
bringing
in
news
from
SharePoint
and
also
content
from
Yama
as
well,
and
the
resources
tab.
Where
we've
got
our
nav,
where
we
can
navigate
around
our
FairPoint
intranet,
okay
and
the
dashboard
samples
I'm
talking
about
will
render
in
Mobile
there
we
go
perfect,
okay,
cool
all
right,
so
the
dashboard,
so
part
of
Viva
connections
is
the
dashboard,
probably
one
of
the
the
main
parts,
that's
different
from
sort
of
standard
SharePoint
web
parts.
H
So
this
can
be
kind
of
considered
the
the
company
home
for
the
employee.
So
if
an
employee
opens
the
team's
mobile
app
open,
Super
connections,
they'll
see
the
dashboard
with
all
types
of
cards
on
it
that
you
can
design,
and
these
are
great
for
things
like
first-line
workers
who
need
access
to
different
systems.
If
you
want
quick
access,
then
maybe
you
know
book
holiday
and
do
a
payslip
things
like
that.
The
dashboard
is
a
great
place
for
it.
H
Okay
and
with
the
dashboard,
you
can
kind
of
build
this
out-of-the-box
cards
that
you
can
use,
but
also
you
can
build
your
own
cards
and
that's
kind
of
what
we're
going
to
talk
around
here.
Okay
and
you
can
Target
these
cards
at
different
employees,
so
you
can
Target
them
at
different
ad
groups.
If
you
want
to
so,
you
can
have
customized
dashboards
for
for
each
set
of
users,
so
get
digging
into
the
dashboard
a
little
bit
more.
So
what
we
can
see
in
here
is
at
the
top.
H
You've
obviously
got
the
company
name,
your
navigation
bar
and
then
the
way
that
these
kind
of
dashboard
works
is
it's
split
into
ultimately
adaptive
cards
right,
so
each
each
dashboard
card
ultimately
is
an
Adaptive
card.
Okay
and
there's
different
sizes,
as
you
can
see,
you've
got
medium
cards,
you've
got
large
cards
and
then
obviously
the
the
normal
teams
interface
at
the
bottom.
H
Okay,
and
what
we're
going
to
talk
around
is
the
more
custom
element
of
the
card
design,
as
opposed
to
some
of
the
out-of-the-box
cards
so
onto
the
samples
and
shortly
we
will
go
into
a
demo.
So
what
we've
essentially
got
on
GitHub
is
some
pre-built
samples
of
cards.
Now
this
is
not
to
be
confused
with
another
repo.
There
is
another
repo
with
spfx
samples
that
have
been
built
where
you
can
actually
download,
deploy
those
cards
obviously
into
your
tenant.
H
We've
got
actual
functionality
in
there,
which
is
you
know,
connecting
to
various
endpoints
and
dynamically
pulling
from
SharePoint
Etc.
What
we've
done
with
this
particular
repository
is.
These
are
almost
static
samples
Okay,
so
we've
crafted
some
Json,
which
we
call
the
card
Json,
so
the
actual
design
for
the
card
with
a
separate,
mostly
samples,
have
it
a
separate
data,
Json
file
where
we're
storing
the
data.
So
this
ultimately
is
static,
data
and
static
cards,
but
they're,
very
visual,
okay,
and
they
are
designed
to
give
you
inspiration
and
ideas
for
building
cards
further.
H
Okay
and
these
type
of
cards
you're
not
typically
going
to
use
in
production,
because
updating
the
content
of
these
cards
would
be
very
manual.
Typically
you'll,
be
building
spfx
adapted
card
extensions
to
actually
build
gold
cards
with
full
functionality
where
we're,
maybe
connecting
to
line
of
Business
Systems
calling
rests
endpoints.
Those
kind
of
things:
okay,
I'm
not
going
to
demo
the
spsx,
because
it's
been
a
long
long
time
since
so
spfx
code.
So
I,
don't
think
I'd.
Quite
do
it
justice
but
I'm
going
to
talk
through
these
samples
and
how
they
work.
H
We
run
a
Microsoft
Workshop,
which
I'll
talk
around
right
near
the
end,
and
we
have
actually
found
that
a
couple
of
these
samples
we've
got
customers
using
in
production
with
the
static
data
and
they're
actually
just
going
into
the
dashboard
and
updating
the
the
Json
believe
it
or
not,
and
we've
got
a
Commons
team
that
we're
like
you
know,
happy
to
do
that
and
that
that
particular
customer
lacks
any
devs.
So
they
were
kind
of
happy
doing
it.
That
way.
H
So
just
a
screenshot
on
here
before
I
go
into
the
demo
of
just
some
of
the
samples
that
we
have
so
typically
this
this
screenshot's
updated
whenever
we
get
new
samples
added
to
the
repository
and
obviously
would
be
very
keen
for
for
people
to
add
in
examples
that
they've
got
into
there,
but
there's
various
different
things
from
requesting
holiday
and
looking
at
like
a
Canteen
menu,
onboarding
company
events.
So
this
screenshots
just
gives
you
an
idea
of
what
is
kind
of
in
there
at
the
moment.
H
Okay
and
then
we'll
go
into
an
actual
demo
of
these.
So
give
me
a
minute
want
to
Tab
out
there.
Hopefully,
that's
changed
to
contoso's
fictional
intranet
now
fingers
crossed
so
what
I'm
going
to
do
is
I'm
just
going
to
go
over
to
the
GitHub
repository
really
quickly,
I'll
just
go
to
the
home
of
it.
Actually.
So
this
is
this.
Is
the
GitHub
repository
adaptive
cards
templates
and
when
you
go
here,
you
will
see
in
the
readme
the
screenshot
of
all
of
the
samples.
H
H
Okay
to
you
to
use
and,
like
I
say,
be
great
to
get
more
contributions
to
these,
and
they
do
adhere
to
a
sort
of
standard
as
well
I'm
going
to
drop
into
this
Live
Events,
one
which
is
one
I've
built,
and
what
we'll
do
is
we'll
actually
put
it
over
into
the
dashboard
really
quickly.
So
I
can
show
you
how
to
do
that,
but
each
sample
will
have
a
summary,
an
image
telling
you
what
that
sample
does
kind
of
what
is
it
what
it's
compatible
with?
H
You
can
even
open
it
straight
in
the
Adaptive
card
designer
just
by
clicking
it
so
that
will
load
up
the
Adaptive
card
designer
with
it
all
pre-populated
and
ready
to
go,
so
you
can
test
it
or
customize
it
further.
If
you
want
to
and
again
you
know,
we've
got
the
the
process
of
how
you
actually
set
this
up.
H
So
if
you,
if
you
want
to
add
samples
yeah,
if
you
adhere
to
kind
of
the
way
we've
structured
it
and
that's
a
good
place
to
start
so
what
we'll
do
is
I'm
just
going
to
dip
over
to
the
Viva
connections
dashboard.
So
here
is
my
dashboard
and
obviously
I've
accessed
this
through
the
Cog
and
I've
gone
into,
manage
Viva
connections
gone
into
view
dashboard,
and
here
I
am
in
the
dashboard
page.
Now
you
can
see.
H
A
H
H
H
H
So
in
the
actions
I'm
going
to
do,
show
the
quick
view.
Okay
and
that's.
What's
going
to
pop
up
this
adaptive
card,
I'm
going
to
leave
the
button
on
actually
as
well,
even
though
we
could
obviously
click
the
card
itself
to
show
the
quick
view,
I'll
leave
the
button
on
there.
I
always
think
that
looks
pretty
nice
and
we'll
do
show
you
a
quick
view
as
well
and
then
down
here
in
our
template.
H
Json,
all
you
really
need
to
do
and
if
you
come
over
to
the
the
repo,
if
you
take
the
the
main
Json
file,
which
is
the
template,
so
the
schema
for
the
card
we
can
just
take
all
of
this
Json
we'll
go
and
put
that
in
the
template,
Json
and
then
in
the
data
Json
I'm
going
to
go
and
take
the
data
Json
file,
which
is
here-
and
this
is
all
of
our
data
right.
So
this
is
our
actual
data.
H
That's
going
to
go
in
the
card
happens
to
be,
as
you
can
see,
this
is
just
in
an
array
Within
within
a
Json
object,
so
I'm
just
going
to
grab
that
and
I'm
going
to
go
and
put
that
in
the
data
Json.
Hopefully
that's
going
to
work
and
then
I
am
going
to
save
that.
Hopefully
it's
saving
anyway
looks
like
it
is
there
we
go.
That's
been
saved,
so
I'm
going
to
save
draft.
H
So
that's
Now
using
that
data
now,
because
this,
because
we've
kind
of
separated
the
template
from
the
data,
you
can
actually
update
the
data
in
this
card
without
having
to
update
the
schema.
Okay
so
and
I'll
do
this
really
quickly
in
the
card
designer,
rather
than
do
it
in
the
dashboard.
All
you
can
actually
see
is
we've
got
our
payload
editor
on
the
left.
H
All
the
time
and
we'd
say
that
if
you
were
building
you
know,
ideating
these
cards
for
for
your
customers
or
for
yourselves
and
separating
those
out
is,
is
really
going
to
help
okay,
and
so
that's
where
the
samples
are
that's
what
they,
what
they
kind
of
do
and
then
really
quickly.
I
just
want
to
finish
with
a
real,
quick
couple
of
slides,
and
then
everyone
should
finish
on
time.
H
So
what
I
would
say
with
the
samples
is
use
them
for
demos,
inspiration
if
you're
running
workshops,
we've
got
some
links
and
and
obviously
they'll
be
posted
around
how
to
use
the
the
card
Json
and
the
data
Json.
Obviously
we're
wanting
you
to
build
spfx
samples
for
the
full
value,
but
you
know
if
a
conference
team
is
comfortable,
they
could
even
just
edit
that
data
Json
like
I,
say:
we've
even
got
customers
doing
just
that.
H
So,
if
there's
a
lack
of
developers,
then
that
can
also
work
and
we've
linked
to
the
the
repository
there
and
I
just
wanted
to
mention
this
on
the
end.
Microsoft
do
have
a
workshop
for
this.
It's
a
two-day
workshop.
So
if
there
are
any
anywhere
on
the
call
who's
who's
works
in
the
Microsoft
Account
Manager
and
might
be
eligible
for
that,
then
then
contact
your
account
manager,
and
that
could
be
something
that
you
could
take
advantage
of.
H
It's
kind
of
like
a
hackathon
style,
Workshop
idea
again
is
just
to
ideate,
Viva
connections,
cars
and
and
get
started
quicker,
and
other
thing
just
to
mention
is
that
design
that
we've,
obviously
crafted
in
the
sample,
can
be
used
when
you're
building
your
spfx
cards.
So
you
can
actually
reuse
that
design
and
just
write
your
code,
so
you're
speeding
it
up
anyway,
before
you're,
even
developing
it
and
then
obviously
contributions.
If
you've
got
these
samples
stuff
you've
already
done,
please
please
contribute
them
in
there.
H
B
Great
work
there
Alex
show
those
samples
of
the
definitely
being
looked
at
shortly
tons
of
tons
of
resources
in
there.
You
can
see
a
lot
of
activity
in
the
chat
about
wow,
there's
so
much
to
learn.
Well,
it's
all
out
there.
Folks,
you
can.
You
can
basically
find
it
when
you
need
it,
it's
already
in
and
there
for
you
to
use
fantastic.
Thank
you
very
much.
B
That
brings
us
to
the
end
of
the
call,
so
thank
you
for
thank
you
for,
for
joining
today.
Recording
will
be
available
in
24
hours
on
the
Microsoft
365
Community
YouTube
channel.
If
you're
not
subscribed,
go
along
subscribe,
make
sure
you
get
all
the
latest
videos
follow
us
on
Twitter
Microsoft,
365,
Dev
and
M365
PMP
for
latest
updates,
and
the
next
call
will
be
January.
The
26th
for
the
Viva
connections
and
SharePoint
framework
call,
and
the
next
call
the
my
next
Microsoft
365
Power
Platform
core
will
be
January.