Skip to content

Commit

Permalink
restructure tooljet db docs (#9590)
Browse files Browse the repository at this point in the history
  • Loading branch information
karan-rathod-316 committed May 3, 2024
1 parent 8de4494 commit a245d1d
Show file tree
Hide file tree
Showing 4 changed files with 225 additions and 221 deletions.
Original file line number Diff line number Diff line change
@@ -1,104 +1,9 @@
---
id: tooljet-database
title: ToolJet Database
id: database-editor
title: Database Editor
---

Use the ToolJet-hosted database to build apps faster, and manage your data with ease. ToolJet database require no setup and give you a powerful user interface for managing your data.

<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/tjdb.png" alt="ToolJet database" />
</div>

<div style={{paddingTop:'24px', paddingBottom:'24px'}}>

## Enabling the ToolJet Database for your instance

Requires:
- PostgREST server
- Additional configuration for ToolJet server

This feature is only enabled if [`ENABLE_TOOLJET_DB`](/docs/setup/env-vars#enable-tooljet-database--optional-) is set to `true`.

<div style={{paddingTop:'24px', paddingBottom:'24px'}}>

### PostgREST Server

PostgREST is a standalone web server that turns your PostgreSQL database directly into queryable RESTful APIs which is utilized for Tooljet Database. This server only talks with ToolJet server and therefore does not have to be publicly exposed.

:::tip
If you have openssl installed, you can run the following command `openssl rand -hex 32` to generate the value for `PGRST_JWT_SECRET`.

If this parameter is not specified then PostgREST refuses authentication requests.
:::

| <div style={{ width:"100px"}}> Variable </div> | <div style={{ width:"100px"}}> Description </div> |
| ------------------ | ----------------------------------------------- |
| PGRST_JWT_SECRET | JWT token client provided for authentication |
| PGRST_DB_URI | database connection string for tooljet database |
| PGRST_LOG_LEVEL | `info` |

:::info
Please make sure that DB_URI is given in the format `postgres://[USERNAME]:[PASSWORD]@[HOST]:[PORT]/[DATABASE]`
:::

</div>

#### Additional ToolJet server configuration


| <div style={{ width:"100px"}}> Variable </div> | <div style={{ width:"100px"}}> Description </div> |
| ------------------ | -------------------------------------------- |
| ENABLE_TOOLJET_DB | `true` or `false` |
| TOOLJET_DB | Default value is `tooljet_db` |
| TOOLJET_DB_HOST | database host |
| TOOLJET_DB_USER | database username |
| TOOLJET_DB_PASS | database password |
| TOOLJET_DB_PORT | database port |
| PGRST_JWT_SECRET | JWT token client provided for authentication |
| PGRST_HOST | postgrest database host |


If you intent to make changes in the above configuration. Please refer [PostgREST configuration docs](https://postgrest.org/en/stable/configuration.html#environment-variables).

:::tip
When this feature is enabled, the database name provided for `TOOLJET_DB` will be utilized to create a new database during server boot process in all of our production deploy setups.
Incase you want to trigger it manually, use the command `npm run db:create` on ToolJet server.
:::

</div>

<div style={{paddingTop:'24px', paddingBottom:'24px'}}>

## Features

ToolJet database allows you to:

- **[Maintain tables of data](#accessing-tooljet-database)** in a secure database that's only accessible within your ToolJet organization.
- **[Edit, search, filter, sort, and filter](#database-editor)** data using a spreadsheet-like interface.
- **[Quickly build applications and write queries](#querying-data-from-the-tooljet-database)** to interact with the ToolJet Database, just like any other datasource but without any setup.
- **[Export schema](#export-schema)** from the ToolJet Database to a JSON file.

</div>

<div style={{paddingTop:'24px', paddingBottom:'24px'}}>

## Accessing ToolJet Database

Once you log-in to your ToolJet account, from the left sidebar of the dashboard you can navigate to **ToolJet Database**.

The ToolJet Database is available on: **[ToolJet Cloud](https://tooljet.com)**, **[Self-Host](/docs/setup/)**, and **Enterprise Edition**. You can view and manage your database and the data it contains using the **Database editor UI**.

<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/tjdbside.png" alt="ToolJet database" />
</div>

</div>

<div style={{paddingTop:'24px', paddingBottom:'24px'}}>

## Database Editor

You can manage the ToolJet Database directly from the Database Editor. ToolJet Database organizes the data into **tables** that can have different structures. All the tables will be listed lexicographically on the left, click on any of the table to view the table data.
You can manage the ToolJet Database directly from the Database Editor. ToolJet Database organizes the data into **tables** that can have different structures. All the tables will be listed lexicographically on the left. Click on any of the tables to view the table data.

<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/tables.png" alt="ToolJet database" />
Expand All @@ -110,25 +15,23 @@ The sidebar on the left can also be collapsed to give more space to the database
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/collapse.png" alt="ToolJet database" />
</div>

</div>

<div style={{paddingTop:'24px', paddingBottom:'24px'}}>

### Create New Table

For creating a new table in ToolJet Database, click on the **Create New Table** button on the top left corner of the Database editor.
To create a new table in ToolJet Database, click on the **Create New Table** button on the top left corner of the Database editor.

<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/new.png" alt="ToolJet database" />
</div>

When the **Create New Table** button is clicked, a drawer opens up from the right from where you can enter the details of your new table.
When you click the **Create New Table** button, a drawer opens from the right, allowing you to enter the details of your new table.

<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/newtable.png" alt="ToolJet database" />
</div>

#### For creating a new table, you'll need to:
#### To create a new table, you'll need to:
- Enter a **Table name**
- Add **Columns** (`id` column with `serial` data type is automatically created as the **primary key** of the table)

Expand Down Expand Up @@ -206,7 +109,7 @@ A drawer from the right will open up where you can enter the details for the new

The export schema option allows you to download the selected table schema in a JSON file. This does not export the table data.

While [exporting the app](https://docs.tooljet.com/docs/dashboard#export-app), you can choose to export the app with or without table schema connected to the app.
While exporting the app, you can choose to export the app with or without table schema connected to the app.

To export the table schema, click on the three vertical dots icon on the right of the table name and then click on the **Export** option. A JSON file will be downloaded with the table schema.

Expand Down Expand Up @@ -312,7 +215,7 @@ To edit a row, hover on the row that you want to edit and the expand icon will a

### Bulk Upload Data

You can bulk upload data to the ToolJet database by clicking on the **Bulk upload data** button on the top of the database editor. On clicking the button, a drawer will open from the right from where you can upload a **CSV** file. This file is used to upsert records onto the table. If data for id column is missing it will insert new record with the row data else if id is present it will update the corresponding record with the corresponding row data.
You can bulk upload data to the ToolJet database by clicking the **Bulk upload data** button at the top of the database editor. On clicking the button, a drawer will open from the right from where you can upload a **CSV** file. This file is used to upsert records onto the table. If data for the id column is missing, it will insert a new record with the row data; if the id is present, it will update the corresponding record with the row data.

From the drawer, users can download the **template CSV file** in which they can enter the data to be uploaded to the ToolJet database's table or format their CSV file in the same way as the template file.

Expand All @@ -336,7 +239,7 @@ Once the CSV file is ready, click on the file picker to select the file or drag

### Delete Records

To delete one or many records/rows, select on the checkbox at the right of the record or records that you want to delete. As soon as you select a single record, the button to delete record will appear on the top, click on the **Delete record** button to delete the selected records.
To delete one or many records/rows, click the checkbox to the right of the record or records you want to delete. As soon as you select a single record, the button to delete record will appear on the top, click on the **Delete record** button to delete the selected records.

<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/delrows.png" alt="ToolJet database" />
Expand Down Expand Up @@ -389,117 +292,3 @@ To sort the table data, click on the **Sort** button on top, select a **column**

</div>

<div style={{paddingTop:'24px', paddingBottom:'24px'}}>

## Querying Data from the ToolJet Database

Querying ToolJet database is as easy as querying any other datasource on ToolJet.

- Go to the **query panel**, and click on the **+Add** button to add a new query, and select **ToolJet Database**
<div style={{textAlign: 'center'}}>

<img className="screenshot-full" src="/img/v2-beta/database/newui/qtjdb.png" alt="ToolJet Database editor" />

</div>

- Select the **table** that you want to query from the dropdown, choose an **operation** from the dropdown, and then enter the required parameters for the selected operation. Click on the **Run** button to execute the query.
<div style={{textAlign: 'center'}}>

<img className="screenshot-full" src="/img/v2-beta/database/newui/qtjdb2.png" alt="ToolJet Database editor" />

</div>

:::info
- **Preview** button on the query panel returns the query response without executing the query. Once clicked, the response will be displayed on the Preview section of the query panel which can be viewed as JSON or Raw.
- When a new query is created, by default the query name is set to `tooljetdbN` (where N is a number) - you can rename the query by click on the query name or from the left sidebar of query panel.
:::

</div>

<div style={{paddingTop:'24px', paddingBottom:'24px'}}>

### Available Operations

<div style={{paddingTop:'24px', paddingBottom:'24px'}}>

### List Rows
This operation returns all the records from the table

#### Optional Parameters
- **Filter**: Add a condition by choosing a column, an operation, and the value for filtering the records.
- **Sort**: Sort the query response by choosing a column and the order (ascending or descending).
- **Limit**: Limit the number of records to be returned by entering a number.

</div>

<div style={{paddingTop:'24px', paddingBottom:'24px'}}>

### Create row
This operation creates a new record in the table. You can create a single record or multiple records at once.

#### Required Parameters
- **Columns**: Choose the columns for which you want to add values for the new record and enter the values for the selected columns. You can also add a new column by clicking on the **+Add column** button.

</div>

<div style={{paddingTop:'24px', paddingBottom:'24px'}}>

### Update Row
This operation updates a record in the table. You can update a single record or multiple records at once.

#### Required Parameter
- **Filter**: Add a condition by choosing a column, an operation, and the value for updating a particular record.
- **Columns**: Choose the columns for which you want to update the values for the selected record and enter the values for the selected columns.

</div>

<div style={{paddingTop:'24px', paddingBottom:'24px'}}>

### Delete Row
This operation deletes a record in the table. You can delete a single record or multiple records at once.

#### Required Parameters
- **Filter**: Add a condition by choosing a column, an operation, and the value for deleting a particular record.
- **Limit**: Limit the number of records to be deleted by entering a number.

</div>

<div style={{paddingTop:'24px', paddingBottom:'24px'}}>

### Join Tables

You can join two or more tables in the ToolJet database by using the **Join** operation.

#### Required Parameters
- **From**: In the **From** section, there are the following parameters:
- **Selected Table**: Select the table from which you want to join the other table.
- **Type of Join**: Select the type of join you want to perform. The available options are: `Inner Join`, `Left Join`, `Right Join`, and `Full Outer Join`.
- **Joining Table**: Select the table that you want to join with the selected table.
- **On**: Select the column from the **selected table** and the **joining table** on which you want to join the tables. Currently, only `=` operation is supported for joining tables.
- **AND or OR condition**: You can add multiple conditions by clicking on the **+Add more** button below each join. The conditions can be joined by `AND` or `OR` operation.

<div style={{textAlign: 'center'}}>

<img className="screenshot-full" src="/img/v2-beta/database/newui/join1.png" alt="ToolJet Database editor" />

</div>

- **Filter**: Add a condition by choosing a column, an operation, and the value for filtering the records. The operations supported are same as the [filter operations](#available-operations-are) for the **List rows** operation.
- **Sort**: Sort the query response by choosing a column and the order (ascending or descending).
- **Limit**: Limit the number of records to be returned by entering a number.
- **Offset**: Offset the number of records to be returned by entering a number. This parameter is used for pagination.
- **Select**: Select the columns that you want to return in the query response. By default, all the columns are selected.

<div style={{textAlign: 'center'}}>

<img className="screenshot-full" src="/img/v2-beta/database/newui/join2.png" alt="ToolJet Database editor" />

</div>

:::info
If you have any other questions or feedback about **ToolJet Database**, please reach us out at [email protected] or join our **[Slack Community](https://www.tooljet.com/slack)**
:::

</div>

</div>
Loading

0 comments on commit a245d1d

Please sign in to comment.