Skip to main content

Notifications

Auto Width Label Generator

R3dKap Profile Picture Posted 01 Dec 2022 by R3dKap 1,594

Note (12-1-2022): this technique is a workaround solution to the absence of native auto-width labels in Power Apps. Now I recommend using the CreatorKit made by the Microsoft PowerCAT team which provides fluent UI controls among which an auto-width label (but much much more... resizable text areas, breadcrumbs, command bars, expand/context/navigation menus, progress bars & spinners, pickers, panels, dialogs, ...).

 

Note (6-30-2021): this technique cannot be used within Power Apps applications created within Teams.

Updated on 9-13-2020: in step 3 formula, the lblMyLabel has been replaced with the Self operator; simply copy the formula to your label's Width property and it'll work fine!


I am very happy today to provide the Power Apps Community with this Auto Width Label Generator component!

This component will allow you to make your application's label controls grow or shrink according to their content. And this auto-width feature will work whatever the Power Apps font you use and whatever the font-weight of your label.

And guess what: it works for buttons as well!

Before using this component though, make sure to read the recommandations and instructions below...

AutoWidthLabelGenerator.png

How does it work?

Well, in fact it's pretty simple... A Power Apps collection named colCharsWidth lists the exact width of each and every of the 255 Latin characters from the ASCII table. Then, a simple formula placed inside the Width property of a label will calculate its size, given the characters present in its Text property.

 

How can this help me build my applications?

Well, for instance, it will help you with the following:

  • Build multilingual applications
  • Nice breadcrumbs and tabs

Multilingual applications

Until today, making multi-language applications was a challenge as labels content could vary in size according to the language, thus making it hard, for instance, to have nice toolbars that would adjust themselves to their content.

Before, a toolbar would have fixed-sized labels just like this:

OldToolbars.gif

Some of you decided probably to maintain the size of each label within the list of translations for the various labels. But what a pain to maintain!

Now, using this little trick of mine, your toolbar will just look like a normal toolbar, whatever the language:

NewToolbars.gif

Breadcrumbs and tabs

Using this component, you will be able to have breadcrumbs where the nice little chevrons between each level will move over according to the content of each label at each level, assuming they are positionned using relative positionning of course.

Likewise, tabs will adjust their sizes whatever their content or language.

 

How do I use it?

Installation

  1. First, download the MSAPP file below.
  2. Then, create a brand new tablet canvas application called AutoWidthLabelGenerator (I will explain below why create a new application for performance reasons).
  3. Once inside the Power Apps Studio, import the component into the application
    1. On the Insert tab, open the Custom menu and select the Import component option
    2. A panel opens-up. Click on the Upload file link.
    3. Select the MSAPP file and click Open.
  4. Wait for the component to be imported (it might take a while).
  5. Once the import process is done, you will be on the Components tab of the Tree view. Click on the Screens tab.
  6. Insert the component on the screen by selecting the component from the Custom menu of the Insert tab.
  7. The component shows up on the screen and you see an INITIALIZE button in the middle of the screen. For a better experience, make sure that the component uses the maximum size of the screen.
  8. Run the app or press F5.
  9. Click on the INITIALIZE button. You should now see this:
    AutoWidthLabelGenerator.png
  10. Save this app for future use.

User's manual

From there on, the component is pretty self-explanatory, but I'll detail it here anyway:

  1. Select the fonts and font-weights you plan to use in the app where you want to have auto-width labels.
  2. In order to reduce the size of the colCharsWidth collection that defines the individual sizes for each character, you must then choose a set of characters to include in that collection:
    • If you want to know what characters will be included in a set of characters, just click the " i " icon.
    • If you want to make your own selection of characters to include in the colCharsWidth collection, choose the value Custom from the Char set combo box. You will then be able to include or exclude the character types you wish to have in the colCharsWidth collection.
  3. Select the code in the OnStart input box (DO NOT CHANGE IT) copy it to your clipboard and paste it inside the OnStart event of your own application
  4. Now copy the code in the Formula text input box of the component and paste it inside each of your application's labels Width properties.

And BOOOOM it's done! Your labels have now auto-width! 😃

Why create a new app dedicated to that component?

Because the component holds an internal collection of 224 characters * 13 fonts * 4 font-weights = 11,648 entries describing each character width, for each font and each font-weight. Why not 255 characters? Because the first 31 characters are special control chars which are not relevant for this case.

So, considering the size of that internal collection, wherever you put the component it might really slow down the application where it is hosted. So don't put that component on a screen of the application that you are actually building and where you will want to have auto-width labels. Create a dedicated application to use this component.

 

You'll also find the component (with my other components) here on Github: e-gallis/PowerApps.

 

Conclusion

I hope you'll enjoy this little trick that just changed my life on Power Apps! 😉

If some of you wonder how I got the sizes for each character, font and font-weight... Well I used the native behavior of Power Apps that shifts the content of a label to the next line when it reaches its width's right border. Setting that label to AutoHeight, I made an application that would detect when the label's height would change. And so, for each character here is what I did:

  1. Set the label's font and font weight to the current font and font-weight being processed
  2. Set the label's text to 20 copy of the same character
  3. Start with a very large width for the label
  4. Use a timer to reduce the width of the label until its last character shifts to the next line
  5. When that happens I add 1 to the widh of the label so that the character comes back up on the first line
  6. Then I divide the width of the label by 20 to have the size of a unique copy of the character
  7. I store in a collection the character associated with the font, font-weight and calculated size
  8. I then switch to the next character
  9. A GENERATE button then generates me the code that I included as my internal full collection of all char widths inside the component.

