►
Description
In this 14-minute developer-focused demo, João Ferreira shows how to expose Microsoft To Do (task list) capabilities and similar UI, in Microsoft Lists and in SharePoint. Step through creating a list, tasks, and a To Do view. Review view formatting code for groups, status, title, date, description/notes, tags, attachments, comments, favorites, item detail, edit form, update details, delete task. Very soon the ~500 lines of code for this insertion will be made available in a template in the PnP List Formatting repo. This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on March 3, 2022.
Demo Presenter: João Ferreira (Beezy) | @joao12ferreira
Supporting materials:
• Article - How to create a To Do list using SharePoint and Microsoft Lists view formatting – Part 1 | https://lists.handsontek.net/create-list-using-sharepoint-microsoft-lists-view-formatting-part-1/
• Samples - List of View Formatting Samples | https://pnp.github.io/List-Formatting/viewsamples/
• Blog – HANDS ON tek | https://handsontek.net/blog/
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
Hello:
everyone,
my
name
is
ron
fajard,
I'm
an
office,
development,
mvp
and
a
technical
lead
at
busy.
Today,
I
want
to
show
you
what
is
possible
to
do
with
microsoft,
lists
formatting
and
to
show
all
the
potential
of
this
platform.
I
bring
you
a
custom
list,
formatting
that
I
did
to
replicate
the
functionality
that
exists
in
microsoft
to
do,
but
using
microsoft
list.
So
for
those
of
you
that
are
not
familiar
with
microsoft.
A
To
do
and
what
microsoft
to
do
is
here
is
a
brief
description
of
what
to
do
does
so
it's
a
simple
tool
that
allows
you
to
add
your
tasks.
Complete
them
set
due
dates.
Categorize
them
add
attachments
and
mark
them
as
favorites
to
move
them
all
the
way
to
the
top
of
your
list.
So
this
is
what
I'm
aiming
to
implement
using
microsoft
lists
in
this
image.
A
A
With
this
in
mind,
I
came
to
this
list
definition.
There
are
a
few
extra
columns
other
than
the
default
title
that
you
will
have
to
define.
We
don't
need
to
create
columns
to
all
the
things
we've
identified
and
we've
seen
here
before
in
the
to
do
as
some
of
them
are
built
in
in
the
microsoft
list
platform.
So
title
it's
there
by
default.
A
When
you
create
a
new
list,
then
we
will
need
a
new
description
column
as
a
multi-line
of
text,
a
category,
it's
a
choice,
column,
so
you
will
be
able
to
define
whatever
categories
you
want
to
a
due
date
to
make
all
the
comparisons.
So
we
can
then
see
dates
displayed
with
different
font,
weights,
colors
and
so
on,
and
two
yes
or
no
columns.
We
want
to
mark
it
as
important
and
another
one
to
mark
it
as
completed
the
last
one
here,
the
calculated
column,
the
date
calculated
column
as
a
single
line
of
text.
A
It
is
used
just
to
display
the
dates
in
the
same
format
that
microsoft
to
do
uses.
So
if
I
go
back
here,
as
you
can
see
the
date
in
to
do
and
the
date
in
microsoft,
list
is
displayed
exactly
in
the
same
format
and
behind
the
scenes.
This
is
the
trick
that
is
doing
that
formatting
for
all
the
comparisons.
We
will
rely
on
the
due
date
column.
A
So
once
you
get
the
list
definition
complete.
This
is
what
you
will
see
still
very
far
away
from
the
to
do
list,
but
one
step
closer
from
achieving
something
that
will
allow
you
to
manage
your
tasks.
So
we
will
proceed
to
continue
our
implementation,
so
the
next
step
is
to
create
a
to-do
view,
and
these
two
views
will
sort
the
items
by
favorite
and
then
by
due
date.
A
A
There's
data
already
in
here.
There
are
two
different
groups,
but,
as
you
can
see,
the
status
say
yes,
and
no
it's
not
that
good.
Looking
as
microsoft
to
do,
but
again
already
working
and
you
are
able
to
track
your
tasks
using
this
list
layout,
but
let's
get
into
the
fun
part
the
formatting
that
I'm
about
to
show.
You
has
around
500
lines.
I
will
not
go
through
every
single
line,
but
I
highlighted
the
main
features
that
this
formatting
has,
and
I
want
to
mention
some
of
the
things
that
I
think
are
important.
A
So,
starting
with
the
groups,
I
use
the
group
properties
here
to
format
these
two
groups,
and
what
I
have
in
here
is
the
background
color
defined
as
the
theme
primary
color.
This
means
that
this
color
here
will
be
adjusted
automatically
to
the
theme
on
the
sharepoint
site,
where
the
list
is
added
or
to
the
theme
of
microsoft
list.
A
If
you
are
viewing
the
list
inside
of
lists
and
then
in
this
previous
slide,
as
you
can
see,
the
status
say
yes
and
no,
so
I
want
to
format
this
properly
to
say
to
do
and
complete
followed
by
the
number
of
items.
The
number
of
items
is
not
here
in
the
code,
but
it's
also
covered
in
this
set
in
this
section,
but,
as
you
can
see
here,
if
the
group
field
data
display
name
is
equal
to
yes,
then
it
prints
completed.
A
Otherwise
it
produced
to
do
and
that's
exactly
what
we
see
here
so
first
part
explain
now:
let's
move
forward
to
the
status
and
the
status
is
this
option
over
here
that
allows
you
to
complete
one
of
the
tasks
and
to
do
this
without
going
to
the
task
and
without
going
to
the
item
and
change
the
value
directly
in
edit
mode.
This
is
using
the
custom
row
action
with
a
set
value
that
changes
the
status
value
stored
in
this
particular
column.
A
The
title:
it's
pretty
straightforward,
it's
what
we
have
over
here,
it's
just
displaying
and
showing
what
is
in
the
title
column.
The
date
is
a
bit
more
complex,
and
here
we
can
observe
what
I
mentioned
in
the
list,
definition
where
we
are
using
the
due
date
and
the
date
columns
to
format
the
date
value.
So
we
have
different
font
weights.
We
have
different
date
formats
and
we
have
different
colors
so
for
tasks
that
are
overdue.
You
will
see
the
font
weight
increased
and
this
the
date
displayed
in
red
for
the
tasks
that
happened
today.
A
There's
a
conversation
here
between
the
due
date
and
the
date
of
the
current
day
and
if
it
matches
then
it's
displayed
as
today
and
in
blues
and
four
tasks
that
are
completed,
we
can
see
either
due
and
the
name
of
the
the
date
and
or
overdue
and
the
date
depending
if
the
due
date
has
already
happened
or
not
for
the
next
section
and
I'm
referring
here
to
five
six
and
seven
notes,
tags
and
attachments.
That
is
this
area
here.
The
first
two
five
in
six
only
display
the
information
that
exists
in
the
list.
A
So
it
displays
this
icon.
If
there's
a
note
or
a
description
added
to
the
item
same
thing
for
the
tag,
but
this
one
the
attachment
is
a
bit
different
from
the
formatting.
I
don't
have
access
to
the
attachments
to
the
item,
but
I
know
that
there
are
attachments
there,
so
this
icon
here
will
allow
the
user
to
click
on
it
and
it
will
open
the
item
pane.
So
the
user
will
be
able
to
interact
directly
with
the
attached
files
and
download
or
open
them
if
needed.
A
The
comments
and
the
favorites
again
those
two
options
here-
use
the
same
custom
row:
action
one
with
default:
click
to
open
the
item,
pane
to
display
the
comments
and
another
one
to
mark
the
item
as
favorite
and
to
move
it
all
the
way
to
the
top.
So
the
comments
have
two
different
status
like
the
favorites
and
the
comments
with
color
and
with
this
icon
means
that
the
list
item
have
comments.
So
it
indicates
a
user
that
if
he
clicks
here,
the
pane
will
open
and
will
reveal
everything.
A
A
Last
but
not
least,
we
have
this
section
here
that
reveals
all
the
information
about
an
item.
So
we
have
item
detail
the
edit
form
inside
of
the
item
and
the
created
and
updated
deletes,
as
well
as
the
delete
task
button.
So
number
11
here
allows
you
to
easily
edit
the
title,
the
description,
the
due
date
and
the
category
without
editing
the
item.
So
if
you
click
in
this
area
here,
you
will
be
able
to
inline
edit
everything.
A
The
number
12
will
show
the
creative
date,
the
user
that
created
the
item,
the
updated
date
and
the
user
that
last
updated.
The
item
number
13
will
delete
the
item
directly
from
here,
and
all
of
this
is
wrapped
in
the
custom
card
props
and
for
the
delete
item,
like
the
ones
we've
seen
before.
There
is
a
custom
row
action,
but
the
action
value
this
time
is
delete
and
this
will
delete
the
entire
item
from
the
list,
but
better
than
seeing
this
exploit
here
is
seeing
this
in
action.
A
So
I
will
quickly
bring
up
here
the
list
in
microsoft
lists,
and
this
is
what
I've
been
showing
you
here.
So
as
you
can
see,
there
are
a
couple
tasks
here
that
are
already
completed,
but
as
I
move
and
as
I
move
my
mouse
around,
you
see
things
happening
and
I'm
able
to
easily
interact
with
these
items
from
here,
I'm
able
to
change
the
title
change
the
category
to
something
else,
and
all
this
is
done
without
opening
the
item
detail
for
the
attachments.
As
I
mentioned,
this
opens
the
item.
A
So
once
you
get
the
500
lines
of
code
and
if
you
want
to
then
apply
them
to
your
list,
all
you
have
to
do
is
go
here
to
the
view
selection
and
from
here
select
the
format
current
view
and
paste
the
code.
One
important
thing
that
you
should
take
into
consideration
is
that,
if
you've
changed
or
if
you've
created
columns
with
different
names,
then
you
will
have
to
adjust
those
in
the
code,
so
the
formatting
matches,
with
the
name
of
your
columns,
this
sample
will
be
soon
available
in
the
pnp
repo.
A
For
now,
it's
not
there
yet,
but
it
will
be
in
a
matter
of
few
days
if
you
want
to
get
the
code
now.
The
only
thing
you
will
need
to
do
is
go
to
my
blog
downloads,
the
code
from
there
handsomely.net
and
as
a
bonus
I
have
there
is
a
powershell
script
that
allows
you
not
only
to
get
the
list
installed,
but
also
deploy
it
as
a
template
from
your
organization,
so
other
users
can
take
advantage
of
the
formatting
without
the
need
of
replicating
all
these
manual
steps.
A
So
here
is
the
link
for
the
first
article,
where
this
entire
process
is
explained
and
soon
it
will
be
available.
Also
in
this
github
repository.
If
you
have
questions
about
this
formatting,
you
can
reach
me
directly
on
twitter
and
again
go
to
amazonlist.net,
and
you
will
find
this
sample
and
a
lot
more.
That
will
help
you
to
take
more
out
of
microsoft
lists
in
just
a
few
weeks.
Bye.