►
Description
In this tutorial, let's add the jQueryUI Accordion to our web part project. We will build on top of the skills from previous tutorials but will create a new web part of it.
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/add-jqueryui-accordion-to-web-part.
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're
looking
into
how
we
can
use
an
external
javascript
libraries
like
in
this
case
jQuery
UI
accordion
in
our
SharePoint
client-side
web
part,
so
we're
gonna
reference,
the
jQuery
UI
accordion
remotely
from
CDN,
and
we
kind
of
used
that
JavaScript
a
component
inside
of
our
web
parts
to
render
and
nice-looking
UI.
In
this
case
this
is
January
23
edition
and
I'm,
using
SharePoint
framework
1.10
as
part
of
the
recording.
A
So
please
note,
if
you're
watching
this
video
later
on,
you
might
be
using
a
newer
version
of
SharePoint
framework
and
there
might
be
some
changes
on
the
documentation.
So
please
always
follow
up
on
the
on
the
written
format
and
if
there's
any
adjustments
based
on
what
has
been
actually
recorded,
but
let's
actually
move
into
our
windows,
10
machine
and
start
by
creating
us,
the
folder
structure,
so
I'm
going
to
go
to
a
console.
A
I'm
gonna
go
to
the
code
folder,
where
I
actually
have
existing
solution,
structures
and
tutorials
and
samples
what
I've
been
building
in
this
particular
clean
machine.
Now,
in
this
case,
we're
going
to
actually
create
a
jQuery
webpart
folder
and
let's
actually
go
to
that
folder
as
well.
Go
let's
clean
up
the
console
in
here,
we
kind
of
then
execute
Microsoft,
SharePoint,
yeoman
generator
and
using
the
default
pretty
much
the
default
settings.
We
actually
set
up
the
basic
structure
for
our
web
part.
A
Now,
what's
the
solution
in
Shaker
Airport
we're
gonna
use
SharePoint
Online,
targeting
in
this
case
we
kind
of
use
the
current
folder,
because
we
already
had
to
check
our
Airport
folder
and
we
kind
of
say
no,
doesn't
really
matter
because
we're
not
going
to
deploy
our
solution
actually
on
the
shipment,
we
all
know
kind
of
testings.
You
know
local
work
plans,
but
let's
say
no
for
the
tenant
deployment.
Let's
say
no
for
the
permissions
and
we
kind
of
create
a
web
port,
and
let's
call
this
web
part
jQuery.
A
Webpart
ask
the
description
and,
let's
choose
the
know,
JavaScript
framework,
and-
and
this
is
a
really
important
thing
to
know
once
again
to
understand
so
the
react.
I'm,
no
God
I'm.
Definitely
not
the
only
supporter,
JavaScript
frameworks
here.
It's
just
the
default
structures
and
templates
targeted
for
that
JavaScript
in
Microsoft
our
default
framework.
What
we
use
is
react,
and
but
you
can
just
as
well
always
use
to
know
JavaScript
framework
and
then
reference
all
of
the
needed
JavaScript
other
JavaScript
framework
files
like
if
you
want
to
use
you
chase
angular.
A
What
jQuery
in
this
case
and
scaffolding
of
the
solution
will
take
a
while.
So
let's
speed
up
the
video
until
the
scaffolding
is
fully
completed
and
they
began
out,
the
solution
structure
has
been
scaffold.
It's
let's
clear
up
to
the
console,
let's
actually
install
and
the
take
wery
version
to
here,
and
the
version
two
or
the
later
versions
have
small
adjustments
and
chances,
and
so
the
version
two
is
the
one
which
works
given
the
code
which
which
we'll
be
using
now.
A
The
next
thing
is
to
make
sure
that
we
have
also
the
check
very
UI
installed.
So
let's
actually
do
that
as
well.
So
let's
install
NPM,
install
jQuery
UI,
so
adding
that
one
in
the
solution
as
well
we're
not
gonna
do
any
dev
or
productions
which
is
in
this
case,
and
there
are
a
few
different
options
and
settings
which
you
can
actually
do
for
the
package.json
file.
But
let's
keep
things
simple,
just
concentrate
on
using
this
external
javascript
files.
A
A
That's
going
to
take
a
while
to
go
through
and
execute
and
then
we're
going
to
create
the
types
or
install
the
types
for
jQuery
UI
as
well
good.
So
let's
actually
open
up
the
solution,
then
in
visitors
to
their
code
and
have
a
look
on
whatever
action
they
have
here.
So,
first
of
all,
the
installations
which
we
did
are
now
visible
in
the
package.json,
so
we
can
actually
say
to
jQuery
and
jQuery
UI
being
installed
here
and
that's
basically
a
typical
npm
installation
process
just
to
pinpoint
we
can
always
double
check.
A
Are
those
things
available
or
not.
Now,
let's
start
by
going
the
the
coefficient
convict
JSON
file,
so
this
one
is
the
one
which
is
defining
what
kind
of
entry
points
we
have.
What
is
the
manifest
file?
This
is
giving
instructions
on
how
things
are
being
rendered
and
one
of
the
settings
here
is
actually
the
X
channels.
A
Next
channels
are
something
was
we
can
use
where
if
we
want
to
reference
a
javascript
file
externally
from
CDN,
and
we
don't
want
to
bundle
that
javascript
file
as
part
of
this
bundle,
so
basically
the
whole
solution
which
we
are
packaging
from
this
typescript
solution.
So
we
can
actually
define
that
to
be
the
case.
So
let's
actually
add
two
entries
here
so
in
the
externals.
Let's
actually
include
these
two
entries
so
we're
not
interested
of
actually
including
node
modules
and
the
jQuery
UI
and
jQuery
as
part
of
the
bundle.
A
So
let's
actually
go
to
the
actual
source
code,
so
we
go
to
source
code
and
with
parts
and
the
checker
a
party
is
fall
in
here
and
let
me
again
fix
the
the
intention
intention.
Indentation
of
the
coach,
which
is,
unfortunately,
is
slightly
confusing
for
the
chiffon
framework.
One
point
n
release
No
in
here.
We
can
actually
obviously
change
the
code
and
make
things
actually
work
properly,
so
I'm
not
going
to
modify
the
render
method
again.
But
before
we
do
that,
let
me
actually
create
a
blonde
file
which
is
going
to
be
called.
A
My
accordion
template,
add
TS,
so
let's
actually
copy
that
one
probably
and
create
the
file
here
and
in
this
one
I'm
going
to
actually
use
the
code
which
was
included
in
the
inter
documentation.
So
this
is
our
accordion
template,
which
is
the
template
HTML,
which
we
gonna
then
actually
use
when
we
are
rendering
information
and
together
with
the
accordion
functionality
from
jQuery
UI
good.
So
we
have
that
one
included
there.
A
We
are
exporting
that
by
default
and
called
my
accordion
template,
so
you
can
probably
guess
that
we're
going
to
reference
that
in
our
web
part,
which
is
definitely
the
case
as
well.
So
let's
actually
do
that.
So,
let's
go
on
the
imports
and
include
an
import
for
the
template.
So
there
we
go
my
code
and
templates
being
imported
from
that
file,
which
is
right
next
to
this
one.
A
We
can
also
import
unto
additional
inputs
related
on
jQuery,
so
we're
gonna
import
a
query
and
say:
query
UI
and
we're
going
to
use
that
as
part
of
our
code.
Now
we
also
kind
of
import
SB
loader,
which
we're
going
to
use
for
loading
the
file
from
the
CDN
in
our
constructor.
So
let's
actually
do
that.
So,
let's
add
a
constructor
to
our
web
part
and
there
we
go
and
then
we
are.
A
We
can
see
a
reference
to
the
code
sheet
or
a
comb
1.11
smoothers
jQuery
UI
CSS,
so
we
aren't
actually
up
a
referencing,
the
CSS
component
from
that
CDN.
So
that's
something
what
we
then
going
to
use
as
part
of
the
code.
Now,
let's
then
include
the
actual
piece
of
code
which
we're
going
to
use
in
the
implementation.
So
let's
modify
the
render
method
based
on
the
configuration
and
the
settings
which
we
have
in
the
documentation.
So
let's
get
rid
of
the
existing
render
method.
A
There
we
go
and
let's
actually
include
the
provided
information
on
the
random
methods
and
let's
have
a
look
on
what
we're
actually
doing
here.
So
we
aren't
taking
the
my
accordion
template
and
template
that
state
property
from
there.
Let's
have
actually
one
more
look
over
there
Maya
code
and
template
and
template
property,
so
we're
going
to
use
that
template
structure
inside
of
our
web
part.
Okay,
so
that's
called
then
accordion
options.
We
are
actually
setting
to
our
code
and
options
and
then
we're
adding
in
the
dot
accordion
CSS
entry.
Let's
go
back
on
our
template.
A
A
So
again,
how
do
we
do
these
things
and
at
least
highly
dependent
on
what
JavaScript
framework
you're
using
and
how
do
I
reference
things
so
the
documentation
for
the
accordion
options
and
using
the
jQuery
UI
options,
definitely
in
the
jQuery
UI
documentation,
specifically
on
SPF
X,
because
it
is
a
third
component,
but
now,
let's
actually
test
things
out,
I'm
going
to
save
the
changes,
and
let
me
actually
do
here
cleanup
and
let's
do
call
observe
so
we
can
actually
double
check.
Is
it
rendering
properly?
A
So
is
it
rendering
the
HTML,
which
we
hand
in
the
macro
my
accordion
template,
which
is
a
normal
day
of
NH
file
if
tree
using
the
jQuery
UI
is
style.
So
what's
going
to
happen
here
is
they're
going
to
start
the
local
a
birth
bench,
it's
actually
already
running
over
there
and
I
can
extend
that
and
we
can
see
I
check
our
web
part
and
our
jQuery
rendering
using
the
office.
A
Sorry
jQuery,
UI
extension
is
actually
working
properly
as
expected,
and
although
we
could
introduce
all
of
this
information
which
is
inside
of
these
sections,
coming
from
a
SharePoint
list
or
a
data
or
whatever
is
your
business
logic
on
and
whatever
you
want
to
actually
render.
So
this
is
a
quite
simple
way
of
using
the
jQuery
UI
inside
of
a
web
part
to
be
fair,
we
didn't
really
package
the
web
part.
A
We
didn't
yet
go
through
all
of
the
deployments
and
references
and
all
of
that
one
in
this
tutorial,
but
this
is
a
good
store
on
actually
using
and
the
web
part
or
using
the
third-party
extensions
as
part
of
the
web
parts
and
testing
them
out
also
in
the
local
workbench,
and
that's
what
we're
going
to
do
actually
on
this
tutorial
to
making
sure
that
the
basics
are
familiar
and
there's
an
additional
set
of
documentation
how
to
reference
the
external
javascript
files
and
assets
from
internet
in
our
official
documentation.
Thank
you.