►
Description
In this 13-minute developer-focused demo, Fabio Franzini suggests there are 2 common approaches to web part UI development – use a UI framework or use a templating system. Now there’s option 3: React HTM Templating web part that uses Fluent UI components written in React, no wrapper required. Renders the React control as a template. Essentially JS code evaluated through the Function constructor. Review properties, HTML editing, and code in the demo of this PnP sample. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 9, 2021.
Demo Presenter: Fabio Franzini | @franzinifabio
Supporting materials:
• Sample - React HTM (Hyperscript Tagged Markup) Templating | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-htm-templating
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos
A
First
of
all,
some
words
about
me:
I'm
max
of
mvp
in
office,
development
and
business
application
category
and
I'm
working
as
a
senior
consultant
consultant
and
trainer
on
microsoft,
process,
5
and
power
platform.
So
you
can
find
some
information
like
my
email,
twitter,
linkedin
and
the
github
account.
A
So
we
can
start
on
thinking
about
how
to
develop
the
ui
for
our
part.
So
there
are
two
ways
to
approach
when
you
want
to
create
the
ui
for
a
web
part.
First,
one.
The
first
one
is
create
the
ui
during
the
development,
of
course,
by
using
sharepoint
framework
and
typescript,
you
are
able
to
use
a
react
or
another
frameworks
using
fluent
ui
or
another
ui
framework.
A
In
this
case,
when
you
want
to
use
a
template
and
evaluate
around
time,
we
need
to,
for
example,
by
using
the
handlebars.
We
need
to
understand
something
if
we
take
an
example,
the
pmp
modern
search
web
part.
This
is
our
part.
I
use
handlebar
syntax,
some
helpers
and
then
use
html
and
css
to
build
the
ui.
Of
course,
if
you
want
to
use
some
complex
controls,
we
can
use
some
web
components
provided
by
the
solution
and,
of
course,
the
microsoft
graph
toolkit
component.
A
A
So
what
is
the
pros
and
cons
of
the
two
approaches
so
create
ui
during
development
or
use
the
template
and
evaluate
runtime?
Of
course,
if
you
created
the
ui
during
development,
you
have
maximum
freedom
of
which
framework
you
want
to
use.
You
have
the
great
flexibility
on
implement
complex
ui,
because
you
write
code
and
you
are
able
to
do
anything
excellent
development
and
testability.
A
If
you
use
the
template
and
developer
runtime,
you
have
maximum
freedom
on
customize,
the
ui
without
recompile,
but
you
have,
I
think,
a
poor
ui
testability
and,
of
course,
you
are
not
able
to
use
all
the
framework
that
you
want
without
risks.
For
example,
using
fluid
ui
react
without
write,
some
wrapper
using
web
components
or
something
like
that,
but
this
is
my
sample.
A
This
is
very
interesting,
basically
this.
So
the
template
that
you
have
to
to
create.
Basically
it's
a
piece
of
javascript
code
and
this
code,
it's
evaluated
through
the
function
constructor.
So
inside
this
slide,
you
can
find
some
line
of
code,
the
first
line.
It's
the
line
that
used
the
function
constructor
by
passing
the
string
that
contains
the
template
that
we
want
to
evaluate
and
the
second
piece
of
code.
It's
the
executable
function.
So
the
function,
the
arrow
function
that
use
the
constructor
function
that
we
have
defined
and
call
it
bypassing
the
function
context.
A
The
function
context
is
just
on
a
javascript
object
that
contains
all
the
data
and
all
the
function
that
we
want
to
pass
to
our
template
and
the
last
part
of
the
code.
It's
the
way
to
render
as
a
react
control
our
template
by
using
the
html.
So
html
is
the
object
that
implements
the
hyperscript
tagged
markup,
and
then
this
is
the
simple
syntax
a
little.
I
show
you
an
example
on
how
to
render
the
execute
level
function,
that
it's
the
object
that
it's
returned
from
our
template
and
then
by
using
react.
A
The
context
object.
Object,
of
course
contains
some
fields.
We
have
the
reference
to
the
html,
so
html
is
the
reference
to
the
htm
engine,
the
reference
to
react,
the
reference
to
the
the
theme
object,
the
reference
to
the
team
variant.
If
you
use
the
part
inside
on
a
a
section-
and
you
want
to
change
the
variant
background
to
this
section,
you
have
inside
the
context
of
the
object
that
represents
the
team
variant
and
then
another
three
object.
A
The
fully
it's
the
reference
to
the
fluent
ui
object,
the
namespace
that
contains
all
the
controls
of
the
fluent
ui
the
front
ui
hooks
that
are
useful
inside
your
your
template
and
just
for
this
sample
an
object
that
contains
a
fluent
ui
sample
data.
I
use
this
one
to
have
a
simple
data
to
show
how
to
use
this
template
inside
the
web
part.
A
A
It's
used
the
standard
javascript
target
template
that
available
in
all
modern
browser,
and
it's
very
light
in
terms
of
dimension
of
the
library.
So
this
is
a
basic
introduction
to
the
syntax.
You
can
use
the
spread
prop
by
write
as
a
string,
the
html
tag
and
then
write,
for
example,
dollar
props
to
to
pass
more
than
one
property.
If
you
want
to
use
the
react
component,
you
have
to
write
something
like
dollars
and
the
name
of
the
components
to
pass
the
instance
of
the
components
inside
the
target
template
string.
A
But
the
the
good
thing
is
that
you
don't
need
to
transpire
nothing
because
by
using
this
technique,
you
are
able
to
use
it
directly
in
a
html
like
syntax,
the
all
the
control,
all
the
react.
Controls
that
you
want
to
use
more
improvement
are,
for
example,
the
possibility
to
use
more
multiple
root,
fragments
without
problem
use,
a
comment
and
close
the
tag
by
using
the
slash
slash.
A
A
So
if
you
click
on
the
edit,
you
can
find
some
information,
so
the
information
on
how
to
use
the
context
object
inside
the
template,
the
possibility
to
load
the
fluent
ui
sample
data
and,
of
course,
if
you
want
to
use
the
ui
load,
different
ui
library
components,
but
the
good
thing
is
here:
you're
able
to
click
and
then
edit
directly
the
html
template.
So
basically
I
want
to
show
you
here
the
the
only
thing
that
you
have
to
do:
it's
the
right
turner,
the
html
object,
and
this
is
the
syntax.
In
this
case.
A
I
create
this
object
in
the
team
provider
by
passing
the
team
variant,
and
then
I
create
a
stack
panel
and
then
I
create
a
label
and
a
primary
button
and
analyst
that
have
some
items
and
an
on
render
cell.
So
this
this
part,
of
course,
I'm
able
to
write
some
javascript,
it's
not
typescript,
but
it's
javascript
to
define
their
own
render
cell
and,
of
course,
to
define
some
class
names
and
some
items
that
you
want
to
use
directly
inside
your
template.
A
A
Sorry,
I
need
to
check
again,
okay,
save
and
then
apply,
I'm
able
to
debug
inside
the
developer
tools
the
code
and
then
we
are
able
to
to
check
all
the
react
components
or,
for
example,
original
items.
We
are
able
to
see
all
the
objects
that
we
pass
inside
this
fluent
ui
list
component
it.
This
is
very,
very
powerful.