Merge pull request #5417 from Budibase/form-actions

Form actions
2022-04-22 10:47:57 +01:00 · 2022-04-22 10:47:57 +01:00 · 754aa82cec
parent 52c056b9ef e60c1a9685
commit 754aa82cec
19 changed files with 420 additions and 84 deletions
--- 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
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/UpdateFieldValue.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/UpdateFieldValue.svelte
@ -0,0 +1,78 @@
+<script>
+  import { Select, Label, Combobox } from "@budibase/bbui"
+  import { onMount } from "svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import { currentAsset, store } from "builderStore"
+  import {
+    getActionProviderComponents,
+    buildFormSchema,
+  } from "builderStore/dataBinding"
+  import { findComponent } from "builderStore/componentUtils"
+
+  export let parameters
+  export let bindings = []
+
+  const typeOptions = [
+    {
+      label: "Set value",
+      value: "set",
+    },
+    {
+      label: "Reset to default value",
+      value: "reset",
+    },
+  ]
+
+  $: formComponent = findComponent($currentAsset.props, parameters.componentId)
+  $: formSchema = buildFormSchema(formComponent)
+  $: fieldOptions = Object.keys(formSchema || {})
+  $: actionProviders = getActionProviderComponents(
+    $currentAsset,
+    $store.selectedComponentId,
+    "ValidateForm"
+  )
+
+  onMount(() => {
+    if (!parameters.type) {
+      parameters.type = "set"
+    }
+  })
+</script>
+
+<div class="root">
+  <Label small>Form</Label>
+  <Select
+    bind:value={parameters.componentId}
+    options={actionProviders}
+    getOptionLabel={x => x._instanceName}
+    getOptionValue={x => x._id}
+  />
+  <Label small>Type</Label>
+  <Select
+    placeholder={null}
+    bind:value={parameters.type}
+    options={typeOptions}
+  />
+  <Label small>Field</Label>
+  <Combobox bind:value={parameters.field} options={fieldOptions} />
+  {#if parameters.type === "set"}
+    <Label small>Value</Label>
+    <DrawerBindableInput
+      {bindings}
+      value={parameters.value}
+      on:change={e => (parameters.value = e.detail)}
+    />
+  {/if}
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 60px 1fr;
+    align-items: center;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+</style>
--- 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"
--- 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",
--- a/packages/builder/src/pages/builder/portal/apps/create.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/create.svelte
@ -75,8 +75,8 @@
    <div class="title">
      <div class="welcome">
        <Layout noPadding gap="XS">
-          <Heading size="M">{createAppTitle}</Heading>
-          <Body size="S">
+          <Heading size="L">{createAppTitle}</Heading>
+          <Body size="M">
            {welcomeBody}
          </Body>
        </Layout>
@ -84,7 +84,7 @@
        <div class="buttons">
          <Button
            dataCy="create-app-btn"
-            size="L"
+            size="M"
            icon="Add"
            cta
            on:click={initiateAppCreation}
@ -94,7 +94,7 @@
          <Button
            dataCy="import-app-btn"
            icon="Import"
-            size="L"
+            size="M"
            quiet
            secondary
            on:click={initiateAppImport}
--- 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",
@ -2750,6 +2876,62 @@
      }
    ]
  },
+  "s3upload": {
+    "name": "S3 File Upload",
+    "info": "This component can't be used with S3 datasources that use custom endpoints.",
+    "icon": "UploadToCloud",
+    "styles": ["size"],
+    "editable": true,
+    "settings": [
+      {
+        "type": "field/attachment",
+        "label": "Field",
+        "key": "field"
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "dataSource/s3",
+        "label": "S3 Datasource",
+        "key": "datasourceId"
+      },
+      {
+        "type": "text",
+        "label": "Bucket",
+        "key": "bucket"
+      },
+      {
+        "type": "text",
+        "label": "File Name",
+        "key": "key"
+      },
+      {
+        "type": "event",
+        "label": "On Change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
+      },
+      {
+        "type": "validation/attachment",
+        "label": "Validation",
+        "key": "validation"
+      }
+    ]
+  },
  "dataprovider": {
    "name": "Data Provider",
    "info": "Pagination is only available for data stored in tables.",
@ -3581,51 +3763,6 @@
      }
    ]
  },
