►
Description
In this 13-minute developer-focused demo, Thomas Gölles – uses a Gamefication approach for displaying activity from a Microsoft Teams channel. This sample uses TeamsFx for scaffolding a Teams Blazor project, calls Microsoft Graph to retrieve messages and reactions and a simple UI to visualize the Leaderboard. Populate dropdowns with Team and Channel IDs. App counts and returns score data for evaluated activities (messages initiated, reactions, responses) for user selected activity in targeted Teams Channel. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on September 30, 2021.
Demo Presenter: Thomas Gölles (Solvion) | @thomyg
Supporting materials:
• Documentation - Prerequisites: Get started with Microsoft Teams app development | https://docs.microsoft.com/en-us/microsoftteams/platform/get-started/prerequisites?tabs=vs
• Issues – OfficeDev/TeamsFx | https://github.com/OfficeDev/TeamsFx/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc
• Video demo - Getting stated with Microsoft Teams Toolkit and Blazor | https://www.youtube.com/watch?v=WPnZgcjr6PI
• Article - Recognize active team members with the CLI for Microsoft 365 | https://www.cloudappie.nl/recognize-active-team-members-cli-microsoft-365/
• Repo - TeamsLeaderboard | https://github.com/thomyg/TeamsLeaderboard
• Video - Getting started with Blazor for Teams Development - E32 | https://www.youtube.com/watch?v=nqCZLTm_ues
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
There's
the
teams
toolkit
for
visual
studio
code
that
is
based
on
top
of
your
well-known
and
respected
technology,
from
typescript
node.js
javascript
to
create
applications
that
way,
and
there
is
also
an
option
to
got
to
the
netway
using
blazer
for
which
is
studio
2019
and
that's
something
we're
going
to
focus
today.
So
that's
teams
fx.
A
We
already
had
a
pnp
call,
I
think,
a
couple
of
weeks
ago,
so
I'm
not
doing
the
totally
introduction,
but
there
are
links
in
the
presentation
to
videos
and
articles
that
really
get
you
going,
but
today
we
want
to
make
an
example,
and
for
that
example,
we
want
to
set
the
reference
right
and
make
a
short
business
case
in
in
the
dream
world.
There
is
the
mindful
team's
consultant
him
or
her
doesn't
matter
sitting
somewhere,
nice
and
thinking
of
what
is
really
needed
and
what's
really
needed
is
happy.
A
You
need
to
be
a
little
bit
careful,
because
if
there
are
winners,
there
are
also
people
on
the
other
side
of
the
table,
so
be
careful,
and
my
parents
always
told
me
that
you
can
learn
nothing
from
watching
movies
and
actually
that's
false.
When
you
see
that
quote
enough
from
powerpoint,
let's
right
dive
right
into
the
demo,
the
leaderboard
is
running
in
the
back
already.
Here
is
a
teams
application?
I'm
going
to
show
you
the
application
up
front
and
then
we
can
walk
through
the
code.
A
A
We
have
this
scoring
lab
channel
here
and
you
see
there
are
yeah
channel
messages,
replies
interactions
with
with
emojis
and
all
the
typical
stuff
that
you
do
in
a
channel
and
the
leaderboard
actually
counts
all
those
things.
So
we
give
different
amount
of
points
for
messages.
We
give
points
extra
points
for
a
message
with
a
subject
because
everyone
likes
to
have
proper
subject
in
the
team's
channel
and
of
course
we
have
reactions
here.
A
So
when
I
ask
chris
just
copy
one
of
his
last
tweets
over
here
to
really
have
something
powerful
to
say
to
my
rather
senseless
comment.
So
I
post
it
here
and
if
I
switch
back
to
my
other
view,
you
see
here
at
first.
Of
course
I
get
the
information,
I'm
switching
back
and
just
have
1413
here,
switching
back
to
channels-
and
you
see
I
got
more
points
now.
So
that's
a
live
grabbing
all
the
channel
messages
and
going
through
that
and
counting
all
the
different
scores
how's
that
built.
A
Let's
stop
the
debugger
for
a
second
that's
actually
built
with
teams
fx
the
component
you
get
when
you
install
the
team's
toolkit
for
visual
studio.
How
do
you
do
that?
You
click
on
manage
extensions
over
here
and
just
search
for
teams
and
be
careful.
Take
the
team's
toolkit
preview.
There
is
a
different
one
for
teams.
Also
that's
outdated,
but
the
team's
toolkit
preview
is
the
one
that
you
want
to
have.
A
You
need
to
do
that
still
in
visual
studio,
2019.,
it's
not
available
yet
in
visual
studio,
but
you
can
start
your
solution
here
and
then
open
it
with
the
new
version
as
well
to
make
all
the
fun
with
hot
reload
and
dotnet
6
working.
But
for
today
we
stay
with
the
with
the
simple
version
in
dot
net
5..
It's
one
tab
here.
So
it's
a
simple
tab
that
uses
some
some
components
that
are
open
sourced.
I'm
not
100
sure
how
to
pronounce
that.
A
So
I
leave
that
out,
but
there's
a
data
grid
and
some
columns
that
is
actually
the
the
the
board
and
there
are
two
drop
downs
with
values
and,
of
course
the
the
drop
down
is
gonna
pop
are
populated
at
the
beginning
with
our
teams.
So
when
we
at
first
render
the
page
at
first,
we
gonna
set
up
teamsfx,
that's
actually
a
class,
a
helper
class
that
comes
with
the
team's
toolkit,
it's
down
here,
teamsfx.
So
if
you
trade
a
new
project,
you
already
get
the
project
scaffold
that
way.
A
In
that
case,
I
only
added,
I
think,
60
or
80
lines
of
code
in
there.
So
the
structure
is
the
same
when
you
start
now,
and
it's
also
already
creating
this
first
on
after
in
the
async
method.
So
you
just
need
to
add
your
own
code
here
and
my
code
down
is
here.
So
I'm
adding
a
get
teams,
method
and
the
get
teams
method
gets
a
graph
service,
client
and
the
graph
service
client
is
also
something
you
get
from
the
team's
toolkit.
Basically,
it's
already
authenticated.
A
It
is
using
a
single
sign
on
how
does
this
work
when
you
start
first
time
with
your
team's
fx
project,
go
to
project.
You
have
this
point
teams
fx
here
and
you
can
click
configure
for
sso
and
with
that
click,
the
visual
studio
instance
will
ask
you
for
your
identity,
the
first
time,
so
that
should
be
the
identity
of,
hopefully,
your
development
tenant,
because
with
that
account
you
need
to
have
permissions
to
create
teams
applications
and
you
need
to
have
the
permissions
to
create
azure
active
directory
applications
in
your
azure
tenant.
A
If
I
go
back
to
my
tab.razer
file
and
make
the
switch
to
the
top,
you
see
page
tab,
that's
the
laser
or
razer
way
to
tell
the
system.
Okay,
I
want
to
be
in
this
route
and
going
back
to
the
graph
client.
As
this
already
is,
everything
is
configured
here.
We
have
single
sign
on
in
place.
We
just
can
call
the
graph
service
client
behind
the
scene.
What
is
happening?
A
Teams
fx
in
the
laser
way,
is
basically
a
wrapper
component
using
javascript
interoperability
between
laser
and
the
teams
sdk,
and
they
are
using
the
team's
javascript
sdk
in
the
background
to
get
your
bearer
token
and
if
you
double
click
on
the
graph
service
client
in
the
end
of
the
day,
javascript
code
grabs
your
token
using
the
sso
behavior
of
the
teams
sdk
and
then
it
hands
over
to
the
net
graph
client
and
says:
okay,
let's
create
a
new
craft
clan.
I
already
have
a
better
token
for
you.
A
Let's
use
that
and
then
we
have
craft
land
here
and
with
that
client
we
can
just
go
and
list
all
our
teams
very
simple
need,
join
teams
and
get
back
and
then
sort
it
to
have
it
properly
nicely
sorted
in
our
drop
down
and
from
there
we
only
need
to
add
code.
That
does
something,
of
course,
when
the
teams
drop
down
changes.
A
When
that
happens,
we
gonna
search
for
all
the
channels
in
that
selected
team,
and
then
we
gonna
do
something.
When
you
select
something
in
your
drop
down
from
the
channels,
because
you
first
select
your
team,
then
you
select
the
channel
and
from
there
we
can
start
and
load
score
data
and
the
score
data
basically
is
then
going
to
go
and
say:
okay,
I
know
now
the
team
id
I
have
the
channel
id
from
my
selection
from
the
drop
down.
A
I
kept
the
starting
point
there,
because
all
you
what
you
see
here
is
already
up
on
github
and
for
reference
just
to
get
started
very
quickly
or
for
developing
purpose.
It
makes
sense
to
sometimes
start
quickly
provide
your
team
id,
provide
the
challenge
and
you're
sure
and
you
don't
need
to
double
click.
All
the
selection
points
so
hard
coded
values
are
also
possible,
of
course,
and
then
you're
going
to
fetch
all
the
messages
and
for
all
the
messages
we're
going
to
look
for.
Okay.
Does
the
message
have
a
subject?
A
If
the
subject
is
not
now,
then
their
subject
exists
and
then
we
say
score
from
the
user
id
from
username,
and
then
we
have
a
sophisticated
scoring
model.
That
basically
says
I
think,
7
for
a
message
with
a
subject,
and
we
add
that
through
so
with
subject
with
other
subject
and
then
we
are
counting
reactions,
but
we
want
to
have
all
the
messages
and
all
the
replies,
also
in
our
calculation.
A
It
always
wants
to
install
the
app
in
a
new
way
and
then
it
will
load
here.
I
can
select
the
pnp
theme
again.
I
have
my
channel
here
and
we
get
back
the
resources
or
the
the
results
again.
So
that's
it
from
from
where
we
are
at
the
moment,
so
wrap
it
up
what
you,
what
you
saw
actually
is
a
teams
application
using
teams
fx
for
scaffolding,
a
blizzard
project.
A
We
called
graph
to
retrieve
messages
and
did
some
counting
and
counted
messages
in
a
certain
way
to
create
a
leaderboard
and
created
a
small
component
to
make
that
available
as
a
tab
from
there.
What
can
we
do?
Next?
We
could
also
add
code
to
make
that
not
only
a
static
tab,
but
also
a
tab
for
a
channel
so
that
it's
not
an
application,
that's
bound
to
a
person
but
more
to
a
channel.
So
we
get
the
environment
and
could
easily
just
target
one
channel.
A
We
could
add
notifications
about
leaders
and
channel
messages
with
adaptive
cards
or
bot
messages.
We
could
notify
winners
and
the
most
interesting
part
for
myself
and
that's
just
a
preview
and
and
yeah
something
that
is
coming
the
next
weeks.
If
we
move
that
all
over
2.06
and
we
use
the
power
of
blazer
and
maui,
we
can
make
applications
that
are
running
in
teams
using
a
library
component
from
blazer,
and
the
simplication
then
can
be
surfaced
in
ios
and
android
and
desktop.
But
that's
something
I'm
looking
forward
to
over
the
next
weeks.