►
Description
In this 12-minute Maker focused demo, Luis Mañez uses a SPFx Outlook Add-in and Microsoft Graph ToDo endpoint (in preview) to add a To-Do task to one of the users’ task lists in Outlook. This Add-in uses the SPFx CreateTask Web part to call graph. Of course, you may use the SPFx web part in Outlook, Sharepoint or in Teams. The presenter delivers a complete step-by-step on deploying the Outlook Add-in. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 16, 2020.
Demo Presenter: Luis Mañez (ClearPeople) | @luismanez
Supporting materials:
• Create To-Do Task from Email (Outlook Add-in) | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-outlook-add-todo-task
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
My
name
is
luis
magnet.
I
work
as
a
chief
architect
for
two
people
and
I'm
an
office
dev
mvp,
so
you
can
see
they're
my
social
networks
so
just
feel
free
to
pin
me
if
you
have.
If
you
have
any
questions,
so,
let's
jump
into
the
sample,
the
samples
have
been
already
emerged
and
it's
available
into
the
github
repo.
So
we
have
a
react
outlook
up
to
the
task
sample
under
and
well.
It's
documented
on
how
you
can
install
and
use
it
and
so
on.
A
So
yes
feel
free
to
take
a
look
and
well,
let's
see,
let's
see
it
actually
in
in
action.
So
if
we
go
to
the
outlook,
this
is
an
spfx
deploy
as
an
outlook
cabin
and
the
idea
is
that
we're
gonna
create
different
tasks
in
the
in
the
to-do
app
from
an
email
and
well,
as
you
likely
know
a
couple
of
months
ago
in
latest
build
and
microsoft
released
the
preview
of
the
to-do
endpoint.
A
A
So
the
thing
is
that
when
you
see
now
look,
maybe
you
know
that
there's
a
flag
functionality
and
there's
an
integration,
there's
already
an
integration
between
outlook
and
and
the
to
do
application.
But
if
we
flag
an
email
at
some
point,
it's
gonna
end
up
into
this
list.
Flash
email,
it's
gonna,
take,
maybe
one
or
two
minutes
but
after
yeah
you
can
see
here
so
is
creating
a
attack
in
the
flat
email
list
and
with
some
info
like
the
title
from
the
subject
and
so
on.
A
So
that's
cool,
but
I
thought
it'd
be
a
good
idea.
Maybe
if
you
can
select
the
list
that
you
want
to
use
for
creating
the
task
or
maybe
even
update
the
title
for
before
creating
the
task.
So
what
I
did
is
I
created
an
spfx
webpart
deployed
as
a
as
an
outlook
adding
so
here
you
can
see.
There's
a
2pmp.
A
Then
adding
is
getting
the
different
lists
that
I
have
in
my
in
my
to-do
app.
So
there's
the
relator
community
task
on
flag
email.
So,
as
you
can
see
here
in
this
email,
I
have
a
bunch
of
different
links
that
I
have
to
review.
So
let's
send
it
to
the
to
relate
the
list
and
then
I
can
change
the
the
title
in
this
case.
I'm
getting
the
title
from
the
subject
on
the
image.
So
let's
create
a
task.
A
A
So
from
outlook
directly
we
can
select
them
a
list
and
we
can
edit
the
title
if,
if
we
want
so
before,
diving
into
the
source
code,
let's
take
a
look
to
the
to
the
different
actions
that
we
can
do
in
the
to-do
endpoint,
because
actually
this
is
still
in
preview.
It
was
from
latest
beer.
So
it's
not
very
well
documented.
Yes,
yet
to
be
honest,
so
let's
take
a
quick
look.
We
have
a
to
do
endpoint
here.
A
So
if
we
call
the
the
list
in
the
in
the
to-do
endpoint,
if
my
access
token
is
still
valid
and
it
is
yeah,
so
we
are
getting
the
list
of
the
different
lists
that
we
have
in
the
in
the
to
do
application,
flag
emails
tasks
community
and
to
read
data
and
to
get
the
task
of
a
specific
list.
You
have
to
call
the
same
to-do,
endpoint
list
and
specifying
the
id
of
the
of
the
list
and
then
the
task
actions.
So
if
we
send
this,
we
are
getting-
and
this
list
was
there
really
later.
A
So
we
have
just
a
couple
of
tasks
as
you
can
see
here,
and
if
we
want
to
create
a
task
in
the
in
a
specific
list,
then
we
need
to
do
a
post
request
to
this
specific
list
id
and
the
task
action
and
in
the
body
we
need
to
specify
some
some
json
I'm
using
these
spheres.
That
are
much
more,
that
you
can
specify
and
the
ones
are
documented.
A
And
so,
as
you
can
see
here,
this
is
the
the
preview
documentation
from
the
graph
and
there's
a
to-do
task
in
in
preview.
But
most
of
the
links
are
actually
redirecting
to
the
outlook,
because
I
guess
there
are
selling
some
resources
so
in
order
to
create
a
task.
Actually
it's
the
same
object
that
when
you
create
an
old
loop,
an
outlook
that
so
I'm
setting
some
some
json
and
if
you
post
it
you're
gonna,
create
one
in
the
in
the
list.
It's
creative
and
should
be
and
should
be
there.
A
A
A
So
here
you
can
do
quite
interesting
things
so,
for
instance,
instead
of
creating
the
task
just
using
the
the
subject,
maybe
you
can
call
the
azure
cognitive
services
and
extract
different
tags
from
the
body
of
the
email
and
you
can
use
the
task
later
for
for
creating
the
task
and-
and
things
like
that,
so
you
can
do
quite
interesting
things
on
on
here.
In
this
case,
I'm
just
getting
the
the
subject
of
the
of
the
email
and
then
we
are
sending
that
custom
create
as
context
to
a
create
task
react
component.
A
So
if
we
take
a
quick
look
to
the
creators,
react
component
and
basically
initially
we
are
setting
the
title
of
the
of
the
task
from
the
from
the
context,
and
if
we
have
the
subject
from
the
email
we
set
it
to
that
value.
Otherwise
we
just
set
a
default
value
and
then
we
have
the
get
to
the
list
method.
So
we
are
calling
the
lists
action
in
the
in
the
to-do
endpoint
to
get
the
different
list
in
the
in
the
drop-down.
A
So
I
can
select
the
the
list
where
I
want
to
create
the
task,
and
then
we
have
well
some
some
render
code.
There's
nothing
interesting
on
here
and
there's
another
method.
That
is
the
one
that
we
create
the
task
when
we
already
selected
them
a
list
that
we
want
to
use
and
we
have
the
the
title
from
the
from
the
email
subject
or
because
we
updated
it
and
then
we
just
do
a
post
request
using
the
list
id
that
is
coming
from
the
drop
down.
A
And
then
we
are
setting
the
json
body,
as
we
just
saw
in
in
postman,
sending
the
request
and
then
the
task
is
is
created.
As
I
said
as
an
spfs
web
bar,
this
can
also
obviously
works
in
a
in
a
sharepoint
page,
so
you
can
see
it
in
action.
Obviously
we
don't
have
an
email
here,
so
the
title
is
the
just
a
constant.
A
As
with
any
other
spfx
solution,
then
deployment
and
then
later
you
need
to
edit
a
file
that
is
here
in
this
office
adding.
So
this
is
the
the
xml
the
manifest
for
the
outlook
adding-
and
here
you
need
to
update
some
value.
You
have
to
replace
some
tokens.
For
instance,
the
component
id
with
your
web
part
webpart
id
and
some
others
is
really
well
documented
in
in
microsoft,
but
just
to
take
a
quick
look
and
once
you
have
the
the
xml,
you
just
need
to
go
back
to
outlook
and
you
can
go
here.