►
Description
This tutorial will guide you in building a simple web part that uses one of the Office UI Fabric components, DocumentCard.
You can find the written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/use-fabric-react-components.
January 2020 version using SharePoint Framework 1.10.
More details around SharePoint Framework from http://aka.ms/spfx
Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp
Sharing is caring!
A
Welcome
to
this
getting
started,
SharePoint
framework
tutorial
series
and
in
this
tutorial
we'll
have
a
look
on
how
we
can
use
the
office.
Ui
factory
create
components
in
our
shape
on
client,
side,
web
port
or
technically.
The
process
is
exactly
the
same
if
we
would
be
using
Lotus,
you
have
fabric
react
components
in
any
shape
and
frame
web
solution.
A
This
is
January
2020
edition
and
I'm
using
SharePoint
framework,
1.10
version
on
this
exercise,
and
please
note,
if
you're
watching
this
video
later
on
and
it
might
be
in
small
changes
in
the
newer
versions
of
SharePoint
framework.
So
please
always
double
check
the
documentation
which
always
came
being
kept
up
most
up
to
date
from
a
finance
perspective.
Now,
let's
actually
jump
into
it.
So
let
me
go
to
our
Windows
10
machine
and
where
we're
gonna,
which
we're
going
to
use
for
arm
development
exercise,
is
our
development
environment.
A
Let
me
go
to
my
C
code
folder,
where
I
already
have
some
example,
solutions
which
are
graded
in
other
tutorials
as
well.
Then
here
I'm
gonna
do
document
court
example
a
web
part
solution
and
I'm
gonna
actually
go
there,
and
in
here
we
can
execute
the
yeoman
generator
for
SharePoint
framework.
So
we
get
our
basic
structure
created
based
on
the
default
settings
and
we
can
use
the
default
solution.
A
Name
we
kind
of
target
SharePoint
Online
and
we
can
use
the
current
folder
because
already
the
specific
folder
we
can
use
the
tenant
one
deployment-
we're
not
gonna
actually
do
that.
But
for
the
exercise
perspective
it
doesn't
really
matter.
What
are
the
answer
on
those,
but
the
web
port
is
the
target
solution.
What
we're
going
to
create
and
we're
gonna
go
on
with
our
s
a
document
card
example.
So
we're
going
to
build
a
document
card
with
a
static
assets
but
using
the
office.
A
You
have
appropriate
controls,
and
this
is
document
core
two
example
description
which
was
the
default.
What
are
you
so
now?
I
actually
changed
it
slightly
with
a
small
typo,
but
that's
fine
and
we
kind
of
choose
a
react
as
the
target
environment
in
here.
So,
let's
click
enter
from
there
and
that's
going
to
be
the
scuffle
our
solution,
and
this
is
going
to
take
again
few
minutes.
So,
let's
actually
gonna
speed
up.
A
Let's
speed
up
the
video
and
continue
after
a
few
seconds
dudes,
the
solution
structure
has
been
now
scuffled
it
and
let's
actually
clean
up
the
window
slightly
and
open
up
the
way
hook:
I
open
up
the
window
in
the
visual
studio,
coach
dot
and
that's
gonna
open
up
that
in
abysus.
Today,
okay,
let's
close
up
the
welcome
as
well
what
we're
interested
in
here.
First
of
all,
let's
have
a
look
on
the
web
part
structure
slightly
more
details
at
this
time.
A
We
actually
have
this
components
folder
here
and
if
we
open
up
the
actual
web
part
file,
the
manifest
file
looks
exactly
the
same,
but
the
web
part
file
actually
has
slightly
different
structures,
so
we're
actually
referencing
the
the
actual
component
from
the
components
folder
and
in
our
render,
we
aren't
actually
using
react
and
rendering
in
that
components.
Our
document
choreographer
part
example
component
from
the
component
side
and
that's
where
the
actual
rendering
of
the
rendering
logic
is
actually
being
defined.
We
do
my
pass
the
description
over
there.
A
Oh
it's
it's
then,
being
actually
rendered
in
this
props
and
description,
so
we're
using
the
react
way
of
handling
and
creating
these
components,
rendering
things
now
it's
actually
modifying
the
slightly.
So,
let's,
let's
modify
the
imports
and
interest
interest
in
here,
so
I'm
can
actually
add
few
additional
imports.
On
top
we're
going
to
use
the
default
office,
you
have
fabric
react
version
which
is
scaffold
it
by
default
available
in
the
react
based
structures.
A
Also,
let's
actually
modify
the
render
method
within
this
component,
so
we
can
more
easily
render
the
file
I
would
quickly
actually
render
slightly
different
layout
out
from
the
from
the
web
part.
So
let's
say
that
the
changes
on
that
as
well
now,
the
next
thing.
What
we
can
actually
see
here
is
that
we
do
have
a
few
different
images
referenced
and
we
actually
need
to
get
those
reference
and
the
same.
It
is
download
it
from
a
centralized
location.
So
let's
actually
make
that
happen.
A
A
So
let's
actually
download
that
set
and
save
em,
it's
nice
and
based
on
the
documentation
and
the
guidance.
We
should
be
saving
that
one
in
the
components
folder,
which
is
completely
fine
so
and
that
is
a
good
location
of
all
of
those
things.
So
they'd
actually
open
up
that
in
an
explorer
I'm
just
going
to
go
and
copy
the
path
in
the
source,
web
birds.
There
are
components
and
there
we
go
so
complete
that
one
and
to
be
available.
Now,
where
do
we
save
stuff?
A
We
can
save
stuff
in
that
folder
and
that's
an
avatar
and
cat
as
the
name
good,
and
that
was
the
one
question
or
one
asset.
Let's
actually
request
the
other
asset
as
well.
I
can
be
BT
and
so
on
that
one
over
there.
So
let's
actually
download
it
as
well
and
save
image
as
and
save
it
to
the
same
folder
and
also,
let's
actually
copy
the
final
URL,
which
was
the
documents
preview,
which
is
an
imaginary
review
of
the
document.
A
And
let's
download
that
one
as
well
and
save
that
to
the
same
folder
now
opens
the
document
preview
would
work
with
the
document
preview
coming
from
the
file
assets,
but
in
this
case
we're
just
testing
out
the
controls,
so
we're
not
actually
going
to
operate
against
the
craf
API
or
the
files
rest
API
in
SharePoint,
but
just
gonna
test
out
that
thing's
not
working
properly.
Now,
let's
get
back
on
there
on
the
solution
and
a
few
things,
maybe
the
notice
here.
A
Let
me
clear
out
that
one,
because
we
aren't
actually
using
the
require
entry
here
and
we
are
requiring
these
images
from
the
components
folder.
We
actually
are
getting
them,
bundled
inside
a
forest
solution
as
well,
so
the
only
we
don't
need
to
do
any
extra
settings
and
extra
things
to
make
all
of
those
images
being
bundled
or
packaged
inside
of
the
of
the
solution
as
well.
A
So
now,
when
we
go
back
in
the
pier
and
we
do
observe,
we
can
actually
see
that
those
images
aren't
being
properly
rendered
from
the
right
location
as
well,
because
they're
being
required
to
be
available.
So
let's
look
up
surf
and
the
workbench
should
be
loading
there.
We
go.
Let
me
close
up
the
download
and
here
and
let's
actually
open
up
the
document
example
and
there
we
go.
A
We
can
actually
say
this
to
one
image,
just
another
image,
and
there
is
another
image
and
the
same
by
the
way
applies
that
the
required
will
make
the
images
available
also
as
part
of
the
the
solution
package.
If
you
are
using
the
package
assets
option,
so
do
all
of
those
images
of
being
packaged
inside
of
this
baby
acacia
file
properly,
so
they
will
actually
work
properly
when
you're
referencing
them
out
in
the
production
as
well.
In
this
case,
we
just
wanted
to
test
out
the
office.
A
You
have
ever
create
components
using
an
imaginary
images
which
were
static
images,
not
dynamic
images
coming
from
SharePoint
Online,
but
using
the
office.
You
have
appropriate
components,
absolutely
preferred
option
a
recommended
option
because
you
get
the
same
look
and
feel
as
what
we
use
in
the
in
the
natively
in
SharePoint
or
in
office
and
office
online
in
general.
So
please,
please,
please
take
about
the
advantage
of
this
controls.
There's
also
a
separate
set
of
controls,
which
are
the
BMPs
VFX
controls.
A
It's
a
super
useful
which
are
even
decorating
more
on
top
of
the
office,
your
fabric,
we
add
controls,
so
we
recommend
using
those
as
well
which,
because
they
will
increase
your
productivity
as
a
developer,
but
anyway,
that's
all
what
we're
going
to
do
in
this
tutorial.
So
we
basically
started
using
the
office
or
a
fabric
react
controls.
We
use
the
document
core
control.
A
We
reference
some
of
the
static
images,
not
dynamic
limiters
from
an
existing
files
in
SharePoint,
and
then
we
tested
out
the
rendering
of
these
components
in
the
local
variants,
and
it
looks
pretty
ok,
critical
rendering
for
this
set.
But,
like
said,
that's
all
for
this
tutorial
have
a
look
on
if
you're
looking
into
more
advanced
scenarios
related
on
using
office
to
our
fabric,
please
please
have
a
look
on
our
documentation
which
is
available
and
if
something
is
missing,
please
let
us
know
and
we'll
get
the
documentation
improve.
Thank
you.