Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Pages
    • Take a guided tour
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find partner offers
    • Partner GTM Resources
    • Blog
    • Customer stories
    • Developer Plan
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • App development topics
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ·
    • Sign in
    • ·
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Connector Development
    • Power Query
    • GCC, GCCH, DoD - Federal App Makers (FAM)
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Galleries
    • Community Connections & How-To Videos
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Emergency Response Gallery
    • Events
    • 2021 MSBizAppsSummit Gallery
    • 2020 MSBizAppsSummit Gallery
    • 2019 MSBizAppsSummit Gallery
    • Community Engagement
    • Community Calls Conversations
    • Experimental
    • Error Handling
    • Power Apps Experimental Features
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Canvas Apps Components Samples
    • Re: Auto Width Label Generator

    Re: Auto Width Label Generator

    03-09-2022 03:12 AM

    CR7
    Advocate II
    622 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    R3dKap
    R3dKap Community Champion
    Community Champion
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    Auto Width Label Generator

    ‎04-21-2020 02:48 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...

    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 

    AutoWidthLabelGenerator.msapp
    FontCharWidthBuilder.zip
    Labels:
    • Labels:
    • Components
    Message 1 of 43
    18,414 Views
    43 Kudos
    Reply
    • All forum topics
    • Previous Topic
    • Next Topic
    • « Previous
      • 1
      • 2
      • 3
      • 4
      • 5
    • Next »
    R3dKap
    R3dKap Community Champion
    Community Champion
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎04-08-2021 06:08 AM

    Hi @schuess3,

    No you cannot put a component inside another component. Why would you need to do that?

    Message 21 of 43
    1,190 Views
    0 Kudos
    Reply
    schuess3
    schuess3 Kudo Kingpin
    Kudo Kingpin
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎04-08-2021 10:44 AM

    Guess i should have learned how it worked first .

    Message 22 of 43
    1,194 Views
    0 Kudos
    Reply
    Althoff-Burrows
    Althoff-Burrows
    New Member
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎06-28-2021 08:10 AM

    This is great. I can get it to work in Powerapps Classic, but having trouble implementing it in Powerapps for Teams as Teams doesn't seem to have all of the Control Properties cited in the solution. Do you know of/has anyone found a workaround for this?

    Thanks!

    Message 23 of 43
    949 Views
    0 Kudos
    Reply
    R3dKap
    R3dKap Community Champion
    Community Champion
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎06-30-2021 03:11 AM

    Hi @Althoff-Burrows,

    I'm afraid that since in Teams Power Apps applications you cannot access some of the controls properties (like the Font or FontWeight properties of a label), the solution I propose here cannot be used within Teams applications.

    Message 24 of 43
    897 Views
    0 Kudos
    Reply
    90_percent
    90_percent Helper I
    Helper I
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎12-20-2021 10:17 AM

    First and foremost, Great Job! Great component! You have saved me alot of time trying to figure somethings out, as well as gave me ideas along the way!
    Now for the NooB question. 
    I have 3 labels all in a row. each one is dynamic based on the first label.

    Label1 - label2 - label3
    what I am wanting it todo is collapse to the left, with the width of each one. so there is only the padding between the labels?

    Here is snippet of what I mean......Label2 needs to follow the width of Label1?

    90_percent_0-1640024158100.png

     

    Any help would be appreciated!

    -Guy (90_percent)

    • dynamic width
    • Width
    Message 25 of 43
    734 Views
    0 Kudos
    Reply
    R3dKap
    R3dKap Community Champion
    Community Champion
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎12-21-2021 03:49 AM

    Hi @90_percent,

    Thanks! 😊

    Well if you have 3 labels that should stick together whatever their content, you can do it this way:

    Label1.X = 100 (or whatever is the position of your first label)
    Label1.Width = <the formula provided by the AutoWidth component>
    Label2.X = Label1.X + Label1.Width
    Label2.Width = <the formula provided by the AutoWidth component>
    Label3.X = Label2.X + Label2.Width
    Label3.Width = <the formula provided by the AutoWidth component>

    I hope this is what you were trying to acheive... 🙂

    Message 26 of 43
    728 Views
    0 Kudos
    Reply
    90_percent
    90_percent Helper I
    Helper I
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎12-21-2021 09:53 PM

    or your quick answer! and it works perfectly, i didn't think of using the x and y widths.... once again this is an awesome collection!!

    Message 27 of 43
    721 Views
    0 Kudos
    Reply
    pete_garvey89
    pete_garvey89 Advocate IV
    Advocate IV
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎01-21-2022 05:54 PM

    This is great, thank you!

    Message 28 of 43
    698 Views
    0 Kudos
    Reply
    R3dKap
    R3dKap Community Champion
    Community Champion
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎01-26-2022 11:49 AM

    Glad you like it @pete_garvey89 😉

    Message 29 of 43
    664 Views
    0 Kudos
    Reply
    CR7
    CR7 Advocate II
    Advocate II
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎03-09-2022 03:12 AM

    Hi @R3dKap , first of all thanks for a great looking component! I have imported your component within an App, then in a separate app I have copied the code for OnStart and then applied the step 3 formula to the width, however it is stuck at size 10 and not dynamic, wondering if I have missed a step? Any help appreciated 🙂 

     

    Message 30 of 43
    622 Views
    0 Kudos
    Reply
    • « Previous
      • 1
      • 2
      • 3
      • 4
      • 5
    • Next »

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Pages
    • Power Automate
    • Power Virtual Agents

    Browse

    • Sample apps
    • Services

    Downloads

    • Windows
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2023 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks
    California Consumer Privacy Act (CCPA) Opt-Out Icon Your California Privacy Choices