-  "s3upload": {
-    "name": "S3 File Upload",
-    "info": "This component can't be used with S3 datasources that use custom endpoints.",
-    "icon": "UploadToCloud",
-    "styles": ["size"],
-    "editable": true,
-    "settings": [
-      {
-        "type": "field/attachment",
-        "label": "Field",
-        "key": "field"
-      },
-      {
-        "type": "text",
-        "label": "Label",
-        "key": "label"
-      },
-      {
-        "type": "dataSource/s3",
-        "label": "S3 Datasource",
-        "key": "datasourceId"
-      },
-      {
-        "type": "text",
-        "label": "Bucket",
-        "key": "bucket"
-      },
-      {
-        "type": "text",
-        "label": "File Name",
-        "key": "key"
-      },
-      {
-        "type": "boolean",
-        "label": "Disabled",
-        "key": "disabled",
-        "defaultValue": false
-      },
-      {
-        "type": "validation/attachment",
-        "label": "Validation",
-        "key": "validation"
-      }
-    ]
-  },
  "markdownviewer": {
    "name": "Markdown Viewer",
    "icon": "TaskList",
--- a/packages/client/src/components/app/forms/AttachmentField.svelte
+++ b/packages/client/src/components/app/forms/AttachmentField.svelte
@ -8,6 +8,7 @@
  export let disabled = false
  export let validation
  export let extensions
+  export let onChange

  let fieldState
  let fieldApi
@ -38,6 +39,13 @@
      return []
    }
  }
+
+  const handleChange = e => {
+    fieldApi.setValue(e.detail)
+    if (onChange) {
+      onChange({ value: e.detail })
+    }
+  }
 </script>

 <Field
@ -55,9 +63,7 @@
      value={fieldState.value}
      disabled={fieldState.disabled}
      error={fieldState.error}
-      on:change={e => {
-        fieldApi.setValue(e.detail)
-      }}
+      on:change={handleChange}
      {processFiles}
      {handleFileTooLarge}
      {extensions}
--- 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 })
+    }
+  }
 </script>

 <Field
@ -44,8 +52,8 @@
      error={fieldState.error}
      id={fieldState.fieldId}
      {size}
-      on:change={e => fieldApi.setValue(e.detail)}
      {text}
+      on:change={handleChange}
    />
  {/if}
 </Field>
--- 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 })
+    }
+  }
 </script>

 <Field
@ -28,7 +36,7 @@
  {#if fieldState}
    <CoreDatePicker
      value={fieldState.value}
-      on:change={e => fieldApi.setValue(e.detail)}
+      on:change={handleChange}
      disabled={fieldState.disabled}
      error={fieldState.error}
      id={fieldState.fieldId}
--- 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 },
  ]
 </script>

--- 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 })
+    }
+  }
 </script>

 <Field
@ -49,7 +58,7 @@
    <div style="--height: {height};">
      <CoreTextArea
        value={serialiseValue(fieldState.value)}
-        on:change={e => fieldApi.setValue(parseValue(e.detail))}
+        on:change={handleChange}
        disabled={fieldState.disabled}
        error={fieldState.error}
        id={fieldState.fieldId}
--- 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 })
+    }
+  }
 </script>

 <Field
@ -61,7 +69,7 @@
    {#if useRichText}
      <CoreRichTextField
        value={fieldState.value}
-        on:change={e => fieldApi.setValue(e.detail)}
+        on:change={handleChange}
        disabled={fieldState.disabled}
        error={fieldState.error}
        id={fieldState.fieldId}
@ -78,7 +86,7 @@
    {:else}
      <CoreTextArea
        value={fieldState.value}
-        on:change={e => fieldApi.setValue(e.detail)}
+        on:change={handleChange}
        disabled={fieldState.disabled}
        error={fieldState.error}
        id={fieldState.fieldId}
--- 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 })
+    }
+  }
 </script>

 <Field
@ -62,7 +68,7 @@
      getOptionValue={flatOptions ? x => x : x => x.value}
      id={fieldState.fieldId}
      disabled={fieldState.disabled}
-      on:change={e => fieldApi.setValue(e.detail)}
+      on:change={handleChange}
      {placeholder}
      {options}
      {autocomplete}
--- 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 })
+    }
+  }
 </script>

 <Field
@ -52,7 +60,7 @@
        error={fieldState.error}
        {options}
        {placeholder}
-        on:change={e => 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}
      />
--- 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 })
+    }
+  }
 </script>

 <Field
--- a/packages/client/src/components/app/forms/S3Upload.svelte
+++ b/packages/client/src/components/app/forms/S3Upload.svelte
@ -10,6 +10,7 @@
  export let label
  export let disabled = false
  export let validation
+  export let onChange

  let fieldState
  let fieldApi
@ -88,6 +89,13 @@
    }
  }

+  const handleChange = e => {
+    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}
--- 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 })
+    }
+  }
 </script>

 <Field
@ -21,6 +29,7 @@
  {disabled}
  {validation}
  {defaultValue}
+  {onChange}
  type={type === "number" ? "number" : "string"}
  bind:fieldState
  bind:fieldApi
@ -29,7 +38,7 @@
    <CoreTextField
      updateOnChange={false}
      value={fieldState.value}
-      on:change={e => fieldApi.setValue(e.detail)}
+      on:change={handleChange}
      disabled={fieldState.disabled}
      error={fieldState.error}
      id={fieldState.fieldId}
--- 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",
--- 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,