Migrate from Classic Controls to Modern Controls in Power Apps

Have you considered moving you Canvas Apps from Classic Controls to Modern Controls? Unfortunately it isn’t as easy as just replacing each control. In this post I’ll help you find the matching controls and their properties.

Modern Controls than can replace Classic Controls

There are only some of the existing controls that that have been made available within the Modern Controls. So before you start migrating you might want to have a look at some of the Classic Controls in your app and make sure that there is a modern equivalent. Sometimes you might be able to make the Classic Control look similar to the Modern Controls.

The following Controls overview will give you a starting point for migrating your apps.

Classic Control	Modern Control
Text Label	Text
Button	Button
Edit Form, View Form, Display Form	Form
DatePicker	Date Picker
Toggle	Toggle
Check box	Check box
Radio	Radio
Drop down	Dropdown
Combo Box	Combobox
Text Input	Text Input
Text Input (for numbers)	Number Input

Text Label vs Text

The following properties within the Text Label and Text match up.

Some of the things that the Text control offers is the Border Radius, both as a single setting or seperate settings for each corner

Text Label	Text	Comment
Align	Align	The Classic Controls use Align.Left, Align.Right, Align.Center and Align.Justify. The Modern Controls use “Start”, “End”, “Center”, “Justify”
AutoHeight	AutoHeight
BorderColor	BorderColor
	BorderRadius	Newly introduced property
	BorderRadiusBottomLeft	Newly introduced property
	BorderRadiusBottomRight	Newly introduced property
	BorderRadiusTopLeft	Newly introduced property
	BorderRadiusTopRight	Newly introduced property
BorderStyle	BorderStyle
BorderThickness	BorderThickness
Color	FontColor	Other than the property name change there is no difference
ContentLanguage	ContentLanguage
DisabledBorderColor		Property Removed
DisabledColor		Property Removed
DisabledFill		Property Removed
DisplayMode	DisplayMode
Fill	Fill
FocussedBorderColor		Property Removed
FocussedBorderThickness		Property Removed
Font	Font
FontWeight	Weight	All other Font related property received the Font prefix, however Weight has lost the Font Prefix. Also the values are now texts, “Medium”, “Regular”, “Semibold” and “Bold” rather than FontWeight.Normal, FontWeight.Lighter, FontWeight.Bold and FontWeight.SemiBold
Height	Height
HoverBorderColor		Property Removed
HoverColor		Property Removed
HoverFill		Property Removed
Italic	FontItalic
LineHeight
Live		Property Removed
OnSelect		Property Removed
Overflow		Property Removed
PaddingBottom	PaddingBottom
PaddingLeft	PaddingLeft
PaddingRight	PaddingRight
PaddingTop	PaddingTop
PressedBorderColor		Property Removed
PressedColor		Property Removed
PressedFill		Property Removed
Role		Property Removed
Size	Size
Striketrough	FontStrikethrough
TabIndex		Property Removed
Text	Text
Tooltip		Property Removed
Underline	FontUnderLine
VerticalAlign	VerticalAlign
Visible	Visible
Width	Width
Wrap	Wrap
X	X
Y	Y

Modern Button vs Classic Button

Classic Button	Modern Button	Comment
	AcceptsFocus
	AccessibleLabel
Align	Align	The Classic Controls use Align.Left, Align.Right, Align.Center and Align.Justify. The Modern Controls use “Start”, “End”, “Center”, “Justify”
	Appearance	Choose between “Primary” and “Secondary”
	BasePaletteColor
AutoDisableOnSelect		Option has been removed
BorderColor	BorderColor
	BorderRadius	Newly introduced property
BorderStyle	BorderStyle
BorderThickness	BorderThickness
Color	FontColor	Other than the property name change there is no difference
ContentLanguage	ContentLanguage
DisabledBorderColor		Property Removed
DisabledColor		Property Removed
DisabledFill		Property Removed
DisplayMode	DisplayMode
Fill
FocussedBorderColor		Property Removed
FocussedBorderThickness		Property Removed
Font	Font
FontWeight	FontWeight	Also the values are now texts, “Medium”, “Regular”, “Semibold” and “Bold” rather than FontWeight.Normal, FontWeight.Lighter, FontWeight.Bold and FontWeight.SemiBold
Height	Height
HoverBorderColor		Property Removed
HoverColor		Property Removed
HoverFill		Property Removed
	Icon
