►
Description
📺 MGT v3.0 launched on June 27th. In this 17-minute developer focused demo, Sébastien Levert shares a completely new Search capability (in preview) - specifically Search Box and Search Results components. Easily add search to a page with two tags, find files anywhere in Microsoft 365 environment. See the much more interesting, customizable search options in hero app that ships with MGT. Rich set of customization options, but also quite capable out of the box.
This community call demo is taken from the weekly Microsoft 365 Platform Community call recorded on June 27, 2023.
✨ Demo Presenter
• Sébastien Levert (Microsoft) | @Sebastienlevert
📖 Supporting materials
• Article - Microsoft Graph Toolkit v3.0 is now generally available | https://devblogs.microsoft.com/microsoft365dev/microsoft-graph-toolkit-v3-0-is-now-generally-available/
• Tool - Microsoft Graph Toolkit Playground – v3 | https://mgt.dev/next/v3/?path=/story/overview--page
• Toolkit - aka.ms/mgt/ (click the Latest button under Releases in Right sidebar).
• Demo (June 20) - Introduction to Microsoft Graph Toolkit v3 – Sébastien Levert (Microsoft) | @sebastienlevert
💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home
Sharing is caring! You are awesome! 🧡
A
Foreign
folks
I
want
to
discuss
one
of
a
really
cool
new
feature
that
we
are
enabling,
as
part
of
the
Microsoft
graph
toolkit
for
our
arraylist
latest
release,
which
is
search,
components
that
are
now
baked
into
the
graph
toolkit
today.
We're
going
to
really
focus
on
these
components
and
see
the
power
and
the
and
the
richness
of
these
components,
but
before,
if
you've
never
heard
about
the
graph
talk,
I'd
love
to
give
you
a
little
bit
of
a
quick
run
through
of
what
the
toolkit
is.
A
So
the
toolkit
is
a
collection
of
reusable
framework,
agnostic
components
and
auth
providers
that
allow
you
to
work
in
excess,
Microsoft
graph,
think
about
them
as
drag
and
drop
components
inside
your
app,
where
you
don't
have
to
think
about
how
to
authenticate
how
to
deal
with
caching
how
to
deal
with
throttling
how
to
deal
with
styling
how
to
deal
with
looking
like
M365.
It's
all
done
for
you,
so
the
components
are
fully
functional.
They're,
really,
just
you
add
them
to
your
page.
Magic
happens,
but
they're
fully
customizable.
A
So
if
you
want
them
to
match
your
corporate
brand
or
you
want
them
to
be,
have
different
behaviors
well,
you
can
absolutely
do
that
and
they
work
with
any
web
framework
on
all
modern
browsers.
So
you
want
to
work
in
react.
We
got
you
covered,
but
you
want
to
work
in
angular
in
view
plain
old,
HTML
Blazer,
anything
you're
thinking
of
the
graph
toolkit
will
actually
work
for
you.
A
Why
should
you
care
about
a
toolkit?
First,
it
cuts
on
development
time
if
you're,
like
me,
I'm
a
very
lazy
developer.
If
I
can
use
something
that
is
already
available
out
there,
that
has
been
tested
and
proven,
I'll
be
happily
getting
these
components
and
putting
them
in
my
app.
So
I
can
focus
on
my
business
value
rather
than
building
people
Pickers
and
person
cards
and
avatars,
and
all
these
things
that
are
fairly
similar
from
one
app
to
the
next.
A
You
also
care
because
they're
beautiful
but
they're
flexible,
so
we
are
leveraging
our
fluent
to
design
system
here
on
Microsoft,
where
all
the
components
now
they
just
feel
like
they're
part
of
Microsoft
365..
So
if
your
app
is
participating
in
the
M365
experience
by
living
in
SharePoint
in
teams
and
Outlook
in
office.com
well,
this
will
make
your
life
way
easier,
because
it's
just
going
to
be
the
same
thing,
but
you
can
also
fully
customize
them
if
you
want
to
make
it
very
similar
to
your
own
brand
and
finally,
just
works
everywhere.
A
Works
in
the
browser
works
on
electron
works
on
Mobile,
Works
anywhere
you're
thinking
of
but
the
day.
We
have
a
really
really
nice
surprise.
Well,
it
is
finally
live.
We
launched
today
approximately
30
to
40
minutes
ago.
The
blog
post
is
available.
If
you
go
on
dev
blogs
at
microsoft.com,
it
will
be
one
of
the
latest
blog
posts.
If
you're
going
to
see
there,
the
Microsoft
graph
toolkit
V3
is
now
fully
available
supported
by
our
team.
A
We
can't
wait
to
see
you
try
this
out
and
implement
it
in
your
app
we've
been
working
on
this
project
to
get
the
the
graph
toolkit
to
be
through
for
the
last
18
to
24
months.
We're
really
looking
for
your
feedback,
so
we're
excited
about
the
opportunity
to
add
your
capabilities
in
your
app.
But
today,
let's
focus
on
the
one
thing:
one
thing:
only
that
really
brings
a
new
set
of
capabilities
to
the
graph
toolkit,
which
is
research
components.
A
Our
search
components
are
two
separate
capabilities:
two
different
components,
one
which
is
a
search
box
that
allows
you
to
search
to
basically
enter
a
search,
query
and
second,
a
search
result
component
that
allows
you
to
render
results
coming
back
from
Microsoft
search
living
on
the
slash
search,
slash
search,
query,
endpoint
of
Microsoft
graph.
So,
let's
start
with
going
through
a
very
simple
demo
that
we
have
in
our
storybook
just
to
show
you
kind
of
the
the
potential
of
such
a
component.
A
So
let's
start
I'm
here,
I'm
in
my
environment,
first
thing:
you're
going
to
notice.
Now
you
see
3.0.0,
it's
probably
not
as
exciting
as
it
is
for
you
that
it
is
for
me,
but
we're
really
really
excited
to
get
this
one
out
of
the
door.
Super
super
excited,
so
here's
a
good
example
of
how
you
can
get
started
with
search.
So,
as
you
can
see
in
the
HTML
here,
there
are
two
things:
an
MGT
search
box
and
an
MGT
search
results
component.
A
The
first
one
has
absolutely
no
properties,
no
attributes
configured
or
whatsoever,
and
the
second
one
has
one
which
is
the
entity
types
here.
It
just
means
that
the
results
should
only
bring
back
Drive
items,
Drive
items.
What
are
they?
They
are
basically
files
and
folders
across
Microsoft
365,
so
they
can
be
in
SharePoint.
They
can
be
in
OneDrive.
They
can
be
basically
anywhere
in
Microsoft
365..
A
These
are
kind
of
the
foundation
of
building
search,
driven
applications
with
the
Microsoft
graph
toolkit.
How
do
they
connect
to
each
other?
Well,
the
search
box
here
will
emit
some
events,
saying
that
the
search
term
has
changed
and
you
will
take
that
query
from
the
search
box
and
add
it
or
apply
it
to
the
search
result.
So,
let's
go
look
at
the
JavaScript
code
that
we
have
here,
which
is
by
the
way,
very,
very
simple
right.
A
So
here
the
only
thing
I'm
doing
is
I'm
getting
my
search
box
I'm,
getting
my
search
results
using
the
query
selector
on
the
on
the
tag
name
actually,
and
here
I
am
listening
to
a
search
term
changed
event.
So
that's
the
glue
between
our
search
box
and
our
search
results
and
I
just
need
to
set
my
query
string
to
be
the
content
of
my
event
that
has
been
emitted
by
my
search
box,
so
very,
very,
very
simple
capabilities,
really
not
a
lot
of
code
to
build
an
experience
like
the
following.
A
A
But
I
went
the
most
generic
possible
where
I
can
find
these
components.
These
components
can
automatically
if
I
click
on
it.
It's
going
to
automatically
open
up
a
document.
I
see
my
folders
like
the
all
type
of
things
at
the
bottom.
You
can
see
our
paging
component,
which
allows
me
to
go
from
one
page
to
the
next,
and
you
will
see
that
we
have
a
lot
more
configuration
possible
with
this
component,
but
we
wanted
to
keep
it
as
simple
as
possible
for
this
demo.
A
So
that's
really
the
core
of
the
capabilities
that
we
have
an
MTT
component,
a
graph
toolkit
component.
So
what
does
it
mean?
It
means
that
it
integrates
with
the
rest
of
the
toolkit,
how
first
it
supports
our
brand
new
toggle
capabilities
for
our
theming.
So
if
I
put
it
to
be
color
code
in
dark
boom
automatically
my
Resort,
my
results
are
now
in
dark
mode.
You
can
configure
that
you
can
bring
your
own
theming
also
in
there
with
your
own
colors
very
easily.
A
So
this
is
really
like
a
simple,
simple
capability.
You
add
to
your
page,
two
different
tags,
these
two
ones,
the
MGT
search
box
and
the
MGT
search
results,
and
there
you
go
you're
good
to
go.
But
potentially
you
will
want
to
build
a
much
more
advanced
application
with
this
and
that's
what
I
want
to
showcase
some
of
the
really
cool
customization
options
we
have
with
the
graph
toolkit
search
component.
So
let
me
go
here.
A
Let
me
show
you
this
app,
this
app
ships
with
the
Microsoft
graph
toolkit.
If
you
want
to
run
it
you're,
absolutely
free
to
go,
you
will
have
all
the
the
instructions
on
our
repo
AKA
dot,
Ms,
slash
MGT.
This
is
our
hero.
Ad
that
basically
showcases
all
of
the
capabilities
of
the
graph
toolkit
in
a
much
more
advanced
way
where
you
can
really
see
some
sort
of
real
life
scenarios
as
part
of
the
toolkit,
one
of
them
being
having
a
search
driven
application.
So
here
I
can
go
in
here.
A
I
can
hit
on
search
and
take
control,
so
I'm
logged
in
already-
and
here
you're,
going
to
find
a
couple
of
of
things.
The
first
thing
you're
going
to
find
is
this
here
not
only
with
support
V1
endpoint
of
search,
but
we
also
support
the
beta
endpoint
of
search,
which
means
that
we
support
q,
a
bookmarks
places.
A
We
support
a
lot
of
the
extensions
of
Microsoft
search
so
in
here
when
it
found
a
bookmark
in
my
bookmark
system
in
Microsoft
search,
and
it
highlighted
it
for
me
similar
to
how
office.com
or
the
SharePoint
default
experience.
Does
it
then
afterwards,
I
can
find
a
couple
of
sites
here.
I
find
a
PDF
file
and
it
can
go
from
one
to
the
next
here.
A
So
a
couple
of
capabilities
are
really
interesting.
The
first
one
is
the
fact
that
I
can
fully
customize
the
rendering
of
these
things.
So,
for
example,
if
I
go
to
files
here,
I
completely
redone
I've,
completely
redone,
the
rendering
of
my
files
I'll,
show
you
the
code
in
just
a
moment
where
we're
basically
using
this
as
a
way
to
get
the
data
make
sure
the
data
is
clean,
that
it's
it's
easy
to
render
and
then
afterwards
render
it
as
part
of
a
nice
grid
provided
by
the
fluence
UI
team,
really
really
cool
stuff.
A
I
do
if
I
go
here,
go
back
here
and
I
search,
for
example,
for
Megan.
You
also
have
the
ability
to
search
for
other
types
of
content.
In
this
case
people
and
and
we
are
rendering
you
The
Full
Experience,
using
the
Microsoft
graph
toolkit
components
right
in
there.
If
I
go
to
external
here,
it
should
tell
me
that
I
didn't
find
anything
from
Megan.
So
let
me
go
and
try
Microsoft
365..
A
We
also
support
connector
data.
So
if
you
want
to
ingest
your
own
line
of
business
data
inside
Microsoft
365
to
make
it
part
of
the
search
experience,
you
will
be
able
to
easily
bring
that
component
in
there
and
it
really
really
helps
with
bringing
line
of
business
SQL
databases
on
premises,
SharePoint
data,
all
of
that,
our
external
items
that
are
being
ingested
directly
inside
your
Microsoft
365.,
damn
it.
So
let
me
let
me
show
you
a
little
bit
of
code
before
I
head
it
over
to
Paulo.
A
First
here
I'm
showing
you
my
header,
where
we
have
this
nice
component
right
here,
where
basically
here
I'm
using
our
react
components
where
I
just
need
to
say
hey
when
there's
a
search
term
changed
just
run
this
function,
and
it's
going
to
automatically
orchestrate
my
redirect
to
my
search
page.
It's
going
to
assign
the
search
term
to
my
app
context
and
so
on
and
so
forth.
A
Then
my
search
page
is
fairly
simple.
Right.
I
have
a
tab
list.
I
have
four
different:
let's
call
them
verticals
or
silos
or
source
of
information
for
search
and
I.
Have
four
specific
custom
components
are
in
here,
one
which
is
all
results.
One,
which
is
files
external
items
and
people
result,
so
let
me
show
you
the
all
results,
which
is
very,
very,
very
simple
right
in
search
results.
I
have
two
things:
a
first
search
result
which
is
here
where
I
specify
which
entity
types
I
care
about.
A
So
this
is
one
configuration
of
the
search
results
with
a
little
bit
more
details
in
here.
Right
second
thing
here
is
my
search
results
at
the
bottom,
where
I
can
pass
in
an
array
of
different
types
of
content.
Drive
item
list
item
site,
where
I
will
need
these
two
Scopes
and
where
I
will
want
to
fetch
the
thumbnail
of
these
items.
So
if
a
thumbnail
is
available,
we
will
actually
print
it
on
the
screen.
For
you,
another
really
really
good
example
is
how
it
can
be
super
simple.
A
Also
people
result
is
literally
a
one-liner
right
where
we
have
entity
types
where
we
just
specify
I
want
to
find
the
21st
people
that
match
this
search
term,
and
that
is
it
so
it
really
provides
a
rich
set
of
customization
options,
but
also
you
can
really
use
it
out
of
the
box
to
to
render
what
you
want.
Finally,
let's
look
at
file
resolve
file.
Result
here
is
actually
a
lot
more
complicated
than
all
the
rest.
So
let's
look
at
this
search
results
here
in
this
search.
Results,
I,
say:
I
want
this
type
of
entity.
A
I
want
to
also
bring
more
managed
properties,
so
I
can
play
with
them.
In
this
case,
I
want
to
bring
the
Creator
by
the
last
modified
date
time
the
title
and
the
default
encoding
URL
I
want
to
change
the
size
of
of
my
pages,
so
here
I'm
going
to
do
30
items.
That's
why
we
we
saw
30
items
earlier,
but
also
here,
I'm
gonna
enable
cash.
So
look
at
this
if
I
go
back
to
files
here,
you're
gonna
see
that
here
I
only
have
one.
Let
me
go.
A
Contoso
you're
gonna
see
how
quick
these
things
are.
If
I
go
to
page
two,
it's
gonna
fetch
it.
If
I
go
to
page
three,
it's
gonna
fetch
it,
but
if
I
go
back
to
page
two,
it's
going
to
be
instantaneous
because
we
actually
cached
your
results
in
your
browser.
So
you
don't
have
to
re
re.
Ask
for
it.
It's
going
to
Cache
it
for
a
couple
minutes
and
afterwards
it's
gonna
expire
and
then
you're
gonna
go
back.
A
And
how
do
we
render
this
really
nice
looking
grid
while
we're
using
here
our
file,
template
and
the
file
template
here-
is
just
a
simple
data
grid
provided
by
fluent
UI,
where
we
pass
in
our
items,
which
is
our
Drive
items
that
were
found
by
their
search
query?
So
it's
a
really
sit,
even
though
it's
a
complex
component,
it
really
enables
you
to
reuse
a
lot
of
what
you
have
been
using
to
build
your
components,
so
we're
really
looking
forward
to
what
you
will
be
building
with
this
search
component,
we're
looking
for
your
feedback.