fix: Update data in Modal (#1856)

## Checklist
I have:
- [ ] run the content through Grammarly
- [ ] linked to sample apps when relevant
- [ ] added the meta description for each page in the PR
- [ ] minimized the callouts and added only when necessary
- [ ] added the `queryString` parameter to the Tabs (if used)
- [ ] masked PII in images. For example, login credentials, account
details, and more
- [ ] added images only when necessary
- [ ] deleted the images that are no longer used for the updated pages
in the PR
- [ ] followed the image file naming convention while renaming or adding
new images. (Use lowercase letters, dashes between words, and be as
descriptive as possible)
- [ ] used the `<figure/>` tag instead of a markdown representation for
images
- [ ] added the `<figcaption/>` tag to add a caption to the image
- [ ] added the `alt` attribute in the `<img/>` tag
- [ ] verified and updated the cross-references or created redirect
rules for the changed or removed content
- [ ] reviewed and applied the style changes for UI formatting. For
example, Bold the UI elements(Buttons on screen) used in the doc.

website/docs/build-apps/how-to-guides/submit-form-data.md

@@ -1,78 +1,119 @@
 ---
 description: This page shows you how to display a master-detail form and update table data using a JSON form and Form widget.
 ---
-# Submit Form Data
+# Update Form data in Modal
 
-This page shows you how to display and submit data using [JSON Form](/reference/widgets/json-form) and [Form](/reference/widgets/form) widget.
+This page shows how to update table data using the Form and Modal widgets.
 
 
-## Using Form
+## Prerequisites
 
-Follow these steps to set up a Form widget and configure the query:
+A [Table widget](/reference/widgets/table#table-data-arrayobject) connected to a fetch query. To connect data to a table, see the [Bind Data to Widgets guide](/core-concepts/building-ui/dynamic-ui) guide.
 
-1. To allow users to submit their information, drag the relevant widgets into the Form widget (example: Text, Inputs, Select) and configure their properties.
 
 
-2. Create a query to either insert new data or update existing data using the [reference properties](/reference/widgets/form#reference-properties) of the Form widget.
+## Configure Form and Modal
+
+
+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.
+
+
+:::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) 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 **Default value** property using mustache syntax `{{}}`:
 
 <dd>
 
-*PostgreSQL Example*: 
+*Example:* To display the user's name, add the following code in the **Default value** property of the Input widget:
 
-```sql
-UPDATE public.users
-SET 
-  phone = {{Form1.data.PhoneInput1}},
-  email = {{Form1.data.Input1}}
-WHERE id = {{Form1.data.Textid}};
+```js
+{{Table1.triggeredRow.name}}
+// 'name' refers to the column name
 ```
 
-The above query updates the `phone` and `email` fields in the `users` table using the form data. It targets the user record with the provided `ID`.
+Learn more about the [triggered row](/reference/widgets/table#triggeredrow-object) property.
 
 
 </dd>
 
-3. Set the Submit Button's [**onClick**](/reference/widgets/button#onclick) event to execute the update query, and the **onSuccess** callback to trigger the fetch query that refreshes the data with the updated information.
+## Submit Form data
 
- <figure>
-  <img src="/img/refresh-after-update.gif" style= {{width:"810px", height:"auto"}} alt="Submit form data using Form"/>
-  <figcaption align = "center"><i>Submit form data using Form</i></figcaption>
-</figure>
+This section shows you how to set up Form validation and update Form data.
 
+1. To validate user inputs, use properties like Regex, Valid, and Required. The submit button remains disabled until all widgets meet the defined validation criteria. You can find these properties under the **Validations** group in the [Widget reference](/reference/widgets). 
 
-
-## Using JSON Form
-
-Follow these steps to set up a JSON Form and configure the query:
+<dd>
 
 
-1. To display data in JSON form, provide the data in structured JSON format or bind the query response in the [**Source Data**](/reference/widgets/json-form#source-data-json) property. 
+See [validation examples](/reference/widgets/input#regex-string) for the Input widget.
 
+</dd>
 
-2. Create a query to either insert new data or update existing data using the [formData](/reference/widgets/json-form#formdata-object) reference property.
 
+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>
 
-*PostgreSQL Example*: 
+*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
-UPDATE users
+-- For JSON Form: {{JSONForm1.formData.name}} 
+
+UPDATE public.users
 SET 
-  phone = {{JSONForm1.formData.phone}},
-  email = {{JSONForm1.formData.email}}
-WHERE id = {{JSONForm1.formData.id}};
+  phone = {{Form1.data.PhoneInput1}},
+  email = {{Form1.data.Input1}}
+  dob = {{DatePicker1.formattedDate}}, -- To get formatted Date
+  gender = {{ Form1.data.SelectGender }},
+  image = {{ Form1.data.InputImageURL }} -- To add image from Filepicker widget use: {FilePicker1.files[0].data}}
+WHERE id = {{Table1.triggeredRow.id}};
 ```
 
-The above query updates the `phone` and `email` fields in the `users` table using the JSON form data. It targets the user record with the provided `ID`.
+You can refer to the [datasource reference](/connect-data/reference) for specific instructions on setting up update query for your selected datasource.
 
 
 </dd>
 
-3. Set the [**onSubmit**](/reference/widgets/json-form#events) event to execute the update query, and the **onSuccess** callback to trigger the fetch query that refreshes the data with the updated information.
 
- <figure>
-  <img src="/img/json-update.png" style= {{width:"700px", height:"auto"}} alt="Submit form data using JSON Form"/>
-  <figcaption align = "center"><i>Submit form data using JSON Form</i></figcaption>
-</figure>
+3. Set the Submit Button's **onClick** event to execute the update query.
+
+
+##  Refresh Table and close Modal
+
+When data is updated in a datasource, the Table widget does not automatically reflect the changes. To update the Table data, follow these steps.
+
+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. 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.
+
+
+
+
+<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>
+
+
+
+
+
+
 

website/docs/reference/widgets/input.md

@@ -114,6 +114,65 @@ For instance, if you want to validate that the user enters a value in multiples
 .*[05]$
 ```
 
+*Examples:*
+
+**Email validation**
+
+To validate whether an entered email is correct, use the following regular expression code inside the [**Regex**](/reference/widgets/input#regex-string) property of an Input widget:
+
+
+
+```js
+//regex
+^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$
+```
+
+**Phone number validation**
+
+To get phone number in a specific format or length, you can use the following codes:
+
+*Example:* if you want to validate international phone numbers starting with a plus sign (+) and a total length between 6 and 14 digits, use the following code inside the **Regex** property:
+
+
+```js
+//regex
+^\+(?:[0-9]●?){6,14}[0-9]$
+```
+
+
+**Number validation**
+
+If you need to add number validation for fields like currency or prices, you can use the following regular expression code inside the **Regex** property of any Input widget:
+
+
+```js
+//Regex
+
+//Range Validation - 0 to 100:  
+^(0*100(\.0*)?)$|^([1-9]?[0-9](\.\d*)?)$
+
+//Positive Number Validation:  
+^[1-9][0-9]*$
+
+//Decimal Number Validation:  
+^-?\d+(\.\d{2})?$
+
+//Minimum and Maximum Value Validation(1000 and 10,000):
+Regex: ^(10000|[1-9][0-9]{3,4})$ 
+```
+
+**URL validation**
+
+This validation is used to ensure that URLs provided by users for files or images adhere to the required format.
+
+```js
+//Regex
+(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z0-9]{2,}(\.[a-zA-Z0-9]{2,})(\.[a-zA-Z0-9]{2,})?
+```
+
+
+
+
 </dd>
 
 #### Valid `boolean`
@@ -143,6 +202,20 @@ _Example:_
 
 Allows customization of the error message displayed when the user enters an incorrect value. By default, the input widget shows a generic `"invalid input"` message.
 
+*Example:*  If you want to add password validation, ensuring it is greater than 10 characters and contains at least one digit, you can use the following code in the **Error message** property.
+
+```js
+//Valid property
+{{Input1.text.length > 10 && /\d/.test(Input1.text) ? true : false}}
+
+
+//Error message property
+{{Input1.text.length > 10 || !/\d/.test(Input1.text) ? "Error: Length should be at least 10 characters and contain at least one digit" : ""}}
+```
+
+This code checks the length of Input is exactly 10 characters and if it contains at least one digit. If not, it returns the error message
+
+
 </dd>
 
 #### Min `number`

website/docs/reference/widgets/table/README.md

@@ -538,9 +538,17 @@ When a user interacts with an actionable item *(like a button)* in a row, `trigg
 *Example:*
 
 ```js
+//To access the entire triggered row:
 {{Table1.triggeredRow}}
+
+//To access a specific cell value, such as the email field:
+{{Table1.triggeredRow.email}}
 ```
 
+
+For example, when using Datepicker if the date is in `ISO` format and you want to display it in `DD/MM/YYYY` format, then you can achieve this by binding the Table data to the **Default date** and changing the display format through the **Date format** property.
+
+
 </dd>
 
 #### isVisible `boolean`

website/sidebars.js

@@ -344,7 +344,6 @@ const sidebars = {
             'core-concepts/building-ui/dynamic-ui/README',
             'build-apps/how-to-guides/Server-side-pagination-in-table',
             'reference/widgets/table/inline-editing',
-            'build-apps/how-to-guides/refresh-table-data',
             'build-apps/how-to-guides/Server-side-filtering-table',
             'build-apps/how-to-guides/Setup-Server-side-Searching-on-Table',
             'build-apps/how-to-guides/Filter-Table-Data-using-Datepicker',

website/vercel.json

@@ -1122,5 +1122,11 @@
       "source": "/core-concepts/writing-code/javascript-editor-beta/asynchronous-javascript-function-settings",
       "destination": "/core-concepts/writing-code/javascript-editor-beta"
     }
+    ,
+    {
+      "source": "/build-apps/how-to-guides/refresh-table-data",
+      "destination": "/build-apps/how-to-guides/submit-form-data#refresh-table-data-and-close-modal"
+    }
   ]
-}
+}
+