Italic	FontItalic
OnSelect		Property Removed
PaddingBottom	PaddingBottom
PaddingLeft	PaddingLeft
PaddingRight	PaddingRight
PaddingTop	PaddingTop
PressedBorderColor		Property Removed
PressedColor		Property Removed
PressedFill		Property Removed
RadiusBottomLeft	BorderRadiusBottomLeft
RadiusBottomRight	BorderRadiusBottomRight
RadiusTopLeft	BorderRadiusTopLeft
RadiusTopRight	BorderRadiusTopRight
Size	FontSize	This property has been renamed. The default value of 0 means that the default size of 14 is used
Striketrough	FontStrikethrough
TabIndex		Property Removed
Text	Text
Tooltip		Property Removed
Underline	FontUnderLine
VerticalAlign	VerticalAlign
Visible	Visible
Width	Width
Wrap	Wrap
X	X
Y	Y

Edit Form and View Form vs Form

In this section I will look at the various Forms that have been consolidated into just a single Form control. The Modern Form control with the various field controls inside looks a lot better.

When we look at the Form controls we will find that all properties match between Classic and Modern controls.

Classic Edit Form	Modern Form	Comments
AcceptsFocus	AcceptsFocus
BorderColor	BorderColor
BorderStyle	BorderStyle
BorderThickness	BorderThickness
ContentLanguage	ContentLanguage
DataSource	DataSource
DefaultMode	DefaultMode
Fill	Fill
FocusedBorderColor	FocusedBorderColor
FocusedBorderThickness	FocusedBorderThickness
Height	Height
Item	Item
OnFailure	OnFailure
OnReset	OnReset
OnSuccess	OnSuccess
Visible	Visible
Width	Width
X	X
Y	Y

Modern Datepicker vs Classic DatePicker

The Datepicker is probably the biggest reason why developers move towards modern controls.

The Modern date picker shown above looks indeed a lot better than the classic date picker. Additionally there is no need to press the ok button anymore. This date picker was so poor that I implemented a better version of the datepicker before the modern control cam around.

The differences between the Modern and Classic Date picker are:

Classic Datepicker	Modern Datapicker	Comment
AccessibleLabel	AccessibleLabel
	Appearance	Set this to “FilledDarker”,
	BasePaletteColor
BorderColor	BorderColor
	BorderRadius
BorderStyle	BorderStyle
BorderThickness	BorderThickness
Color	FontColor	Other than the property name change there is no difference
ContentLanguage	ContentLanguage
DateTimeZone	DateTimeZone
DefaultDate
DisabledBorderColor		Property Removed
DisabledColor		Property Removed
DisabledFill		Property Removed
DisplayMode	DisplayMode
EndYear	EndDate	End Year and are not completely the same but close enough.
Fill	Fill
FocussedBorderColor		Property Removed
FocussedBorderThickness		Property Removed
Font	Font
FontWeight	FontWeight	Also the values are now texts, “Medium”, “Regular”, “Semibold” and “Bold” rather than FontWeight.Normal, FontWeight.Lighter, FontWeight.Bold and FontWeight.SemiBold
Format	Format	The classic control uses DateTimeFormat.ShortDate, DateTimeFormat.LongDate etc whereas the modern control uses “Short”, “LongAbbreviated” and “YearMonth”
Height	Height
IconBackground		Property Removed
IconFill		Property Removed
InputTextPlaceHolder	PlaceHolder
IsEditable	IsEditable
Italic	FontItalic
Language	Icon
OnChange	OnChange
OnSelect		Property Removed
PaddingBottom	PaddingBottom
PaddingLeft	PaddingLeft
PaddingRight	PaddingRight
PaddingTop	PaddingTop
	SelectedDate
Reset		Property Removed
Size	FontSize	This property has been renamed. The default value of 0 means that the default size of 14 is used
StartOfWeek	StartOfWeek
	FontStrikethrough	I’m not sure why you would want to use this but it is available in the modern controls only
	FontUnderline	See FontStrikethrough
StartYear	StartDate	StartYear and StartDate are not completely the same but can be used in a similar way
TabIndex		Property Removed
Tooltip		Property Removed
	ValidationState
Visible	Visible
Width	Width
X	X
Y	Y

Modern Radio vs Classic Radio

Like with most of the other controls, Microsoft have made the modern controls all look a bit better. That includes the radio buttons

When we compare the two version of the radio button we will find these changes that have come through. There have been a lot of properties removed.

Text Label	Text	Comment
AccessibleLabel	AccessibleLabel
	BasePaletteColor
