►
Description
This 23-minute developer demo focuses on resetting design and default experiences through the modernization of default SPFx web part templates. Vesa Juvonen shows latest UX updates that are - fully sectioned, color aware, detects if in SharePoint or Teams environment, have on page guidance for page creators, and theme awareness. Updates to be included in upcoming SPFx v1.14 rolling out this Fall. Thoughts on UX? Join the discussions in SP Dev docs. Q&A and bonus - glimpse at the Viva Dashboard (web part) in Teams. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on September 21, 2021.
Demo Presenter: Vesa Juvonen (Microsoft) | @vesajuvonen
Supporting materials:
• Discussions - SharePoint/sp-dev-docs (github.com) | https://github.com/SharePoint/sp-dev-docs/discussions
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos
A
So,
of
course,
if
you
are
an
isv
and
then
you
have
an
existing
sar
solution,
then
you
might
not
build
everything
using
the
sharepoint
framework
model,
but
you
might
want
to
take
advantage
of
sharepoint
framework,
for
example,
for
viva
connections
and
there's
multiple
other
areas
where
that
still
makes
a
lot
of
sense.
So
it
is
a
really
cool
way
of
extending
and
not
just
sharepoint,
even
though
that
name
applies
to
that.
A
So
and
if
you
think
about
the
sharepoint
framework
as
a
whole,
it
provides
automatic
single
sign-on
because
you're
already
signed
in
to
the
actual
application,
where
it's
being,
where
what
are
you
using?
It
has
the
automatic
hosting,
so
you
don't
have
to
worry
about
setting
up
the
azure
and
applications
and
all
of
that-
and
this
is
a
huge
thing
for
especially
for
enterprises,
where
getting
an
azure
application
installed
or
running
in
an
azure.
It's
not
necessarily
an
easy
thing
for
developers
to
do.
A
It
has
the
consistent
developer
experience
using
the
web
stack
development,
but
also
using
typescript,
react
and
angular
and
all
that
stuff.
So
a
really
really
consistent
way
of
extending
then
microsoft,
themes
and
sharepoint
and
viva
now
kind
of
intros
and
recap
slides.
But
this
is
a
relatively
new
one,
which
is
trying
to
explain
where
the
sharepoint
framework
can
be
actually
used.
So
we
kind
of
are
formalizing
this
in
a
slightly
new
way.
A
So
right
now,
currently
right
now.
The
my
sharepoint
framework
is
the
only
extensibility
model
for
microsoft
viva.
There
are
other
other
options
coming,
there's
other
options
coming
from
microsoft,
craft
to
to
take
advantage
of
the
microsoft
vima
platform,
but
sharepoint
framework
is
really
the
way
of
doing
the
ux
level
extensibility,
so
creating
cards
for
the
viva
connection,
mobile,
creating
web
parts
and
extensions
and
modifying
the
experiences
within
the
viva
connection,
desktop
experience
and
then,
of
course,
not
forgetting
about
the
sharepoints
a
lot
of
our
customers.
A
There's
two
there's,
I
can't
say
the
latest
numbers,
but
there's
this
hundreds
of
millions
of
users
monthly
basis
using
sharepoint,
and
you
can
of
course
extend
disable
sharepoint
experiences
with
sharepoint
framework,
and
it
is
the
recommended
way
of
doing
that
in
the
sharepoint.
So,
if
possible,
don't
use
sharepoint,
adding
model,
that's
not
future
proven
viable
model.
Sharepoint
framework
is
and
then
alternative
options.
Now
one
of
the
problems
or
for
being
having
a
sharepoint
framework,
and
what's
the
engineering
didn't
really
thought
about
until
pretty
recently
or
well.
A
We
didn't
spend
time
too
much
on
this
until
pretty
recently
is
that
we
did
actually
have
pretty
horrible,
and
you
can
quote
me
on
that.
One
horrible
experience
as
you
created
a
new
web
part
or
you
created
a
new
microsoft
themes,
tab
or
an
experience,
and
that
doesn't
look
really
good.
So
the
ux
is
outdated.
A
There
was
no
section
background
support
which
is
say
well
in
quotes
relatively
new
capability
in
sharepoint
online.
No,
it
isn't
it's
been
over
there
for
a
while
and
there's
a
supportive
way
of
doing
that,
but
the
default
template
which
was
coming
out
as
you
created
a
project
didn't
show
you
how
to
do
that.
A
It
had
really
limited
microsoft
team
support.
So
if
you
have
a
look
on
the
picture
right
now,
there
fonts
are
wrong
and
it
actually
says
welcome
to
sharepoint
inside
of
the
microsoft
teams.
That's
pretty
awkward
actually,
and
it
wasn't
that
it
wasn't
the
team
aware.
So,
if
you're
changing
the
theme
in
the
sharepoint
or
if
it's
changing
the
theme
inside
of
the
microsoft
teams,
it
didn't
react
on
those
changes.
So
you
as
a
developer,
always
needed
to
do
additional
work
and
additional
extensibility
to
make
all
of
that
work
and
that's
why.
A
What
we
want
to
do
is
that
we
want
to
reset
and
the
design
and
the
default
experience
so
making
it
really
easy
for
developers
as
they
create
a
new
solution,
a
new
project
using
the
sharepoint
framework,
and
they
can
easily
use
that
in
microsoft,
teams
or
in
sharepoint,
and
it
will
support
all
of
the
latest
capabilities
and-
and
you
can
easily
control
how
that
support
is
also
being
done.
And
this
this
work
and
design
is
currently
ongoing.
So
we're
not
quite
there.
This
is
a
preview.
A
Come
back
on
the
timelines
in
a
second
now,
let's
have
a
look
on
what
it
means
in
practice,
as
we
do
have
plenty
of
time
to
do
that.
So,
first
of
all,
let's
have
a
look
on
the
existing
experience,
so
we
can
actually
kind
of
remind
ourselves
how
quotes
horrible.
The
experience
is,
but
to
be
fair
to
six
years
old
design
and
the
whole
point
of
this
one
was
basically
just
focus
on
showing
a
web
widget
on
I
web
part.
A
And
then,
if
you
go
to
the
the
edible
part
experience,
you
can
modify,
modify
the
property
and
then
obviously
it's
then
reflected
in
the
ux
here
as
well.
Now
the
challenge
of
doing
this,
and
as
we
didn't
refresh
this
experience,
is
that
it
does
not
support
section
background.
It
does
not
support
theming.
A
Let
me
call
this
plain
sample
and
what
it
means
is
that
if
I,
for
example,
set
the
background
theme
or
the
look
and
feel
in
here
to
be
something
a
bit
more
complicated
like
dark,
yellow,
it
didn't
do
that
properly.
Well,
it
actually
did
adjust
some
of
the
settings
but,
for
example,
the
section
background.
All
of
that
stuff
wasn't
really
working
in
a
best
possible
way.
A
It
also
actually
has
some
spacing
issues
it
scales
differently
and
all
of
that
stuff,
more
more
importantly,
for
us,
as
well
as
we're
targeting
microsoft
teams
and
really
want
to
make
the
microsoft
teams
super
easy
to
extend
using
sharepoint
framework.
The
experience
in
the
microsoft
teams
was
pretty
horrible,
so
here
I'm
in
the
in
the
microsoft
v
my
experience
in
the
teams,
but
let
me
actually
create
here.
I
think
I
have
a
plain
sample.
A
It's
really
really
bad.
It
actually
says
welcome
to
sharepoint,
but
I'm
in
teams
that
doesn't
make
any
sense.
This
doesn't
experience
is
not
quite
optimal
and
then
starting
to
optimize.
This
always
took
some
time.
It
didn't
even
have
the
right
fonts
available
as
a
template,
so
we
wanted
to
modify
this
so
right
now.
The
design
is
then
intended
to
be
somewhat
this
following.
So
let
me
actually
work
that
through
as
well.
Let
me
go
and
create
a
new
page
in
sharepoint,
and
we
can
have
a
look
on
that
modernized
template.
A
Let
me
get
rid
of
that.
Let
me
add
in
here
and
if
I
can
only
if
I
only
would
tell
a
world
no
design,
that's
what
it
is,
so
we're
looking
into
doing
a
bit
more
descriptive
web
part
and
I'll
come
back
on
the
code
and
I'll
show
some
of
the
pieces
in
the
code,
but
that
part
has
not
yet
been
fully
finalized.
A
So
it
will
be,
of
course,
much
more
inclusive
as
well,
so
we'll
add
some
some
additional
things
over
there
as
well,
and
we
provide
additional
set
of
links,
additional
details
for
the
developers
to
get
started
and,
of
course
the
experience
is
team
aware.
So,
in
the
same
way
as
with
the
old
one,
which
was
fixed
at
some
point,
you
can
actually
flip
between
the
themes
and
it
is
actually
automatically
flipping
the
pictures.
A
We
want
to
make
sure
that
the
default
template
looks
clean
and
it
it
has
the
environmental
detection
on
it.
So
it
actually
detects
automatically
that's
running
in
teams.
It
has
all
of
the
needed
details
in
it
and,
of
course,
if
I'm
flipping
the
settings
in
themes
to
be,
for
example,
dark,
we
can
actually
see
that
it's
reflecting
those
shadings
in
the
themes
as
well,
so
the
default
output
has
to
create
the
project
from
yeoman
generator
is
giving
you
the
same
experience,
which
will
then
adapt
automatically
depending
on.
A
Are
you
aren't
in
teams,
or
are
you
in
the
sharepoint
framework,
now
good
comment
from
drakon?
I
will
get
back
to
on
that
one
in
a
second,
but
this
is
what
we're
doing
like
right
now.
So
the
ongoing
debate,
an
ongoing
discussion,
well
another
debate.
We
because
I
think
everybody
agrees
on
that
is
that
we
have
a
draft
version
and
a
beta
version
available
of
this
as
part
of
the
1.13
in
a
beta
2,
2
2,
beta
20,
which
is
almost
on
a
release
candidate
for
1.30
and
which
is
coming
quite
soon
as
well.
A
We,
however,
realized
that,
as
we
are
adding
all
of
these
capabilities
and
the
default
templates,
which
which
is
actually
visible
in
here,
it's
going
to
add
quite
a
lot
of
additional
code.
And,
and
then
the
discussion
was,
was
that
some
of
the
mvps,
with
just
great
feedback
and
complete
completely
valuable
feedback?
Is
that
there's
quite
a
lot
of
additional
text
and
additional
things
to
always
get
rid
of
when
you
create
a
new
web
part
and
you
clean
up
the
the
outcome
from
the
yeoman
generator.
A
So
what
we're
now
looking
into
doing
is
simplifying,
for
example,
this
on
init
structures
and
only
on
init
capabilities,
so
that
the
baseline
theming
baseline,
section
background
baseline,
rendering
options
are
being
much
more
easily
available
for
the
developers
so
with
few
lines
of
code,
and
we
can
get
started
on
on
creating
a
web
part
which
will
adapt
based
on
the
environment.
It
will
adapt
on
the
section
background
and
the
themes
and
all
of
that
stuff,
regardless
how
you're,
using
than
sharepoint
or
in.
B
A
Team
sign
but,
like
I
said
right
now,
this
is
what
we're
getting
from
the
beta
20
and
it
is
still
a
beta
and
so
we're
going
to
clean
up
some
of
this
stuff,
we're
going
to
make
it
easier
and
we're
going
to
reduce
the
level
of
information
which
people
are
having
in
here,
so
that
we
make
it
easier
for
the
developers
to
take
advantage
of
the
theme
handling
and
all
of
that
stuff.
If
they
prefer
to
do
so.
You
can,
of
course,
always
basically
drop
out
from
supporting
that
theming
option.
A
If
you
want
to
do
that,
I
don't
know
why
you
wouldn't
want
to
do
that,
but
again,
maybe
in
certain
cases
it's
understandable,
but
as
an
example
and
this
kind
of
a
overriding
and
with
a
hard-coded
styles.
This
is
not
going
to
be
there
as
we
move
into
the
release
of
this
particular
new
version
of
the
templates
right
now.
If
you
are,
however,
interested
on
actually
having
a
discussion
on
this,
we
would
love
to
get
your
input.
A
So
let
me
actually
go
in
here
and
let
me
jump
in
here,
so
we
do
have
a
in
the
sp
dev
docs
issue
list.
There
is
a
two
discussion
notes
related
on
this
discussion.
One
with
29
comments
a
lot
of
a
lot
of
input
over
there
and
then
one
with
stefan
bauer
related
under
its
stimulant
styling
on
the
web
part
template
feedback.
Now,
like
I
said
right
now,
we're
looking
into
basically
is
this
a
good
idea?
A
Is
this
a
bad
idea
and
how
we're
gonna
do
that
and
just
to
be
clear?
Thank
you,
david
for
sharing
the
link
as
well.
Of
course,
as
we
are
rolling
out
these
changes,
we
are
updating
all
of
the
tutorials
all
of
the
the
documentation.
As
part
of
this
things
now,
I
think
I
will
jump
back
on
the
slide.
Just
to
summarize
this
one
and
then
I'll
answer
the
questions,
and
then
we
can
do
a
in
general
q
a
in
the
end.
A
So
for
now
we're
getting
collecting
feedback
for
this,
so
making
sure
that
people
are
happy
with
the
outcome.
We
do
understand
that
every
single
time
you
move
or
or
change
anything
as
the
default
experience.
Some
people
will
react
on
it,
but
we
want
to
make
sure
that
it's
an
easily
available
option
for
you
to
take
advantage.
So
right
as
we
were
unable
to
finalize
that
fully
for
1.13.
This
is
now
post
point
1.14,
which
is
intended
to
go
better
a
week
after
1.13,
which
is
intended
to
come
out
within
weeks.
A
I
think
the
weeks
or
days,
maybe
maybe
that's
the
right
way
of
saying
that,
but
we're
really
looking
into
optimizing
the
code
level
so
making
sure
that
the
output
will
look
somewhat.
As
we
can
see
in
these
screens,
the
picture
will
be
a
bit
changed
to
be
more
inclusive
and
diverse.
But
that's
that's
the
only
adjustments.
A
What
we're
looking
into
doing
there
and,
of
course,
we're
looking
into
having
fully
documented
patterns
and
default
experiences
available,
so
really
calling
out
how
things
can
be
done
and
why
they
can
be
done
and
all
of
that
stuff
and
we'll
definitely
link
additional
links
as
we're
adding
those
documentation.
Scene
I'll
react
some
of
the
comments,
because
we
do
have
a
few
minutes
still
on
the
on
the
schedule
so
trackan.
A
If
you
said
that
if
it
would
be
creative,
you
can
build
a
documentation
page
that
explains
the
code
in
what
generally
default
templates
and
that
links
to
that
documentation.
Basically,
inside
of
the
learn,
modeling
study,
that
is
a
good
feedback.
Absolutely
that
is
the
intention
as
well
kim
is
basically
saying
that
the
new
default
template
is
too
simple
yeah.
This
is
this
is
the
the
beta
part,
so
some
people
are
saying
that,
of
course,
the
existing
templates
is
super
simple.
It's
really
really
really
uber
simple.
As
we
introduced
this
additional
layout.
A
Some
people
are
saying
that
this
is
too
complex
and
some
people
are
then
saying
like
kim,
which
completely
valid
feedback
is
saying
that
it's
too
too
simple,
so
there's
multiple
sites
on
this
we're
trying
to
find
and
the
the
right
compromise
based
on
your
feedback.
So
please
participate
on
that
discussion
and
and
provide
the
feedback
in
the
discussion
list
and
discussions
in
the
github.
So
we
will
get
your
input
on
the
design
now.
A
What
we're
trying
to
do
basically
here
is
that
we
want
to
make
sure
that
the
first
experience
for
creating
new
web
parts
for
developers
will
be
clean.
It
will
support
all
of
the
target
environments
and
it
will
support
the
theming
and
color
settings
and
all
of
that
by
default,
without
you
being
forced
to
do
additional
set
of
coding
additional
sort
of
set
changes.
A
So
simplifying
that
first
experience
now
we
understand
that
we
might
want
to
looking
more
advanced
options
in
the
future,
so
we
might
want
to
introduce
more
complex,
templated
outputs
reference
samples,
maybe
something
which
you
can
run
as
I
create
a
new
project,
maybe
an
and
visual
code
extension
for
sharepoint
framework,
where
you
can
start
by
creating
from
existing
sample,
which
will
have
a
much
more
complex
scenario.
So
all
of
that
is
open
for
discussion,
but
really
looking
into
making
this
better
for
you,
existing
tutorials
will
be
updated.
A
This
will
not
affect
any
of
the
existing
solutions,
so
basically
all
of
your
existing
solutions
will
be
as
they
are.
So
this
will
be
part
of
the
new
versions
and,
if
you're
upgrading
your
existing
solution,
we
will
not
change
any
of
your
code.
So
it's
up
to
you
then,
to
basically
modify
the
needed
code
on
there.
A
B
B
A
So,
unfortunately,
though,
the
creating
of
office
add-ins
is
not
out
of
bedroom.
So,
if
I
put
my
sharepoint
framework
engineering
head
on,
we
would
love
to
do
that.
Unfortunately,
our
other
counterparts
and
so
the
office
extensibility
people
have
been
really
really
busy
in
other
areas,
so
they
haven't
really
invested
yet,
at
least
on
making
that
experience
optimal.
B
And
then
I
see
the
question
had
a
request
for
a
spfx
sample
connected
to
sql.
I'm
just
posted
a
link
if
you
want
to
actually
share
that
suggestion
into
one
of
the
many
forms.
For
that.
I'm
sure
there
are
a
number
of
community
contributors
who
would
love
to
take
up
that
challenge
and
post
something
out.
A
A
Now
I
will
flip
back
on
my
demo
environment
and
I
will
quickly
explain
how
things
are
working.
So
this
one
here
is
a
is
technically
this.
It's
a
well,
I
think
the
right
term
to
use
here
is
a
web
part,
even
though
it's
a
personal
application
but
technically
you're
creating
a
panel
which
is
inheriting
from
a
web
part,
and
then
you
get
this
experience
now
in
the
viva
connections.
A
A
And
I
just
prefer
this
to
be
white,
so
let
me
do
that
and
there
we
go.
We
can
see
those
individual
dashboards
and
that
is,
for
example,
on
a
custom
ace
card,
so
active
adaptive
card
component,
so
ace
is
adaptive
card
component.
These
are
new
component
types.
So,
technically,
what
we're
seeing
here
is
a
web
part
called
dashboard
webpart,
which
is
then
rendering
the
dashboard,
which
is
the
same
experience.
What
we
will
be
exposing
in
the
mobile
experience.
A
It
is
a
new
component
type,
so
you're
using
sharepoint
favor
to
create
those
but
you're
not
creating
a
web
part.
So
they
are
not
with
part
component
types
in
general
in
the
microsoft
teams.
If
we,
if
I
a
bit
zoom
out
here
so
we'll
see
more,
we
can
build
custom
experiences
as
the
cards,
which
are
then
targeted
for
the
mobile
experience
and
they
can
connect
to
the
microsoft
teams
applications
so
that
they
can
or
bots
or
of
course
they
can
hit
microsoft
graph
apis,
which
is
right
way
of
accessing
any
information.
A
But
you
can
also
print
create
with
parts,
and
these
are
basically
then
custom
experiences
which
you
can
use
to
extend.
The
desktop
experience
into
viva
connection,
which
we
can
see
right
now
here
inside
of
the
microsoft
teams,
hopefully
that
a
bit
clarifies
the
situation.
I
can
quickly
go
also
in
here.
If
I
go
to
the
root,
this
is
technically
the
same
view
as
what
we
saw
inside
of
the
microsoft
teams.
That's
the
viva
connection,
but
now
we're
looking
to
that
view
inside
of
the
sharepoint.
A
Without
the
microsoft
themes,
shell,
on
top
of
it,
and
we
can
see
the
same
dashboard
card
here,
I
can
go
to
the
dashboard
details.
I
can
start
modifying
the
dashboard,
adding
additional
things
additional
cards
depending
on
what
has
been
installed
to
this
environment,
so
I
can
add
additional
things,
additional
options
and
of
that
stuff.
A
There's
a
lot
of
lot
of
lot
of,
let's
say
dependencies
and
it
might
be
quite
confusing,
but
we'll
definitely
get
more
documentation,
video
guidance,
demos
and
all
of
that
available
on
the
device.
So
I
think
we
have
a
viva
development
experience
scheduled
for
next
week,
so
that
should
be
good,
but
I
think
that's
it.
Let's
actually
jump
back
on
brian
on
your
computer.