-
+
+
-4. Rename the default database name from **Untitled datasource 1** to `usersTutorialDB`. You may have to click the pencil icon next to the database name if it is not already selected.
-5. Enter the following details in the connection parameter fields:
- **Host Address**: `mockdb.internal.appsmith.com`
- **Port**: `5432`
- **Database Name**: `users`
- **Username**: `users`
- **Password**: `new-users-db-pass`
-6. Click the **Test Configuration** button to test the connection and ensure the database is valid.
-7. Click **Save** to create and save the database connection. You'll see the `usersTutorialDB` database page.
+1. Open your application and, from the sidebar, click the **Data** button. This section lists all the datasources configured in your app, where you can edit existing ones or add new datasources.
-## Query Data
+2. Click the **+** icon next to **Datasources in your workspace** to add a new datasource.
-
-
-
+3. You’ll now see a list of APIs, databases, and SaaS integrations you can connect to. For this tutorial, select the **Sample Users** database. This is a PostgreSQL database that contains user-related data, such as names, email addresses, and user IDs, which will be used to display data in the app. `UsersDB`
+
+4. After selecting Sample Users, a page opens showing the database schema *(structure of tables and columns)*, tables, and configuration details. Rename it to `UsersDB`.
-1. In the **Editor pane** click the **New Query/API** button and select the connected datasource. You will see the query editor with a default fetch query to pull ten records from the `usersTutorialDB` database table.
+6. Click **+ New Query** from the top-right corner. This opens a query editor where you can write SQL queries.
-2. Rename the query from **Query1** to `getUsers`. You may have to click the pencil icon if it is not already selected.
+7. Click on the three dots next to the query name in the left pane and select Rename. Rename the default query name `Query1` to `getUsers`.
-3. For this tutorial, modify the query as shown below to fetch the records in the ascending order of the `id` field.
+8. Update the query with the following to fetch records in ascending order of the `id` field:
+
+
```sql
SELECT * FROM public."users" ORDER BY id LIMIT 10;
```
-4. Click the **Run** button on the top right of the screen to execute the query and confirm that it returns data.
-
-5. Click the **Settings** tab. Switch on the **Run query on page load** option.
+
-You've created your first query to fetch the list of records in the database.
+9. Click the **Run** button on the top right of the screen to execute the query and confirm that it returns data.
-## Display data in Table
+10. Click the **UI** tab on the *Entity Explorer* to the left of the screen. The UI tab opens a list of available widgets in Appsmith, which can be used to display data and design the app.
-
-
-
+11. Click **+ New UI Element**. This displays a list of available widgets to choose from. Drag a **Table** widget and drop it onto the canvas to display the data in a structured format.
-1. Click the **UI** tab on the *Entity Explorer* to the left of the screen.
+12. When you add the Table widget, a *Property Pane* appears on the right. The Property Pane contains all the configurable settings for the widget, such as its name, datasource, appearance, and behavior. To rename the widget, edit the name at the top of the pane, changing it from `Table1` to `usersTable`.
-2. Click **+ New UI element** and drag a **Table** widget and drop it to the left of the canvas.
+14. In the Property Pane, click on the [**Table Data**](/reference/widgets/table#table-data-arrayobject) property and select the `getUsers` query to connect the Table to the data fetched by the query. The Table Data property allows you to bind your query or JS data to the Table widget.
-3. A *Property Pane* appears to the right of the screen, which contains all the properties of the widget. On the top of the property pane, click on the default name **Table1** and rename it to `usersTable`.
-
-4. Connect the Table to the query **getUsers** to display the data. Additionally, you can use JavaScript by clicking on **JS** to write bindings for the table data.
+15. Click on the **Deploy** button in the top-right corner. This allows you to publish your changes and make your app live, which you can then share with others.
-:::info
-The mustache template `{{}}` is used to write JS code inside widgets and queries on Appsmith.
+:::tip 🎉 Great job!
+You’ve successfully connected to a sample PostgreSQL database, fetched user details, and displayed them in a Table widget. With your app now live, you can share it with others and continue enhancing it by adding more data-driven features and interactivity.
:::
-You've displayed the results from the **getUsers** query on the Table widget.
## Next steps
-- [Lesson 2 - Work with data in UI](/getting-started/tutorials/the-basics/work-with-data-in-ui)
\ No newline at end of file
+
+- [Build UI Interactions](/getting-started/tutorials/the-basics/work-with-data-in-ui).
diff --git a/website/docs/getting-started/tutorials/the-basics/work-with-data-in-ui.md b/website/docs/getting-started/tutorials/the-basics/work-with-data-in-ui.md
index 3b6f54342c..21b87bf571 100644
--- a/website/docs/getting-started/tutorials/the-basics/work-with-data-in-ui.md
+++ b/website/docs/getting-started/tutorials/the-basics/work-with-data-in-ui.md
@@ -4,92 +4,120 @@ slug: /getting-started/tutorials/the-basics/work-with-data-in-ui
description: Interact with Data in UI
---
-# Lesson 2 - Work with Data in UI
+# Quickstart
-This tutorial takes you through the process of viewing and editing individual records via forms.
+In this tutorial, you’ll learn how to update database records directly from the UI using interactive widgets. You’ll create a form that allows users to modify their details and save the changes seamlessly.
-## View details for each record
+:::tip What will I learn? 📝
+By the end of this tutorial, you will learn to:
-
-
+- Bind widget data to a database.
+- Display and edit table data using a form.
+- Update user details from the UI and save changes to the database.
+- Trigger queries or JavaScript functions based on user actions.
+:::
+
+
+
+
-1. On the **UI** tab, click **+ New UI element** and drop a **Form** widget on the canvas to the right of the Table widget.
-2. Click the title **Form**. On the property pane to the right of the screen, in the **Text** property box, change the title from **Form** to `User Details`.
+1. Open your application and, from the Entity Explorer, click the **UI** tab. The UI tab opens a list of available widgets in Appsmith, which can be used to display data and design the app.
-3. Now add widgets on the Form to view user details.
- * For the user's name, drop an **Input** widget inside the Form.
- * On the property pane to the right, click on the default name **Input1** and rename it to `nameInput`.
- * In the **Text** property box, enter `Name`.
- * In the **Default Value** property box, type `{{usersTable.selectedRow.name}}`. This displays the user's name of the selected row on the **usersTable** Table widget.
+2. Click **+ New UI element** and drop a **Table** widget on the canvas.
-4. You also need to view the user's date of birth.
- * Drop a **Datepicker** widget inside the Form.
- * Rename the widget to `dobInput`.
- * In the **Text** property box, enter `DOB`.
- * Click the **JS** button next to the **Default Date** property to connect the Datepicker widget to the user's date of birth on the Table.
- * Type `{{usersTable.selectedRow.dob}}` in the **Default Date** property box.
- * In the **Date format** property, select the **LL** date format.
+3. Click **Connect Data** and select **Users** from the *Choose Datasource to Connect* option.
-5. And finally to view the user's photo, drop an **Image** widget inside the Form.
- * In the **Image** property box, type `{{usersTable.selectedRow.image}}`.
+4. Select `public.users` and set the `name` column as searchable to allow filtering.
+5. Click **+ New UI element** and drop a **Form** widget on the canvas to the right of the Table widget. The Form widget allows you to collect details from users, which can then be stored or used to update existing records in the database.
-🚩 You've completed binding the data to the widgets on the Form. Select the rows on the Table to view the corresponding user details on the Form.
+6. Rename the Form title to `User Details`.
-## Update records
+7. To display and edit user details, add an **Input** widget for the user's name, a **Datepicker** widget for the date of birth, and an **Image** widget for the profile photo inside the form.
-
-
-
+
-1. Select the **Queries** tab on the *Entity Explorer* to the screen's left.
+Configure the properties as shown below:
-2. Click the **+ New Query / API** button.
-3. Select **usersTutorialDB query** from the list of options.
+| **Widget** | **Name** | **Property** | **Value** | **Description** |
+|---------------|---------------|------------------|----------------------------------|---------------------|
+| **Input** | `nameInput` | Default Value | `{{usersTable.selectedRow.name}}` | Displays the user's name and allows editing. |
+| **Datepicker** | `dobInput` | Default Date | `{{usersTable.selectedRow.dob}}` | Displays the user's date of birth for selection and modification. |
+| | | Date Format | **LL** | Formats the date in a user-friendly format. |
+| **Image** | `profile` | Image Source | `{{usersTable.selectedRow.image}}` | Displays the user's profile photo. |
-3. Rename the query to `updateUsers`. Delete the default fetch query template.
+With `{{}}` (mustache binding), you can dynamically display and update data from various sources, such as widgets, queries, and APIs, in other components.
-4. Paste the below SQL update command in the query editor to update the `users` table in the database with the details modified in the Form.
+- `usersTable`: The name of the Table widget from which we want to fetch the user's data.
+- `selectedRow`: The reference property of the Table widget that provides access to the currently selected row's data in `usersTable`.
+- The `name`, `dob`, and `image` are the selected user's properties retrieved from `selectedRow`.
- ```sql
- UPDATE public."users"
- SET name = {{nameInput.text}},
- dob = {{dobInput.selectedDate}}
- WHERE id = {{usersTable.selectedRow.id}}
- ```
-### Trigger update on button click
-
-
-
+
+
+
+8. Select the *Queries* tab on the Entity Explorer on the left side of the screen, then click the **+ New Query / API** button to create a new query.
+
+9. Select the Users datasource from the list of options, then rename the query to `updateUsers`.
+
+10. Update the SQL command in the query editor to update the users table with the details edited in the Form.
+
+
+
+```sql
+UPDATE public."users"
+SET name = {{nameInput.text}},
+ dob = {{dobInput.selectedDate}}
+WHERE id = {{usersTable.selectedRow.id}};
+```
+
+In this SQL command, we are dynamically updating the users table with the edited values from the form. The bindings inside `{{ }}` reference the widget properties:
+
+- `{{nameInput.text}}` retrieves the updated name from the Input widget.
+- `{{dobInput.selectedDate}}` retrieves the selected date from the Datepicker widget.
+- `WHERE id = {{usersTable.selectedRow.id}}` ensures only the selected user’s record is updated.
+
+
+
+11. Navigate back to the canvas by selecting the **UI** tab in the Entity Explorer.
+
+
+12. To update the database when the Submit button is clicked:
+
+
+
+- Select the default Submit button on the form and rename it to Update.
+- In the **onClick** event, set the action to Execute the `updateUsers`. This runs the query to update the database with the modified details.
+- In the **onSuccess** callback, set the action to Execute a query > `getUsers`. This refreshes the table data to reflect the updated user details.
+
+Now, select a row in the table widget to display the user's details in the form. After making the necessary updates, click Update to save the changes to the database and refresh the table with the updated data.
+
+
+
+
+
+
-1. Go back to the canvas by clicking on the **UI** tab on the *Entity Explorer*.
-2. To connect the **updateUsers** query to a button, select the default **Submit** button on the Form.
- * On the property pane to the right of the screen, in the **Label** property box, change the label to `Update`.
- * Click the **+** icon next to the **onClick** event.
- * In the **Action** list, select **Execute a query > updateUsers** to run the query on button click.
- * Click the **+** icon next to the **onSuccess** callback.
- * Select **Execute a query > getUsers**.
-
- The button is now configured to execute the **updateUsers** query to save any modified user details on the Form and to refresh the Table widget with the updated information.
-3. Select the first row on the Table. Go ahead and modify the user's name on the Form and test the **Update** button to see if the update worked.
:::caution
The databases used in tutorials are public and shared by all Appsmith users, so ensure that you don't input confidential information during testing. The databases are automatically reset every day, so any updates made to these databases are temporary.
:::
-## Next steps
-- [Lesson 3 - Now Code It](/getting-started/tutorials/the-basics/write-js-code)
-
-
diff --git a/website/docs/getting-started/tutorials/the-basics/write-js-code.md b/website/docs/getting-started/tutorials/the-basics/write-js-code.md
index c31fe8c625..e50f0f593a 100644
--- a/website/docs/getting-started/tutorials/the-basics/write-js-code.md
+++ b/website/docs/getting-started/tutorials/the-basics/write-js-code.md
@@ -4,7 +4,7 @@ slug: /getting-started/tutorials/the-basics/write-js-code
description: Now Code It
---
-# Lesson 3 - Now Code It
+# Lesson 3 - Write Code
This tutorial takes you through the process of writing JavaScript code in Appsmith. In the earlier lessons, you have written JS code inside the mustache syntax `{{}}` which is great for single-line coding. If you want to write more complex code, you have to use JS Objects.
@@ -15,11 +15,17 @@ This tutorial takes you through the process of writing JavaScript code in Appsmi
-1. Select the **JS** tab on the *Entity Explorer* to the screen's left.
-2. Click the **+ New JS object** to create new JS Object.
+Before proceeding, make sure you have completed Lesson 1 and Lesson 2, where you learned how to display, manage, and update data.
-3. Delete everything within `export default {}`. Instead, paste the following function inside the braces.
+
+
+1. Open your application and, from the Entity Explorer, click the JS tab, which allows you to create and manage JavaScript functions.
+
+2. Click the **+ New JS Object** to create a new `JSObject1`, where you can define variables, write functions, and reuse logic across your application.
+
+
+3. Delete the existing code inside `export default {}` and replace it with the following function, which returns a color code based on gender. This function will be used to dynamically change the background color of table cells in the next steps.
```javascript
getBackground: (gender) => {
@@ -30,13 +36,17 @@ This tutorial takes you through the process of writing JavaScript code in Appsmi
```
This function returns a different hex color code based on gender.
-4. Go back to the canvas by clicking the page name or the **UI** tab.
+4. Navigate back to the canvas by selecting the **UI** tab in the Entity Explorer.
5. Select the `usersTable` Table.
-6. Click the gear icon ⚙️ next to the **gender** column. Click on the **Style** tab.
+6. Open the column settings by clicking the **⚙️** (gear icon) next to the gender column, then navigate to the **Style** tab.
-7. In the **Cell Background** property, click the **JS** button and paste the following code snippet to call the function to return the color code based on the gender of the user in the current table row.
+7. In the **Cell Background** property, click the **JS** button to enable JavaScript execution, then paste the following code snippet. This will dynamically set the background color of each row based on the user’s gender.
+
+
+
+The function inside `JSObject1` takes the gender value from each row and returns a corresponding color code, which is applied to the background.
```js
{{JSObject1.getBackground(currentRow.gender)}}
@@ -44,6 +54,10 @@ This tutorial takes you through the process of writing JavaScript code in Appsmi
You will see the cell color change based on the value in the gender column.
+
+
+
+
## Use built-in objects and functions
Appsmith provides global objects and functions within its framework to help build your apps.
diff --git a/website/sidebars.js b/website/sidebars.js
index 341876fb14..f603e824ad 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -8,16 +8,17 @@ const sidebars = {
label: 'Get Started',
items: [
'intro',
- {
- type: 'category',
- label: 'Tutorial',
- link: { type: 'doc', id: 'getting-started/tutorials/start-building' },
- items: [
- 'getting-started/tutorials/the-basics/connect-query-display-data',
- 'getting-started/tutorials/the-basics/work-with-data-in-ui',
- 'getting-started/tutorials/the-basics/write-js-code',
- ],
- }
+ 'getting-started/tutorials/build-your-first-app',
+ //{
+ //type: 'category',
+ //label: 'Tutorial',
+ //link: { type: 'doc', id: 'getting-started/tutorials/start-building' },
+ //items: [
+ // 'getting-started/tutorials/the-basics/connect-query-display-data',
+ // 'getting-started/tutorials/the-basics/work-with-data-in-ui',
+ //'getting-started/tutorials/the-basics/write-js-code',
+ //],
+ //}
],
}, //getting started section end
//self-hosting starts
@@ -375,6 +376,7 @@ const sidebars = {
label: 'Build Apps',
items: [
'build-apps/overview',
+ 'getting-started/tutorials/the-basics/work-with-data-in-ui',
{
type: 'category',
collapsed: true,