Power Apps Modern vs Classic Controls Reference
- Shane Young
- Apr 28
- 5 min read
Covering Text Inputs, Number Inputs, Text Labels, and Buttons
Modern Controls are all of the rage but as long-time builders we often find ourselves asking what is new and what is different. Below I have offered some overall thoughts and documented three of the most common controls in detail. Hopefully, this helps you quickly bridge the differences between the two.
And yes, Input Controls have a lot of notes. They are drastically different, whereas labels and buttons are mostly visually different.
If you want a more hands on look at these differences then be sure to check out my Youtube video Modern vs Classic Controls in Power Apps - Buttons, Text Inputs, and Text Labels
Finally, if you are having a hard time with the different properties for these controls, you can download this guide with all of the properties mapped out using the fancy link below. It includes each Property name and description, what control it is applicable for, and if it was renamed from Classic to Modern what the new or old name was. Lots of little details to make your life easier. Example for the Inputs:
Download the guide⬇️
General Notes of Differences for Modern and Classic Controls in Power Apps
Below is a breakdown of just things to know going into using Modern Controls with Power Apps. Hopefully these little notes help you pull out your hair a bit less when you trip over things like OnSelect being gone for most controls.
Styling: Modern Controls follow Fluent UI guidelines for styling, offering consistent themes and polished looks. At the expense of not being able to manually set a lot of the visual properties yourself. For example, properties like DisabledFill, HoverColor, and PressedBorderColor that were available in Classic Controls are currently not present in Modern Controls. This means you'll lose some of the fine-grained control over the appearance of your app in different interaction states.
For example: I often would set the visual properties of disabled mode in a control to very specific colors to achieve a desired effect for one control in classic controls, this level of customization is no longer available.
Font Sizing: Modern uses pixels while Classic uses points, often leading to inconsistent font sizes across controls. So basically, when you start adding Modern Controls be prepared for everything to be smaller, you will need to rethink what are your default font sizes and such.
Themes: The Modern Controls use the new theme engine. It is kind of configurable but will add to your confusion in the short term. To view/configure what you can with themes look on the Left Rail and click … to find Themes. Then to manipulate per control click on the control and at the bottom of the Properties panel on the right you will see similar to below.
Accessibility: Classic Controls include more traditional accessibility features such as Live and Role, while Modern Controls are progressively incorporating these features. One of the goals of Modern Controls is to be more accessible.
OnSelect isn't as common: With Classic Controls just about every control had an OnSelect property, making them all "clickable". That is not the case with Modern Controls, if you want something to be clickable you are most likely going to need to use a Button, Icon, or Image control.
Reset property is gone: If you got used to using a variable to trigger mass resets, sorry that isn't possible. Back to Reset(ControlName) being the only option.
Avoid mixing and matching: Modern Controls and Classic Controls are so different, especially visually, it is basically impossible to combine them in the same app and have it look nice. So, commit to one or the other.
Text and Number Input Control Differences
Quick note. This one is a bit odd because the Classic Text Input has been replaced by two controls. Text Input and Number Input are separate controls that are similar but have nuance difference. Most of which is covered below.
Trigger Behavior: Classic uses DelayOutput; Modern replaces this with TriggerOutput offering options like FocusOut, Delayed, and Keypress. While this is a nice change, you will need to think about how your OnChange is triggered, each of those 3 options have their own quirks to meet specific scenarios and none exactly line up with how it worked in Classic Controls.
Clear Button and Spell Check: Classic included a built-in clear button and the ability to enable Spell Check.
Disabled vs. Enabled: With Classic Controls a Text Input in view mode looked exactly like a label, which made it easy to reuse the control for display-only purposes. Now a view mode Text Input looks exactly like an edit mode Text Input, which isn’t ideal and is confusing to users. You can't easily reuse the same control for editable and read-only scenarios without causing confusion. Which would change how I designed the look of a lot of apps over the year.
Number Input is Separate: In Classic, you often used a Text Input with formatting rules to handle numbers. In Modern, there's a dedicated Number Input control with its own properties like Min, Max, Step, and Precision. This makes numeric input more flexible, but also means managing a new set of behaviors and edge cases.
Number Input: The control now has an up and down increment arrow you can use to adjust the value in the control. It is kind of hard to see. If you want to get rid of it set the Step property to 0. Not very obvious.
Value vs. Text: Number Input uses a Value output property instead of Text. This can be helpful for calculations but may require some refactoring if you're used to string-based logic.
This means to get the number out of a Modern Number Input Control you would use NumberInput1.Value where as with a Text Input you would use TextInput1.Text.
Overall: Lots of change with Inputs plus the fact that number inputs are the same but different will probably cause you a bit of confusion for a while. But don’t worry, once it clicks, it will all make sense.
Text Label Control Differences
OnSelect: Worth repeating, it is gone, as that one really frustrated me. If you want to simulate an interactive label, one workaround is to overlay a transparent button on top of the label and use its OnSelect instead.
Visual Everything: The alignment, the size, the padding, everything is different. It is fine, just be ready to reconsider the look and feel as you add these new labels. If you are new to Power Apps then not a big deal, you will never know the difference.
Below they are both using default size and both are against the top of the screen. Font size and vertical align are easy to see differences, but there are plenty more.
Overall: Functionally is very much the same, just visually different.
Button Control Differences
Icons: Modern Controls allow inline icons with Icon, IconRotation, IconStyle, and Layout; Classic does not.
Hover and Pressed States: Classic includes HoverFill, PressedFill, DisabledFill, and more; these are currently missing in Modern.
Overall: Good news, a button is basically still a button, just with different sizing and style.
コメント