Merge pull request #242 from FlowFuse/220-reset-form

Add ui-form "Reset on Submit" option
FlowFuse · Oct 4, 2023 · 6344956 · 6344956
2 parents f1bc838 + 4e32fde
commit 6344956
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/docs/nodes/widgets/ui-form.md b/docs/nodes/widgets/ui-form.md
@@ -12,6 +12,7 @@ props:
             <li>Required: Whether the form element is required to be filled in before the form can be submitted.</li>
     Buttons: The text shown on each of the form's buttons. If "cancel" text is left empty, then no cancel button will be shown.
     Two Columns: Will render the form as a two-column layout.
+    Reset on Submit: If checked, the form will be reset to an empty state after the form is submitted.
     Topic: Defines how to compute the topic, included in the `msg` object, when the form is submitted.
 ---
 

diff --git a/nodes/widgets/locales/en-US/ui_form.json b/nodes/widgets/locales/en-US/ui_form.json
@@ -28,6 +28,7 @@
             "topic": "Topic",
             "optionalMsgTopic": "optional msg.topic",
             "splitLayout":"Place the form elements in two columns",
+            "resetOnSubmit":"Reset the form when submitted",
             "className": "Class",
             "classNamePlaceholder": "Optional CSS class name(s) for widget"
         }

diff --git a/nodes/widgets/ui_form.html b/nodes/widgets/ui_form.html
@@ -47,6 +47,7 @@
                 payload: { value: '' },
                 submit: { value: 'submit' },
                 cancel: { value: 'clear' },
+                resetOnSubmit: { value: true },
                 topic: { value: 'topic', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('topicType') : function (v) { return true }) },
                 topicType: { value: 'msg' },
                 splitLayout: { value: '' },
@@ -350,9 +351,14 @@
         <input type="text" id="node-input-cancel" data-i18n="[placeholder]ui-form.label.cancelButtonText" style="width:35%;">
     </div>
     <div class="form-row">
-        <label for="node-input-splitLayout"></label>
+        <label></label>
         <input type="checkbox" id="node-input-splitLayout" style="display:inline-block; width:auto; vertical-align:top;">
-        <span data-i18n="ui-form.label.splitLayout">
+        <label for="node-input-splitLayout" style="width: auto" data-i18n="ui-form.label.splitLayout">
+    </div>
+    <div class="form-row">
+        <label></label>
+        <input type="checkbox" id="node-input-resetOnSubmit" style="display:inline-block; width:auto; vertical-align:top;">
+        <label for="node-input-resetOnSubmit" style="width: auto" data-i18n="ui-form.label.resetOnSubmit"></label>
     </div>
     <div class="form-row">
         <label for="node-input-topic"><i class="fa fa-tasks"></i> <span data-i18n="ui-form.label.topic"></label>

diff --git a/ui/src/widgets/ui-form/UIForm.vue b/ui/src/widgets/ui-form/UIForm.vue
@@ -58,6 +58,9 @@ export default {
             this.$socket.emit('widget-action', this.id, {
                 payload: this.input
             })
+            if (this.props.resetOnSubmit) {
+                this.reset()
+            }
         },
         clear () {
             this.reset()