- {createAppTitle}
-
+ {createAppTitle}
+
{welcomeBody}
@@ -84,7 +84,7 @@
{
+ fieldApi.setValue(e.detail)
+ if (onChange) {
+ onChange({ value: e.detail })
+ }
+ }
{
- fieldApi.setValue(e.detail)
- }}
+ on:change={handleChange}
{processFiles}
{handleFileTooLarge}
{extensions}
diff --git a/packages/client/src/components/app/forms/BooleanField.svelte b/packages/client/src/components/app/forms/BooleanField.svelte
index 1e3bc2fc8c..b9c69ce684 100644
--- a/packages/client/src/components/app/forms/BooleanField.svelte
+++ b/packages/client/src/components/app/forms/BooleanField.svelte
@@ -9,6 +9,7 @@
export let size
export let validation
export let defaultValue
+ export let onChange
let fieldState
let fieldApi
@@ -25,6 +26,13 @@
}
return false
}
+
+ const handleChange = e => {
+ fieldApi.setValue(e.detail)
+ if (onChange) {
+ onChange({ value: e.detail })
+ }
+ }
fieldApi.setValue(e.detail)}
{text}
+ on:change={handleChange}
/>
{/if}
diff --git a/packages/client/src/components/app/forms/DateTimeField.svelte b/packages/client/src/components/app/forms/DateTimeField.svelte
index 022a634bc5..1010883cad 100644
--- a/packages/client/src/components/app/forms/DateTimeField.svelte
+++ b/packages/client/src/components/app/forms/DateTimeField.svelte
@@ -10,9 +10,17 @@
export let timeOnly = false
export let validation
export let defaultValue
+ export let onChange
let fieldState
let fieldApi
+
+ const handleChange = e => {
+ fieldApi.setValue(e.detail)
+ if (onChange) {
+ onChange({ value: e.detail })
+ }
+ }
fieldApi.setValue(e.detail)}
+ on:change={handleChange}
disabled={fieldState.disabled}
error={fieldState.error}
id={fieldState.fieldId}
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/components/app/forms/JSONField.svelte b/packages/client/src/components/app/forms/JSONField.svelte
index d38a41b430..4bb5ee542c 100644
--- a/packages/client/src/components/app/forms/JSONField.svelte
+++ b/packages/client/src/components/app/forms/JSONField.svelte
@@ -8,6 +8,7 @@
export let placeholder
export let disabled = false
export let defaultValue = ""
+ export let onChange
const component = getContext("component")
const validation = [
@@ -33,6 +34,14 @@
return value
}
}
+
+ const handleChange = e => {
+ const value = parseValue(e.detail)
+ fieldApi.setValue(value)
+ if (onChange) {
+ onChange({ value })
+ }
+ }
fieldApi.setValue(parseValue(e.detail))}
+ on:change={handleChange}
disabled={fieldState.disabled}
error={fieldState.error}
id={fieldState.fieldId}
diff --git a/packages/client/src/components/app/forms/LongFormField.svelte b/packages/client/src/components/app/forms/LongFormField.svelte
index 15a10827b2..200e55af41 100644
--- a/packages/client/src/components/app/forms/LongFormField.svelte
+++ b/packages/client/src/components/app/forms/LongFormField.svelte
@@ -11,6 +11,7 @@
export let validation
export let defaultValue = ""
export let format = "auto"
+ export let onChange
let fieldState
let fieldApi
@@ -44,6 +45,13 @@
},
})
}
+
+ const handleChange = e => {
+ fieldApi.setValue(e.detail)
+ if (onChange) {
+ onChange({ value: e.detail })
+ }
+ }
fieldApi.setValue(e.detail)}
+ on:change={handleChange}
disabled={fieldState.disabled}
error={fieldState.error}
id={fieldState.fieldId}
@@ -78,7 +86,7 @@
{:else}
fieldApi.setValue(e.detail)}
+ on:change={handleChange}
disabled={fieldState.disabled}
error={fieldState.error}
id={fieldState.fieldId}
diff --git a/packages/client/src/components/app/forms/MultiFieldSelect.svelte b/packages/client/src/components/app/forms/MultiFieldSelect.svelte
index 686198dfe1..6bc0970051 100644
--- a/packages/client/src/components/app/forms/MultiFieldSelect.svelte
+++ b/packages/client/src/components/app/forms/MultiFieldSelect.svelte
@@ -14,6 +14,7 @@
export let valueColumn
export let customOptions
export let autocomplete = false
+ export let onChange
let fieldState
let fieldApi
@@ -34,13 +35,18 @@
if (!values) {
return []
}
-
if (Array.isArray(values)) {
return values
}
-
return values.split(",").map(value => value.trim())
}
+
+ const handleChange = e => {
+ fieldApi.setValue(e.detail)
+ if (onChange) {
+ onChange({ value: e.detail })
+ }
+ }
x : x => x.value}
id={fieldState.fieldId}
disabled={fieldState.disabled}
- on:change={e => fieldApi.setValue(e.detail)}
+ on:change={handleChange}
{placeholder}
{options}
{autocomplete}
diff --git a/packages/client/src/components/app/forms/OptionsField.svelte b/packages/client/src/components/app/forms/OptionsField.svelte
index 8140600e7e..c0f98ed827 100644
--- a/packages/client/src/components/app/forms/OptionsField.svelte
+++ b/packages/client/src/components/app/forms/OptionsField.svelte
@@ -16,6 +16,7 @@
export let customOptions
export let autocomplete = false
export let direction = "vertical"
+ export let onChange
let fieldState
let fieldApi
@@ -30,6 +31,13 @@
valueColumn,
customOptions
)
+
+ const handleChange = e => {
+ fieldApi.setValue(e.detail)
+ if (onChange) {
+ onChange({ value: e.detail })
+ }
+ }
fieldApi.setValue(e.detail)}
+ on:change={handleChange}
getOptionLabel={flatOptions ? x => x : x => x.label}
getOptionValue={flatOptions ? x => x : x => x.value}
{autocomplete}
@@ -66,7 +74,7 @@
error={fieldState.error}
{options}
{direction}
- on:change={e => fieldApi.setValue(e.detail)}
+ on:change={handleChange}
getOptionLabel={flatOptions ? x => x : x => x.label}
getOptionValue={flatOptions ? x => x : x => x.value}
/>
diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index 6089939dcd..2c1136bea3 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -13,6 +13,7 @@
export let validation
export let autocomplete = false
export let defaultValue
+ export let onChange
let fieldState
let fieldApi
@@ -62,11 +63,11 @@
}
const singleHandler = e => {
- fieldApi.setValue(e.detail == null ? [] : [e.detail])
+ handleChange(e.detail == null ? [] : [e.detail])
}
const multiHandler = e => {
- fieldApi.setValue(e.detail)
+ handleChange(e.detail)
}
const expand = values => {
@@ -78,6 +79,13 @@
}
return values.split(",").map(value => value.trim())
}
+
+ const handleChange = value => {
+ fieldApi.setValue(value)
+ if (onChange) {
+ onChange({ value })
+ }
+ }
{
+ fieldApi.setValue(e.detail)
+ if (onChange) {
+ onChange({ value: e.detail })
+ }
+ }
+
onMount(() => {
uploadStore.actions.registerFileUpload($component.id, upload)
})
@@ -113,9 +121,7 @@
value={fieldState.value}
disabled={loading || fieldState.disabled}
error={fieldState.error}
- on:change={e => {
- fieldApi.setValue(e.detail)
- }}
+ on:change={handleChange}
{processFiles}
{handleFileTooLarge}
maximum={1}
diff --git a/packages/client/src/components/app/forms/StringField.svelte b/packages/client/src/components/app/forms/StringField.svelte
index bb598bb1e0..fcdcfdc099 100644
--- a/packages/client/src/components/app/forms/StringField.svelte
+++ b/packages/client/src/components/app/forms/StringField.svelte
@@ -10,9 +10,17 @@
export let validation
export let defaultValue = ""
export let align
+ export let onChange
let fieldState
let fieldApi
+
+ const handleChange = e => {
+ fieldApi.setValue(e.detail)
+ if (onChange) {
+ onChange({ value: e.detail })
+ }
+ }
fieldApi.setValue(e.detail)}
+ on:change={handleChange}
disabled={fieldState.disabled}
error={fieldState.error}
id={fieldState.fieldId}
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 4e35cb2e54..473b563bb1 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,