Skip to main content

Reset Form Fields via Event - Advanced Component

In this video you will learn how you can reset the form fields on the click of a button or link by creating and binding an event action to reset the form fields. There are seevral scenarios where you may want to clear the form after submission or allow the user to reset and fill it again rather erasing the values one at a time.

1. Create an Event

Create an event to reset form fields via event and it will indicate what exactly has to be done. Choose the Add Event option from the Events option in the left menu. Name the event and click the Create button. Firstly, choose the Reset Form Fields Option to start creating the flow.

DrapCode Builder Collection Constructor

2. Fill the Form

A form appears asking for details here. In this form select the the Reset Form Field option, mention the name of the page and the component on which you want to apply the event. You can now Save the form.

DrapCode Builder Collection Constructor

3. Bind the Event to the Button

Go to the button created for your project and bind it with the event to display records. Choose the Settings icon and in the form that appears select the Workflow Event option from the dropdown. Then the save the settings. Similarly bind the event to other buttons you want in your project.

DrapCode Builder Collection Constructor

4. Bind the Event to the Page

Go to the page created for your project and bind it with the event. The Settings and Advanced sections of the form will ask the fields to update to bind your event with the page. Before that choose the Settings icon and in the form that appears select the collection, page and Bind the Event option from the dropdown and Update your selections.

DrapCode Builder Collection Constructor

5. View the Data

When you go to the display page and Reload it the reset button to which the events is linked will update the reset the form fields accordingly.

DrapCode Builder Collection Constructor

6. Update Data

To update data on the page create an event and it will indicate what exactly has to be done. Choose the Add Event option from the Events option in the left menu. Name the event and click the Create button. Update data in this event to start creating the flow.

DrapCode Builder Collection Constructor

6.1 Reset Form Fields

Now choose the Reset Form Fields Option. Then a form appears asking for details here. In this form select the the Reset Form Field option. You can now Save the form.

DrapCode Builder Collection Constructor

7. View the Updated Data

Go to the record and choose the data you want to update/edit. Reload the page and the newly updated record will display on the page.

DrapCode Builder Collection Constructor

--