BorderColor		Property Removed
BorderStyle		Property Removed
BorderThickness		Property Removed
Color	FontColor	Other than the property name change there is no difference
ContentLanguage	ContentLanguage
Default	DefaultSelectedItems
DisabledBorderColor		Property Removed
DisabledColor		Property Removed
DisabledFill		Property Removed
DisplayMode	DisplayMode
Fill		Property Removed
FocussedBorderColor		Property Removed
FocussedBorderThickness		Property Removed
Font	Font
FontWeight	FontWeight	All other Font related property received the Font prefix, however Weight has lost the Font Prefix. Also the values are now texts, “Medium”, “Regular”, “Semibold” and “Bold” rather than FontWeight.Normal, FontWeight.Lighter, FontWeight.Bold and FontWeight.SemiBold
Height	Height
HoverColor		Property Removed
HoverFill		Property Removed
Italic	FontItalic
Items	Items
Layout	Layout
LineHeight		Property Removed
OnChange	OnChange
OnSelect		Property Removed
PaddingBottom		Property Removed
PaddingLeft		Property Removed
PaddingRight		Property Removed
PaddingTop		Property Removed
PressedColor		Property Removed
PressedFill		Property Removed
RadioBackgroundFill		Property Removed
RadioBorderColor		Property Removed
RadioSelectionFill		Property Removed
RadioSize	RadioSize
Reset		Property Removed
	Required
Size		Property Removed
Striketrough	FontStrikethrough
TabIndex		Property Removed
Tooltip		Property Removed
Underline	FontUnderLine
Visible	Visible
Width	Width
X	X
Y	Y

Modern Check box vs Classic Check Box

Text Label	Text	Comment
	AccessibleLabel
	BasePaletteColor
BorderColor		Property Removed
BorderStyle		Property Removed
BorderThickness		Property Removed
CheckboxBackgroundFill
CheckboxBorderColor
CheckboxSize	CheckboxSize
	Checked
CheckMarkFill
Color	FontColor	Other than the property name change there is no difference
ContentLanguage	ContentLanguage
Default	DefaultSelectedItems
DisabledBorderColor		Property Removed
DisabledColor		Property Removed
DisabledFill		Property Removed
DisplayMode	DisplayMode
Fill		Property Removed
FocussedBorderColor		Property Removed
FocussedBorderThickness		Property Removed
Font	Font
FontWeight	FontWeight	All other Font related property received the Font prefix, however Weight has lost the Font Prefix. Also the values are now texts, “Medium”, “Regular”, “Semibold” and “Bold” rather than FontWeight.Normal, FontWeight.Lighter, FontWeight.Bold and FontWeight.SemiBold
Height	Height
HoverBorderColor
HoverColor		Property Removed
HoverFill		Property Removed
Italic	FontItalic
OnCheck	OnCheck
OnUncheck	OnUncheck
	OnSelect
PaddingBottom		Property Removed
PaddingLeft		Property Removed
PaddingRight		Property Removed
PaddingTop		Property Removed
PressedBorderColor
PressedColor		Property Removed
PressedFill		Property Removed
Reset		Property Removed
Size	CheckboxSize, FontSize	The modern control gives you control over both the check box and the font size.
Striketrough	FontStrikethrough
TabIndex		Property Removed
Text	Label
Tooltip		Property Removed
Underline	FontUnderLine
VerticalAlign
Visible	Visible
Width	Width
X	X
Y	Y

Modern Toggle vs Classic Toggle

For the Toggle the biggest change is that you can’t control the look and feel of the toggle depending on the True or False value of the control using the 6 True/False properties, e.g. FalseFill.

Text Label	Text	Comment
AccessibleLabel	AccessibleLabel
	BasePaletteColor
BorderColor
BorderStyle
BorderThickness
Color	FontColor	Other than the property name change there is no difference
ContentLanguage	ContentLanguage
Default	DefaultSelectedItems
DisabledBorderColor		Property Removed
DisabledColor		Property Removed
DisplayMode	DisplayMode
FalseFill		Property Removed
FalseHoverFill
FalseText
FocussedBorderColor		Property Removed
FocussedBorderThickness		Property Removed
Font	Font
FontWeight	FontWeight	All other Font related property received the Font prefix, however Weight has lost the Font Prefix. Also the values are now texts, “Medium”, “Regular”, “Semibold” and “Bold” rather than FontWeight.Normal, FontWeight.Lighter, FontWeight.Bold and FontWeight.SemiBold
HandleFill
Height	Height
HoverBorderColor		Property Removed
Italic	FontItalic
LabelPaddingLeft		Property Removed
LabelPaddingRight		Property Removed
OnChange		The removal of this property is a shame as sometimes you would want to run code and it doesn’t matter what the current value is.
OnCheck	OnCheck
OnSelect	OnSelect
OnUncheck	OnUncheck	Property Removed
PressedBorderColor		Property Removed
Reset		Property Removed
ShowLabel		Property Removed
Size	ToggleSize, FontSize	The modern control gives you control over both the toggle and the font size.
Striketrough	FontStrikethrough
TabIndex		Property Removed
TextPosition	LabelPosition
Tooltip		Property Removed
TrueFill		Property Removed
TrueHoverFill		Property Removed
TrueText		Property Removed
Underline	FontUnderLine
Visible	Visible
Width	Width
X	X
Y	Y

