Sometimes we need functionality to reset various controls in our canvas apps. This might be after a user has submitted a record and needs to clear down their responses, ready to make another submission. Or this could be resetting some filters used for a gallery.
I’ve recently seen this topic be a common ask on the Power Apps Community Forums, the answer differing slightly depending on the scenario. There are a few different ways to reset controls, I’ll cover the ones I know in this article.
There is a dedicated function in Power Fx with the sole purpose of resetting a control back to its default value. You can find information about the Reset function here.
To demonstrate, I’ve added a single Text Input control and renamed it to txtTextInputSingle. I’ve removed the text in the Default property, so we’ll expect the text input to be blank when reset. I’ve also added a button and put the following Power Fx into the OnSelect property:
Reset(txtTextInputSingle)
We can do the same for multiple controls too. We simply list a Reset function for each control on the screen we want to set back to it’s default state. A good best practice is to group these into a Concurrent function. I’ve added two additional controls – a Date Picker and Combo Box, then extended the Power Fx in the OnSelect property of the button:
Concurrent(
Reset(txtTextInputSingle),
Reset(cmbComboBoxSingle),
Reset(dtpDatePickerSingle)
)
Let’s take the Reset function out for a spin, we can see this refreshes all targeted controls as required:
This is a common method for resetting controls, however it does have some limitations. Firstly, you need to specify each control you want to refresh. If you add more controls to your screen, you’ll need to keep expanding the Power Fx to include them all. This could get a bit unruly over time.Â
Secondly, keep in mind this little nugget from the documentation linked above:
Galleries
To prove this, I’ve set up a gallery and added the same three controls. I’ve configured a button, outside of the gallery to attempt to reset the controls:
This is the error received when clicking on the button:
To use the Reset function with galleries, you’d need to add the button into the gallery. The refresh then only occurs for the relevant line, not every instance:
So not ideal then, but it would depend upon the scenario. Where the Reset function for galleries thrives is to reset the gallery scroll position back to the top. I’ve knocked up a quick gallery called gllBackToTop with Sequence(500) as the Items property. I’ve also added a button with the following Power Fx in the OnSelect property:
Reset(gllBackToTop)
You can see in the above image that I have line 318 selected. The scroll bar on the right of the gallery reflects how far I’ve scrolled down to select that item. When the button is clicked, the Reset is performed and we go back to the top of the gallery:
Forms
If you want to use the Reset function with Forms, you need to make the button (or whichever behaviour-based control you’re using) part of the same form template. This means adding a button/functionality to each Data Card that needs it, or adding a custom card to the form. The behaviour-based control is then part of the template for the Reset function to work:
However, if you want to reset all controls inside a Form back to their default state, the ResetForm function will be a better option. This is covered later in the article.
Button press
I’ll firstly say, I genuinely didn’t know this one existed until doing research for this article. It again comes from reading the description for the Reset function:
I’ve returned to my three controls from earlier and added a button, which is renamed to btnResetButtonPress. I have not put anything in the OnSelect property. In the Reset property of each of the controls, I’ve added the following:
btnResetButtonPress.Pressed
To quote Nicholas Cage at the end of National Treasure – is it really that simple? Apparently so.
This method also works perfectly for galleries or forms, whether the button is inside or outside of the respective template. However, it has limited uses. What if you need to Patch information back to a data source before the controls get refreshed? This method will reset the controls before your OnSelect code has finished so will be problematic. I tried adding a hidden button to be ‘called’ from another button using the Select(HiddenButton) trick. Unfortunately it doesn’t recognise the hidden button being ‘pressed’, so nothing happens.
I think the button.pressed approach is great for scenario’s such as refreshing multiple filters for a gallery, but I doubt I’d use it elsewhere.
Variable
In my experience, this is my commonly used method to reset controls. It has a lot of flexibility across most control types and easy to configure when adding new controls to the screen. This approach can be used with either a context or global variable.
The concept is to have a boolean (true or false) variable that can be switched to true, then false. This works well with the reset property of controls in Power Apps, which is boolean by nature and defaults to false for all controls:
Context
To perform this technique with context variables (current screen only), I’ve added the following Power Fx to the OnSelect property of my button:
UpdateContext({cvResetControls: true});
UpdateContext({cvResetControls: false})
The context variable is then referenced in the Reset property of any control that needs to be reset:
Here is the method in action:
Unlike the Reset function, this method is absolutely epic for refreshing all controls added to a gallery:
Global
If you need to use a global variable instead, your Power Fx needs to look something like this:
Set(gvResetControls,true);
Set(gvResetControls,false)
You’d then reference the global variable name in the Reset property of controls, just the same as you would with context variables (as illustrated above).
ResetForm
I mentioned earlier that the Reset function can be used to reset multiple controls in a Form. Whilst this is fine, there’s a much simpler way.
The ResetForm function in Power Fx is designed specifically to work with the out-of-the-box Form control. Using the ResetForm function will reset every control within the form back to its default state – whether that’s a control added by default or one you’ve added yourself.Â
I’ve added a Form to my app, renamed it to frmMyFormControl and bound it to a SharePoint list. The list has a couple of text fields along with date and choice columns. I’ve also added another imaginatively renamed button control called btnResetForm and added the following Power Fx to the OnSelect property:
ResetForm(frmMyFormControl)
A typical pattern would be to add this into the OnSuccess property of a Form control, so the form and its controls are only reset once the submission back to the data source is successful.
Hopefully a couple of good methods for resetting inputs, forms and galleries that you can use in your canvas apps. Know of any others? Let me know in the comments below.
If you liked this article and want more epic Power Platform stuff to land in your inbox every week, don’t forget to subscribe!
How do I reset Tabs in the Modern Control?
That’s a great question! I’ve a friend who’s releasing a post about this very subject soon, I’ll see if he can share the link here for you
Hi!
The tab list control reset works slightly different. You can find more information on resetting this control in my recent blog post. Please note however, that modern controls are currently still in preview.
https://laurensm.com/modern-tab-list-tips-reset-change-the-default-selected-tab/
Thanks for the heads up Craig!
Thanks for sharing, Laurens. I’ll be sure to bookmark that article too
Hi Craig, the modern controls like dropdown in canvas app do not a Reset property to insert this variable. what are my options then?
Hi Mohammed, this is a good question and something missing from a lot of the modern controls. I’m not sure if it’ll be of help, but my buddy Laurens Martens blogged about a technique to reset the modern tab control. Maybe a similar technique can be used for the modern drop down? You can check his article out here: https://laurensm.com/modern-tab-list-tips-reset-change-the-default-selected-tab/
With his article in mind, I’ve tested the following at got it working:
1) in the OnChange of the drop down, set a local variable with the selected value, for example: UpdateContext({cvSelected: Self.Selected.Value})
2) have a button in your app that runs the following when selected: UpdateContext({cvSelected: Blank()})
3) in the DefaultSelectedItems property of the modern drop down, add the following (include the square brackets): [cvSelected]
Might need refining but that should be a good base for you to start. Please be aware that the modern drop down is still in preview so may be subject to change. Be cautious using them in production apps, just in case.