....

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.
 
-<div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>
-  <iframe src="https://demo.arcade.software/eFTz0xQWOYjW79EcjU5S?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: "0", left: "0", width: "100%", height: "100%", colorScheme: "light" }} title="Appsmith | Connect Data">
-  </iframe>
-</div>
 
 ## 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.
 
+<div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>
+  <iframe src="https://demo.arcade.software/aeKJ95XYVW3u3Bxs35vy?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: "0", left: "0", width: "92%", height: "92%", colorScheme: "light" }} title="Appsmith | Connect Data">
+  </iframe>
+</div>
+
 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.
 
 
-<figure>
-  <img src="/img/show-modal-2.gif" style= {{width:"560px", height:"auto"}} alt="Setup Server-side Searching on Table"/>
-   <figcaption align = "center"><i></i></figcaption>
-</figure>
-
-
-
-
 :::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 `{{}}`:
 
 <dd>
 
+*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
 </dd>
 
 
-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.
 
 <dd>
 
 *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.
 
-<dd>
+3. Create a new **onSuccess** callback to show the success alert.
 
-```js
-{{() => {
-  showAlert('User Updated');
-  closeModal('Modal1');
-}}}
-```
 
 
-<figure>
-  <img src="/img/trigger-multi-query-1.gif" style= {{width:"560px", height:"auto"}} alt="Setup Server-side Searching on Table"/>
-   <figcaption align = "center"><i></i></figcaption>
-</figure>
+
+<div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>
+  <iframe src="https://demo.arcade.software/aP6NLTwiJTsGCmhDhnQM?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: "0", left: "0", width: "92%", height: "92%", colorScheme: "light" }} title="Appsmith | Connect Data">
+  </iframe>
+</div>
+
+
 
 
 
 
-</dd>