►
Description
For this 23-minute site owner focused demo, Rodrigo Pinto shows off the immersive (2D and 3D) near-tactile experience in Sharepoint spaces that allows users to re-arrange how content is organized in a virtual environment. Rodrego creates a space (instead of a page), selects a structure (like shelves) to present assets, adds a background, ambient sounds like rain, and web parts (9 exist today) to the space. This PnP Community demo is taken from the bi-weekly Microsoft 365 – General M365 development Special Interest Group (SIG) community call recorded on June 25, 2020.
For developers - SharePoint spaces are rendered using Babylon.js - a WebGL-based graphics engine. SharePoint spaces may be provisioned with SharePoint provisioning service. SharePoint spaces are not open for third party extensibility at this time.
Demo Presenter: Rodrigo Pinto (Storm Technology) | @ScoutmanPt
Supporting materials:
• SharePoint spaces web page | https://www.exploresharepointspaces.com/
• Create a SharePoint space | https://support.microsoft.com/en-us/office/create-a-sharepoint-space-77e0bb2a-625e-40a9-b38e-1ca84db6cf65
• How to build an interactive library using SharePoint Spaces | João Ferreira | @joao12ferreira | https://sharepoint.handsontek.net/2020/04/28/build-interactive-library-using-sharepoint-spaces/
Learn more:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos
A
My
name
is
Luke
Pinto
I'm,
a
Portuguese
guy
I'm
working
for
company
called
storm,
that's
an
Irish
company
and
basically
I'm,
showing
a
little
bit
on
the
SharePoint
spaces
since
I've
been
around
this
thing
since
the
beginning.
So
what
is
SharePoint
spaces?
So
basically,
it's
the
web
basic
authoring
tool
for
us
to
give
more
to
have
more
immersive
experience
in
stories
within
the
within
the
platform
itself.
Okay,
so
why
SharePoint?
A
So
it
makes
total
sense
to
have
this
kind
of
technology
on
top
of
SharePoint
itself,
an
office
365
regarding
the
familiarity
on
altering
the
environments
in
in
all
the
tools
that
we
have
most
of
them,
of
the
content
that
companies
already
have
our
inside
of
SharePoint
3d
in
360
360,
the
content
and
we
by
having
those
type
of
content
in
inside
of
SharePoint.
We
have
the
security
and
compliance
apply
to
that
thing.
A
Okay,
so
why
the
web
basically
works
for
any
browser,
any
any
any
modern
browser
it
can
consume
3d
and
into
the
content,
and
basically
the
idea
here
is.
Even
if
you
don't
have
the
head
mounted
display,
you
can
actually
have
the
immersive
experience
within
the
campus
of
all
the
SharePoint
itself.
Okay,
so
what
are
some
of
the
sonars
like
we
can
apply
to
this?
Usually
you
use
the
the
the
space
itself
for
the
for
creating
scenarios
for
onboarding
or
or
or
tours
on.
Your
company.
Catalogs
are
trading
a
new
product
launch
launches.
A
A
One
of
the
things
that
we
can
actually
do
is
it
makes
mix
3d
with
with
the
current
sites
with
objects
and
being
a
little
bit
a
little
bit
a
little
more
immersive
on
all
the
experience
that
you
have
not
just
only
to
me
but
on
TD.
Also
so,
what's
the
experience
like
I
move
it
fast,
because
I
have
a
bunch
of
things
to
show,
you
show
you
guys
so.
B
A
Idea
here
here
is,
if
you,
if
you
we
have
the
the
controller
for
the
for
the
3d
it
is,
we
don't
need
any
muscle
memory
for
vote
for
the
for
for
using
the
the
controller
itself.
So
it's
just
one
quick.
You
just
select
it
and
there's
a
little
bit
of
video
on
this
type
of
thing.
So
what
you
see
right
now,
it's
a
canvas
in
3d
with
checkpoint
spaces,
where
you
select
an
object
and
you
can
rotate
and
you
can
expand.
You
inspect
the
stuff.
A
B
A
A
You
activate
a
site
level,
feature
okay,
side
pictures
and
then
you
have
on
this
one.
It's
already
activated,
it's
already
activated.
You
just
need
to
activate
this
this
thing
and
then
afterwards,
whenever,
whenever
you
do
you
go
to
your
your
homepage,
you
do
the
new
and
then
you
have
a
little
option
here:
called
space
preview
and
click
on
it.
A
So
what
is
this
so?
Basically,
each
one
all
the
3d
experience
that
we
have.
We
have
a
structure
and
basically
the
structure
is
it's
like
the
this
page
for
us
to
put
all
the
3d
assets
that
we
needed
and
how
to
navigate?
Usually
I
use
this
one
because
it's
we
know
one.
We
can
use
all
all
the
things
that
you
needed
here.
B
A
The
page
itself,
we
have
a
couple
of
options
here.
This
one
is
for
for
full-size
on
on
the
page,
and
you
have
the
space
design
here,
the
option
it
just
click
on
it
and
we
have
a
couple
of
options.
So
the
name
itself,
the
structure,
as
we
do
that
at
the
beginning,
and
afterwards
we
actually
can
can
change
this
background
to
the
ones
that
Microsoft
makes
make
available
to
us.
A
We're
not
adding
anything
else,
okay,
and
we
can
actually
change
for
another
type
of
background
illustration
or
you
can
have
a
bunch
of
demonstrations
and
change
the
color.
It's
more
like
a
digital
experience.
Okay,
another
thing,
another
cool
thing
is
you
have
a
welcome
message.
You
can
put
like
a
nail
audio
just
got
one
like
this:
the
intro
and
then
we
can
actually
have
Indians
sound
with
it
with
it.
B
A
A
B
A
After
that,
we
can
actually
add
web
parts
in
the
web
parts.
The
system
is
the
same.
That's
why
it's
so
easy
to
do
these
kind
of
things.
The
system
is
the
same
as
we
do
do
content
within
SharePoint.
So
couple
of
we
have
9
min
the
web
parts
with
this
for
not
for
now
for
for
dealing
with
360
content
into
for
dealing
with
some
of
the
custom,
some
of
the
content
that
we
are
actually
using
within
SharePoint.
A
A
You
can
change
the
height
of
the
podium,
something
like
this
and
we
actually
can
add
ax
for
the
for
the
for
the
for
each
one
of
the
items
that
we
see
here
so
basically
did
in
this
part
is
common
on
most
of
the
web
parts
and
basically
we
can
define,
we
can
add
or
remove
our
actions.
We
can
link
to
another
space,
play
audio
and
link
to
another
page
or
or
write,
and
so
I'm
going
to
do
the
polish.
This
thing
when
I
click
on
this
thing.
A
So
it's
quite
quick,
mersive
and
I
see
this
in
the
I,
see
this
in
the
future
for
having
pin
points
on
each
one
of
the
images
if
they,
if
the
software
will
support
these
kind
of
things,
it's
quite
interesting
for
for
companies
to
have
this
kind
of
approach
to
showing
products
I
mean
showing
even
even
reports.
Okay,
I
hit
the
scrape
thing
so
I'm
going
to
edit
the
page
again
and
I'm
going
to
add
a
little
360
video
and
actually
the
360
video.
A
A
So
this
is
this
is
the
kind
of
experience
that
we
help
women
whenever
you
have,
you
have
a
360
image,
I'm
not
going
through
the
entire
stack
for
us,
we'll
be
here
to
the
rest
of
the
day.
So
the
another
thing
interesting
is
a
3d
3d
object.
Basically,
this
is
the
place
for
my
all.
My
clients
are
the
is
the
most
used
item
for
them
to
have
this
kind
of
visualization
on
this
long
stock
of
items
I
just
created
3d
with
Parker,
so
it's
all
things
a
little
bit
heavy
yeah.
A
A
A
So
probably
there's
a
couple
of
other
ones.
The
document
library
will
look,
will
look
into
the
document
and
we'll
see
you
will
see
carousel
in
trees
in
3d
for
doing
the
things
for
for
choosing
the
parts
I'm
going
to
show
all
of
them
in
use
alone,
on
one
of
the
one
of
the
presentation
that
we
did
for
for
one
of
our
clients
and
depicted
we
go
here
to
the
unfading
and
spaces
company.
A
So
basically,
this
company
is
around
renewable
energies.
One
of
the
things
that
we
did.
Let
me
try
to
do
this
thing
that
we
did
with
that.
Actually,
we
levers
a
couple
of
360
images
for
loop
for
the
background.
These
are
some
of
the
files
they're
public
files,
but
there
are
things
that
you
can
actually
read
or
the
behavior
on
this
one.
This
one
is
opening
new
tab.
Actually
you
can
you
can
leverage
leverage,
leverage
this
same
followed
within
SharePoint
and
you
can
actually,
you
will
be
redirected
to
the
file
itself,
hopefully
yeah
yeah.
A
We
will
work
this
thing
that
you
see
here.
It's
actually
the
that
that
the
document
library
carousel
with
the
web
part
you
point
it
to
document
library
and
all
the
3d
objects
in
the
360
images
are
shown
here.
I,
don't
know
why
the
the
regular
images
are
not
at
the
beginning
of
the
word
right
now:
it's
not
working
at
all
away,
so
this
is
a
3d
object
object.
This
is
another
one.
A
A
A
Let
me
look
in
another
example
that
I
have
here
this
more
personal
one
as
you
notice
I'm
a
marble
freak,
so
what
I
did
was
actually
I
created
a
little
space
with
the
famous
euros,
so
you
can
have
this
kind
of
thing
like
a
show
or,
like?
Oh,
you
know
another
web
part.
It's
actually
interesting.
Is
that
what
the
one
will
regarding
the
organisation
sharp
okay,
so
this
tenant
is
checkpoint
or
later
so
it's
a
mix
between
Star,
Wars
and
Marvel.
So
it's
a
general
test,
so
no
problem
I
mean
basically
you
can
do
this.
A
A
A
So
this
is
the
experience
now
one
of
the
things
that
we
actually
doing.
It's
it's
it's.
Quite
it's
quite
good,
the
experience
of
editing
these
kind
of
things,
but
the
problem
that
we
have
right
now
of
doing
this
kind
of
of
content.
Usually
you
grab
the
model
and
you
need
to
replicate
the
model,
the
model
within
within
within
other
pages
or
whatever.
So
you
have
two
or
three
choices
on
that
thing.
A
You
just
copy
the
page
as
it
is
in
create
a
new
one
and
then
just
delete
what
you
don't
don't
want
and
then
edit
what
you
need-
or
you
use
the
the
PNP
to
do
the
the
provision
on
those
pages
or
you
do
something
more
or
less
like
what
I'm
going
to
show
you
now
and
basically
regarding
the
development
in
the
extensibility
of
this
kind
of
this
kind
of
assets.
Right
now,
it's
not
available,
so
hopefully
it
will
be
available
a
framework
within
within
the
PNP
umbrella.
A
So
all
things
that
you
see
here,
it's
me
it's
based
on
baby
babylon
GS.
So
it's
a
it's
a
JavaScript
engine
that
basically
manages
the
web
GL.
That's
the
the
thing
that
we
part
that
you
see
here
in
manages
only
quite
good
and
quite
easily
to
do
it's
like
if
you
need
to
to
think
in
the
future
and
try
to
extend
the
platform
with
something
that
Microsoft
will
provide.
It
will
be
based
on
the
same
concept
LT
that
you
have
on
on
Babylon
GS.
A
Okay,
one
thing
we
did
for
for
a
couple
of
clients
was:
let
me
just
check
so
basically
I'm
just
opening
this,
because
this
is
not
even
in
production,
yet
what
we
actually
did
was
we
created
we're
going
to
put
this.
This
is
a
web
part
that
we
created
just
for
the
mock-ups
itself.
It's
not
it's
not
right
now
completed,
but
the
idea
is
this.
This
book
part
will
be
part
of
the
of
the
PNP
repository,
also
okay,
so
basically
well
so
what?
What
is
this?
A
So
each
one
of
the
rectangles
that
you
see
here
is
a
scene
from
from
from
the
from
the
SharePoint
space
in
basically
one
one
of
the
things
that
we
can
do.
We
cannot
do
anything
inside
of
this
because
it's
it's
too
tight
it
in
too
close
with
the
compiling
and
with
ASP
effects
solutions
amongst
kind
things.
So
what
we
can
actually
leverage
is
the
current
platform.
A
The
current
structure
that,
with
that
checkpoint,
shows
us
uses
to
provision
those
web
parts
because
they
are
pretty,
but
there
are
web
parts
and
if
you
look,
if
you
look
at
the
pages
itself,
the
the
content,
the
content
covers
that
and
a
film
that
exists
on
their
own
site
pages.
You
can
actually
see
the
structure
of
each
one
of
the
of
each
one
of
the
avi
web
parts.
So
what
we
did
here,
we
grabbed
one
of
these
things.
Basically
the
Paige
and
me
we
ran
all.
B
A
Basically,
you
can
choose
the
imagine
that
you
already
you
have
a
huge
catalog
of
things
to
be
done.
Well,
since
we
now
all
since
already
done-
and
you
can
grab
this
and
you
can-
you
can
see
you
on
each
one
of
on
each
one
of
them
the
details
of,
although
this
is
a
text
fields,
they
are
using
it,
they
are
using.
A
A
A
We
can
actually
see
now
one
of
one
of
the
things
that's
kind
of
weird
and
we
need
to
drill
down
a
little
bit
more
on.
This
part
is
regarding
the
content
of
the
text
itself
on
these
things,
because
this
apparently
has
something
in
cash
that
is
using.
The
sample
looks
using
that
this
phrasing
and
if
I
go
here
and
do
the
edit
I
actually
see
that
the
phrase
is
Lisbon
right
now.
Another
interesting
thing
you
can
combine
scenes
can
grab
where's
the
scene,
Marvel
stuff
again.
A
A
Okay,
so
it's
will
be
yeah,
we
don't
actually
need
to
have
the
scene
preview.
Just
for
you
to
see
the
images
can
grab
this
thing
in
right
now,
it's
just
applying
to
that
page.
But
the
idea
here
is
to
have
this
whenever
you're
editing
a
page
space,
okay-
and
this
is
actually
helping
most
of
our
clients
to
replicate,
replicate
scenarios
which
I
don't
other
thing
just
for
you
guys
to
see.
A
What's
the
effect,
I
just
think
twice,
I
think
or
three
times:
okay,
I
do
a
refresh
on
this
thing,
so
I
can
actually
create
and
identify
the
web
parts
like
a
group
and
and
apply
to
the
page
itself.
Now
one
of
the
things
that
we're
busy
getting
also
is
is
moving
this
kind
of
things
on
that
song
that
web
part,
hopefully
the
the
the
new
framework
for
dealing
with
this,
will
be
ready
soon.
I'm
hoping
this
is
I
have
a
nightmare.
You
can
have
this
kind
of
thing,
so
I
click
twice
see
its
duplicated.
A
So
it's
easy
wait,
not
this
one.
This
once
I
didn't
duplicate
it.
That's
why
I
did
okay
and
basically
that's
the
things
that
we're
currently
doing
on
this,
which
it's
not
more
than
it's,
not
that
deep
on
on
on
adding
web
parts
and
adding
a
web
new
web
parts
all
these
kind
of
things.
But
it's
more
on
on
the
tooling
on
how
to
replicate
how
to
to
replicate,
duplicate
or
rearrange
the
content
across
the
entire
company.
Okay!
So,
basically
that
on
my
site,.
A
B
Think
that
one
of
the
challenges
related
on
the
on
the
let's
say,
refreshes
and
everything
else
is
quite
simply
that
it's
pretty
special
intensive
operation
when
you're
playing
with
Babylon
KS
at
the
same
time
when
you're
feeling
a
video
externally
to
Microsoft
so
yeah,
exactly
I
was
guessing
that
that's
not
the
bottlenecks,
but
it
is
really
really
really
cool
and
Babylon
is
like
mentioned
on.
The
chat
as
well
by
Harsha
and-
and
you
were
trigger-
is
the
the
behind
of
the
scenes.