05-29-2020 14:47 PM
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...
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:
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:
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:
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?
From there on, the component is pretty self-explanatory, but I'll detail it here anyway:
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.
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:
Here's a animation of the app running... (funny to watch isn't it? 😁😞
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
Really nice work! Congrats and thanks!
Glad you like it! 😊
Thank you for sharing it, it works like a charm (and it's easy to use) !
Now that the "Self" is here, I replaced "lblMyLabel " directly with "Self" and the formula works everywhere without any change.
You're right... Using the 'Self' operator makes the formula so much easier to copy/paste. Thanks for bringing this to my attention. I'll consider updating the component...
Hi! Is there any way to configure the component so it uses ";" as separator and not "," ? . Unluckily, the company where I work for has Power Apps configured in Spanish for all the employees. Therefore, when I paste the code, the app crushes.
Great job btw
The component automatically selects the right separator given the decimal separator of the language of your Power Apps Studio. Meaning that it will use the "," as a separator if your Power Apps Studio is in english (because the decimal separator is "."), and the ";" separator if your Power Apps Studio is in french or spanish (as the decimal separator is ",").
Documentation on this is available here: https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/global-apps.
Changing the language of your Power Apps Studio can be done by just modifying the language of your navigator:
I've just tested it in spanish and unfortunately it doesn't seem to follow this rule.
So your best option would be to turn your navigator in french and then generate the code using the component.
Hope this helps...
@R3dKap I changed the navegator's language and it worked perfeclty!! Thank you very much
Thank you @R3dKap for creating such a beautiful solution to overcome the limitation of PowerApps in terms of auto-width. We have been struggling to fix the width of the breadcrumb in our application and tried a lot of approaches, but nothing worked perfectly.
This is like a boon to us. Really appreciate you to have put so much of analysis on each of the fonts, chars, specials chars and then share it will the community for free 🙂
Thank you for sharing this...
Glad this component could help...