diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte
new file mode 100644
index 0000000000..74eae6283c
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
index b8114461f9..bfbf97701b 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
@@ -5,6 +5,7 @@ import ExecuteQuery from "./ExecuteQuery.svelte"
import TriggerAutomation from "./TriggerAutomation.svelte"
import ValidateForm from "./ValidateForm.svelte"
import LogOut from "./LogOut.svelte"
+import ClearForm from "./ClearForm.svelte"
// Defines which actions are available to configure in the front end.
// Unfortunately the "name" property is used as the identifier so please don't
@@ -42,4 +43,8 @@ export default [
name: "Log Out",
component: LogOut,
},
+ {
+ name: "Clear Form",
+ component: ClearForm,
+ },
]
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index e0595c0ce9..7204b8c951 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -6,6 +6,7 @@ export const ActionTypes = {
ValidateForm: "ValidateForm",
RefreshDatasource: "RefreshDatasource",
SetDataProviderQuery: "SetDataProviderQuery",
+ ClearForm: "ClearForm",
}
export const ApiVersion = "1"
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 98ba9dc214..ea29180d36 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -86,6 +86,14 @@ const logoutHandler = async () => {
await authStore.actions.logOut()
}
+const clearFormHandler = async (action, context) => {
+ return await executeActionHandler(
+ context,
+ action.parameters.componentId,
+ ActionTypes.ClearForm
+ )
+}
+
const handlerMap = {
["Save Row"]: saveRowHandler,
["Delete Row"]: deleteRowHandler,
@@ -95,6 +103,7 @@ const handlerMap = {
["Validate Form"]: validateFormHandler,
["Refresh Datasource"]: refreshDatasourceHandler,
["Log Out"]: logoutHandler,
+ ["Clear Form"]: clearFormHandler,
}
const confirmTextMap = {
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 2410ba56b5..e0603c0f0b 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1647,7 +1647,8 @@
"hasChildren": true,
"illegalChildren": ["section"],
"actions": [
- "ValidateForm"
+ "ValidateForm",
+ "ClearForm"
],
"styles": ["size"],
"settings": [
diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte
index 3a63b63bdc..f6fadfa5cb 100644
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@@ -64,6 +64,13 @@
})
return get(formState).valid
},
+ clear: () => {
+ const fields = Object.keys(fieldMap)
+ fields.forEach(field => {
+ const { fieldApi } = fieldMap[field]
+ fieldApi.clearValue()
+ })
+ },
}
// Provide both form API and state to children
@@ -72,6 +79,7 @@
// Action context to pass to children
const actions = [
{ type: ActionTypes.ValidateForm, callback: formApi.validate },
+ { type: ActionTypes.ClearForm, callback: formApi.clear },
]
// Creates an API for a specific field
@@ -108,8 +116,27 @@
return !newError
}
+
+ const clearValue = () => {
+ const { fieldState } = fieldMap[field]
+ const newValue = initialValues[field] ?? defaultValue
+ fieldState.update(state => {
+ state.value = newValue
+ state.error = null
+ return state
+ })
+
+ formState.update(state => {
+ state.values = { ...state.values, [field]: newValue }
+ delete state.errors[field]
+ state.valid = Object.keys(state.errors).length === 0
+ return state
+ })
+ }
+
return {
setValue,
+ clearValue,
validate: () => {
const { fieldState } = fieldMap[field]
setValue(get(fieldState).value, true)