Here's a animation of the app running... (funny to watch isn't it? 😁😞

FontCharWidthBuilder.gif

You can download this FontCharsWidthBuilder app right below if you need to calculate the widths for other type of characters or fonts.

 

This component is also available on my Github Power Apps repo: https://github.com/e-gallis/PowerApps/tree/master/Components/AutoWidthLabelGenerator

 

Please don't forget to give a "thumbs up" to this post if you like it... 🙂

And do not hesitate to post your questions below...

Yours truly, @R3dKap 

Categories:

Comments

  • MiniMcFalls Profile Picture MiniMcFalls
    Posted 02 Jan 2024 at 15:54:21
    Auto Width Label Generator

    Hi Hisuh1,

     

    Not sure if you managed to find a workaround for this as your post was about 6 months ago now. Like you I found the "Result" portion to throw an error leading to a long line of frustration. The environment I work in does not allow me to upload and use the creator kit and so I needed to find a workaround to this error. Below you can see the adaptation I made to the code which now sets the labels with a calculated width as per the components initial results.

     

    Sum(AddColumns(ForAll(Split(Self.Text, ""), {Result: ThisRecord.Value}), "Size", LookUp(colCharsWidth, CharFont=Self.Font && CharWeight=Self.FontWeight && Char = Result).Size), Size) * Self.Size + Self.PaddingLeft + Self.PaddingRight
     
    This resolved the problem for me without needing any adjustments apart from the bold sections.

     

  • Hisuh1 Profile Picture Hisuh1
    Posted 26 Jul 2023 at 17:19:29
    Auto Width Label Generator

    Hello! In the Formula that we copy into the text label's width property, there's a value called "Result". My app is giving me an error because "Result" is not defined. Is this a variable we need to define somewhere in the app? Would someone be able to explain this to me?

  • R3dKap Profile Picture R3dKap 1,594
    Posted 30 Jan 2023 at 16:36:02
    Auto Width Label Generator

    Hi @stavrama ,

    Sorry for the delay. This issue is usually due to the fact that you use a font and/or a size for your label that you did not include in the generator. Meaning that the sizes for that font and/or that size can't be found inside the collection you put in your app's OnStart event.

    About your other question: AutoHeight is native on labels in Power Apps. Search for the AutoHeight property... 😉

    Tell me if you managed to fix this, otherwise post another message here. I'll try to catch it faster... 😅

  • mstavra Profile Picture mstavra 43
    Posted 18 Jan 2023 at 14:25:43
    Auto Width Label Generator

    Hey @R3dKap ,

     

    I created the app and add the code on start of the app and on width of a label: 

    My label though is minimized and nothing is shown.

     

    Before: 

    stavrama_0-1674051812542.png

    After:

    stavrama_1-1674051867093.png

     

    Am i the only one that made this mistake? 🙂

     

    Is it possible to create the same for autoheight? 🙂

     

    Thanks in advance for your help!

  • R3dKap Profile Picture R3dKap 1,594
    Posted 01 Dec 2022 at 12:17:25
    Auto Width Label Generator

    Thanks @Billy_C...

    By the way, I just updated my initial post to add a note saying that now I suggest people use the CreatorKit to have auto-width labels (and much more other nice fluent UI controls) in their canvas applications or model-driven custom pages... 😉

    Do you know it? Have you tried it?

  • Billy Profile Picture Billy 396
    Posted 30 Nov 2022 at 15:24:11
    Auto Width Label Generator

    Hi @R3dKap,

    Yes, any label you want to use the auto width on has to be inside a component, it's not possible to do this directly within the model driven custom page due to the lack of access to the used properties.
    Also, when you develop the component you want to set the default value of the table input variable to a minimal auto width formula, otherwise you won't be able to properly view the labels since it will have a width of 10px. This can be reduced to a single row safely as usual once development of the component is finished to minimize the size of the component, but this is of course completely optional.

  • R3dKap Profile Picture R3dKap 1,594
    Posted 30 Nov 2022 at 15:06:11
    Auto Width Label Generator

    Very interesting feedback @Billy_C...

    When you say the only way to make it work on a model-driven custom page is through a component, does it mean that any label on which you want auto-width with the formula provided by my component must be placed itself inside a component?

  • Billy Profile Picture Billy 396
    Posted 30 Nov 2022 at 10:58:17
    Auto Width Label Generator

    Hi @R3dKap,

    You have made a really great component, love it!

    I have built a Canvas App, but as a Custom Page for my Model Driven App.

    Thought I'd share this in case someone wants to build a custom page and use this.

     

    So I was able to discover that nor Self nor the control itself has access to Font, FontWeight, Size, PaddingLeft and PaddingRight.

    The only way you can get it to work is by using a component inside a Custom Page, as it does have access to those properties.
    I do have to say that it might appear to be buggy in the start, as it seems like the label has a width of 10px.
    In case that happens saving, publishing, refreshing the page and launching the model driven app and everything should look completely normal, same for when you go edit the custom page again.

     

    Hope this helps!

    PS: This might change soon since custom pages is quite the new feature so

  • IPC_ahaas Profile Picture IPC_ahaas 1,253
    Posted 18 Aug 2022 at 12:10:14
    Auto Width Label Generator

    @R3dKap That makes sense, thanks

  • R3dKap Profile Picture R3dKap 1,594
    Posted 18 Aug 2022 at 10:10:49
    Auto Width Label Generator

    Hi @IPC_ahaas,

    It's not an app, it's a component. You need to create a new Power Apps canvas app and import the component (the attached MSAPP file here on the original post) and then add it to a blank screen to use it to generate the code that you will put on your labels in your own apps... Am I clear enough?