Modern Dropdown vs Classic Drop down

For the Modern Dropdown there are again quite a few changes in the control

Text Label	Text	Comment
AccessibleLabel	AccessibleLabel
	Appearance
AllowEmptySelection	Required	Make sure that you reverse the logic
	BasePaletteColor
BorderColor	BorderColor	Property Removed
	BorderRadius
BorderStyle	BorderStyle	Property Removed
BorderThickness	BorderThickness	Property Removed
ChevronBackground
ChevronDisabledBackground
ChevronDisabledFill
ChevronFill
ChevronHoverBackground
ChevronHoverFill
Color	FontColor	Other than the property name change there is no difference
ContentLanguage	ContentLanguage
Default	DefaultSelectedItems	notice that Default delectedItems will be a collection
DisabledBorderColor		Property Removed
DisabledColor		Property Removed
DisabledFill		Property Removed
DisplayMode	DisplayMode
Fill	Fill	Property Removed
FocussedBorderColor		Property Removed
FocussedBorderThickness		Property Removed
Font	Font
FontWeight	FontWeight	All other Font related property received the Font prefix, however Weight has lost the Font Prefix. Also the values are now texts, “Medium”, “Regular”, “Semibold” and “Bold” rather than FontWeight.Normal, FontWeight.Lighter, FontWeight.Bold and FontWeight.SemiBold
Height	Height
HoverBorderColor
HoverColor		Property Removed
HoverFill		Property Removed
Italic	FontItalic
Items	Items
OnChange	OnChange
OnSelect		Property Removed
PaddingBottom	PaddingBottom	Property Removed
PaddingLeft	PaddingLeft	Property Removed
PaddingRight	PaddingRight	Property Removed
PaddingTop	PaddingTop	Property Removed
PressedBorderColor
PressedColor		Property Removed
PressedFill		Property Removed
Reset		Property Removed
SelectionColor
SelectionFill
Size		Property Removed
Striketrough	FontStrikethrough
TabIndex		Property Removed
Tooltip		Property Removed
Underline	FontUnderLine
	ValidationState
Visible	Visible
Width	Width
X	X
Y	Y

Modern Combobox vs Classic Combo box

Of the new controls the modern Combo box is probably the hardest control to upgrade. The Trigger Output property is probably one of the biggest changes but I will look at that in a seperate post.

Text Label	Text	Comment
AccessibleLabel	AccessibleLabel
	Appearance
	BasePaletteColor
BorderColor	BorderColor	Property Removed
	BorderRadius
BorderStyle	BorderStyle
BorderThickness	BorderThickness
ChevronBackground		Property Removed
ChevronDisabledBackground		Property Removed
ChevronDisabledFill		Property Removed
ChevronFill		Property Removed
ChevronHoverBackground		Property Removed
ChevronHoverFill		Property Removed
Color	FontColor	Other than the property name change there is no difference
ContentLanguage	ContentLanguage
Default		notice that Default delectedItems will be a collection
DefaultSelectedItems	DefaultSelectedItems
DisabledBorderColor		Property Removed
DisabledColor		Property Removed
DisabledFill		Property Removed
DisplayFields
DisplayMode	DisplayMode
Fill	Fill	Property Removed
FocussedBorderColor		Property Removed
FocussedBorderThickness		Property Removed
Font	Font
FontWeight	FontWeight	All other Font related property received the Font prefix, however Weight has lost the Font Prefix. Also the values are now texts, “Medium”, “Regular”, “Semibold” and “Bold” rather than FontWeight.Normal, FontWeight.Lighter, FontWeight.Bold and FontWeight.SemiBold
Height	Height
HoverBorderColor		Property Removed
HoverColor		Property Removed
HoverFill		Property Removed
InputTextPlaceHolder	InputTextPlaceHolder
	IsSearchable
Italic	FontItalic
Items	Items
MultiValueDelimiter	MultiValueDelimiter
NoSelectionText		Property Removed
OnChange	OnChange
OnSelect		Property Removed
PaddingBottom	PaddingBottom	Property Removed
PaddingLeft	PaddingLeft	Property Removed
PaddingRight	PaddingRight	Property Removed
PaddingTop	PaddingTop	Property Removed
PressedBorderColor
PressedColor		Property Removed
PressedFill		Property Removed
	Required
Reset		Property Removed
SearchFields		Property Removed
SelectionColor		Property Removed
SelectionFill		Property Removed
SelectionTagColor		Property Removed
SelectionTagFill		Property Removed
SelectMultiple	SelectMultiple
Size	FontSize	Property Removed
Striketrough	FontStrikethrough
TabIndex		Property Removed
Tooltip		Property Removed
	TriggerOutput
Underline	FontUnderLine
	ValidationState
Visible	Visible
Width	Width
X	X
Y	Y