From 62f30d8acb190ecbb76714a1d7e278298e7e2704 Mon Sep 17 00:00:00 2001 From: harshilp24 Date: Wed, 15 Jan 2025 20:19:14 +0530 Subject: [PATCH 01/17] .. --- .../the-basics/connect-query-display-data.md | 32 +++++++++++++------ 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md b/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md index 5c1f887924..a027452987 100644 --- a/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md +++ b/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md @@ -4,9 +4,22 @@ slug: /getting-started/tutorials/the-basics/connect-query-display-data description: Connect a datasource on Appsmith --- -# Lesson 1 - Bring in Data +# Connect and Display Data -This tutorial takes you through the process of connecting a datasource and querying data on Appsmith. +In this tutorial, you learn how to connect a database, fetch data using SQL queries, and display it in a table widget. + +:::tip What will I learn? đź“ť +By the end of this tutorial, you will learn: + +- Connect your app to a PostgreSQL database. +- Fetch data using SQL queries. +- Display data in a Table widget. +::: + +
+ +
## Connect datasource @@ -16,20 +29,20 @@ This tutorial takes you through the process of connecting a datasource and query 3. Select **PostgreSQL** under the **Databases** section. This opens the page where you can configure the fields to connect to your PostgreSQL database. -
- -
- 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:
+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. @@ -79,4 +92,5 @@ The mustache template `{{}}` is used to write JS code inside widgets and queries 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 + +You have successfully connected to a datasource, fetched data, and displayed it in a table widget. To enhance user interactions and edit data, proceed to Part 2: [Build UI Interactions](/getting-started/tutorials/the-basics/work-with-data-in-ui). From 0dfa25c787eaaa57c3f1aafe003b06177be56f7c Mon Sep 17 00:00:00 2001 From: harshilp24 Date: Thu, 16 Jan 2025 23:45:20 +0530 Subject: [PATCH 02/17] ... --- .../the-basics/connect-query-display-data.md | 65 +++++-------------- 1 file changed, 16 insertions(+), 49 deletions(-) diff --git a/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md b/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md index a027452987..924cb86add 100644 --- a/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md +++ b/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md @@ -17,80 +17,47 @@ By the end of this tutorial, you will learn: :::
-
-## Connect datasource + 1. In your application, go to the sidebar and click the **Data** button. 2. Click the **+** icon next to **Datasources in your workspace** to add a new datasource. -3. Select **PostgreSQL** under the **Databases** section. This opens the page where you can configure the fields to connect to your PostgreSQL database. - -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. - -## Query Data +3. Select **Sample Users** under the **Databases** section. This opens a page where you can see multiple tables with different datasets. -
- -
+4. Click **+ New Query** from the top-right corner to open the query editor. -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. +5. Rename the query from `Query1` to `getUsers` by clicking the pencil icon next to the query name. -2. Rename the query from **Query1** to `getUsers`. You may have to click the pencil icon if it is not already selected. +6. Update the query with the following to fetch records in ascending order of the `id` field: -3. For this tutorial, modify the query as shown below to fetch the records in the 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. - -## Display data in Table +
-
- -
+7. Click the **Run** button on the top right of the screen to execute the query and confirm that it returns data. -1. Click the **UI** tab on the *Entity Explorer* to the left of the screen. +8. Click the **UI** tab on the *Entity Explorer* to the left of the screen. -2. Click **+ New UI element** and drag a **Table** widget and drop it to the left of the canvas. +9. Click **+ New UI element** and drag a **Table** widget and drop it to the left of the canvas. -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`. +9. 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. +10. 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. -:::info -The mustache template `{{}}` is used to write JS code inside widgets and queries on Appsmith. +:::tip 🎉 Great job! +You’ve successfully connected to the database, fetched user data, and set up your first query to display the data in your app. ::: -You've displayed the results from the **getUsers** query on the Table widget. ## Next steps -You have successfully connected to a datasource, fetched data, and displayed it in a table widget. To enhance user interactions and edit data, proceed to Part 2: [Build UI Interactions](/getting-started/tutorials/the-basics/work-with-data-in-ui). +- [Build UI Interactions](/getting-started/tutorials/the-basics/work-with-data-in-ui). From e32ed2976118ef4f336583751c3da20055718f53 Mon Sep 17 00:00:00 2001 From: harshilp24 Date: Fri, 24 Jan 2025 12:24:35 +0530 Subject: [PATCH 03/17] .. --- .../the-basics/connect-query-display-data.md | 31 ++++++++++++------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md b/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md index 924cb86add..98b48d9b0e 100644 --- a/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md +++ b/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md @@ -6,7 +6,10 @@ description: Connect a datasource on Appsmith # Connect and Display Data -In this tutorial, you learn how to connect a database, fetch data using SQL queries, and display it in a table widget. +In this tutorial, we’ll walk you through the essential steps of connecting your app to a database, retrieving real-time data, and displaying it in an organized table widget. This will set the foundation for creating dynamic and interactive applications that can interact with your backend data. Let’s dive in and get your app up and running with live data! + + + :::tip What will I learn? 📝 By the end of this tutorial, you will learn: @@ -23,17 +26,19 @@ By the end of this tutorial, you will learn: -1. In your application, go to the sidebar and click the **Data** button. +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. 2. Click the **+** icon next to **Datasources in your workspace** to add a new datasource. -3. Select **Sample Users** under the **Databases** section. This opens a page where you can see multiple tables with different datasets. +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 we’ll use to display in the app. -4. Click **+ New Query** from the top-right corner to open the query editor. +4. After selecting Sample Users, a page opens showing the database schema *(structure of tables and columns)*, tables, and configuration details -5. Rename the query from `Query1` to `getUsers` by clicking the pencil icon next to the query name. +5. Click **+ New Query** from the top-right corner. This opens a query editor where you can write SQL queries. -6. Update the query with the following to fetch records in ascending order of the `id` field: +6. Rename the default query name `Query1` to `getUsers`. Click on the three dots next to the query name in the left pane and select Rename. + +7. Update the query with the following to fetch records in ascending order of the `id` field:
@@ -43,18 +48,20 @@ By the end of this tutorial, you will learn:
-7. Click the **Run** button on the top right of the screen to execute the query and confirm that it returns data. +8. Click the **Run** button on the top right of the screen to execute the query and confirm that it returns data. + +9. Click the **UI** tab on the *Entity Explorer* to the left of the screen. The UI section allows you to view and edit existing widgets, or add new widgets to your app. -8. Click the **UI** tab on the *Entity Explorer* to the left of the screen. +10. 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. -9. Click **+ New UI element** and drag a **Table** widget and drop it to the left of the canvas. +11. 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`. -9. 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`. +12. In the Property Pane, click on the **Table Data** property and select the `getUsers` query to connect the Table to the data fetched by the query. Additionally, you can use JavaScript in the JS section if you want to manipulate or bind the data before displaying it in the Table. -10. 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. +13. 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. :::tip 🎉 Great job! -You’ve successfully connected to the database, fetched user data, and set up your first query to display the data in your app. +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. ::: From 736bd0cf8420d356cf939df575966b958071f140 Mon Sep 17 00:00:00 2001 From: harshilp24 Date: Fri, 24 Jan 2025 14:42:05 +0530 Subject: [PATCH 04/17] .. --- .../the-basics/connect-query-display-data.md | 28 ++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md b/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md index 98b48d9b0e..8f688672ad 100644 --- a/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md +++ b/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md @@ -6,13 +6,11 @@ description: Connect a datasource on Appsmith # Connect and Display Data -In this tutorial, we’ll walk you through the essential steps of connecting your app to a database, retrieving real-time data, and displaying it in an organized table widget. This will set the foundation for creating dynamic and interactive applications that can interact with your backend data. Let’s dive in and get your app up and running with live data! - - +In this tutorial, we’ll walk you through the essential steps of connecting your app to a database, retrieving data, and displaying it in an Table widget. This will set the foundation for creating dynamic and interactive applications that can interact with your backend data. :::tip What will I learn? 📝 -By the end of this tutorial, you will learn: +By the end of this tutorial, you will learn to: - Connect your app to a PostgreSQL database. - Fetch data using SQL queries. @@ -30,15 +28,13 @@ By the end of this tutorial, you will learn: 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 we’ll use to display in the app. - -4. After selecting Sample Users, a page opens showing the database schema *(structure of tables and columns)*, tables, and configuration details +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. -5. Click **+ New Query** from the top-right corner. This opens a query editor where you can write SQL queries. +4. After selecting Sample Users, a page opens showing the database schema *(structure of tables and columns)*, tables, and configuration details. Click **+ New Query** from the top-right corner. This opens a query editor where you can write SQL queries. -6. Rename the default query name `Query1` to `getUsers`. Click on the three dots next to the query name in the left pane and select Rename. +5. 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`. -7. Update the query with the following to fetch records in ascending order of the `id` field: +6. Update the query with the following to fetch records in ascending order of the `id` field:
@@ -48,17 +44,17 @@ By the end of this tutorial, you will learn:
-8. Click the **Run** button on the top right of the screen to execute the query and confirm that it returns data. +7. Click the **Run** button on the top right of the screen to execute the query and confirm that it returns data. -9. Click the **UI** tab on the *Entity Explorer* to the left of the screen. The UI section allows you to view and edit existing widgets, or add new widgets to your app. +8. 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. -10. 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. +9. 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. -11. 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`. +10. 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`. -12. In the Property Pane, click on the **Table Data** property and select the `getUsers` query to connect the Table to the data fetched by the query. Additionally, you can use JavaScript in the JS section if you want to manipulate or bind the data before displaying it in the Table. +11. 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. -13. 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. +12. 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. :::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. From cf943221d0768b213b1881779fb6168151ef11c8 Mon Sep 17 00:00:00 2001 From: harshilp24 Date: Fri, 24 Jan 2025 14:45:49 +0530 Subject: [PATCH 05/17] .. --- .../tutorials/the-basics/connect-query-display-data.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md b/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md index 8f688672ad..665e92c834 100644 --- a/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md +++ b/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md @@ -6,8 +6,7 @@ description: Connect a datasource on Appsmith # Connect and Display Data -In this tutorial, we’ll walk you through the essential steps of connecting your app to a database, retrieving data, and displaying it in an Table widget. This will set the foundation for creating dynamic and interactive applications that can interact with your backend data. - +In this tutorial, you will learn how to connect your app to a database, fetch data, and display it using a Table widget. By following these steps, you’ll gain a solid understanding of Appsmith’s core features, enabling you to build dynamic, data-driven applications. :::tip What will I learn? 📝 By the end of this tutorial, you will learn to: From c33d2d145d6a831c8fd366cb0f8820ff7ac58114 Mon Sep 17 00:00:00 2001 From: harshilp24 Date: Wed, 19 Feb 2025 19:49:20 +0530 Subject: [PATCH 06/17] ... --- .../the-basics/work-with-data-in-ui.md | 125 +++++++++++------- 1 file changed, 74 insertions(+), 51 deletions(-) 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..c81f728a24 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,11 +4,18 @@ slug: /getting-started/tutorials/the-basics/work-with-data-in-ui description: Interact with Data in UI --- -# Lesson 2 - Work with Data in UI +# Work with Data in UI -This tutorial takes you through the process of viewing and editing individual records via forms. +In this lesson, you will learn how to display, update, and manage data. You will connect a table to a database, display user details in a form, and use the form to update user details directly from the UI. -## View details for each record +:::tip What will I learn? 📝 +By the end of this tutorial, you will learn to: + +- Connect UI widgets to a database. +- Display and edit user details using a form. +- Update user details from the UI and save changes to the database. +- Trigger queries or JavaScript functions based on user actions. +:::
@@ -16,74 +23,90 @@ This tutorial takes you through the process of viewing and editing individual re
-1. On the **UI** tab, click **+ New UI element** and drop a **Form** widget on the canvas to the right of the Table widget. +Before proceeding, ensure that you have completed [Lesson 1: Connect and Display Data](/getting-started/tutorials/the-basics/connect-query-display-data), where you will learn how to connect your app to a database, fetch data, and display it using a 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 **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. -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. Rename the Form title to `User Details`. -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. Now, let's add different widgets inside the form to display and edit user details, including the user's name, date of birth, and photo. +
-đźš© 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. +By doing this, whenever a row in the usersTable is selected, the corresponding user details will be displayed in the form. This allows you to view and update user information directly. -## Update records +#### User's Name -
- -
+To display and edit the user's name: -1. Select the **Queries** tab on the *Entity Explorer* to the screen's left. +* Drop an **Input** widget inside the form and rename it to `nameInput`. +* In the **Text** property box, enter `Name`. This serves as a label for the input field. +* 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 the **+ New Query / API** button. +#### User's Date of Birth -3. Select **usersTutorialDB query** from the list of options. +* Drop an **Datepicker** widget inside the form and rename it 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. +* Add `{{usersTable.selectedRow.dob}}` in the **Default Date** property box. +* In the **Date format** property, select the **LL** date format. -3. Rename the query to `updateUsers`. Delete the default fetch query template. +#### User's Photo -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. +* Drop an **Image** widget inside the form. +* In the **Image** property box, add `{{usersTable.selectedRow.image}}`. - ```sql - UPDATE public."users" - SET name = {{nameInput.text}}, - dob = {{dobInput.selectedDate}} - WHERE id = {{usersTable.selectedRow.id}} - ``` +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. +
+ + +5. 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. + +6. Select the Users datasource from the list of options, then rename the query to `updateUsers`. + +7. 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}} +``` + +
+ +8. Navigate back to the canvas by selecting the **UI** tab in the Entity Explorer. + + +9. 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. + + + + + + + + + +
-### Trigger update on button click -
- -
-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. From c43ca0c42d61c0e3e6ecdbea565d6bffb73ca0ab Mon Sep 17 00:00:00 2001 From: harshilp24 Date: Wed, 19 Feb 2025 19:59:24 +0530 Subject: [PATCH 07/17] ... --- .../tutorials/the-basics/work-with-data-in-ui.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 c81f728a24..080458e735 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 @@ -19,7 +19,7 @@ By the end of this tutorial, you will learn to:
-
From 23c2f766be8a5b3565d56475ce7f9ae4b367c819 Mon Sep 17 00:00:00 2001 From: harshilp24 Date: Wed, 19 Feb 2025 20:01:01 +0530 Subject: [PATCH 08/17] ... --- .../tutorials/the-basics/work-with-data-in-ui.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 080458e735..465b1f9835 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 @@ -73,9 +73,9 @@ You've completed binding the data to the widgets on the Form. Select the rows on ```sql UPDATE public."users" -SET name = {{nameInput.text}}, -dob = {{dobInput.selectedDate}} -WHERE id = {{usersTable.selectedRow.id}} +SET name = {{nameInput.text}}, + dob = {{dobInput.selectedDate}} +WHERE id = {{usersTable.selectedRow.id}}; ``` From 042965734bcab2a9414a80eb5dd2f0f7cc8faed1 Mon Sep 17 00:00:00 2001 From: harshilp24 Date: Thu, 20 Feb 2025 11:10:59 +0530 Subject: [PATCH 09/17] ... --- .../the-basics/connect-query-display-data.md | 17 +++++-- .../the-basics/work-with-data-in-ui.md | 48 +++++++++---------- 2 files changed, 37 insertions(+), 28 deletions(-) diff --git a/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md b/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md index 665e92c834..c886c2fe0c 100644 --- a/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md +++ b/website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md @@ -16,13 +16,24 @@ By the end of this tutorial, you will learn to: - Display data in a Table widget. ::: -
- + +
+ +
+
-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. From 9b6e8d66ab2e1581e5dd0104d0e6960de981acfd Mon Sep 17 00:00:00 2001 From: harshilp24 Date: Thu, 27 Feb 2025 23:43:37 +0530 Subject: [PATCH 11/17] .. --- .../tutorials/the-basics/work-with-data-in-ui.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) 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 e8d808329f..7be666f5c2 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 @@ -57,6 +57,14 @@ Configure the properties as shown below: | | | Date Format | **LL** | Formats the date in a user-friendly format. | | **Image** | `profile` | Image Source | `{{usersTable.selectedRow.image}}` | Displays the user's profile photo. | +With `{{}}` (mustache binding), you can dynamically display and update data from various sources, such as widgets, queries, and APIs, in other components. + +- `usersTable`: The name of the Table widget from which we want to fetch the selected 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`. + + + @@ -76,6 +84,12 @@ SET name = {{nameInput.text}}, 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}}` pulls 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. + 8. Navigate back to the canvas by selecting the **UI** tab in the Entity Explorer. @@ -87,7 +101,7 @@ WHERE id = {{usersTable.selectedRow.id}}; - 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. +- 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. From 7f26cd3131308972bd3962d94981514c3754fa64 Mon Sep 17 00:00:00 2001 From: harshilp24 Date: Fri, 28 Feb 2025 00:05:31 +0530 Subject: [PATCH 12/17] ... --- .../tutorials/the-basics/work-with-data-in-ui.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) 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 7be666f5c2..1935a08d16 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 @@ -6,13 +6,15 @@ description: Interact with Data in UI # Work with Data in UI -In this lesson, you will learn how to display, update, and manage data. You will connect a table to a database, display user details in a form, and use the form to update user details directly from the UI. +In the previous lesson, we learned how to connect a database and display data in a Table widget. + +Now, in this lesson, we will focus on updating data directly from the UI. Using widgets like Input, Datepicker, and Button, we will update user details and save the changes to the database. :::tip What will I learn? 📝 By the end of this tutorial, you will learn to: -- Connect UI widgets to a database. -- Display and edit user details using a form. +- 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. ::: @@ -59,7 +61,7 @@ Configure the properties as shown below: With `{{}}` (mustache binding), you can dynamically display and update data from various sources, such as widgets, queries, and APIs, in other components. -- `usersTable`: The name of the Table widget from which we want to fetch the selected user's data. +- `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`. From 9e14449ed93c8263ef842c0e5454bab34ab43714 Mon Sep 17 00:00:00 2001 From: harshilp24 Date: Fri, 28 Feb 2025 09:55:50 +0530 Subject: [PATCH 13/17] .. --- .../tutorials/the-basics/work-with-data-in-ui.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 1935a08d16..d7881b8ebe 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 @@ -86,9 +86,9 @@ SET name = {{nameInput.text}}, 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: +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}}` pulls the updated name from the Input widget. +- `{{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. From e6f91b1c32cd9944869436683a8d3ae40e9278f2 Mon Sep 17 00:00:00 2001 From: harshilp24 Date: Mon, 3 Mar 2025 15:00:46 +0530 Subject: [PATCH 14/17] Build Your First App - start --- .../tutorials/build-your-first-app.md | 73 +++++++++++++++++++ .../the-basics/connect-query-display-data.md | 22 +++--- website/sidebars.js | 21 +++--- 3 files changed, 96 insertions(+), 20 deletions(-) create mode 100644 website/docs/getting-started/tutorials/build-your-first-app.md diff --git a/website/docs/getting-started/tutorials/build-your-first-app.md b/website/docs/getting-started/tutorials/build-your-first-app.md new file mode 100644 index 0000000000..2a2991eaaf --- /dev/null +++ b/website/docs/getting-started/tutorials/build-your-first-app.md @@ -0,0 +1,73 @@ +# Build Your First App + +Appsmith is a low-code platform that lets you connect to databases, create dynamic UIs, and build internal tools effortlessly. In this tutorial, you'll learn how to: + +In this tutorial, you will learn how to connect your app to a database, fetch data, and display it using a Table widget. By following these steps, you’ll gain a solid understanding of Appsmith’s core features, enabling you to build dynamic, data-driven applications. + +:::tip What will I learn? 📝 +By the end of this tutorial, you will learn to: + +- Connect your app to a PostgreSQL database. +- Fetch data using SQL queries. +- Display data in a Table widget. +::: + + +
+