►
Description
Learn how to Power-Up canvas apps UI with the label auto width generator component in this demo by Emmanuel Gallis.
For more information, visit https//aka.ms/powerapps.microsoft.com
A
A
A
A
A
If
I
change
the
the
label
here,
you
see
that
if
it's
too
long
for
the
the
width
of
the
label,
then
you
have
these
ellipses
shown
showing
up,
and
you
don't
see
your
the
label
in
its
full
length.
You
see
what
I
mean,
so
this
is
one
one
case,
for
instance,
in
tabs
you
can
encounter
the
same
problem
in
menus
if
you
make
a
multi-language
application,
where
often
well,
according
to
the
language,
lengths
of
a
translation
varies
a
lot
between
french
english,
german,
etc.
A
This
can
be
a
really
tricky
and
usually
what
you
do
you?
You
define
width
that
is
sufficient
to
hold
any
translation
for
for
the
text
you're
trying
to
to
display,
but
it's
not
very
handy
because
then
you
have
white
spaces
between
your
types
or
your
labels
when
the
the
translations
are
short,
etc.
So
it's
not
very,
very
nice
to
see
you
can
have
the
need
of
it
also
eventually
on
buttons,
if
you
want
your
button
to
resize
depending
of
its
label
etc.
A
A
What
I
did
is
that
I'm
going
to
show
you
here
on
the
screen.
I
just
put
a
simple
label
here.
I
put
some
text
in
it
and
I've
set
it
auto
hide
property.
I
activated
it's
what
to
write
property,
which
means
that
whenever
I
will
add
some
text,
the
text
will
wrap
down
to
the
next
line
and,
of
course,
since
I
have
activated
auto
height,
the
height
of
the
label
will
change
and
just
to
to
show
you
this.
I
I've
put
another
label
here
where
I
display
the
height
of
this
label.
A
A
A
So
I
thought
this
is
very
interesting,
because
this
means
that
if
I
know
that
I
have
20
a
characters
here
and
I
reduce
the
size
and
when
it
changes
height,
then
I
know
that
this
exact
width
is
the
correct
width
for
20
a
characters
in
this
font
and
for
this
size.
So
if
I
divide
this,
the
width
of
my
label
here,
which
have
20
a
characters
by
20-
I
divide
it
by
20,
then
I
know
the
size
of
one
a
character.
A
I
hope
everybody
is
following
what
I'm
trying
to
explain?
Okay,
and
so
the
idea
then
was
to
determine
and
calculate
for
each
character
in
the
ascii
table.
What
unitary
size
is
for
for
each
character.
So
I
I
wanted
to
build
like
a
collection
where
I
wouldn't
have
for
the
a
character
when
it's
this
font
and
this
size.
This
is
the
exact
size
with
the
six
decimals.
You
know
the
exact
size
of
one
character
and
then
I
would
use
this
to
calculate
the
width
of
the
label.
Whatever
is
inside
the
label?
A
Okay,
so
that's
the
main
id.
But
of
course,
I
I
tried
to
find
on
the
internet
some
resources
giving
me
this
these
values,
giving
me
the
sizes
of
each
font,
each
each
font
size
the
size
of
a
unitary
character,
but
I
didn't
find
it
so
I
decided
to
build
it
myself
using
powerapps
and
I'll.
Show
you
how
I
did
this
so
I
created
an
application
here,
which
I
called
the
phone
char
width
builder.
A
So
I
built
this
application,
in
which
I
did
exactly
what
I
just
explained.
I
have
a
label
here
where
I
put
20
times
the
same
character:
okay
and
I
start
with
the
first
character.
I
start
with
the
the
space
character,
the
number
32
in
the
ascii
table
and
then
I
go
to
the
next
character:
character,
33
in
ascii
table
and
then
34,
35,
36,
etc.
A
Every
time
I
set
this
character
to
this
label,
and
then
I
have
a
timer
which
will
reduce
the
size
of
the
label
here
and
once
I
detect
that
the
height
changes,
I
know
that
the
exact
size
of
the
of
the
label
for
20
characters,
and
then
I
divide
it
and
calculate
the
the
width
of
one
unitary
character.
Okay,
so
I'll
show
you
how
it
how
it
works
very
quickly,
my
pc
is
pretty
slow,
and
so
it
doesn't
detect
the
height
change.
A
A
So,
in
fact,
in
the
application,
in
this
builder
charwitz
builder,
you
select
the
fonts
for
which
you
want
to
calculate
the
the
size
of
each
character
and,
and
then
you
click
start,
and
then
it
will
go
through
all
characters
in
the
ascii
table.
For
each
of
these
characters
it
will,
through
a
timer,
reduce
the
size
of
the
label
until
it
sees
the
height
variation
and
then
calculate
divide
these
widths
by
20
to
identify
the
width
of
one
one,
instant
of
the
the
character
and
then
every
time
it
changes
of
character.
A
A
So
if
I
select,
as
you
can
see
it
on
the
screen,
the
arial
font
and
the
later
font
for
the
normal
widths,
normal
font,
weight,
gold,
font,
weight,
etc,
I
will
build
a
huge
collection
containing
for
each
font,
each
font,
weight
and
each
character,
its
exact
size,
and
once
I
have
calculated
the
sizes
for
the
fonts
and
the
size,
I
I
click
on
the
generate
button,
which
will
create
a
perhaps
formula
that
defines
this
huge
collection
as
a
code.
You
can
implement
inside
your
application.
A
A
So
I
made
a
component
here
which
is
called
the
auto
width
label:
generator.
Okay,
when
you
will
import
it
in
your
application.
You
will
see
exactly
this,
so
you
have
to
initialize
the
component
so
that
loads
up
the
the
whole
huge
collection,
okay
and
once
it
has
been
initialized,
you
will
see
this
screen.
So
here
you
will
be
able
to
select
a
font.
Let's
say
I
want
latto
and
I
want
the
normal
font
weight.
A
That's
it.
You
can
select
many
font
weights.
If
you
want,
I
just
take
I'll
just
stick
normal
and
then
you
will
select
a
char
set.
Charset
is
a
it's
a
set
of
characters
that
you
will,
for
which
you
would
like
to
store
in
your
application
in
a
huge
collection,
the
list
of
individual
sizes
for
the
characters
so
I'll
I'll,
just
take
tiny,
and
then
it
will
generate
here,
as
you
can
see,
a
call
to
a
set
formula
function
which
will
define
a
a
collection,
a
table
in
fact
called
charge
widths.
A
A
You
go
to
the
app
onstart
event
here.
You
paste
it
here,
since
we
are
inside
the
editor.
I'll
just
run
the
onstart
event
directly
from
here.
So
now
we
have
in
memory
a
collection
of
all
sizes
for
the
characters.
From
a
to
z,
to
z
for
the
latto
font
and
normal
font
weight,
okay,
and
then
I
will
go
back
to
the
component
here.
The
auto
width
label
generator.
A
A
And
so
what
happens
here?
Is
it's
not
working?
Why?
Because
the
collection,
I
just
added
to
my
onstart
event
in
the
for
the
app
stored,
all
the
sizes
for
the
latto,
normal
font
and
font
weight,
and
here
I
am
in
open
song.
So
it's
not
it's
not
working
okay.
So
I
have
to
make
sure
that
I
select
the
correct
font.
A
Okay
and
the
the
interesting
thing
is
that
it
takes
into
account
the
fact
that
you
might
want
to
put
some
left
and
right
padding
to
your
label.
So
if
I
add
some
padding
here
and
I
put
25
pixels
for
left
padding
as
you
can
see,
the
formula
that
calculates
the
new
widths
takes
into
account
is
a
left
and
right,
padding.
Okay,
so
so,
using
this
trick
and
using
this
component
here,
you
will
be
able
to
adjust
the
widths
of
any
label
in
your
application
in
whatever
font
and
font
weight.
A
You
want,
of
course,
the
the
formula
that
calculates
the
weights
also
takes
into
account
the
font
size.
So
here
we
I
have
a
font
size
of
13..
So
if
I
put
18
now
the
font
just
resizes
bring
to
the
font
size,
okay.
So
this
is
really
interesting,
because
now
you
can
build
screens
where
your
labels
and
your
tap
labels,
so
I
didn't
implement
it
here,
but
I
could
in
fact
I
can
just
take
the
same
formula
I
put
on
my
label
here
for
the
width.
A
B
This
is
great
lots
of
lots
of
cool
feedback
in
there
originally,
when
you
said
it
was
a
component,
I
was
thinking
you're
going
to
have
to
add
it
to
the
app
as
a
component,
but
it's
not
really
a
component.
Is
it
it's?
It's
just
a
formula
you
built
with
an
extremely
impressive
app
to
crank
that
on
start
code
out
in
your
formula,
but
that's
great
so
that
you
can
use
this
in
any
power
app
over
and
over.
You
don't
need
to
get
permission
to
deploy
a
component
or
anything.
A
Exactly
the
only
aim,
the
only
goal
is
to
get
this
formula
which
will
initialize
the
the
like
a
collection
of
all
sizes
for
the
font
and
font
weight.
You
choose
and
then
copy
paste
this
formula
in
your
with
property
of
your
labels-
and
I
just
posted
this
weekend-
a
new
version
of
this
component
using
the
self
operator
in
the
formula
so
that
you
don't
have
to
change
the
label
of
your
the
name
of
your
label.
A
You
see
so
this
yeah,
so
the
formula
works
directly
as
soon
as
you
paste
it
on
the
width
property
of
your
label.
The
only
thing
you
have
to
understand-
and
this
is
very
important-
is
that,
of
course,
you
see
that
the
size
of
this
collection
here
can
be
pretty
huge
if
you
decide
to
generate
this
collection
for
many
different
fonts
and
many
font
weights,
and
you
decide
to
take
the
full
255
characters
in
the
chart
set
yeah.
Of
course,
as
you
can
see
now,
it's
my
pc
just
hanged
up.
A
A
Really
is
to
select
the
the
font
family
and
the
font
weight
and
the
char
set
really
to
have
the
minimum
you
need
for
what
you
want
to
do.
For
instance,
that's
what
I
use
now
for
creating
breadcrumbs,
because
breadcrumbs
often
you
have
11
1
and
then
you
have
this
chevron
icon.
You
know,
and
then
you
have
level
2
so
that,
depending
on
the
label
of
the
level,
one
and
level
two
in
your
breadcrumb,
the
the
chevron
would
follow
from
left
to
right
according
to
the
widths
etc.
So.
B
A
Make
sure
you
just
select
the
correct
charset
if
you
want
to
have
some
information
about?
What's
in
a
char
set,
I've
made
a
little
a
little
table
here,
showing
you
that
for
the
tiny
char
set
you
will
have
the
space
character
and
then
only
characters
from
0
to
9
and
a
to
z
in
uppercase
and
lowercase
for
the
the
minimum
one
you
will
get
also
some
other
special
characters,
etc,
etc.
Okay,.
B
A
Yeah
I
decided
to
make
a
component
because
then
you
can
just
import
it
into
whatever
application,
but
I
really
recommend-
and
that's
what
I
put
on
the
the
forum-
it's
better.
If
you
put
this
component
in
a
separate
application,
because
the
component
itself
holds
the
huge
mega
collection
with
all
sizes
for
all
fonts
and
font
weights,
so
put
it
in
a
separate
application.
Use
it
to
generate
the
formulas
and
just
use
the
formulas
in
your
application.
C
A
A
That,
yes,
general
release
exactly
that's
correct
generally,
in
a
wrap
application,
you
use
one
font,
maybe
two,
but
usually
one
font,
probably
one
or
two
font
weights,
and
that
should
be
enough
for
the
application,
so
the
collection
will
be
not
too
too
big.
The
only
problem
of
performance
is
if
the
collection
is
too
big
there,
but
using
the
formula
in
many
screens
will
not
slow
down
your
application.