Power Apps – Reset a control inside a component

This blueprint will demonstrate in a simple way how to reset controls inside a component.

Step 1:

In a blank canvas app, go to the Tree view and do the following:

1. Click ‘Components’ tab.
2. Click ‘New component’

Step 2:

The created component will now be named Component1. Let’s change the background color so that we can distinguish later on that this is part of the component. Change the following properties:

Fill property

RGBA(215, 223, 240, 1)

Step 3:

Insert a Text Input control and name it TextInput1.

Note: As of writing, modern controls do not have the Reset property. So we will use the classic text input in this demo.

Change the following properties:

Default property

""

Reset property

Component1.Reset

Note: The Reset property will have an error for now. This error will go away after creating the custom property called ‘Reset’ which is the next step.

Step 4:

On the properties bar of Component1, do the following

1. Click ‘New custom property’.
2. Change the ‘Display name’ to “Reset”.
3. Change the ‘Data type’ to Boolean.
4. Click the ‘Create’ button.

By doing this, you will have a new property named “Reset” to be used later.

Step 5:

Go back to the ‘Screens’ tab.

Step 6:

On the middle of the screen, insert the component (Component1). Your component will be automatically named Component1_1. Change the following properties:

Reset property

varReset

Note: The formula will have an error for now. This will disappear after you have done the next step.

Step 7:

Insert a button and name it Button1. Change the following properties:

Text property

"Reset"

OnSelect property

UpdateContext({varReset:false});
UpdateContext({varReset:true});

To test if the resetting works, play the app and then type in anything in the text box, the click the ‘Reset’ button. You will notice the text box has returned to its default state of being blank.