►
From YouTube: Emojify your lists - How to use emojis with you lists
Description
In this 15-minute Maker focused demo, Chris Kent – suggests an alternative to using icons in a list. Have you thought about inserting Windows emojis? Presently, there are many PnP formatting samples that call for “iconName.” In this demo, you see how easy it is to call Windows emojis – using the "txtContent" text property. Updates in this demo are executed using Sergei Sergeev’s SP Formatter (Chrome Extension) – that provides full formatting using Monaco Editor with instant preview, IntelliSense, find/replace, etc. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on July 23, 2020.
Demo Presenter: Chris Kent (DMI) | @theChrisKent
Supporting materials:
• Icon Overlays | https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/generic-icon-overlay
• Icon Progress Bar | https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/number-icon-progressbar
• Multi-Choice Icons | https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/multi-choice-icons
• SP Formatter (Chrome Extension) | Sergei Sergeev | @sergeev_srg | https://bit.ly/SP-Formatter
Learn more:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos
A
Okay,
here
we
go
I'm
chris.
Let's
do
it,
let's
format
stuff,
all
right,
so
we
go
to
our
classic
warrior
horses
site
and
our
horses.
You
know
they
have
a
lot
of
things
to
manage
a
lot
of
things
to
do.
One
of
those
things
is
invasions
right.
So
they've
got
a
nice
sharepoint
list
to
track
their
invasion.
Progress
and
they've
got
campaigns
all
across
the
world,
so
you
can
see
here,
they're
kind
of
tracking
them,
but
this
is
boring
right.
So
we
want
to
spice
it
up
just
a
little
bit
right.
A
How
do
we
make
this
more
engaging?
So
people
really
want
to
be
involved
in
these
invasions.
So
one
of
the
things
we've
looked
at
a
number
of
times.
A
number
of
different
ways
is
icons
right,
so
I'm
going
to
format.
This
column
come
down
here
to
advanced
mode,
so
I
can
write
it
myself
and
I'm
just
going
to
very
quickly
throw
one
in
here
right.
So
we're
going
to
say
ohm
type
capitalize
that
we're
going
to
call
this
span
that
sounds
great
and
then
we're
gonna,
you
know,
add
attributes
with
our
attributes.
A
A
In
this
case,
we're
gonna,
say
font
size
and
we're
going
to
make
it
huge,
48,
pixels,
we'll
preview
that
there
now
we
can
see
our
dog
and
that's
exciting
and
again,
we've
shown
you
this
a
number
of
times
and
there's
a
lot
of
cool
things
you
can
do
with
icons.
We
have
a
ton
of
samples
on
them.
One
of
the
videos
we
showed
the
demo.
I
don't
know
12
months
ago,
was
this
idea
of
icon
overlays
right,
you
can
come
in
here.
You
can
put
icons
on
top
of
each
other.
Add
some
colors.
A
You
start
to
get
an
interesting
emoji
territory,
it's
pretty
exciting,
but
at
some
point
you
start
to
wonder
like
why?
Don't
I
just
use
an
emoji
right?
That's
what
we're
going
to
talk
about
today,
how
exciting!
So
what?
If,
instead
of
saying
an
icon
name
here,
what
if
I
got
rid
of
that-
and
I
said
text
content
just
make
sure-
that's
working
we'll
say
the
word
dog
bladder,
comma,
we'll
preview-
that
there's
the
word
dog.
But
what?
A
A
So
now
you
can
start
to
use
emoji
directly
inside
your
formats,
whether
you
showed
or
shouldn't
I'll
leave
that
up
to
you
videos
here,
you
can
do
a
lot
with
that
right,
because
they're
actually
text
you'll
see
that
in
the
format-
and
you
can
even
do
stuff
like
this
right,
you
can
write
your
formulas
with
it,
so
I
can
say,
plus
at
current
field.
You
know
again.
Maybe
don't
do
that.
A
The
idea
is
that
this
opens
up
some
new
opportunities,
new
windows
for
you,
because
even
though
there's
nearly
2
000
some
odd
icons
available
to
you,
they
don't
cover
everything
I
mean,
for
instance,
if
I
try
to
type
horse
there,
nothing,
no
matter
how
many
times
I
ask
for
that,
no
horse
so
again
to
get
the
emoji
thing
right:
windows
period,
that'll,
open
up
in
any
program,
there's
all
sorts
of
lovely
emojis
in
there.
Okay,
let's
not
have
these
in
here.
Let's
take
a
look.
What
can
we
do?
A
What
can
we
use
these
in
a
better
way,
all
right?
So,
let's
close
this
guy
now,
let's
say
I've
got
my
phase
here
now
I've
gone
over
to
the
formatting
repo
right
now,
I've
gone
over
here
and
I'll
go
to
the
home
page.
We
have
this
nice
link
over.
If
you
haven't
seen
this
before,
if
you
click
this,
make
it
a
little
friendlier
to
get
to
things
and
one
of
the
things
we
have
is
this
idea
of
groupings.
A
So
if
we
go
to
groupings-
and
we
go
down
to
category
you
see-
we've
got
this
category
called
icons.
Look
at
all
these
samples,
we
have
that
feature
using
icons
now
converting
these
to
use
emojis
isn't
too
hard.
In
fact,
that's
what
we're
going
to
do
here,
so
I'm
going
to
grab
this
number
icon
progress
bar
okay.
So
I've
got
this.
A
This
is
a
nice
one
down
here
by
julian
and
if
I
go
ahead-
and
I
just
grab
this
right
here-
I'm
just
gonna
copy
and
paste
directly
out
of
the
browser,
all
right
click.
Let
me
copy
that
sucker,
I'm
gonna
be
here.
I've
got
my
phase
right
so
trying
to
track
what
phase
of
the
invasion
are.
We
in
now
format
this
column
again
switch
to
advanced
mode?
I'm
just
going
to
paste
that
in
and
preview
that
that's
nice
right
now.
That's
using
these
icons
right.
These
circle
ring
and
the
skype
circle
check.
A
Now,
if
I
wanted
to
switch
that
up-
and
obviously
I
do
we're
going
to
take
that
and
we're
going
to
make
this
a
little
more
horse
friendly
all
right.
So
if
we
go
up
here
to
the
top,
let's
find
where
it
kind
of
starts.
First,
image
is
going
to
go
slightly
bigger,
so
we
can
see
it
and
then
I'm
going
to
come
down
here.
So
instead
of
icon
name,
that's
a
nice
formula
right!
This
is
how
we
determine
what
icon
it
should
be
right.
A
In
fact,
we're
going
to
just
add
text
content
here
right,
we'll
come
over
here
up
little
text
content
in
this
case
we're
going
to
take
that
same
formula
that
we
just
had
down
here
for
icon,
name,
we're
going
to
copy
it
out,
I'm
actually
going
to
just
eliminate
icon
name.
We
don't
need
that
anymore,
all
right,
so
in
this
case,
I'm
going
to
paste
that
in
here.
A
So
it's
the
same
logic
right.
So
if
it's
less
than
one
instead
of
circle
ring,
though
now
I
want
to
use
an
emoji.
So
in
this
case
you
know
what's
better
than
an
egg
right,
so
we're
going
to
use
an
egg
and
then
over
here
we're
going
to
say,
use
a
horse
if
it
passed
that
right.
So,
let's
see,
we've
got
a
nice
horse.
Look
at
that
the
emoji
respect
horses!
That's
enough!
A
We
preview
that
we
suddenly
have
an
egg
or
a
horse
depending
on
what
stage
you're
in
all
right,
so
converting
that
from
icon
name
is
too
hard.
In
fact,
I'm
going
to
go
ahead
and
take
all
these
down
here,
blah
blah,
we'll
just
go
ahead
and
paste
them
a
couple
of
times
three
four
five.
That
sounds
great,
get
rid
of
that
last
one
and
then,
of
course
we
just
say
five,
four,
three
there's
no
there's
no
rocket
launch
or
anything,
unfortunately,
but
there
we
go.
A
Let's
preview,
that
look
at
that
now,
we've
converted
it
from
using
our
icon
names
to
using
a
beautiful,
lovely
emoji
there.
So
that's
cool!
That's
one
way
to
do
it
now,
I'm
gonna
show
you
a
little
something
else
with
a
bonus
tip
here.
So
let's
go
ahead
and
save
that
close
this
one.
Let's
go
over
here
our
technique,
so
we've
got
here
a
multi-choice.
A
You
know
column
here
and
you
can
see
all
the
different
techniques
we're
using
in
the
invasion
again.
Wouldn't
that
be
much
nicer
with
even
more
emoji,
you
always
could
have
more
emoji
and
that's
a
lie
also.
So
what
we
do
here
is
I'm
going
to
grab
another
format.
So
if
I
go
back
here
so
that
was
a
good
one.
But
what
if
I
want
to
grab?
A
Let's
see
the
multi-choice
icons
all
right,
so
you
can
see
with
this
nice
one
where
we're
showing
preferences
and
a
nice
kind
of
table
again,
I'm
going
to
grab
that
copy
that
and
I'll
go
back
here
to
horses
techniques,
column,
settings,
format,
this
column
and
go
ahead
and
paste
this
one
and
let's
preview
it
now.
Obviously
we
don't
have
the
same
kind
of
styles
here.
So
one
of
the
things
I
also
wanted
to
show
to
make
this
even
easier
is
a
tool.
I
think
we've
shown
a
couple
of
times
by
sergey
sergey.
A
B
A
Right
so
I
get
intellisense,
I
get
all
sorts
of
stuff.
I
get
instant
preview
all
right.
So
as
I
change
things
it
starts
to
just
work.
In
fact,
I
can
hit
control
f
here
and
I
get
my
find
and
replace
right.
So
if
I
want
to
say
yeah
we're
not
using
water
we're
using
stabin
right,
we
can
do
that
and
I'll
just
go
and
replace
all
of
those
very
excited.
Now
you
start
to
see
it
recognizes
what
it
was
so
very,
very
cool
stuff.
A
A
Now,
let's
add
our
text
here.
That's
our
text!
Content
in
this
case
we're
gonna,
add
windows,
windows
period
right.
We
got
this
and
we're
talking
about
stabbing.
So
that's
a
that's
a
knife
for
sure.
By
the
way,
if
you
start
typing,
this
thing
will
search,
you
can
search
nice
and
easy
through
that.
So
now
we've
got
a
knife
right,
but
it's
always
showing
the
same
way
right,
because
our
we're
no
longer
are
we
able
to
apply
those
colors.
So
that's
one
of
the
limitations
in
emoji.
A
It
allows
us
to
have
lots
of
multi-colors
here,
but
we
don't
get
some
of
that
same
theme
support
here.
So
what?
If
we
took
this
same
formula
right
and
instead
of
applying
it
as
a
class?
Now
we
come
here
to
our
style
attribute
and
we
do
an
opacity
all
right.
So
we'll
do
an
opacity
here
in
this
case
we'll
paste
that
same
one
in
here.
A
But
obviously
we
don't
need
to
do
any
of
this
class
building
here
and
we're
going
to
say
if
it
has
stabbing
right,
then
we're
going
to
say
an
opacity
of
one
and
if
it
doesn't
we'll
say
an
opacity
of
say,
0.15
there
we
go
so
now
we
can
see
that
we
can
actually
use
this
stuff
in
a
really
nice
way.
So
now
I
can
go
through
and
I
can
kind
of
change
all
these
out
as
needed.
So
I'm
gonna
do
the
same
thing
where
I
just
grab
this
and
I'm
gonna
just
swap
it
out
here.
A
Bam.
Okay!
Well,
now,
okay!
So
two
three
four!
We
got
five
of
them,
yep,
five,
the
last
ones.
Now
we
got
all
knives
everywhere.
That's
not
quite
what
we
wanted
right.
So
again,
it's
really
easy
to
just
fix
this,
so
I'm
gonna
just
change
this
to
exploding
all
right,
we'll
change
this
part
to
exploding
as
well.
A
Now,
what
represents
a
good
explosion?
So
if
I
type
this
and
I
start
typing
bomb-
let's
see
yeah
there's
bomb
right.
So
I
just
type
in
bomb
there
we
go
now.
I've
got
a
nice
explosion
right
there
and
we'll
do
our
next
one
here,
which
is
seduction
right
used
by
horses
all
over
the
world
made
of
stuff
all
right.
Let's
go
up
here
and
we'll
grab
a
nice
one,
we'll
say
kiss.
There's
a
beautiful
lips
beautiful
horse
lips.
Imagine
that
moon
don't
stand
a
chance
with
horse
lips
on
the
case
all
right!
A
And,
of
course,
we
got
to
pick
a
cool
one
for
bribery,
so
we'll
type
in
money
all
right.
We've
got
a
bunch
of
different
money
options.
Let's
choose
this
guy
right
here:
money
bag
that
makes
sense,
and
then
our
last
one
right.
So,
instead
of
stabbing,
we've
got
robots
right.
So
we'll
come
down
here
now.
This
is
actually
one
area
where
there
is
an
icon
for
robots,
but
in
this
case
we're
still
going
to
use
the
emoji
all
right,
so
we'll
say
robot
there.
It
is
bam
just
like
that.
A
You'll
notice,
it's
been
previewing
the
whole
time
and
enough
to
do
anything
and
one
of
the
frustrating
things
I
want
to
also
show
that
this
this
sp
formatter
helps
solve
right.
So
when
this
is
turned
off,
if
you're
randomly
somewhere
up
there,
you
remove
something.
Maybe
you've
got
an
extra
column
somewhere.
A
It
just
tells
you
inner,
valid
column
format
json.
How
am
I
supposed
to
find
that
in
this
you
know
fairly
complex
format?
I
just
turn
that
on
I
can
see.
I've
actually
got
red
over
here
come
down
here.
It
highlights
it.
It
even
tells
me
trailing
comma
all
right.
So
I
can
just
grab
that
and
then
everything
works
again.
I
get
my
buttons
back.
It
auto
previews
fruity's
pretty
sweet.
So
I
highly
recommend
this.
I
don't
generally
show
this
in
the
call
just
because
it
is
an
extra
step
to
install
this.
A
It's
it
takes
like
10
seconds,
but
I
want
to
show
people
how
you
do
things
out
of
the
box,
but
I
think
it's
really
important
to
know
that
an
awesome
tool
like
this
is
available.
It's
free
it
installs
in
chrome,
no
problem.
In
fact,
you
can
find
that
over
here,
I'll
have
a
link
at
the
end
here,
we'll
paste
in
the
chat
for
sp
formatter
go
check
this
out
sergey's
been
on
the
call
a
number
of
times.
We
should
probably
get
him
to
come
here
and
demo
this
a
little
further
as
well.
A
Now,
okay,
so
all
that
to
say
we
got
all
sorts
of
beautiful
emojis
now
and
wow.
Now
our
invasions
can
proceed
wonderfully
right.
Things
are
nice
and
cutesy
in
our
sharepoint
list,
which
is
what
horses
love
all
right.
So
we
come
back
here.
I
will
say:
emojis
do
have
their
place,
for
instance,
we
use
them
in
the
you
see
a
little
horse
icon
showing
up
here.
We
use
them
in
the
in
github
all
over
the
place
for
our
labels
and
other
ideas
right
so
in
small
amounts.
Emoji
can
be
very
effective
right.
A
So
let's
come
back
over
here
and
review
what
we
learned
so
emoji
by
your
list
right
so
again,
lots
and
lots
of
icons
but
they're,
very
focused
on
on
specific
business
needs
or
brand
icons,
or
one
million
different
arrows
document,
icons
that
kind
of
stuff
right,
and
so
there's
going
to
be
some
gaps.
What,
if
you
want
to
put
a
unicorn?
What
if
you
want
to
put
a
lizard
right?
What
about
a
pretzel
or
a
taco?
That's
where
mojo
is
going
to
be
your
friend
right
icons
are
monochrome.
A
So
again
you
can
get
fancy
with
those
overlays.
You
can
do
a
lot.
You
can
make
them
themeable,
but
if
you
really
want
to
have
lots
of
color
emojis
are
pretty
good
way
to
do
that.
We've
also
gone
over
how
to
do
svgs
and
how
to
do
images.
Those
are
also
very
good
options
so
again
just
use
that
windows
period,
I'm
sure,
there's
something
similar
on
a
mac
whatever
you're
using
there
are
differences
between
devices
right.
So,
for
instance,
one
that
comes
up
a
lot
is
a
gun
sometimes
looks
like
a
gun.
A
Sometimes
it
looks
like
a
squirt
gun.
Sometimes
it
looks
like
a
dart
gun
right,
maybe
don't
use
gun,
that's
not
a
great
suggestion,
but
the
idea
here
is
just
be
aware
that
there
could
be
some
device
differences.
So
if
you're
doing
something
really
really
specific
with
colors,
I
don't
know
why
you're
doing
that,
but
if
you're
doing
that,
just
be
aware
that-
and
there
is
no
theme
support,
because
these
will
just
take
on
the
color-
they
are
okay.
A
A
So,
finally,
here's
some
resources
here,
there's
the
full
documentation
I'll
grab
this
here
and
paste
this
in
the
chat.
Everyone
can
go,
get
that
sp
formatter,
because
if
you
haven't
gotten
that
definitely
install
that.
Well,
that's
gigantic!
There
you
go
everybody
that
did
not
copy
well
david.
Will
you
fix
that
thanks
all
right
and
then
check
out
the
samples
I
showed
today
again
converting
those
two
emojis
on
any
of
the
icons
ones
are
pretty
straightforward.