diff --git a/website/docs/build-apps/how-to-guides/submit-form-data.md b/website/docs/build-apps/how-to-guides/submit-form-data.md
index 18f5cbd2ad..6726ddea05 100644
--- a/website/docs/build-apps/how-to-guides/submit-form-data.md
+++ b/website/docs/build-apps/how-to-guides/submit-form-data.md
@@ -5,10 +5,6 @@ description: This page shows you how to display a master-detail form and update
This page shows how to update table data using the Form and Modal widgets.
-
-
-
## Prerequisites
@@ -21,31 +17,29 @@ A [Table widget](/reference/widgets/table#table-data-arrayobject) connected to
This section guides you on how to open a Modal by clicking a button in a Table and configure a Form inside the Modal.
+
+
+
+
1. To open a Modal based on Table row selection, select **Add a new column** and then click on the gear icon ⚙️ from the column's properties pane.
2. Set the [**Column type**](/reference/widgets/table/column-settings#properties) as a Button and set the **onClick** event to show the Modal. If you want the Edit column to be visible at all times, you can use the **Column freeze** property to freeze the column.
-
-
-
-
-
-
-
-
:::info
Modal widget remains hidden on the canvas and becomes visible only when an event is triggered.
:::
3. You can access and edit the Modal widget from the entity explorer.
-4. Drag a [Form](/reference/widgets/form) widget within the Modal, and add the required widgets.
+4. Drag a [Form](/reference/widgets/form) or a [JSON Form](/reference/widgets/json-form) widget within the Modal, and add the required widgets. If you prefer a custom UI, use the Form widget; for a basic form setup, use the JSON Form. Additionally, you can configure the appearance of the form using the styles properties.
-5. To display data from the triggered row in the table, connect the data to the widget's property using mustache syntax `{{}}`:
+5. To display data from the triggered row in the table, connect the data to the widget's **Default value** property using mustache syntax `{{}}`:
+*Example:* To display the user's name, add the following code in the **Default value** property of the Input widget:
```js
{{Table1.triggeredRow.name}}
@@ -71,13 +65,15 @@ See [validation examples](/reference/widgets/input#regex-string) for the Input w
-2. Create an update query using the `data` [reference properties](/reference/widgets/form#data-object) of the Form widget.
+2. Create an update query using the `data` [reference property](/reference/widgets/form#data-object) of the Form widget and [triggered row](/reference/widgets/table#triggeredrow-object) property of the Table widget.
*Example:* If you have a `user` table and want to update a record based on the user's ID, you can use the following query:
```sql
+-- For JSON Form: {{JSONForm1.formData.name}}
+
UPDATE public.users
SET
phone = {{Form1.data.PhoneInput1}},
@@ -101,25 +97,21 @@ When data is updated in a datasource, the Table widget does not automatically re
1. Set the Submit Button's **onSuccess** callback to trigger the fetch query, which retrieves the updated data and displays it in the Table.
-2. To close the Modal, set **onSuccess** callback of the fetch query to close the Modal and show a success alert:
+2. Create a new **onSuccess** callback by clicking the **+** icon and set it to close the Modal.
-
+3. Create a new **onSuccess** callback to show the success alert.
-```js
-{{() => {
- showAlert('User Updated');
- closeModal('Modal1');
-}}}
-```
-
-
-
-
+
+
- 
-