►
Description
In this 17-minute demo delivered by Bo George - principal consultant at ThreeWill, learn about a Question and Answer SharePoint Framework (SPFx) web part that can be easily added to a site/page and configured by the site owner or site collection admin that both delivers a Q & A experience and controls user access. Capabilities shown: UI for submitting, liking, closing and promoting questions; displaying threaded responses; and behind the scenes access management that allows questions and answers from people outside the site’s permissions structure. This demo is extracted from the bi-weekly PnP community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded March 27, 2020.
In the demo, Bo starts with the Benefits site template from SharePoint look book. Site collection permissions need to allow experts from across the org, who can answer the question, the ability to do so as well as to record the response in a list on the site. Note: Presently this web part is not open source. It was shown to demonstrate an approach to for using SPFx controls to address a customer need.
Presenter: Bo George (ThreeWill) | @bo_george
Supporting materials:
• The case for a native SharePoint questions and answers solution | https://threewill.com/the-case-for-a-native-sharepoint-questions-and-answers-solution/
• PnPjs | https://github.com/pnp/pnpjs/
• Quill.js | https://github.com/quilljs/quill
• Look Book | https://lookbook.microsoft.com
All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2
Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
A
My
name
is
beau
George
and
and
that's
not
to
be
confused
with
Boy
George
of
Culture
Club
I'm,
a
principal
consultant
at
three
will
and
there's
a
bunch
of
stuff
where
you
can
find
me.
If
you
want
to
hunt
me
down
and
three
will
we're
a
consulting
company
that
we
we
focus
on
collaborative
solutions,
for
it
seems
like
ever
since
groove
groove
wasn't
owned
by
Microsoft
and
when
you
stop
to
customize
SharePoint
by
editing.
A
Oh
man,
oh
net
XML,
so
I've
been
doing
it
for
a
while,
and
so
what
I'm
going
to
show
you
guys
today
is
a
question-and-answer.
Espy
FX
solution
we
developed
for
a
customer.
We
had
to
get
their
permission
for
me
to
demo,
demonstrate
it
today.
It's
not
open
source
yet,
but
in
the
next
week
or
two,
hopefully
we'll
talk
to
them
and
get
approval
and
make
it
available
as
a
open
source
project
for
everybody.
So
I
don't
have
a
lot
of
slides.
This
is
really
last
one
before
the
demo.
A
You
know
the
first
question
is
really:
why
build
it?
We
all
know
Yammer
now
supports
question
and
answers,
but
this
was
built
kind
of
last
summer
and
and
the
customer
didn't
want
to
utilize
a
multiple
products,
a
Yammer
for
it
and
governing
Yammer
and
the
groups
and
all
the
membership
and
all
that
kind
of
stuff,
and
at
the
time
it
didn't
support
you
new,
QA
and
stuff
like
that.
So
so
Yammer
wasn't
an
option
for
us
at
that
time,
but
I
I
realized
that
it
could
be
for
some
now.
A
You
want
your
question-and-answer
data
to
live
in
SharePoint
lists
as
a
part
of
the
site
with
the
same
permission,
structures,
SharePoint
groups
and
all
that
kind
of
stuff
and
make
it
easy
really
easy
to
provision
create
sites.
The
end
users
request
and
be
provisioned
delete
them
week
when
they're
no
longer
needed.
So
so
those
are
a
lot
of
the
factors
that
went
into
why
we
did
this
and
kind
of
with
that
I'll
just
switch
over
to
a
demonstration
of
what
this
is,
which
I
I
took
the
the
benefits
look
book,
because
that
benefit
sites.
A
A
really
good
scenario
for
where
people
ask
a
lot
of
questions
and
the
only
thing
that
I've
changed
on
it
is
put
this
web
part
here.
So
it
really
doesn't
take
up
a
lot
of
space
on
a
site.
You
can
come
in
here
as
a
normal
end-user
and
search
for
questions.
So
you
know
you
just
start
with
a
you
know
a
what
phrase
or
a
where
phrase
or
anything
like
that
in
your
questions
will
filter
and
this
thing
is
already
doing
security
trimming.
A
So
if
the
owner
of
the
benefit
site
didn't
want
anybody
in
the
world
to
ask
a
question
or
their
visitors,
they
could
turn
off
this
button.
But
if
they
want
to
allow
anybody,
including
end-users,
to
ask
a
question,
they
can
turn
it
on
and
I'll
show
those
properties
in
a
minute
but
really
asking
a
question
for
an
end-user.
It's
just
simple
as
clicking
on
the
question
and
it
launches
to
another
page.
This
is
an
is
the
same
web
part
on
an
application
page,
and
you
know
my
questions
always
start
with
what
the
heck
is.
A
Bo
demoing-
and
this
is
a
rich
text-
editor-
that
at
the
time
I
don't
think
the
NSP
fx-control
existed
for
it
or
I
didn't
find
one.
So
it's
actually
using
quill
under
the
scenes
under
the
covers,
and
then
it's
styled
with
all
the
office
fabric
icons.
So
you
can
come
in
here
and,
put
you
know
a
bulleted
list
of
stuff
and
just
kind
of
go
down
the
line
and
do
that
sort
of
stuff.
I
actually
had
I
turned
off
the
ability
to
upload
images,
but
we
could
support
that
as
well.
A
But
somebody
could,
you
know,
go
and
post
their
question
and
what
you'll
see
after
I
post
is
that
I'm
automatically
following
this
question
so
I'll
be
notified
of
replies
to
the
question.
I
can
like
my
own
questions
or
other
people
could
come
in
here
and
like
it
when
testing
this
I
talked
to
myself
a
lot
so
I'd
come
in
here
and
reply
to
a
question
and
just
sort
of
start
that
thread
going.
You
know
and
you
can
reply
to
replies
and
all
that
sort
of
stuff.
A
The
threading
goes
basically
as
deep
as
you
would
expect,
and
then
I
could
close
this
question
and
now
that
I've
launched
to
this
page
it
acts
more
like
a
spa
type
application
where
you
close
it
and
you
can
see
a
list
of
questions
again.
It's
a
seven
web
part
just
configured
in
a
different
way.
So
I,
you
know,
I
have
some
fake
users
in
here,
and
you
know
you
notice.
Some
of
the
icons
showed
that
the
question
hasn't
been
answered
yet
and
then
shown
some
have
a
checkmark
to
show
that
it's
answered.
A
A
That
is
the
answer
myself.
I
am
also
a
moderator
of
the
questions,
so
I
could
mark
it
as
an
answer
and
that's
as
simple
as
you
know,
clicking
the
question
and
I
just
unmarked
it
as
an
answer.
So
this
is
sort
of
what
an
unmarked
scenario
looks
like
or
a
marked
scenario
where
myself
or
Jordan,
since
he
asked
marked
it
as
an
answer
again,
anybody
could
come
in
and
mark
this
as
helpful
or
like
things.
A
So
any
end
user
can
do
that
stuff
and
then
only
the
person
who
asked
the
question
or
a
moderate
moderator
could
delete
their
question.
Only
the
person
who
asked
replied
or
replied
to
a
question
or
the
moderator
could
delete
replies.
So
you
see
stuff
like
that
and
then,
if
I
go
back
to
the
list,
I'll
just
show
you
some
of
the
webpart
properties
that
are
available
so
on
an
application
page.
You
know
it'll
show
like
this.
A
A
So
that's
who
they're
letting
ask
questions,
and
then
this
other
button
here
is
manage
notification
group
and
what
this
is
is
you
do
have
your
owners,
visitors
and
members
typically,
but
those
may
not
be
the
ones.
You
want
to
moderate
the
questions
that
maybe
a
different
group
of
people,
a
subset
or
a
cross-section,
and
so
this
allows
us
to
say
who
are
the
people
that
need
to
be
notified
when
new
questions
are
asked
or
tweak
or
delete
bad
replies
and
all
that
sort
of
stuff?
So
these
two
areas
are
the
things.
A
A
You
know
have
the
love-hate
relationship
with
this
thing:
lots
of
fields
defined
in
there
for
all
the
different
things
I
want
to
track,
and
then
I
define
two
content
types.
So
a
question
and
a
reply
and
you'll
see
that
a
reply
could
actually
have
a
collection
of
reply,
IDs
and
stuff
like
that
and
a
question
ID
and
then,
of
course,
the
list
instance.
A
So
this
is
the
underlying
question
list
that
we,
you
know
we
set
hidden,
so
nobody
can
just
necessarily
see
it
in
site
contents
and
then
that
application
page
I'm
talking
about
so
that's
the
elements.
Xml
file
I,
really
like
the
earlier
demo
about
using
hooks
when
I
wrote,
this
I
was
sort
of
doing
Redux
for
the
first
time,
I
come
from
an
angular
background
and
so
I
really
love
dependency
injection
and
in
angular
and
I
tried
to
do
some
of
that
sort
of
stuff
here.
A
So
these
are
some
of
my
services
that
do
SharePoint,
typically
operations
and
I
was
using
Redux
and
their
middleware
to
inject
them,
so
that
my
actions
that
my
components
kind
of
had
a
single
instance
of
a
service
to
use
to
make
data
calls
and
things
like
that.
If
there's
time,
I'll
show
the
actions
as
well,
but
it's
probably
not
not
as
special
or
unique
to
show.
But
this
is
this
was
sort
of
meeting
me
coming
from
an
angular
world
into
a
react
world
and
trying
to
still
live
the
same
life
so
permission
service.
A
You
know
you'll
notice,
that
I
actually
didn't
inject
that
here,
because
the
only
thing
that
uses
it
is
the
web
part.
So
none
of
my
children
components
use
the
permission
service,
but
it
really
only
has
two
methods
that
are
important,
and
this
can
visitors
ask
questions,
so
you
notice
that
toggle,
you
know
that
web
part
might
be
on
10
different
pages.
Sometimes
in
this.
Quite
this,
this
is
used
by
the
web
part
to
figure
out
what
the
toggle
state
should
be.
Should
it
show
as
letting
visitors
ask
questions
or
not
right.
A
So
it's
it's
a
web
part
property,
but
it's
dynamically
updated
by
actual
site
settings.
So
it
just
figures
out.
You
know,
get
the
visitors
group
get
the
role
bindings,
find
the
visitors
role
and
then
say.
Tell
me:
hey:
does
that
visitors
group
have
the
ability
to
add
list
items
if
they
do,
then
that
toggle
is
going
to
say
true,
if
not
it's
going
to
say
false.
So
it's
dynamically
updated,
updated
anytime.
You
open
that
that
panel
and
then
this
is
the
toggle.
A
So
only
like
I
said
site
owners
are
the
only
ones
that
actually
have
the
ability
to
do
this.
But
if
it's
already
set
to
true,
then
I
want
to
reset
the
role
inheritance
on
that
list,
because
I
want
to
turn
it
off
so
I
say:
hey
I
want
I,
want
this
questions
list
to
have
the
same
permission
as
the
rest
of
the
site
and
that's
what
this
reset
does
or
if
you're
toggling,
the
other
way
to
say,
hey
I,
want
to
let
end-users
ask
questions,
then
I
need
to
figure
out
the
contributor
role.
A
Let
me
find
the
Associated
visitors
group
to
this
site
and
then
I'm
going
to
take
those
two
things
and
I'm
going
to
break
the
inheritance
from
the
site
itself
and
I'm
gonna
grant
the
group,
the
visitor
group,
the
ability
to
contribute
to
that
list.
So
that's
how
that
toggle
works.
How
all
of
that
stuff,
where
I
said
moderators,
could
add
and
delete,
and
the
person
who
asked
the
question
could
do
this
and
the
and
the
person
who
replied
could
do
that.
A
All
of
that
stuff
is
sort
of
managed
through
what
I
figure
out
in
the
user
service.
So
you
know
I
just
get
the
current
use
and
then
I
sort
of
prime
my
object
with
a
whole
bunch
of
falses
that
say:
hey.
They
can't
do
anything,
they
can't
add,
delete
edit
whatever
and
then
in
this
update
permission
information.
This
is
the
guy
that
really
tells
me
everything
else.
I
need
to
know
for
that
particular
user
and
so
I
figure
out.
You
know
based
on
the
effective
permissions
they
have
on
that
list.
Can
they
view
items?
A
Can
they
add
items
edit
delete
and
so
on
and
stuff
like?
Can
they
add
items
that
will
influence
whether
or
not
they
see
that
button
on
the
on
the
screen?
Because
if
they
can't
add
items,
maybe
only
members
and
owners
can
maybe
visitors
can't?
So
these
sort
of
attributes
tell
me
that
sort
of
information
and
use
that
on
the
screen?
So
that's
the
two
services
that
are
sort
of
different
since
I
have
a
couple
more
minutes
left
I'll
just
go
through
a
few
other
things,
so,
like
I
said,
I
use
react.
A
So
you
see
the
patterns
and
I
have
shout
outs,
one
more
slide
about
shout
outs
using
connected
dispatch
and
connected
state
love
to
switch
this
to
Hookes
at
some
point,
because
this
all
this
boilerplate
mapping,
state
and
props
and
all
that
kind
of
stuff
became
a
little
bit
annoying.
But
in
here
this
is
kind
of
my
default
container.
A
The
one
thing
I
wanted
to
show
in
here
is
that
with
quill
you
know,
I
was
able
to
make
it
look
as
close
as
I
could
to
SharePoint
by
overriding
a
lot
of
its
Styles
with
all
the
office
fabric
icons.
So
you
get
those
things
that
look
native
and
not
like
the
typical
bootstrap
icons
and
all
that
kind
of
stuff
that
that
many
of
the
other
controls
that
are
not
SPF,
X
controls
have
so
so
that's
how
I
did
some
of
that
stuff
and
then
just
a
word.
A
A
And
then,
if
you
show
a
question
it's
going
to
show,
you
know
its
replies
and
replies
to
replies
and
so
on,
like
that,
so
questions,
reply,
lists
and
reply
kind
of
build,
a
structure
and
a
reply
will
intern
to
a
reply
list
and
a
reply.
So
there's
a
big
component
structure,
interaction
there
and
then,
of
course,
question
listing
questions.
A
So
you
know
all
those
things
work
together
and
then-
and
that's
where
redux
and
all
of
its
stuff
really
was
helpful
because
you
know
they
all
have
their
there
carved
off
properties
and
state
and
actions
from
from
the
state.
That's
kind
of
all
defined
here
which
this
is
a
humongous
file.
But
it's
you
know
it's
the
business
logic
wrapper
and
the
sort
of
workhorse
around
stuff
like
getting
questions
and
doing
things
like
setting
up
our
order
by
our
filtering.
You
know
if
I'm
moving
from
page
to
page
a
questions
and
all
that
kind
of
stuff.
A
B
Really
cool
stuff
boom
and
I
and
I'm
watching
this
code
and
everything
it's
just
strike
me
as
well:
I'm,
just
gonna
be
open
and
transparent,
so
typically
and
it's
cool
to
see
how
awesome
stuff
people
built
with
being
PJs
and
the
tooling
and
controls
which
we
build
together
with
community,
which
really
shows
the
power
so
the
basics
and
and
the
PM
PJs
as
an
example,
is
a
fundamental
base
in
this
one
as
well.
One
thing
what
I
wanted
to
actually
ask
and
not
about
the
code.
B
Is
that
you
hand
in
your
property
pain
you
had
proper
ass
or
a
bit
part
information,
and
it
says
version
1.0
point
tree
I,
think
I
know
the
answer
for
this
one,
but
I
think
it's
actually
good
for
the
other
ones
too
here
as
well.
So
why
do
you
have
that?
Well,
it
has
that
come
to
be
useful
and
yeah
I.
A
Think
it's
you
know
for
me
this.
This
webpart
is
deployed
in
the
tenant
based
app
catalog
and
then
made
available
on
thousands
of
site
collections
and
every
now
and
then
you
know
when
you're
doing
upgrades
you
want
to
know
kind
of
unequivocally.
Am
I
run
in
the
latest
version
of
the
code
of
the
code
that
I
would
expect
to
be
running,
so
that's
really
helpful
without
having
to
run
those
get
P
and
P
app
commands
and
all
that
kind
of
stuff.
B
Yep
absolutely
make
sense
a
it's
a
nice
small,
let's
say
make
it
easy
for
ain't
user
to
actually
have
a
look
on
that
or
you
can.
Your
support
can
potentially
say.
Okay,
so
can
you
double
check
that
it's
running
the
right
version
and
they
can
easily
see
that
from
site
level
without
any
complexity?
So
pretty
so
it
doesn't.
That's
really
cool
but
I.
Think
that's
it
for
now.
So
thank
you
for
communities,
shoutouts
yeah.
A
B
B
A
really
cool
demo
really
create
stuff,
and,
and
hopefully
it
will
be
open
source-
maybe
it's
not,
who
knows,
but
it's
still
really
cool
to
say
the
thinking
and
the
implementation
behind
the
scenes,
and-
and
this
is
precisely
what
we
also
want
to
have
within
this
course,
because
it's
about
sharing
learning,
it's
about,
sharing
what
works
and
what
doesn't
and
having
a
discussion
on
on
the
different
patterns,
because
that
way
we
learn
I
say
as
a
group
of
people
rather
than
individuals.
So
thank
you
both
for
that.