From f4c17157293f063492d4686584945eea228bc9bb Mon Sep 17 00:00:00 2001 From: harshilp24 Date: Thu, 1 Feb 2024 14:32:08 +0530 Subject: [PATCH] ... --- .../the-basics/connect-query-display-data.md | 18 +++++++++--------- .../the-basics/work-with-data-in-ui.md | 13 ++++++++----- .../tutorials/the-basics/write-js-code.md | 4 ++-- 3 files changed, 19 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 454291cab9..91e14bc4e4 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,7 +17,7 @@ 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.
-
@@ -36,12 +36,13 @@ This tutorial takes you through the process of connecting a datasource and query ## Query Data +
-
-1. Click the **New Query/API** button and select your datasource. You will see the query editor with a default fetch query to pull ten records from the `usersTutorialDB` database table. +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. 2. Rename the query from **Query1** to `getUsers`. You may have to click the pencil icon if it is not already selected. @@ -59,21 +60,20 @@ You've created your first query to fetch the list of records in the database. ## Display data in Table +
-
1. Click the **UI** tab on the *Entity Explorer* to the left of the screen. -2. Drag a **Table** widget and drop it to the left of the canvas. +2. Click **+ New Widget** 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`. -4. In the **Table Data** property, click the **JS** button next to it. - -5. Connect the Table to the query **getUsers** to display the data. - +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. + :::info The mustache template `{{}}` is used to write JS code inside widgets and queries on Appsmith. ::: 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 7e342365bb..8f82fa9856 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 @@ -10,21 +10,24 @@ This tutorial takes you through the process of viewing and editing individual re ## View details for each record +
-
-1. From the **Widgets** tab, drag and drop a **Form** widget on the canvas to the right of the Table widget. +1. On the **UI** tab, click **+ New Widget** 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`. -3. Now add widgets on the Form to view user details. For the user's name, drop an **Input** widget inside the Form. +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. -4. You also need to view the user's date of birth. Drop a **Datepicker** widget inside the Form. +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. @@ -63,7 +66,7 @@ This tutorial takes you through the process of viewing and editing individual re ### Trigger update on button click
-
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 ea8573f6fc..c31fe8c625 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 @@ -11,7 +11,7 @@ This tutorial takes you through the process of writing JavaScript code in Appsmi ## Write JS functions
-
@@ -49,7 +49,7 @@ This tutorial takes you through the process of writing JavaScript code in Appsmi Appsmith provides global objects and functions within its framework to help build your apps.
-