Skip to content

Commit

Permalink
...
Browse files Browse the repository at this point in the history
  • Loading branch information
@harshilp24
harshilp24 committed Feb 1, 2024
1 parent 971ec8a commit f4c1715
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 16 deletions.
18 changes: 9 additions & 9 deletions website/docs/getting-started/tutorials/the-basics/connect-query-display-data.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>
<iframe src="https://demo.arcade.software/GgSWpg6kxtSPu6G9FgHc?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: "0", left: "0", width: "92%", height: "100%", colorScheme: "light" }} title="User Management | Connect Datasource">
<iframe src="https://demo.arcade.software/ZxulwwwVawWob7PKKg14?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>

Expand All @@ -36,12 +36,13 @@ This tutorial takes you through the process of connecting a datasource and query

## Query Data


<div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>
<iframe src="https://demo.arcade.software/F5WhfQJHYnvvYxd7SitO?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: "0", left: "0", width: "92%", height: "92%", colorScheme: "light" }} title="User Management | Query Data">
<iframe src="https://demo.arcade.software/MM3BJkA2TOWlfO5BidcE?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>

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.

Expand All @@ -59,21 +60,20 @@ You've created your first query to fetch the list of records in the database.

## Display data in Table


<div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>
<iframe src="https://demo.arcade.software/epzTz95scUzG574Kzeq5?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: "0", left: "0", width: "92%", height: "92%", colorScheme: "light" }} title="User Management | Display Data">
<iframe src="https://demo.arcade.software/Zi4Miio6MS4RDYeV4heb?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: "0", left: "0", width: "92%", height: "92%", colorScheme: "light" }} title="User Management | Display Data">
</iframe>
</div>

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.
:::
Expand Down
13 changes: 8 additions & 5 deletions website/docs/getting-started/tutorials/the-basics/work-with-data-in-ui.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,24 @@ This tutorial takes you through the process of viewing and editing individual re

## View details for each record


<div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>
<iframe src="https://demo.arcade.software/aAJdkemYDxficMkpsmCK?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: "0", left: "0", width: "92%", height: "92%", colorScheme: "light" }} title="User Management | View Details in Form">
<iframe src="https://demo.arcade.software/NrxLsXWwZvT7dRLX0ahx?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>

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.
Expand Down Expand Up @@ -63,7 +66,7 @@ This tutorial takes you through the process of viewing and editing individual re
### Trigger update on button click

<div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>
<iframe src="https://demo.arcade.software/Is54jOpZXtoGPUCEEFW5?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: "0", left: "0", width: "92%", height: "92%", colorScheme: "light" }} title="User Management | Run Query">
<iframe src="https://demo.arcade.software/Is54jOpZXtoGPUCEEFW5?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>

Expand Down
4 changes: 2 additions & 2 deletions website/docs/getting-started/tutorials/the-basics/write-js-code.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ This tutorial takes you through the process of writing JavaScript code in Appsmi
## Write JS functions

<div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>
<iframe src="https://demo.arcade.software/mp0l5PT6JndQqzxWAk0X?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: "0", left: "0", width: "92%", height: "92%", colorScheme: "light" }} title="User Management | Create JS Object">
<iframe src="https://demo.arcade.software/mp0l5PT6JndQqzxWAk0X?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>

Expand Down Expand Up @@ -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.

<div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>
<iframe src="https://demo.arcade.software/5lOBkGnAvnfbBFsKpC4h?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: "0", left: "0", width: "92%", height: "92%", colorScheme: "light" }} title="User Management | Global Objects and Functions">
<iframe src="https://demo.arcade.software/5lOBkGnAvnfbBFsKpC4h?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>

Expand Down

0 comments on commit f4c1715

Please sign in to comment.