►
Description
In this 9-minute developer-focused demo, follow along as Arun Kumar Perumal configures the FAQ web part’s layout in property pane - selects accordion or tab, colors and themes. Create categories and sort conditions. Subject matter editors use the rich text editor to easily answer questions. Uses Office UI Fabric Search Box - search by question, searched term highlighted in results. See code for the 2 components (FAQ and Accordion) in web part. Accordion is a custom component. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 2, 2022.
Demo Presenter
• Arun Kumar Perumal | @arun_perumal16
Supporting materials
• Sample - Frequently Asked Questions with Property Field Collection Data | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-faqs
• Article - Community Sample: React FAQs webpart | https://pnp.github.io/blog/post/community-sample-faqs-with-propertyfieldcollectiondata/
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community
A
Yeah,
so
the
whole
idea
of
this
frequently
asked
questions
with
property
field.
Collection
data
is
to
provide
business
with
an
easy
way
of
creating
an
faq
web
part
or
faq
component
on
an
modern
website,
and
the
business
did
like
this
because
of
not
having
to
context
switch
between
a
sharepoint
list
and
the
page,
so
they
can,
they
can
add
or
update
their
frequently
asked
questions
within
the
web
part
and
then
see
that
reflecting
immediate
a
little
bit
of
background.
I
work
with
vipro
as
an
sme
on
microsoft,
365
and
azure.
A
You
can
reach
me
at
room,
1682
hotmail.com,
my
linkedin
url
is
here
and
then
on
twitter
as
well.
Our
own
underscore
permanent
16.,
just
a
bit
of
features
of
the
faq
web
part.
Basically,
we
do
have
two
options
again
on
using
the
property
field:
collection
data.
There
are
two
separate
ones,
one
for
the
categories
which
are
basically
the
tabs
or
the
accordion
elements,
accordion
titles,
and
then
you
have
the
actual
faqs
within
that
particular
categories.
A
So
I
call
this
as
categories
and
the
actual
faqs
do
have
an
rich
text
editor,
which
basically
uses
a
pnp
which
text
editor
and
then
based
on
that
it
sorts
and
shows
we
do.
I
do
still
use
the
sorting
functionality
which
provides
a
sorting
capability
for
both
the
categories
and
the
rich
text.
There
is
an
ability
to
view
the
faqs
as
both
accordion
and
tab
tab
uses
pivot
from
the
pnp
controls,
reusable
controls
and
and
there's
a
search
capability
as
well.
A
When
you
search
for
a
particular
text,
it
searches
within
the
question
and
answer
and
highlights
on
within
the
search
area.
The
default
display
for
the
mobile
device
is
an
accordion.
At
least
this
is
one
of
the
things
which
I
feel
an
accordion
displays
better
on
a
mobile
device
than
a
tab
and
and
there's
a
custom
custom
accordion
component,
which
is
based
out
of
react,
accessible
accordion
as
the
other
example.
That
is
there
in
the
thing,
but
has
a
complete
code
inside
this.
This
is
another
thing
that
I
follow.
A
A
A
One
is
two
property
control
collection
data,
one
for
the
categories
where
you
define
your
categories,
which
are
basically
the
tab
or
the
accordions,
and
you
can
sort
as
well
and
then
you
have
the
faqs,
which
are
basically
linked
to
the
categories
by
the
category
name,
again,
a
collection
which
is
which
is
displayed
as
a
drop
down,
and
then
you
have
used
the
editor.
There
are
some
tweaks
that
I
have
done
here
like,
for
example,
the
ui
is
stretched
so
that
it
can
accommodate
a
better
view
for
the
display
of
the
rich
text.
A
Okay
and
there's
a
slight
issue
here
as
well-
and
I've
sort
of
accommodated
it
to
make
it
near
to
the
box
so
that
you
can
change
and
see,
okay
and
again
that
there
is
a
sorting
available
for
you
as
well.
You
can,
in
fact,
even
have
a
read
more
link
if
you
need
and
are
under
text,
for
that
particular
read
more
so.
Basically,
there
are
two
options,
as
I
said
right
you
can,
you
can
either
display
it
as
an
accordion
or
as
a
tab.
A
Tab
uses
the
the
pivot
I'll
show
you
that
when
I
go
to
the
code,
okay,
I'll
switch
it
back
to
the
accordion
and
we
will
see
the
search
part.
So
this
uses
the
accordion,
which
is
a
custom
component,
and
as
you
see,
the
the
site
theme
is
reflecting
on
the
component.
It
uses
the
current
selection
and
then
based
on
that
the
primary
color
is
used
for
it.
So
let's
do
a
probably
a
search
for,
say
topics,
you
see
the
that
specific
faqs
are
searched
and
it
is
highlighted
as
well.
A
If
you
change
the
thing
to
aviva,
then
it
automatically
updates
because
it
is
working
on
the
collection
within
the
component,
and
this
is
this
way
it
is.
It
is
a
little
bit
faster.
There
is
certain
lag
one
drawback
to
this.
Is
you
can't
use
it
for
a
large
amount
of
data?
If
your
amount
of
information
that
you
are
going
to
render
is
a
little
less
or
rather
is
about
15
to
25
faqs,
or
so
it
works
fine.
A
A
Yeah,
so
this
again
has
three
categories
and
then
two
each
faqs
have
been
headed
for
these
by
default,
and
this
is
part
of
the
information.
I'll
just
show
you,
you
can
in
fact
sort
it
and
then
it
immediately
once
you
save,
you
can
see
that
it
is
immediately
shown
and
the
same
responsiveness
is
immediate,
and
this
is
one
of
the
features
that
business
did
like
about
this,
and
you
don't
have
to
swap
between
the
things.
A
So
that's
more
on
this
I'll
go
through
the
code
and
we'll
see
how
it
is
built,
so
the
faq
web
part.
Basically,
there
are
two
two
different
components:
one
is
an
faq's
part
and
otherwise
an
accordions.
I
call
it
as
an
faq.
I
could
probably
call
it
even
as
a
tabs,
so
here,
basically
the
rendering
part
of
the
rendering
here
is
more
as
a
pivot.
As
you
can
see,
it
is
a
pivot
item
from
pnp.
A
Obviously
you
have
fabric
controls,
and
here
you
still
have
the
same
thing
so
it
uses
these
and
it
also
has
the
styles
and
others
which
are
pulled
from
there
and
the
second
one
with
the
accordion.
I
do
have
a
custom
component,
which
is
again,
as
I
said,
react
accessible
according
if
I'm
not
wrong.
This
is
something
which
I
had
built
back
in
2018,
so
probably
will
update
this
particular
functionality
to
use
the
one
from
zero
fabric.
If,
if
it
comes.
A
So
here,
based
on
the
rendering,
based
on
the
type
type
that
has
been
chosen,
it
is
accordingly
shown
there
are
a
couple
of
other
things
as
well.
One
of
them
is
the
mobile
thing.
This
basically
checks
based
on
the
browser
utilities,
is
mobile,
browser
and
there's
a
guide
as
well,
which
has
been
passed
in
case.
There
is
any
uniqueness
that
needs
to
be
maintained.
A
I'll
just
show
you
the
search
part
on
how
it
works
basically,
so
this
is
the
search
part
where
it
identifies
the
data
in
the
state
and
then
based
on
the
data
in
the
state.
It
actually
filters
and
shows
the
information,
firstly,
the
categories
and
then
the
actual
content
within
it
yeah,
and
just
on
this,
you
see
the
specific
things
on
how
the
background
colors
and
others
are
based
on
this
particular
thing
that
you
have
so
that's
where
it
depends
on
the
site
theme
and
then,
accordingly,
the
theme
primary
is
picked
and
shown
yeah,
that's
more.