►
Description
In this 14-minute developer-focused demo, Fabio Franzini shares his PCF HTML Template component that allows you to create new controls, with behaviors and internal state, using only HTML and a Json string! As you likely know, you can create a static HTML Text component in Power Apps Canvas. Now you may create a dynamic HTML text component using the Power Apps Component Framework (PCF). Step through proof of concept of the template component. Uses Microsoft Graph Toolkit template to implement template for control. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on October 13, 2022.
Demo Presenter
• Fabio Franzini (Apvee Solutions) | @franzinifabio
Supporting materials
• Documentation – HTML text control in Power Apps | https://learn.microsoft.com/power-apps/maker/canvas-apps/controls/control-html-text
• Documentation – Create and build a code component | https://learn.microsoft.com/power-apps/developer/component-framework/create-custom-controls-using-pcf
• Documentation – Templates in the Microsoft Graph Toolkit | https://learn.microsoft.com/graph/toolkit/customize-components/templates
• CSS – tailwindcss | https://tailwindcss.com/
• Handbook - #Twind Guide | https://twind.dev/handbook/introduction.html
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
B
Session,
it's
about
how
to
create
a
better
version
of
html
text
component.
So,
first
of
all,
just
few
words
about
me:
I'm
Fabio,
franzini,
I'm,
CEO
of
FB,
Solutions,
I'm,
Microsoft
mdp,
both
on
office,
development
and
business
category
and,
of
course,
I'm
a
developer,
but
I
brought
code
by
using
a
typescript
node.js,
basically
on
SharePoint
framework,
but
I
love,
powerfx,
I
love
powerapps
to
create
certain
applications.
So
in
this
slide
you
can
find
some
a
way
to
contact
me
like
my
email,
my
Twitter
account
LinkedIn
and
GitHub.
B
So
the
agenda
of
today,
it's
just
an
introduction
of
the
default
html
text
component
in
powerapps
canvas
and
then
I
want
to
show
you
just
on
a
block
of
and
a
component
built
on,
powerapps
component
framework
to
create
a
better
version
of
this
default.
Html
text
component
I'll
show
you
some
demo
and
and
the
code
of
course,
and
then
at
the
end,
just
one
slide
with
some
references.
So
this
is
the
default
you
can
see
in
the
slide
the
image
of
the
default
html
text
component.
So
basically
it's
used
to
show
static.
B
B
So
it's
used
to
create
not
only
to
show
html
text
but
to
create
custom
new
custom
component
by
using
HTML,
but
have
some
problems,
for
example,
it
this
this
control
not
support
the
internal
state.
For
example,
if
you
want
to
create
a
dynamic
control,
you
are
not
able
to
manage
the
internal
State
and
it's
not
implemented
the
interactivity
like
custom
events
and
so
on.
B
The
syntax
is
just
a
set
of
CSS
class
name
that
you
can
use
to
apply
some
Styles
at
the
HTML
elements
and,
of
course,
with
this
component,
you
are
able
to
handle
custom
events
by
using
the
standard
on
change,
Behavior
property
and
two
different
properties,
the
event
type
and
event
data
to
pass
to
the
from
the
component
to
the
the
canvas
app
which
custom
event
you
want
to
invoke
and
the
data
that
you
want
to
pass.
So
basically,
it's
a
component
that
allows
you
to
create
new
contents,
so
component
with
behaviors
and
internal
State.
B
So
inside
this
component,
I,
don't
use
the
Microsoft
graph
toolkit,
but
just
the
engine
to
apply
the
template
and,
for
example,
you're
able
to
see
that
here
you
can
attach
to
the
click
of
the
anchor
some
functions
and
then
pass
some
parameters.
And
then
we
have
the
the
syntax
to
to
bind
the
the
text
that
you
want
to
the
value
that
you
want
to
to
show
us
a
text
inside
the
the
the
result
and
again,
the
data
Dash
is,
if
you
want
to
show
or
hide
some
elements
based
on.
B
For
example,
director
of
this
get
State
function,
I
Implement
inside
this
component.
Some
function
that
it's
used
by
the
the
template
engine
to
manage
the
state
of
the
component
and,
for
example,
to
invoke
custom
event.
So,
first
of
all,
we
are
able
to
see
here
the
set
State
function.
This
set
State
use
two
parameters,
the
state
name
and
state
value,
and
it's
used
to
set
the
internal
state.
B
If
you
need
to
manage
the
internal
state
of
the
component
and
then
we
have
another
one
function,
name,
it
get
State
that
accept
just
one
parameter
state
name
to
retrieve,
of
course,
the
internal
State
another
one
for
toggle
state
to
toggle
the
specific
state
name
by
the
way,
with
another
value.
Basically,
it's
used,
for
example,
for
Boolean
Barrett
to
set
the
true
or
false,
and
the
last
one
is
the
invoke
event
function.
B
Yeah
you
can
use
to
invoke
to
emit
a
custom
event
and
then
manage
inside
the
canvas
app
by
using
on
change,
Behavior
property.
So
it's
time
to
the
demo.
First
of
all,
I
want
to
show
you.
This
is
my
test
environment
for
the
powerapps
component
framework,
and
this
is
the
the
component.
You
are
able
to
see
that
I'm
able
here
to
write
some
HTML
element
and
then
this
HTML
it's
a
rendered
inside
the
component.
But
for
example,
if
I
take
some
of
more
complex
like,
for
example,
the
success
message.
B
I'm
able
to
see
that
I'm
able
to
render
more
beautiful,
HTML
directly
inside
this
component,
so
this
HTML
it's
created
by
using
again
tilewind
CSS
and
tilewin
CSS.
It's
an
open
source
framework,
CSS
framework
that
Implement
a
lot
of
CSS
class
name
already
available,
and
then
you
need
just
to
use
specific
class
name
to
create
the
complex
Graphics
inside
your
HTML.
B
I
put
this
HTML
inside
string
inside
my
component,
and
my
component
render
again
a
beautiful
UI
using
HTML
and
tilewind
CSS.
Why
I
use
tilewind
just
because
it's
more
simple
to
decorate
the
HTML
to
apply
custom
Styles
then
use
directly
the
style
attribute,
for
example,
and
the
last
one
that
I
want
to
show.
B
You
come
on
just
one
moment:
it's
the
complex
one,
because
the
this
previous
sample
render
only
the
static
HTML
but
I
want
now
to
show
you
the
possibility
to
use
Dynamic
HTML
by
using
some
Json
value,
I
copy
and
paste
the
just
on
a
Json
value
and
I
want
to
show
you
this
portion
of
HTML
that
use
again
talwin
and
the
the
Microsoft
graph
toolkit
template
syntax
to
generate
dynamically
at
runtime.
So
I
put
this
one
inside
the
property,
and
this
is
the
example.
B
So
this
example
it's
represent,
for
example,
on
a
dashboard,
and
this
data
come
from
the
Json
barrier
that
I
passed
to
the
Json
data
property.
The
good
part
is
if
I
try
to
click
inside
on
a
specific
div,
this
HTML,
it's
completely
Dynamic
and
then
I'm
able
to
show
an
another
div
and
inside
this
another
div,
of
course
it's
dynamically
and
then,
if
I
click
different
box,
the
value
change,
if
I
click
again
I'm
able
to
hide,
because
inside
here
I
use
the
toggle
function
inside
the
template.
B
And
then
the
good
part
is
if
I
click
on
the
value
inside
this
div.
Okay,
I
have
two
output
properties,
sorry,
the
event,
type,
details,
click
and
the
event,
data
that
contain
the
value
that
I
passed
this
function.
So
if
I
click
here,
for
example,
or
here
and
I
click,
the
total
subscribers
I'm
able
to
show
here
the
total
subscriber
value.
This
means
that
if
I
go
inside
on
a
canvas,
app
demo.
B
That
use,
of
course,
this
control,
okay
and
then
click
on
start
I'm
able
to
see
that
if
I
click
its
work,
of
course
and
if
I
click
on
the
level
here,
I'm
able
to
show
here
inside
two
labels
inside
the
the
canvas
app
the
name
of
the
event,
the
value
that
I
passed
the
event
and
I'm
able
to
manage
the
on
change
property
to
interact
with
the
with
an
event
to
the
canvas
app.
For
example.
These
two
labels
take
the
value
from
the
event
data
and
given
type
from
this
HTML
template
component.
B
But
if
I
navigate
here
inside
the
on
change
event,
I'm
able
to
use,
for
example,
the
notify
to
notify
some
value
or,
if
I
want
to
implement
by
using
the
HTML
template
and
Json
data,
for
example,
on
a
navigation
bar
I'm
able
to
read
the
events,
data
and
the
event
type
and
then,
for
example,
when
I
click
on
specific
item
inside
the
my
HTML
navigate
to
another
screen
inside
the
same
application.
So
I
don't
have
too
much
time.
But
I
want
to
show
you
the
implementation
of
this
component.
B
So
basically,
it's
a
powerapps
component
framework
by
using,
of
course,
typescript
as
a
language,
much
to
create
this
component
and
have
four
different
type
of
properties:
the
HTML
template,
which
is
on
data
event,
type
and
data,
this
event
type
and
even
data.
It's
to
how
to
put
parameters
and
then
inside
the
implementation
we
have
inside
the
unit,
the
initialization
of
the
control.
B
We
created
the
template
context
for
the
template
engine
of
the
max
graph
toolkit
to
have
the
set
State,
get
State,
toggle,
State
and
invoke
event,
and
then
I
use
a
library
viewing
that
it's
the
browser
and
run
time.
Implant
implementation
for
television
CSS
just
to
generate
analyze
the
HTML
and
generate
the
style
based
on
the
class
name
present
inside
the
HTML
string
inside
the
update
View.
We
have
just
the
logic
to
take
a
plate
view.
B
It's
call
it
every
time
that
the
property
of
the
controller
changed
and
then
I
take
the
basically
the
HTML
template
and
I
passed
the
template
helper.
That
comes
from
the
Microsoft
graph
toolkit
to
render
on
a
specific
template
inside
on
a
specific
element
of,
of
course,
the
container
of
my
control
and
then
I
pass
the
data
context
that
come
from
the
Json
data
and
the
template
context,
and
at
the
end
we
have,
of
course,
a
get
output
that
return.
B
Okay,
I
think!
That's
all.
For
me,
this
is
the
reference
I
want
to
show
you
for
the
this.
This
control,
just
the
the
reference
for
the
HTML
text,
control
the
full
control
for
canvas
app,
how
to
create
components
by
using
the
powerapps
component
framework
and
how
to
customize
so
how
to
use
the
template
of
the
Microsoft
graph
toolkit
to
implement
the
template
for
this
control
and
just
an
introduction
of
the
TV
in
the
library
to
implement
the
tile
wind
CSS
inside
your
HTML
template.