►
Description
Viva Connections & SharePoint community call on May 4th.
Two demos: Building Conversation search experience for Microsoft Teams with SPFx and Replicating the Quick Links web part for extensibility.
Two project releases: CLI for Microsoft 365 – v6.7 (GA), Microsoft Graph Developer Proxy – v0.7 (GA), plus 2 conversations in the last week.
Please see the blog post for this call for project updates, news and events details. The host of this call is Garry Trinder (Microsoft) | @garrytrinder. Q&A takes place as always in chat throughout the call.
Agenda
00:00 – Intro – Garry Trinder (Microsoft) | @garrytrinder
10:14 – PnPjs Client-Side Libraries – Garry Trinder (Microsoft) | @garrytrinder
11:10 – CLI for Microsoft 365 – Garry Trinder (Microsoft) | @garrytrinder
13:18 – Microsoft Graph Developer Proxy – Garry Trinder (Microsoft) | @garrytrinder
15:40 – PnP SPFx Controls – Garry Trinder (Microsoft) | @garrytrinder
17:01 – PnP Modern Search – Garry Trinder (Microsoft) | @garrytrinder
17:48 – PnP Samples - Garry Trinder (Microsoft) | @garrytrinder
18:26 – Together mode picture – Garry Trinder (Microsoft) | @garrytrinder
19:30 – Demo – Building Conversation search experience for Microsoft Teams with SPFx – Siddharth Vaghasia (BinaryRoots) | @siddh_me and Kunj Sangani | @sanganikunj
38:34 – Demo – Replicating the Quick Links web part for extensibility – Dan Toft (Evobis ApS) | @tanddant
49:58 – Closing
Learn more
• See the full blog post for this call in the Microsoft 365 platform community blog - https://aka.ms/community/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home
A
B
B
After
all,
this
is
a
community
call.
The
community
has
a
a
plethora
of
resources
that
you
can
dive
into
and
use
for.
Whatever
you,
you
need
for
your
learning,
even
for
your
work
as
well,
and
also
growing
your
network,
and
so
we
have
a
an
absolute
ton
of
content,
video
content
on
the
Microsoft
365
and
Power
Platform
Community
Channel.
That's
where
you'll
find
all
of
the
recordings
from
the
community
channels
published
to
this
channel.
B
B
So
if
you're
on
LinkedIn-
and
you
want
to
join
a
you
know
a
group
where
everyone
is
discussing
Microsoft
365
and
the
Power
Platform,
this
might
be
blog
posts
that
people
have
created
or
just
asking
questions
as
well,
and
then
it's
a
great
place
to
to
to
discuss
those
topics
with
others.
And
so
again,
if
you
are
not
a
member
of
that
group,
but
you
are
on
LinkedIn,
definitely
take
a
look
and
and
join
today.
Just
click.
B
B
We
have
the
the
PMP
repository
office,
Dev,
SharePoint
and
Microsoft
graph
lots
of
opportunities
for
you
to
get
involved
in
open
source
as
well,
and
so,
if
that's
something
that
you're
interested
in
also
take
a
look
at
those
those
repositories,
we
have
sample
galleries
as
well.
So
if
you
have
built
something-
and
you
want
to
share
that
with
the
the
rest
of
the
community,
the
best
place
to
do
that
is
in
the
samples
Gallery.
B
If
you're,
not
creating
samples-
and
you
just
want
to
you-
know-
get
inspiration
from
the
community
of
what
other
people
are
building
and
and
sharing.
Then
it's
a
great
place
to
to
start.
If
you
know
you,
even
if
you
wanted
to
learn
a
new
technology
as
well,
it's
always
great
to
be
working
or
learning
from
something
that
already
exists
out
there.
That's
that's
real
and
you
can
see
working
and
so
all
of
the
samples
are
accessible
through
the
unified
samples
gallery,
and
so
you
can.
B
There
is
one
place
where
you
can
go
to
find
out
all
about
these
open
source
initiatives
get
to
the
samples
and
obviously
to
the
recordings
and
the
the
invites
to
this
call
as
well
is:
if
you
go
to
the
home
page
at
AKA,
dot,
Ms,
slash,
Community,
slash
home.
That
will
get
you
access
to
everything
which
I've
just
talked
about
and
and
more
there
is
more
in
there
as
well.
So
take
a
look
at
what
else
there
is
there
okay.
So
this
is
the
Microsoft
365
and
Power
Platform
Community
call.
B
We
have
other
calls
that
are
available.
We
have
a
monthly
Power,
Platform
call,
Microsoft
identity
platform
call
and
the
office
add-ins
a
monthly
call.
Alongside
this
call,
which
runs
bi-weekly
as
well.
We
have
the
Microsoft,
365
and
Power
Platform
Community
bi-weekly
call.
We
also
have
the
Tuesday
call.
The
Tuesday
call
is
where
we
invite
Microsoft
speakers,
and
so
people
from
product
groups,
myself
developer
Advocates,
who,
who
are
there
on
the
on
the
weekly
Tuesday
call
as
well?
B
If
you
want
to
take
a
look
at
all
of
the
calls
that
are
available,
we
have
the
usual
short
link.
So
if
you
go
to
AKA
dot,
Ms,
slash,
Community,
slash,
calls
and
you'll
be
able
to
find
all
of
the
invites.
There
add
them
to
your
calendar,
so
you
don't
miss
them
and
it
makes
it
easier
to
join
as
well
and
obviously
all
of
the
agendas
for
these
calls
are
published
in
advance
as
well
on
social
media.
B
Speaking
of
an
agenda
for
next
week's
Tuesday
call
so
the
9th
of
May
we
have,
as
the
usual
latest
news
and
updates
from
the
Microsoft
engineering
on
Microsoft,
365
and
Power
Platform
topics.
We
have
three
demos
for
your
three
sessions
for
you.
Next
week
we
have
Eric
scherlinger
and
Avada
adube,
who
are
going
to
be
covering
power,
automate
and
Microsoft
teams.
We
have
Kathy
Jew
who's,
going
to
give
us
the
latest
on
the
SharePoint
site,
template
site
creation
and
and
template
updates.
B
B
B
Okay,
we
have
the
caring
and
sharing
I'm,
not
sure
if
David
is
still
in
the
call.
I
think
he's
gone,
he's
gone
through
a
session
in
Vegas,
so
I'll
cover
this.
So,
if
you're
looking
to
get
started
in
the
open
source
initiatives
across
PNP,
we
have.
These
sharing
is
caring
initiative
that
run
several
sessions
that
can
help
you
get
started
so
whether
you're,
just
you
know,
new
to
contributing
to
open
source
in
GitHub,
and
then
you've
got
the
general
first
time
contributor
sessions.
B
If
you
know
you
want
help
submitting
Power
Platform
samples
as
well,
and
we
have
those
sessions
but
also
other
sessions
for
like
writing
for
the
web.
Sharepoint
framework
developer
workstation
setup,
and
you
know
how
to
use
the
SharePoint
framework
samples
as
well.
Even
if
you're
not
a
developer-
and
you
just
want
to
get
involved
in
maybe
submitting
articles
to
the
community
blog,
which
is
just
writing
markdown,
then
there's
sessions
that
can
that
can
help
you
there
as
well.
We've
also
got
the
first
time
presenter
sessions.
B
We
have
the
community
recognition
program,
so
you
know
we
want
to
make
sure
that
when
you
are
submitting
samples,
you're,
writing
blog
posts
and
sharing.
You
know
your
knowledge
within
the
community.
Speaking
on
the
art
on
the
community,
calls
as
well
we'd
like
to
recognize
that
that
contribution.
So
these
are
badges
that
are
powered
by
credly
the
same
credly
who
power
the
the
the
badges
for
certifications,
the
official
Microsoft
certifications
as
well.
There
are
a
whole
host
of
different
badges
that
you
can
achieve
through
different
contributions.
B
So
if
you're
interested
in
in
this
then
go
to
AKA
dot,
Ms
slash
Community,
slash
recognition
to
find
out
more
we're
going
to
skip
the
SharePoint
framework
updates.
Unfortunately,
Facebook
isn't
with
us
today,
so
we're
going
to
jump
straight
into
the
open
source
projects
and
we're
going
to
start
with
pmp.js.
B
But
if
you
want
to
try
out
the
the
latest
nightly
builds,
you
can
do
that
by
using
npm
install
at
PMP,
slash,
sp3
nightly
package,
and
you
can
bring
that
into
your
project
and
test
out
the
the
latest
features
before
they
go
into
live.
Yes,
Dragon!
Sorry,
yes,
3.15,
not
3.5!
Apologies
for
that.
Thank
you
for
observing.
B
Moving
on,
we
have
CLI
for
Microsoft
365
version
6.7,
so
this
was
the
the
the
monthly
release
a
bit
of
a
shorter
release
this
month,
because
we
had
an
a
couple
of
interim
releases
with
the
the
new
release
of
the
latest
version
of
SharePoint
framework.
We've
got
a
couple
of
new
commands
for
SharePoint,
so
this
is
around
getting
application,
customizers
on
a
site
and
also
permanently
removing
all
items
for
from
a
site,
recycle
bin.
B
One
big
update
that
has
been
added
as
well
is
we've
added
support
for
non-public
Cloud.
So
if
you're
in
like
GCC
hi,
then
you
can
now
use
CLI
for
Microsoft
365.
Although
there
are
some
commands
that
don't
quite
support
this
yet
so
they
are
Power,
Platform,
powerapps
and
power
automate
commands,
but
if
you're
really
interested
in
US
adding
support
for
that
as
well,
please
pop
along
to
the
to
the
issues
list
or
the
Discord
Channel
as
well,
and
because
this
is
something
that
we're
going
to
be
doing
over
over
time
as
well.
B
We'd
like
to
know
who
you
know
who
out
there
is,
is
going
to
want
to
use
these
use.
These
features
as
well,
and
so
if
you
want
to
get
the
latest
version
of
CLI
for
Microsoft
365,
you
can
get
it
from
npm,
and
so
you
can
use
the
at
latest
tag
and
if
you
want
to
use
our
Docker
container
as
well,
we
have
the
latest
tag
there
with
everything
that
you
need
already
packaged
up
to
run
the
CLI
for
Microsoft
365
in
that
container
as
well.
B
So
if
you
want
to
find
out
what
all
the
the
latest
updates
are,
there's
many
more
than
the
two
that
I
just
added.
If
you
go
to
AK
dot,
Ms
CLI,
hyphen,
M365,
notes,
you'll,
see
the
full
release,
notes
and
also
some
of
the
updates
that
we've
made
in
the
upcoming
beta,
as
well
as
we're
constantly
adding
new
features
to
CLI
for
Microsoft
at
365..
B
Okay
updates
again
sorry,
it's
just
me
this
week,
I'm
kind
of
carrying
the
carrying
the
team,
so
Microsoft
graph
developer
proxy.
So
this
is
a
tool
if
you
are
building
any
applications
that
call
Microsoft
graph
or
or
even
any
cloud
apis,
and
you
want
to
be
able
to
simulate
throttling
simulate
errors
and
responses
without
changing
a
line
of
code
in
your
applications,
then
it's
worthwhile
taking
a
look
at
Microsoft
graph
developer
proxy.
We
just
released
0.7.
B
So
if
you
go
to
aka.ms
graph
proxy,
slash,
download
you'll
find
all
the
information
and
the
different
executables
and
the
installers
for
the
proxy,
as
well
as
our
tutorials
as
well
of
how
to
to
get
started
using
the
proxy.
In
this
version
we've
added
support
for
excluding
URLs.
So
this
is
the
ability
to
exclude
very
specific
endpoints
that
you,
you
might
not
want
to
kind
of
throw
errors
for
so
it
we've
added
a
bit
more
flexibility
into
the
tool.
B
We've
streamlined
the
configuration
as
well
to
make
it
easier
to
configure
the
the
proxy
to
to
your
individual
needs.
We've
had
a
bit
of
a
refresh
as
well,
so
the
user
interface
is
a
little
bit
updated
as
well
looks
a
little
bit
more
modern,
modern
for
a
command
line
tool
and
we've
also
made
a
slight
update
to
the
throttling
Behavior
as
well.
B
So
you
can
run
the
proxy
in
your
pipelines
as
well
as
integrating
with
playwright,
so
that
you
can
have
proxy
running
when
you're
doing
your
your
your
visual
testing,
your
your
automated
testing,
using
playwright,
reusable
spfx
controls,
I,
don't
think
Alex
is
on
the
call
so
I'm
going
to
take
this
one
as
well.
So
we
have
a
few
updates.
B
Which
again
added
that
support
for
SharePoint
framework
1.7.1
and
the
ability
to
control
pain,
properties
in
property
field
collection
data
as
well
as
again,
I'm
sure
bug,
fixes
and
various
other
enhancements
that
are
in
there
special
thank
you
to
their
contributors
as
well,
who
are
named
on
the
screen?
I'm
not
going
to
go
through
everyone,
but
you
know
again
it's
the
community-led
project,
everyone
who's
contributed.
Thank
you
very
much
for
your
your
input
and
and
being
able
to
to
make
this
project
even
better
for
SharePoint
developers
out
there.
B
If
you
want
to
find
more
information,
then
check
out
the
Twitter
account
at
M365,
PMP
controls,
PNP,
modern
search.
So
there
we
go
nothing
new,
but
keep
calm.
It's
still.
It's
still
around
it's
still
being
used.
There
is
the
4.8
update,
which
I
guess
it's
kind
of
a
little
bit
old.
If
it's
only
just
got
the
1.15.2
update
for
SharePoint
framework,
and
it's
now
1.72.1,
but
PMP
search
is
a
great
tool
for
building
modern
search
experiences.
It's
definitely
one
of
my
favorite
web
Parts
as
well.
B
Samples
so
I,
don't
think,
there's
there's
any
new
samples
here,
but
again,
as
I
mentioned
before
earlier,
in
the
call
we're
always
on
the
lookout
for
new
samples.
So
if
you
have
a
SharePoint
framework
web
part
that
you
think
oh
yeah
I'd
love
to
share
that
then
go
along
to
the
the
sample.
Gallery
AKA,
dot,
Ms,
slash,
M365
samples
and
submit
your
sample
and
get
yourself
on
this
page
as
well
as
getting
yourself
a
badge
for
contributing
as
well.
B
B
B
So
we're
getting
more
people
in
there,
so
I'll
give
you
a
few
more
moments.
So
get
everyone
is
popping,
is
still
a
little
bit
more
space
I
think
yeah.
Oh,
we
can
see.
Beau
was
giving
us
update
as
well
on
the
on
the
samples
as
well.
So
yes,
there
are
samples
there
there's
just
just
waiting
to
be
reviewed.
B
A
Thank
you.
Let
me
get
started
so
thanks
again
for
this
opportunity
to
present
my
sample
report
here
in
this
community
call.
Today
we
are
going
to
talk
about
a
conversational
search
experience
print
for
microsofting
with
spfx.
This
sample
was
added
to
spfx
sample
Gallery
and
was
been
developed
by
collaborating
with
kunj
also
who
could
not
join
today,
but
I
am
taking
over
the
demo
for
him
before
we
start
a
little
bit
about
myself.
A
A
So
this
is
the
link
to
the
report
which
we
are
going
to
talk
about
today.
So
what
would
be?
What
was
the
driving
Factor?
Though?
First
thing
was,
you
know
with
Team
suicide
and
everything,
and
if
we
talk
about
A
team's
Channel,
a
typical
teams,
Channel
conversation
which
would
be
built
for
a
particular
project,
we
would
see
there
would
be
so
much
of
message.
A
Passing
will
be
done
or
so
much
of
conversation
happening
in
a
particular
Channel
conversation,
and
it
becomes
sometimes
difficult
to
find
the
right
message
within
that
conversation
and
also
it
becomes
difficult
to
scan
and
locate
the
relevant
information
there
right
now.
This
was
a
idea
which
I
got
probably
an
Year
back
or
so
you
know
like
how
we
can
simplify
the
conversation
which
are
available
for
us
to
quickly
go
and
find
something,
and
that
is
when
I
started.
A
Exploring
and
I
started
the
web
part
with
a
very
simple
idea
of
displaying
the
conversation
in
the
tabular
view,
and
then
what
happened
was
I.
We
I
I
showed
it
to
kunj
and
he
came
up
with
other
idea
of
to
enhance
that
particular
web
part
to
have
a
different
kind
of
view,
and
that
is
where
you
know.
We
kind
of
collaborated
on
this
web
part
and
we
were
able
to
complete
it
and
we
have
submitted
in
the
SPF
example
gallery
now.
A
These
are
some
of
the
summaries
or
the
features
of
what
this
web
part
would
do.
So,
first
of
all,
this
is
an
spfx
based
web
part,
which
is
kind
of
enabled
for
a
team
step,
because
it
is
a
web
part
where,
in
whole,
functionality
of
the
web
part
is
dependent
on
a
channel
and
its
conversation.
So
it
needs
to
be.
It
would
only
work
within
a
channel
conversation
as
in
team
step.
Okay,
what
it
will
do
is
it
will
basically
display
some
of
the
newest
conversation
first
of
all,
on
the
top.
A
So
when
we
are
talking
about
conversation,
we
are
talking
about
the
top
level
conversation
which
happens,
and
then
you
can
deep
dive
into
a
specific
reply
within
a
specific
conversation.
Then
you
would
have
an
option
to
navigate
from
directly
to
a
specific
message
or
within
reply
to
the
conversation.
It
means
you
would
be
able
to
directly
go
to
that
teams
post
messages
for
you
to
reply,
or
for
you
to
refer
that
particular
message
right
then,
you
would
have
different
filters
depending
on
what
you
want
to
use.
A
You
can
filter
it
by
the
body
such
text.
You
can
filter
it
by
who
has
sent
the
message
you
have
to
you
should
filter
able
to
filter
it
by
mention
from
integrate
and
with
attachment.
Okay.
So
these
are
some
of
the
basic
filters
which
we
we
have
implemented.
So
idea
was
to
you
know
like
sometimes
you
might
remember
that.
A
Okay,
this
message
was
been
sent
by
this
guy
or
your
colleague,
but
you
might
not
be
able
to
filter
it
based
on
who
has
sent
that
message
right
and
if
you
at
least
you
know
that
okay
I
wanted
to
find
all
the
messages
sent
by
a
particular
user
on
so
and
so
date
or
if
it
you
know
that
he
has
mentioned
you,
you
can
also
filter
it.
Based
on
that
and
typically
search
text
also
is
available
same
way.
You
will
be
able
to
apply
all
the
same
filters
to
the
replies
within
that
conversation.
A
A
A
So
if
you
go
to
the
post
and
if
you
see
most
of
the
top
level
conversations
which
we
are
seeing
right
now
is
kind
of
displayed
at
the
top
and
to
go
into
this
particular
detail,
replies
of
that
conversation
once
you
hover
over
it,
you
would
be
able
to
see
an
icon,
and
you
click
on
this
view,
reply.
That
is
where
you
will
be
able
to
see
all
the
replies
of
that
particular
top
level
conversation
which
will
happen
Okay
from
here.
A
Of
course,
you
would
be
able
to
go
to
that
particular
channel,
just
a
particular
message
within
the
post
itself,
so
that
you
can
reply
Etc
plus
wherever
based
on
the
current
logged
in
user.
If
you
are
mentioned
in
that
particular
message,
you
would
see
an
at
the
rate
symbol
so
that
you
know
that
these
are
the
messages
where
it
was
specifically
targeted
to
you,
or
you
were
mentioned
in
that
message.
A
Okay,
now
coming
to
the
filters,
if
you
see
here
if
I
wanted
to
filter
based
on
a
particular
user
like
I,
wanted
to
just
filter
messages
being
sent
by
a
particular
user,
if
I
click
on
apply,
I
would
be
only
able
to
see
that
particular
message
then
same
way.
You
can
also
mention
it
means
you
can
also
filter
the
messages
where
somebody
else
is
mentioned.
A
A
What
we
are
doing
is
we
are
keeping
it
as
a
simple
text
message
and
displaying
it
for
general
purpose,
because
the
idea
here
was
to
find
a
conversation
and
then
use
the
conversation
method
time
to
go
to
that
message
and
find
the
context
Etc
right,
then
you
can
also
filter
any
messages
which
are
with
attachment.
Okay,
plus,
if
you
click
on
that
attachment,
you
would
be
able
to
directly
go
to
that
attachment.
Also,
and
of
course
there
is,
you
know
from
date
and
to
date.
A
So
if
you
filter
a
message
based
on
a
particular
from
day
to
date,
you
would
be
able
to
filter
that
message,
Etc
right
and
also
the
body
text
messages.
So
if
we
say
like
weather
and
if
you
will
apply,
you
would
only
see
the
message,
which
is
that,
so
these
are
the
basic
filters
which
we
thought
would
be
useful
for
us
to
basically
drive
that
conversation
right
now.
A
The
other
thing
is
once
you
go
to
the
reply.
Once
you
go
to
a
reply
of
a
particular
message,
you
will
get
similar
functionality,
which
is
available
wherein
to
I.
Don't
know
why
this
yeah,
okay,
you
will
get
similar
functionality,
wherein
you
would
be
able
to
filter
based
on
all
the
filters
which
are
available
for
the
messages
also,
and
then
there
is
that
tabular
view.
A
So
tabular
view
is
where
you
would
be
able
to
directly
find
from
in
a
simple
formatted
way,
but
in
a
way
very
much
similar
to
what
you
are
seeing
when
it
was
been
sent.
If
you
want
to
go
to
that
message
Etc,
so
this
is
a
typical
way
to
display
the
conversation
in
a
simple
way,
so
that,
if
you
wanted
to
find
something,
you
would
be
able
to
use
this
weapon
to
Target
to
a
particular
Channel
conversation,
and
you
would
be
able
to
kind
of
use
this
web
part.
A
We
don't
have
an
option
to
show
which
columns
and
to
show
to
hide,
but
that
is
an
idea
which
we
can
implement.
But
overall
you
can
kind
of
expand
collection,
columns
which
are
available,
which
you
can
basically
do
it.
Okay
now.
So
this
is
everything
about
demo.
What
I'll
do
is
I'll
quickly
go
through
demo
of
Code
walkthrough
of
the
the
part
first
thing
is,
as
I
said,
it
is
an
SPF
Express
web
part,
so
more
or
less.
A
We
are
initializing
graph
service,
the
graph,
client
and
everything
next
is
the
main
file,
wherein
we
have
the
state
object,
which
would
basically
kind
of
hold
all
the
variables
which
would
be
required
to
get
the
required
functionality
depending
on
whether
it
is
a
chat
message,
filter
messages,
next
link,
expanded
message,
ID.
So,
basically,
this
is
the
typical
State
object
which
we
are
doing,
which
we
are
using
then
within
the
main
component.
In
the
render
method.
This
is
where
kind
of
all
the
components
come
together,
so
we
have
segregated
the
components
between
different
functionalities.
A
So
header
component
is
the
one
which
is
basically
nothing
but
displaying
the
search,
conversation,
header
and
the
grid
and
the
tabular
go
icons
which
are
there.
Then
you
have
filter
component
which
basically
takes
care
of
rendering
this
filter
component
here,
which
is
there
and
then,
depending
on
The
View
being
selected.
You
have
a
message
View
and
you
have
a
table
view
component,
which
is
there,
and
this
is
where
we
are
passing
a
typical
data-
has
been
passed
to
that
component.
To
basically
render
it
so
next
I
would
go
and
see.
A
Next,
we
will
see
some
important
messages
like
get
teams
messages.
So
what
we
are
doing
is
we
are
using
the
teams
kind
of
SDK
to
get
the
current
context.
Group
ID
and
the
channel
ID
now
group
ID
would
be
basically
the
teams
ID
and
the
channel
ID
would
be
the
channel
ID
in
which
the
current
web
part
would
be
running.
A
And
then
we
have
the
graph
service
provider
method
which
will
see
shortly,
but
to
just
get
the
messages
and
set
the
state
object
and
use
that
state
object
to
pass
to
the
components
which
is
available
next.
This
is
a
separate
method
for
get
message
replies
because
the
graph
endpoint
to
get
the
message
implies
for
a
particular
top
level.
Conversation
is
different,
yet
you
need
to
pass
or
the
endpoint
is
different
and
also
you
need
to
pass
the
message
ID
in
inside
which
you
need
to
get
the
reply.
A
So
this
is
a
separate
message,
but
very
much
similar.
What
you
get
is
you
have
to
pass
the
group
ID
channel
ID,
but
the
extra
thing
you
would
pass
is
the
selected
message
ID
on
which
you
are
getting
all
the
replies
from
next.
This
is
the
graph
service
provider
class.
Basically-
and
this
is
the
class
wherein
we
have
all
the
methods
which
actually
makes
the
graph
API
call
using
the
graph
client,
the
first
one
being
the
team,
slash,
Channel,
slash,
Channel
ID
and
the
messages
which
will
give
us
all
the
messages.
A
We
are
getting
top
45
messages,
and
then
we
have
load
more
button
below
that,
wherein,
once
you
will
click
on
load
more
button,
it
will
go
and
get
another
45
messages
by
using
the
next
like
icon.
This
is
just
two
kind
of
way
of
getting
the
latest
messages
and
then
kind
of
trying
to
find
all
other
messages.
If
you
want
to
do
it,
then
this
method
is
where
you
would
be
able
to
get
the
data
based
on
the
next
URL.
A
So
if
you
are
getting
the
second
page,
basically,
we
use
the
next
link,
which
would
be
written
in
the
response
and
use
that
to
get
the
next
set
of
data
which
is
available,
and
then
this
is
the
get
message
replies
which
would
give
us
the
messages
replaced
based
on
the
endpoint
teams.
You
pass
teams,
ID
channel
the
past,
Channel
ID
messages
and
then
the
message
ID
and
then
you
set
the
reply
cell,
which
will
give
you
solve
the
replies
which
are
available
right.
A
Next
thing
is
three
components,
so
what
we
have
is
this
is
the
message
view
component
within
message.
View
component
in
terms
of
the
UI
Library,
which
we
are
kind
of
utilizing
here
is
we
are
using
react.
Node
start
to
get
the
chat,
chat,
item
kind
of
object
to
get
the
required
look
and
phase
so
that
you
don't
have
to
develop.
You
know
that
kind
of
similar
experience,
then
what
we
are
doing
is
we
are
also
using
a
read
more
and
less,
which
is
a
basically
a
react
Library,
which
is
to
kind
of
handle.
A
The
read
more
read
less
button
on
a
particular
content,
which
is
very
much
easy
to
implement.
We
will
see
we
will
see
that
now
coming
to
the
imported
component,
okay,
so
this
is
where
we
are
converting
the
HTML
text
to
the
plain
text
so
that
we
don't
have
to
take
care
of
rendering
the
messages
as
it
is,
but
rather
than
kind
of
displaying
and
using
the
inner
text
of
the
leave
element
to
just
display
the
messages
which
has
been
displayed
there
right
now.
A
What
you
would
now.
This
is
the
main
component
method,
wherein
you
have
the
chat
component
to
display
a
particular
chat
within
that
that
would
be
a
chat
item
and
within
that
there
would
be
a
chat
messages.
This
is
how
a
typical
you
know,
react:
North,
Star,
Chat
components,
library
has
been
used,
you
can.
We
can
use
that
what
it
will
do
is
it
will
basically
kind
of
display
the
top
level
messages
which
is
there
and
then
again
below
down.
A
It
is
very
much
similar,
but
that
is
where
you
would
able
to
see
all
the
replies
to
that
particular
messages,
or
you
would
see
all
the
related
messages
there.
Okay
and
we
are
also
using
graph
toolkit
to
basically
use
the
person
component
to
display
who
has
sent
these
messages
Etc
within
the
spfx
paper
to
get
the
required
look
and
Fin.
So
this
is
the
message
view
component,
which
is
available
and
then
mention
icon.
A
Of
course
everything
is
kind
of
available
and
all
the
logic
whether
to
display
the
mention
icon
and
everything
would
be
typically
based
on
the
filter
of
the
mentioned
user
ID
versus
the
current
user.
Ids
object
ID
so
that
you
know
that
that
user
has
been
mentioned
in
that
particular
messages
or
not.
Right
now,
now,
let's
say
The
tabular
View.
A
So
this
is
how
a
typical
tabular
or
the
detail
list
view
control
can
be
used
right.
So,
overall,
this
is
the
base
functionality
or
base
code,
which
is
basically
taking
care
of
implementation.
A
very
honest
on
a
summary
level.
What
we
are
seeing
is
we
are
seeing
that
we
are
using
graph
API
to
get
the
data.
A
That
okay,
last
couple
of
points
I
wanted
to
highlight
here
is
for
web
API
permission
because
we
are
using
Channel
messages.
So
we
need
this
channel
message,
read
all
permission
to
be
applied
for
us
to
kind
of
use
graph
API
to
get
the
channel
messages.
So
this
permission
and
this
scope
is
important
which
we
can
which
we
specified
in
the
packet
solution.
And,
lastly,
how
do
you
enable
this
spfx
web
part
as
in
teamstep?
So
for
that
in
the
webad
manifest.json
file?
What
we
do
is
in
the
supported
host.
A
We
are
specifying
that
the
supported
host
for
this
web
part
is
the
team
step,
and
that
is
how
it
would
be
available
now,
once
an
SP
effects,
solution
is
deployed
to
the
app
level.
Catalog
I
mean
a
returning
level,
app
catalog
because
you
are
using,
and
you
want
to
make
it
as
in
unable
for,
as
in
the
team
step,
which
would
be
available
for
user
to
install
that
within
your
team
State.
What
you
would
have
to
do
is
you
have
to
make
sure
that
you
know.
A
Once
you
have
deployed
the
solution,
you
are
basically
deploying
it
to
all
the
sites.
First
of
all,
and
also
you
are
syncing
it
to
the
teams.
Okay,
this
option
would
be
enabled-
probably
it's
just
taking
some
time,
but
basically
this
is
where
it
would
be.
Allow
us
to
enable
and
make
this
tab,
or
this
web
part
available
for
user
to
be
used
within
your
team's
application
Within
in
the
tenant
itself.
Okay,
this
one.
If
you
want
to
know
about
eight,
the
links
which
I
have
said
in
the
reference
link
would
help.
A
You
give
you
step
by
step
reference
on
what
and
how
you
can.
Basically
enable
your
existing
web
part
to
be
enabled
for
a
team's
team
and,
depending
on
whether
your
web
part
is
just
for
a
single
supported
host,
which
is
a
team
stab
or
you
wanted
to
also
use
it
in
your
SharePoint.
Accordingly,
you
can
use
the
sdks
which
are
available
and
you
would
be
able
to
kind
of
find
whether
your
current
web
part
is
running
within
the
teams
or
whether
it
is
running
in
the
SharePoint.
A
B
It
was
a
fantastic
demo.
Sit
off,
yeah
I
could
see
in
the
in
the
chat.
There's
a
few
questions,
so
it
obviously
people
see
some
some
interest
in
in
what
you've
done.
A
great
example
of
you
know
the
different
technologies
that
you've
used
as
well
in
this
solution.
I
absolutely
love
the
code
tool
that
you've
got
as
well
to
kind
of
guide
us
through
this.
This
solution,
as
well
so
yeah
fantastic.
Thank
you
very
much
for
coming
on
to
the
call
today
and
sharing
with
us.
B
C
My
name
is
Dan
I'm,
a
Microsoft
365
consultant
and
developer
based
in
Denmark
I'm,
mostly
active
on
Twitter,
where
you
can
find
me
it's
over
attendant
and
feel
free
to
reach
out.
If
you
have
any
questions
about
this,
this
demo
that
we're
gonna
see
and
there's
yeah
really
just
ask
anything
you
feel
like.
C
So
what
is
the
the
quick
links
web
part
that
I've
created?
Well
it
sort
of
started
off
based
on
having
a
lot
of
clients
who
had
the
feedback
that
they
wanted
to?
Do
they
like
the
quick
link
thing,
but
they
want
a
little
bit
more.
So
maybe
they
want
to
to
have
a
panel
open
when
they
click
the
button
instead
of
redirecting
to
somewhere
else
they're,
just
like
they're
80
happy
with
it,
and
then
I
heard
the
feedback
somewhere
in
the
community
as
well.
C
I
think
there
was
a
GitHub
issue
mentioning
wanting
to
see
the
open
or
wanting
to
see
Microsoft
open
source
there
quick
links,
what
part,
because
the
drag
and
drop
features
are
pretty
cool
so
like
wanting
to
drag
and
drop
things
and
actually
be
able
to
edit
your
web
part
more,
like
intuitively,
for
the
users
and
I
thought
being
a
Microsoft
365
consultant
I,
don't
actually
often
like
build
proper
web
Parts.
I
kind
of
just
watch
things
together
so
using
the
property
pane
is
not
something
that
I
do
all
that.
C
Much
to
be
honest,
so
I
wanted
to
like
learn
or
be
better
to
do
that
or
better
at
doing
that.
So
I
figured
why?
Why
not
like
try
and
make
a
sample
where
I
try
to
replicate
the
quick
links
work
part
because
it's
got
the
drag
and
drop.
It's
got.
The
Dynamic,
Property,
pane
and
I
can
add,
like
those
things
that
I
feel
like
it's
missing
the
so
I
figured.
We
should
start
off
with
like
a
quick
demo
of
it.
C
C
But
what
was
probably
actually
my
biggest
challenge
in
building
this
thing
was
getting
this
like
drag
and
drop
feature
to
to
work.
The
way
I
wanted
it
to
now.
I'll
have
something
like
a
small
Clips
later
how
it
went
during
the
process,
but
essentially
I
traded,
like
I,
think
80
of
what
the
tiles
quick
links
web
part
can
do.
We
have
different
sizes,
we
have
the
ability
to
only
show
an
icon,
you
can
click,
you
can
add
a
new
link.
C
The
one
thing
that
I
decided
actively
not
to
do
was
audience
targeting,
just
because
I
didn't
feel
like
dealing
with
it,
so
that
might
be
for
a
later
demo
or
something
but
yeah.
That's
essentially
the
web
part
using
the
PNP,
reusable
control
web
part
title
as
well,
so
really
just
trying
to
replicate
what
Microsoft
is
doing
out
of
the
box.
So
we
can
do
better
or
do
more
with
it.
C
One
of
the
things
that
I
had
a
request
for
like
a
while
back
and
just
said
you
can't
really
do-
is
something
as
simple
as
putting
in
anything
here.
That
is
not
https
link,
so
in
this
case
opening
a
web
document
as
a
template
or
even
linking
to
OneDrive
files.
Those
are
like
office
jury
schemes,
for
those
of
you
that
are
not
familiar.
C
I
will
go
ahead
and
I'll
post
a
link
in
the
chat
for
those
which
is
essentially
just
a
way
to
to
like
open
up
word
or
interact
with
the
desktop
clients,
but
the
default
quick
links.
What
part
will
not
accept
any
links
that
is
not
https
enabled
it
will
essentially
just
add
https
at
the
front.
The
link
will
break
so
that's
a
thing
that
I
really
wanted
to
to
like
get
working
and
that
works
nicer.
I
can
publish
the
site
and
if
I
click
it,
it
will
ask
me
to
open
upward.
C
C
C
C
So
what
I
did
is
I
thought
well.
I'm
gonna
need
some
kind
of
variable
that
I'm
sorting
by
so
I
called
that
the
sword
weight.
So
essentially
what
I'm
doing
with
the
sort
weight
is
I
am
saying
this
is
like
I'm,
gonna,
just
or
sort
the
items
by
this.
Actually,
this
value
and
what
I
did
is
I,
said
zero
will
be
my
lowest
value
and
one
will
be
my
highest
value
that
way.
C
I
can
essentially
say
anytime,
I
put
in
a
new
tile,
give
it
a
value
that
is
exactly
in
between
whichever
two
I
am
working
on.
So
let's
say:
I
wanted
to
enter
or
put
input
a
new
link
on
the
left
that
would
get
0.25,
because
that
is
like
in
between
0.5
and
0.,
and
this
way
the
number
will
essentially
always
stay
between
0
and
1,
but
it
will
just
get
a
very
large
amount
of
decimals
in
the
end,
but
it
will
actually
work
so
adding
a
new
one
in
between
those
two
would
be
0.0375.
C
And
that
way,
whenever
I
switch
them
around,
I
can
always
just
like
grab
the
item
just
before
it,
which
in
this
case
would
like
in
the
middle
there
would
be
0.25
and
the
other
one
0.5
and
divide
those
by
two
and
then,
if
I
move
that
thing
around.
So
let's
say:
I
move
the
middle
one
to
the
left
like
this.
It's
essentially
just
going
to
be
like.
Oh
that's,
0.125,
because
that
is
in
between
between
0
and
0.25.
C
So,
looking
at
the
code
that
is
doing
this,
it
is
and
I
mean
it
looks
more
complex
than
it
is
one
of
the
things
that
took
me.
A
little
bit
of
time
was
getting
like
getting
it
to
work
in
this
area
where
you
don't
have
enough
links.
So
if
you
have
10
links
and
you're
dragging
it
so
somewhere,
where
there's
two
new
links
that
works
awesome,
but
sometimes
you're
going
to
be
moving
it,
where
it
is
now,
essentially
its
own
neighbor
in
the
calculation
which
took
a
little
bit
of
work.
C
Of
course,
the
sample
links
will
also
be
provided
where
you
will
find
like
the
code.
If
you
need
it,
I
decided
not
to
really
share
the
code
on
screen
in
Visual
Studio
this
time.
But
what
is
happening
is
we're
taking
all
the
links
and
we're
sorting
those
by
the
sort
weight.
That
way
we
haven't
already
sorted
array,
which
is
what
we're
also
working
with
in
the
UI.
So
I'm
just
like
duplicating
the
array
and
then
I
wrote
this
get
average
function.
C
That
just
makes
sure
that
if
the
previous
one
is
not
handling
it
and
giving
it
the
correct
one
and
just
looping
through
and
essentially
just
returning
sort
of
the
array
yeah
there
we
go
and
moving
on
to
the
other
part
of
the
demo,
the
property
pane.
The
property
pane
is
one
of
those
things
that
is
actually
really
awesome
about
working
with
spfx
but,
like
I,
said
in
the
beginning
that
I
don't
get
to
use
all
that
often
I
tend
to
just
hard
code
values,
but
working
with
it.
C
It's
actually
really
neat
how
you
can
build
something
that
is
so
generic.
You
can
actually
hand
it
out
to
to
multiple
people
and
they
can
configure
it
based
on
their
needs.
So
here
we're
just
seeing
like
the
same
thing,
I
sort
of
went
over
in
the
demo
that
you
can
change,
properties
and
they'd
interact,
live
with
the
web
part
and
I
guess,
based
on
that
I
I
like
took
a
few
learnings
that
I
want
to
keep
in
mind
the
next
time
I'm
building
something
where
I'm
using
the
property
pane.
C
Those
are
you
can
use.
You
can
just
arrays
in
the
property
I
guess
we
can
call
it
the
property
back.
I,
don't
really
know
if
there's
a
name
for
that.
So
essentially
you
can
just
like
use
square
brackets
and
you
can
just
put
a
number
in
there
and
that
actually
works
on
accessing
yeah
accessing
the
data
in
the
like
property
back.
C
C
Another
thing
is:
it
is
actually
possible
to
trigger
opening
the
property
pane
directly
from
your
like
code.
Now,
having
used
the
PNP,
you
know
like
placeholder
control
thing
for
a
while.
Obviously,
I
would
have
known
that
you
could
do
it,
but
never
never
thought
to
do
it
in
the
solution.
That
was
really
neat
and
a
nice
thing
to
keep
in
mind
that
you
can
actually
like
right
from
your
web
Port
trigger
that
you
want
to
change.
And,
lastly,
something
that
I
always
did
was
returned
once
from
my
property
get
property
paying
configuration
method.
C
What
I
realized
is
there's
nothing
stopping
you
from
returning
several
times.
It's
not
a
static
Json
object,
so
you
could
actually
have
several
scenarios
returning
different
property
Pages.
You
could
also
use
pages
in
in
the
one
big
one
you're
building,
but
what
I
find
is,
whenever
I'm
actually
building
my
large
property
penis,
it
gets
really
hard
to
manage
that
large
Json
object
so
being
able
to
split
it
out
either
into
several
returns
or
build
the
Json
object
first
and
return.
C
It
was
actually
like
kind
of
a
a
eye
opener,
at
least
for
me,
not
having
realized.
All
those
things
you
could
actually
change
yeah
and
that's
about
it.
Thank
you
so
much
for
coming
and
seeing
the
the
session
I
will
share
my
sample
Link
in
the
chat
as
well,
and
if
there
are
any
questions,
please
feel
free
to
to
send
them
in
the
chat
or
reach
out
either
later
or
on
Twitter
I
will
be
available
there
as
well
yeah.
Thank
you
and
back
to
you.
Gary.
B
Thank
you
very
much,
Dan
again
fantastic
demo,
thanks
for
going
in
detail
as
well
to
show
the
the
Sorting
kind
of
iteration,
if
you
like,
was
worth
it
in
the
end,
though
right
it's
the
it's
gross,
that's
right!
It's
not
quite
working,
it's
not
quite
working
and
then
hey
it's
worthwhile
all
this
time,
absolutely
fantastic!
Okay!
Thank
you
very
much.
Let's
go
back
to
the
slides!
B
Okay!
So
again,
thank
you
to
our
two
presenters,
Siddharth
and
Dan
for
the
videos
and
also
thank
you
to
everyone
who
has
joined
today's
call
and
been
a
part
of
the
call
through
the
chat
as
well.
It's
always
great
to
to
see
responses.
I
had
a
chuckle
whilst
I
had
a
rest
at
some
of
the
the
the
gifts
that
are
added
into
the
chat.
So
thank
you
very
much.
Okay.
So
again,
thank
you.
B
This
recording
will
be
available
in
24
hours
on
the
Microsoft
365
and
Power
Platform
Community
YouTube
channel.
So
you
can
get
to
that
channel
using
AKA
dot,
Ms,
slash,
Community,
slash
videos.
If
you
haven't
already
subscribed,
then
please
do
hit
that
subscribe
button
and
make
sure
that
you
are
kept
up
to
date
with
all
the
latest
videos
from
the
community
that
are
posted
there
outside
of
the
YouTube
channel.
B
If
you
want
to
keep
up
with
the
latest
updates
on
Twitter,
we
have
two
accounts,
so
there
is
the
at
Microsoft
365
Dev
account
and
at
M365
PNP,
so
again,
regular
updates
on
both
of
those
accounts.
So
if
you're
not
following,
please
go
along
there
and
hit
that
follow
button.
The
next
Viva
connections
and
spfx
call.
So
this
call
will
be
on
May,
the
18th
and
the
next
Community
call,
which
is
the
M365
and
Power
Platform
call
will
be
May.
The
11th
on
the
Tuesday
and,
like
I,
said
all
of
the
invites
are
available.
B
All
of
the
calendar
invites
and
invite
links
are
available
from
AKA
dot,
Ms
slash,
Community,
slash
calls
again,
thank
you
to
all
the
speakers
for
today
and
all
of
your
input
as
well
finishing
a
little
bit
earlier,
so
a
chance
for
a
break
before
your
next
meeting.
But
thank
you
everyone,
and
we
will
see
you
next
time.