►
From YouTube: CloudSpark Content Explorer App - Demo
Description
Watch this community demo by Nooriz Khamis and Jose Louis from CloudSpark Labs showing their Microsoft Teams Content Explorer app.
Resources:
Content Explorer App on GitHub https://aka.ms/AAaexl3
This demo is taken from the November Microsoft Teams community call.
To join future calls, please download the series at https://aka.ms/microsoftteamscommunitycall
Stay connected
Twitter https://twitter.com/microsoft365dev
YouTube https://aka.ms/M365DevYouTube
Blogs https://aka.ms/M365DevBlog
A
My
name
is
nurez
kamis,
I'm
vp
technology
at
cloud
spark
labs.
We
develop
teams,
apps
or
many
organizations,
one
of
the
ones
that
we've
developed
for
our
customers
is
the
content
explorer
app,
which
we've
actually
open
sourced
for
everybody
to
use
for
free.
Let
me
just
give
you
guys
quick
spiel.
We
only
have
about
10
minutes,
so
I
actually
want
to
get
into
the
demo
of
the
app
and
jose
on
the
line.
A
Is
our
one
of
our
senior
developers
on
the
product
is
actually
going
to
download
for
you
and
go
through
some
of
the
source
code
as
well?
So
let
me
just
quickly
start
by
talking
about
why
we
developed
it.
So
as
we
go
on
our
project
site
in
the
consulting
side
of
the
business
called
creosparc,
we
deal
with
a
lot
of
customers
now
and
especially
during
the
pandemic,
we're
finding
that
it's
very
important
that
we
keep
microsoft
teams
top
of
mind
when
we're
developing
an
information
architecture
right.
A
So,
whatever
you're
doing
in
terms
of
document
management
collaboration,
you
know,
sharepoint,
you
know:
site
collections,
modern
site
collections,
classic
you
name
it.
You
should
have
teams
top
of
mind
because
that's
where
everybody
is
working
70
to
90
percent
of
the
time
we're
finding
and
going
from
a
browser
to
teams
and
to
a
different
apps,
it's
really
frustrating
for
users
to
switch
contacts.
So
that's
kind
of
one
of
the
reasons
we
created
the
content
explorer
because
document
management
and
collaboration
within
sharepoint
may
not
always
reflect
the
way.
A
Your
organization
and
your
teams
are
structured
and,
as
we
know,
when
you
create
a
team,
there
is
a
sharepoint
site
created
on
the
back
end.
It
doesn't
mean
your
files
are
going
to
be
stored
there,
especially
if
you
guys
are
already
a
structured
and
organized
in
your
in
the
way
your
company
works
from
a
document
management
standpoint.
We
don't
want
to
restrict
the
users
and
the
organization
to
leverage
the
sharepoint
site,
that's
backed
by
the
team
they
want.
A
We
want
them
to
be
able
to
point
to
any
of
their
document
management
site
collections
on
sharepoint
online
or
sharepoint
on-prem,
so
we
wanna
and
that's
gonna,
really
help
from
a
use,
end
user
productivity
standpoint,
because
some
organizations
have
already
created
this
whole
information
architecture,
a
site
structure,
a
navigation
structure,
all
of
the
stuff,
that's
important
as
part
of
information
architecture.
We
want
them
to
leverage
what
they've
created
and
to
be
able
to
use
the
teams
that
might
not
correlate
to
those
site
collections.
A
A
What
we
did
was
create
this
content
explorer
to
be
able
to
point
to
any
site
collection
in
your
sharepoint
online
sites
that
you
have
and
being
able
to
show
all
of
the
libraries
and
the
lists
and
all
of
the
capabilities
there
in
a
security
trimmed
manner,
so
that
you
only
see
what
you
have
access
to
within
a
tab
within
any
team.
And
now
not
only
you.
Can
you
point
to
any
site
collection
that
has
sub
sites.
A
That
has
you
know
all
your
library
structure
and
you
can
view
it
in
a
flat
manner
or
you
can
view
it
in
a
hierarchical
manner.
So
all
of
if
you're
not
on
modern.
Yet
you
could
point
to
a
classic
base
site
and
it'll
show
you
all
the
subsites
and
such
you
can
browse
through
them
or,
if
you're
already
on
modern,
then
you
can
actually
point
to
a
hub
site
and
it
will
show
you
all
the
hub
attached
sites
that
you
have
as
well,
so
in
either
a
flat
or
hierarchical
manner.
A
B
B
So,
let's
begin
by
navigating
over
to
our
content
explorer
tab
after
loading.
The
first
thing
we're
going
to
see
are
the
lists
and
document
libraries
for
a
given
site.
In
our
case,
we
are
looking
at
the
about
site
collection.
We
can
see
this
site
collection
in
sharepoint
right
over
here,
and
so
I
have
a
couple
of
document:
libraries,
company,
info,
etc.
B
Some
of
them
are
right
out
of
the
box.
So
importantly,
this
site
collection
is
a
hub
site.
Now
we
can
select
a
given
library
and
navigate
to
its
contents.
This
now
links
us
directly
to
the
library
in
sharepoint.
So
what
we're
seeing
now
is
a
sharepoint
page
for
the
contents
of
the
chosen
document
library.
B
So
let's
close
this
down
and
let's
go
back
to
our
content
explorer
screen
now,
the
strength
of
the
solution
is
not
so
much
that
we
can
display
a
site's
lists
and
libraries
within
teams.
I
think
that's
pretty
fundamental,
but
actually
that
we
can
now
allow
the
user
to
find
content
that
they
will
need
when
that
content
is
spread
across
different
hub
sites
and
associated
hub
sites.
B
B
B
Additionally,
we
have
the
ability
to
show
or
hide
the
types
of
sharepoint
lists
and
libraries.
Perhaps
the
user
doesn't
care,
maybe
about
site
pages
or
style
library,
and
we
can
deselect
that
and
we'll
that
will
hide
them
in
the
view,
in
addition
to
hub
sites,
we
also
have
the
ability
to
display
the
contents
of
a
subsite
of
a
given
site
collection
and
finally,
we
can
alter
the
kind
of
layout
that
a
user
can
see
for
the
hub
site
and
its
associated
sites.
B
B
Importantly,
as
we've
already
seen,
we're
leveraging
microsoft's
fluent
ui
component
library
to
get
the
look
and
feel
and
functionality
to
match
microsoft
services,
but
first,
let's
take
a
look
at
our
web
part
file,
which
we're
already
in
here
here
is
where
we
set
our
rendered
component.
In
our
case,
it's
the
my
list
app
and
we
pass
in
all
our
web
part
properties
that
we
need.
We
saw
these
in
the
settings
panel
for
our
web
part.
Now.
B
B
All
right,
so
I'm
going
to
head
down
to
the
render
method,
because
we
see
there's
nothing
really
fancy
going
on
here.
We're
displaying
a
site
selection
drop
down,
we're
displaying
a
details
list,
and
this
happens
when
the
user
has
a
flat
layout.
So
when
it's
not
equal
to
grouped
and
alternatively,
we
just
display
a
grouped
list,
which
is
our
own
custom
component
when
they
select
grouped
so
our
site
selection
component
is
really
our
drop
down.
Now
this
is
sensitive
to
whether
we're
displaying
normal
site
collections
or
a
hub
site
with
a
hope
associated
sites.
B
Now,
based
on
what
site
we
select
in
the
site,
selection
drop
drop-down.
We
call
our
sharepoint
api
to
get
the
lists
and
libraries
to
be
displayed
in
our
fluency
ui
detail
list,
and
and
for
this
we
just
call
the
sharepoint
api
to
get
sharepoint
lists
and
libraries.
This
type
of
call
is
pretty
fundamental
to
the
sharepoint
api.
So
again,
I
won't
be
spending
time
on
this.
B
B
So
our
work
here
is
really
done
in
our
services.
Call
which
we'll
see
shortly,
but
our
site
selection
component
here
is
the
first
thing
is
that
it
mounts
and
it
tries
to
load
up
all
of
the
sites
that
it
can
get
and
our
load
sites
here,
as
we
can
see,
is
we
want
to
first
get
some
site
information
in
particular.
B
So
let's
take
a
look
at
our
get
associated
hub
sites
in
our
service
call
here.
This
call
is
pretty
important
in
that
it's
not
using
a
sharepoint
api
or
the
the
normal
sharepoint
api
endpoint.
To
get
this
information,
we
are
actually
first
having
to
get
our
a
hub
api
token
from
the
sharepoint
home
api.
B
So
here
we
get
an
api
token
from
our
sharepoint
home
service
api
and
from
this
token,
that
we
get
from
calling
the
sharepoint
home
service,
we
are
able
to
retrieve
a
secondary
sharepoint
home
service
api
endpoint,
which
allows
us
to
then
retrieve
all
of
the
associated
hub
sites
with
a
given
hub
site
id,
and
this
will
then
retrieve
all
of
our
hub
sites,
all
of
the
child
or
associated
hub
sites,
as
well
as
their
sub
sites.
So
this
is
where
kind
of
the
magic
happens
and
then
they're
kind
of
retrieved
in
no
particular
order.
B
So
I
have
a
helper
function
that
prepares
this
data
in
the
structure
that
I
need.
I
have
hub
sites
as
kind
of
the
root,
and
then
I
have
associated
hub
sites
underneath
those
and
then
subsites
underneath
those.
So
that's
the
crux
of
of
the
functionality
here
to
get
our
associated
hub
sites.
Once
we've
finished
this
portion,
then
it's
just
a
straight
call
to
get
lists
and
libraries
from
the
sharepoint
api.
B
Yeah
perfect,
and
so
here
we
have
a
link
to
our
source
files,
and
so
we
should
have
the
exact
same
structure.
As
we
just
noted.
We
have
our
components,
constants
interfaces
and
the
last
thing
I
showed
you
was
our
sharepoint
service
calls
in
here.
So
this
is
all
available
to
download
for
you
to
test.