Description:
This control allows you to clear the user's input from the Form during runtime.
Inputs
- Button Type - Warning (by default)
- ID/Name - Name of the widget generated by FlowWright (read-only field)
- Button label - Provide the name for the button label
- Hide - Select the checkbox to hide (tick mark)
- Read Only - Select the checkbox to make it read-only (tick mark)
- Save - Save the input values
- Delete - Remove this form widget from the designer page
- Close - Close the input popup window
Design:
The Clear Form widget is registered in FlowWright under the Page Controls category. It is identified by the internal name clearform and the display name Clear Form.
Typical Workflow Suggestions:
Customer Registration Form
Provide a way for users to clear entered registration details and start over if they make mistakes.
Example: Enter Registration Details → Clear Form → Enter Correct Details → Submit.
Service Request Form
Allow users to discard incorrect service request information and re-enter it.
Example: Enter Service Details → Clear Form → Complete Corrected Request.
Search Form
Use a clear-form control to help users reset search criteria before entering a new query, if the widget supports clearing those fields.
Example: Enter Search Criteria → Clear Form → Enter New Criteria → Search.
Data Entry Form
Help users restart data entry when they enter information in the wrong fields.
Example: Enter Record Details → Clear Form → Enter Correct Record → Save.
Feedback Form
Allow users to clear draft feedback before entering a revised response, if supported by the form configuration.
Example: Enter Feedback → Clear Form → Enter Revised Feedback → Submit.
Example:
Let’s build and execute the “ClearFormDef” example.
- Create a new Form definition called “ClearFormDef.”
- Drag a “BootstrapGrid, Label, Textbox, ClearForm, and Submit” control onto the canvas and arrange them as shown below.
- Double-click the “clearForm” control to set its “Settings” properties. Choose the button type from the drop-down list. The application provides the control ID and name. Enter the button label text. Use the checkbox to hide the control or make it read-only at runtime.
- Double-click the widget to open the “Styling” tab. Enter the CSS syntax to improve the style — the border is highlighted in 10px red in the reference below. Select the class options from the drop-down list to apply to HTML elements.
- Double-click the widget to configure the “Other” tab, then enter the text to display as a tooltip.
- Double-click the control to configure the “Globalize” properties. The application will notify you if nothing needs to be globalized, as shown below. Otherwise, choose a language from the drop-down menu and then click the Translate button. Finally, click the Save button.
- Save the Form definition. Choose Actions > Create Form Instance from the menu. Generate a new form instance and check the box to edit it.
- The Form appears on a new page, as shown below. Enter some user input, then click the “Clear Form” button to reset it.
Tips:
- Test the control with text fields, selection fields, and other field types used in the form.
- Verify whether default values are cleared or restored.
- Check whether required-field validation still works after clearing the form.
- Confirm whether the widget affects all fields or only a subset.
- Ensure that users understand that clearing the form may discard their entered information.
Definition Sample:
You may download and extract the sample definition(s) from the link provided and later import them (drag-and-drop) into your FlowWright Process Definition (XML file) or Form Definition (HTML file) page.
Note: Please verify and complete the import process steps for any missing configurations, such as file path references and database connections. Then, save the definition to confirm the changes.
Click here to download the sample file.