diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 8dff56dd6b..8cbc629291 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -654,7 +654,7 @@ export const getSchemaForDatasource = (asset, datasource, options) => {
* Builds a form schema given a form component.
* A form schema is a schema of all the fields nested anywhere within a form.
*/
-const buildFormSchema = component => {
+export const buildFormSchema = component => {
let schema = {}
if (!component) {
return schema
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/UpdateFieldValue.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/UpdateFieldValue.svelte
new file mode 100644
index 0000000000..cddf3e9fda
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/UpdateFieldValue.svelte
@@ -0,0 +1,78 @@
+
+
+
+ Form
+ x._instanceName}
+ getOptionValue={x => x._id}
+ />
+ Type
+
+ Field
+
+ {#if parameters.type === "set"}
+ Value
+ (parameters.value = e.detail)}
+ />
+ {/if}
+
+
+
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js
index 2306d4a548..8f0baf08be 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js
@@ -14,3 +14,4 @@ export { default as DuplicateRow } from "./DuplicateRow.svelte"
export { default as S3Upload } from "./S3Upload.svelte"
export { default as ExportData } from "./ExportData.svelte"
export { default as ContinueIf } from "./ContinueIf.svelte"
+export { default as UpdateFieldValue } from "./UpdateFieldValue.svelte"
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json
index 80464b281f..cf18fee3a6 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json
@@ -42,25 +42,29 @@
"name": "Trigger Automation",
"component": "TriggerAutomation"
},
+ {
+ "name": "Update Field Value",
+ "component": "UpdateFieldValue"
+ },
{
"name": "Validate Form",
"component": "ValidateForm"
},
{
- "name": "Log Out",
- "component": "LogOut"
+ "name": "Change Form Step",
+ "component": "ChangeFormStep"
},
{
"name": "Clear Form",
"component": "ClearForm"
},
{
- "name": "Close Screen Modal",
- "component": "CloseScreenModal"
+ "name": "Log Out",
+ "component": "LogOut"
},
{
- "name": "Change Form Step",
- "component": "ChangeFormStep"
+ "name": "Close Screen Modal",
+ "component": "CloseScreenModal"
},
{
"name": "Refresh Data Provider",
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 4c3c0faf1f..9df9a30d1c 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1834,7 +1834,12 @@
"icon": "Form",
"hasChildren": true,
"illegalChildren": ["section", "form"],
- "actions": ["ValidateForm", "ClearForm", "ChangeFormStep"],
+ "actions": [
+ "ValidateForm",
+ "ClearForm",
+ "ChangeFormStep",
+ "UpdateFieldValue"
+ ],
"styles": ["size"],
"settings": [
{
@@ -1975,6 +1980,17 @@
"label": "Default value",
"key": "defaultValue"
},
+ {
+ "type": "event",
+ "label": "On change",
+ "key": "onChange",
+ "context": [
+ {
+ "label": "Field Value",
+ "key": "value"
+ }
+ ]
+ },
{
"type": "boolean",
"label": "Disabled",
@@ -2049,6 +2065,17 @@
"label": "Default value",
"key": "defaultValue"
},
+ {
+ "type": "event",
+ "label": "On change",
+ "key": "onChange",
+ "context": [
+ {
+ "label": "Field Value",
+ "key": "value"
+ }
+ ]
+ },
{
"type": "boolean",
"label": "Disabled",
@@ -2089,6 +2116,17 @@
"label": "Default value",
"key": "defaultValue"
},
+ {
+ "type": "event",
+ "label": "On change",
+ "key": "onChange",
+ "context": [
+ {
+ "label": "Field Value",
+ "key": "value"
+ }
+ ]
+ },
{
"type": "boolean",
"label": "Disabled",
@@ -2125,6 +2163,17 @@
"key": "placeholder",
"placeholder": "Choose an option"
},
+ {
+ "type": "event",
+ "label": "On change",
+ "key": "onChange",
+ "context": [
+ {
+ "label": "Field Value",
+ "key": "value"
+ }
+ ]
+ },
{
"type": "select",
"label": "Type",
@@ -2274,6 +2323,17 @@
"label": "Default value",
"key": "defaultValue"
},
+ {
+ "type": "event",
+ "label": "On change",
+ "key": "onChange",
+ "context": [
+ {
+ "label": "Field Value",
+ "key": "value"
+ }
+ ]
+ },
{
"type": "boolean",
"label": "Autocomplete",
@@ -2399,6 +2459,17 @@
"label": "Default value",
"key": "defaultValue"
},
+ {
+ "type": "event",
+ "label": "On change",
+ "key": "onChange",
+ "context": [
+ {
+ "label": "Field Value",
+ "key": "value"
+ }
+ ]
+ },
{
"type": "boolean",
"label": "Disabled",
@@ -2439,6 +2510,17 @@
"label": "Default value",
"key": "defaultValue"
},
+ {
+ "type": "event",
+ "label": "On change",
+ "key": "onChange",
+ "context": [
+ {
+ "label": "Field Value",
+ "key": "value"
+ }
+ ]
+ },
{
"type": "select",
"label": "Formatting",
@@ -2512,6 +2594,17 @@
"label": "Default value",
"key": "defaultValue"
},
+ {
+ "type": "event",
+ "label": "On change",
+ "key": "onChange",
+ "context": [
+ {
+ "label": "Field Value",
+ "key": "value"
+ }
+ ]
+ },
{
"type": "boolean",
"label": "Disabled",
@@ -2657,6 +2750,17 @@
"label": "Extensions",
"key": "extensions"
},
+ {
+ "type": "event",
+ "label": "On change",
+ "key": "onChange",
+ "context": [
+ {
+ "label": "Field Value",
+ "key": "value"
+ }
+ ]
+ },
{
"type": "boolean",
"label": "Disabled",
@@ -2697,6 +2801,17 @@
"label": "Default value",
"key": "defaultValue"
},
+ {
+ "type": "event",
+ "label": "On change",
+ "key": "onChange",
+ "context": [
+ {
+ "label": "Field Value",
+ "key": "value"
+ }
+ ]
+ },
{
"type": "boolean",
"label": "Autocomplete",
@@ -2742,6 +2857,17 @@
"label": "Default value",
"key": "defaultValue"
},
+ {
+ "type": "event",
+ "label": "On change",
+ "key": "onChange",
+ "context": [
+ {
+ "label": "Field Value",
+ "key": "value"
+ }
+ ]
+ },
{
"type": "boolean",
"label": "Disabled",
diff --git a/packages/client/src/components/app/forms/InnerForm.svelte b/packages/client/src/components/app/forms/InnerForm.svelte
index ae6ae3ebcc..99dcbf4d5e 100644
--- a/packages/client/src/components/app/forms/InnerForm.svelte
+++ b/packages/client/src/components/app/forms/InnerForm.svelte
@@ -219,10 +219,10 @@
})
return valid
},
- clear: () => {
- // Clear the form by clearing each individual field
+ reset: () => {
+ // Reset the form by resetting each individual field
fields.forEach(field => {
- get(field).fieldApi.clearValue()
+ get(field).fieldApi.reset()
})
},
changeStep: ({ type, number }) => {
@@ -241,6 +241,22 @@
currentStep.set(step)
}
},
+ setFieldValue: (fieldName, value) => {
+ const field = getField(fieldName)
+ if (!field) {
+ return
+ }
+ const { fieldApi } = get(field)
+ fieldApi.setValue(value)
+ },
+ resetField: fieldName => {
+ const field = getField(fieldName)
+ if (!field) {
+ return
+ }
+ const { fieldApi } = get(field)
+ fieldApi.reset()
+ },
}
// Creates an API for a specific field
@@ -268,11 +284,11 @@
return !error
}
- // Clears the value of a certain field back to the initial value
- const clearValue = () => {
+ // Clears the value of a certain field back to the default value
+ const reset = () => {
const fieldInfo = getField(field)
const { fieldState } = get(fieldInfo)
- const newValue = initialValues[field] ?? fieldState.defaultValue
+ const newValue = fieldState.defaultValue
// Update field state
fieldInfo.update(state => {
@@ -329,7 +345,7 @@
return {
setValue,
- clearValue,
+ reset,
updateValidation,
setDisabled,
validate: () => {
@@ -354,11 +370,20 @@
// register their fields to step 1
setContext("form-step", writable(1))
+ const handleUpdateFieldValue = ({ type, field, value }) => {
+ if (type === "set") {
+ formApi.setFieldValue(field, value)
+ } else {
+ formApi.resetField(field)
+ }
+ }
+
// Action context to pass to children
const actions = [
{ type: ActionTypes.ValidateForm, callback: formApi.validate },
- { type: ActionTypes.ClearForm, callback: formApi.clear },
+ { type: ActionTypes.ClearForm, callback: formApi.reset },
{ type: ActionTypes.ChangeFormStep, callback: formApi.changeStep },
+ { type: ActionTypes.UpdateFieldValue, callback: handleUpdateFieldValue },
]
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index 965ca788e1..51ef3fd124 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -21,6 +21,7 @@ export const UnsortableTypes = [
export const ActionTypes = {
ValidateForm: "ValidateForm",
+ UpdateFieldValue: "UpdateFieldValue",
RefreshDatasource: "RefreshDatasource",
AddDataProviderQueryExtension: "AddDataProviderQueryExtension",
RemoveDataProviderQueryExtension: "RemoveDataProviderQueryExtension",
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index f851a623c0..bb1e7c30c9 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -162,6 +162,19 @@ const executeActionHandler = async (
}
}
+const updateFieldValueHandler = async (action, context) => {
+ return await executeActionHandler(
+ context,
+ action.parameters.componentId,
+ ActionTypes.UpdateFieldValue,
+ {
+ type: action.parameters.type,
+ field: action.parameters.field,
+ value: action.parameters.value,
+ }
+ )
+}
+
const validateFormHandler = async (action, context) => {
return await executeActionHandler(
context,
@@ -295,6 +308,7 @@ const handlerMap = {
["Execute Query"]: queryExecutionHandler,
["Trigger Automation"]: triggerAutomationHandler,
["Validate Form"]: validateFormHandler,
+ ["Update Field Value"]: updateFieldValueHandler,
["Refresh Data Provider"]: refreshDataProviderHandler,
["Log Out"]: logoutHandler,
["Clear Form"]: clearFormHandler,