Welcome to the Complete Power Apps Modern Controls Guide
On this page you will find documentation on how to use all 13 of the Power Apps Modern controls. Every modern control property is described to tell you how it works. You’ll also find handy usage tips.
Why did I create this guide?
- The official documentation for each Power Apps modern control is not finished yet and I wanted a reference right now.
- I like documentation with lots of pictures to show what changing control’s properties actually does
- As the modern controls library expands I can give my own commentary on proper usage and limitations
I hope you enjoy the Complete Power Apps Modern Controls Guide
List Of Power Apps Modern Controls
| Badge | Display short items of information, such as a person’s initials or a status indicator. |
| Button | Triggers an action when clicked or tapped |
| Checkbox | Allows the user to select one or more options from a list of choices. |
| Date Picker | Enables the user to select a date from a calendar. |
| Dropdown | Allows users to select one option from a list of predefined options by clicking or tapping on a downward arrow. |
| Info Button | Provides additional information or context about a particular feature, field or setting within an app |
| Link | Clickable element that redirects users to a web page |
| Progress Bar | Visual representation of the completion status of a task or process. |
| Radio Group | Allows users to select one option from a set of mutually exclusive options. |
| Spinner | Visual element that indicates to the user that content is being loaded or processed. |
| Tab List | Displays a set of tabs, each representing a different section or page within an app. |
| Text Input | Lets users enter text or data into a form or field. |
| Text | Displays descriptive text or instructions for other user interface components. |
Enable Power Apps Modern Controls
Power Apps Modern Controls are not turned on in studio mode by default. Go the Settings menu > General and then toggle on the feature named Modern controls and Themes.
Did You Enjoy This Article? 😺
Subscribe to get new Power Apps articles sent to your inbox each week for FREE
Questions?
If you have any questions or feedback about The Complete Power Apps Modern Controls Guide please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.
Hi Matthew,
I Don’t suppose you’ve managed to figure out how to change the format of the modern controls Datepicker? It defaults to mm/dd/yyyy but in the UK we use dd/mm/yyyy…. There doesn’t seem to be a ‘Format’ property like in the old datepicker, so I’m not sure if it’s possible or not
Kind Regards,
Rees
Rees,
Not yet. I assume it’s coming. These controls have been released in a bare bones state to get feedback. They will continue to be improved upon.
I thought that was the case, thank you for confirming 🙂
https://www.spguides.com/date-time-picker-in-powerapps/
This may help. Look for Format under PowerApps Date Picker Properties.
dot NET 6.0 added options for customizing Date Picker formats.
Sorry, but that is referring to the classic Date Picker. Not the modern one.
At this point, you may be required to use a text field with a formula:
Text(DateValue(DatePicker1, “fr”))
where “fr” is for France and the French format their date-times as dd,mmmm,yyyy
Set for Format setting of the DatePicker field to “dd/mm/yyyy”
This is controlled by prefered language in the browser.
Saw on twitter, this article is at the top of the search result for Power Apps modern controls. I checked all the controls, you have explained really well, with simple examples. Appreciated.
Bijay,
Thank you. My goal is to keep this guide updated as the controls are improved upon.
Bijay, love your guides as well!
Hi Mathew,
Are you aware of a way to reset or clear the modern datepicker? I’ve tried the Reset() function but it doesn’t appear to work. Nor does it have the Reset property that the legacy controls have.
Thanks
Ken
Ken,
I think it’s not functional like it should be yet…
Hi Matthew, have you seen any post saying when the modern controls gets into GA state? I really like the new ccontrols like the “TabList” but I this is stil listed as experimental.
Christer R
Does anyone else have the problem, that selecting the modern controls makes other controls and galleries blurry? As soon as I’ve made my selection, everything goes back to normal. Might have something to do with using containers. I know it’s still experimental, can’t wait for them to be finished with hopefully all properties from the old controls.
This is definitely a thing that happens, been trying to figure out why
Any way to change the text color for a tab list?
This list needs updated they added way more modern controls now.
Gary,
I agree. I’ll get back to it soon.
They also moved the toggle to the general tab
I don’t know if I’m losing my mind or what, but I don’t have the option to try modern controls in “Upcoming Features”. I would really like to use them. Any idea as to why I don’t have the option?
As JT– mentioned – it’s not in “Upcoming Features” anymore but in Settings→General section.
Syd,
Thanks for the note. I updated it now.
Nine month later and still the properties of these modern control not very user friendly. Does it really make sense to use it in projects?
Syd,
Once the control look and feel can be customized then it will be time to use them and not touch classic. As of this moment, that has not happened.
Great article and I appreciate all your efforts! I did have a quick question. How do we effectively use the Modern Combobox? When trying to display a form using the modern combobox I see the following for a People Picker:
After modifying the data fields to show the correct information I’d like, such as DisplayName or Email, I can use the combobox similarly to the Classic version; however, there’s one catch.
I’m unable to get all users via the People Picker. It only shows the first few. I have done some research and saw that you can use something like this in the Items to effectively get at least 999 users; however, it makes the dropdown from the combobox enormous.
items = Office365Users.SearchUser({searchTerm: "", top: 999})I’m trying to figure out a way to better use the modern combobox, but it seems very limited. I’ve even tried overlaying a text input with OnChange and forcing a search without success.
Do you have any insight into when or how to use the Modern combobox effectively?
I’m fetching choices from my SPO document library like following in my onstart:
ClearCollect(colProjectChoices,{Label:""},Choices([@DocLibrary].Project));But it seems that as I’m working with Managed Metadata, it will only retrieve 20 items. There is a fix though:
PowerApps | Display more than 20 items for Managed Metadata fields | Xylos
I also feel your pain with retrieving organization users. I found a solution eventually that I could use, since all of the users in my organization belong to one same base Entra ID group, so I used this:
ClearCollect(colGroupMembers, Office365Groups.ListGroupMembers("group-id", {'$top':999}).value);With colGroupMembers as my items it works like a charm.
Can you add the combobox? It has me stumped.
Any way to make the info button white? I have tried to adjust the color palette but it only changes the on click color. I have a dark background and need white so it stands out.
Just a heads up that there’s now a avatar control now: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/modern-controls/modern-control-avatar
Matthew, Thanks for all your work. I refer to your posts frequently to solve issues with Powerapps. My most recent is I’m getting trailing zeros in the Modern Table. I’m using a Sharepoint Calculated column and in the new table, I don’t see any “Text” function to remove them. Please help.
I accomplished this by adding fields in the items property.
AddColumns(
Filter(‘FMS Intake’,‘Test Record’ = tgl_ShowTestRecords.Checked
)
,‘Days To Renewal’,If(Evergreen,“Evergreen”,Text(DateDiff(Today(),‘Expiration Date’)))
,‘Form Type’,If(‘FMS Intake Record’,“Yes”,“No”)
)
Edit the fields of the table and these will be available to select.
Any idea how to use the “Appearance” field that’s showing up in the Modern Text Input control, or what the valid values are?
Only by trying I found you can use FilledLighter or FilledDarker.
Is there a way to have the text input auto accept the value inputted? It says my form is invalid because one of my text inputs is required and if I don’t click out of the box then the data is not recorded and tells me my form is invalid.
On the INput’s property Change the “TriggerOutput” from “FocusOut” to “Key Press”
Do you know when these modern controls will come out of preview? Would love to use them regularly but don’t want to until they are standard. I see Microsoft is making updates in Sept/Oct but no specifics are mentioned.
Max,
I don’t think we are super close yet. I’m not aware of any set date.
Buen día, el control de entrada numérica no lo puedo Reset(NumberInput1_1);; como puedo hacerlo, y siempre me deja el ultimo número seleccionado si lo escribo por el teclado si alguno sabe como puedo solucionar esto
I was hoping learn about the Modern Toolbar control. Specifically, is there any way to set the ItemDisabled property based on the e-mail (or security group) of the current user?
I am using the modern table, and then select rows to show a detail but i find only 20 rows can be selected, if i select the 100th row, then the first row will not be select again, is it limitation of the control?
Reza Dorrani responded to my comment on his YouTube video which solved this issue for me. He said to set a variable OnVisible of your screen with the modern table – something like this: Set(varTableReset, false); Set(varTableReset, true); Then on the Items property of your table, add a filter condition that references this variable, like this: Filter(MyList, varTableReset = true) And one other thing I’ve found is that the table can then act a little funky if you’ve got a rule OnSelect of it to view the item, so even though it doesn’t seem like it should be necessary, I also add in a condition to make sure the variable isn’t really blank, like this: ResetForm(MyForm); EditForm(MyForm); Set(varMyForm, MyTable.SelectedItem); If(Not(IsBlank(varMyForm)), Navigate(MyFormScreen));