►
Description
This community call demo is taken from the SharePoint General Development Special Interest Group recording on 28th of February 2019. In this video, SPFx Yeoman extension – 21:36
David Warner (Catapult Systems) demonstrates how to build a SharePoint Framework web part, which demonstrates the usage of the tenant theme REST APIs.
David Warner (Catapult Systems) - @davidwarnerii
Code sample available from https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/js-theme-manager
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
Okay,
great
well,
thanks
for
letting
me
demo
today.
For
those
who
don't
know
me,
this
is
my
contact
information
I'm,
a
Microsoft
office
development,
MVP
I
do
a
lot
of
blogging
and
blogging.
So
if
you
have
any
questions,
feel
free
to
reach
out
today
we're
gonna
talk
about
modern,
experienced
team
management,
so
we're
gonna
take
a
couple
of
seconds
and
discuss
the
importance
of
modern
themes.
There's
some
interesting
perspectives
on
it
that
we,
as
maybe
just
developers,
might
not
necessarily
think
about,
and
they're
gonna
see
how
we
can
empower
those
content,
authors
and
site
owners.
A
Excuse
me
to
manage
SharePoint
themes
with
a
web
part
that
we'll
be
demoing
today.
So
when
we
think
of
the
value
of
a
SharePoint
theme,
we
typically
think
of
applying
colors.
This
is
the
SharePoint
framework.
Sig
call
so
I
think
it's
a
large
conglomerate
of
developers.
It's
a
pretty
simple
thing
for
us
to
do
and
create
right.
A
We
go
to
the
office
CY
fabric,
develop
a
palette
or
configure
a
palettes,
go
run
a
little
few
lines
of
PowerShell
and
we're
good
to
go,
but
for
a
lot
of
marketing
communications
departments
or
user
employee
engagement
departments
that
are
responsible
for
managing
the
SharePoint
sites.
Modern
theme
actually
equals
user
adoption
and
the
by
n
by
users
for
just
simply
having
colors
change
is
pretty
significant
I.
A
So
it's
a
pretty
significant
weight
put
on
just
color
so
when
we
think
about
SharePoint
theme
management,
applying
a
theme
really
because
of
the
beauty
of
the
modern
experience
and
the
hard
work
by
the
SharePoint
team.
So
thank
you.
We
have
single
click
simplicity
using
those
SharePoint
UI
themes.
We
just
need
to
click
on
whatever
we
want
to
click
on
from
a
company
theme
or
SharePoint
theme,
and
it's
done
it's
applied
as
developers
in
SharePoint
framework.
A
We
can
inherit
from
those
themes
to
ensure
that,
as
our
users
change
the
theme
the
entire
site
will
inherit
from
it
as
well.
So
our
webparts,
our
extension,
anything
we
develop,
will
fall
in
line
with
the
choice
that
the
users
are
making
or
the
site
owners
are
making
around
the
creation
of
their
and
branding
of
their
site.
So
it's
extremely
empowering
managing
things,
though
the
creation
of
them,
the
updating
of
them,
the
deleting
of
them
that's
still
kind
of
a
developer
driven
task.
A
We
have
to
write
some
PowerShell
again
to
us,
that's
very
simple,
but
for
users,
it's
probably
not
something
they're
going
to
do.
The
beauty
is,
though,
that
we
have
a
REST
API
to
connect
through,
so
that
allows
us
to
create
something
for
creating
updating
deleting
or
my
favorite,
which
we'll
talk
about
in
the
demo
apply.
So
this
is
an
opportunity
for
us
to
provide
a
UI
for
management
of
those
themes
to
specific
site
owners
or
maybe
higher-level
tenant
configuration
admins,
but
we
want
to
make
sure
we
keep
in
mind
governance
right.
A
So
this
is
a
very
empowering
web
part
that
we
could
utilize
as
simple
as
we'll
see
it
is
it's
pretty
empowering
it's
not
something
we
probably
want
to
throw
into
the
tenant
app
catalog.
We
might
want
to
scope
it
to
something
like
a
singular
site
with
a
site
collection,
app
catalog
that
specifies
exactly
who
can
get
access
to
it,
and
then
it's
only
used
there
so
that
way,
you're
not
polluting
that
collection
of
company
themes
by
anybody
and
everybody.
So
we
want
to
make
sure
we
keep
that
in
mind.
A
So,
let's
jump
over
the
web
part,
but
before
then
I
just
wanted
to
take
a
minute
and
give
a
shout
out
to
both
camera
and
he's
actually
not
on
the
call
today,
but
he's
the
super
big
rock
star
worked
with
me
on
this.
Actually
so
I
just
want
to
give
a
shout
out
and
thank
him
for
that
all
right.
So,
let's
go
take
a
look
at
a
site
collection
that
I
created.
Where
I
put
this
webpart
now
again,
I
mentioned
you
might
want
to
put
it
somewhere.
A
That
is
only
going
to
be
accessible
by
some
higher
elevated,
privileged
users.
Of
course,
that
makes
sense
that
it
would
go
in
Central
Admin
all
right.
So
we
have
our
central
admin
site
here
and
again,
it's
a
very
simple
web
part.
Modern
experience,
the
manager
we
start
out
with
the
ability
to
create
a
theme,
updated
theme,
deleted
theme
and
apply
a
theme.
So
the
first
thing
we
were
going
to
go
ahead
and
do
is
create
a
primary
theme,
but
we
need
to
generate
the
palette
for
that.
A
So
I've
included
a
link
here,
UI
fabric
theme
generator,
which
will
simply
just
take
you
to
a
tab.
I've
already
got
opened
here,
which
is
the
UI
fabric,
name
generator,
and
it's
pretty
simple,
generate
a
theme.
If
you
haven't
already
done
it
in
the
past,
you
come
in
and
we
see,
we've
got
the
primary
theme,
color
our
body
text
color
and
our
background
color,
we'll
just
leave
those
the
same.
We're
gonna
change
the
primary
theme.
A
Color
so
I'm
just
gonna
go
ahead
and
paste
in
a
hex
value
here
for
the
for
the
kind
of
teal
ish
that
we
are
now
having
on
our
new
SharePoint
logo
and
we'll
capture
the
JSON.
We
don't
need
the
code
of
the
PowerShell.
You
could
use
that,
but
for
this
web
part
it
uses
the
JSON
so
we'll
go
ahead
and
copy
that
we'll
go
back
to
our
theme,
manager
and
we'll
start
out
by
creating
a
theme.
A
So
we're
gonna
go
ahead
and
call
it
PNP,
we'll
paste
our
theme
palette
and
we'll
go
ahead
and
click
create
very
simple
notification.
As
we'll
see
in
some
of
the
code,
I
left
it
very
simple,
so
they
could
be
easily
learned
and
understood,
it's
not
overly
complex
and
you
can
build
better
validation
and
alerts
and
all
that,
if
you
decide
you
want
to
use
it
so
hit
OK.
A
And
now,
when
we
come
over
to
our
panel,
we'll
go
to
change
the
look,
we'll
go
to
theme
and
we'll
see
we
created
it
so
there
it
sits
there
and
it's
available
to
us.
But
now
let's
say
we
want
to
update
it
and
say
we
come
in
here.
Vesa,
maybe
is
not
quite
super
happy
with
the
the
pnp
teal
I
know
he
likes
it,
but
we
know
he
loves
what
more
orange
so
we're
gonna
come
over
to
the
UI
fabric.
Again
we're
going
to
paste
in
an
orange
color
we're
gonna
copy.
A
Our
palette
will
come
back
and
we
see
that
the
available
themes
has
already
been
generated
for
us
and
all
these
are
being
accessed
by
just
a
REST
API.
So
I'm
gonna
go
ahead
and
select
the
PNP
I'll
go
ahead
and
select
all
of
this
paste
in
the
new
palette
update
theme
we
can
see,
it's
been
successfully
updated.
So
if
I
close
my
change
to
look
come
back
theme,
we
can
see
now,
we've
got
PNP
all
orange
and
then
again
deleting
it
is
as
dead,
simple
as
the
rest.
It
generates
the
drop
down
for
us.
A
We
select
PNP
and
we
select
delete
theme.
It
has
been
successfully
deleted.
We
can
confirm
that
change.
The
look
theme
and
it's
gone
I'm
just
left
with
my
blog
base,
color
schemes,
so
that
leaves
us
with
apply
a
theme,
as
I
mentioned,
is
by
far
my
favorite,
because
what
it
allows
us
to
do
is
actually
apply
a
theme
with
creating
a
theme,
so
you
may
be
thinking
wait.
A
second
is
that
even
possible?
A
Yes,
we
can
apply
a
theme
to
a
site
without
having
created
a
theme
within
the
change
to
look
panel
and
how
that
works.
Is
we
actually
tell
it
exactly
where
we
want
to
apply
that
theme?
To
so,
let's
say,
we've
got
an
employee
experience
site.
Maybe
it's
an
employee
engagement,
employee
events,
something
that's
meant
specifically
to
just
for
the
employees
to
go
to
find
out
about
events
or
things
that
are
a
little
more
fun
within
the
organization.
A
Imagine
the
ability
to
go
apply
a
theme
based
on
something
fun,
whether
it
be
a
holiday
or
first
day
of
spring
or
winter
or
summer,
or
some
internal
events,
where
you
want
to
apply
a
color
scheme
that
maybe
encourages
understanding
or
awareness
of
that
event.
But
you
don't
want
to
pollute
to
change
the
look
panel
and
then
everybody
has
availability
that
starts
applying
it
and
then
you
have
to
go,
take
it
away
and
all
that
so
for
us
for
our
demo
content
I've
created
the
Batcave
site.
A
We
all
know
I'm
a
big
fan
of
Lego
Batman,
very
funny
guy,
so
he's
created
his
little
Batcave
site
here
for
encouraging
and
employee
engagement
within
the
DC
world.
You
can
submit
your
ideas
right,
it's
karaoke
night,
on
Friday
for
for
Batman,
but
we
see
it's
orange
and
so
Batman.
Well,
he
he
prefers
black
right
or
very,
very
dark
grey.
So
what
we're
going
to
do
is
we're
going
to
come
and
we're
going
to
go
generate
a
very,
very
dark
grey
out
so
I'm
going
to
paste
in
my
grey.
A
A
Cut
and
paste
in
our
theme
we
see
it's
using
the
5d
and
then
you
just
provide
the
relative
site,
URL
so
we'll
say
sites
bat-cave.
Now
you
could
make
this
more
robust.
Again,
you
could
make
it
pre-selected
pre-populated,
you
could
make
it
scoped
just
directly
to
a
site.
So
if
you
wanted
to
give
site
owners
of
a
singular
site,
the
ability
to
manage
their
own
theme
without
the
ability
to
go
in
and
add
to
the
tenant
app
catalog,
then
you
could
do
that.
A
A
A
So
you
can
go
grab
it.
It
is
pretty
simple:
it's
based
on
an
out-of-the-box
web
part
as
you
kind
of
solve
from
the
design.
It
just
creates
the
HTML
and
then
there's
a
collection
of
methods
that
are
all
individually
done
that
allow
you
to
delete
updates.
So
if
you
wanted
to
just
take
out
any
one
of
the
abilities,
for
example,
here
is
the
update
tenant
theme
and
here's
the
apply
tuna
theme
so
they're
all
based
on
a
on
a
somewhat
modular
theme,
manage
your
execution
function.