{"id":3659,"date":"2019-10-01T09:54:20","date_gmt":"2019-10-01T16:54:20","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/introducing-onreset-property-of-component\/"},"modified":"2019-10-01T09:54:20","modified_gmt":"2019-10-01T16:54:20","slug":"introducing-onreset-property-of-component","status":"publish","type":"power-apps","link":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/introducing-onreset-property-of-component\/","title":{"rendered":"Introducing OnReset property of component"},"content":{"rendered":"

I am excited to introduce the OnReset property of components. With OnReset, you can specify\u00a0behavior formulas<\/a>\u00a0that run when an event resets a component. You can use OnReset to perform initialization, clear input, and reset values when the\u00a0Reset<\/strong>\u00a0function is run on the component instances.<\/a><\/p>\n

OnReset<\/h2>\n

In a component master, select the component itself. Go to the drop-down list of properties on the right side of the formula bar. Select\u00a0OnReset<\/strong>\u00a0and then enter one or more formulas.<\/p>\n

\"\"<\/p>\n

To trigger\u00a0OnReset <\/strong>on a component instance, configure a control to Reset<\/a> the component. Here are two examples.<\/p>\n

\u00a0<\/p>\n

Reset time picker<\/h2>\n

\"\"<\/p>\n

In this example, OnReset is used to reset a time picker.
\nYou can download the time picker component here<\/a>.<\/p>\n

In this time picker component, there are two variables used to display the time\u00a0_selectedHour<\/strong> and _selectedMinute.<\/strong>\u00a0 When the picker gets reset, these variables should be reset to a default value, say 12: 12.\u00a0 The OnReset property for the component has the following formula:<\/p>\n

Set(_selectedHour,12); Set(_selectedMinute,12)<\/pre>\n
To trigger reset, go to a screen and insert an instance of the component. Add a button and configure\u00a0OnSelect <\/strong>of the button to call Reset() on the component instance:<\/p>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Show and dismiss a dialog<\/h2>\n
\u00a0<\/p>\n
\"\"<\/p>\n
Building dialogs in canvas apps can be tricky, as a dialog visibility can be changed from inside the component (e.g. an ‘OK’ button) or outside it (show\/hide the dialog). OnReset to the rescue!<\/p>\n
You can use OnReset property to toggle the visibility of a component.\u00a0 The key steps are: (a) exposing a variable as an output, (b) wiring it with the Visible<\/strong> property of the component instance, and (c) using OnReset to reset the variable. The full app is available for download here<\/a>.<\/p>\n
Here is how to build a simple dialog component. In the component master, configure:<\/p>\n