mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-22 08:28:35 +00:00
Merge branch 'revamp/users-and-groups-frontend' of github.com:ToolJet/ToolJet into group-revamp-2
This commit is contained in:
kriks7iitk
commit
8abb5dfa56
638 changed files with 18695 additions and 14177 deletions
4
.github/workflows/docs-pr-app.yml
vendored
4
.github/workflows/docs-pr-app.yml
vendored
|
|
@ -40,11 +40,11 @@ jobs:
|
|||
},
|
||||
{
|
||||
"key": "NODE_VERSION",
|
||||
"value": "16.18.1"
|
||||
"value": "18.18.2"
|
||||
},
|
||||
{
|
||||
"key": "NPM_VERSION",
|
||||
"value": "8.19.2"
|
||||
"value": "9.8.1"
|
||||
},
|
||||
{
|
||||
"key": "GTM",
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ jobs:
|
|||
- name: Send Slack Notification
|
||||
run: |
|
||||
if [[ "${{ job.status }}" == "success" ]]; then
|
||||
message="Job '${{ env.JOB_NAME }}' succeeded! tooljet/tooljet-ce:${{ github.event.release.tag_name }}"
|
||||
message="ToolJet community image published:\n\`tooljet/tooljet-ce:${{ github.event.release.tag_name }}\`"
|
||||
else
|
||||
message="Job '${{ env.JOB_NAME }}' failed! tooljet/tooljet-ce:${{ github.event.release.tag_name }}"
|
||||
fi
|
||||
|
|
|
|||
2
.version
2
.version
|
|
@ -1 +1 @@
|
|||
2.36.0
|
||||
2.38.0
|
||||
|
|
|
|||
|
|
@ -210,7 +210,7 @@ describe("User permissions", () => {
|
|||
);
|
||||
cy.get(
|
||||
'[data-cy="go-to-workspace-constants-option-button"]'
|
||||
).verifyVisibleElement("have.text", "Go to workspace constants");
|
||||
).verifyVisibleElement("have.text", "Go to Workspace constants");
|
||||
cy.logoutApi();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
1
docs/.nvmrc
Normal file
1
docs/.nvmrc
Normal file
|
|
@ -0,0 +1 @@
|
|||
v18.18.2
|
||||
|
|
@ -3,7 +3,7 @@ id: unset-variable
|
|||
title: Unset variable
|
||||
---
|
||||
|
||||
This action allows you to remove the variable variable that was created using the set variable action.
|
||||
This action allows you to remove the variable that was created using the set variable action.
|
||||
|
||||
## Options
|
||||
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ Versioning is also helpful when working with **[multiple environments](/docs/rel
|
|||
### Gitsync
|
||||
The `Gitsync` icon next to the versions dropdown allows you to sync your application with your GitHub repository.
|
||||
|
||||
Read more about Gitsync **[here](/docs/gitsync.md)**.
|
||||
Read more about Gitsync **[here](/docs/gitsync)**.
|
||||
### Undo or Redo
|
||||
|
||||
You can Undo or Redo any action performed on the canvas using the Undo and Redo buttons.
|
||||
|
|
|
|||
|
|
@ -279,7 +279,7 @@ The **manifest.json** file is utilized by the connection modal component, which
|
|||
```
|
||||
The operations.json file specifies the available operations that can be executed on the data source. It provides details about the operation type, required fields to execute the operation, and the data type of each field. The label, key, type, description, and hint properties are used to define the specific fields and their types required to establish a connection with the API or data source.
|
||||
|
||||
## Step 4: Add the npm package of Gitub to the plugin dependencies
|
||||
## Step 4: Add the npm package of GitHub to the plugin dependencies
|
||||
|
||||
- Change directory to the plugin directory where the npm package needs to be installed and then install the package
|
||||
```bash
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ If you rather want to try out ToolJet locally with docker, you can follow the st
|
|||
|
||||
## Prerequisites
|
||||
|
||||
Make sure you have the latest version of `docker` and `docker-compose` installed.
|
||||
Make sure you have the latest version of `docker` and `docker compose` installed.
|
||||
|
||||
[Official docker installation guide](https://docs.docker.com/desktop/)
|
||||
|
||||
|
|
@ -27,8 +27,8 @@ We recommend:
|
|||
docker --version
|
||||
Docker version 19.03.12, build 48a66213fe
|
||||
|
||||
docker-compose --version
|
||||
docker-compose version 1.26.2, build eefe0d31
|
||||
docker compose --version
|
||||
docker compose version 1.26.2, build eefe0d31
|
||||
```
|
||||
|
||||
## Setting up
|
||||
|
|
@ -94,20 +94,20 @@ Please find more information [here](https://docs.docker.com/desktop/windows/wsl/
|
|||
4. Build docker images
|
||||
|
||||
```bash
|
||||
docker-compose build
|
||||
docker-compose run --rm plugins npm run build:plugins
|
||||
docker compose build
|
||||
docker compose run --rm plugins npm run build:plugins
|
||||
```
|
||||
|
||||
5. Run ToolJet
|
||||
|
||||
```bash
|
||||
docker-compose up
|
||||
docker compose up
|
||||
```
|
||||
ToolJet should now be served locally at `http://localhost:8082`.
|
||||
|
||||
8. To shut down the containers,
|
||||
```bash
|
||||
docker-compose stop
|
||||
docker compose stop
|
||||
```
|
||||
|
||||
## Making changes to the codebase
|
||||
|
|
@ -116,9 +116,9 @@ If you make any changes to the codebase/pull the latest changes from upstream, t
|
|||
|
||||
Caveat:
|
||||
|
||||
1. If the changes include database migrations or new npm package additions in the package.json, you would need to restart the ToolJet server container by running `docker-compose restart server`.
|
||||
1. If the changes include database migrations or new npm package additions in the package.json, you would need to restart the ToolJet server container by running `docker compose restart server`.
|
||||
|
||||
2. If you need to add a new binary or system library to the container itself, you would need to add those dependencies in `docker/server.Dockerfile.dev` and then rebuild the ToolJet server image. You can do that by running `docker-compose build server`. Once that completes you can start everything normally with `docker-compose up`.
|
||||
2. If you need to add a new binary or system library to the container itself, you would need to add those dependencies in `docker/server.Dockerfile.dev` and then rebuild the ToolJet server image. You can do that by running `docker compose build server`. Once that completes you can start everything normally with `docker compose up`.
|
||||
|
||||
Example:
|
||||
Let's say you need to install the `imagemagick` binary in your ToolJet server's container. You'd then need to make sure that `apt` installs `imagemagick` while building the image. The Dockerfile at `docker/server.Dockerfile.dev` for the server would then look something like this:
|
||||
|
|
@ -150,7 +150,7 @@ RUN ["chmod", "755", "entrypoint.sh"]
|
|||
|
||||
```
|
||||
|
||||
Once you've updated the Dockerfile, rebuild the image by running `docker-compose build server`. After building the new image, start the services by running `docker-compose up`.
|
||||
Once you've updated the Dockerfile, rebuild the image by running `docker compose build server`. After building the new image, start the services by running `docker compose up`.
|
||||
|
||||
## Running tests
|
||||
|
||||
|
|
@ -159,24 +159,24 @@ Test config picks up config from `.env.test` file at the root of the project.
|
|||
Run the following command to create and migrate data for test db
|
||||
|
||||
```bash
|
||||
docker-compose run --rm -e NODE_ENV=test server npm run db:create
|
||||
docker-compose run --rm -e NODE_ENV=test server npm run db:migrate
|
||||
docker compose run --rm -e NODE_ENV=test server npm run db:create
|
||||
docker compose run --rm -e NODE_ENV=test server npm run db:migrate
|
||||
```
|
||||
|
||||
To run the unit tests
|
||||
```bash
|
||||
docker-compose run --rm server npm run --prefix server test
|
||||
docker compose run --rm server npm run --prefix server test
|
||||
```
|
||||
|
||||
To run e2e tests
|
||||
```bash
|
||||
docker-compose run --rm server npm run --prefix server test:e2e
|
||||
docker compose run --rm server npm run --prefix server test:e2e
|
||||
```
|
||||
|
||||
To run a specific unit test
|
||||
|
||||
```bash
|
||||
docker-compose run --rm server npm --prefix server run test <path-to-file>
|
||||
docker compose run --rm server npm --prefix server run test <path-to-file>
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
|
|||
1. Set up the environment
|
||||
|
||||
1.1 Install Homebrew
|
||||
```/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
|
||||
```bash
|
||||
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
|
||||
```
|
||||
|
||||
1.2 Install Node.js ( version: v18.18.2 ) and npm (version: v9.8.1)
|
||||
|
|
|
|||
|
|
@ -42,5 +42,5 @@ For VSCode users, you can set the formatter to `ESLint` in the [**settings.json*
|
|||
2. **npm version 9.8.1**
|
||||
|
||||
:::tip
|
||||
It is recommended to check the VSCode **Setting.json**(Press `ctrl/cmnd + P` and search `>Settings (JSON)`) file to ensure there are no overrides to the eslint config rules. Comment the following rules for eslint: **eslint.options: {...}**.
|
||||
It is recommended to check the VSCode **Setting.json**(Press `ctrl/cmnd + P` and search `>Settings (JSON)`) file to ensure there are no overrides to the eslint config rules. Comment the following rules for eslint: **eslint.options: `{...}`**.
|
||||
:::
|
||||
|
|
@ -48,7 +48,7 @@ When the query is triggered the alert will show the parameters value.
|
|||
|
||||
Let's demonstrate how to utilize parameters in RunJS queries and call one query from another by providing custom parameter values:
|
||||
|
||||
1. Begin by creating a new RunJS query named `multiply`. In this query, add the following parameters: **num1** with a default value of `10` and **num2** with a default value of `2`. To display the result, place a text component on the canvas and set its text to **{{queries.multiply.data}}**. Save and Run the query.
|
||||
1. Begin by creating a new RunJS query named `multiply`. In this query, add the following parameters: **num1** with a default value of `10` and **num2** with a default value of `2`. To display the result, place a text component on the canvas and set its text to `{{queries.multiply.data}}`. Save and Run the query.
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
<img className="screenshot-full" src="/img/datasource-reference/custom-javascript/multiply.png" alt="Run JavaScript code" />
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@ Delete many records based on the filter. [Reference](https://docs.mongodb.com/dr
|
|||
|
||||
Perform bulk operations. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/bulkWrite/)
|
||||
|
||||
### Dynamic Quries
|
||||
### Dynamic Queries
|
||||
|
||||
```javascript
|
||||
{ amount: { $lt: '{{ components.textinput1.value }}' }}
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ This operations retrieves a Database object using the ID specified.
|
|||
|
||||
- **Database ID**: You'll find the Database ID in the url. Suppose this is the example url: `https://www.notion.so/workspace/XXX?v=YYY&p=ZZZ` then `XXX` is the database ID, `YYY` is the view ID and `ZZZ` is the page ID.
|
||||
|
||||
<img className="screenshot-full" src="/img/datasource-reference/notion/db_retrieve.png" alt="notion db retreieve" />
|
||||
<img className="screenshot-full" src="/img/datasource-reference/notion/db_retrieve.png" alt="notion db retrieve" />
|
||||
|
||||
#### 2. Query a database
|
||||
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ To configure these permissions, navigate to **Workspace Settings** -> **Groups S
|
|||
| **Just Create** | Add new data sources and modify existing ones. Delete button will not be visible on hovering over the connected data source. |
|
||||
| **Just Delete** | Remove connected data sources from the workspace. Delete button will show up on hovering over the connected data source. |
|
||||
| **Both Create and Delete** | Add new data sources and remove connected data sources from the workspace. |
|
||||
| **Niether Create nor Delete** | No access to the Data Sources page from the Dashboard. Error toast will popup on trying to access the Data Sources page using URL. |
|
||||
| **Neither Create nor Delete** | No access to the Data Sources page from the Dashboard. Error toast will popup on trying to access the Data Sources page using URL. |
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
|
|
|||
|
|
@ -188,7 +188,7 @@ Google Cloud Platform provides access to more than 350 APIs and Services that ca
|
|||
2. Navigate to the **APIs and Services**, and then open the **OAuth consent screen** section from the left sidebar.
|
||||
3. Enter the Application details and select the appropriate scopes for your application. We will select the profile and the email scopes.
|
||||
4. Once you have created the OAuth consent screen, Create new credentials for the **OAuth client ID** from the **Credentials** section in the left sidebar.
|
||||
5. Select the application type, enter the application name, and then add the following URIs under Authorised Redirect URIs:
|
||||
5. Select the application type, enter the application name, and then add the following URIs under Authorized Redirect URIs:
|
||||
1. `https://app.tooljet.com/oauth2/authorize` (if you’re using ToolJet cloud)
|
||||
2. `http://localhost:8082/oauth2/authorize` (if you’re using ToolJet locally)
|
||||
6. Now save and then you’ll get the **Client ID and Client secret** for your application.
|
||||
|
|
|
|||
|
|
@ -50,143 +50,65 @@ You can check out the some of the operations mentioned below. All the operations
|
|||
- **get,/v1/account**
|
||||
- **post,/v1/account**
|
||||
- **post,/v1/account/bank_accounts**
|
||||
- **delete,/v1/account/bank_accounts/{id}**
|
||||
- **get,/v1/account/bank_accounts/{id}**
|
||||
- **post,/v1/account/bank_accounts/{id}**
|
||||
- **delete,/v1/account/bank_accounts/`{id}`**
|
||||
- **get,/v1/account/bank_accounts/`{id}`**
|
||||
- **post,/v1/account/bank_accounts/`{id}`**
|
||||
- **get,/v1/account/capabilities**
|
||||
- **get,/v1/account/capabilities/{capability}**
|
||||
- **post,/v1/account/capabilities/{capability}**
|
||||
- **get,/v1/account/capabilities/`{capability}`**
|
||||
- **post,/v1/account/capabilities/`{capability}`**
|
||||
- **get,/v1/account/external_accounts**
|
||||
- **post,/v1/account/external_accounts**
|
||||
- **delete,/v1/account/external_accounts/{id}**
|
||||
- **get,/v1/account/external_accounts/{id}**
|
||||
- **post,/v1/account/external_accounts/{id}**
|
||||
- **delete,/v1/account/external_accounts/`{id}`**
|
||||
- **get,/v1/account/external_accounts/`{id}`**
|
||||
- **post,/v1/account/external_accounts/`{id}`**
|
||||
- **post,/v1/account/login_links**
|
||||
- **get,/v1/account/people**
|
||||
- **post,/v1/account/people**
|
||||
- **delete,/v1/account/people/{person}**
|
||||
- **get,/v1/account/people/{person}**
|
||||
- **delete,/v1/account/people/`{person}`**
|
||||
- **get,/v1/account/people/`{person}`**
|
||||
- **post,/v1/account/persons**
|
||||
- **delete,/v1/account/persons/{person}**
|
||||
- **get,/v1/account/persons/{person}**
|
||||
- **post,/v1/account/persons/{person}**
|
||||
- **delete,/v1/account/persons/`{person}`**
|
||||
- **get,/v1/account/persons/`{person}`**
|
||||
- **post,/v1/account/persons/`{person}`**
|
||||
- **post,/v1/account_links**
|
||||
- **get,/v1/accounts**
|
||||
- **post,/v1/accounts**
|
||||
- **delete,/v1/accounts/{account}**
|
||||
- **get,/v1/accounts/{account}**
|
||||
- **post,/v1/accounts/{account}**
|
||||
- **post,/v1/accounts/{account}/bank_accounts**
|
||||
- **delete,/v1/accounts/{account}/bank_accounts/{id}**
|
||||
- **get,/v1/accounts/{account}/bank_accounts/{id}**
|
||||
- **get,/v1/accounts/{account}/bank_accounts/{id}**
|
||||
- **get,/v1/accounts/{account}/capabilities**
|
||||
- **get,/v1/accounts/{account}/capabilities/{capability}**
|
||||
- **post,/v1/accounts/{account}/capabilities/{capability}**
|
||||
- **get,/v1/accounts/{account}/external_accounts**
|
||||
- **post,/v1/accounts/{account}/external_accounts**
|
||||
- **delete,/v1/accounts/{account}/external_accounts/{id}**
|
||||
- **get,/v1/accounts/{account}/external_accounts/{id}**
|
||||
- **get,/v1/accounts/{account}/external_accounts/{id}**
|
||||
- **post,/v1/accounts/{account}/login_links**
|
||||
- **get,/v1/accounts/{account}/people**
|
||||
- **post,/v1/accounts/{account}/people**
|
||||
- **delete,/v1/accounts/{account}/people/{person}**
|
||||
- **get,/v1/accounts/{account}/people/{person}**
|
||||
- **post,/v1/accounts/{account}/people/{person}**
|
||||
- **get,/v1/accounts/{account}/persons**
|
||||
- **post,/v1/accounts/{account}/persons**
|
||||
- **delete,/v1/accounts/{account}/persons/{person}**
|
||||
- **get,/v1/accounts/{account}/persons/{person}**
|
||||
- **post,/v1/accounts/{account}/persons/{person}**
|
||||
- **post,/v1/accounts/{account}/reject**
|
||||
- **delete,/v1/accounts/`{account}`**
|
||||
- **get,/v1/accounts/`{account}`**
|
||||
- **post,/v1/accounts/`{account}`**
|
||||
- **post,/v1/accounts/`{account}`/bank_accounts**
|
||||
- **delete,/v1/accounts/`{account}`/bank_accounts/`{id}`**
|
||||
- **get,/v1/accounts/`{account}`/bank_accounts/`{id}`**
|
||||
- **get,/v1/accounts/`{account}`/bank_accounts/`{id}`**
|
||||
- **get,/v1/accounts/`{account}`/capabilities**
|
||||
- **get,/v1/accounts/`{account}`/capabilities/`{capability}`**
|
||||
- **post,/v1/accounts/`{account}`/capabilities/`{capability}`**
|
||||
- **get,/v1/accounts/`{account}`/external_accounts**
|
||||
- **post,/v1/accounts/`{account}`/external_accounts**
|
||||
- **delete,/v1/accounts/`{account}`/external_accounts/`{id}`**
|
||||
- **get,/v1/accounts/`{account}`/external_accounts/`{id}`**
|
||||
- **get,/v1/accounts/`{account}`/external_accounts/`{id}`**
|
||||
- **post,/v1/accounts/`{account}`/login_links**
|
||||
- **get,/v1/accounts/`{account}`/people**
|
||||
- **post,/v1/accounts/`{account}`/people**
|
||||
- **delete,/v1/accounts/`{account}`/people/`{person}`**
|
||||
- **get,/v1/accounts/`{account}`/people/`{person}`**
|
||||
- **post,/v1/accounts/`{account}`/people/`{person}`**
|
||||
- **get,/v1/accounts/`{account}`/persons**
|
||||
- **post,/v1/accounts/`{account}`/persons**
|
||||
- **delete,/v1/accounts/`{account}`/persons/`{person}`**
|
||||
- **get,/v1/accounts/`{account}`/persons/`{person}`**
|
||||
- **post,/v1/accounts/`{account}`/persons/`{person}`**
|
||||
- **post,/v1/accounts/`{account}`/reject**
|
||||
- **get,/v1/apple_pay/domains**
|
||||
- **post,/v1/apple_pay/domains**
|
||||
- **delete,/v1/apple_pay/domains/{domain}**
|
||||
- **get,/v1/apple_pay/domains/{domain}**
|
||||
- **delete,/v1/apple_pay/domains/`{domain}`**
|
||||
- **get,/v1/apple_pay/domains/`{domain}`**
|
||||
- **get,/v1/application_fees**
|
||||
- **get,/v1/application_fees/{fee}/refunds/{id}**
|
||||
- **post,/v1/application_fees/{fee}/refunds/{id}**
|
||||
- **get,/v1/application_fees/{id}**
|
||||
- **post,/v1/application_fees/{id}/refund**
|
||||
- **get,/v1/application_fees/{id}/refunds**
|
||||
- **post,/v1/application_fees/{id}/refunds**
|
||||
- **get,/v1/application_fees/`{fee}`/refunds/`{id}`**
|
||||
- **post,/v1/application_fees/`{fee}`/refunds/`{id}`**
|
||||
- **get,/v1/application_fees/`{id}`**
|
||||
- **post,/v1/application_fees/`{id}`/refund**
|
||||
- **get,/v1/application_fees/`{id}`/refunds**
|
||||
- **post,/v1/application_fees/`{id}`/refunds**
|
||||
- **get,/v1/apps/secrets**
|
||||
|
||||
|
||||
<!--
|
||||
### delete,/v1/account
|
||||
|
||||
This operation can be used to delete the accounts that you manage in Stripe.
|
||||
|
||||
#### Required parameters:
|
||||
|
||||
- **account**: Enter the account id of account that you want to delete. example: `acct_1032D82eZvKYlo2C`
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
### get,/v1/account
|
||||
|
||||
This operation returns the basic account information such as account id, capabilities, currency, country etc.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
### post,/v1/account
|
||||
|
||||
This operation updates the connected account by setting the values of the parameters passed. Any parameters not provided are left unchanged.
|
||||
|
||||
### post,/v1/account/bank_accounts
|
||||
|
||||
This operation will create a bank account in your stripe account.
|
||||
|
||||
### delete,/v1/account/bank_accounts/{id}
|
||||
|
||||
This operation can be used to delete a specified external account for a given account.. You'll need to provide the **id** of the bank account in stripe.
|
||||
|
||||
### get,/v1/account/bank_accounts/{id}
|
||||
|
||||
This operation can be used to retrieve a specified external account whose **id** is provided in parameters.
|
||||
|
||||
### post,/v1/account/bank_accounts/{id}
|
||||
|
||||
This operation can be used to update the metadata, account holder name, account holder type of a bank account belonging to a Custom Account, and optionally sets it as the default for its currency. Other bank account details are not editable by design. You can re-enable a disabled bank account by performing an update call without providing any arguments or changes.
|
||||
|
||||
### get,/v1/account/capabilities
|
||||
|
||||
This operation returns a list of capabilities associated with the account. The capabilities are returned sorted by creation date, with the most recent capability appearing first.
|
||||
|
||||
### get,/v1/account/capabilities/{capability}
|
||||
|
||||
This operation retrieves information about the specified Account Capability.
|
||||
|
||||
### post,/v1/account/capabilities/{capability}
|
||||
|
||||
This operation updates an existing Account Capability.
|
||||
|
||||
### get,/v1/account/external_accounts
|
||||
|
||||
List external accounts for an account.
|
||||
|
||||
### post,/v1/account/external_accounts
|
||||
|
||||
This operation creates an external account for a given account.
|
||||
|
||||
### delete,/v1/account/external_accounts/{id}
|
||||
|
||||
This operation deletes a specified external account for a given account.
|
||||
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ ToolJet marketplace is a place where you can find custom plugins and install the
|
|||
## Getting started
|
||||
### 1. Enabling the marketplace for your instance
|
||||
To enable the marketplace for your instance, you need to set the `ENABLE_MARKETPLACE` environment variable to `true` in your `.env` file.
|
||||
Marketplacwe is disabled by default.
|
||||
Marketplace is disabled by default.
|
||||
Once you set the environment variable, restart your ToolJet instance. You can find the instructions to run ToolJet locally [here](/docs/setup/).
|
||||
Marketplace can be accessed from '/integrations' route.
|
||||
|
||||
|
|
@ -270,7 +270,7 @@ It includes information about authentication options, specifically a dropdown to
|
|||
```
|
||||
The operations.json file defines the operations that can be performed on the data source. It includes information about the operation type, the fields required to perform the operation, and the type of each field. The label, key, type, description, and hint properties are used to define the specific fields and their types required for connecting to the API or data source.
|
||||
|
||||
### 6. Add the npm package of Gitub to the plugin dependencies
|
||||
### 6. Add the npm package of GitHub to the plugin dependencies
|
||||
|
||||
```bash
|
||||
# change directory to the plugin directory and install the npm package
|
||||
|
|
|
|||
|
|
@ -18,12 +18,13 @@ You can import various JavaScript libraries using their Content Delivery Network
|
|||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
## Creating a new app and runJS query
|
||||
## Creating a New App and RunJS Query
|
||||
|
||||
Start by creating a new application in ToolJet. Then, proceed to create a new RunJS query from the query panel.
|
||||
- Create a new app from the ToolJet Dashboard.
|
||||
- Once the app is ready, choose ToolJet's deafult **JavaScript** Data Source from the query panel.
|
||||
|
||||
<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/how-to/import-js/create-new-query.png" alt="Create a new RunJS query" />
|
||||
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/import-js/create-new-query-v2.png" alt="Create a new RunJS query" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -32,7 +33,7 @@ Start by creating a new application in ToolJet. Then, proceed to create a new Ru
|
|||
|
||||
## Importing Libraries
|
||||
|
||||
Here's a step-by-step guide to importing libraries and displaying an alert upon successful import.
|
||||
Once the query is created, add the following code:
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
@ -64,14 +65,14 @@ try {
|
|||
|
||||
</div>
|
||||
|
||||
After creating and running the query, an alert should pop up with the message "Mathjs and Flatten imported."
|
||||
After adding the code, click on the **Run** button in the query panel, an alert should pop up with the message "Mathjs and Flatten imported."
|
||||
|
||||
:::tip
|
||||
Enable the **Run this query on application load?** option to make the libraries available throughout the application as soon as the app is loaded.
|
||||
:::
|
||||
|
||||
<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/how-to/import-js/import-successful.png" alt="Import Successful" />
|
||||
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/import-js/import-successful-v2.png" alt="Import Successful" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -86,7 +87,8 @@ Enable the **Run this query on application load?** option to make the libraries
|
|||
|
||||
### 1. Flattening JSON Objects using FlattenJS
|
||||
|
||||
Create a new RunJS query using the Flatten library (imported earlier) to flatten a JSON object.
|
||||
- Create a new *RunJS* query using the Flatten library (imported earlier) to flatten a JSON object.
|
||||
- In the code section of the query, add the following code:
|
||||
|
||||
```js
|
||||
return flatten({
|
||||
|
|
@ -100,10 +102,10 @@ return flatten({
|
|||
});
|
||||
```
|
||||
|
||||
Preview the output in the query manager or run the query to see the flattened JSON.
|
||||
- Preview the output in the query manager or click **Run** in the query panel to see the flattened JSON.
|
||||
|
||||
<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/how-to/import-js/flatten-js.png" alt="Use FlattenJS" />
|
||||
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/import-js/flatten-js-v2.png" alt="Use FlattenJS" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -112,13 +114,14 @@ Preview the output in the query manager or run the query to see the flattened JS
|
|||
|
||||
### 2. Computation using MathJS
|
||||
|
||||
Create another RunJS query utilizing the MathJS library for a calculation.
|
||||
- Create another *RunJS* query utilizing the MathJS library for a calculation.
|
||||
- In the code section of the query, add the following code:
|
||||
|
||||
```js
|
||||
return math.atan2(3, -3) / math.pi;
|
||||
```
|
||||
|
||||
Preview the output, or Run the query to see the result of the calculation.
|
||||
- Preview the output in the query manager or click **Run** in the query panel to see the result of the calculation.
|
||||
|
||||
<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/how-to/import-js/math-js-v2.png" alt="Use MathJs" />
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ title: Using Server Side Pagination in Tables
|
|||
|
||||
<div style={{paddingBottom:'24px'}}>
|
||||
|
||||
In this guide we will learn how to use server side pagination in table component. This will be helpful if you have a large data set and you want to load data in chunks. This will also help you to improve the performance of your application. This guide will be helpful if you are using data sources like MySQL, PostgreSQL, MSSQL, MongoDB, etc. in which you can use `limit` and `offset` to fetch data in chunks. We have also included an example to load data from Google Sheets in chunks.
|
||||
In this guide, we will implement server-side pagination for large datasets in a table component to enhance application performance. This guide is applicable for databases like MySQL, PostgreSQL, MSSQL, MongoDB, etc., supporting `limit` and `offset` for chunked data retrieval.
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -13,33 +13,32 @@ In this guide we will learn how to use server side pagination in table component
|
|||
|
||||
### Loading Data from PostgreSQL in Chunks
|
||||
|
||||
- Let's say you have a table `users` in your PostgreSQL database and you want to load data from this table in chunks. You can use `limit` and `offset` to fetch data in chunks. Here is the SQL query to fetch data in chunks:
|
||||
```sql title="PostgreSQL query"
|
||||
SELECT *
|
||||
FROM users
|
||||
ORDER BY id
|
||||
LIMIT 100 OFFSET {{(components.table1.pageIndex-1)*100}};
|
||||
```
|
||||
To fetch data in chunks from a PostgreSQL table `users`, use `limit` and `offset` in the SQL query:
|
||||
|
||||
```sql title="PostgreSQL query"
|
||||
SELECT *
|
||||
FROM users
|
||||
ORDER BY id
|
||||
LIMIT 100 OFFSET {{(components.table1.pageIndex-1)*100}};
|
||||
```
|
||||
|
||||
The query will fetch 100 rows at a time from the postgresql users table, and the number of rows returned is determined by the current value of `pageIndex`(exposed variable) in the Table component.
|
||||
|
||||
1. `ORDER BY id`: This part of the query specifies the ordering of the result set. It orders the rows based on the `id` column. You can replace `id` with the appropriate column name based on how you want the rows to be ordered.
|
||||
|
||||
2. `LIMIT 100`: The `LIMIT` clause limits the number of rows returned to 100. This means that each time the query is executed, it will fetch 100 rows from the table.
|
||||
|
||||
3. `OFFSET {{(components.table1.pageIndex-1)*100}}`: The `OFFSET` clause determines where to start fetching rows from the result set. In this case, the offset value is calculated based on the `pageIndex`(exposed variable) in the Table component. The formula `(components.table1.pageIndex-1)*100` calculates the starting row number for the current page. Since the index is 1-based, we subtract 1 from `pageIndex` to convert it to a 0-based index. Then we multiply it by 100 to get the offset for the current page. For example, if `pageIndex` is 1, the offset will be 0, which means it will fetch rows from the first 100 rows. If `pageIndex` is 2, the offset will be 100, which means it will fetch rows from rows 101 to 200, and so on.
|
||||
The query will fetch 100 rows at a time from the PostgreSQL users table, and the number of rows returned is determined by the current value of `pageIndex`(exposed variable) in the Table component.
|
||||
|
||||
The following is the breakdown of the above PostgreSQL query:
|
||||
|
||||
- `ORDER BY id`: Orders the result set by the id column.
|
||||
|
||||
- `LIMIT 100`: Limits rows returned to 100 per query.
|
||||
|
||||
- `OFFSET {{(components.table1.pageIndex-1)*100}}`: Determines the starting row number based on the current page index for pagination.
|
||||
|
||||
|
||||
- Create a new query that will return the count of the records on the `users` table in postgresql db. This query will be used to calculate the total number of pages in the Table component. Here is the SQL query to fetch the count of records:
|
||||
To obtain the count of records in the users table, execute the following query:
|
||||
|
||||
```sql
|
||||
SELECT COUNT(*)
|
||||
FROM users;
|
||||
```
|
||||
|
||||
- Enable the option to run the query on page load so that the query is executed when the app loads.
|
||||
- Add an event handler to run the query that fetches data from the PostgreSQL table and then save the changes.
|
||||
- Once the count query is created, execute it to get the total number of records. You can dynamically access the count of records using `{{queries.<countquery>.data[0].count}}`.
|
||||
```sql
|
||||
SELECT COUNT(*)
|
||||
FROM users;
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -47,44 +46,47 @@ In this guide we will learn how to use server side pagination in table component
|
|||
|
||||
### Edit the Table Component
|
||||
|
||||
**Now, let's edit the properties of the Table component:**
|
||||
**Follow the steps below to edit the properties of the Table component:**
|
||||
|
||||
- Set the value of the **Table data** property to `{{queries.<postgresquery>.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/how-to/server-side/data.png" alt="Table data" />
|
||||
</div>
|
||||
|
||||
- Enable the **Server-side pagination** option
|
||||
- Drag the table component to the canvas from the components library and set the value of the **Data** property to `{{queries.<postgresquery>.data}}` to populate the table with the relevant data.
|
||||
|
||||
- Enable the **Server-side pagination** option.
|
||||
- Click on the `Fx` next to **Enable previous page button** and set the value as below. This condition disables the previous page button when the current page is page `1`.
|
||||
|
||||
```js
|
||||
{{components.table1.pageIndex >=2 ? true : false}}
|
||||
```
|
||||
- Click on the `Fx` next to **Enable next page button** and set it's value as below. This condition disables the next page button when the current page is the last page.
|
||||
```js
|
||||
{{components.table1.pageIndex < queries.<countquery>.data[0].count/100 ? true : false}}
|
||||
```
|
||||
- Set the value of the **Total records server side** property as below. This will set the total number of records in the Table component.
|
||||
```js
|
||||
{{queries.<countquery>.data[0].count}}
|
||||
```
|
||||
<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/how-to/server-side/pagination.png" alt="Table data" />
|
||||
</div>
|
||||
|
||||
- Now, the last step is to set the **loading state** and add the **event handler**:
|
||||
- **Loading State**: This will show the loading indicator on the table component when the query is executing. Set the loading state property as:
|
||||
```js
|
||||
{{queries.<postgresquery>.isLoading}}
|
||||
```
|
||||
- **Event Handler**: Select the **Page changed** event and choose the **Run Query** action. Then, select the **Query** from the dropdown that fetches data from the PostgreSQL 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/how-to/server-side/event.png" alt="Table data" />
|
||||
</div>
|
||||
- Click on the `Fx` next to **Enable next page button** and set it's value as below. This condition disables the next page button when the current page is the last page.
|
||||
```js
|
||||
{{components.table1.pageIndex < queries.<countquery>.data[0].count/100 ? true : false}}
|
||||
```
|
||||
|
||||
- Set the value of the **Total records server side** property as below. This will set the total number of records in the Table component.
|
||||
```js
|
||||
{{queries.<countquery>.data[0].count}}
|
||||
```
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img style={{ width:'100%', border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/server-side/pagination-v2.png" alt="Table data" />
|
||||
</div>
|
||||
|
||||
|
||||
- To add the loading indicator on the table component while executing the query, set the `Loading state` property as:
|
||||
|
||||
```js
|
||||
{{queries.<postgresquery>.isLoading}}
|
||||
```
|
||||
- Select the **Page changed** event and choose the **Run Query** action, after clicking the `New event handler`. Then, select the **Query** from the dropdown that fetches data from the PostgreSQL table.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img style={{ width: '100%', border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/server-side/event-v2.png" alt="Table data" />
|
||||
</div>
|
||||
|
||||
Now, whenever the page is changed, the query will be executed, and the data will be fetched from the PostgreSQL table in chunks.
|
||||
|
||||
<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/how-to/server-side/change.gif" alt="Table data" />
|
||||
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/server-side/change-v2.gif" alt="Table data" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ This query will fetch the list of all the buckets in your S3. Just create a new
|
|||
Now, let's edit the properties of **dropdown** widget.
|
||||
|
||||
- **Label**: Set the label as Bucket.
|
||||
- **Option values**: Set option values as `{{queries.getBuckets.data.Buckets.map(bucket => bucket['Name'])}}`. We're mapping the data returned by the query as the returned data is array of abjects.
|
||||
- **Option values**: Set option values as `{{queries.getBuckets.data.Buckets.map(bucket => bucket['Name'])}}`. We're mapping the data returned by the query as the returned data is array of objects.
|
||||
- **Option label**: Set option values as `{{queries.getBuckets.data.Buckets.map(bucket => bucket['Name'])}}`. This will display the same option label as option values.
|
||||
|
||||
You can later add an event handler for running the **listObject** query whenever an option is selected from the dropdown.
|
||||
|
|
@ -114,7 +114,7 @@ Edit the **properties** of the table, add a Event handler for running the `downl
|
|||
|
||||
Create a new query, select the **Upload object** operation. Enter the following values in their respective fields:
|
||||
- **Bucket**: `{{components.dropdown1.value}}`
|
||||
- **Key**: {{ components.textinput1.value + '/' +components.filepicker1.file[0].name}}`
|
||||
- **Key**: `{{ components.textinput1.value + '/' +components.filepicker1.file[0].name}}`
|
||||
- **Content type**: `{{components.filepicker1.file[0].type}}`
|
||||
- **Upload data**: `{{components.filepicker1.file[0].base64Data}}`
|
||||
- **Encoding**: `base64`
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
id: use-events-on-chart
|
||||
title: Use Events on Chart
|
||||
title: Use Events on Chart Created Through Custom Component
|
||||
---
|
||||
<div style={{paddingBottom:'24px'}}>
|
||||
|
||||
Currently, the chart component does not support events. However, you can use the Custom Component to create a chart using a third-party library that supports events. Plotly is one of the libraries that supports events. In this tutorial, we will build a chart using Plotly and add events to it.
|
||||
This guide will use the Custom Component to create a chart using a third-party library that supports events. Plotly is one of the libraries that supports events. In this tutorial, we will build a chart using Plotly and add events.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img style={{ marginBottom:'15px', border:'0'}} className="screenshot-full" src="/img/how-to/events-chart/plotly-chart.png" alt="Plotly Chart" />
|
||||
<img style={{ marginBottom:'15px', border:'0'}} className="screenshot-full" src="/img/how-to/events-chart/plotly-chart-v2.png" alt="Plotly Chart" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -16,9 +16,10 @@ Currently, the chart component does not support events. However, you can use the
|
|||
|
||||
## Step 1: Add a Custom Component
|
||||
|
||||
Open the App Builder and add a Custom Component to the page. Then, click on the Custom Component to open the Properties panel.
|
||||
- Open the App Builder and add a Custom Component to the page.
|
||||
- Click on the Custom Component to open the Properties panel.
|
||||
|
||||
Note: If you are not familiar with the Custom Component, please read the [Custom Component](/docs/widgets/custom-component/) doc.
|
||||
Note: If you are not familiar with the Custom Component, please read the [Custom Component](/docs/widgets/custom-component/)documentation.
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -26,6 +27,8 @@ Note: If you are not familiar with the Custom Component, please read the [Custom
|
|||
|
||||
## Step 2: Add the Code to the Custom Component
|
||||
|
||||
In the Code section of the `Custom Component` properties, add the following code:
|
||||
|
||||
```js
|
||||
import React from 'https://cdn.skypack.dev/react';
|
||||
import ReactDOM from 'https://cdn.skypack.dev/react-dom';
|
||||
|
|
@ -33,111 +36,98 @@ import { Button, Container } from 'https://cdn.skypack.dev/@material-ui/core';
|
|||
import Plotly from 'https://cdn.skypack.dev/plotly.js-basic-dist-min';
|
||||
import createPlotlyComponent from 'https://cdn.skypack.dev/react-plotly.js/factory';
|
||||
|
||||
const MyCustomComponent = ({data, updateData, runQuery}) => {
|
||||
const Plot = createPlotlyComponent(Plotly);
|
||||
// Define the custom component
|
||||
const MyCustomComponent = ({ data, updateData, runQuery }) => {
|
||||
// Create Plot component using Plotly
|
||||
const Plot = createPlotlyComponent(Plotly);
|
||||
|
||||
const barOnClick = ({points}) => {
|
||||
alert('A bar is clicked')
|
||||
}
|
||||
return (
|
||||
<Container>
|
||||
<Plot data={[
|
||||
{
|
||||
"name": "Inbound",
|
||||
"type": "bar",
|
||||
"x": [
|
||||
20,
|
||||
14,
|
||||
23,
|
||||
22,
|
||||
30,
|
||||
12,
|
||||
15,
|
||||
26,
|
||||
31,
|
||||
16,
|
||||
18,
|
||||
29
|
||||
],
|
||||
"y": [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec"
|
||||
],
|
||||
"marker": {
|
||||
"line": {
|
||||
"color": "rgba(55, 128, 191, 1.0)",
|
||||
"width": 1
|
||||
},
|
||||
"color": "rgba(55, 128, 191, 0.6)"
|
||||
},
|
||||
"orientation": "h"
|
||||
},
|
||||
{
|
||||
"name": "Outbound",
|
||||
"type": "bar",
|
||||
"x": [
|
||||
12,
|
||||
18,
|
||||
29,
|
||||
22,
|
||||
14,
|
||||
23,
|
||||
15,
|
||||
23,
|
||||
26,
|
||||
13,
|
||||
27,
|
||||
12
|
||||
],
|
||||
"y": [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec"
|
||||
],
|
||||
"marker": {
|
||||
"line": {
|
||||
"color": "rgba(255, 153, 51, 1.0)",
|
||||
"width": 1
|
||||
},
|
||||
"color": "rgba(255, 153, 51, 0.6)"
|
||||
},
|
||||
"orientation": "h"
|
||||
}
|
||||
]}
|
||||
layout={{
|
||||
width: 840,
|
||||
height: 800,
|
||||
title: "Tickets Resolved: Inbound & Outbound",
|
||||
showlegend: false,
|
||||
}}
|
||||
onClick={barOnClick}
|
||||
/>
|
||||
</Container>
|
||||
)}
|
||||
// Define onClick handler for bars
|
||||
const barOnClick = ({ points }) => {
|
||||
alert('A bar is clicked');
|
||||
};
|
||||
|
||||
// Render the component
|
||||
return (
|
||||
<Container>
|
||||
<Plot
|
||||
data={[
|
||||
{
|
||||
name: 'Inbound',
|
||||
type: 'bar',
|
||||
x: [20, 14, 23, 22, 30, 12, 15, 26, 31, 16, 18, 29],
|
||||
y: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
'Oct',
|
||||
'Nov',
|
||||
'Dec',
|
||||
],
|
||||
marker: {
|
||||
line: {
|
||||
color: 'rgba(55, 128, 191, 1.0)',
|
||||
width: 1,
|
||||
},
|
||||
color: 'rgba(55, 128, 191, 0.6)',
|
||||
},
|
||||
orientation: 'h',
|
||||
},
|
||||
{
|
||||
name: 'Outbound',
|
||||
type: 'bar',
|
||||
x: [12, 18, 29, 22, 14, 23, 15, 23, 26, 13, 27, 12],
|
||||
y: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
'Oct',
|
||||
'Nov',
|
||||
'Dec',
|
||||
],
|
||||
marker: {
|
||||
line: {
|
||||
color: 'rgba(255, 153, 51, 1.0)',
|
||||
width: 1,
|
||||
},
|
||||
color: 'rgba(255, 153, 51, 0.6)',
|
||||
},
|
||||
orientation: 'h',
|
||||
},
|
||||
]}
|
||||
layout={{
|
||||
width: 840,
|
||||
height: 800,
|
||||
title: 'Tickets Resolved: Inbound & Outbound',
|
||||
showlegend: false,
|
||||
}}
|
||||
onClick={barOnClick}
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
// Connect the component
|
||||
const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent);
|
||||
|
||||
// Render the connected component to the DOM
|
||||
ReactDOM.render(<ConnectedComponent />, document.body);
|
||||
```
|
||||
|
||||
Let's understand the code above in detail. First, we imported the required libraries.
|
||||
**The steps to implement the above code is as follows:**
|
||||
|
||||
- Import the required libraries.
|
||||
|
||||
```js
|
||||
import React from 'https://cdn.skypack.dev/react'; // React library
|
||||
|
|
@ -148,7 +138,8 @@ import createPlotlyComponent from 'https://cdn.skypack.dev/react-plotly.js/facto
|
|||
```
|
||||
|
||||
|
||||
Then, we created a function component called `MyCustomComponent`. This component will render the chart. We use the `createPlotlyComponent` function to create a Plotly component. Then, we create a function called `barOnClick` that will be called when the user clicks on the bar. This function will display an alert message.
|
||||
- Create a function component called `MyCustomComponent`. This component will render the chart. The `createPlotlyComponent` function is used to create a Plotly component.
|
||||
- A function called `barOnClick` is created that will be called when the user clicks on the bar. This function will display an alert message.
|
||||
|
||||
```js
|
||||
const MyCustomComponent = ({data, updateData, runQuery}) => { // function component
|
||||
|
|
@ -159,106 +150,81 @@ const Plot = createPlotlyComponent(Plotly); // create a Plotly component
|
|||
}
|
||||
```
|
||||
|
||||
Next, we render the chart using the `Plot` component. We pass the data and layout to the `Plot` component. We also pass the `barOnClick` function to the `onClick` prop of the `Plot` component.
|
||||
- Render the chart using the `Plot` component. Pass the data and layout to the `Plot` component. Also pass the `barOnClick` function to the `onClick` prop of the `Plot` component.
|
||||
|
||||
```js
|
||||
return ( // return the Plot component
|
||||
<Container> // Material UI Container component
|
||||
<Plot data={[ // Plot component
|
||||
{ // data for the first bar
|
||||
"name": "Inbound",
|
||||
"type": "bar",
|
||||
"x": [
|
||||
20,
|
||||
14,
|
||||
23,
|
||||
22,
|
||||
30,
|
||||
12,
|
||||
15,
|
||||
26,
|
||||
31,
|
||||
16,
|
||||
18,
|
||||
29
|
||||
],
|
||||
"y": [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec"
|
||||
],
|
||||
"marker": {
|
||||
"line": {
|
||||
"color": "rgba(55, 128, 191, 1.0)",
|
||||
"width": 1
|
||||
},
|
||||
"color": "rgba(55, 128, 191, 0.6)"
|
||||
},
|
||||
"orientation": "h"
|
||||
},
|
||||
{ // data for the second bar
|
||||
"name": "Outbound",
|
||||
"type": "bar",
|
||||
"x": [
|
||||
12,
|
||||
18,
|
||||
29,
|
||||
22,
|
||||
14,
|
||||
23,
|
||||
15,
|
||||
23,
|
||||
26,
|
||||
13,
|
||||
27,
|
||||
12
|
||||
],
|
||||
"y": [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec"
|
||||
],
|
||||
"marker": {
|
||||
"line": {
|
||||
"color": "rgba(255, 153, 51, 1.0)",
|
||||
"width": 1
|
||||
},
|
||||
"color": "rgba(255, 153, 51, 0.6)"
|
||||
},
|
||||
"orientation": "h"
|
||||
}
|
||||
]}
|
||||
layout={{ // layout for the chart
|
||||
width: 840,
|
||||
height: 800,
|
||||
title: "Tickets Resolved: Inbound & Outbound",
|
||||
showlegend: false,
|
||||
}}
|
||||
onClick={barOnClick} // pass the barOnClick function to the onClick prop
|
||||
/>
|
||||
</Container>
|
||||
)}
|
||||
return (
|
||||
<Container>
|
||||
<Plot
|
||||
data={[
|
||||
{
|
||||
name: 'Inbound',
|
||||
type: 'bar',
|
||||
x: [20, 14, 23, 22, 30, 12, 15, 26, 31, 16, 18, 29],
|
||||
y: ['Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
'Oct',
|
||||
'Nov',
|
||||
'Dec',
|
||||
],
|
||||
marker: {
|
||||
line: {
|
||||
color: 'rgba(55, 128, 191, 1.0)',
|
||||
width: 1,
|
||||
},
|
||||
color: 'rgba(55, 128, 191, 0.6)',
|
||||
},
|
||||
orientation: 'h',
|
||||
},
|
||||
{
|
||||
name: 'Outbound',
|
||||
type: 'bar',
|
||||
x: [12, 18, 29, 22, 14, 23, 15, 23, 26, 13, 27, 12],
|
||||
y: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
'Oct',
|
||||
'Nov',
|
||||
'Dec',
|
||||
],
|
||||
marker: {
|
||||
line: {
|
||||
color: 'rgba(255, 153, 51, 1.0)',
|
||||
width: 1,
|
||||
},
|
||||
color: 'rgba(255, 153, 51, 0.6)',
|
||||
},
|
||||
orientation: 'h',
|
||||
},
|
||||
]}
|
||||
layout={{
|
||||
width: 840,
|
||||
height: 800,
|
||||
title: 'Tickets Resolved: Inbound & Outbound',
|
||||
showlegend: false,
|
||||
}}
|
||||
onClick={barOnClick}
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
Finally, we render the `MyCustomComponent` component using the `ReactDOM.render` function.
|
||||
- Render the `MyCustomComponent` component using the `ReactDOM.render` function.
|
||||
|
||||
```js
|
||||
const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent); // connect the component to the Tooljet store
|
||||
|
|
|
|||
|
|
@ -4,195 +4,135 @@ title: Use S3 Signed URL to Upload Documents
|
|||
---
|
||||
<div style={{paddingBottom:'24px'}}>
|
||||
|
||||
In this how-to guide, you'll learn to upload documents to S3 buckets using the **S3 signed URL** from a ToolJet application.
|
||||
In this how-to guide, we will upload documents to S3 buckets using the **S3 signed URL** from a ToolJet application.
|
||||
|
||||
For this guide, We are going to use one of the existing templates on ToolJet: **S3 File explorer**
|
||||
|
||||
:::info using Templates
|
||||
On ToolJet Dashboard, Click on the down arrow on the right of the **New App** button, from the dropdown choose the **Choose from template** option.
|
||||
:::
|
||||
For this guide, we are going to use one of the existing templates on ToolJet: **S3 File explorer**
|
||||
|
||||
</div>
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
## Create an App Using Templates
|
||||
|
||||
- On ToolJet Dashboard, click on the ellipses on the right of the **Create new app** button, from the dropdown choose the **Choose from template** option. Select **AWS S3 file explorer** and click on the **Create application from template**.
|
||||
|
||||
|
||||
<div style={{textAlign: 'left'}}>
|
||||
|
||||
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/uses3presignedurl/template.png" alt="Use S3 pre-signed URL to upload documents: Choose template" width="700"/>
|
||||
<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/how-to/uses3presignedurl/template-v2.png" alt="Use S3 pre-signed URL to upload documents: Choose template" width="700"/>
|
||||
|
||||
</div>
|
||||
|
||||
- Once you've created a new app using the template, you'll be prompted to create a **new version** of the existing version. After creating a new version, you'll be able to make changes in the app.
|
||||
- Go to the **Data sources** on the left-sidebar; you'll find that the **AWS S3 data source** has already been added. All you need to do is update the data source credentials.
|
||||
|
||||
:::tip
|
||||
Check the [AWS S3 data source reference](/docs/data-sources/s3) to learn more about connnection and choosing your preferred authentication method.
|
||||
:::
|
||||
|
||||
<div style={{textAlign: 'left'}}>
|
||||
|
||||
<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/how-to/uses3presignedurl/s3connect-v2.png" alt="Use S3 pre-signed URL to upload documents: add datasource"/>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
## Get the Buckets
|
||||
|
||||
- Once the data source is connected successfully, go to the query manager and **Run** the *getBuckets* query. The operation selected in the *getBuckets* query is **List buckets**, which will fetch an array of all the buckets.
|
||||
|
||||
<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/how-to/uses3presignedurl/getbuckets-v2.png" alt="Use S3 pre-signed URL to upload documents: getBuckets query"/>
|
||||
|
||||
</div>
|
||||
|
||||
- Running the *getBuckets* query will load all the buckets in the app's left 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/how-to/uses3presignedurl/newversion.png" alt="Use S3 pre-signed URL to upload documents: new version"/>
|
||||
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/uses3presignedurl/dropdown-v2.png" alt="Use S3 pre-signed URL to upload documents: loading buckets"/>
|
||||
|
||||
</div>
|
||||
|
||||
- Go to the **datasource manager** on the left-sidebar, you'll find that the **AWS S3 datasource** is already added. All you need to do is update the datasource **credentials**.
|
||||
</div>
|
||||
|
||||
:::tip
|
||||
Check the [AWS S3 datasource reference](/docs/data-sources/s3) to learn more about connnection and choosing your preferred authentication method.
|
||||
:::
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
## Get the Objects Inside the Bucket
|
||||
|
||||
|
||||
<div style={{textAlign: 'left'}}>
|
||||
|
||||
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/uses3presignedurl/s3connect.png" alt="Use S3 pre-signed URL to upload documents: add datasource"/>
|
||||
|
||||
</div>
|
||||
|
||||
- Once the datasource is connected successfully, go to the query manager and **Run** the **getBuckets** query. The operation selected in the getBuckets query is **List Buckets** which will fetch an array of all the buckets.
|
||||
- To fetch the data inside a bucket, select the bucket from the buckets table, go to the query manager and choose the *getObjects* query. Choose the relevant data source in the **Data Source** section, and for the **Operation** parameter, choose `List objects in a bucket` option from the dropdown. Replace the **Bucket** parameter with, `{{components.table2.selectedRow.Name}}` and click on the **Run** to list all the files from the selected bucket on the 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/how-to/uses3presignedurl/getbuckets.png" alt="Use S3 pre-signed URL to upload documents: getBuckets query"/>
|
||||
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/uses3presignedurl/fetchfiles-v2.png" alt="Use S3 pre-signed URL to upload documents: list objects in a bucket"/>
|
||||
|
||||
</div>
|
||||
|
||||
- Running the **getBuckets** query will load all the buckets in the dropdown in the app.
|
||||
</div>
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
## Get the Signed URL for Downlaod
|
||||
|
||||
The object owner can optionally share objects with others by creating a presigned URL, using their own security credentials, to grant time-limited permission to download the objects. For creating a presigned URL, in the query panel replace the parameters with the following:
|
||||
|
||||
- **Data Source**: Use the relevant data source.
|
||||
- **Operation**: Choose `Signed url for download` from the dropdown.
|
||||
- **Bucket**: `{{components.table2.selectedRow.Name}}` to select the buckets dynamically.
|
||||
- **Key**: `{{components.table3.selectedRow.Key}}`, this will get the file name from the filepickers exposed variables.
|
||||
- **Expires in**: This sets an expiration time of URL, by default its `3600` seconds (1 hour).
|
||||
|
||||
After setting up the parameters, click **Run** to run the query, and the URL can be accessed as shown in the screenshot.
|
||||
|
||||
<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/how-to/uses3presignedurl/dropdown.png" alt="Use S3 pre-signed URL to upload documents: loading buckets"/>
|
||||
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/uses3presignedurl/get-signed-url.png" alt="Use S3 pre-signed URL to upload documents: get signed URL"/>
|
||||
|
||||
</div>
|
||||
|
||||
- Select a **bucket** from the dropdown and click on the **Fetch files** button to list all the files from the selected bucket on the table. The **Fetch files** button has the event handler added that triggers the **s32** query, the **s32** query uses the **List objects in a bucket** operation, and the bucket field in the query gets the value dynamically from the dropdown.
|
||||
</div>
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
## Upload Objects to the Bucket
|
||||
|
||||
The `Upload Object` operation allows users to select a bucket and then upload their chosen data into that bucket. To upload objects in a bucket, follow the steps below:
|
||||
|
||||
- In the query panel navigate to *uploadObject* query.
|
||||
- Choose your relevant data source in the **Data Source** section.
|
||||
- In the **Operation** section, choose `Upload Object` from the dropdown.
|
||||
- In the **Bucket** section, copy the code: `{{components.table2.selectedRow.Name}}`, to choose a bucket dynamically.
|
||||
- In the **Key** section, copy the code: `{{components.textinput2.value}}`.
|
||||
- In the **Content Type** section, copy: `{{components.filepicker1.file[0].type}}`.
|
||||
- In the **Upload data** section, copy: `{{components.filepicker1.file[0].dataURL}}`.
|
||||
|
||||
To make sure the image is uploaded successfully, we can create a new event from the **Events** section.
|
||||
- Under the `Events` section, click on **New event handler**.
|
||||
- From the `Event` dropdown, choose `Query Success`.
|
||||
- From the `Action` dropdown, choose `Show Alert`.
|
||||
- The `Message` can be of your choice, in this example lets write the message as: `Image uploaded successfully`.
|
||||
|
||||
Once the query has been created, choose the desired bucket, click on the **Upload file** button in the app, and upload your desired file to your bucket.
|
||||
|
||||
</div>
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
## Access the Signed URL
|
||||
|
||||
After uploading the file to your bucket, in the files table, click on the **Copy signed URL** button from the **Actions** section of the table, which will copy the URL on the clipboard. You can go to another tab and paste the URL to open the file on the browser.
|
||||
|
||||
<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/how-to/uses3presignedurl/fetchfiles.png" alt="Use S3 pre-signed URL to upload documents: list objects in a bucket"/>
|
||||
<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/how-to/uses3presignedurl/access-signed-url.png" alt="Use S3 pre-signed URL to upload documents: access signed URL"/>
|
||||
|
||||
</div>
|
||||
|
||||
- Let's go to the **uploadToS3** query and update the field values:
|
||||
- **Operation**: Signed URL for upload
|
||||
- **Bucket**: `{{components.dropdown1.value}}` this will fetch the dynamic value from the dropdown
|
||||
- **Key**: `{{components.filepicker1.file[0].name}}` this will get the file name from the filepickers exposed variables
|
||||
- **Expires in:** This sets an expiration time of URL, by default its `3600` seconds (1 hour)
|
||||
- **Content Type**: `{{components.filepicker1.file[0].type}}` this will get the file type from the filepickers exposed variables
|
||||
|
||||
|
||||
|
||||
<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/how-to/uses3presignedurl/upload.png" alt="Use S3 pre-signed URL to upload documents"/>
|
||||
|
||||
</div>
|
||||
|
||||
- Create two **RunJS** queries:
|
||||
- Create a **runjs1** query and copy-paste the code below. This query gets the **base64data** from the file picker and convert the file's `base64Data` to into `BLOB`, and returns the file object.
|
||||
```js
|
||||
const base64String = components.filepicker1.file[0].base64Data
|
||||
const decodedArray = new Uint8Array(atob(base64String).split('').map(c => c.charCodeAt(0)));
|
||||
const file = new Blob([decodedArray], { type: components.filepicker1.file[0].type });
|
||||
const fileName = components.filepicker1.file[0].name;
|
||||
const fileObj = new File([file], fileName);
|
||||
|
||||
return fileObj
|
||||
```
|
||||
|
||||
|
||||
|
||||
<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/how-to/uses3presignedurl/runjs1.png" alt="Use S3 pre-signed URL to upload documents"/>
|
||||
|
||||
</div>
|
||||
|
||||
- Create another **runjs2** query and copy-paste the code below. This query gets the data(file object) returned by the first runjs query, the url returned by the **uploadToS3** query, and then makes PUT request.
|
||||
```js
|
||||
const file = queries.runjs2.data
|
||||
const url = queries.s31.data.url
|
||||
|
||||
fetch(url, {
|
||||
method: 'PUT',
|
||||
body: file,
|
||||
mode: 'cors',
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(response => console.log('Upload successful!'))
|
||||
.catch(error => console.error('Error uploading file:', error));
|
||||
```
|
||||
:::warning Enable Cross Origin Resource Sharing(CORS)
|
||||
- For the file to be uploaded successfully, you will need to add the CORS policies from the **Permissions** tab of your **Bucket** settings. Here's a sample CORS:
|
||||
```json
|
||||
[
|
||||
{
|
||||
"AllowedHeaders": [
|
||||
"*"
|
||||
],
|
||||
"AllowedMethods": [
|
||||
"GET",
|
||||
"PUT",
|
||||
"POST"
|
||||
],
|
||||
"AllowedOrigins": [
|
||||
"*"
|
||||
],
|
||||
"ExposeHeaders": []
|
||||
}
|
||||
]
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
|
||||
<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/how-to/uses3presignedurl/runjs2.png" alt="Use S3 pre-signed URL to upload documents"/>
|
||||
|
||||
</div>
|
||||
|
||||
- Go to the **uploadToS3**, scroll down and add an event handler to the **uploadToS3** query. Select the **Query Success** event, **Run Query** as the action, and **runjs1** as the query to be triggered. **Save** the query.
|
||||
|
||||
|
||||
<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/how-to/uses3presignedurl/eventhandlerupload.png" alt="Use S3 pre-signed URL to upload documents"/>
|
||||
|
||||
</div>
|
||||
|
||||
- Let's go to the **runjs1** query and add the event handler to run a query on query success event, similar to how we did in the previous step. In the event handler, choose **runjs2** query. **Save** the query.
|
||||
|
||||
|
||||
<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/how-to/uses3presignedurl/eventhandlerrunjs2.png" alt="Use S3 pre-signed URL to upload documents"/>
|
||||
|
||||
</div>
|
||||
|
||||
- Now, let's go the final query **copySignedURL** that is connected to the table's action button. This query copy's the generated **Signed URL for download** onto the **clipboard**.
|
||||
|
||||
|
||||
<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/how-to/uses3presignedurl/copysigned.png" alt="Use S3 pre-signed URL to upload documents"/>
|
||||
|
||||
</div>
|
||||
|
||||
- Now that we have updated all the queries, and connected them through the event handlers. We can go ahead and pick a file from the file picker. Click on the file picker, select a file and then hit the **Upload file to S3** button.
|
||||
|
||||
|
||||
<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/how-to/uses3presignedurl/uploadbutton.png" alt="Use S3 pre-signed URL to upload documents"/>
|
||||
|
||||
</div>
|
||||
|
||||
- Once the button is clicked, the **uploadToS3** will triggered along with the **runjs1** and **runjs2** queries in sequence since we added them in the event handlers.
|
||||
|
||||
- You can go to the table and click on the **Copy signed URL** action button on the table, this will trigger the **copySignedURL** query and will copy the URL on the clipboard. You can go to another tab and paste the URL to open the file on the browser.
|
||||
|
||||
</div>
|
||||
|
|
@ -263,7 +263,7 @@ Returns data from a table for one or more matching conditions.
|
|||
| ---------- | ----------- |
|
||||
| Schema (required) | schema where the table you are searching lives |
|
||||
| Table (required) | table you wish to search |
|
||||
| Operator inbetween each condition (optional) | the operator used between each condition - 'And', 'Or'. The default is 'And'. |
|
||||
| Operator in-between each condition (optional) | the operator used between each condition - 'And', 'Or'. The default is 'And'. |
|
||||
| Offset (optional) | the number of records that the query results will skip. The default is 0. |
|
||||
| Limit (optional) | the number of records that the query results will include. The default is null, resulting in no limit. |
|
||||
| Table Attributes (required) | define which attributes you want returned. |
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ This operation lets you analyze the document using the document data in **base64
|
|||
|
||||
#### Required Parameters:
|
||||
|
||||
- **Document**: Supply the document data in base64 format. File Picker component can be used here to pick the document from the local system and retrieve the base64 data dynamically using exposed variables. Example: **{{components.filepicker1.file[0].base64Data}}**.
|
||||
- **Document**: Supply the document data in base64 format. File Picker component can be used here to pick the document from the local system and retrieve the base64 data dynamically using exposed variables. Example: `{{components.filepicker1.file[0].base64Data}}`.
|
||||
- **Data Output**: Choose the desired data output types for the document analysis. Options include:
|
||||
1. **Forms**: Extract key and value pairs from forms.
|
||||
2. **Tables**: Extract data from tables, including headers and cell content.
|
||||
|
|
|
|||
|
|
@ -87,6 +87,28 @@ Example: If you add a builder seat halfway through your monthly billing cycle, y
|
|||
|
||||
- You can directly reach out to us via **[Slack](https://tooljet.com/slack)** or **[email](mailto:hello@tooljet.com)** and we will be happy to provide you the support.
|
||||
|
||||
## Invoice History
|
||||
|
||||
### A) Business Plan
|
||||
|
||||
You can find your past invoices in the subscriptions overview card. Here's how to get there:
|
||||
|
||||
- Click on the gear icon (⚙️) on the bottom left of the dashboard and select **Settings**.
|
||||
- From the settings page, click on the **Subscriptions** tab.
|
||||
- On the **Subscriptions** page, you'll see a subscription overview card summarizing your current plan.
|
||||
- Click on the **View Invoices** button to access your invoice history.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
<img className="screenshot-full" src="/img/licensing/invoice-history.gif" alt="Invoice History" />
|
||||
|
||||
</div>
|
||||
|
||||
### B) Enterprise Plan
|
||||
|
||||
- You can directly reach out to us via **[Slack](https://tooljet.com/slack)** or **[email](mailto:hello@tooljet.com)** and we will be happy to provide you the support.
|
||||
|
||||
|
||||
## Frequently Asked Questions (FAQs)
|
||||
|
||||
### 1) How can I upgrade or renew my subscription?
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ Please check the detailed doc on **[Permissions](/docs/org-management/permission
|
|||
|
||||
- Administrators can manage [users and groups](/docs/tutorial/manage-users-groups) of each workspace.
|
||||
- Applications and settings cannot be shared between workspaces.
|
||||
- Users authorised to login to ToolJet will not have access to all workspaces. Users must be invited to or sign up for a workspace before they can log in.
|
||||
- Users authorized to login to ToolJet will not have access to all workspaces. Users must be invited to or sign up for a workspace before they can log in.
|
||||
- When the Multi-Workspace feature is enabled, users must log in with a username and password.
|
||||
- Administrators can configure authentication methods for their workspaces.
|
||||
- If password login is enabled, switching to the workspace will happen without any other authorization since the user is already authorized with password login.
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ For example: `SERVE_CLIENT=false TOOLJET_SERVER_URL=https://server.tooljet.io np
|
|||
Tooljet client can be hosted from Cloud Storage bucket just like hosting any other static website.
|
||||
Follow the instructions from google documentation [here](https://cloud.google.com/storage/docs/hosting-static-website).
|
||||
|
||||
Summarising the steps below:
|
||||
Summarizing the steps below:
|
||||
1. Create a bucket and upload files within the build folder such that the `index.html` is at the bucket root.
|
||||
|
||||
2. Edit permissions for the bucket to assign *New principal* as `allUsers` with role as `Storage Object Viewer` and permit for public access for the bucket.
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ Use this environment variable to enable/disable the developement mode that allow
|
|||
| PGRST_JWT_SECRET | JWT token client provided for authentication |
|
||||
| PGRST_HOST | postgrest database host |
|
||||
|
||||
Use `ENABLE_TOOLJET_DB` to enable/disable the feature that allows users to work with inbuilt data store to build apps with. Inorder to set it up, [follow the instructions here](/docs/tooljet-database#enabling-the-tooljet-database-for-your-instance).
|
||||
Use `ENABLE_TOOLJET_DB` to enable/disable the feature that allows users to work with inbuilt data store to build apps with. In order to set it up, [follow the instructions here](/docs/tooljet-database#enabling-the-tooljet-database-for-your-instance).
|
||||
|
||||
:::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.
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ Make sure to edit the environment variables in the `deployment.yaml`. We advise
|
|||
If there are self signed HTTPS endpoints that Tooljet needs to connect to, please make sure that `NODE_EXTRA_CA_CERTS` environment variable is set to the absolute path containing the certificates. You can make use of kubernetes secrets to mount the certificate file onto the containers.
|
||||
:::
|
||||
|
||||
3. Create k8s service and reserve a static IP and inorder expose it via a service load balancer as mentioned in the [doc](https://docs.microsoft.com/en-us/azure/aks/static-ip). You can refer `service.yaml`.
|
||||
3. Create k8s service and reserve a static IP and expose it via a service load balancer as mentioned in the [doc](https://docs.microsoft.com/en-us/azure/aks/static-ip). You can refer `service.yaml`.
|
||||
```bash
|
||||
curl -LO https://tooljet-deployments.s3.us-west-1.amazonaws.com/kubernetes/AKS/service.yaml
|
||||
```
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ If there are self signed HTTPS endpoints that Tooljet needs to connect to, pleas
|
|||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
<img className="screenshot-full" src="/img/setup/openshift/toplogy.png" alt="toplogy" />
|
||||
<img className="screenshot-full" src="/img/setup/openshift/toplogy.png" alt="topology" />
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -28,15 +28,4 @@ docker run -d \
|
|||
- You can make use of `--env` or `--env-file` flag to test against various env configurables mentioned [here](https://docs.tooljet.com/docs/setup/env-vars).
|
||||
- Use `docker stop tooljet` to stop the container and `docker start tooljet` to start the container thereafter.
|
||||
|
||||
## On Play with docker
|
||||
|
||||
You can deploy ToolJet on PWD for free with the one-click-deployment button below.
|
||||
|
||||
<a href="https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/docker/play-with-docker.yml">
|
||||
<img src="https://raw.githubusercontent.com/play-with-docker/stacks/master/assets/images/button.png" alt="Try in PWD" height="32"/>
|
||||
</a>
|
||||
|
||||
#### Setup information
|
||||
|
||||
- Open port 80 after the docker containers are up and running
|
||||
- Visit the url shared on the dashboard to try out tooljet
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ title: ToolJet CLI
|
|||
ToolJet CLI is a powerful tool that empowers developers to effortlessly create and enhance Marketplace plugins for ToolJet workspace.
|
||||
|
||||
:::info
|
||||
Starting from ToolJet CLI version 0.0.14, the creation of datasource plugins has been deprecated to prioritise marketplace plugins. This change enhances the plugin development experience and aligns with ToolJet's roadmap.
|
||||
Starting from ToolJet CLI version 0.0.14, the creation of datasource plugins has been deprecated to prioritize marketplace plugins. This change enhances the plugin development experience and aligns with ToolJet's roadmap.
|
||||
:::
|
||||
|
||||
## Installation
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ Clicking on `Preview` will open up the currently opened version of the app in th
|
|||
|
||||
## Sharing an app
|
||||
|
||||
Once you have released a version of your app, you can share the app with others using a customised url. To share an app:
|
||||
Once you have released a version of your app, you can share the app with others using a customized url. To share an app:
|
||||
|
||||
- Click on the **Share** button on the top-right corner
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ title: AzureAD
|
|||
To construct a Well Known URL refer this link :: https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-protocols-oidc
|
||||
:::
|
||||
|
||||
- Open your organisation page and select `app registration`
|
||||
- Open your organization page and select `app registration`
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
<img style={{ width:'100%', border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/sso/azuread/azure-app-reg.png" alt="Azure AD: SSO" />
|
||||
|
|
@ -23,7 +23,7 @@ To construct a Well Known URL refer this link :: https://docs.microsoft.com/en-u
|
|||
|
||||
</div>
|
||||
|
||||
- Open your organisation page and select App registration.
|
||||
- Open your organization page and select App registration.
|
||||
|
||||
- Enter name, select supported account type and enter the redirect URL which can be copied from `Manage SSO -> Open Id -> Redirect URL, click on register`.
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
|
|
|||
|
|
@ -24,11 +24,11 @@ title: Google (Open ID)
|
|||
|
||||
</div>
|
||||
|
||||
- Set **Name** as `Google` and get the **Client ID** and **Client Secret** from your [Google Clound Console](https://console.cloud.google.com/apis/credentials).
|
||||
- Set **Name** as `Google` and get the **Client ID** and **Client Secret** from your [Google Cloud Console](https://console.cloud.google.com/apis/credentials).
|
||||
|
||||
- Set the **Well Known URL** to `https://accounts.google.com/.well-known/openid-configuration`
|
||||
|
||||
#### Generating Cliend ID and Cliend Secret on GCS
|
||||
#### Generating Client ID and Client Secret on GCS
|
||||
|
||||
- Go to [Google cloud console](https://console.cloud.google.com/) and create a project.
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
|
@ -68,7 +68,7 @@ user who is signing in
|
|||
|
||||
</div>
|
||||
|
||||
- Set the `Redirect URL` generated at manage SSO `Open ID` page under Authorised redirect URIs
|
||||
- Set the `Redirect URL` generated at manage SSO `Open ID` page under Authorized redirect URIs
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
<img className="screenshot-full" src="/img/sso/google/authorized-redirect-urls.png" alt="Google Open ID" width="700"/>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ title: Bounded Box
|
|||
|
||||
# Bounded Box
|
||||
|
||||
A **bounded box** is an infinitely customizable image annotation component that can be used to select and tag areas within an image. It supports selection using specific points (landmarking) or drawing rectangular areas (bounding boxes). It can be used to create datasets for machine learning models or to annotate images for other purposes.
|
||||
A **Bounded Box** is an infinitely customizable image annotation component that can be used to select and tag areas within an image. It supports selection using specific points (landmarking) or drawing rectangular areas (bounding boxes). It can be used to create datasets for machine learning models or to annotate images for other purposes.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ A **bounded box** is an infinitely customizable image annotation component that
|
|||
|
||||
| <div style={{ width:"100px"}}> **Property** </div> | <div style={{ width:"100px"}}> **Description** </div> | <div style={{ width:"150px"}}> **Expected Value** </div> |
|
||||
| :----------- | :----------- | :----------------- |
|
||||
| Image URL | The URL or image data to show it on the component. | Get the image URL dynamically from database: **{{queries.queryname.data[0].url}}** or use [image's base64 data](/docs/how-to/loading-image-pdf-from-db/) |
|
||||
| Image URL | The URL or image data to show it on the component. | Get the image URL dynamically from database: `{{queries.queryname.data[0].url}}` or use [image's base64 data](/docs/how-to/loading-image-pdf-from-db/) |
|
||||
| Default value | The data that will load the default bounded boxes over the image when the app is loaded. | Array of objects. Check the [Default value](#default-value) data properties |
|
||||
| Selector | The bounded box support selection using rectangle or point. | Click **Fx** to set the value `RECTANGLE` or `POINT` |
|
||||
| List of labels | The list of label that will be displayed in the dropdown while selection in the bounded-box. | Labels in array format: `{{['Tree', 'Car', 'Stree light']}}` |
|
||||
|
|
@ -38,12 +38,12 @@ Provide the data that will load the default bounding boxes over the image when t
|
|||
|
||||
| <div style={{ width:"100px"}}> **Property** </div> | <div style={{ width:"100px"}}> **Description** </div> | <div style={{ width:"150px"}}> **Expected Value** </div> |
|
||||
| :-------- | :------ | :-------- |
|
||||
| type | Sets the type of the bounded box. | `RECTANGLE` or `POINT` |
|
||||
| width | Sets the width of the bounded box in pixels. | Numeric value. If the `type` value is `POINT`, set it to `0` |
|
||||
| height | Sets the height of the bounded box in pixels. | Numeric value. If the `type` value is `POINT`, set it to `0` |
|
||||
| x | Sets the x-coordinate(horizontal) position of the bounded box in the image. | Numerical value ex: `41` |
|
||||
| y | Sets the y-coordinate(vertical) position of the bounded box in the image. | Numerical value ex: `22` |
|
||||
| text | Sets the text value of the bounded box. | It should be one of the labels provided in the **[List of labels](#properties)** property |
|
||||
| type | Sets the type of the Bounded Box. | `RECTANGLE` or `POINT` |
|
||||
| width | Sets the width of the Bounded Box in pixels. | Numeric value. If the `type` value is `POINT`, set it to `0` |
|
||||
| height | Sets the height of the Bounded Box in pixels. | Numeric value. If the `type` value is `POINT`, set it to `0` |
|
||||
| x | Sets the x-coordinate(horizontal) position of the Bounded Box in the image. | Numerical value ex: `41` |
|
||||
| y | Sets the y-coordinate(vertical) position of the Bounded Box in the image. | Numerical value ex: `22` |
|
||||
| text | Sets the text value of the Bounded Box. | It should be one of the labels provided in the **[List of labels](#properties)** property |
|
||||
|
||||
**Example of default values:**
|
||||
|
||||
|
|
@ -80,7 +80,7 @@ Events are actions that can be triggered programmatically when the user interact
|
|||
|
||||
| <div style={{ width:"100px"}}> **Event** </div> | <div style={{ width:"100px"}}> **Description** </div> |
|
||||
| :----------- | :----------- |
|
||||
| On change | Triggered when the label from the dropdown in the selector is changed in the bounded box. |
|
||||
| On change | Triggered when the label from the dropdown in the selector is changed in the Bounded Box. |
|
||||
|
||||
:::info
|
||||
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Button Group
|
|||
---
|
||||
# Button Group
|
||||
|
||||
The Button group component is used to group a series of buttons together in a single line. It is used to group related buttons.
|
||||
The **Button Group** component is used to group a series of buttons together in a single line. It is used to group related buttons.
|
||||
|
||||
<div style={{textAlign: 'left'}}>
|
||||
|
||||
|
|
@ -19,8 +19,8 @@ The Button group component is used to group a series of buttons together in a si
|
|||
| <div style={{ width:"100px"}}> Properties </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
|
||||
|:----------- |:----------- |:-------------- |
|
||||
| label | Sets the title of the button-group. | Any **String** value: `Select the options` or `{{queries.queryname.data.text}}` |
|
||||
| values | Sets the values of the button group items. | **Array** of strings and numbers: `{{[1,2,3]}}` |
|
||||
| Labels | Sets the labels of the button group items. | **Array** of strings and numbers: `{{['A','B','C']}}` |
|
||||
| values | Sets the values of the Button Group items. | **Array** of strings and numbers: `{{[1,2,3]}}` |
|
||||
| Labels | Sets the labels of the Button Group items. | **Array** of strings and numbers: `{{['A','B','C']}}` |
|
||||
| Default selected | Sets the initial selected values. | **Array** of strings and numbers: `{{[1]}}` will select the first button by default. |
|
||||
| Enable multiple selection | Toggle on or off to enable multiple selection. | **Boolean** value: `{{true}}` or `{{false}}` |
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ Events are actions that can be triggered programmatically when the user interact
|
|||
|
||||
| <div style={{ width:"100px"}}> Events </div> | <div style={{ width:"100px"}}> Description </div> |
|
||||
|:----------- |:----------- |
|
||||
| On click | This event is triggered when the user clicks on the button in the button group. |
|
||||
| On click | This event is triggered when the user clicks on the button in the Button Group. |
|
||||
|
||||
:::info
|
||||
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Button
|
|||
---
|
||||
# Button
|
||||
|
||||
Button component can be used to trigger an action. It can be used to submit a form, navigate to another page, or trigger a query.
|
||||
**Button** component can be used to trigger an action. It can be used to submit a form, navigate to another page, or trigger a query.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
@ -13,7 +13,7 @@ Button component can be used to trigger an action. It can be used to submit a fo
|
|||
| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
|
||||
| :----------- | :----------- | :----------- |
|
||||
| Button text | Used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}` |
|
||||
| Loading state | The loading state is used to show a spinner as the button content. Loading state is commonly used with isLoading property of the queries to show a loading status while a query is being run. | Toggle the switch **On** or click on **fx** to programmatically set the value to ``{{true}}`` or ``{{false}}`` |
|
||||
| Loading state | The loading state is used to show a spinner as the button content. Loading state is commonly used with isLoading property of the queries to show a loading status while a query is being run. | Toggle the switch **On** or click on **fx** to programmatically set the value to `{{true}}` or `{{false}}` |
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
|
|||
|
||||
## Component Specific Actions (CSA)
|
||||
|
||||
Following actions of button component can be controlled using the component specific actions(CSA):
|
||||
Following actions of Button component can be controlled using the component specific actions(CSA):
|
||||
|
||||
| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
| :----------- | :----------- | :--------|
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Calendar
|
|||
---
|
||||
# Calendar
|
||||
|
||||
Calendar widget comes with the following features:
|
||||
**Calendar** widget comes with the following features:
|
||||
- **Day, month and week level views**
|
||||
- **Events**
|
||||
- **Resource scheduling**
|
||||
|
|
@ -164,12 +164,12 @@ Determines whether to display a popover whenever an event is clicked. Click on `
|
|||
|
||||
## Events
|
||||
|
||||
| <div style={{ width:"100px"}}> Event </div> | <div style={{ width:"200px"}}> Description </div> |
|
||||
|: ---------- | :---------- |
|
||||
| **On Event Selected** | This event is fired when the user clicks on a calendar event. Last selected event is exposed as `selectedEvent`. |
|
||||
| **on Slot Selected** | This event is fired when the user either clicks on an calendar slot(empty cell or empty space of a cell with event) or when they click and drag to select multiple slots. Last selected slot(s) are exposed as `selectedSlots`. |
|
||||
| **On Date Navigate** | This event is fired when the user clicks on `Today`, `Next` or `Back` buttons on the calendar. The corresponding date to which the user navigated, will be exposed as `currentDate`.. |
|
||||
| **On View Change** | This event is fired when a different view is selected by the user. The current view is exposed as `currentView`. |
|
||||
| Event | Description |
|
||||
|:-----:|:-----------:|
|
||||
| **On Event Selected** | This event is fired when the user clicks on a calendar event. Last selected event is exposed as `selectedEvent`. |
|
||||
| **on Slot Selected** | This event is fired when the user either clicks on an calendar slot(empty cell or empty space of a cell with event) or when they click and drag to select multiple slots. Last selected slot(s) are exposed as `selectedSlots`. |
|
||||
| **On Date Navigate** | This event is fired when the user clicks on `Today`, `Next` or `Back` buttons on the calendar. The corresponding date to which the user navigated, will be exposed as `currentDate`. |
|
||||
| **On View Change** | This event is fired when a different view is selected by the user. The current view is exposed as `currentView`. |
|
||||
|
||||
:::info
|
||||
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
|
||||
|
|
@ -181,7 +181,7 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
|
|||
|
||||
## Component Specific Actions (CSA)
|
||||
|
||||
There are currently no CSA (Component-Specific Actions) implemented to regulate or control the calendar component.
|
||||
There are currently no CSA (Component-Specific Actions) implemented to regulate or control the Calendar component.
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -192,7 +192,7 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
|
|||
| Variables | Description |
|
||||
| ----------- | ----------- |
|
||||
| selectedEvent | This variable stores information about the event that has been chosen on the calendar component. This object comprises keys like **title**, **start**, **end**, **allDay**, and **color**, and they can be accessed dynamically through JS using the following syntax: `{{components.calendar1.selectedEvent.title}}` or `{{components.calendar1.selectedEvent.start}}` |
|
||||
| selectedSlots | The variable selectedSlots contains the values of the slots chosen on the calendar component. This object comprises keys like **slots**, **start**, **end**, **resourceId**, and **action**, and they can be accessed dynamically through JS using the following syntax: {{components.calendar1.selectedSlots.slots[0]}} or {{components.calendar1.selectedSlots.end}}. |
|
||||
| selectedSlots | The variable selectedSlots contains the values of the slots chosen on the calendar component. This object comprises keys like **slots**, **start**, **end**, **resourceId**, and **action**, and they can be accessed dynamically through JS using the following syntax: `{{components.calendar1.selectedSlots.slots[0]}}` or `{{components.calendar1.selectedSlots.end}}`. |
|
||||
| currentView | The currentView variable holds the type of view currently set on the calendar. The value updates when the user changes the view from the calendar header. Types of views supported: `month`, `week`, and `day`. The value can be accessed using `{{components.calendar1.currentView}}` |
|
||||
| currentDate | The currentDate variable holds the current date data. The date returned by the variable is in the `MM-DD-YYYY HH:mm:ss A Z` format. The value can be accessed using `{{components.calendar1.currentDate}}`|
|
||||
|
||||
|
|
@ -203,7 +203,7 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
|
|||
## General
|
||||
#### Tooltip
|
||||
|
||||
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget. Under the <b>General</b> accordion,you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
|
||||
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget. Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -222,11 +222,11 @@ A Tooltip is often used to specify extra information about something when the us
|
|||
|
||||
## Styles
|
||||
|
||||
| <div style={{ width:"150px"}}> Style </div> | <div style={{ width:"150px"}}> Description </div> |
|
||||
|:---------------|:------------|:---------------|
|
||||
| **Visibility** | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`. |
|
||||
| **Cell Size in Views Classified by Resource** | When `resources` are specified, the calendar could take up quite a lot of horizontal space, making the horizontal scroll bar of calendar having to be relied upon all the time. |
|
||||
| **Header Date Format on Week View** | This format determines how the column header for each day in week view will be displayed. As with every other date format field in ToolJet, this follows the **momentjs** standard of date formatting. By default, its set to `DD MMM`. |
|
||||
| Style | Description |
|
||||
|:-----:|:-----------:|
|
||||
| **Visibility** | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`. |
|
||||
| **Cell Size in Views Classified by Resource** | When `resources` are specified, the calendar could take up quite a lot of horizontal space, making the horizontal scroll bar of calendar having to be relied upon all the time. |
|
||||
| **Header Date Format on Week View** | This format determines how the column header for each day in week view will be displayed. As with every other date format field in ToolJet, this follows the momentjs standard of date formatting. By default, its set to `DD MMM`. |
|
||||
|
||||
:::info
|
||||
Any property having `Fx` button next to its field can be **programmatically configured**.
|
||||
|
|
|
|||
|
|
@ -59,11 +59,12 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
|
|||
|
||||
## Exposed Variables
|
||||
|
||||
| <div style={{ width:"100px"}}> Variable </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{width: "200px"}}> How To Access </div>|
|
||||
|: ---------- | :---------- | :------------ |
|
||||
| chartTitle | Holds the title of the chart component. | Accessible dynamically with JS (for e.g., `{{components.chart1.chartTitle}}`). |
|
||||
| xAxisTitle | Contains the title for the X-axis of the chart. | Accessible dynamically with JS (for e.g., `{{components.chart1.xAxisTitle}}`). |
|
||||
| yAxisTitle | Contains the title for the Y-axis of the chart. | Accessible dynamically with JS (for e.g., `{{components.chart1.yAxisTitle}}`). |
|
||||
|
||||
| Variable| Description | How To Access |
|
||||
| ------- | ------------- | -------------- |
|
||||
| chartTitle | Holds the title of the chart component. | Accessible dynamically with JS (for e.g., `{{components.chart1.chartTitle}}`).|
|
||||
| xAxisTitle | Contains the title for the X-axis of the chart. | Accessible dynamically with JS (for e.g., `{{components.chart1.xAxisTitle}}`). |
|
||||
| yAxisTitle | Contains the title for the Y-axis of the chart. | Accessible dynamically with JS (for e.g., `{{components.chart1.yAxisTitle}}`). |
|
||||
| clickedDataPoints | Stores details about the data points that were clicked.| Accessible dynamically with JS (for e.g., `{{components.chart1.clickedDataPoints}}`). Each data point includes `xAxisLabel`, `yAxisLabel`, `dataLabel`, `dataValue`, and `dataPercent`. |
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ title: Checkbox
|
|||
---
|
||||
# Checkbox
|
||||
|
||||
Checkbox widget can be used for allowing the users to make a binary choice, e.g,. unselected or selected.
|
||||
**Checkbox** widget can be used for allowing the users to make a binary choice, e.g,. unselected or selected.
|
||||
|
||||
:::info
|
||||
The checkbox widget consists of a single checkbox input.
|
||||
The Checkbox widget consists of a single checkbox input.
|
||||
:::
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
|
@ -17,7 +17,7 @@ The checkbox widget consists of a single checkbox input.
|
|||
| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> |
|
||||
|:----------- |:----------- |
|
||||
| Label | The text is to be used as the label for the checkbox. This field expects a `String` input. |
|
||||
| Default status | Sets the default status (enabled or disabled) of the checkbox widget when the app is loaded. By default, the checkbox component is set to `{{false}}`/disabled. |
|
||||
| Default status | Sets the default status (enabled or disabled) of the Checkbox widget when the app is loaded. By default, the Checkbox component is set to `{{false}}`/disabled. |
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -25,7 +25,7 @@ The checkbox widget consists of a single checkbox input.
|
|||
|
||||
## Events
|
||||
|
||||
To add an event to a checkbox component, click on the widget handle to open the widget properties on the right sidebar. Go to the **Events** section and click on **+ Add handler**.
|
||||
To add an event to a Checkbox component, click on the widget handle to open the widget properties on the right sidebar. Go to the **Events** section and click on **+ Add handler**.
|
||||
|
||||
| <div style={{ width:"100px"}}> Events </div> | <div style={{ width:"100px"}}> Description </div> |
|
||||
|:----------- |:----------- |
|
||||
|
|
@ -42,7 +42,7 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
|
|||
|
||||
## Component Specific Actions (CSA)
|
||||
|
||||
Following actions of checkbox component can be controlled using the component specific actions(CSA):
|
||||
Following actions of Checkbox component can be controlled using the component specific actions(CSA):
|
||||
|
||||
| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:----------- |:----------- |:---------|
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
id: circular-progress-bar
|
||||
title: Circular Progress Bar
|
||||
title: Circular Progressbar
|
||||
---
|
||||
# Circular Progress Bar
|
||||
# Circular Progressbar
|
||||
|
||||
Circular progress bar widget can be used to show progress in a progress circle.
|
||||
Circular Progressbar widget can be used to show progress in a progress circle.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Code Editor
|
|||
---
|
||||
# Code Editor
|
||||
|
||||
Code Editor widget is a versatile text editor for editing code and supports several languages.
|
||||
**Code Editor** widget is a versatile text editor for editing code and supports several languages.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ title: Color Picker
|
|||
|
||||
# Color Picker
|
||||
|
||||
Color Picker widget is used to select the desired color from the color picker
|
||||
**Color Picker** widget is used to select the desired color from the color picker
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ To add an event to a color-picker component, click on the widget handle to open
|
|||
|
||||
## Component Specific Actions (CSA)
|
||||
|
||||
Following actions of color picker component can be controlled using the component specific actions(CSA):
|
||||
Following actions of Color Picker component can be controlled using the component specific actions(CSA):
|
||||
|
||||
| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:----------- |:----------- |:----------- |
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ To enable the vertical scroll on the container, drag and place any component to
|
|||
|
||||
## Loading State
|
||||
|
||||
To activate the loader on the container component, access its properties and dynamically adjust the **Loading State** property by clicking the **Fx** button. You can set it to either `{{true}}` or `{{false}}`.
|
||||
To activate the loader on the Container component, access its properties and dynamically adjust the **Loading State** property by clicking the **Fx** button. You can set it to either `{{true}}` or `{{false}}`.
|
||||
|
||||
For instance, if you wish to display the loader on the container when the query named `restapi1` is in progress, set the **Loading State** value to `{{queries.restapi1.isLoading}}`.
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ There are currently no exposed variables for the component.
|
|||
## General
|
||||
### Tooltip
|
||||
|
||||
A Tooltip is often used to specify extra information about something when the user hovers themouse pointer over the widget.
|
||||
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
|
||||
|
||||
Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ Under the <b>General</b> accordion, you can set the value in the string format.
|
|||
| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> |
|
||||
|:----------- |:----------- |
|
||||
| Show on desktop | This property have toggle switch. If enabled, the Container widget will display in the desktop view else it will not appear. This is enabled by default.|
|
||||
| Show on mobile | This property have toggle switch. If enabled, the Container wisget will display in the mobile view else it will not appear.|
|
||||
| Show on mobile | This property have toggle switch. If enabled, the Container widget will display in the mobile view else it will not appear.|
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ title: Custom Component
|
|||
|
||||
# Custom Component
|
||||
|
||||
Custom Component can be used to do create your own React component when the needed functionality isn't available in other components.
|
||||
**Custom Component** can be used to do create your own React component when the needed functionality isn't available in other components.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
|
@ -19,7 +19,7 @@ Custom Component can be used to do create your own React component when the need
|
|||
|
||||
### Data
|
||||
|
||||
The data needs to be an objects which needs to be passed as `data` props to the custom component
|
||||
The data needs to be an objects which needs to be passed as `data` props to the **Custom Component**
|
||||
|
||||
**Example:**
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
id: date-range-picker
|
||||
title: Date-range picker
|
||||
title: Date-range Picker
|
||||
---
|
||||
# Date-Range picker
|
||||
# Date-Range Picker
|
||||
|
||||
The date-range picker widget allows users to select a range of dates.
|
||||
The **Date-Range Picker** widget allows users to select a range of dates.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
id: datepicker
|
||||
title: Datepicker
|
||||
title: Date Picker
|
||||
---
|
||||
# Datepicker
|
||||
# Date Picker
|
||||
|
||||
The Datepicker widget allows users to select a single value for date and time from a pre-determined set.
|
||||
The **Date Picker** widget allows users to select a single value for date and time from a pre-determined set.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ The Datepicker widget allows users to select a single value for date and time fr
|
|||
| Format | This value acts as placeholder for the date picker widget, if any value is not provided then the default value will be used from the picker. The default value needs to be a `String` with respect to the `format` field. Ex: If format is set to `MM/YYYY` then provide default value as `04/2022` |
|
||||
| Enable time selection? | Toggle on or off to enable the time selection. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
|
||||
| Enable date selection? | Toggle on or off to enable the date selection. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
|
||||
| Disabled dates | We can give disabled dates property which will make specific dates disabled and cannot be selected. The default value needs to be an array of`Strings` |
|
||||
| Disabled dates | We can give disabled dates property which will make specific dates disabled and cannot be selected. The default value needs to be an array of `Strings` |
|
||||
|
||||
Example for disabling the 9th of January:
|
||||
```js
|
||||
|
|
@ -57,7 +57,7 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
|
|||
|
||||
| <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:----------- |:----------- | :---------- |
|
||||
| value | This variable holds the date selected on the component, the date value will be returned according to the format set in the datepicker properties. | Access the value dynamically using JS: `{{components.datepicker1.value}}`|
|
||||
| value | This variable holds the date selected on the component, the date value will be returned according to the format set in the Date Picker properties. | Access the value dynamically using JS: `{{components.datepicker1.value}}`|
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Divider
|
|||
---
|
||||
# Divider
|
||||
|
||||
Divider widget is used to add separator between components.
|
||||
**Divider** widget is used to add separator between components.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Dropdown
|
|||
---
|
||||
# Dropdown
|
||||
|
||||
The Dropdown component can be used to collect user input from a list of options.
|
||||
The **Dropdown** component can be used to collect user input from a list of options.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
@ -52,7 +52,7 @@ Each object in the array should include the following key-value pairs:
|
|||
|
||||
| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:-------- |:----------- |:-------- |
|
||||
| selectOption | You can set an option on the dropdown component via a component-specific action within any event handler.| The option to employ a RunJS query to execute component-specific actions such as `await components.dropdown1.setOption(1)` |
|
||||
| selectOption | You can set an option on the Dropdown component via a component-specific action within any event handler.| The option to employ a RunJS query to execute component-specific actions such as `await components.dropdown1.setOption(1)` |
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -76,7 +76,7 @@ Each object in the array should include the following key-value pairs:
|
|||
|
||||
### Custom Validation
|
||||
|
||||
Add a validation for the options in dropdown widget using the ternary operator.
|
||||
Add a validation for the options in Dropdown widget using the ternary operator.
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
id: file-picker
|
||||
title: Filepicker
|
||||
title: File Picker
|
||||
---
|
||||
# Filepicker
|
||||
# File Picker
|
||||
|
||||
Filepicker widget allows the user to drag and drop files or upload files by browsing the filesystem and selecting one or more files in a directory.
|
||||
**File Picker** widget allows the user to drag and drop files or upload files by browsing the filesystem and selecting one or more files in a directory.
|
||||
|
||||
:::info
|
||||
File types must be a valid [MIME](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) type according to input element specification or a valid file extension.
|
||||
|
|
@ -59,9 +59,11 @@ Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how t
|
|||
|
||||
## Component Specific Actions (CSA)
|
||||
|
||||
| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:-------- |:----------- |
|
||||
| clearFiles() | You can clear the selected files on the filepicker component via a component-specific action within any event handler. |Employ a RunJS query to execute component-specific actions such as `await components.filepicker1.clearFiles()` |
|
||||
|
||||
|
||||
| Actions | Description | How To Access |
|
||||
|:--------|:-----------:|:------------:|
|
||||
| <div style={{ width:"100px"}}> clearFiles() </div> | You can clear the selected files on the filepicker component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.filepicker1.clearFiles()` |
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -121,7 +123,7 @@ Under the <b>General</b> accordion, you can set the value in the string format.
|
|||
|:----------- |:----------- |:----------- |
|
||||
| Visibility | This is to control the visibility of the widget. If `{{false}}` the widget will not visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. | By default, it's set to `{{true}}`. |
|
||||
| Disable | This property only accepts boolean values. If set to `{{true}}`, the widget will be locked and becomes non-functional. | By default, its value is set to `{{false}}`. |
|
||||
| Border radius | Use this property to modify the border radius of the filepicker widget. The field expects only numerical value from `1` to `100`. | By default, its value is set to `0`. |
|
||||
| Border radius | Use this property to modify the border radius of the File Picker widget. The field expects only numerical value from `1` to `100`. | By default, its value is set to `0`. |
|
||||
|
||||
:::info
|
||||
Any property having `Fx` button next to its field can be **programmatically configured**.
|
||||
|
|
|
|||
|
|
@ -340,7 +340,7 @@ passwordInput1: {
|
|||
validation: {
|
||||
maxLength: 9,
|
||||
minLength: 5,
|
||||
regex: '^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$'
|
||||
regex: `'^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$'`
|
||||
},
|
||||
placeholder: 'Enter a password',
|
||||
label: ''
|
||||
|
|
@ -358,7 +358,7 @@ passwordInput1: {
|
|||
| validation | Specifies validation rules for the password. | Object containing `maxLength`, `minLength`, and `regex` properties |
|
||||
| maxLength | Specifies the maximum length of the password. | Numeric value like 9 |
|
||||
| minLength | Specifies the minimum length of the password. | Numeric value like 5 |
|
||||
| regex | Specifies the regular expression for password validation. | Regular expression pattern like '^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$' |
|
||||
| regex | Specifies the regular expression for password validation. | Regular expression pattern like `'^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$'` |
|
||||
| placeholder | Specifies the placeholder text of the password input. | Any string value like 'Enter a password' |
|
||||
| label | Specifies the label of the component. | Any string value (in this case, it's an empty string), to hide the label you can use whitespace within quotes `' '` |
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ title: HTML Viewer
|
|||
|
||||
# HTML Viewer
|
||||
|
||||
HTML widget can be used to create your own HTML-CSS layout.
|
||||
**HTML** widget can be used to create your own HTML-CSS layout.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ id: icon
|
|||
title: Icon
|
||||
---
|
||||
|
||||
An Icon widget can be used to add icons(sourced from icon library). It supports events like on hover and on click.
|
||||
An **Icon** widget can be used to add icons(sourced from icon library). It supports events like on hover and on click.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
@ -19,7 +19,7 @@ An Icon widget can be used to add icons(sourced from icon library). It supports
|
|||
|
||||
## Events
|
||||
|
||||
To add an event, click on the icon widget's configuration handle to open the widget properties on the components drawer on the right. Go to the **Events** section and click on **+ Add handler**.
|
||||
To add an event, click on the Icon widget's configuration handle to open the widget properties on the components drawer on the right. Go to the **Events** section and click on **+ Add handler**.
|
||||
|
||||
The Icon widget supports the following events:
|
||||
|
||||
|
|
@ -44,8 +44,8 @@ Following actions of the component can be controlled using the component specifi
|
|||
|
||||
| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:----------- |:----------- |:--------- |
|
||||
| setVisibility | You can toggle the visibility of the icon component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.icon1.setVisibility(false)` |
|
||||
| click | You can trigger the click action on icon component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.icon1.click()` |
|
||||
| setVisibility | You can toggle the visibility of the Icon component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.icon1.setVisibility(false)` |
|
||||
| click | You can trigger the click action on Icon component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.icon1.click()` |
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -82,7 +82,7 @@ There are currently no exposed variables for the component.
|
|||
|
||||
| <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
|
||||
|:----------- |:----------- |:------------- |
|
||||
| Icon color | You can change the color of the icon widget by entering the Hex color code or choosing a color of your choice from the color picker. |
|
||||
| Icon color | You can change the color of the Icon widget by entering the Hex color code or choosing a color of your choice from the color picker. |
|
||||
| Visibility | This is to control the visibility of the widget. | If `{{false}}` the widget will not visible after the app is deployed. | It can only have boolean values i.e. either `{{true}}` or `{{false}}`. By default, it's set to `{{true}}`. |
|
||||
| Box shadow | This property adds a shadow to the widget. | You can use different values for box shadow property like offsets, blur, spread, and the color code. |
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Iframe
|
|||
---
|
||||
# Iframe
|
||||
|
||||
Iframe widget is used to embed another HTML page into the current one and display iframes in your app.
|
||||
The **Iframe** widget is used to embed another HTML page into the current one and display iframes in your app.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Image
|
|||
---
|
||||
# Image
|
||||
|
||||
Image widget is used to display images in your app.
|
||||
The **Image** widget is used to display images in your app.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ title: Kanban
|
|||
|
||||
# Kanban
|
||||
|
||||
Kanban component allows you to visually organize and prioritize your tasks with a transparent workflow. You can set the number of columns to display, enable/disable the add cards button, and bind data to the cards.
|
||||
The **Kanban** component allows you to visually organize and prioritize your tasks with a transparent workflow. You can set the number of columns to display, enable/disable the add cards button, and bind data to the cards.
|
||||
|
||||
:::caution Restricted components
|
||||
Certain components are restricted from being placed within the **Card** and **Popout** of the Kanban component.
|
||||
Certain components are restricted from being placed within the **Card** and **Popout** of the **Kanban** component.
|
||||
- **Card**: Calendar, Kanban, Form, Tabs, Modal, ListView, Container
|
||||
- **Popout**: Calendar, Kanban
|
||||
:::
|
||||
|
|
@ -44,7 +44,7 @@ For instance, you can set the `Data` property of a Text component on a card usin
|
|||
| Card width | Set the width of the card | This property expects a numerical value. By default, the value is set to `{{302}}` |
|
||||
| Card height | Set the width of the card | This property expects a numerical value. By default, the value is set to `{{100}}` |
|
||||
| Enable add card | This property allows you to show or hide the **+Add Cards** button on the Kanban. | By default its enabled, you can programmatically set value to `{{true}}` or `{{false}}` to enable/disable button by clicking on the `Fx` next to it |
|
||||
| Show delete button | This property allows you to show or hide the **Drop here to delete cards** section at the bottom of the kanban. | By default its enabled, you can programmatically set value to `{{true}}` or `{{false}}` to enable/disable button by clicking on the `Fx` next to it |
|
||||
| Show delete button | This property allows you to show or hide the **Drop here to delete cards** section at the bottom of the Kanban. | By default its enabled, you can programmatically set value to `{{true}}` or `{{false}}` to enable/disable button by clicking on the `Fx` next to it |
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -72,10 +72,10 @@ Check the **[Component Specific Action](#component-specific-actions-csa)** avail
|
|||
| <div style={{ width:"100px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div> |
|
||||
|:----------- |:----------- |
|
||||
| On Update | On update event is triggered whenever the card data (id, title, description, or columnID) is updated using the component specific actions. |
|
||||
| On add card click | This event is triggered whenever the **Add card** button on the kanban is clicked. |
|
||||
| Card removed | This event is triggered whenever the card is **deleted** from the kanban by dragging it into the bottom delete box or using component specific action. |
|
||||
| Card added | This event is triggered whenever a card is **added** on the kanban using the component specific action. |
|
||||
| Card moved | This event is triggered whenever the card's position is changed on the kanban or using the component specific action. |
|
||||
| On add card click | This event is triggered whenever the **Add card** button on the Kanban is clicked. |
|
||||
| Card removed | This event is triggered whenever the card is **deleted** from the Kanban by dragging it into the bottom delete box or using component specific action. |
|
||||
| Card added | This event is triggered whenever a card is **added** on the Kanban using the component specific action. |
|
||||
| Card moved | This event is triggered whenever the card's position is changed on the Kanban or using the component specific action. |
|
||||
| Card selected | This event is triggered whenever a card is clicked to open the modal. |
|
||||
|
||||
</div>
|
||||
|
|
@ -86,13 +86,13 @@ Check the **[Component Specific Action](#component-specific-actions-csa)** avail
|
|||
|
||||
| <div style={{ width:"100px"}}> Variable </div>| <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:-------- |:----------- |:---------- |
|
||||
| updatedCardData | The `updatedCardData` variable will hold the latest values of all the cards in the kanban. This variable won't have any values. | It will have values only when any action on any of the card is performed like when the card is moved, added, deleted, or updated. |
|
||||
| lastAddedCard | The variable `lastAddedCard` holds the values of the the last added card. It holds the following data - `id`, `title`, `description` and `columnId` of the last added card. | Get the values using `{{components.kanban1.lastAddedCard.title}}` |
|
||||
| lastRemovedCard | The variable `lastRemovedCard` holds the properties of the card that has been recently deleted from the kanban. It holds the following data - `id`, `title`, `description` and `columnId` of the recently deleted card. | Get the values using `{{components.kanbanboard1.lastRemovedCard.title}}` |
|
||||
| updatedCardData | The `updatedCardData` variable will hold the latest values of all the cards in the Kanban. This variable won't have any values. | It will have values only when any action on any of the card is performed like when the card is moved, added, deleted, or updated. |
|
||||
| lastAddedCard | The variable `lastAddedCard` holds the values of the last added card. It holds the following data - `id`, `title`, `description` and `columnId` of the last added card. | Get the values using `{{components.kanban1.lastAddedCard.title}}` |
|
||||
| lastRemovedCard | The variable `lastRemovedCard` holds the properties of the card that has been recently deleted from the Kanban. It holds the following data - `id`, `title`, `description` and `columnId` of the recently deleted card. | Get the values using `{{components.kanbanboard1.lastRemovedCard.title}}` |
|
||||
| lastCardMovement | The variable `lastCardMovement` holds the properties of the card that has been recently moved from its original position. It holds the following data - `originColumnId`, `destinationColumnId`, `originCardIndex`, `destinationCardIndex` and an object `cardDetails` which includes `id`, `title`, `description` and `columnId` of the moved card. | Get the values using `{{components.kanbanboard1.lastCardMovement.cardDetails.title}}` or `{{components.kanbanboard1.lastCardMovement.destinationCardIndex}}` |
|
||||
| lastSelectedCard | The variable `lastSelectedCard` holds the `id`, `title`, `columnId`, and `description` of the last selected(clicked to view) card on the kanban. | Get the values using `{{components.kanban1.lastSelectedCard.columnId}}` |
|
||||
| lastUpdatedCard | The variable `lastUpdatedCard` holds the `id`, `title`, `description`, and `columnId` of the last updated card(using componenet specific action). | Get the values using `{{components.kanban1.lastUpdatedCard.columnId}}` |
|
||||
| lastCardUpdate | The variable `lastCardUpdate` holds the old an new values of the property that has been changed in the card(using componenet specific action). | Get the values using `{{components.kanban1.lastCardUpdate[0].title.oldValue}}` |
|
||||
| lastSelectedCard | The variable `lastSelectedCard` holds the `id`, `title`, `columnId`, and `description` of the last selected(clicked to view) card on the Kanban. | Get the values using `{{components.kanban1.lastSelectedCard.columnId}}` |
|
||||
| lastUpdatedCard | The variable `lastUpdatedCard` holds the `id`, `title`, `description`, and `columnId` of the last updated card(using component specific action). | Get the values using `{{components.kanban1.lastUpdatedCard.columnId}}` |
|
||||
| lastCardUpdate | The variable `lastCardUpdate` holds the old an new values of the property that has been changed in the card(using component specific action). | Get the values using `{{components.kanban1.lastCardUpdate[0].title.oldValue}}` |
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -100,11 +100,11 @@ Check the **[Component Specific Action](#component-specific-actions-csa)** avail
|
|||
|
||||
## Component Specific Actions (CSA)
|
||||
|
||||
Following actions of kanban component can be controlled using the component specific actions(CSA):
|
||||
Following actions of Kanban component can be controlled using the component specific actions(CSA):
|
||||
|
||||
| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:----------- |:----------- |:----------- |
|
||||
| updateCardData | Update the card data of kanban component via a component-specific action within any event handler.| Employ a RunJS query to execute component-specific actions such as `components.kanban1.updateCardData('c1', {title: 'New Title'})` |
|
||||
| updateCardData | Update the card data of Kanban component via a component-specific action within any event handler.| Employ a RunJS query to execute component-specific actions such as `components.kanban1.updateCardData('c1', {title: 'New Title'})` |
|
||||
| moveCard | Move a card from one column to other column on the kanban via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.kanban1.moveCard('card id,'column id')` ex: `await components.kanban1.moveCard('c1','r2')` |
|
||||
| addCard | Add a card onto the kanban via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.kanban1.addCard('c1', {title: 'New Title'})` |
|
||||
| deleteCard | Delete a card from the kanban via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.kanban1.deleteCard('card id')` ex: `await components.kanban1.deleteCard('c2')` |
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ title: Link
|
|||
|
||||
# Link
|
||||
|
||||
Link widget allows you to add a hyperlink and navigate to the external URL.
|
||||
The **Link** widget allows you to add a hyperlink and navigate to the external URL.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
@ -14,8 +14,8 @@ Link widget allows you to add a hyperlink and navigate to the external URL.
|
|||
| <div style={{ width:"100px"}}> Properties </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
|
||||
|:----------- |:----------- |:-------------- |
|
||||
| Link target | This property sets the URL where the user needs to be taken on clicking the link | example: `https://dev.to/tooljet` or `{{queries.xyz.data.url}}` |
|
||||
| Link text | This property sets the text for the link widget | example: `Click here` or `Open webpage` |
|
||||
| Target type | This property specifies the link to be opened in the same tab or new tab on clickinh the link | Options: `New Tab` & `Same Tab` |
|
||||
| Link text | This property sets the text for the Link widget | example: `Click here` or `Open webpage` |
|
||||
| Target type | This property specifies the link to be opened in the same tab or new tab on clicking the link | Options: `New Tab` & `Same Tab` |
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -43,7 +43,7 @@ Following actions of link component can be controlled using the component specif
|
|||
|
||||
| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:----------- |:----------- |:------------ |
|
||||
| click | You can trigger the click action of the link component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.link1.click()` |
|
||||
| click | You can trigger the click action of the Link component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.link1.click()` |
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
id: listview
|
||||
title: List View
|
||||
---
|
||||
# List view
|
||||
# List View
|
||||
|
||||
List View component allows to create a list of repeatable rows of data. Just like the Container component, you can nest other components inside of it and control how many times they repeat.
|
||||
The **List View** component allows to create a list of repeatable rows of data. Just like the Container component, you can nest other components inside of it and control how many times they repeat.
|
||||
|
||||
|
||||
:::caution Restricted components
|
||||
Certain components, namely **Calendar** and **Kanban**, are restricted from being placed within the list view component using drag-and-drop functionality.
|
||||
Certain components, namely **Calendar** and **Kanban**, are restricted from being placed within the List View component using drag-and-drop functionality.
|
||||
:::
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
|
@ -47,11 +47,11 @@ Similarly, for an Image component inside List View, you can use the below code t
|
|||
|
||||
| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
|
||||
|:---|:---|:---|
|
||||
| List data | The data that you want to display in the list view component. This can be an array of objects or data from a query that returns an array of objects. | An array of objects or a query that returns an array of objects. |
|
||||
| Mode | The layout of the list view component. You can choose between `List` and `Grid` mode. | `list` or `grid` |
|
||||
| List data | The data that you want to display in the List View component. This can be an array of objects or data from a query that returns an array of objects. | An array of objects or a query that returns an array of objects. |
|
||||
| Mode | The layout of the List View component. You can choose between `List` and `Grid` mode. | `list` or `grid` |
|
||||
| Show bottom border | Whether to show or hide the bottom border on a row. This option is only available when the **Mode** is set to `List`. | `true` or `false` |
|
||||
| Columns | The number of columns in the list view component. This option is only available when the **Mode** is set to `Grid`. | Any numerical value |
|
||||
| Row height | The height of each row in the list view component. | Any number between 1 and 100 |
|
||||
| Columns | The number of columns in the List View component. This option is only available when the **Mode** is set to `Grid`. | Any numerical value |
|
||||
| Row height | The height of each row in the List View component. | Any number between 1 and 100 |
|
||||
| Enable pagination | Whether to enable pagination. If enabled, you can set the number of rows per page. | `true` or `false` |
|
||||
| Rows per page | The number of rows per page. This option is only available when **Enable pagination** is enabled. | Any numerical value |
|
||||
|
||||
|
|
@ -61,7 +61,7 @@ Similarly, for an Image component inside List View, you can use the below code t
|
|||
|
||||
## Events
|
||||
|
||||
To attach an event handler to the list view component, follow these steps:
|
||||
To attach an event handler to the List View component, follow these steps:
|
||||
1. Click on the component handle to open its properties on the right sidebar.
|
||||
2. Navigate to the **Events** section.
|
||||
3. Click on the **+Add handler** button.
|
||||
|
|
@ -72,9 +72,9 @@ There are two events that you can use with the List View component:
|
|||
|
||||
### Row clicked
|
||||
|
||||
The **Row clicked** event is triggered when any row inside the list view is clicked. Similar to other events in ToolJet, you can define multiple actions for this event.
|
||||
The **Row clicked** event is triggered when any row inside the List View is clicked. Similar to other events in ToolJet, you can define multiple actions for this event.
|
||||
|
||||
When a row is clicked in the list view component, certain related data is made available through the **selectedRowId** and **selectedRow** variables. For the list view component's available exposed variables, refer to the **[here](#exposed-variables)** section.
|
||||
When a row is clicked in the List View component, certain related data is made available through the **selectedRowId** and **selectedRow** variables. For the List View component's available exposed variables, refer to the **[here](#exposed-variables)** section.
|
||||
|
||||
:::warning
|
||||
The Row clicked event is being deprecated, so it is recommended to use the **Record Clicked** event instead.
|
||||
|
|
@ -84,7 +84,7 @@ The Row clicked event is being deprecated, so it is recommended to use the **Rec
|
|||
|
||||
The **Record clicked** event is similar to the row click event, as it is triggered whenever an interaction is made with a record in the component.
|
||||
|
||||
When a record is clicked in the list view component, relevant data is exposed through the **selectedRecordId** and **selectedRecord** variables. For the list view component's available exposed variables, refer to the **[here](#exposed-variables)** section.
|
||||
When a record is clicked in the List View component, relevant data is exposed through the **selectedRecordId** and **selectedRecord** variables. For the List View component's available exposed variables, refer to the **[here](#exposed-variables)** section.
|
||||
|
||||
:::info
|
||||
To get detailed information about all the **Actions**, please consult the [Action Reference](/docs/category/actions-reference) documentation.
|
||||
|
|
@ -106,7 +106,7 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
|
|||
|
||||
| <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:----------- |:----------- |:-------- |
|
||||
| data | This variable stores the data loaded into the list view component. | Retrieve the data of each record in the list view using `{{components.listview1.data["0"].text1.text}}` |
|
||||
| data | This variable stores the data loaded into the List View component. | Retrieve the data of each record in the list view using `{{components.listview1.data["0"].text1.text}}` |
|
||||
| selectedRowId (deprecated) | This variable holds the ID of the clicked row in the list view. The row ID starts from `0`. | Access the selectedRowId using `{{components.listview1.selectedRowId}}` |
|
||||
| selectedRow (deprecated) | This variable contains the data of the components within the selected row. | Access the data using `{{components.listview1.selectedRow.text1}}` |
|
||||
| selectedRecordId | This variable holds the ID of the clicked record in the list view. The record ID starts from `0`. | Access the selectedRecordId using `{{components.listview1.selectedRecordId}}` |
|
||||
|
|
@ -159,7 +159,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
|
|||
|
||||
## Example: Displaying Data in the List View
|
||||
|
||||
- Let's start by creating a new app and then dragging the List view component onto the canvas.
|
||||
- Let's start by creating a new app and then dragging the List View component onto the canvas.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
|
@ -176,7 +176,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
|
|||
</div>
|
||||
|
||||
|
||||
- Now lets edit the `List data` property of the list view component for displaying the query data. We will use JS to get the data from the query - `{{queries.restapi1.data.data}}`. Here the last `data` is a data object that includes an array of objects, the first `data` is the data resulted from the `restapi1` query. This will automatically create the rows in the component using the data.
|
||||
- Now lets edit the `List data` property of the List View component for displaying the query data. We will use JS to get the data from the query - `{{queries.restapi1.data.data}}`. Here the last `data` is a data object that includes an array of objects, the first `data` is the data resulted from the `restapi1` query. This will automatically create the rows in the component using the data.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
|
@ -185,7 +185,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
|
|||
</div>
|
||||
|
||||
|
||||
- Finally, we will need to nest components into the first row of list view component and the component will automatically create the subsequent instances. The subsequent rows will appear the same way you'll display the data in the first row.
|
||||
- Finally, we will need to nest components into the first row of List View component and the component will automatically create the subsequent instances. The subsequent rows will appear the same way you'll display the data in the first row.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
|
|
@ -206,7 +206,7 @@ Use `{{listItem.key}}` to display data on the nested components. Example: For di
|
|||
|
||||
## Controlling Child Components
|
||||
|
||||
All the child components of the list view component are exposed through the `children` variable. This variable is an array of objects, where each object represents a record in the listview and contains the data of the child components.
|
||||
All the child components of the List View component are exposed through the `children` variable. This variable is an array of objects, where each object represents a record in the listview and contains the data of the child components.
|
||||
|
||||
The components inside the list view can be controlled using the javascipt queries. For example, if you want to disable the `button1` component in the first record, you can use the following expression:
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ id: map
|
|||
title: Map
|
||||
---
|
||||
|
||||
The map component enables users to display a map on the app. It can be used to display or choose a single location or multiple locations on the map. The map component can be used to display the location of a business, a store, or a restaurant. It can also be used to display the location of a user on the map. It allows users to interact with the map interface and pick specific points of interest.
|
||||
The **Map** component enables users to display a map on the app. It can be used to display or choose a single location or multiple locations on the map. The Map component can be used to display the location of a business, a store, or a restaurant. It can also be used to display the location of a user on the map. It allows users to interact with the map interface and pick specific points of interest.
|
||||
|
||||
:::tip Using Self-hosted
|
||||
If you are utilizing the self-hosted version of ToolJet, it is necessary to configure the Google Maps API key as an environment variable. Please refer to the [environment variable setup documentation](/docs/setup/env-vars/#google-maps-configuration--optional-).
|
||||
|
|
@ -21,7 +21,7 @@ If you are utilizing the self-hosted version of ToolJet, it is necessary to conf
|
|||
|
||||
| <div style={{ width:"100px"}}> Properties </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
|
||||
|:----------- |:----------- |:------------------ |
|
||||
| Initial location | default location when the app is loaded initially. | An object containing the **latitude** and **langitude** as key value pairs. ex: `{{ {"lat": 40.7128, "lng": -73.935242} }}` |
|
||||
| Initial location | default location when the app is loaded initially. | An object containing the **latitude** and **longitude** as key value pairs. ex: `{{ {"lat": 40.7128, "lng": -73.935242} }}` |
|
||||
| Default markers | Number of markers that should be shown on the map | An array of objects containing the coordinates. ex: `{{ [{"lat": 40.7128, "lng": -73.935242}, {"lat": 40.7128, "lng": -73.935242}] }}` |
|
||||
| Polygon points | Create a polygon on the map using the given coordinates. | An array of objects containing the coordinates. ex: `{{ [{"lat": 40.7128, "lng": -73.935242}, {"lat": 40.7128, "lng": -73.935242}] }}` |
|
||||
| Add new markers | On clicking the map, a new marker will be added to the map. | By default, it's set to `On`. Toggle `off` to disable adding new markers on the map. Click `Fx` to set `{{true}}` or `{{false}}` programmatically. |
|
||||
|
|
@ -50,11 +50,11 @@ For detailed information about all the available **Actions**, please refer to th
|
|||
|
||||
## Component Specific Actions (CSA)
|
||||
|
||||
Following actions of map component can be controlled using the component specific actions(CSA):
|
||||
Following actions of Map component can be controlled using the component specific actions(CSA):
|
||||
|
||||
| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:---------- |:---------- |:------- |
|
||||
| setLocation | Set the marker's location on map using latitude and longitude values as parameteres via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as: `component.map1.setLocation(40.7128, -73.935242)` |
|
||||
| setLocation | Set the marker's location on map using latitude and longitude values as parameters via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as: `component.map1.setLocation(40.7128, -73.935242)` |
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -67,9 +67,9 @@ Exposed variables can be used to get data from the component.
|
|||
| <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:----------- |:----------- |:--------- |
|
||||
| center | This variable will hold the latitude, longitude and the google map url value. |
|
||||
| center.`lat` | This variable holds the latitude value of the marker on the map component. | Access the value dynamically using JS: `{{components.map1.center.lat}}`|
|
||||
| center.`lat` | This variable holds the latitude value of the marker on the Map component. | Access the value dynamically using JS: `{{components.map1.center.lat}}`|
|
||||
| center.`lng` | This variable gets updated with RGB color code whenever a user selects a color from the color picker. | Access the value dynamically using JS: `{{components.map1.center.lng}}`|
|
||||
| center.`googleMapUrl` | This variable holds the URL of the location where the center marker is placed on the map component. | Access the value dynamically using JS: `{{components.map1.center.googleMapUrl}}`|
|
||||
| center.`googleMapUrl` | This variable holds the URL of the location where the center marker is placed on the Map component. | Access the value dynamically using JS: `{{components.map1.center.googleMapUrl}}`|
|
||||
| markers | The markers variable will hold the value only if `add new markers` is enabled from the map properties. Each marker is an object and will have `lat` and `lng` keys. | Access the values dynamically using `{{components.map1.markers[1].lat}}` |
|
||||
| selectedMarker | Object with the marker selected by the user |
|
||||
| bounds | It constructs a rectangle from the points at its south-west and north-east corners |
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Modal
|
|||
---
|
||||
# Modal
|
||||
|
||||
Modal widget renders in front of a backdrop, and it blocks interaction with the rest of the application until the modal is closed. It can be used to add dialog boxes to your app for lightboxes, user notifications, forms, etc.
|
||||
The **Modal** widget renders in front of a backdrop, and it blocks interaction with the rest of the application until the modal is closed. It can be used to add dialog boxes to your app for lightboxes, user notifications, forms, etc.
|
||||
|
||||
:::caution Restricted components
|
||||
In order to avoid excessively complex situations, certain components, namely **Calendar** and **Kanban**, are restricted from being placed within the Modal component using drag-and-drop functionality.
|
||||
|
|
@ -57,12 +57,12 @@ Just like any other event on ToolJet, you can set multiple handlers for the even
|
|||
|
||||
## Component Specific Actions (CSA)
|
||||
|
||||
Following actions of modal component can be controlled using the component specific actions(CSA):
|
||||
Following actions of Modal component can be controlled using the component specific actions(CSA):
|
||||
|
||||
| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:----------- |:----------- |:--------- |
|
||||
| open | Control the opening and closing of the modal componennt via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.modal1.open()` |
|
||||
| close | Control the closing of the modal componennt via a component-specific action within any event handler.| Employ a RunJS query to execute component-specific actions such as `await components.modal1.close()` |
|
||||
| open | Control the opening and closing of the Modal component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.modal1.open()` |
|
||||
| close | Control the closing of the Modal component via a component-specific action within any event handler.| Employ a RunJS query to execute component-specific actions such as `await components.modal1.close()` |
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Multiselect
|
|||
---
|
||||
# Multiselect
|
||||
|
||||
Multiselect widget can be used to collect multiple user inputs from a list of options.
|
||||
The **Multiselect** widget can be used to collect multiple user inputs from a list of options.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
@ -12,7 +12,7 @@ Multiselect widget can be used to collect multiple user inputs from a list of op
|
|||
|
||||
| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> |
|
||||
|:----------- |:----------- |
|
||||
| Label | The text is to be used as the label for the multiselect widget. |
|
||||
| Label | The text is to be used as the label for the Multiselect widget. |
|
||||
| Default value | The value of the default option. This should always be an array. |
|
||||
| Option values | Values for different items/options in the list of the multiselect. |
|
||||
| Option labels | Labels for different items/options in the list of the multiselect. |
|
||||
|
|
@ -26,7 +26,7 @@ Multiselect widget can be used to collect multiple user inputs from a list of op
|
|||
| <div style={{ width:"135px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div> |
|
||||
|:----------------- | :--------------------------------------------- |
|
||||
| On select | The **On select** event is triggered when a particular option is chosen. |
|
||||
| On search text changed | This event is triggered when a user modifies the search text on the multiselect component. This event also updates the value of the `searchText` **[exposed variable](#exposed-variables)**. |
|
||||
| On search text changed | This event is triggered when a user modifies the search text on the Multiselect component. This event also updates the value of the `searchText` **[exposed variable](#exposed-variables)**. |
|
||||
|
||||
:::info
|
||||
For comprehensive information on all available **Actions**, refer to the [Action Reference](/docs/category/actions-reference) documentation.
|
||||
|
|
@ -40,13 +40,13 @@ For comprehensive information on all available **Actions**, refer to the [Action
|
|||
`await components.multiselect1.clearSelections()` <br/>
|
||||
`await components.multiselect1.deselectOption(2)`
|
||||
|
||||
Following actions of multselect component can be controlled using the component specific actions(CSA):
|
||||
Following actions of Multiselect component can be controlled using the component specific actions(CSA):
|
||||
|
||||
| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:----------- |:----------- |:-------- |
|
||||
| selectOption | Select an option on the multiselect component via a component-specific action within any event handler.| Employ a RunJS query to execute component-specific actions such as `await components.multiselect1.selectOption(3)` |
|
||||
| deselectOption | Deselect a selected option on the multiselect component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.multiselect1.deselectOption(3)` |
|
||||
| clearOptions | Clear all the selected options from the multiselect component via a component-specific action within any event handler. |Employ a RunJS query to execute component-specific actions such as `await components.multiselect1.clearSelections(2,3)` |
|
||||
| selectOption | Select an option on the Multiselect component via a component-specific action within any event handler.| Employ a RunJS query to execute component-specific actions such as `await components.multiselect1.selectOption(3)` |
|
||||
| deselectOption | Deselect a selected option on the Multiselect component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.multiselect1.deselectOption(3)` |
|
||||
| clearOptions | Clear all the selected options from the Multiselect component via a component-specific action within any event handler. |Employ a RunJS query to execute component-specific actions such as `await components.multiselect1.clearSelections(2,3)` |
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -56,8 +56,8 @@ Following actions of multselect component can be controlled using the component
|
|||
|
||||
| <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:----------- |:----------- |:----------|
|
||||
| values | This variable holds the values of the multiselect component in an array of objects where the objects are the options in the multiselect.| Access the value dynamically using JS: `{{components.multiselect1.values[1]}}` |
|
||||
| searchText | This variable stores the user-entered search text in the multiselect component. | The value of this variable is updated with each character entered in the search field |
|
||||
| values | This variable holds the values of the Multiselect component in an array of objects where the objects are the options in the multiselect.| Access the value dynamically using JS: `{{components.multiselect1.values[1]}}` |
|
||||
| searchText | This variable stores the user-entered search text in the Multiselect component. | The value of this variable is updated with each character entered in the search field |
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Number Input
|
|||
---
|
||||
# Number Input
|
||||
|
||||
The Number Input component allows users to enter numeric values. It can be used as a standalone component or in form fields. In this document, we'll go through all the configuration options for the **Number Input** component.
|
||||
The **Number Input** component allows users to enter numeric values. It can be used as a standalone component or in form fields. In this document, we'll go through all the configuration options for the **Number Input** component.
|
||||
|
||||
## Properties
|
||||
|
||||
|
|
@ -48,15 +48,15 @@ Check the **component specific actions** available for this component **[here](/
|
|||
|
||||
## Exposed Variables
|
||||
|
||||
| <div style={{ width:"100px"}}> Variable </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{width: "200px"}}> How To Access </div>|
|
||||
|: ---------- | :---------- | :------------ |
|
||||
| value | Holds the value entered by the user in the component. | Accessible dynamically with JS (for e.g., `{{components.numberinput1.value}}`). |
|
||||
| label | Holds the value of the component's label. | Accessible dynamically with JS (for e.g., `{{components.numberinput1.label}}`). |
|
||||
| isValid | Indicates if the input meets validation criteria. | Accessible dynamically with JS (for e.g., `{{components.numberinput1.isValid}}`). |
|
||||
| isMandatory | Indicates if the field is required. | Accessible dynamically with JS (for e.g., `{{components.numberinput1.isMandatory}}`). |
|
||||
| isLoading | Indicates if the component is loading. | Accessible dynamically with JS (for e.g., `{{components.numberinput1.isLoading}}`). |
|
||||
| isVisible | Indicates if the component is visible. | Accessible dynamically with JS (for e.g., `{{components.numberinput1.isVisible}}`). |
|
||||
| isDisabled | Indicates if the component is disabled. | Accessible dynamically with JS (for e.g., `{{components.numberinput1.isDisabled}}`). |
|
||||
| Variable | Description | How To Access |
|
||||
|:--------:|:-----------:|:------------:|
|
||||
| <div style={{ width:"100px"}}> value </div> | Holds the value entered by the user in the component. | Accessible dynamically with JS (for e.g., `{{components.numberinput1.value}}`).|
|
||||
| <div style={{ width:"100px"}}> label </div> | Holds the value of the component's label. | Accessible dynamically with JS (for e.g., `{{components.numberinput1.label}}`).|
|
||||
| <div style={{ width:"100px"}}> isValid </div> | Indicates if the input meets validation criteria. | Accessible dynamically with JS (for e.g., `{{components.numberinput1.isValid}}`).|
|
||||
| <div style={{ width:"100px"}}> isMandatory </div> | Indicates if the field is required. | Accessible dynamically with JS (for e.g., `{{components.numberinput1.isMandatory}}`).|
|
||||
| <div style={{ width:"100px"}}> isLoading </div> | Indicates if the component is loading. | Accessible dynamically with JS (for e.g., `{{components.numberinput1.isLoading}}`).|
|
||||
| <div style={{ width:"100px"}}> isVisible </div> | Indicates if the component is visible. | Accessible dynamically with JS (for e.g., `{{components.numberinput1.isVisible}}`).|
|
||||
| <div style={{ width:"100px"}}> isDisabled </div> | Indicates if the component is disabled. | Accessible dynamically with JS (for e.g., `{{components.numberinput1.isDisabled}}`).|
|
||||
|
||||
## Validation
|
||||
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ title: Pagination
|
|||
---
|
||||
# Pagination
|
||||
|
||||
Pagination enables the user to select a specific page from a range of pages. It is used to separate the content into discrete pages.
|
||||
**Pagination** enables the user to select a specific page from a range of pages. It is used to separate the content into discrete pages.
|
||||
|
||||
:::tip
|
||||
You can club pagination widget with the List View widget.
|
||||
You can club the Pagination widget with the List View widget.
|
||||
:::
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
|
@ -45,8 +45,8 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
|
|||
|
||||
| <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div>|
|
||||
|:----------- |:----------- |:--------- |
|
||||
| totalPages | This variable holds the value of the `Number of Pages` set from the pagination component properties. | Access the value dynamically using JS: `{{components.pagination1.totalPages}}`. |
|
||||
| currentPageIndex | This variable will hold the index of the currently selected option on the pagination component. | Access the value dynamically using JS: `{{components.pagination1.currentPageIndex}}`. |
|
||||
| totalPages | This variable holds the value of the `Number of Pages` set from the Pagination component properties. | Access the value dynamically using JS: `{{components.pagination1.totalPages}}`. |
|
||||
| currentPageIndex | This variable will hold the index of the currently selected option on the Pagination component. | Access the value dynamically using JS: `{{components.pagination1.currentPageIndex}}`. |
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Password Input
|
|||
---
|
||||
# Password Input
|
||||
|
||||
The Password Input component allows users to enter passwords securely. In this component, passwords are concealed, displaying each character as an asterisk to ensure privacy. In this document, we'll go through all the configuration options for the **Password Input** component.
|
||||
The **Password Input** component allows users to enter passwords securely. In this component, passwords are concealed, displaying each character as an asterisk to ensure privacy. In this document, we'll go through all the configuration options for the **Password Input** component.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
@ -60,16 +60,16 @@ Check the **component specific actions** available for this component **[here](/
|
|||
|
||||
## Exposed Variables
|
||||
|
||||
| <div style={{ width:"100px"}}> Variable </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{width: "200px"}}> How To Access </div>|
|
||||
|: ---------- | :---------- | :------------ |
|
||||
| value | Holds the value entered by the user in the component. | Accessible dynamically with JS (for e.g., `{{components.passwordinput1.value}}`) |
|
||||
| label | Holds the value of the component's label. | Accessible dynamically with JS (for e.g., `{{components.passwordinput1.label}}`) |
|
||||
| isValid | Indicates if the input meets validation criteria. | Accessible dynamically with JS (for e.g., `{{components.passwordinput1.isValid}}`) |
|
||||
| isMandatory | Indicates if the field is required. | Accessible dynamically with JS (for e.g., `{{components.passwordinput1.isMandatory}}`) |
|
||||
| isLoading | Indicates if the component is loading. | Accessible dynamically with JS (for e.g., `{{components.passwordinput1.isLoading}}`) |
|
||||
| isVisible | Indicates if the component is visible. | Accessible dynamically with JS (for e.g., `{{components.passwordinput1.isVisible}}`) |
|
||||
| isDisabled | Indicates if the component is disabled. | Accessible dynamically with JS (for e.g., `{{components.passwordinput1.isDisabled}}`) |
|
||||
|
||||
| Variable | Description | How To Access |
|
||||
|:--------:|:-----------:|:------------:|
|
||||
| <div style={{ width:"100px"}}> value </div> | Holds the value entered by the user in the component. | Accessible dynamically with JS (for e.g., `{{components.passwordinput1.value}}`).|
|
||||
| <div style={{ width:"100px"}}> label </div> | Holds the value of the component's label. | Accessible dynamically with JS (for e.g., `{{components.passwordinput1.label}}`).|
|
||||
| <div style={{ width:"100px"}}> isValid </div> | Indicates if the input meets validation criteria. | Accessible dynamically with JS (for e.g., `{{components.passwordinput1.isValid}}`).|
|
||||
| <div style={{ width:"100px"}}> isMandatory </div> | Indicates if the field is required. | Accessible dynamically with JS (for e.g., `{{components.passwordinput1.isMandatory}}`).|
|
||||
| <div style={{ width:"100px"}}> isLoading </div> | Indicates if the component is loading. | Accessible dynamically with JS (for e.g., `{{components.passwordinput1.isLoading}}`).|
|
||||
| <div style={{ width:"100px"}}> isVisible </div> | Indicates if the component is visible. | Accessible dynamically with JS (for e.g., `{{components.passwordinput1.isVisible}}`).|
|
||||
| <div style={{ width:"100px"}}> isDisabled </div> | Indicates if the component is disabled. | Accessible dynamically with JS (for e.g., `{{components.passwordinput1.isDisabled}}`).|
|
||||
</div>
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ title: PDF
|
|||
|
||||
# PDF
|
||||
|
||||
The PDF component can be used to embed PDF files either by URL or through Base64 code.
|
||||
The **PDF** component can be used to embed PDF files either by URL or through Base64 code.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ title: Radio Button
|
|||
---
|
||||
# Radio Button
|
||||
|
||||
Radio button widget can be used to select one option from a group of options.
|
||||
The **Radio Button** widget can be used to select one option from a group of options.
|
||||
|
||||
:::tip
|
||||
Radio buttons are preferred when the list of options is less than six, and all the options can be displayed at once.
|
||||
Radio Buttons are preferred when the list of options is less than six, and all the options can be displayed at once.
|
||||
:::
|
||||
|
||||
:::info
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Range Slider
|
|||
---
|
||||
# Range Slider
|
||||
|
||||
Range sliders are widely used across different UIs. One of the main purposes is to filter, explore all the related content and available in the control and settings options.
|
||||
The **Range Slider** widget is widely used across different UIs. One of the main purposes is to filter, explore all the related content and available in the control and settings options.
|
||||
|
||||
:::tip
|
||||
Range Sliders have "Two handles" option which allows user to select within a range.
|
||||
|
|
@ -72,7 +72,7 @@ Under the <b>General</b> accordion, you can set the value in the string format.
|
|||
| Line color | Enter the hexcode to set the default color for slider's track. |
|
||||
| Handle color | Enter the hexcode to set the color for slider's handler. |
|
||||
| Track color | Enter the hexcode to set the color for slider's active portion on the track. |
|
||||
| Visibility | Set the visivlity of the slider programmatically. The default value is `{{true}}`. |
|
||||
| Visibility | Set the visibility of the slider programmatically. The default value is `{{true}}`. |
|
||||
|
||||
:::info
|
||||
Any property having `Fx` button next to its field can be **programmatically configured**.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Text Editor
|
|||
---
|
||||
# Text Editor
|
||||
|
||||
Rich Text Editor can be used to enter and edit the text in HTML format.
|
||||
The **Text Editor** can be used to enter and edit the text in HTML format.
|
||||
It should be preferred for blog posts, forum posts or notes sections. The text is to be used as the label for the radio button.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
|
@ -32,7 +32,7 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
|
|||
|
||||
| <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:----------- |:----------- |:--------- |
|
||||
| value | This variable holds the value whenever a user enters a value in the rich text editor component.| You can access the value dynamically using JS: `{{components.richtexteditor1.value}}`|
|
||||
| value | This variable holds the value whenever a user enters a value in the Text Editor component.| You can access the value dynamically using JS: `{{components.richtexteditor1.value}}`|
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Spinner
|
|||
---
|
||||
# Spinner
|
||||
|
||||
Spinner widget can be used to provide a visual indication that an action is in progress by awaiting a change.
|
||||
The **Spinner** widget can be used to provide a visual indication that an action is in progress by awaiting a change.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Star Rating
|
|||
---
|
||||
# Star Rating
|
||||
|
||||
Star rating widget can be used to display as well as input ratings. The widget supports half stars, and the number of stars can be set too.
|
||||
The **Star Rating** widget can be used to display as well as input ratings. The widget supports half stars, and the number of stars can be set too.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ title: Statistics
|
|||
|
||||
# Statistics
|
||||
|
||||
Statistics can be used to display different statistical information.
|
||||
**Statistics** can be used to display different statistical information.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
@ -14,11 +14,11 @@ Statistics can be used to display different statistical information.
|
|||
| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> |
|
||||
|:------------ |:-------------|
|
||||
| Primary value label | This property lets you add and remove primary value label. |
|
||||
| Primary value | This property lets you add and remove primary value,the actual amount can be represented here. |
|
||||
| Primary value | This property lets you add and remove primary value, the actual amount can be represented here. |
|
||||
| Hide secondary value | This property lets you show/hide the secondary value from the statistics component. By default, this property is disabled. Toggle it on to hide the secondary value, you can also click on the `Fx` button next to it to dynamically set the value to `{{true}}` or `{{false}}`. |
|
||||
| Secondary value label | This property lets you add and remove secondary value label. |
|
||||
| Secondary value | This property lets you add and remove secondary value,the change in value can be represented here. |
|
||||
| Secondary sign display | This property lets you add and secondary sign either positive or negative,can be used to represent positive(increase) or negative(decrease) movement.Default value is positive. |
|
||||
| Secondary value | This property lets you add and remove secondary value, the change in value can be represented here. |
|
||||
| Secondary sign display | This property lets you add and secondary sign either positive or negative,can be used to represent positive(increase) or negative(decrease) movement. Default value is positive. |
|
||||
| Loading state | Loading state can be used to show a spinner on the statistics. Loading state is commonly used with `isLoading` property of the queries to show a loading status while a query is being run. Switch the toggle **On** or click on `fx` to programmatically set the value `{{true}}` or `{{false}}`. |
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Steps
|
|||
---
|
||||
# Steps
|
||||
|
||||
Steps are used to guide users through complex processes, making them easier and more intuitive.
|
||||
**Steps** are used to guide users through complex processes, making them easier and more intuitive.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
|
|||
|
|
@ -487,7 +487,7 @@ Under column properties, expand the detailed view of a column type to access a t
|
|||
|
||||
## Action Buttons
|
||||
|
||||
Action buttons will be displayed as the last column of the table. The styles of these buttons can be customised and `on click` actions can be configured. when clicked, `selectedRow` property of the table will have the table data of the row.
|
||||
Action buttons will be displayed as the last column of the table. The styles of these buttons can be customized and `on click` actions can be configured. when clicked, `selectedRow` property of the table will have the table data of the row.
|
||||
|
||||
| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> |
|
||||
|:-------- |:------------ |
|
||||
|
|
@ -518,7 +518,7 @@ When Server-side sort is enabled, clicking on the column headers will not automa
|
|||
|
||||
### Enable Filtering
|
||||
|
||||
The filter button in the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to {{true}} or {{false}} to show or hide the filter button by clicking on the **Fx** button.
|
||||
The filter button in the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to `{{true}}` or `{{false}}` to show or hide the filter button by clicking on the **Fx** button.
|
||||
|
||||
#### Server-side Filter
|
||||
When Server-side filter is enabled, applying filters will not automatically filter the table, instead, the `Filter changed` event will be fired and the applied filters will be exposed as `filters`. You can use this data to run any query that feeds data to the table in a manner that reflects the filters applied.
|
||||
|
|
@ -543,19 +543,19 @@ When Server-side pagination is enabled, you'll be able to set three other table
|
|||
Check this how-to guide to learn more about [server-side pagination](/docs/how-to/use-server-side-pagination).
|
||||
:::
|
||||
|
||||
## Addional Actions
|
||||
## Additional Actions
|
||||
|
||||
### Show Add New Row Button
|
||||
|
||||
The Add new row button in the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to {{true}} or {{false}} to show or hide the Add new row button by clicking on the **Fx** button.
|
||||
The Add new row button in the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to `{{true}}` or `{{false}}` to show or hide the Add new row button by clicking on the **Fx** button.
|
||||
|
||||
### Show Download Button
|
||||
|
||||
The download button in the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to {{true}} or {{false}} to show or hide the download button by clicking on the **Fx** button.
|
||||
The download button in the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to `{{true}}` or `{{false}}` to show or hide the download button by clicking on the **Fx** button.
|
||||
|
||||
### Hide Column Selector Button
|
||||
|
||||
The column selector button on the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to {{true}} or {{false}} to show or hide the column selector button by clicking on the **Fx** button.
|
||||
The column selector button on the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to `{{true}}` or `{{false}}` to show or hide the column selector button by clicking on the **Fx** button.
|
||||
|
||||
### Loading State (Boolean)
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ title: Tabs
|
|||
|
||||
# Tabs
|
||||
|
||||
A Tabs widget contains a number of defined containers that can be navigated through the tabs. Each tab acts as a [container](/docs/widgets/container/) that can have different widgets placed inside it.
|
||||
A **Tabs** widget contains a number of defined containers that can be navigated through the tabs. Each tab acts as a [container](/docs/widgets/container/) that can have different widgets placed inside it.
|
||||
|
||||
:::caution Restricted components
|
||||
In order to avoid excessively complex situations, certain components, namely **Calendar** and **Kanban**, are restricted from being placed within the Tabs component using drag-and-drop functionality.
|
||||
|
|
@ -21,7 +21,7 @@ If the builder attempts to add any of the aforementioned components inside the T
|
|||
|
||||
### Tabs
|
||||
|
||||
This property lets you add and remove containers from the tabs widget. Each container in the tab has its unique `id` , `title` and `disabled` for disabling individual tabs . This field expects an array of objects.
|
||||
This property lets you add and remove containers from the Tabs widget. Each container in the tab has its unique `id` , `title` and `disabled` for disabling individual tabs . This field expects an array of objects.
|
||||
|
||||
```js
|
||||
{{[
|
||||
|
|
@ -79,7 +79,7 @@ Following actions of Tabs component can be controlled using the component specif
|
|||
|
||||
| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:----------- |:----------- |:--------- |
|
||||
| setTab | Set the current tab of the tabs component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.tabs1.setTab(1)` |
|
||||
| setTab | Set the current tab of the Tabs component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.tabs1.setTab(1)` |
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -89,7 +89,7 @@ Following actions of Tabs component can be controlled using the component specif
|
|||
|
||||
| <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|:----------- |:----------- |:--------- |
|
||||
| currentTab | This variable holds the id of the current tab selected on the tabs component. | Access the value dynamically using JS: `{{components.tabs1.currentTab}}`|
|
||||
| currentTab | This variable holds the id of the current tab selected on the Tabs component. | Access the value dynamically using JS: `{{components.tabs1.currentTab}}`|
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Tags
|
|||
---
|
||||
# Tags
|
||||
|
||||
Tags widget can be used to show array of data as tags.
|
||||
The **Tags** widget can be used to show array of data as tags.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Text Input
|
|||
---
|
||||
# Text Input
|
||||
|
||||
The Text Input component allows users to enter a single line of text. It can be used as a standalone component or in Form fields. In this document, we'll go through all the configuration options for the **Text Input** component.
|
||||
The **Text Input** component allows users to enter a single line of text. It can be used as a standalone component or in Form fields. In this document, we'll go through all the configuration options for the **Text Input** component.
|
||||
|
||||
## Properties
|
||||
| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"250px"}}> Description </div> | <div style={{width: "200px"}}> Expected Value </div>|
|
||||
|
|
@ -18,7 +18,7 @@ The Text Input component allows users to enter a single line of text. It can be
|
|||
| Event | Description |
|
||||
|:-----------------|:---------------------------------------------|
|
||||
| **On change** | Triggers whenever the user types something in the text input. |
|
||||
| **On enter pressed** | Triggers whenever the user presses the enter key on the keyboard after entering text in the text input component. |
|
||||
| **On enter pressed** | Triggers whenever the user presses the enter key on the keyboard after entering text in the Text Input component. |
|
||||
| **On focus** | Triggers whenever the user clicks inside the text input field. |
|
||||
| **On blur** | Triggers whenever the user clicks outside the text input field. |
|
||||
|
||||
|
|
@ -46,15 +46,15 @@ Check the **component specific actions** available for this component **[here](/
|
|||
|
||||
## Exposed Variables
|
||||
|
||||
| <div style={{ width:"100px"}}> Variable </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{width: "200px"}}> How To Access </div>|
|
||||
|: ---------- | :---------- | :------------ |
|
||||
| value | Holds the value entered by the user in the component. | Accessible dynamically with JS (for e.g., `{{components.textinput1.value}}`). |
|
||||
| label | Holds the value of the component's label. | Accessible dynamically with JS (for e.g., `{{components.textinput1.label}}`). |
|
||||
| isValid | Indicates if the input meets validation criteria. | Accessible dynamically with JS (for e.g., `{{components.textinput1.isValid}}`). |
|
||||
| isMandatory | Indicates if the field is required. | Accessible dynamically with JS (for e.g., `{{components.textinput1.isMandatory}}`). |
|
||||
| isLoading | Indicates if the component is loading. | Accessible dynamically with JS (for e.g., `{{components.textinput1.isLoading}}`). |
|
||||
| isVisible | Indicates if the component is visible. | Accessible dynamically with JS (for e.g., `{{components.textinput1.isVisible}}`). |
|
||||
| isDisabled | Indicates if the component is disabled. | Accessible dynamically with JS (for e.g., `{{components.textinput1.isDisabled}}`). |
|
||||
| Variable | Description | How To Access |
|
||||
|:--------:|:-----------:|:------------:|
|
||||
| <div style={{ width:"100px"}}> value </div> | Holds the value entered by the user in the component. | Accessible dynamically with JS (for e.g., `{{components.textinput1.value}}`).|
|
||||
| <div style={{ width:"100px"}}> label </div> | Holds the value of the component's label. | Accessible dynamically with JS (for e.g., `{{components.textinput1.label}}`).|
|
||||
| <div style={{ width:"100px"}}> isValid </div> | Indicates if the input meets validation criteria. | Accessible dynamically with JS (for e.g., `{{components.textinput1.isValid}}`).|
|
||||
| <div style={{ width:"100px"}}> isMandatory </div> | Indicates if the field is required. | Accessible dynamically with JS (for e.g., `{{components.textinput1.isMandatory}}`).|
|
||||
| <div style={{ width:"100px"}}> isLoading </div> | Indicates if the component is loading. | Accessible dynamically with JS (for e.g., `{{components.textinput1.isLoading}}`).|
|
||||
| <div style={{ width:"100px"}}> isVisible </div> | Indicates if the component is visible. | Accessible dynamically with JS (for e.g., `{{components.textinput1.isVisible}}`).|
|
||||
| <div style={{ width:"100px"}}> isDisabled </div> | Indicates if the component is disabled. | Accessible dynamically with JS (for e.g., `{{components.textinput1.isDisabled}}`).|
|
||||
|
||||
## Validation
|
||||
|
||||
|
|
|
|||
|
|
@ -43,12 +43,12 @@ Check the **component specific actions** available for this component **[here](/
|
|||
|
||||
## Exposed Variables
|
||||
|
||||
| <div style={{ width:"100px"}}> Variable </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{width: "200px"}}> How To Access </div>|
|
||||
|: ---------- | :---------- | :------------ |
|
||||
| text | Holds the value of the component's label. | Accessible dynamically with JS (for e.g., `{{components.text1.text}}`) |
|
||||
| isLoading | Indicates if the component is loading. | Accessible dynamically with JS (for e.g., `{{components.text1.isLoading}}`) |
|
||||
| isVisible | Indicates if the component is visible. | Accessible dynamically with JS (for e.g., `{{components.text1.isVisible}}`) |
|
||||
| isDisabled | Indicates if the component is disabled. | Accessible dynamically with JS (for e.g., `{{components.text1.isDisabled}}`) |
|
||||
| Variable | Description | How To Access |
|
||||
|:--------:|:-----------:|:------------:|
|
||||
| <div style={{ width:"100px"}}> text </div> | Holds the value of the component's label. | Accessible dynamically with JS (for e.g., `{{components.text1.text}}`) |
|
||||
| <div style={{ width:"100px"}}> isLoading </div> | Indicates if the component is loading. | Accessible dynamically with JS (for e.g., `{{components.text1.isLoading}}`) |
|
||||
| <div style={{ width:"100px"}}> isVisible </div> | Indicates if the component is visible. | Accessible dynamically with JS (for e.g., `{{components.text1.isVisible}}`) |
|
||||
| <div style={{ width:"100px"}}> isDisabled </div> | Indicates if the component is disabled. | Accessible dynamically with JS (for e.g., `{{components.text1.isDisabled}}`) |
|
||||
|
||||
## Additional Actions
|
||||
|
||||
|
|
|
|||
|
|
@ -34,9 +34,9 @@ Following actions of the **Textarea** component can be controlled using Componen
|
|||
|
||||
## Exposed Variables
|
||||
|
||||
| <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||||
|: ----------- |: ----------- | :-------------|
|
||||
| value | This variable holds the value entered in the text area component. | Sccess the value dynamically using JS. For example, `{{components.textarea1.value}}`|
|
||||
| Variables | Description | How To Access |
|
||||
|:---------:|:-----------:|:-------------:|
|
||||
| <div style={{ width:"100px"}}> value </div> | This variable holds the value entered in the text area component. | Access the value dynamically using JS. For example, `{{components.textarea1.value}}` |
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Timeline
|
|||
---
|
||||
# Timeline
|
||||
|
||||
The Timeline component can be used to do a visual representation of a sequence of events.
|
||||
The **Timeline** component can be used to do a visual representation of a sequence of events.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ The Timeline component can be used to do a visual representation of a sequence o
|
|||
|
||||
### Hide date
|
||||
|
||||
Hide date can be used to hide the date time of the timeline component.
|
||||
Hide date can be used to hide the date time of the Timeline component.
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Timer
|
|||
---
|
||||
# Timer
|
||||
|
||||
Timer widget lets users to count timer both upward and downward
|
||||
The **Timer** widget lets users to count timer both upward and downward
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ title: Toggle Switch
|
|||
---
|
||||
# Toggle Switch
|
||||
|
||||
The toggle switch widget allows the user to change a setting between two states.
|
||||
The **Toggle Switch** widget allows the user to change a setting between two states.
|
||||
|
||||
The Toggle switch widget should be used if we want to make a binary choice, such as turning something **on or off** or **enable or disable**.
|
||||
The **Toggle Switch** widget should be used if we want to make a binary choice, such as turning something **on or off** or **enable or disable**.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
@ -79,8 +79,8 @@ Under the <b>General</b> accordion, you can set the value in the string format.
|
|||
|
||||
| <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"100px"}}> Default Value </div>|
|
||||
|:----- |:--------- |:------------- |
|
||||
| Text color | Change the color of the text in the widget by providig the `Hex color code` or choosing a color from the picker. | |
|
||||
| Toggle switch color | Change the color of the toggle switch in the widget by providig the `Hex color code` or choosing a color from the picker. | |
|
||||
| Text color | Change the color of the text in the widget by providing the `Hex color code` or choosing a color from the picker. | |
|
||||
| Toggle switch color | Change the color of the toggle switch in the widget by providing the `Hex color code` or choosing a color from the picker. | |
|
||||
| Visibility | This is to control the visibility of the widget. If `{{false}}` the widget will not visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. | By default, it's set to `{{true}}` |
|
||||
| Disable | This property only accepts boolean values. If set to `{{true}}`, the widget will be locked and becomes non-functional. | By default, its value is set to `{{false}}` |
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ title: Tree Select
|
|||
|
||||
# Tree Select
|
||||
|
||||
Tree Select widget is a group checkboxes in a TreeView which can be expanded or collapsed.
|
||||
The **Tree Select** widget is a group checkboxes in a TreeView which can be expanded or collapsed.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
@ -116,9 +116,9 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
|
|||
|
||||
| <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div>|
|
||||
|:----------- |:----------- |:-------|
|
||||
| checked | This variable holds the value of all the checked items on the tree select component. | Access the value dynamically using JS: `{{components.treeselect1.checked[1]}}`|
|
||||
| expanded | This variable holds the value of expanded items on the tree select component.| Access the value dynamically using JS: `{{components.treeselect1.expanded[0]}}`|
|
||||
| checkedPathArray | This variable holds the path of the checked items in differet arrays. | Access the value dynamically using JS: `{{components.treeselect1.checkedPathArray[1][1]}}`|
|
||||
| checked | This variable holds the value of all the checked items on the Tree Select component. | Access the value dynamically using JS: `{{components.treeselect1.checked[1]}}`|
|
||||
| expanded | This variable holds the value of expanded items on the Tree Select component.| Access the value dynamically using JS: `{{components.treeselect1.expanded[0]}}`|
|
||||
| checkedPathArray | This variable holds the path of the checked items in different arrays. | Access the value dynamically using JS: `{{components.treeselect1.checkedPathArray[1][1]}}`|
|
||||
| checkedPathStrings | This variable holds the path of the checked items in strings separated by a dash(-).| Access the value dynamically using JS: `{{components.treeselect1.checkedPathStrings[2]}}`|
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Vertical Divider
|
|||
---
|
||||
# Vertical Divider
|
||||
|
||||
Vertical Divider widget is used to add vertical separator between components.
|
||||
The **Vertical Divider** widget is used to add vertical separator between components.
|
||||
|
||||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ The **If condition** node triggers one of the outgoing flows depending on the gi
|
|||
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
||||
|
||||
## Data Sources
|
||||
In the flow builder of ToolJet, all the data sources you've set up will appear as nodes. These nodes can be utilised to perform intricate queries on your data sources, establish connections with APIs, send emails and messages, and more.
|
||||
In the flow builder of ToolJet, all the data sources you've set up will appear as nodes. These nodes can be utilized to perform intricate queries on your data sources, establish connections with APIs, send emails and messages, and more.
|
||||
|
||||
<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/workflows/nodes/datasources-nodes.png" alt="Datasources and Other Services" />
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ Now that we are ready with our notification text, let's create a way to send it
|
|||
|
||||
Create an outgoing flow from the *createNotification* node and select the **Twilio** node. Rename the node to *sendSMS*. Click on the **Operation** dropdown and select **Send SMS** and then enter a number in the **To Number** field.
|
||||
|
||||
In the **Body** field of the *sendSMS* node, we will retreive the data returned from the *createNotification* node. Since *createNotification* only returns a string, simply enter the name of the node as shown below to access it:
|
||||
In the **Body** field of the *sendSMS* node, we will retrieve the data returned from the *createNotification* node. Since *createNotification* only returns a string, simply enter the name of the node as shown below to access it:
|
||||
```js
|
||||
{{createNotification}}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -5,5 +5,5 @@
|
|||
|
||||
[template.environment]
|
||||
NODE_ENV = "production"
|
||||
NODE_VERSION = "16.18.1"
|
||||
NPM_VERSION = "8.19.2"
|
||||
NODE_VERSION = "18.18.2"
|
||||
NPM_VERSION = "9.8.1"
|
||||
|
|
|
|||
16960
docs/package-lock.json
generated
16960
docs/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -14,14 +14,20 @@
|
|||
"write-heading-ids": "docusaurus write-heading-ids"
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "^2.4.3",
|
||||
"@docusaurus/plugin-google-gtag": "^2.4.3",
|
||||
"@docusaurus/plugin-sitemap": "^2.4.3",
|
||||
"@docusaurus/preset-classic": "^2.4.3",
|
||||
"clsx": "^1.2.1",
|
||||
"@docusaurus/core": "^3.2.1",
|
||||
"@docusaurus/plugin-google-gtag": "^3.2.1",
|
||||
"@mdx-js/react": "^3.0.1",
|
||||
"prism-react-renderer": "^2.1.0",
|
||||
"@docusaurus/plugin-sitemap": "^3.2.1",
|
||||
"@docusaurus/preset-classic": "^3.2.1",
|
||||
"clsx": "^2.0.0",
|
||||
"plugin-image-zoom": "github:flexanalytics/plugin-image-zoom",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@docusaurus/module-type-aliases": "3.2.1",
|
||||
"@docusaurus/types": "3.2.1"
|
||||
},
|
||||
"overrides": {
|
||||
"got": "^12.1.0",
|
||||
|
|
@ -38,5 +44,9 @@
|
|||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"engines": {
|
||||
"node": "18.18.2",
|
||||
"npm": "9.8.1"
|
||||
}
|
||||
}
|
||||
BIN
docs/static/img/how-to/events-chart/plotly-chart-v2.png
vendored
Normal file
BIN
docs/static/img/how-to/events-chart/plotly-chart-v2.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 361 KiB |
BIN
docs/static/img/how-to/import-js/create-new-query-v2.png
vendored
Normal file
BIN
docs/static/img/how-to/import-js/create-new-query-v2.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
BIN
docs/static/img/how-to/import-js/flatten-js-v2.png
vendored
Normal file
BIN
docs/static/img/how-to/import-js/flatten-js-v2.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 395 KiB |
BIN
docs/static/img/how-to/import-js/import-successful-v2.png
vendored
Normal file
BIN
docs/static/img/how-to/import-js/import-successful-v2.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 353 KiB |
BIN
docs/static/img/how-to/import-js/math-js-v2.png
vendored
BIN
docs/static/img/how-to/import-js/math-js-v2.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 366 KiB After Width: | Height: | Size: 395 KiB |
BIN
docs/static/img/how-to/server-side/change-v2.gif
vendored
Normal file
BIN
docs/static/img/how-to/server-side/change-v2.gif
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
BIN
docs/static/img/how-to/server-side/data-v2.png
vendored
Normal file
BIN
docs/static/img/how-to/server-side/data-v2.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 363 KiB |
BIN
docs/static/img/how-to/server-side/event-v2.png
vendored
Normal file
BIN
docs/static/img/how-to/server-side/event-v2.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
BIN
docs/static/img/how-to/server-side/pagination-v2.png
vendored
Normal file
BIN
docs/static/img/how-to/server-side/pagination-v2.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 544 KiB |
BIN
docs/static/img/how-to/uses3presignedurl/access-signed-url.png
vendored
Normal file
BIN
docs/static/img/how-to/uses3presignedurl/access-signed-url.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue