►
From YouTube: Productivity Studio: SPFx accelerators used in Microsoft to speed up SPFx development cycle
Description
In this 14-minute developer-focused demo, Daniel Turley first grounds us on what is the open-source SPFx Solution Accelerator and its features, then he steps us though his Rhythm of the Business (RoB) Calendar app sample built with the accelerator to highlight the features, functions and code. Features include: Guidelines, services framework, dynamic provisioning, react components, tooling and Live Update. The SPFx web part app helps users to manage a team’s events and can be added to SharePoint site or as a Teams tab.
This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 6, 2023.
Demo Presenter
• Daniel Turley (Avanade)
Supporting materials
• Sample - Rhythm of Business Calendar | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rhythm-of-business-calendar
• Sample Documentation - SPFx Solution Accelerator Deep Dive | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rhythm-of-business-calendar/documentation
• AppSource - Rhythm of Business Calendar | https://appsource.microsoft.com/product/office/WA200004833
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home
A
A
My
name
is
Dan
Turley
and
I'm.
A
full
stack
developer
at
avanod
I've
been
working
with
SharePoint
for
over
10
years,
starting
with
SharePoint
2010
I've
been
involved
in
projects
ranging
from
building
public
websites
for
businesses,
on
SharePoint,
to
solutions
for
external
business
partner,
access
to
SharePoint
sites,
and
now,
with
the
productivity,
Studio
utilizing
SharePoint
framework
to
build
business.
Apps
I
am
here
today
to
present
our
spfx
solution
accelerator.
A
A
A
A
We
have
guidelines
for
solution,
structure
to
organize
your
entity,
domain
model,
Services
components
and
schema,
which
is
your
data
layer,
which
is
typically
SharePoint
lists.
The
entity
domain
model
has
features
like
change,
tracking
validation
and
relationships
and
relationships
are
defined
between
entities,
and
we
support
one
to
many
as
well
as
many
to
many.
We
also
have
a
services
framework
with
provided
services
for
SharePoint
list
data,
time
zones,
users
and
groups,
and
more
these
Services
utilize,
the
PNP
JS
Library,
who
are
making
rest
calls
to
the
SharePoint
apis.
A
We
also
have
Dynamic
provisioning
of
SharePoint
lists
and
other
resources,
which
is
very
useful
for
building
Rich
setup
and
upgrade
experiences
for
your
app
and
next
we
have
react
components
or
building
View
and
edit
experiences
with
panels
or
dialogues.
There's
a
component
for
handling
asynchronous
data.
We
have
controls
to
implement,
live,
update
scenarios
and
more.
We
also
have
tooling
to
support
development
teams
and
environments.
A
So
this
includes
additional
gulp
tasks
for
packaging
and
deploying
a
clean
build
of
the
solution
to
a
site
or
a
tenant,
app
catalog
using
a
single
command,
and
we
have
an
environments
file
which
is
used
to
define
different
builds
of
the
app.
So
you
can
provide
unique
names
and
guides
for
web
parts
and
the
solution
package,
as
well
as
other
resources
which
enable
teams
to
deploy
a
Dev
test
and
even
a
production
version
of
the
app
to
a
single
tenant
or
even
a
single
site
collection
without
causing
any
conflicts.
A
And,
last
but
not
least,
we
have
a
unique
feature.
We
call
live
update
which
ensures
users
are
always
collaborating
with
the
latest
data,
and
we
think
this
is
an
especially
cool
feature
that
is
similar
to
a
co-authoring
experience,
and
we
will
definitely
want
to
do
a
deep
dive
on
it
at
a
later
date.
A
All
right
now,
let
me
Demo
a
sample
app
that
we
built
using
this
accelerator.
So
some
quick
context,
the
app
that
we
built
is
the
rhythm
of
business
calendar
and
it
helps
you
keep
track
of
your
business
goals
by
managing
team
events.
You
can
coordinate
and
plan
with
your
team
easily
using
color-coded
events,
approval,
workflow
refiners
and
confidential
events.
A
A
Okay
here,
I
have
a
SharePoint
site
for
contoso
retail
and
I
have
a
page
where
I've
added
the
rhythm
of
business
calendar
app.
Let
me
expand
the
screen
here
here.
We
have
the
initial
View,
which
is
a
standard
calendar
layout
for
the
current
month.
We
also
have
over
here
we
have
custom
refiners
that
we've
defined.
A
We
have
two
rewinders
team
and
type
along
with
their
values.
The
team
refiner
uses
colors,
and
you
can
see
that
the
events
are
color
coded
on
the
calendar.
I
can
also
select
or
deselect
and
select
these
to
filter.
My
calendar
view
from
another
machine.
What
I'm
going
to
do
is
I'm
going
to
have
a
colleague
create
another
refiner
and
in
a
moment,
we'll
get
to
see
one
aspect
of
the
live,
update
feature
that
I
mentioned
a
moment
ago,
so
give
me
one
second
to
trigger
that.
A
So,
in
addition
to
the
month
view,
we
also
have
a
day
View
a
week
view
and
a
quarter
View,
which
has
all
of
the
events
for
a
particular
quarter.
Actually,
let
me
make
this
view
a
little
more
interesting
as
an
admin
I
can
go
into
settings
and
I
have
lots
of
settings.
I
can
play
with
I.
Think
I'm
going
to
do
here
is
to
group
this
view
by
one
of
the
refiners
I'm
going
to
choose
type,
and
now
you
can
see
the
events
are
are
grouped
by
month
and
also
by
the
type
refiner.
A
A
A
A
This
indicator
shows
me
who
added
the
item
and
how
long
ago,
so
this
live
update,
Works
across
entity
relationships
and
there's
even
an
experience
at
the
field
level
that
can
show
you
the
original
value,
your
colleagues,
recent
change
and
any
unsaved
edits.
If
you
are
currently
making
changes
all
right,
let's
cover
a
few
points
of
interest
in
the
source
code
now,
so
we
have
here
a
standard,
spfx,
scaffolded
solution
with
react,
typescript
and
fluent
UI,
and
we
have
the
web
part
file
here
and
what
I
want
to
show.
A
A
A
A
Here
are
some
services
that
are
provided
with
the
accelerator,
for
instance,
the
SharePoint
service
is
an
abstraction
for
loading
and
saving
data
to
lists.
We
have
a
live
update
service
and
the
developer
service
is
a
useful
little
service
that
registers
helper
scripts,
that
you
can
then
run
from
the
devtools
console
on
a
workbench
page.
A
Then
we
have
the
model
folder.
This
is
where
you
would
define
all
of
your
entities
for
your
application
and
I
want
to
look
at
one
of
these
in
a
moment.
Next
is
the
schema
folder.
This
is
where
you
would
Define
all
of
your
elements,
so
lists
and
so
forth,
that
need
to
be
provisioned
for
the
app
and,
lastly,
there's
a
Services
folder.
A
This
is
where
you
define
any
custom
services
for
this
application,
since
this
is
a
calendar
app.
Naturally,
we
have
an
event
service
all
right,
so
let
me
show
you
an
entity,
so
this
is
the
refiner
value,
which
represents
a
single
value
for
a
refiner
from
the
demo,
the
refiner
we
saw
the
the
live
update,
one
was
named
country
and
some
of
the
refiner
values
were
United
States,
Canada,
Mexico
Etc.
So
an
instance
of
this
refiner
value
entity
might
be
say
for
Canada
and
what
you'll
notice
here.
A
You
have
here
some
simple
getter
and
Setter
properties
for
these
fields.
Now
the
reason
that
we
use
this
pattern
is
for
the
change
tracking
feature,
so
we
can
actually
take
a
copy
of
the
internal
state
of
the
entity
and
then,
as
the
user
is
making
edits
to
fields
on
the
screen,
we
can
write
those
values
directly
from
the
input
fields
to
the
properties
on
the
entity
and
update
the
current
state.
A
Then
we
can
compare
the
previous
state
the
copy
that
we
made
to
the
current
state
and
we
can
determine
if
the
user
has
made
any
changes
and
from
that
we
can
drive
those
nice
UI
experiences,
and
this
capability
is
also
integral
to
the
live
update
feature
all
right.
Next,
I
would
like
to
show
you
a
loader.
This
lives
in
the
folder
for
our
custom
events
service.
A
Now,
the
purpose
of
a
loader
is
to
transform
data
to
and
from
a
data
source
to
an
entity
object.
So
here
we
have
a
special
kind
of
loader
for
SharePoint
list
views
and
you'll
notice
above
our
two
functions
that
we
use
to
perform
the
mapping
from
the
raw
data
that
we
received
from
SharePoint
apis
to
a
rich
entity
that
has
business
logic
that
we
can
leverage
throughout
our
app
and
the
last
thing
I
want
to
show.
A
A
And
down
here
we
have
the
list
definition,
so
we
can
specify
all
the
fields,
the
views
and
even
permissions.
Okay,
that
is
everything
I
have
time
for
today,
there's
so
much
more
that
we
want
to
show
you,
but
it
will
have
to
wait
for
another
day.
Thank
you
so
much
for
listening
to
My
Demo
back
to
you
Paulo.