►
Description
In this 15-minute developer-focused demo, Sébastien Levert showcases how to build a solution leveraging the Microsoft Teams Activity Feed API for sending notifications to selected users. See how activities (notifications) are gated in the manifest. Create a Kudos app (approximately 100 lines code) with appropriate Graph services permissions, layout UI using Fluent UI components, add uses out-of-box controls from Microsoft Graph Toolkit. Activity feed is now a fully supported workload. This PnP Community demo is taken from the Microsoft Teams community call – June 2021, recorded on June 15, 2021.
Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert
Supporting documents:
• Blog – Microsoft Graph Mailbag | https://aka.ms/MSGraphMailbag
• Dev Tool - Microsoft Graph Toolkit | https://aka.ms/mgt
• Library - Microsoft Graph JavaScript Client Library | https://github.com/microsoftgraph/msgraph-sdk-javascript
• Sample - Kudos App (Teams Activity Feed API) | https://github.com/pnp/teams-dev-samples/tree/main/samples/tab-activity-feed
• Blog - Microsoft Graph Mailbag – Create engaging apps with the Microsoft Teams Activity Feed API | https://developer.microsoft.com/en-us/graph/blogs/microsoft-graph-mailbag-create-engaging-apps-with-the-microsoft-teams-activity-feed-api/
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
Good
morning,
good
afternoon,
everybody
good
evening,
I'm
I'm
quite
excited
today
to
show
you
a
little
bit
of
a
sample
that
I've
been
building
to
help
some
of
the
partners
we're
working
with
utilizing
the
activity
feed
in
microsoft
teams.
My
name
is
sebastian.
I
am
a
senior
program
manager
on
the
microsoft
graph.
I
am,
I
used
to
be
a
hardcore
developer
turned
into
a
product
manager,
so
I'm
I'm
still
and
that's
why
I
love
to
do
these.
A
These
samples
here
to
kind
of
stay
connected
to
the
technology
stay
connected
to
developing
I've
been
a
long
time
community
member
awarded
mvp
six
times,
and
now
I
am
working
on
the
microsoft
graph
team
as
part
of
microsoft
to
help
partners
and
customers
take
advantage
of
microsoft
graph
as
the
api
gateway
to
all
of
your
microsoft.
365
data
a
little
bit
of
history
here
on
on
why
we
came
up
with
these
this
small
simple
that
I'm
going
to
show
today.
A
A
So
let
me
show
you
what
I'm
talking
about
here.
So
let
me
go
here.
Let
me
do
this
here
and
let
me
do
this
right
here.
There
we
go
so
now.
I
have
an
application.
This
application
is
a
kudos
application,
meaning
that
it,
you
can
send
to
your
colleagues
thumbs
up
on
the
great
work
that
they've
been
doing
with
you.
A
A
A
A
Thanks
for
being
awesome,
I'm
gonna
hit
submit.
It's
gonna,
send
my
kudos
using
the
microsoft
graph
to
adele
now
adele
just
received,
and
you
see
it
there's
a
new
small
notification
on
the
bell
and
the
activity
bill,
and
there's
also
a
toast
notifications
that
you
were
able
to
see
at
the
bottom
right
and
when
I
go
see
the
activity
I
will
actually
in
the
notification.
I
will
see
that
sebastian
sent
you
a
kudos
for
extra
mile
with
the
message
thanks
for
being
awesome.
A
So
these
are
the
types
of
capabilities
that
you
can
build
within
your
own
applications
to
really
bring
people
back
to
your
application.
Keep
in
mind
that
these
notifications
are
very
contextualized
to
where
you
want
the
user
to
be
in
team.
So
if
you
want
to
bring
the
user
to
a
specific
channel
tab
because
there's
something
new
for
that
user
in
this
context,
you
can
do
it
if
you
want
to
bring
your
user
to
a
personal
app
where
you
want
to
signify
that
there's
something
new
for
them.
You
can
also
do
that.
A
A
We
built
a
couple
of
weeks
ago,
a
full
sample,
so
all
of
the
code
I'm
showing
today
is
available
online.
I'm
going
to
see
all
the
links
afterwards,
if
you're
going
to
be
able
to
follow
with
this
guide
part
of
the
microsoft
graph
mailbag,
which
is
a
series
of
blog
posts,
we're
making
on
the
microsoft
graph
to
help
you
with
simple
tasks
with
graph,
but
to
really
enrich
your
apps.
And
if
you
go
through
this
one,
you
can
learn
how
to
create
engaging
apps
with
the
microsoft
teams
activity
feed
api.
A
A
First,
let's
start
with
our
manifest
each
team's
app
has
the
manifest
representing
the
description,
the
title,
the
colors,
the
icons,
the
tabs,
the
bots
and
everything.
But
since
we
have
the
activity
information
available
now,
there's
also
an
activities
area
where
each
app
can
predefine
which
type
of
activity
they
support,
and
this
is
really
important
because
you
cannot
just
start
sending
random
notifications
to
anybody
in
microsoft.
Teams
that
user
needs
to
have
an
app
the
app
you're
targeting
needs
to
be
installed
on
their
on
their
own
teams.
A
Client,
but
also
you
have
to
define
what
are
the
messages,
and
here
here
you
see,
you
can
only
send
a
kudos
to
a
user.
So
it's
a
very
railed
experience
so
that
way,
you're
not
going
to
be
able
to
start
spamming
users.
Just
for
the
sake
of
spamming,
you
really
need
to
control
how
notifications
will
happen,
and
that
is
great,
because
that
really
brings
a
sentiment
of
choice
and
also
these
can
be
turned
on
or
off
as
part
of
the
team
notification
setting.
A
So
you
can
decide
that
you
want
to
enable
or
disable
some
of
these
notifications
based
on
how
chatty
they
might
be
with
you.
So
that's
the
first
thing
you
want
to
do
you
want
to
say:
hey,
I
will
be
using
this
activity
and
I
want
teams
to
react
when
a
new
activity
is
sent
when
this
user
has
this
app
installed.
So
that's
the
first
thing.
The
second
thing
is
to
actually
build
the
app
so
couple
of
areas
that
I
want
to
focus
on
here.
A
So
if
I
go
back
to
my
app
here-
and
I
look
at
here-
the
people
picker
is
this
one
and
the
login
control.
Is
this
one
on
the
right?
So
these
are
the
permissions
these
ones
here
are
the
permissions
that
are
used
to
kind
of
run.
My
ui
get
two
other
permissions
are
permissions
that
are
required
to
be
able
to
build
my
notifications,
the
first
one
is
the
ability
to
request
that
I
want
to
send
a
team's
activity
and
also
I
want
to
be
able
to
read
all
the
apps
that
exist
in
the
app
catalog.
A
The
thing
that
I
think
is
the
most
important
right
is
this
one
at
the
end
is
the
button
is
when
I
click
send
notification.
What
is
happening
when
I
send
a
notification?
This
is
where
I
do
a
lot
of
my
microsoft
graph
calls.
So
let
me
go
on
the
send
notification
right
here
looks
like
I'm
awaiting
that
method.
Here,
I'm
going
to
go
right
here
and
it
looks
like
I'm
going
to
need
the
graph
service,
which
is
a
service
that
I
use
for
connecting
to
graph
which
basically,
in
that
case
here,
sends
a
notification.
A
A
What's
the
idea
of
the
app
that
I'm
looking
for,
which
is
the
app
that
I
know
of
which
is
the
app
that
was
deployed
to
the
users,
so
I
can
get
this
app
id
here
and
then
afterwards,
if
I
have
an
app,
so
if
this
app
was
installed,
I
will
be
simply
sending
to
the
target
user,
the
user
that
I
selected
in
the
people
picker,
I
will
be
sending
a
notification
using
the
api
user.
Slash
id,
slash,
teamwork,
slash,
send
activity
notification,
I'm
going
to
send
a
post
message
or
I'm
going
to
have
a
topic.
A
First
topic
is
of
type
text.
The
value
is
either
the
name
of
the
category.
In
that
case
I
selected
extra
mile
or
if
I
don't
select
one
it's
going
to
be
called
just
kudos
app
and
a
url.
The
url
is
where,
when
I
click
on
the
actual
notification,
where
am
I
redirected
and
that's
why,
when
I
click
on
the
notification,
I
was
brought
back
directly
to
my
app.
A
So
if
I
go
here,
for
instance-
and
I
go
back
to
my
activity
here
when
I
click
it
actually
loads,
my
app
because
it
knows
exactly
what's
the
app
id,
what's
the
tab
name
and
everything-
and
here
I
just
specify,
what's
the
activity
type-
that
I
want
to
do
what's
the
text,
which
is
the
message
that
the
person
did
and
I'm
sending
it.
So
without
a
lot
of
lines
of
code,
maybe
a
couple
of
like
maybe
100
lines
of
code.
A
A
couple
of
links
you
might
want
to
have
a
look
into
for
microsoft,
graph,
the
sdk,
the
microsoft
graph,
sdk
javascript,
the
actual
pnp
sample
here
that
you
can
use
and
start
building
with,
and
finally,
the
blog
post
that
I
just
shared
earlier
to
get
you
you
guys
running
and
be
able
to
start
playing
around
with
this
activity.
Feed
api
over
to
you,
visa.
B
Thank
you,
sebastian
awesome
work
and
microsoft.
Graphics
is
first
of
all
microsoft.
Graph
apis
are
awesome,
but
then
all
of
this
abstraction
which
we've
been
able
to
implement
on
top
of
those
apis
like
the
microsoft
craft
toolkit,
it's
just
gonna
speed
up
the
development
so
much
and
make
the
development
much
much
much
easier
for
people
so
awesome
stuff
on
the
craft
toolkit
by
the
way.
Just
a
reminder:
every
we've
been
hearing
this
quite
quite
often
that
yeah,
but
it's
the
ux,
isn't
really
good.
It's
temp.