+
### Date Range
Retrieve the log of events that occurred within the specified date and time range using the range picker. By default, the system loads 24-hour logs for the initial view. The maximum duration that can be specified for the "from" and "to" dates is 30 days.
@@ -24,10 +26,14 @@ Pagination at the bottom allows navigation through the pages, with each page dis
-
+
+
+
+
+
### Filter Audit Logs
You can apply filters to the audited events based on the following criteria.
@@ -42,7 +48,7 @@ The dropdown will display all the apps associated with your account. Select an a
#### Select Resources
-| Resources | description |
+|
Resources
|
Description
|
| ----------- | ----------- |
| User | Filter all the User events like `USER_LOGIN`, `USER_SIGNUP`, `USER_INVITE`, AND `USER_INVITE_REDEEM`. |
| App | Filter all the App events like `APP_CREATE`, `APP_UPDATE`,`APP_VIEW`,`APP_DELETE`,`APP_IMPORT`,`APP_EXPORT`,`APP_CLONE`. |
@@ -52,7 +58,7 @@ The dropdown will display all the apps associated with your account. Select an a
#### Select Actions
-| Actions | description |
+|
Actions
|
Description
|
| ----------- | ----------- |
| USER_LOGIN | This event is recorded everytime a user logins. |
| USER_SIGNUP | This event is recorded everytime a new signup is made. |
@@ -71,6 +77,10 @@ The dropdown will display all the apps associated with your account. Select an a
| GROUP_PERMISSION_DELETE | This event is recorded whenever a user group is deleted from an account. |
| APP_GROUP_PERMISSION_UPDATE | For every app added in to user group, you can set privileges like `View` or `Edit` and whenever these privileges are updated this event is recorded. By default, the permission of an app for a user group is set to `View`. |
+
+
+
+
### Understanding Log Information
@@ -79,7 +89,7 @@ The dropdown will display all the apps associated with your account. Select an a
-| Property | Description |
+|
Property
|
Description
|
| ----------- | ----------- |
| action_type | This indicates the type of action that was logged in the event. Refer to [this](#select-actions) for more information on actions. |
| created_at | Shows the date and time when the event was logged. |
@@ -92,7 +102,11 @@ The dropdown will display all the apps associated with your account. Select an a
| resource_type | Indicates the type of the [resources](#select-resources) involved in the logged event. |
| user_id | Each user account in ToolJet has a unique ID associated with it, which is recorded when an event occurs. |
-### Log file
+
+
+
+
+### Log File
The file will contain all the data from audit logs. The log file can be created by specifying the path in the [environment variables](/docs/setup/env-vars). The log file is rotated on a daily basis and is updated dynamically every time a new audit log is generated.
@@ -110,7 +124,7 @@ homepath/hsbc/dashboard/log/tooljet_log/{process_id}-{date}/audit.log
```
Here, `{process_id}` is a placeholder for the unique process identifier, and `{date}` represents the current date. This structured path ensures that audit logs are organized by both process and date, facilitating easy traceability and analysis.
-| Variable | Description |
+|
Variable
|
Description
|
| -------- | --------------------------------------------------------------------------- |
| LOG_FILE_PATH | the path where the log file will be created ( eg: tooljet/log/tooljet-audit.log) |
@@ -141,3 +155,5 @@ Here, `{process_id}` is a placeholder for the unique process identifier, and `{d
+
+
diff --git a/docs/docs/Enterprise/superadmin.md b/docs/docs/Enterprise/superadmin.md
index ef91fd711f..6ca7b68556 100644
--- a/docs/docs/Enterprise/superadmin.md
+++ b/docs/docs/Enterprise/superadmin.md
@@ -9,9 +9,11 @@ A Super Admin is the user who has full access to all the Workspaces, Users, and
The user details entered while setting up ToolJet will have Super Admin privileges.
-## How Super Admin is different from Admin
+
-| Privilege | Admin | Super Admin |
+## How Super Admin is Different from Admin
+
+|
Privilege
| Admin | Super Admin |
| --------- | ----- | ----------- |
| Manage Users in their workspace (Invite/Archive/Unarchive) | ✅ | ✅ |
| Manage Groups in their workspace (Create Group/Add or Delete Users from groups/ Modify Group Permissions) | ✅ | ✅ |
@@ -30,9 +32,14 @@ The user details entered while setting up ToolJet will have Super Admin privileg
| [Make any user Super Admin](#make-the-user-super-admin) | ❌ | ✅ |
| [Manage all workspaces in the instance(Archive/Unarchive)](#all-workspaces) | ❌ | ✅ |
| [Restrict creation of personal workspace of users](#restrict-creation-of-personal-workspace-of-users) | ❌ | ✅ |
+| [Configure instance level login](#instance-login) | ❌ | ✅ |
| [Enable Multiplayer editing](#enable-multiplayer-editing) | ❌ | ✅ |
| [Implement White Labelling](#white-labelling) | ❌ | ✅ |
+
+
+
+
## Super Admin features
### Access any workspace
@@ -75,6 +82,10 @@ Super Admins have all the privileges that an Admin of a workspace have, Super Ad
- **✅ Copilot**: Enabling or disabling Copilot
- **✅ Custom Styles**: Adding or modifying custom styles
+
+
+
+
## Settings
Only Super Admins can access the Settings. To access the Settings page, click on the **⚙️** button and select **Settings** from the dropdown.
@@ -86,12 +97,16 @@ Only Super Admins can access the Settings. To access the Settings page, click on
- **[White labelling](#white-labelling)**
-
+
+
+
+
+
## All Users
-### Manage all users in the instance
+### Manage all Users in the Instance
**All Users** settings can be used to check the list of all the users available on all the workspaces in the instance. Super Admins can also promote/demote any user to/from Super Admin from this page. They can also archive/unarchive any user at an instance level from this setting.
@@ -99,14 +114,14 @@ Only Super Admins can access the Settings. To access the Settings page, click on
-### Archiving a user from all the workspaces (Instance level)
+### Archiving a User from all the Workspaces (Instance Level)
Super Admins have the authority to deactivate any user at instance level. This will remove the user from all the workspaces in the instance.
To archive a user, go to the **All Users** settings, click on the kebab menu next to the user that is to be archived and select **Archive** option. Once the user is archived, the status will change from **Active** to **Archived**. The user will not be able to login to any workspace in the instance.
-
+
@@ -119,11 +134,11 @@ To archive a user, go to the **All Users** settings, click on the kebab menu nex
-### Reset password of any user
+### Reset Password of any User
Super Admins can reset the password of any user from the **All Users** settings. To reset the password, click on the kebab menu next to the user and select **Reset Password** option. A pop-up will appear asking either to auto-generate a password or to enter a new password.
-### Edit user details
+### Edit User Details
Super Admins can edit the details of any user from the **All Users** settings. To edit the details, click on the kebab menu next to the user and select **Edit user details** option.
@@ -139,24 +154,40 @@ From the **Edit user details** drawer, Super Admins can make any user as Super A
-## All workspaces
+
+
+
+
+## All Workspaces
The All Workspaces tab provides a comprehensive view of all workspaces within the ToolJet instance. Super Admins can use this functionality to monitor and manage workspaces collectively, ensuring efficient administration and organization-wide oversight.
Super Admins have the authority to **archive** or **unarchive** workspaces of any user in the instance as needed. Archiving a workspace essentially sets it to an inactive state, removing it from active use. Conversely, unarchiving reactivates a previously archived workspace, making it accessible once again.
-
+
+
+
+
+
### Current Workspace
The **Current Workspace** label will be displayed next to the workspace that the Super Admin has currently opened. If the Super Admin archives the current workspace, they will be prompted to switch to another active workspace to ensure continuous accessibility.
+
+
+
+
### Open Active Workspaces
In the list of active workspaces, there is an option to open the workspace directly. This feature helps superadmins to quickly navigate to the workspace on the new tab of the browser and manage the workspace.
+
+
+
+
### Archive Workspaces
The **Archive** button on the right of the workspace name allows Super Admins to archive the workspace. Once archived, the workspace will be moved to the **Archived Workspaces** section.
@@ -165,41 +196,125 @@ The **Archive** button on the right of the workspace name allows Super Admins to
- The apps on the archived workspace won't be accessable through the URL
- Users will be logged out if they don't have access to any active workspace
+
+
+
+
### Archived Workspaces
The **Archived** section displays a list of all archived workspaces. Super Admins can unarchive any workspace from this section by clicking the **Unarchive** button.
-
+
-## Manage instance settings
+
+
+
+
+## Manage Instance Settings
-
+
-### Restrict creation of personal workspace of users
+
+
+
+
+### Restrict Creation of Personal Workspace of Users
When a user joins a workspace, they are provided with their own personal workspace and option to create new workspaces.
Super Admins can **control** this behavior from the Manage Settings page, they can **toggle off** the option to **Allow personal workspace**. Now whenever a user joins a workspace they won't be provided a personal workspace nor they will be able to create a new workspace in the instance.
-### Enable multiplayer editing
+
+
+
+
+### Enable Multiplayer Editing
Super Admins can enable multiplayer editing from the Manage Settings page. Once enabled, users will be able to edit the same app simultaneously resulting in real-time collaboration.
+
+
+
+
### Comments
Super Admins can enable comments from the Manage Settings page. Once enabled, users will be able to collaborate by adding comments anywhere on the canvas.
-## White labelling
+
+
+
+
+## White Labelling
This feature allows you to customize the ToolJet instance with your own branding. You can change the logo, favicon, and the name of the instance.
Check out the [White labelling](/docs/enterprise/white-label/) page for more details.
+
+
+
+
+## Instance Login
+
+Instance login configuration at the Settings level allows super admins to set up and manage the default login method for all workspaces within the instance. This ensures a standardized login experience unless individual workspace admins choose to configure a different method for their specific workspace.
+
+
+
+
+
+### Access and Permissions
+
+Only super admins have the authority to configure **Instance login** settings. This ensures centralized control over the default login method across the entire instance.
+
+
+
+
+
+### Super Admin URL
+
+This URL serves as a fail-safe in scenarios where password login is disabled, SSO is not configured, or a paid plan expires. Importantly, this URL exclusively supports password login and is accessible only by the super admin, preventing any unauthorized access.
+
+The default URL for super admin login is `https:///login/super-admin`. This URL can be accessed by the super admin to log in to the instance and manage the settings.
+
+
+
+
+
+### Enable sign-up
+
+The "Enable Sign Up" option allows users to sign up without being invited. It is important to note that this feature includes both password login and SSO, providing a seamless onboarding experience for users.
+
+
+
+
+
+### Password login
+
+Super admins can enable or disable password login for the entire instance. This setting ensures that all workspaces within the instance adhere to the same login method, unless individual workspace admins choose to configure a different method for their specific workspace.
+
+
+
+
+
+### Enable Workspace Configuration
+
+Turning off this option restricts workspace admins from configuring the login method for their workspace. This configuration hides the Workspace Login option from the workspace settings tab.
+
+
+
+
+
+
+
+
+
## License
Manage the instance license via the **Settings** page. Super Admins have the capability to update the instance's license key from this page.
-Check out the [License](/docs/licensing) page for more details.
\ No newline at end of file
+Check out the [License](/docs/licensing) page for more details.
+
+
\ No newline at end of file
diff --git a/docs/docs/Enterprise/white-label.md b/docs/docs/Enterprise/white-label.md
index 9f1d7b95ad..b4277bdc40 100644
--- a/docs/docs/Enterprise/white-label.md
+++ b/docs/docs/Enterprise/white-label.md
@@ -12,45 +12,47 @@ With this feature, you gain the ability to rebrand the following key elements:
- **Application Logo**: This includes the logo displayed on the login screen, dashboard, and app-editor.
-
+
-- **Favicon**: The small icon associated with your application.
+- **Favicon**: The small icon associated with your application. It is displayed in the browser tab.
+
+- **Page Title**: This is the text displayed in the browser tab.
+
+Example, we have set a favicon image and page title as `Bon Ton` in the below image.
-
+
-- **Page Title**: This is the text displayed next to the Favicon.
-
-
-
-
+
## Configuration
-To enable white labelling, you'll need to go to the **Settings** from the Dashboard and click on the `White labelling` tab. On the White labelling page, you'll be able to configure the following:
+To enable white labelling, click on the gear icon on the bottom left of the dashboard and select `Settings`. From the settings page, click on the `White labelling` tab. On the White labelling page, you'll be able to configure the following:
- **Application Logo**: Add the URL of the image you want to use as your application logo. Preferred dimensions of the logo are: width `130px` and height `26px`.
- **Favicon**: Enter the URL of the image you want to use as your application's favicon. Preferred dimensions of the favicon are: width `32px` and height `32px` or `16px` and height `16px`.
- **Page Title**: Enter the text you want to display as your application's title. Preferred title length are 50-60 characters.
-
+
+
+
## ToolJet Cloud
-If you are using ToolJet Cloud, you can enable white labelling by going to the **Settings** from the Dashboard and clicking on the `White labelling` tab. On the White labelling page, you'll be able to configure the following:
+If you are using ToolJet Cloud, click on the gear icon on the bottom left of the dashboard and select `Settings`. From the settings page, click on the `White labelling` tab. On the White labelling page, you'll be able to configure the following:
- **Application Logo**: Add the URL of the image you want to use as your application logo. Preferred dimensions of the logo are: width `130px` and height `26px`.
- **Page Title**: Enter the text you want to display as your application's title. Preferred title length are 50-60 characters.
- **Favicon**: Enter the URL of the image you want to use as your application's favicon. Preferred dimensions of the favicon are: width `32px` and height `32px` or `16px` and height `16px`.
-
+
diff --git a/docs/docs/actions/unset-variable.md b/docs/docs/actions/unset-variable.md
index 1e6b35f99f..7da5a78161 100644
--- a/docs/docs/actions/unset-variable.md
+++ b/docs/docs/actions/unset-variable.md
@@ -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
diff --git a/docs/docs/app-builder/customcss.md b/docs/docs/app-builder/customcss.md
index 870292c51e..9e3f5abcd5 100644
--- a/docs/docs/app-builder/customcss.md
+++ b/docs/docs/app-builder/customcss.md
@@ -11,7 +11,7 @@ Custom Styles helps in maintaining consistent themes across the ToolJet apps, al
-
+
@@ -22,7 +22,7 @@ To add Custom Styles to ToolJet apps, users should follow these steps:
1. Go to the **Custom Styles** Page, accessible under **Workspace Settings** from the ToolJet dashboard.
-
+
@@ -51,6 +51,6 @@ To add Custom Styles to ToolJet apps, users should follow these steps:
-
+
\ No newline at end of file
diff --git a/docs/docs/app-builder/import-export-apps.md b/docs/docs/app-builder/import-export-apps.md
index adc4eb923e..e8de42db22 100644
--- a/docs/docs/app-builder/import-export-apps.md
+++ b/docs/docs/app-builder/import-export-apps.md
@@ -14,14 +14,14 @@ This documentation explains the process of exporting and importing applications
- Click on the **Export app** button.
-
+
- If you select `Export All`, all the versions of the application will be exported in JSON format. If you select `Export selected version`, only the selected version will be exported in JSON format.
- Ticking the `Export ToolJet table schema` checkbox will also export the related ToolJet Database table schemas with your application. In this case, when you import the application in a workspace, the related ToolJet Database tables will also be created.
-
+
@@ -34,7 +34,7 @@ This documentation explains the process of exporting and importing applications
- Click on the ellipses on the **Create new app** button and select `Import`.
-
+
- After clicking on `Import`, choose the relevant JSON file that you previously downloaded during the application export process.
diff --git a/docs/docs/app-builder/toolbar.md b/docs/docs/app-builder/toolbar.md
index e7c8b504a9..bd44d63d73 100644
--- a/docs/docs/app-builder/toolbar.md
+++ b/docs/docs/app-builder/toolbar.md
@@ -3,127 +3,117 @@ id: topbar
title: Topbar
---
-Topbar is present at the top of the app-builder, and is used to configure the app settings.
+The Topbar of the app-builder interface serves as a central hub for configuring app settings.
-### App name
+### Application Name
-The App name can be modified by selecting the application name located on the left side of the topbar.
-
-Upon the creation of a new app, it is automatically assigned a unique app name.
+To modify the app name, click on the application name on the left side of the topbar.
-
-
-
+
### Desktop or Mobile layout
-Switch the canvas mode in Mobile or Desktop layout from the topbar.
-
-#### Showing component on mobile layout
-
-Click on the component handle to open [component config inspector](/docs/app-builder/components-library#component-config-inspector) on the right sidebar. Scroll down to the **Layout** section and toggle on the Mobile Layout option. The width of the components will be adjusted to fit the Mobile Layout.
-
-#### Adding a new component to mobile layout
-
-Switch the canvas to mobile layout by clicking the mobile icon on the topbar. Drag and drop a new component to the canvas. This component will not be visible on the desktop layout unless **Show on desktop** is enabled from the component config inspector.
-
-:::info
-Width of the component will be automatically adjusted to fit the screen while viewing the application in app viewer.
-:::
+Toggle between Mobile and Desktop views directly from the topbar to switch the canvas mode.
-
-
-
+
-### Changes saved indicator
+#### Showing Components on Mobile or Desktop layout
-Whenever a change is made on the component or the query panel/queries, the changes are saved automatically. The changes saved indicator will be displayed on the topbar. This helps the developer to know if the changes are saved or not.
+Select a component and navigate to its Properties Panel on the right. Scroll down to the **Devices** section and toggle on the `Show on mobile` option. This will ensure that the component is visible in Mobile view.
+
+
-
+Similarly, you can toggle on the `Show on desktop` option to make the component visible in the Desktop view.
+### Changes Saved Indicator
+
+Whenever changes are made in the application, they are saved automatically. The topbar's `Changes Saved` indicator shows the save status.
+
+
+
### Developer Details
-This will show a profile picture of the developer who is currently working on the application. Hovering over the profile picture will show the name of the developer. If there is no profile picture, then the first letter of the first name and last name will be displayed.
+The Developer Details icon will show a profile picture of the currently active developer. Hovering over this picture reveals the developer's name. If no picture is set, initials are displayed.
+
+
-
+### App Environment
+You can use the Env dropdown menu to select an environment for your app: Development, Staging, or Production. This feature facilitates seamless transition through the app development cycle.
+
+:::tip
+Learn more about multi-environment configuration **[here](/docs/release-management/multi-environment/)**.
+:::
+
+
+
### Version Manager
-**Add** or **remove** versions of an application from the Version Manager. Click on the `edit` icon next to version name to rename the version.
-
-When many developers are working on an app, **Versioning** allows them to save their own version of the app. This also prevents developers from overwriting the other developer's work.
+You can manage application versions through the Version Manager. You can use this dropdown to edit a version name or adding/removing versions.
:::tip
Versioning is also helpful when working with **[multiple environments](/docs/release-management/multi-environment/)** like development, staging and production.
:::
-
-
-
+
+
+### 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)**.
### Undo or Redo
-Undo or Redo any action performed on the canvas.
+You can Undo or Redo any action performed on the canvas using the Undo and Redo buttons.
You can also use **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)** to perform such actions.
-
-
-
+
### Share
-Share your applications with a unique URL generated automatically or edit the URL slug to personalize it.
-
-- When **Make application public** toggle is off and **Shareable app link** is shared then the users will have to login to ToolJet to use the application. Toggle on to make the application public and accessible to anyone on the internet without requiring a ToolJet login. Only released apps can be accessed using the **Shareable app link**.
-- ToolJet generates the **Embedded link** which can be used to embed application on the webpages.
+The Share button allows you to share your applications with a unique URL generated automatically or edit the URL slug to personalize it. The share button will only be active when your application is released.
:::tip
-Learn more about **[Sharing](/docs/app-builder/share)** your tooljet applications.
+Learn more about **[Sharing](/docs/app-builder/share)** your ToolJet applications.
:::
-
-
-
+
### Preview
-Clicking on **Preview** button will open up the currently opened version of the app in the new tab. This is really handy when the app developer wants to immediately check the app preview in production.
+The Preview button allows you to view the current app version in a new tab, facilitating immediate feedback on changes.
-
-
-
+
### Release
-Release the app to publish the current version of the app and push the changes into the production.
+Use the Release button on the right to publish the current app version. The Release button, used to publish the current app version, becomes visible only in the Production environment, ensuring that only finalized versions are made public.
:::caution
ToolJet will block editing of the Released version of an app and will display a prompt to create a new version to make the changes. This is to prevent accidentally pushing an unfinished app to the live version.
:::
-
-
-
+
\ No newline at end of file
diff --git a/docs/docs/contributing-guide/marketplace/creating-a-plugin.md b/docs/docs/contributing-guide/marketplace/creating-a-plugin.md
index 6cadb88d7e..088ebff209 100644
--- a/docs/docs/contributing-guide/marketplace/creating-a-plugin.md
+++ b/docs/docs/contributing-guide/marketplace/creating-a-plugin.md
@@ -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
diff --git a/docs/docs/contributing-guide/setup/docker.md b/docs/docs/contributing-guide/setup/docker.md
index a9b9716043..d086130ba4 100644
--- a/docs/docs/contributing-guide/setup/docker.md
+++ b/docs/docs/contributing-guide/setup/docker.md
@@ -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
+docker compose run --rm server npm --prefix server run test
```
## Troubleshooting
diff --git a/docs/docs/contributing-guide/setup/macos.md b/docs/docs/contributing-guide/setup/macos.md
index 5b434611b4..fcd7070ae7 100644
--- a/docs/docs/contributing-guide/setup/macos.md
+++ b/docs/docs/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /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)
```bash
brew install nvm
diff --git a/docs/docs/contributing-guide/troubleshooting/eslint.md b/docs/docs/contributing-guide/troubleshooting/eslint.md
index 924f7bfcc3..8caacce4c9 100644
--- a/docs/docs/contributing-guide/troubleshooting/eslint.md
+++ b/docs/docs/contributing-guide/troubleshooting/eslint.md
@@ -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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/docs/copilot.md b/docs/docs/copilot.md
index 8400b47241..1026f3d5d4 100644
--- a/docs/docs/copilot.md
+++ b/docs/docs/copilot.md
@@ -11,6 +11,8 @@ ToolJet Copilot is currently in private beta for **Business** and **Enterprise**
**ToolJet Copilot** helps you write your queries faster. It uses OpenAI to suggest queries based on your data.
+
+
## Activating Copilot
To gain access to Copilot, all users, including administrators, can individually sign up for the waitlist program. Upon successful sign up, each user will be issued a distinctive API key linked to their account. However, the exclusive authority to activate Copilot within the workspace settings lies solely with administrators. Administrators can proceed to the Copilot section in the workspace settings, where they can utilize their respective API key to set the "Enable Copilot" toggle option.
@@ -23,20 +25,32 @@ You can join the waitlist here: **https://tooljet.com/copilot**
-
+
+
+
+
+
## Using Copilot
Once activated, the Copilot feature can be accessed while editing any query within the transformations section in the query editor.
Copilot's functionality relies on the provision of clear and concise plain English prompts. It possesses the capability to interact with and retrieve information from various components, enabling it to generate code specific to the desired actions associated with those components. This capability is facilitated by Copilot's comprehensive understanding of the application's present state.
+
+
+
+
### Token Limit per Workspace
A token is a unit of text that language models like ChatGPT process, such as a word or a character. To ensure fair usage and resource allocation among workspaces, a token limit is implemented. Currently, the token limit is set to **400**. If the token limit is surpassed, the request is declined with the message **"Unable to process request. Max tokens exceeded."**
+
+
+
+
### Rate-Limiting
To prevent abuse or excessive usage of the Copilot API, rate-limiting measures are in place. The following rules apply:
@@ -49,6 +63,10 @@ To prevent abuse or excessive usage of the Copilot API, rate-limiting measures a
When generating an API key, if a workspace has 5 editors, the daily request limit will be 500 (100 requests per editor). Even if the workspace later expands to 10 editors after a week, the maximum number of requests allowed per day will still be 500.
:::
+
+
+
+
### Example: Generating a SQL statement
This example demonstrates the usage of copilot by generating a SQL query to fetch the order details from a PostgreSQL database based on the key provided in the REST API data.
@@ -56,42 +74,44 @@ This example demonstrates the usage of copilot by generating a SQL query to fetc
- Create a RESTAPI query using this mock api endpoint: https://fakestoreapi.com/users/1
- Enable transformation on the query editor
-
+
-
+
-
+
- To generate a SQL query using Copilot, first enter the desired prompt within comments in the transformations code editor. Once the prompt has been entered, simply click the **Generate Code** button, and Copilot will generate the corresponding SQL query.
- Assuming that a PostgreSQL data source is already connected and there are two tables in it, namely `customer` and `orders`, enter the provided prompt in the code editor:
-```bash
-/*
-Assume the data is an object which has email key.
-assume we have a database with two tables: "customer" and "orders." The "customer" table has columns such as "customer_id," "customer_name," and "country." The "orders" table has columns such as "order_id," "customer_id," "order_date," and "total_amount."
-return a SQL query to retrieve the total order amounts for customers from the email key retrieved from the data, who have placed more than three orders.*/
-```
+ ```bash
+ /*
+ Assume the data is an object which has email key.
+ assume we have a database with two tables: "customer" and "orders." The "customer" table has columns such as "customer_id," "customer_name," and "country." The "orders" table has columns such as "order_id," "customer_id," "order_date," and "total_amount."
+ return a SQL query to retrieve the total order amounts for customers from the email key retrieved from the data, who have placed more than three orders.*/
+ ```
- Click on the "Generate Code" button to generate the SQL query.
- Once the code is generated, add a return statement below the code to return the generated SQL query. The variable name for the query might be different in your generated code.
-```bash
-return query //the variable might be different in your generated code
-```
+ ```bash
+ return query //the variable might be different in your generated code
+ ```
- Preview the returned SQL statement in the preview block to check if it is correct. Then click on the "Run" button to trigger the query.
- Once the query is executed, create a new PostgreSQL query in SQL mode and use JavaScript to get the data query data dynamically:
-```js
-{{queries.restapi1.data}}
-```
+ ```js
+ {{queries.restapi1.data}}
+ ```
-
+
-
+
+
+
@@ -100,3 +120,4 @@ While using ToolJet Copilot, it is important to note that the accuracy of the ou
:::
If you have feedback or questions about ToolJet Copilot, feel free to join our **[slack community](https://tooljet.com/slack)**.
+
diff --git a/docs/docs/dashboard.md b/docs/docs/dashboard.md
index cc173528e7..74e7dc0a93 100644
--- a/docs/docs/dashboard.md
+++ b/docs/docs/dashboard.md
@@ -9,21 +9,27 @@ Furthermore, the dashboard serves as a gateway to various essential sections, su
-
+
+
+
## Workspace Manager
-The workspace manager is located on the bottom left corner of the dashboard. Clicking on the workspace manager will open a dropdown menu with a list of all the workspaces you are a part of. You can switch between workspaces by clicking on the workspace name from the dropdown menu.
+The workspace manager is located on the bottom left corner of the dashboard. Clicking on the workspace manager will open a dropdown menu listing all the workspaces you belong to. You can switch between workspaces by clicking on the workspace name from the dropdown menu.
-
+
-### Add new workspace
+
+
+
+
+### Add New Workspace
On clicking the `Add new workspace` button, a modal will open where you can enter the name of the workspace, enter the unique workspace slug, and can see the preview of the workspace URL. Click on the `+ Create Workspace` button to create a new workspace.
@@ -39,21 +45,29 @@ Previously, the workspace slug was an automatically generated workspace ID, like
-
+
-### Edit workspace
+
+
+
+
+### Edit Workspace
Similar to the `Add new workspace` button, clicking on the `Edit workspace` button will open a modal where you can edit the name of the workspace and the workspace slug. Click on the `Save` button to update the changes.
-## Create a new app
+
-To create a new app, click on the `Create new app` button on the top left corner of the dashboard. Clicking on this button will open a modal where you can enter the name of the app and then click on the `+ Create app` button to create a new app.
+
+
+## Create a New App
+
+To create a new app, click on the `Create new app` button on the top left corner of the dashboard. Clicking on this button will open a modal where you can enter the name of the app and then click on the `+ Create app` button to create a new app.
-
+
@@ -63,49 +77,76 @@ There are three dots on the right side of the `Create new app` button. Clicking
- **[Choose from templates](#choose-from-templates)**
- **[Import](#import)**
-### Choose from templates
+
+
+
+
+### Choose from Templates
This option will open a modal with a list of pre-built templates. You can choose any template from this list to create a new app.
-
+
+
+
+
+
### Import
-This option will open a file picker to import a JSON file. This JSON file should be the app exported from ToolJet.
+This option will open a file picker to import a JSON file. This JSON file should contain the app data exported from ToolJet.
-
+
-### Importing app connected to marketplace plugins
+
-When importing an app with marketplace plugins, the marketplace plugin should be installed in the tooljet workspace where the app is being imported. If the marketplace plugin is not installed, the app will be imported without the queries for that plugin.
+
-#### When marketplace plugin is installed
+### Importing an App Connected to Marketplace Plugins
-If marketplace plugin is installed in the tooljet workspace where the app is being imported, the queries connected to the marketplace plugin will be available in the imported application. The queries will be linked to the data source with the same name if it is already present. If the data source is not present, a new data source will be created of that marketplace plugin and linked to the queries.
+When importing an app with Marketplace plugins, the Marketplace plugin should be installed in the ToolJet workspace where the app is being imported. If the Marketplace plugin is not installed, the app will be imported without the queries for that plugin.
-#### When marketplace plugin is not installed
+#### When Marketplace plugin is installed
-If you have an app with a query linked to a marketplace plugin, and you import that app in a tooljet workspace where the marketplace plugin is not installed as the data source, the queries will be not be available in the imported application.
+If Marketplace plugin is installed in the ToolJet workspace where the app is being imported, the queries connected to the Marketplace plugin will be available in the imported application. The queries will be linked to the data source with the same name if it is already present. If the data source is not present, a new data source will be created of that Marketplace plugin and linked to the queries.
-### Importing app connected to tooljet table
+#### When Marketplace plugin is not installed
-When the app(JSON file) that includes the table schema is imported, and the table is not present in the tooljet database of the workspace where the app is being imported, a new table will be created in the tooljet database with the same name as the table in the imported app.
+If you have an app with a query linked to a Marketplace plugin, and you import that app in a ToolJet workspace where the Marketplace plugin is not installed as the data source, the queries will be not be available in the imported application.
+
+
+
+
+
+### Importing App Connected to ToolJet Table
+
+When the app(JSON file) that includes the table schema is imported, and the table is not present in the ToolJet database of the workspace where the app is being imported, a new table will be created in the ToolJet database with the same name as the table in the imported app.
If the table with the same name is already present in the workspace, the new table will be created with the name `
_`. Example: `_1627980000`.
+
+
+
+
## Folders
+
+
+
### Create a new folder
Folders can be created to organize your apps. To create a new folder, click on the `+` button on the left drawer of the dashboard. Clicking on this button will open a modal, enter the name of the folder and click on the `Create Folder` button to create a new folder.
+
+
+
+
### Delete or Edit Folder
A folder can be **deleted** or **renamed**. To delete or rename a folder, click on the kebab menu on the right side of the folder name. Clicking on kebab menu will open a dropdown menu with two options:
@@ -115,48 +156,67 @@ A folder can be **deleted** or **renamed**. To delete or rename a folder, click
-
+
-### Search folders
+
+
+
+
+### Search Folders
Folders can be searched by clicking on the search icon on the left drawer of the dashboard. Clicking on the search icon will open a search bar, enter the name of the folder to search.
-
+
-### Slug for folders
+
+
+
+
+### Slug for Folders
The folder's URL slug is generated automatically from its name, providing direct access to the folder using the slug.
To get the URL of a specific folder, the user will have to select that folder and then copy the URL from the address bar of the browser. The copied URL can be used to share with other users of the workspace.
-Example: If the name of the folder is `customer support`, The folder can be accessed directly from the URL `https://tooljet.com/?folder=customer%20support`.
+Example: If the name of the folder is `Customer Support`, The folder can be accessed directly from the URL `https://tooljet.com/?folder=Customer%20Support`.
-
+
-## App cards
+
+
+
+
+
+
+## App Cards
The dashboard displays all the apps created in the workspace as cards. These cards are displayed in a grid layout. The app cards display the **name of the app**, the **name of the creator**, and the **date of creation**. The app cards also display the app **icon**, which can be changed by clicking on the `Change Icon` option from the app menu.
-
+
-## App menu
+
-The app menu is located on the top right corner of the app card. Clicking on the app menu will open a dropdown menu with a list of options. These options are:
+
+## App Menu
+
+The app menu is located on the top right corner of the app card. Clicking on the app menu will open a dropdown menu containing various options. These options are:
+
+- **[Rename app](#rename-app)**
- **[Change Icon](#change-icon)**
- **[Add to folder](#add-to-folder)**
- **[Clone app](#clone-app)**
@@ -165,84 +225,128 @@ The app menu is located on the top right corner of the app card. Clicking on the
-
+
+
+
+
+
+### Rename App
+
+This option will open a modal that will allow you to rename your app.
+
+
+
+
+
+
+
+
+
+
+
### Change Icon
This option will open a modal with a list of icons. You can choose any icon from this list to change the app icon.
-
+
-### Add to folder
+
+
+
+
+### Add to Folder
This option will open a modal with a list of folders. You can choose any folder from this list to add the app to the folder.
-
+
-### Clone app
+
-Selecting this option will immediately open the cloned app in the app builder with the same configuration as the original app. The new app will be named as `` followed by unix timestamp. Example: ` 1627980000`.
+
+
+### Clone App
+
+Selecting this option will open a modal where you can enter the desired name for the cloned app. After providing the desired name, click on the Clone app button. This will immediately open the cloned app in the app builder with the same configuration as the original app.
-
+
-### Export app
+
-This option will download a JSON file of the application. This JSON file can be [imported](#import) to ToolJet to create a new app. The exported app will include all the queries connected to global data sources including the data source created from Marketplace plugins.
+
+
+### Export App
+
+This option downloads a JSON file containing the application data. This JSON file can be [imported](#import) to ToolJet to create a new app. The exported app will include all the queries connected to global data sources including the data source created from Marketplace plugins.
This option allows you to select a specific version of the app to export or export all the versions of the app. To export a specific version of the app, select a version from the list of available versions in the modal and click on the `Export selected version` and to export all the versions of the app, click on the `Export All` button.
#### Export ToolJet table schema
-Selecting this option will include the schema of the tooljet table connected to that application in the exported JSON file. This option is available for all the apps on ToolJet however only the apps with a tooljet table connected(includes tjdb query) will have the schema included in the exported JSON file.
+Selecting this option will include the schema of the ToolJet table connected to that application in the exported JSON file. This option is available for all the apps on ToolJet however only the apps with a ToolJet table connected(includes tjdb query) will have the schema included in the exported JSON file.
This JSON file can be used to [import](#importing-app-connected-to-tooljet-table) the application to ToolJet along with the table schema that was connected to the application.
-
+
-### Delete app
+
+
+
+
+### Delete App
This option will open a confirmation modal to delete the app. Click on the `Delete` button to delete the app.
-
+
-## App search
+
+
+
+
+## App Search
Apps can be searched by clicking on the search bar on the center of the dashboard. Click on the search bar and enter the name of the app to search.
-
+
+
+
+
+
## Current ToolJet Version
-The current version of ToolJet is displayed on the top right corner of the dashboard.
+The current version of ToolJet is displayed on the top right corner of the dashboard.
-
+
+
+
\ No newline at end of file
diff --git a/docs/docs/data-sources/airtable.md b/docs/docs/data-sources/airtable.md
index bd18a51bf9..b85572c173 100644
--- a/docs/docs/data-sources/airtable.md
+++ b/docs/docs/data-sources/airtable.md
@@ -8,7 +8,7 @@ title: Airtable
ToolJet can connect to your Airtable account to read and write data. **Personal Access Token** is required to connect to the Airtable data source on ToolJet. You can generate the Personal Access Token by visiting [Developer Hub from your Airtable profile](https://support.airtable.com/docs/creating-and-using-api-keys-and-access-tokens#understanding-personal-access-token-basic-actions).
-
+
diff --git a/docs/docs/data-sources/azureblob.md b/docs/docs/data-sources/azureblob.md
index 7153572f48..4ae6caca2b 100644
--- a/docs/docs/data-sources/azureblob.md
+++ b/docs/docs/data-sources/azureblob.md
@@ -13,7 +13,7 @@ To connect ToolJet with the Azure Blob data source, you have two options:
-
+
diff --git a/docs/docs/data-sources/baserow.md b/docs/docs/data-sources/baserow.md
index 4acd9fadbc..99b4714598 100644
--- a/docs/docs/data-sources/baserow.md
+++ b/docs/docs/data-sources/baserow.md
@@ -17,7 +17,7 @@ To connect to Baserow, you need to provide the following details:
-
+
## Supported Operations
diff --git a/docs/docs/data-sources/clickhouse.md b/docs/docs/data-sources/clickhouse.md
index a9d60b9cd4..50dd44f9d8 100644
--- a/docs/docs/data-sources/clickhouse.md
+++ b/docs/docs/data-sources/clickhouse.md
@@ -29,7 +29,7 @@ ToolJet requires the following to connect to your ClickHouse Database:
- **Debug**
- **Raw**
-
+
## Querying ClickHouse
diff --git a/docs/docs/data-sources/cosmosdb.md b/docs/docs/data-sources/cosmosdb.md
index 9ffe9b3e6d..79a4258ce9 100644
--- a/docs/docs/data-sources/cosmosdb.md
+++ b/docs/docs/data-sources/cosmosdb.md
@@ -24,7 +24,7 @@ You can find the endpoint and key in the **[Azure Portal](https://portal.azure.c
-
+
diff --git a/docs/docs/data-sources/custom-js.md b/docs/docs/data-sources/custom-js.md
index e9064bffef..c9ac19e0ba 100644
--- a/docs/docs/data-sources/custom-js.md
+++ b/docs/docs/data-sources/custom-js.md
@@ -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.
diff --git a/docs/docs/data-sources/databricks.md b/docs/docs/data-sources/databricks.md
new file mode 100644
index 0000000000..e902fa778d
--- /dev/null
+++ b/docs/docs/data-sources/databricks.md
@@ -0,0 +1,132 @@
+---
+id: databricks
+title: Databricks
+---
+
+# Databricks
+
+Databricks is a cloud-based platform for data processing, analytics, and machine learning. ToolJet connects to Databricks, allowing your applications to access and update your data in your Databricks Warehouses directly using SQL queries.
+
+
+
+
+
+## Configuration
+
+ToolJet's Databricks integration relies on a configuration form that supports the following parameters:
+
+#### Required Parameters
+
+- **Server hostname**: The server hostname or the IP address of your Databricks Warehouse. For example, `62596234423488486.6.gcp.databricks.com`.
+- **HTTP Path**: The API endpoint path for the Databricks resource you want to access. For example, `/sql/1.0/warehouses/44899g7346c19m95`.
+- **Personal access token**: Personal access tokens are used for secure authentication to the Databricks API instead of passwords. For example, `dapi783c7d155d138d8cf14`.
+
+#### Optional Parameters
+
+- **Port**: The port number of your Databricks Warehouse. The default port number is `443`.
+- **Default Catalog**: The default catalog to use for the connection.
+- **Default Schema**: The default schema to use for the connection.
+
+### Setup
+
+- Navigate to your Databricks workspace, select the desired SQL Warehouse, and find **Server Hostname** and **HTTP Path** within the connection details tab.
+
+
+
+
+
+- To generate a personal access token, access your Databricks User Settings, select the Developer tab, click Manage under Access Tokens, and then click on the **Generate New Token** button.
+
+
+
+
+
+- Navigate to the Databricks datasource configuration form in ToolJet, fill in the required parameters, and click the **Save** button. You can test the connection by clicking the **Test Connection** button.
+
+ :::note
+ Ensure your Databricks Warehouse is running and has been granted the necessary permissions prior to clicking **Test Connection** or running any queries.
+ :::
+
+
+
+
+
+## Querying Databricks
+
+- To perform queries on Databricks in ToolJet, click the **+ Add** button in the query manager located at the bottom panel of the editor.
+- Select the previously configured Databricks datasource.
+- In the second Data Source dropdown, select **SQL mode** as the query type. ToolJet currently supports only SQL mode for Databricks interactions.
+- Selecting SQL mode will open a dedicated SQL editor where you can write your SQL queries.
+- After writing the query, click the **Run** button to execute the query.
+
+
+
+
+
+
+
+
+
+:::tip
+You can apply transformations to the query results. Refer to our transformations documentation for more information: [link](/docs/tutorial/transformations)
+:::
+
+## Supported Queries
+
+Databricks supports standard SQL commands for data manipulation tasks.
+
+### Read Data
+
+The following example demonstrates how to read data from a table. The query selects all the columns from the `customers` table.
+
+```sql
+SELECT * FROM customers
+```
+
+### Write Data
+
+The following example demonstrates how to write data to a table. The query inserts a new row into the `customers` table.
+
+```sql
+INSERT INTO customers (
+ customer_id,
+ first_name,
+ last_name,
+ email,
+ phone,
+ city,
+ state,
+ zip_code,
+ country
+) VALUES (
+ '1001'
+ 'Tom',
+ 'Hudson',
+ 'tom.hudson@example.com',
+ '50493552',
+ 'San Clemente',
+ 'CA',
+ '92673',
+ 'USA'
+);
+```
+
+### Update Data
+
+The following example demonstrates how to update data in a table. The query updates the `first_name` and `email` column of the `customers` table.
+
+```sql
+UPDATE customer
+SET first_name = 'John',
+ email = 'john.hudson@example.com'
+WHERE customer_id = 1001;
+```
+
+### Delete Data
+
+The following example demonstrates how to delete data from a table. The query deletes a row from the `customers` table.
+
+```sql
+DELETE FROM customer
+WHERE customer_id = 1001;
+```
\ No newline at end of file
diff --git a/docs/docs/data-sources/dynamodb.md b/docs/docs/data-sources/dynamodb.md
index 127a917898..d7c91355d5 100644
--- a/docs/docs/data-sources/dynamodb.md
+++ b/docs/docs/data-sources/dynamodb.md
@@ -2,6 +2,7 @@
id: dynamodb
title: DynamoDB
---
+
# DynamoDB
DynamoDB is a managed non-relational database service provided by Amazon. ToolJet has the capability to connect to DynamoDB for reading and writing data.
@@ -12,7 +13,7 @@ To establish a connection with the DynamoDB data source, you can either click on
-
+
@@ -96,10 +97,12 @@ Returns an array of table names associated with the current account and endpoint
Retrieves a single item from a table. You must specify the primary key for the item that you want. You can retrieve the entire item, or just a subset of its attributes.
**Required parameters:**
+
- **Table**
- **Key name**
Syntax for Key name:
+
```json
{
"Key": {
@@ -123,23 +126,25 @@ Syntax for Key name:
Retrieves all items that have a specific partition key. You must specify the partition key value. You can retrieve entire items, or just a subset of their attributes. Optionally, you can apply a condition to the sort key values so that you only retrieve a subset of the data that has the same partition key. You can use this operation on a table, provided that the table has both a partition key and a sort key. You can also use this operation on an index, provided that the index has both a partition key and a sort key.
**Required parameters:**
+
- **Query condition**
Syntax for Query condition:
+
```json
{
- "TableName": "Reply",
- "IndexName": "PostedBy-Index",
- "Limit": 3,
- "ConsistentRead": true,
- "ProjectionExpression": "Id, PostedBy, ReplyDateTime",
- "KeyConditionExpression": "Id = :v1 AND PostedBy BETWEEN :v2a AND :v2b",
- "ExpressionAttributeValues": {
- ":v1": {"S": "Amazon DynamoDB#DynamoDB Thread 1"},
- ":v2a": {"S": "User A"},
- ":v2b": {"S": "User C"}
- },
- "ReturnConsumedCapacity": "TOTAL"
+ "TableName": "Reply",
+ "IndexName": "PostedBy-Index",
+ "Limit": 3,
+ "ConsistentRead": true,
+ "ProjectionExpression": "Id, PostedBy, ReplyDateTime",
+ "KeyConditionExpression": "Id = :v1 AND PostedBy BETWEEN :v2a AND :v2b",
+ "ExpressionAttributeValues": {
+ ":v1": { "S": "Amazon DynamoDB#DynamoDB Thread 1" },
+ ":v2a": { "S": "User A" },
+ ":v2b": { "S": "User C" }
+ },
+ "ReturnConsumedCapacity": "TOTAL"
}
```
@@ -154,12 +159,13 @@ Syntax for Query condition:
Retrieves all items in the specified table or index. You can retrieve entire items, or just a subset of their attributes. Optionally, you can apply a filtering condition to return only the values that you are interested in and discard the rest.
**Required parameters:**
+
- **Scan condition**
Syntax for Scan condition:
```json
-{"TableName": ""}
+{ "TableName": "" }
```
@@ -173,22 +179,24 @@ Syntax for Scan condition:
Deletes a single item from a table. You must specify the primary key for the item that you want to delete.
**Required parameters:**
+
- **Table**
- **Key Name**
Syntax for Key name:
+
```json
{
- "Key": {
- "ForumName": {
- "S": "Amazon DynamoDB"
- },
- "Subject": {
- "S": "How do I update multiple items?"
- }
+ "Key": {
+ "ForumName": {
+ "S": "Amazon DynamoDB"
},
- "ConditionExpression": "attribute_not_exists(Replies)",
- "ReturnValues": "ALL_OLD"
+ "Subject": {
+ "S": "How do I update multiple items?"
+ }
+ },
+ "ConditionExpression": "attribute_not_exists(Replies)",
+ "ReturnValues": "ALL_OLD"
}
```
@@ -203,16 +211,18 @@ Syntax for Key name:
Update an item in DynamoDB by specifying the primary key and providing new attribute values. If the primary key does not exist in the table then instead of updating it will insert a new row.
**Required parameters:**
+
- **Update Condition**
Syntax for Update Condition:
+
```json
{
"TableName": "USER_DETAILS_with_local",
"Key": {
- "USER_ID": 1,
- "USER_NAME": "Nick"
- },
+ "USER_ID": 1,
+ "USER_NAME": "Nick"
+ },
"UpdateExpression": "set USER_AGE = :age, USER_FEE = :fee",
"ExpressionAttributeValues": {
":age": 40,
@@ -232,6 +242,7 @@ Syntax for Update Condition:
This operation in DynamoDB retrieves metadata and configuration details about a specific table. It provides information such as the table's name, primary key schema, provisioned throughput settings, and any secondary indexes defined on the table.
**Required parameters:**
+
- **Table**
@@ -242,49 +253,50 @@ This operation in DynamoDB retrieves metadata and configuration details about a
### Create Table
-This operation in DynamoDB enables you to create a new table by specifying its name, primary key schema, and optional configurations.
+This operation in DynamoDB enables you to create a new table by specifying its name, primary key schema, and optional configurations.
**Required parameters:**
+
- **Table Parameters**
Syntax for Table Parameters:
+
```json
{
- "AttributeDefinitions": [
+ "AttributeDefinitions": [
{
- "AttributeName": "USER_ID",
+ "AttributeName": "USER_ID",
"AttributeType": "N"
},
{
- "AttributeName": "USER_FEE",
+ "AttributeName": "USER_FEE",
"AttributeType": "N"
}
],
"KeySchema": [
- {
-
- "AttributeName": "USER_ID",
- "KeyType": "HASH"
- }
- ],
+ {
+ "AttributeName": "USER_ID",
+ "KeyType": "HASH"
+ }
+ ],
"LocalSecondaryIndexes": [
+ {
+ "IndexName": "USER_FEE",
+ "KeySchema": [
{
- "IndexName": "USER_FEE",
- "KeySchema": [
- {
- "AttributeName": "USER_ID",
- "KeyType": "HASH"
- },
- {
- "AttributeName": "USER_FEE",
- "KeyType": "RANGE"
- }
- ],
- "Projection": {
- "ProjectionType": "KEYS_ONLY"
- }
+ "AttributeName": "USER_ID",
+ "KeyType": "HASH"
+ },
+ {
+ "AttributeName": "USER_FEE",
+ "KeyType": "RANGE"
}
- ],
+ ],
+ "Projection": {
+ "ProjectionType": "KEYS_ONLY"
+ }
+ }
+ ],
"ProvisionedThroughput": {
"ReadCapacityUnits": 1,
"WriteCapacityUnits": 1
@@ -307,17 +319,19 @@ Syntax for Table Parameters:
This operation allows you to create or replace an item in a table. It enables you to specify the table name, provide the attribute values for the new item, and define the primary key attributes to uniquely identify the item.
**Required parameters:**
+
- **New Item Details**
Syntax for New Item Details:
+
```json
{
"TableName": "USER_DETAILS_with_localS",
"Item": {
- "USER_ID": 1,
+ "USER_ID": 1,
"USER_NAME": "NICK",
"USER_AGE": 34,
- "USER_FEE": 1234.56,
+ "USER_FEE": 1234.56
}
}
```
@@ -326,4 +340,4 @@ Syntax for New Item Details:
-
\ No newline at end of file
+
diff --git a/docs/docs/data-sources/firestore.md b/docs/docs/data-sources/firestore.md
index 4b86322ea5..e6418aaf74 100644
--- a/docs/docs/data-sources/firestore.md
+++ b/docs/docs/data-sources/firestore.md
@@ -14,7 +14,7 @@ Once you have the key, open it in a text editor and copy the contents. Paste the
Click on **Test connection** button to verify if the key is valid. Click on **Save** button to save the data source.
-
+
## Querying Firestore
diff --git a/docs/docs/data-sources/google.sheets.md b/docs/docs/data-sources/google.sheets.md
index d955c2cc33..b49d4ab8c8 100644
--- a/docs/docs/data-sources/google.sheets.md
+++ b/docs/docs/data-sources/google.sheets.md
@@ -31,7 +31,7 @@ When connecting to a Google Sheets datasource, you can choose between two permis
-
+
diff --git a/docs/docs/data-sources/graphql.md b/docs/docs/data-sources/graphql.md
index 82feeff3a2..b62ef625f1 100644
--- a/docs/docs/data-sources/graphql.md
+++ b/docs/docs/data-sources/graphql.md
@@ -11,7 +11,7 @@ To establish a connection with the GraphQL global datasource, you can either cli
-
+
diff --git a/docs/docs/data-sources/influxdb.md b/docs/docs/data-sources/influxdb.md
index 27f881e957..d85fc528f9 100644
--- a/docs/docs/data-sources/influxdb.md
+++ b/docs/docs/data-sources/influxdb.md
@@ -22,7 +22,7 @@ For generating API Token visit [InfluxDB docs](https://docs.influxdata.com/influ
-
+
@@ -51,7 +51,7 @@ For generating API Token visit [InfluxDB docs](https://docs.influxdata.com/influ
- [Delete a bucket](#delete-a-bucket)
-
+
### Write data
diff --git a/docs/docs/data-sources/mailgun.md b/docs/docs/data-sources/mailgun.md
index 09907b82d1..003cd60a28 100644
--- a/docs/docs/data-sources/mailgun.md
+++ b/docs/docs/data-sources/mailgun.md
@@ -7,7 +7,7 @@ title: Mailgun
ToolJet can connect to your Mailgun account to send emails.
-
+
:::info
The Mailgun API Datasource supports for interaction with the mail endpoint of the [Mailgun API](https://documentation.mailgun.com/en/latest/api-intro.html#authentication-1).
@@ -42,8 +42,6 @@ Optional parameters:
- Body as HTML
-
-
:::info
**Send mail to** - accepts a single email id.
For example:
diff --git a/docs/docs/data-sources/mariadb.md b/docs/docs/data-sources/mariadb.md
index 6a7930c345..1dfbef5d7c 100644
--- a/docs/docs/data-sources/mariadb.md
+++ b/docs/docs/data-sources/mariadb.md
@@ -13,7 +13,7 @@ To establish a connection with the MariaDB global datasource, you can either cli
-
+
diff --git a/docs/docs/data-sources/mongodb.md b/docs/docs/data-sources/mongodb.md
index af4c93353c..8443b64bd3 100644
--- a/docs/docs/data-sources/mongodb.md
+++ b/docs/docs/data-sources/mongodb.md
@@ -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 }}' }}
diff --git a/docs/docs/data-sources/notion.md b/docs/docs/data-sources/notion.md
index a224116642..ba992ba5ef 100644
--- a/docs/docs/data-sources/notion.md
+++ b/docs/docs/data-sources/notion.md
@@ -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.
-
+
#### 2. Query a database
diff --git a/docs/docs/data-sources/openapi.md b/docs/docs/data-sources/openapi.md
index 403b84456a..209cf0d19f 100644
--- a/docs/docs/data-sources/openapi.md
+++ b/docs/docs/data-sources/openapi.md
@@ -21,7 +21,7 @@ OpenAPI datasource accepts specifications only in **JSON** and **YAML** formats.
-
+
diff --git a/docs/docs/data-sources/oracledb.md b/docs/docs/data-sources/oracledb.md
index af7b844f7c..f086273a71 100644
--- a/docs/docs/data-sources/oracledb.md
+++ b/docs/docs/data-sources/oracledb.md
@@ -23,7 +23,7 @@ A Oracle DB can be connected with the following credentials:
-
+
diff --git a/docs/docs/data-sources/overview.md b/docs/docs/data-sources/overview.md
index 26b25c3701..0933a18491 100644
--- a/docs/docs/data-sources/overview.md
+++ b/docs/docs/data-sources/overview.md
@@ -13,7 +13,7 @@ Data Source page is available only on **ToolJet version 2.3.0 and above**.
-
+
@@ -26,19 +26,13 @@ Data Source page is available only on **ToolJet version 2.3.0 and above**.
- Or you can directly go to the **Data Sources** page from the left sidebar of the dashboard
-
-
-
-
-
-
+ Or you can directly go to the **Data Sources** page from the left sidebar of the dashboard.
2. Within the **Data Sources** page, you'll find various categories of data sources on the left side, including Databases, APIs, Cloud Storages, and plugins. Click on each category to view the list of accessible data sources. As you hover over the desired data source, an `Add` button will appear. Upon clicking this button, the selected data source will be integrated into the workspace.
-
+
@@ -48,7 +42,7 @@ Data Source page is available only on **ToolJet version 2.3.0 and above**.
-
+
@@ -97,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. |
diff --git a/docs/docs/data-sources/restapi.md b/docs/docs/data-sources/restapi.md
index 19be93a769..c1a9d14bf9 100644
--- a/docs/docs/data-sources/restapi.md
+++ b/docs/docs/data-sources/restapi.md
@@ -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.
diff --git a/docs/docs/data-sources/run-py.md b/docs/docs/data-sources/run-py.md
index 18dfaddb0b..6efd312fa1 100644
--- a/docs/docs/data-sources/run-py.md
+++ b/docs/docs/data-sources/run-py.md
@@ -53,44 +53,38 @@ queries.getSalesData.run()
To immediately access the data returned by a query in **Run Python code**, you can use the below functions:
-#### Retrieve the latest data of a query:
+#### Trigger a query and retrieve its data:
```py
-response = await queries.getSalesData.run()
+await queries.getSalesData.run()
#replace getSalesData with your query name
value = queries.getSalesData.getData()
#replace getSalesData with your query name
-
-value
```
-#### Retrieve the latest raw data of a query:
+#### Trigger a query and retrieve its raw data:
```py
-response = await queries.getCustomerData.run()
+await queries.getCustomerData.run()
#replace getCustomerData with your query name
value = queries.getCustomerData.getRawData()
#replace getCustomerData with your query name
-
-value
```
-#### Retrieve the loading state of a query:
+#### Trigger a query and retrieve its loading state:
```py
-response = await queries.getTodos.run()
+await queries.getTodos.run()
#replace getTodos with your query name
value = queries.getTodos.getLoadingState()
#replace getTodos with your query name
-
-value
```
## Get Variables
-To immediately access a variable or page variable after setting it in the **Run Python code**, you can use the below functions.
+To immediately access a variable or page variable after setting it in the **Run Python code**, you can use the below functions:
-#### Retrieve the current value of a variable:
+#### Set and retrieve a variable:
```py
actions.setVariable('mode','dark')
#replace mode with your desired variable name
@@ -99,7 +93,7 @@ actions.getVariable('mode')
#replace mode with your desired variable name
```
-#### Retrieve the current value of a page-specific variable:
+#### Set and retrieve a page-specific variable:
```py
actions.setPageVariable('number',1)
#replace number with your desired variable name
diff --git a/docs/docs/data-sources/stripe.md b/docs/docs/data-sources/stripe.md
index e6fa073e9c..6f53c21f61 100644
--- a/docs/docs/data-sources/stripe.md
+++ b/docs/docs/data-sources/stripe.md
@@ -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**
-
-
-
-
-
-
-
-
-
diff --git a/docs/docs/data-sources/zendesk.md b/docs/docs/data-sources/zendesk.md
index 7c9e2eaac0..53a940514d 100644
--- a/docs/docs/data-sources/zendesk.md
+++ b/docs/docs/data-sources/zendesk.md
@@ -34,7 +34,7 @@ To connect Zendesk datasource to your ToolJet application, go to the data source
-
+
-
-
## What is ToolJet?
ToolJet is a low-code platform that enables developers to rapidly build and deploy custom internal tools. It has a drag-and-drop app builder with 45 pre-built components, so developers can create complex applications in minutes. ToolJet also connects to most popular data sources and APIs out of the box, and it has a group-based permission system for easy user access management. ToolJet also comes with a lot of other features, but for now, let’s build a basic ToolJet app.
-
@@ -21,7 +16,7 @@ ToolJet is a low-code platform that enables developers to rapidly build and depl
## How ToolJet Works:
-
+
**With ToolJet, you can streamline app development with 4 core steps:**
@@ -42,10 +37,9 @@ Below is a detailed overview of ToolJet's key functionalities, demonstrating how
### Visual App Builder
Enables the creation of visually appealing front-ends with a drag-and-drop interface and pre-built components.
-
-
+
@@ -54,10 +48,9 @@ Enables the creation of visually appealing front-ends with a drag-and-drop inter
### Integrations
Offers seamless integration with a wide range of data sources, including over 50 applications, databases, and APIs.
-
-
+
@@ -92,7 +85,7 @@ Designed with advanced security features and a scalable infrastructure to meet t
-
+
@@ -102,10 +95,9 @@ Designed with advanced security features and a scalable infrastructure to meet t
### SSO Support
Single Sign-On (SSO) capabilities, supporting a variety of providers including Okta, Google, Azure AD, and OpenID Connect.
-
-
+
diff --git a/docs/docs/gitsync.md b/docs/docs/gitsync.md
index 6d1bb19ec3..3f1122fffe 100644
--- a/docs/docs/gitsync.md
+++ b/docs/docs/gitsync.md
@@ -11,10 +11,16 @@ import TabItem from '@theme/TabItem';
The GitSync feature enables synchronization of workspace applications with a git repository, streamlining application management and version control on ToolJet.
+
+
## Overview
ToolJet applications can be synchronized with a Git repository, offering the flexibility to tailor your application development and deployment processes across various environments while aligning with best practices for the application development lifecycle.
+
+
+
+
### Key Use-Cases:
#### Backup of Apps
@@ -31,9 +37,15 @@ Facilitating the movement of applications across different ToolJet deployments (
+
+
+
+
+
+
## Setting up GitSyncing with GitHub
:::caution
@@ -61,12 +73,6 @@ Obtain the **SSH URL** of the repository. When a repository is created, GitHub s
### Step 3: Configure the GitSync feature on ToolJet
Go to the **Workspace settings**, and click on the **Configure git** tab.
-
-
-
-
-
-
Enter the **SSH URL** of the repository (obtained in Step 2) in the **Git repository URL** field. Click on the **Generate SSH key** button, and copy the SSH key that is generated. The SSH key is used to authenticate ToolJet with the repository.
There are two types of generated SSH keys: **
@@ -74,7 +80,7 @@ There are two types of generated SSH keys: **
- **RSA**: This is an older algorithm that is used for generating SSH keys. It is not recommended to use this key type. Older VCS providers like Bitbucket recommend using this key type.
-
+
### Step 4: Deploy the SSH key to GitHub repository
@@ -96,11 +102,15 @@ Enter a title for the SSH key in the **Title** field. Paste the SSH key that you
Go back to the **Configure git** tab on ToolJet, and click on the **Finalize setup** button. If the SSH key is configured correctly, you will see a success message.
-
+
-## Auto-commit on promoting environment
+
+
+
+
+## Auto-commit on Promoting Environment
When you promote an environment, from **Developement to Staging** or from **Staging to Production**, the changes will be automatically committed to the git repository. The commit message will be ` Version of promoted from to `. The author will be the user who promoted the environment.
@@ -112,10 +122,14 @@ When you promote an environment, from **Developement to Staging** or from **Stag
This option can be enabled or disabled from the **Configure git** tab on the **Workspace settings** page. By default, this option is disabled.
-
+
+
+
+
+
## Enable/Disable GitSync
To enable or disable the GitSync feature, go to the **Configure git** tab on the **Workspace settings** page, and toggle on/off the **Connect** switch. This is only available if the GitSync feature is configured.
@@ -129,11 +143,15 @@ On clicking the GitSync button, the users will be able to commit changes to the
2. For admin users: The users will see a dialogue box with a link to configure the GitSync feature.
-
+
-## Delete GitSync configuration
+
+
+
+
+## Delete GitSync Configuration
To delete the GitSync configuration, go to the **Configure git** tab on the **Workspace settings** page, and click on the **Delete configuration** button. This will delete the SSH key from the ToolJet configuration and the GitSync feature will be disabled.
@@ -141,11 +159,15 @@ To delete the GitSync configuration, go to the **Configure git** tab on the **Wo
- Deleting the GitSync configuration will not delete the apps from the git repository. The apps will still be available in the git repository in the same state as they were before the GitSync configuration was deleted.
-
+
-## Git repo
+
+
+
+
+## Git Repo
Once the initial commit is made, you can see the app files in the git repository. The repository will have the individual app folders and a **.meta** folder. The app folders will be named as the app name and will have the respective **JSON** file of the application. The **.meta** folder will have the `meta.json` file that contains the meta information of each application synced to git repo.
@@ -156,11 +178,15 @@ The **meta.json** file holds information about apps such as the **App name**, **
-## Pushing changes to git repo
+
+
+
+
+## Pushing Changes to Git Repo
Once the GitSync feature is configured, you can start pushing changes to the git repository.
-### App creation
+### App Creation
When you create a new app, you will see an option to select the `Commit changes`. If you select the `commit changes` option, the changes will be committed to the git repository.
@@ -169,7 +195,7 @@ If the app name is same as the name of the existing app in the git repo, it will
:::
-
+
@@ -180,7 +206,7 @@ Selecting the `Commit changes` option will create a new commit in the git reposi
-### App rename
+### App Rename
Whenever an app is renamed, the changes will be automatically committed to the git repository. The commit message will be `App is renamed` and the author will be the user who renamed the app.
@@ -189,7 +215,7 @@ Whenever an app is renamed, the changes will be automatically committed to the g
-### App updates
+### App Updates
Whenever a user makes a change in an app, they can make a commit to the git repository by clicking on the **GitSync** button on the topbar. On clicking the **GitSync** button, a modal will open with the option to enter the commit message. The user can enter the commit message and click on the **Commit changes** button to commit the changes to the git repository. Along with the commit message, the user can also see the connnected **Git repo URL** and the **last commit details**.
@@ -207,11 +233,11 @@ Once the changes are committed, the user can see the commit message, author, and
-### App deletion
+### App Deletion
Whenever a user deleted an app from the workspace, the app will not be deleted from the git repository. The app will be available in the git repository in the same state as it was before the app was deleted.
-### App version update
+### App Version Update
Whenever a user creates a new app version and creates a commit to git repository, the **JSON** file in the app folder will be replaced with the new version of the app that was created. The **meta.json** file in the **.meta** folder will also be updated with the new version id and version name.
@@ -220,14 +246,18 @@ Whenever a user creates a new app version and creates a commit to git repository
-## Pulling changes from git repo
+
+
+
+
+## Pulling Changes from Git Repo
You can configure the GitSync feature on another workspace to pull the changes from the git repository. To configure the GitSync feature on another workspace, follow the steps mentioned in the [Setting up GitSyncing with GitHub](#setting-up-git-syncing-with-github) section.
Once the GitSync feature is configured, go to the ToolJet dashboard and click on the three dots on the right side of the **Create new app** button. Click on the **Import from git repository** option.
-
+
@@ -240,11 +270,11 @@ On clicking the **Import from git repository** option, a modal will open with th
:::
-
+
-### Checking for updates
+### Checking for Updates
You can check for updates in the git repository by clicking on the **GitSync** button on the topbar. On clicking the **GitSync** button, a modal will open with the option to **Check for updates**. Click on the **Check for updates** button to check for updates in the git repository. If there are any updates, you will see the details of the updates such as commit message, author, and the date in the modal. Click on the **Pull changes** button to pull the changes from the git repository.
diff --git a/docs/docs/how-to/access-cellvalue-rowdata.md b/docs/docs/how-to/access-cellvalue-rowdata.md
index ea30af4f7e..dd6c3540f3 100644
--- a/docs/docs/how-to/access-cellvalue-rowdata.md
+++ b/docs/docs/how-to/access-cellvalue-rowdata.md
@@ -2,9 +2,14 @@
id: access-cellvalue-rowdata
title: Dynamically Change Cell Colors in Table
---
+
This guide shows how to change the text color and background color of certain cells in a Table component based on specific conditions.
+
+
+
+
## 1. Start by Creating a New Application and Setting up the Data Source
- Create a new app and add a **[Table](/docs/widgets/table)** component to the canvas.
- Open the Query Panel at the bottom and click on the `+ Add` button.
@@ -15,6 +20,10 @@ https://fakestoreapi.com/products
```
- To view the data that your query will return, click on the **Preview** button. Click on the **Run** button to execute the query and retrieve the data.
+
+
+
+
## 2. Display Data on the Table
- Hide the Query Panel and click on the Table component to open its properties panel on the right.
@@ -23,9 +32,13 @@ https://fakestoreapi.com/products
{{queries.restapi1.data}}
```
-
+
+
+
+
+
## 3. Change Text Color Based on Cell Value
- Select the Table component and go to Columns.
@@ -43,6 +56,10 @@ Now, if the cell value is `electronics`, the text color will be red; otherwise,
You can use also Hex color codes for more color options.
+
+
+
+
## 4. Change Text Color Using Row Data
- Under Cell Background Color for the `symbol` column, paste the below code:
@@ -59,4 +76,6 @@ Now if the value in the price column is lesser than 100, the cell background col
-You can use the above methods to change the text and background colors of a cell dynamically.
\ No newline at end of file
+You can use the above methods to change the text and background colors of a cell dynamically.
+
+
\ No newline at end of file
diff --git a/docs/docs/how-to/access-users-groups.md b/docs/docs/how-to/access-users-groups.md
index 9e6ae7892f..8516383762 100644
--- a/docs/docs/how-to/access-users-groups.md
+++ b/docs/docs/how-to/access-users-groups.md
@@ -2,6 +2,7 @@
id: access-currentuser
title: Enable/Disable a Component Using Current User's Property
---
+
Let's take a look at the exposed variables of the currentUser property by clicking on the **[inspector](/docs/app-builder/left-sidebar/#inspector)** icon on the left sidebar:
@@ -10,6 +11,10 @@ Let's take a look at the exposed variables of the currentUser property by clicki
- **lastName** : The value can accessed using `{{globals.currentUser.lastName}}`
- **groups**: The `groups` attribute is an array representing the groups a user belongs to. By default, every user, including admins, is part of the `all_users` group. Additionally, admins are also part of the `admin` group. To access a specific group name, you need to specify the array index, such as `[0]` for the first group, `[1]` for the second, and so on. For example, you can retrieve the name of the second group a user belongs to with `{{globals.currentUser.groups[1]}}`.
+
+
+
+
### Example: Disable a Button if a User is Not Admin
- Click on the **Button** handle to open its properties. On the **Styles** tab, go to the **Disable** property.
@@ -34,3 +39,4 @@ Let's take a look at the exposed variables of the currentUser property by clicki
+
\ No newline at end of file
diff --git a/docs/docs/how-to/access-users-location.md b/docs/docs/how-to/access-users-location.md
index 3251431595..c97ecd5a1b 100644
--- a/docs/docs/how-to/access-users-location.md
+++ b/docs/docs/how-to/access-users-location.md
@@ -1,7 +1,8 @@
---
id: access-users-location
-title: Accessing User Location with RunJS Query (Geolocation API)
+title: Accessing User Location with RunJS Query
---
+
In this step-by-step guide we will build a ToolJet application that harnesses the power of the **JavaScript Geolocation API** to retrieve the user's location. The Geolocation API offers access to various geographical data associated with a user's device, utilizing methods such as GPS, WIFI, IP Geolocation, and more.
@@ -9,6 +10,8 @@ In this step-by-step guide we will build a ToolJet application that harnesses th
To uphold user privacy, the Geolocation API requests permission before locating the device. Upon permission, you gain access to data like latitude, longitude, altitude, and speed.
:::
+
+
1. Begin by creating a new application:
diff --git a/docs/docs/how-to/build-plugin-for-marketplace.md b/docs/docs/how-to/build-plugin-for-marketplace.md
index 59c1aa6fee..c6e5a7399a 100644
--- a/docs/docs/how-to/build-plugin-for-marketplace.md
+++ b/docs/docs/how-to/build-plugin-for-marketplace.md
@@ -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
diff --git a/docs/docs/how-to/bulk-update-multiple-rows-in-table.md b/docs/docs/how-to/bulk-update-multiple-rows-in-table.md
index 8026034e79..53df502a00 100644
--- a/docs/docs/how-to/bulk-update-multiple-rows-in-table.md
+++ b/docs/docs/how-to/bulk-update-multiple-rows-in-table.md
@@ -2,9 +2,13 @@
id: bulk-update-multiple-rows
title: Bulk Update Multiple Rows in Table
---
-
+
For the purpose of this guide, it's presumed that you've already established a successful connection to your data source. We'll use PostgreSQL for this example, but you can adjust the queries based on the SQL database that you are using.
+
+
+
+
## 1. Create a Query to Get the Data
- Create a PostgreSQL query in SQL mode, rename it to *users* and enter the below code.
@@ -16,9 +20,12 @@ SELECT * FROM
// *replace
with your table name*
- Click on the **Run** button to fetch the data from the database.
-
+
+
+
+
## 2. Display the Data on the Table
@@ -30,26 +37,38 @@ SELECT * FROM
// *replace
with your table name*
```
-
+
+
+
+
+
## 3. Make the Columns Editable
- Under the Columns accordion, click on the column name that you want to make editable.
- On clicking the column name, a new section will open. Enable the toggle for `Make editable` to make the column editable.
-
+
+
+
+
+
## 4. Enable Multiple Row Selection
- Under the Row Selection accordion, enable the `Allow Selection`, `Highlight Selected Row`, and `Bulk Selection` option.
-
+
+
+
+
+
## 5. Create a Custom JS query
- Create a new Run Javascript query and use the code below to generate the SQL query for updating multiple rows. The query will be named as *runjs1* by default.
@@ -76,9 +95,13 @@ return sql
Here the unique identifier is **id** and Table component's name is **table1**. You can update the unique identifier if you are using a different column as a unique identifier. You can also update the Table name if you have renamed it, the default name is *table1*.
-
+
+
+
+
+
## 6. Create an Update Query
- Create a PostgreSQL query in SQL mode and rename it to *update*:
@@ -90,9 +113,13 @@ Here the unique identifier is **id** and Table component's name is **table1**. Y
- This query will run the SQL query generated by the *runjs1* query.
-
+
+
+
+
+
## 7. Adding Event Handlers to Execute Queries in Sequence
- Edit the Table component and add an event handler for `Save Changes` event so that whenever a user will edit the Table and hit the Save Changes button the *runjs1* query will run.
@@ -118,4 +145,6 @@ The data needs to reload once the *update* query runs since we want the Table co
- Select Query Success as the Event and Run Query as the Action.
- Select *users* as Query.
-This will refresh the table whenever the *update* query will be run.
\ No newline at end of file
+This will refresh the table whenever the *update* query will be run.
+
+
\ No newline at end of file
diff --git a/docs/docs/how-to/conditionally-format-table.md b/docs/docs/how-to/conditionally-format-table.md
index 3a6029533b..2a95ceeba5 100644
--- a/docs/docs/how-to/conditionally-format-table.md
+++ b/docs/docs/how-to/conditionally-format-table.md
@@ -2,9 +2,14 @@
id: conditionally-format-table
title: Conditional Formatting in Table
---
+
Conditional formatting enhances the visual representation of data by allowing you to dynamically adjust the appearance of cells in table component based on specific conditions. This how-to guide will guide you through the process of implementing advanced conditional formatting for text color and background color in a Table component.
+
+
+
+
## Create a New Application and Set Up Data Source
1. Create a new application and add a Table component to the canvas.
@@ -24,6 +29,10 @@ Conditional formatting enhances the visual representation of data by allowing yo
+
+
+
+
## Display Data on the Table
1. Hide the Query Panel and click on the Table component to open its properties panel.
@@ -37,6 +46,10 @@ Conditional formatting enhances the visual representation of data by allowing yo
+
+
+
+
## Enabling Conditional Formatting
1. Go to the **Columns** property of the Table component.
@@ -51,8 +64,16 @@ Conditional formatting enhances the visual representation of data by allowing yo
+
+
+
+
## Conditional Formatting using Cell Value
+
+
+
+
### Example 1: Changing Text Color Based on Cell Value
1. Select the `Rate` column which has a column type of `Default`/`String`. This column contains the rating of each product on a scale of 1 to 5.
@@ -69,6 +90,9 @@ Conditional formatting enhances the visual representation of data by allowing yo
+
+
+
### Example 2: Changing Cell Background Color Based on Cell Value
@@ -84,8 +108,16 @@ Conditional formatting enhances the visual representation of data by allowing yo
+
+
+
+
## Conditional Formatting using Row Data
+
+
+
+
### Example 1: Changing Text Color Based on Row Data
- Select the `Title` column, enter the following condition under the **Text Color** property:
@@ -100,6 +132,10 @@ Conditional formatting enhances the visual representation of data by allowing yo
+
+
+
+
### Example 2: Changing Cell Background Color based on Row Data
- In this example, we will change the cell background color of the `Title` column based on the category of the product.
@@ -116,6 +152,8 @@ Conditional formatting enhances the visual representation of data by allowing yo
+
+
diff --git a/docs/docs/how-to/delete-multiple-rows-table.md b/docs/docs/how-to/delete-multiple-rows-table.md
index 775c961995..035c13aa8d 100644
--- a/docs/docs/how-to/delete-multiple-rows-table.md
+++ b/docs/docs/how-to/delete-multiple-rows-table.md
@@ -2,9 +2,14 @@
id: delete-multiple-rows
title: Delete Multiple Rows in a Table
---
+
This guide explains how to delete multiple rows from a table, assuming you've already connected to a data source. We'll use PostgreSQL for this example, but you can adjust the queries based on the SQL database that you are using.
+
+
+
+
## 1. Create a Query to Fetch the Data from the Database
- Create a new query and name it *getRecords*.
@@ -17,10 +22,12 @@ SELECT * FROM tooljet // replace tooljet with your table name
- Enable the `Run the query on application load?` option to execute the query automatically when the application starts.
-
+
-
+
+
+
## 2. Populating the Table with Data
@@ -29,10 +36,12 @@ SELECT * FROM tooljet // replace tooljet with your table name
- Now if you run the *getRecords* query, the returned data will be loaded in the Table component.
-
+
-
+
+
+
## 3. Enable Bulk Row Selection on Table
@@ -40,10 +49,12 @@ SELECT * FROM tooljet // replace tooljet with your table name
- Enabling this option will allow you to select multiple rows on the table.
-
+
-
+
+
+
## 4. Create a Custom JavaScript Query
@@ -67,7 +78,7 @@ The above code generates a SQL query that deletes rows from the database table w
- Click on the **Preview** button to see the SQL statement generated by the query.
-
+
*If you're using a different column as the unique identifier, feel free to update the code accordingly. You can also update the Table name if you have renamed it, the default name is *table1*.*
@@ -75,10 +86,12 @@ The above code generates a SQL query that deletes rows from the database table w
- Select a few rows on the Table component and then Preview the SQL query generated by the *runjs1* query.
-
+
-
+
+
+
## 5. Create a New Query to Delete the Rows
@@ -91,10 +104,12 @@ The above code generates a SQL query that deletes rows from the database table w
In this query, we are dynamically loading the SQL statement generated by the JavaScript query.
-
+
-
+
+
+
## 6. Add a Button to Delete the Selected Rows
@@ -128,4 +143,6 @@ Now, whenever you click on the Button component, the *runjs1* query will run and
-By implementing this, we are ensuring that every time rows are deleted, the Table component will automatically refresh to display the most recent data fetched from the database.
\ No newline at end of file
+By implementing this, we are ensuring that every time rows are deleted, the Table component will automatically refresh to display the most recent data fetched from the database.
+
+
\ No newline at end of file
diff --git a/docs/docs/how-to/import-external-lib-js.md b/docs/docs/how-to/import-external-lib-js.md
index f382b49994..2da47f7552 100644
--- a/docs/docs/how-to/import-external-lib-js.md
+++ b/docs/docs/how-to/import-external-lib-js.md
@@ -1,29 +1,39 @@
---
id: import-external-libraries-using-runjs
-title: Import external libraries using RunJS
+title: Import External Libraries using RunJS
---
+
ToolJet allows you to integrate external JavaScript libraries into your application using RunJS queries. This guide walks you through the process of importing and utilizing these libraries effectively.
+
+
## Choosing Libraries
You can import various JavaScript libraries using their Content Delivery Network (CDN) links. Find the CDN links for your desired open-source projects on [jsDelivr](https://www.jsdelivr.com/).
-## 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.
+
+
+## Creating a New App and RunJS Query
+
+- Create a new app from the ToolJet Dashboard.
+- Once the app is ready, choose ToolJet's deafult **JavaScript** Data Source from the query panel.
-
+
+
+
## 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:
@@ -55,27 +65,30 @@ try {
-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.
:::
+
+
+
+
+
+
-
-
-
-
-
-
## Examples
+
+
### 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({
@@ -89,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.
-
+
@@ -101,16 +114,17 @@ 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.
ToolJet allows you to utilize python packages in your app by importing them using the [RunPy query](/docs/data-sources/run-py).
In this how-to guide, we will import a few packages and use them in the application.
+
+
:::caution Unsupported modules
Modules with C/C++ extensions needing system libraries won't work in Pyodide, as it runs in a web browser without system library access. Pyodide, based on WebAssembly-compiled Python, also doesn't support certain system calls.
:::
+
+
- Start by creating a new application in ToolJet.
- From the Query Panel, add a new RunPy query - it will be named *runpy1* by default.
@@ -31,6 +36,10 @@ await micropip.install('numpy')
- Enable `Run this query on application load?` to make these packages available every time the application loads.
+
+
+
+
## Generating Random Numbers with NumPy
- Create a RunPy query using NumPy's random module to generate random numbers.
@@ -47,6 +56,10 @@ print(x)
*You can check the output on the browser's console.*
+
+
+
+
## Parse CSV data
- Create a RunPy query to parse CSV data using `StringIO`, `csv`, and `Pandas` module.
@@ -84,4 +97,6 @@ print(df)
-
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/docs/docs/how-to/intentionally-fail-js-query.md b/docs/docs/how-to/intentionally-fail-js-query.md
index 3b7c4c89f3..3111d09689 100644
--- a/docs/docs/how-to/intentionally-fail-js-query.md
+++ b/docs/docs/how-to/intentionally-fail-js-query.md
@@ -2,9 +2,12 @@
id: intentionally-fail-js-query
title: Intentionally Throwing an Error in RunJS for Debugging
---
+
In this step-by-step guide, we'll walk you through the process of creating a RunJS query that intentionally throws an error for debugging purposes.
+
+
### Creating the Error-Throwing RunJS Query
diff --git a/docs/docs/how-to/loading-image-pdf-from-db.md b/docs/docs/how-to/loading-image-pdf-from-db.md
index ae4e414746..1e05a809c7 100644
--- a/docs/docs/how-to/loading-image-pdf-from-db.md
+++ b/docs/docs/how-to/loading-image-pdf-from-db.md
@@ -2,9 +2,14 @@
id: loading-image-pdf-from-db
title: Upload And View Images and PDFs Using Base64 String
---
+
This guide shows how to upload and view images and PDFs using the base64 string format.
+
+
+
+
## 1. Start by Creating a New Table In ToolJet Database
- Create a new table named *testDB*.
@@ -18,6 +23,10 @@ This guide shows how to upload and view images and PDFs using the base64 string
+
+
+
+
## 2. Upload Files To The Database
- Create a new application and name it *Load PDF And Images Example*.
@@ -69,6 +78,10 @@ This guide shows how to upload and view images and PDFs using the base64 string
The upload process is now complete. Whenever files are selected in the Filepicker components and the *upload* button is clicked, the base64 strings of these files will be automatically written to the database.
+
+
+
+
## 3. View Image and PDF Files
- Create a query named *getFiles* to retrieve base64 strings from testDB: Click on **+ Add** button in the query panel, select Tooljet as Database, `testDB` as Table name, and `List rows` as Operations.
@@ -110,4 +123,6 @@ You can also use transformations in the query response and concat `data:image/jp
-Using the above logic, you can upload and view files in ToolJet using the base64 data.
\ No newline at end of file
+Using the above logic, you can upload and view files in ToolJet using the base64 data.
+
+
\ No newline at end of file
diff --git a/docs/docs/how-to/print-multitabs.md b/docs/docs/how-to/print-multitabs.md
index 750d663b05..b1597037b3 100644
--- a/docs/docs/how-to/print-multitabs.md
+++ b/docs/docs/how-to/print-multitabs.md
@@ -1,16 +1,21 @@
---
id: print-multi-tabs-report
-title: Print data from multiple tabs
+title: Print Data from Multiple Tabs
---
-
+
In this guide, we will learn how to print data from multiple tabs in ToolJet. This will be useful when you want to print an invoice or a report from your ToolJet application. For example, a tooljet app that has a set of tabs for each invoice and you want to print all the tabs in one go.
+
-## UI of the app
+
+
+## UI of the App
Build an app with a set of tabs for each record. Each tab will have a set of fields to display the invoice details. In the example below, we have tabs component and each tab has a set of fields to display the record details.
+
+
**Dropdown**: For selecting a specific patient whose data user want to load in the tabs.
@@ -19,32 +24,32 @@ Build an app with a set of tabs for each record. Each tab will have a set of fie
**Button**: Clicking on the button will print the data from all the tabs. The button has two events, the details for which we will share later in this guide.
-
-
-## Load data from database
+
+## Load Data from Database
+
For this app, we are using tooljet database with table name `patient_data`. We created a query called `getPatientList` to fetch data from the database.
-
-
Once the data is successfully loaded on the tabs and the app is working as expected, we can move to the next step.
-## Printing data from multiple tabs
-
-To print data from multiple tabs, we will create few javascript queries. Using event handlers, we will run these javascript queries in a sequence to print data from all the tabs.
+
+## Printing Data from Multiple Tabs
+
+To print data from multiple tabs, we will create few javascript queries. Using event handlers, we will run these javascript queries in a sequence to print data from all the tabs.
+
Before we start creating the javascript queries, we need to add a few events to the button component:
| Event | Action | Description |
@@ -60,6 +65,8 @@ Before we start creating the javascript queries, we need to add a few events to
+
+
### viewTabs query
The `viewTabs` query is a javascript query that will run a loop to print data from all the tabs. The query will set a variable `tabIndex` that will store the id of the tab to print data from. he query will loop and increment the tabsIndex variable by 1, using the setVariable action, till the value is less than 5.
@@ -72,7 +79,7 @@ if ((variables?.tabIndex ?? undefined) == undefined) {
}
```
-
+
**This query will have 3 events:**
@@ -84,8 +91,6 @@ For the first Query Success event, we will add a `Control component` action whic
-
-
#### 2. Query Success:
@@ -116,6 +121,8 @@ For the third Query Success event, we will select `Run Query` action which will
Now that we have created the `viewTabs` query, we can go to the [Download](/docs/how-to/print-multi-tabs-report#printing-data-from-multiple-tabs) button and add the `viewTabs` query to the `On click` event handler.
+
+
### getTabsHTML query
The `getTabsHTML` is javascript query that will get the html of the current tab and store it in a variable. The query will have a variable `tabsHtml` that will store the html of all the tabs in the form of an array.
@@ -136,6 +143,8 @@ actions.setVariable( // set tabsHtml variable
);
```
+
+
**This query will have 1 event:**
diff --git a/docs/docs/how-to/run-action-from-runjs.md b/docs/docs/how-to/run-action-from-runjs.md
index 0b385d8193..c0031c4446 100644
--- a/docs/docs/how-to/run-action-from-runjs.md
+++ b/docs/docs/how-to/run-action-from-runjs.md
@@ -7,9 +7,9 @@ ToolJet allows you to execute various [actions](/docs/actions/show-alert) within
-## Run Query Action
+### Run Query
-**Syntax:**
+To trigger a query, you can use the below functions:
```js
queries.getSalesData.run()
@@ -23,117 +23,144 @@ await actions.runQuery('getSalesData')
**Example:**
-In the following screenshot, we demonstrate triggering two different queries, `getCustomers` and `updateCustomers`, using the two available syntax options for the `Run Query` action.
+In the screenshot below, we are triggering two different queries using two different syntax available for `Run Query` action.
-
+
-## Set Variable Action
+### Get Query Data
+
+In the previous section, we saw how we can trigger queries. Once the queries are triggered, if you want to immediately use the data returned by the query inside the RunJS query, you can use the `getData()`, `getRawData()` and `getLoadingState()` functions:
+
+#### Trigger a query and retrieve its data:
+
+```js
+await queries.getSalesData.run();
+// replace getSalesData with your query name
+
+let value = queries.getSalesData.getData();
+// replace getSalesData with your query name
+```
+
+#### Trigger a query and retrieve its raw data:
+
+```js
+await queries.getCustomerData.run();
+//replace getCustomerData with your query name
+
+let value = queries.getCustomerData.getRawData();
+// replace getCustomerData your with query name
+```
+
+#### Trigger a query and retrieve its loading state:
+
+```js
+await queries.getTodos.run()
+//replace getTodos with your query name
+
+let value = queries.getTodos.getLoadingState();
+//replace getTodos with your query name
+```
+
+
+
+
+
+### Set Variables
+
+To create a variable, you can use the below function:
+
+```javascript
+actions.setVariable('', ``)
+```
+
+
+
+
+
+### Unset Variable
+
+To delete a created variable, you can use the below function:
**Syntax:**
```javascript
-actions.setVariable(variableName, variableValue);
+actions.unSetVariable('')
```
-**Example:**
-
-In this example, we set two variables, `test` and `test2`. Note that `test` contains a numerical value, so it is not wrapped in quotes, while `test2` is a string and is wrapped in quotes.
-
-
-
-
-
-## Unset Variable Action
+### Get Variables
-**Syntax:**
+To access variables immediately after setting them in a RunJS query, you can use the `getVariable` and `getPageVariable` functions:
-```javascript
-actions.unSetVariable(variableName);
+#### Set and retrieve a variable:
+
+```js
+actions.setVariable('mode','dark');
+//replace mode with your desired variable name
+
+return actions.getVariable('mode');
```
-**Example:**
+#### Set and retrieve a page-specific variable:
+```js
+actions.setPageVariable('number',1);
+//replace number with your desired variable name
-In the following screenshot, we unset the variable `test2` that was created in the previous step.
-
-
-
-
+return actions.getPageVariable('number');
+```
-## Logout Action
+### Logout
-**Syntax:**
+To log out the current logged-in user from the ToolJet, use the below function:
```javascript
actions.logout();
```
-**Example:**
-
-Executing `actions.logout()` will log out the current user from ToolJet and redirect to the sign-in page.
-
-
-
-
-
-## Show Modal Action
+### Show Modal
-**Syntax:**
+To open a modal using RunJS query, use the below function:
```javascript
-actions.showModal('modalName');
+actions.showModal('')
```
-**Example:**
-
-In this example, a modal named `formModal` is present on the canvas, and we use a RunJS query to show the modal.
-
-
-
-
-
-## Close Modal Action
+### Close Modal
-**Syntax:**
+To close a modal using RunJS query, use the below function:
```javascript
-actions.closeModal('modalName');
+actions.closeModal('')
```
-**Example:**
-
-Here, we use a RunJS query to close the modal that was shown in the previous step.
-
-
-
-
-
-## Set Local Storage Action
+### Set Local Storage
+
+Set a value in local storage using the below code:
**Syntax:**
@@ -141,166 +168,101 @@ Here, we use a RunJS query to close the modal that was shown in the previous ste
actions.setLocalStorage('key', 'value');
```
-
-
-
-
-## Copy to Clipboard Action
+### Copy to Clipboard
-**Syntax:**
+Use the below code to copy content to the clipboard:
```javascript
-actions.copyToClipboard('contentToCopy');
+actions.copyToClipboard('')
```
-
-
-
-
-## Generate File Action
+### Generate File
-**Syntax:**
+The below action can be used to generate a file.
```js
-actions.generateFile('fileName', 'fileType', 'data');
+actions.generateFile('', '', '')
```
-Example for generating a CSV file:
+`fileName` is the name that you want to give the file(string), `fileType` can be **csv**, **plaintext**, or **pdf** and `data` is the data that you want to store in the file.
+
+Example for generating CSV file:
```js
-actions.generateFile('csvfile1', 'csv', '{{components.table1.currentPageData}}')
+actions.generateFile('csvfile1', 'csv', '{{components.table1.currentPageData}}') // generate a csv file named csvfile1 with the data from the current page of table
```
-Example for generating a Text file:
+Example for generating Text file:
```js
-actions.generateFile('textfile1', 'plaintext', '{{JSON.stringify(components.table1.currentPageData)}}');
+actions.generateFile('textfile1', 'plaintext', '{{JSON.stringify(components.table1.currentPageData)}}') // generate a text file named textfile1 with the data from the current page of table (stringified)
```
-Example for generating a PDF file:
+Example for generating PDF file:
```js
-actions.generateFile('Pdffile1', 'pdf', '{{components.table1.currentPageData}}');
+actions.generateFile('Pdffile1', 'pdf', '{{components.table1.currentPageData}}') // generate a text file named Pdffile1 with the data from the current page of table
```
-
-
-
-
-## Go to App Action
+### Go to App
-**Syntax:**
+You can switch to a different application using the below action:
```javascript
-actions.goToApp('slug', queryparams)
+actions.goToApp('slug',queryparams)
```
-- `slug` can be found in the URL of the released app after the `application/`, or in the `Share` modal. You can also set a custom slug for the app in the `Share` modal or from the global settings in the app builder.
-- `queryparams` can be provided like this `[{"key":"value"}, {"key2":"value2"}]`.
-- Only the apps that are released can be accessed using this action.
-
-
-
-
+- `slug` can be found in URL of the released app after `application/` or in the share modal that opens up when you click on the `Share` button on the top-right of the app-builder
+- `queryparams` can be provided in this format - `[{"key":"value"}, {"key2":"value2"}]`
-## Show Alert Action
+### Show Alert
-**Syntax:**
+To show an alert using RunJS query, use the below code:
```js
-actions.showAlert(alertType, message); // alert types are info, success, warning, and error
+actions.showAlert('' , '' )
```
-**Example:**
+Available alert types are `info`, `success`, `warning`, and `danger`.
+Example:
```js
-actions.showAlert('error', 'This is an error')
+actions.showAlert('error' , 'This is an error' )
```
-
-
-
-
-## Run Multiple Actions from RunJS Query
+### Run Multiple Actions From RunJS Query
-To run multiple actions from a RunJS query, use **async-await** in the function. Here's an example code snippet for running queries and showing an alert at specific intervals:
+To run multiple actions from a RunJS query, you'll have to use **async-await** in the function.
+
+Here is a example code snippet for running the queries and showing alert after specific intervals. Check the complete guide on running queries at specified intervals **[here](/docs/how-to/run-query-at-specified-intervals)**.
```js
-actions.setVariable('interval', setInterval(countdown, 5000));
-
-async function countdown() {
- await queries.restapi1.run();
- await queries.restapi2.run();
- await actions.showAlert('info', 'This is an information');
+actions.setVariable('interval',setInterval(countdown, 5000));
+async function countdown(){
+ await queries.restapi1.run()
+ await queries.restapi2.run()
+ await actions.showAlert('info','This is an information')
}
```
-
-
-
-## Actions on pages
-
-
-
-### Switch page
-
-To switch to a page from the JavaScript query, use the following syntax:
-
-```js
-await actions.switchPage('')
-```
-
-
-
-
-
-### Switch page with query parameters
-
-Query parameters can be passed through action such as Switch Page. The parameters are appended to the end of the application URL and are preceded by a question mark (?). Multiple parameters are separated by an ampersand (&).
-
-To switch to a page with query parameters from the JavaScript query, use the following syntax:
-
-```js
-actions.switchPage('', [['param1', 'value1'], ['param2', 'value2']])
-```
-
-
-
-
-
-### Set page variable
-
-Page variables are restricted to the page where they are created and cannot be accessed throughout the entire application like regular variables.
-
-To set a page variable from the JavaScript query, use the following syntax:
-
-```js
-await actions.setPageVariable('',)
-```
-
-
-
-
-
-This enhanced guide provides a detailed walkthrough of executing various ToolJet actions from RunJS queries.
\ No newline at end of file
diff --git a/docs/docs/how-to/run-query-at-specified-intervals.md b/docs/docs/how-to/run-query-at-specified-intervals.md
index 76e3f85f93..6de502e96a 100644
--- a/docs/docs/how-to/run-query-at-specified-intervals.md
+++ b/docs/docs/how-to/run-query-at-specified-intervals.md
@@ -1,11 +1,16 @@
---
id: run-query-at-specified-intervals
-title: Run query at specified intervals
+title: Run Query at Specified Intervals
---
+
In this guide, we'll walk through the process of building a ToolJet application that automates data retrieval at specific intervals. By utilizing the RunJS queries, we can set up intervals for triggering queries, ensuring that the data is fetched dynamically and efficiently.
-## Step 1: Create a new application
+
+
+
+
+## Step 1: Create a New Application
Begin by creating a new application in the ToolJet dashboard. Once the app builder opens, Drag a table component onto the canvas. This component will display the data fetched from the REST API query.
@@ -13,6 +18,10 @@ Begin by creating a new application in the ToolJet dashboard. Once the app build
+
+
+
+
## Step 2: Set Up a REST API Query
From the query panel, create a new REST API query. Utilize mock REST API data by choosing the 'GET' method and specifying the endpoint (e.g., `https://jsonplaceholder.typicode.com/posts`). Name the query 'post' and `Run` the query to ensure that the data is fetched successfully.
@@ -21,6 +30,10 @@ From the query panel, create a new REST API query. Utilize mock REST API data by
+
+
+
+
## Step 3: Configure Table Properties
In the Table properties, link the query data to the table by setting the 'table data' property to `{{queries.post.data}}`. This establishes the connection between the REST API query and the table component.
@@ -29,6 +42,10 @@ In the Table properties, link the query data to the table by setting the 'table
+
+
+
+
## Step 4: Implement the RunJS Query
Create a RunJS query to set up intervals for triggering the REST API query. Use the following script:
@@ -52,6 +69,10 @@ async function countdown(){
}
```
+
+
+
+
## Step 5: Advanced Configuration
@@ -61,6 +82,10 @@ From the Settings section of the RunJS query, enable 'Run query on page load.' T
+
+
+
+
## Step 6: Prevent Indefinite Triggering
Create another RunJS query named 'clearInrternal' to stop the query from triggering indefinitely. Use the `clearInterval()` method to clear the interval. This method retrieves the value from the variable set in the 'setInterval' query.
@@ -69,6 +94,10 @@ Create another RunJS query named 'clearInrternal' to stop the query from trigger
clearInterval(variables.interval);
```
+
+
+
+
## Step 7: Add a Button
Drag a button on the canvas to act as a user-triggered stop mechanism. Attach an event handler to execute the 'clear' query when the button is clicked.
@@ -77,6 +106,8 @@ Drag a button on the canvas to act as a user-triggered stop mechanism. Attach an
+
+
By following these steps, your ToolJet application will dynamically fetch data at specified intervals, providing an efficient and automated user experience.
diff --git a/docs/docs/how-to/s3-custom-endpoint.md b/docs/docs/how-to/s3-custom-endpoint.md
index da3d77558c..bcc33b30b4 100644
--- a/docs/docs/how-to/s3-custom-endpoint.md
+++ b/docs/docs/how-to/s3-custom-endpoint.md
@@ -1,18 +1,22 @@
---
id: s3-custom-endpoints
-title: Use custom endpoint for s3 hosts
+title: Use Custom Endpoint for S3 Hosts
---
+
In this how-to guide, we will see how we can connect to different **S3 compatible object storages** using the custom endpoint. In this guide, we are using Minio since it is an S3-compatible object storage.
- Go to the ToolJet dashboard, and create a new application
- On the left-sidebar, go to the **Sources** and add a new AWS S3 datasource
-- Now the connection modal will pop-up
-
+- Now the connection modal will pop-up.
-
+
+
+
- To get the **Credentials** which is **Access Key** and **Secret Key**, you'll need to go to the Minio console to generate the keys
- Enable the **Custom Endpoint** toggle switch, and enter the custom host URL i.e where your Minio server API is exposed
-- Once entered the details, you can click on the **Test Connection** button to check the connection
\ No newline at end of file
+- Once entered the details, you can click on the **Test Connection** button to check the connection
+
+
\ No newline at end of file
diff --git a/docs/docs/how-to/serverside-pagination.md b/docs/docs/how-to/serverside-pagination.md
index a897b235a0..aeece0d9a9 100644
--- a/docs/docs/how-to/serverside-pagination.md
+++ b/docs/docs/how-to/serverside-pagination.md
@@ -1,89 +1,92 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
-
+
-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.
-### Loading data from PostgreSQL in chunks
+### 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.
+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.
+
+
+To obtain the count of records in the users table, execute the following query:
- 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.
+```sql
+SELECT COUNT(*)
+FROM users;
+```
-- 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:
-
- ```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..data[0].count}}`.
+### Edit the Table Component
-
+**Follow the steps below to edit the properties of the Table component:**
-### Edit the Table component
+- Drag the table component to the canvas from the components library and set the value of the **Data** property to `{{queries..data}}` to populate the table with the relevant data.
-**Now, let's edit the properties of the Table component:**
-
-- Set the value of the **Table data** property to `{{queries..data}}`
-
-
-
-
-- Enable the **Server-side pagination** option
+- 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..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..data[0].count}}
- ```
-
-
-
-- 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..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
-
-
-
+- 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..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..data[0].count}}
+ ```
+
+
+
+
+
+
+- To add the loading indicator on the table component while executing the query, set the `Loading state` property as:
+
+ ```js
+ {{queries..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.
+
+
+
+
Now, whenever the page is changed, the query will be executed, and the data will be fetched from the PostgreSQL table in chunks.
The log file serves as a comprehensive record of audit logs, capturing crucial information about various activities within the ToolJet. Follow the guide below to set up and utilize the log file feature effectively.
+
+
+
+
## Activation and Configuration
### 1. Environment Variable Setup
@@ -27,6 +32,10 @@ The log file serves as a comprehensive record of audit logs, capturing crucial i
- This step ensures that the server recognizes the new configuration and begins recording audit logs.
+
+
+
+
## Log Rotation and Organization
### 3. Daily Log Rotation
@@ -87,4 +96,6 @@ The log file feature automatically creates a folder in the home path with the sp
+
+
\ No newline at end of file
diff --git a/docs/docs/how-to/upload-files-aws.md b/docs/docs/how-to/upload-files-aws.md
index 1543d8a928..e5a6670f03 100644
--- a/docs/docs/how-to/upload-files-aws.md
+++ b/docs/docs/how-to/upload-files-aws.md
@@ -1,9 +1,8 @@
---
id: upload-files-aws
-title: Upload files on AWS S3 bucket
+title: Upload and Download Files on AWS S3 Bucket
---
-
-# Upload and download files on AWS S3 bucket
+
This guide will help you in quickly building a basic UI for uploading or downloading files from AWS S3 buckets.
@@ -22,6 +21,10 @@ Once you have successfully added the AWS data source, build a basic UI using the
+
+
+
+
## Queries
We'll create the following queries:
@@ -31,6 +34,10 @@ We'll create the following queries:
3. **uploadToS3**
4. **download**
+
+
+
+
### getBuckets
This query will fetch the list of all the buckets in your S3. Just create a new query, select AWS S3 data source, and choose **List buckets** operation. Name the query **getBuckets** and click **Save**.
@@ -44,17 +51,21 @@ 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.
-
+
+
+
+
+
### listObjects
This query will list all the objects inside the selected Bucket in dropdown. Select **List objects in a bucket** operation, enter `{{components.dropdown1.value}}` in the Bucket field - this will dynamically get the field value from the selected option in dropdown.
@@ -79,6 +90,10 @@ Edit the properties of **table** widget:
+
+
+
+
### download
Create a new query and select **Signed URL for download** operation. In the Bucket field, enter `{{components.dropdown1.value}}` and in Key enter `{{components.table1.selectedRow.Key}}`.
@@ -91,11 +106,15 @@ Create a new query and select **Signed URL for download** operation. In the Buck
Edit the **properties** of the table, add a Event handler for running the `download` query for `Row clicked` event. This will generate a signed url for download every time a row is clicked on the table.
+
+
+
+
### uploadToS3
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`
@@ -106,7 +125,11 @@ Create a new query, select the **Upload object** operation. Enter the following
-#### Configure the file picker:
+
+
+
+
+#### Configure the File Picker:
Click on the widget handle to edit the file picker properties:
@@ -128,10 +151,12 @@ Click on the widget handle to edit the file picker properties:
To accept any/all file type(s), set `Accept file types` to an empty value.
:::
-
+
-Final steps, go to the **Advanced** tab of the **uploadToS3** query and add a query to run **listObjects** query so that whenever a file is uploaded the tabled is refreshed.
\ No newline at end of file
+Final steps, go to the **Advanced** tab of the **uploadToS3** query and add a query to run **listObjects** query so that whenever a file is uploaded the tabled is refreshed.
+
+
\ No newline at end of file
diff --git a/docs/docs/how-to/upload-files-gcs.md b/docs/docs/how-to/upload-files-gcs.md
index 1a298174ec..b948ee575d 100644
--- a/docs/docs/how-to/upload-files-gcs.md
+++ b/docs/docs/how-to/upload-files-gcs.md
@@ -1,15 +1,18 @@
---
id: upload-files-gcs
-title: Upload files using GCS
+title: Upload Files Using GCS
---
-
-# Upload files using GCS
+
In this guide, we are going to create an interface to upload PDFs to Google Cloud Storage.
Before adding the new data source we will need to have a private key for our GCS bucket and make sure the key has the appropriate rights.
-## Setting up Google Cloud Storage data source
+
+
+
+
+## Setting up Google Cloud Storage Data Source
1. Go to the data source manager on the left-sidebar and click on the `+` button.
2. Add a new GCS data source from the **APIs** section in modal that pops up.
@@ -22,7 +25,11 @@ Before adding the new data source we will need to have a private key for our GCS
-## Adding a file picker
+
+
+
+
+## Adding a File Picker
1. Drag and drop the **file picker** widget on the canvas
2. Configure the file picker:
@@ -44,13 +51,17 @@ Before adding the new data source we will need to have a private key for our GCS
To accept any/all file type(s), set `Accept file types` to an empty value.
:::
-
+
-## Creating a query
+
+
+
+
+## Creating a Query
1. Click on the `+` button of the query manager at the bottom panel of the editor and select the GCS data source
2. Select **Upload file** operation and enter the required parameters:
@@ -61,7 +72,11 @@ Before adding the new data source we will need to have a private key for our GCS
- Encoding: `base64`
3. Click on **Save** to create the query
-## Running the query
+
+
+
+
+## Running the Query
1. Add a **button** that will fire the query to upload the file
2. Edit the properties of the button and add a **event handler** to **Run the query** on **On-Click** event.
3. Click on **Button** to fire the query, this will upload the pdf file that you selected earlier through the file picker and will upload it on the GCS.
@@ -70,4 +85,6 @@ Before adding the new data source we will need to have a private key for our GCS
+
+
\ No newline at end of file
diff --git a/docs/docs/how-to/use-axios.md b/docs/docs/how-to/use-axios.md
index 3e62a3b72e..87efa06d47 100644
--- a/docs/docs/how-to/use-axios.md
+++ b/docs/docs/how-to/use-axios.md
@@ -2,9 +2,14 @@
id: use-axios-in-runjs
title: Use Axios in RunJS
---
+
ToolJet supports three libraries: **Moment.js**, **Lodash**, and **Axios**. This guide focuses on using the Axios library with RunJS queries. **[Axios](https://axios-http.com/docs/intro)** is a promise-based HTTP client for making requests to your own or external servers. It supports various request types like `GET`, `POST`, `PUT/PATCH`, and `DELETE`.
+
+
+
+
## GET Requests
We'll use **[JSONPlaceholder](https://jsonplaceholder.typicode.com/)**, a free API, to demonstrate GET and PUT requests.
@@ -23,10 +28,14 @@ return data
-
+
+
+
+
+
## POST Requests
- Create a RunJS query and paste the code below:
@@ -56,3 +65,4 @@ To see Axios in action in a project, check out this tutorial:
**[Build GitHub star history tracker](https://blog.tooljet.com/build-github-stars-history-app-in-5-minutes-using-low-code/)**.
+
\ No newline at end of file
diff --git a/docs/docs/how-to/use-custom-parameters.md b/docs/docs/how-to/use-custom-parameters.md
index 4de41847d1..a0b0bd9c20 100644
--- a/docs/docs/how-to/use-custom-parameters.md
+++ b/docs/docs/how-to/use-custom-parameters.md
@@ -2,9 +2,12 @@
id: use-custom-parameters
title: Use Custom Parameters
---
+
Custom parameters in your queries offer a flexible way to introduce variables without directly modifying query parameters. This guide will walk you through creating, utilizing, and calling queries with custom parameters.
+
+
### Adding Custom Parameters
@@ -36,7 +39,7 @@ Use `parameters.` in your query to employ custom parameters. Note th
-### Example: Create row in ToolJetDB with Custom Parameters
+### Example: Create Row in ToolJetDB with Custom Parameters
Let's assume we have a ToolJetDB table with the following columns: `name`, `email`, and `contact`. We will create a new row in the table using custom parameters.
@@ -47,13 +50,9 @@ Let's assume we have a ToolJetDB table with the following columns: `name`, `emai
2. **name:** `email` and **value:** `shubh@email.com`
3. **name:** `contact` and **value:** `4638563845`
-
-
-
-
- Add the columns to the query and use the custom parameters to set the values.
@@ -62,22 +61,18 @@ Let's assume we have a ToolJetDB table with the following columns: `name`, `emai
| name | `{{parameters.name}}` |
| email | `{{parameters.email}}` |
| contact| `{{parameters.contact}}` |
-
-
-
-
- Finally, execute the query to create a new row in the ToolJetDB table with the values provided in the custom parameters.
-### Example: Providing Custom Parameters using Events
+### Example: Providing Custom Parameters Using Events
In this example, we will demonstrate how to use custom parameters in a query by providing values from an event. We will use execute a REST API query and on its success, we will execute the ToolJetDB query to create a new row with the response data.
diff --git a/docs/docs/how-to/use-events-on-chart.md b/docs/docs/how-to/use-events-on-chart.md
index 36fe7ae1ba..6d2ce87dbc 100644
--- a/docs/docs/how-to/use-events-on-chart.md
+++ b/docs/docs/how-to/use-events-on-chart.md
@@ -1,21 +1,33 @@
---
id: use-events-on-chart
-title: Use Events on Chart
+title: Use Events on Chart Created Through Custom Component
---
+
-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.
-
+
+
+
+
+
## 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.
-## Step 2: Add the code to the Custom Component
+
+
+
+
+## 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';
@@ -24,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 (
-
-
-
-)}
+ // Define onClick handler for bars
+ const barOnClick = ({ points }) => {
+ alert('A bar is clicked');
+ };
+
+ // Render the component
+ return (
+
+
+
+ );
+};
+
+// Connect the component
const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent);
+
+// Render the connected component to the DOM
ReactDOM.render(, 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
@@ -139,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
@@ -150,113 +150,92 @@ 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
- // Material UI Container component
-
-
-)}
+ return (
+
+
+
+ );
+};
```
-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
ReactDOM.render(, document.body); // render the component
```
-## Step 3: Using events from the Custom Component
+
+
+
+
+## Step 3: Using Events from the Custom Component
In the code above, we created a function called `barOnClick` that will be called when the user clicks on the bar. This function holds the code that will be executed when the user clicks on the bar.
@@ -274,4 +253,6 @@ const barOnClick = ({points}) => {
}
```
-`runQuery` is a function which accepts a query name as a string used to run the query from the custom component. Learn more about the custom component [here](/docs/widgets/custom-component/).
\ No newline at end of file
+`runQuery` is a function which accepts a query name as a string used to run the query from the custom component. Learn more about the custom component [here](/docs/widgets/custom-component/).
+
+
\ No newline at end of file
diff --git a/docs/docs/how-to/use-form-component.md b/docs/docs/how-to/use-form-component.md
index 71dff52265..7fd0242683 100644
--- a/docs/docs/how-to/use-form-component.md
+++ b/docs/docs/how-to/use-form-component.md
@@ -2,18 +2,27 @@
id: use-form-component
title: Use Form Component
---
+
In this guide, we'll create a simple app that uses a **[Form](/docs/widgets/form)** component to add records to a database. We'll use **[ToolJet Database](/docs/tooljet-database)** as our data source.
+
+
+
+
## 1. Create a Table in ToolJet Database
- Create a table named *products* in ToolJet Database.
- Create three columns - `name`, `quantity` and `price`.
- Add some sample data to the table.
-
+
+
+
+
+
## 2. Create the UI
- Create a new app and drag and drop a **[Table](/docs/widgets/table)** component on the canvas.
- Drop a **[Form](/docs/widgets/form)** next to it.
@@ -21,10 +30,14 @@ In this guide, we'll create a simple app that uses a **[Form](/docs/widgets/form
- Name the three input fields on the form as - *nameInput*, *quantityInput* and *priceInput*. Name the button as *submitButton*.
-
+
Naming the components can help in easily identifying or referring individual components when there are a large number of components in the app.
+
+
+
+
## 3. Load the Table Component With Data
- Click on the Add button in the **[Query Panel](/docs/app-builder/query-panel/)**, select ToolJet Database
@@ -37,9 +50,13 @@ In this guide, we'll create a simple app that uses a **[Form](/docs/widgets/form
{{queries.getProducts.data}}
```
-
+
+
+
+
+
## 4. Write Data Using the Form Component
- Click on the Add button in the Query Panel, select ToolJet Database
- Select *products* as Table name, Create row as Operations
@@ -80,4 +97,6 @@ Now if you enter the product data on the form and click on Submit. The `addProdu
-In this how-to guide, we have explored a practical application of the Form component in ToolJet. You can apply the same principles for a variety of use cases that requires data input from the end-user.
\ No newline at end of file
+In this how-to guide, we have explored a practical application of the Form component in ToolJet. You can apply the same principles for a variety of use cases that requires data input from the end-user.
+
+
\ No newline at end of file
diff --git a/docs/docs/how-to/use-inspector.md b/docs/docs/how-to/use-inspector.md
index 99ec92d7de..76825b4936 100644
--- a/docs/docs/how-to/use-inspector.md
+++ b/docs/docs/how-to/use-inspector.md
@@ -2,13 +2,18 @@
id: use-inspector
title: Use Inspector in App-Builder
---
+
This guide introduces **Inspector** in the app-builder, a feature that lets you view data related to queries, components, global variables, page-related variables, user-set variables and constants.
-
+
+
+
+
+
## Sections
The Inspector panel has 6 main sections:
@@ -20,16 +25,26 @@ The Inspector panel has 6 main sections:
- **[Page](#page)**
- **[Constants](#constants)**
+
+
+
### Queries
Queries allow you to inspect the specifics of your queries. However, the data related to these queries will only be visible after they have been executed or triggered.
+
+
+
### Components
Under Components, you can view and analyze the properties and values of the components you've added to the canvas, providing insights into how each component functions within your app.
+
+
+
+
### Globals
Globals give you access to global information related to the app.
@@ -47,13 +62,25 @@ The globals selection consists of the following data:
All the global variables can be accessed anywhere within ToolJet applications. Here's an **[example use-case](/docs/how-to/access-currentuser)** that demonstrates the usage of these variables.
:::
+
+
+
+
### Variables
Variables shows user-defined variables in a key-value format. These variables, set through event handlers or queries, are accessible across the entire application. You can set variables from the [event handler](/docs/actions/set-variable) or using [JavaScript code](/docs/how-to/run-actions-from-runjs#set-variable).
+
+
+
+
### Page
Page lets you view page-specific properties like page name, handle and variables. Page variables are restricted to their respective pages and are not accessible application-wide.
+
+
+
+
### Constants
Under **[Constants](/docs/org-management/workspaces/workspace_constants/)**, you can find the predefined values (usually tokens/secret keys/API keys) that can be used across your application to maintain consistency and facilitate easy updates.
@@ -61,3 +88,5 @@ Under **[Constants](/docs/org-management/workspaces/workspace_constants/)**, you
:::info
The **environment** and **mode** variables are only available in **ToolJet Enterprise Edition v2.2.3** and above.
:::
+
+
\ No newline at end of file
diff --git a/docs/docs/how-to/use-s3-presigned-url-to-upload-docs.md b/docs/docs/how-to/use-s3-presigned-url-to-upload-docs.md
index 61dd6448d3..a69965a7ca 100644
--- a/docs/docs/how-to/use-s3-presigned-url-to-upload-docs.md
+++ b/docs/docs/how-to/use-s3-presigned-url-to-upload-docs.md
@@ -1,173 +1,138 @@
---
id: use-s3-signed-url-to-upload-docs
-title: Use S3 signed URL to upload documents
+title: Use S3 Signed URL to Upload Documents
---
+
-# Use S3 signed URL to upload documents
+In this how-to guide, we will upload documents to S3 buckets using the **S3 signed URL** from a ToolJet application.
-In this how-to guide, you'll learn to 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**
-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.
-:::
+
-
+## 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**.
+
+
+
+
+
-- 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.
+:::
+
+
+
+
+
+
+
+
+
+
+
+## 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.
-
+
-- 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**.
+- Running the *getBuckets* query will load all the buckets in the app's left table.
+
- :::tip
- Check the [AWS S3 datasource reference](/docs/data-sources/s3) to learn more about connnection and choosing your preferred authentication method.
- :::
-
+
-- 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.
+
+
+
+
+## Get the Objects Inside the Bucket
+
+- 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.
+
+
-
+
-- Running the **getBuckets** query will load all the buckets in the dropdown in the app.
+
+
+
+
+## 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.
-
+
-- 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.
+
+
+
+
+## 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.
+
+
+
+
+
+## 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.
-
+
-- 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
-
-
-
-
-
-
-
-- 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
- ```
-
-
-
-
-
-
-
- - 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": []
- }
- ]
- ```
- :::
-
-
-
-
-
-
-
-- 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.
-
-
-
-
-
-
-- 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.
-
-
-
-
-
-
-- 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**.
-
-
-
-
-
-
-- 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.
-
-
-
-
-
-
-- 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.
-
+
\ No newline at end of file
diff --git a/docs/docs/how-to/use-to-py.md b/docs/docs/how-to/use-to-py.md
index 9d1eeb35fe..7339d067c3 100644
--- a/docs/docs/how-to/use-to-py.md
+++ b/docs/docs/how-to/use-to-py.md
@@ -1,10 +1,15 @@
---
id: use-to-py-function-in-runpy
-title: "Utilize the to_py() Function in RunPy: Translating JavaScript Objects to Python"
+title: "Translating JavaScript Objects to Python in RunPy"
---
+
This guide demonstrates the utilization of the `to_py()` function in RunPy queries for converting JavaScript objects into their corresponding Python representations.
+
+
+
+
## The to_py() Function
The **to_py()** function within the **Pyodide** library serves as the counterpart to the **to_js()** function. Its purpose is to transform JavaScript objects into their equivalent Python structures. This conversion becomes essential when handling JavaScript objects within the Pyodide environment and manipulating them using Python code.
@@ -13,6 +18,10 @@ Similar to **to_js()**, **to_py()** facilitates the mapping and conversion of da
**Note**: Refer to the **[RunPy](/docs/data-sources/run-py)** documentation for a more in-depth understanding.
+
+
+
+
## Using the to_py() Function
Here's an example demonstrating the application of the to_py() function:
@@ -41,6 +50,10 @@ By leveraging to_py(), JavaScript objects can seamlessly transition into Python
Both **to_js()** and **to_py()** functions offer a convenient means to exchange data between Python and JavaScript in Pyodide, enabling the utilization of both languages' strengths in a unified environment.
+
+
+
+
## Why the Use of to_py() is Essential?
When previewing results in a RunPy query, discrepancies between the JSON and Raw tabs may arise due to the conversion and display mechanisms in Pyodide. By default, **Python dictionaries** are converted to **JavaScript Map objects** in Pyodide, ensuring compatibility between the two languages.
@@ -53,4 +66,6 @@ To maintain consistency between JSON and Raw representations, the **to_js()** fu
+
+
\ No newline at end of file
diff --git a/docs/docs/how-to/use-url-params-on-load.md b/docs/docs/how-to/use-url-params-on-load.md
index 5f5378eaaf..63fbcf59ba 100644
--- a/docs/docs/how-to/use-url-params-on-load.md
+++ b/docs/docs/how-to/use-url-params-on-load.md
@@ -1,7 +1,8 @@
---
id: use-url-params-on-load
-title: Use URL Parameters on page load
+title: Use URL Parameters on Page Load
---
+
In this guide, we will learn how to use URL parameters at the time of page load. The URL parameters are used to pass data from one page to another. Currently, we can add URL parameters in the following ways:
@@ -12,7 +13,11 @@ If a page is opened with URL parameters, you can access them using the `{{global
Let's take a look at an example below to understand how to use URL parameters on page load.
-## Using URL parameters on page load to execute REST API queries
+
+
+
+
+## Using URL Parameters on Page Load to Execute REST API Queries
Create two pages, `Home` and `Dashboard`. When a new app is created, a page named `Home` is created by default. Create a new page named `Dashboard` from the Pages menu in the left sidebar.
@@ -20,6 +25,10 @@ Create two pages, `Home` and `Dashboard`. When a new app is created, a page name
+
+
+
+
## Home and Dashboard Pages
Add a form component to the `Home` page. The form component will have a text input fields and a button. The text input field will be used to enter the name and the button will be used to navigate to the `Dashboard` page. Let's name the text input field as `email` and the button as `Submit`.
@@ -40,11 +49,15 @@ Now, on clicking the `Submit` button, the `Dashboard` page will be opened with t
-## Queries and binding data
+
+
+
+
+## Queries and Binding Data
In the `Dashboard` page, add two table components. We will be loading the data from two different REST API queries on these tables.
-### Query 1: Get products
+### Query 1: Get Products
- Create a new REST API query and name it as `products`. We will be using a mock REST API to fetch the data. The URL for the REST API is `https://fakestoreapi.com/products`. Run the query and check the preview to see the returned data.
- Go to the `table1` properties, set the value of table data to `{{queries.products.data}}`. This will bind the data returned from the REST API query to the table.
@@ -53,7 +66,7 @@ In the `Dashboard` page, add two table components. We will be loading the data f
-### Query 2: Get user details
+### Query 2: Get User Details
- Create a new REST API query and name it as `users`. We will be using a mock REST API to fetch the data. The URL for the REST API is `https://jsonplaceholder.typicode.com/users`. Run the query and check the preview to see the returned data.
- Go to the `table2` properties, set the value of table data to `{{queries.users.data}}`. This will bind the data returned from the REST API query to the table.
@@ -62,7 +75,7 @@ In the `Dashboard` page, add two table components. We will be loading the data f
-### Query 3: JavaScript code to use URL parameters
+### Query 3: JavaScript Code To Use URL Parameters
- Create a new JavaScript code query and name it as `urlparams`. We will be using this query to access the URL parameters and to check if the email parameter is present in the URL, then trigger the REST API queries.
@@ -91,7 +104,11 @@ async function checkAndRunQuery(timeout) { // Check if URL parameters are availa
checkAndRunQuery(5000); // Check if URL parameters are available and run the REST API queries after a timeout of 5 seconds
```
-## Dashboard page event handler
+
+
+
+
+## Dashboard Page Event Handler
- Finally, go to the Pages menu in the left sidebar and open the menu for the `Dashboard` page.
- Select the option to add Event handler and add a new `On page load`, select the option to `Run query` and select the query `urlparams`. This will trigger the JavaScript code query to check if the email parameter is present in the URL and then run the REST API queries whenever the `Dashboard` page is loaded.
@@ -100,4 +117,6 @@ checkAndRunQuery(5000); // Check if URL parameters are available and run the RE
-Now, whenever the user will enter the email in the `Home` page and click the `Submit` button, the `Dashboard` page will be opened with the URL parameter `email` containing the value of the email input field. The JavaScript code query will check if the email parameter is present in the URL and then run the REST API queries to fetch the data. The data will be displayed in the tables on the `Dashboard` page.
\ No newline at end of file
+Now, whenever the user will enter the email in the `Home` page and click the `Submit` button, the `Dashboard` page will be opened with the URL parameter `email` containing the value of the email input field. The JavaScript code query will check if the email parameter is present in the URL and then run the REST API queries to fetch the data. The data will be displayed in the tables on the `Dashboard` page.
+
+
\ No newline at end of file
diff --git a/docs/docs/marketplace/marketplace_overview.md b/docs/docs/marketplace/marketplace_overview.md
index 4a8f3a9cef..ae1aae65f6 100644
--- a/docs/docs/marketplace/marketplace_overview.md
+++ b/docs/docs/marketplace/marketplace_overview.md
@@ -1,19 +1,19 @@
---
id: marketplace-overview
-title: 'Marketplace : Overview'
+title: 'Marketplace: Overview'
---
-# Marketplace : Overview
+# Marketplace: Overview
-With ToolJet Marketplace, ToolJet users can conveniently add custom plugins (datasources) to their workspaces. This feature enables users to create plugins that cater to their specific needs and integrate them seamlessly with ToolJet.
+ToolJet Marketplace allows users to enhance their workspaces by adding custom plugins (data sources) tailored to their unique requirements. This functionality facilitates the seamless integration of user-created plugins with ToolJet.
-
-
-
+
-## Enabling the Marketplace
+
+
+## Enabling Marketplace
To **Enable** the marketplace feature, users need to add the following environment variable to their **[`.env`](/docs/setup/env-vars#marketplace)** file:
@@ -21,77 +21,70 @@ To **Enable** the marketplace feature, users need to add the following environme
ENABLE_MARKETPLACE_FEATURE=true
```
-Once the marketplace feature has been activated, a Marketplace icon will appear on the left-hand sidebar of the dashboard, providing users with access to the Marketplace.
-
-When running ToolJet locally, ensure that all the plugins are available. Specifically, building the marketplace and then starting the server is mandatory.
+When running ToolJet locally, ensure that all the plugins are available by building marketplace before starting the server.
:::info Note
-The user logged-in should be the **Administrator** to access the marketplace page.
+The logged-in user should be an **Administrator** to access the marketplace page.
:::
-
-
-
-
-## Installing a plugin
+
+
+## Installing a Plugin
+
+To navigate to the Marketplace page, click on the settings icon on the bottom left of the dashboard, and click on **Marketplace** from the selection menu.
The Marketplace page will contain two tabs: **Installed** and **Marketplace**.
Under the **Marketplace** tab, you will see a list of all the available plugins that can be installed on the workspace. To install a plugin, click on the **Install** button on the plugin's card. Once the installation is complete, the status will change from Install to **Installed**.
-
-
+
+
-## Using Marketplace plugins
+
+
+## Using Marketplace Plugins
You can access any installed plugins by following these steps:
-- Navigate to the **Global Datasources** Page.
-- Click on the **Add new datasource** button.
-- Open the **Plugins** tab in the modal that appears.
-- From here, you can connect to any of the plugins that were installed from the Marketplace.
+- Navigate to the **Data sources** tab in the dashboard.
+- Scroll down to **Plugins**.
+
+You can now see the list of installed marketplace plugins that you can configure as data sources.
-
-
-
+
-- After successfully connecting to a plugin, you can access it under the Global Datasource section when creating queries.
+- After successfully configuring a plugin, you can access it when trying to add a new query from the Query Panel.
-
-
-
-
-
-
-## Removing a plugin
+## Removing a Plugin
:::caution
-If you remove a plugin, all the queries associated with it will be eliminated from all the applications.
+If you remove a plugin, all the queries associated with it will be eliminated from the applications.
:::
To remove a plugin, follow these steps:
-- Go to the Marketplace page from the dashboard.
-- Go to the **Installed** tab and click on the **Remove** button next to the plugin that you want to remove.
-- By doing so, the plugin will be removed from the global datasource section, and no user will be able to establish a connection with it.
-
-
-
-
-
-
+- Click on the settings icon on the bottom left of the dashboard, and click on `Marketplace` from the selection menu.
+- On the `Installed` page, click on the `Remove` button of the related plugin that you wish to remove.
## Available Plugins
+- **[AWS Redshift](/docs/marketplace/plugins/marketplace-plugin-redshift)**
+- **[AWS Textract](/docs/marketplace/plugins/marketplace-plugin-textract)**
+- **[AWS Lambda](/docs/marketplace/plugins/marketplace-plugin-aws-lambda)**
+- **[Engagespot](/docs/marketplace/plugins/marketplace-plugin-engagespot)**
- **[GitHub](/docs/marketplace/plugins/marketplace-plugin-github)**
+- **[HarperDB](/docs/marketplace/plugins/marketplace-plugin-harperdb)**
- **[OpenAI](/docs/marketplace/plugins/marketplace-plugin-openai)**
- **[Plivo](/docs/marketplace/plugins/marketplace-plugin-plivo)**
-
+- **[Pocketbase](/docs/marketplace/plugins/marketplace-plugin-pocketbase)**
+- **[Supabase](/docs/marketplace/plugins/marketplace-plugin-supabase)**
:::info For Plugin Developers
Refer to the **[Plugin Development guide](/docs/contributing-guide/marketplace/marketplace-setup)** to learn how to create plugins for the ToolJet Marketplace.
-:::
\ No newline at end of file
+:::
+
+
\ No newline at end of file
diff --git a/docs/docs/marketplace/plugins/amazon-redshift.md b/docs/docs/marketplace/plugins/amazon-redshift.md
new file mode 100644
index 0000000000..9d31d3ddcd
--- /dev/null
+++ b/docs/docs/marketplace/plugins/amazon-redshift.md
@@ -0,0 +1,119 @@
+---
+id: marketplace-plugin-redshift
+title: Amazon Redshift
+---
+
+ToolJet can connect to Amazon Redshift, enabling your applications to query data directly from a Redshift cluster.
+
+
+
+
+
+
+
+
+**NOTE:** **Before following this guide, it is assumed that you have already completed the process of [Using Marketplace plugins](/docs/marketplace/marketplace-overview#using-marketplace-plugins)**.
+
+
+
+## Configuration
+
+To connect to Amazon Redshift, you need to provide the following details:
+
+#### Required Parameters
+
+- **Region**: The region where your Redshift cluster is located. For example, `us-east-1`.
+- **Database Name**: The name of the database you want to connect to.
+- **Authentication Type**: The type of authentication you want to use to connect to the Redshift cluster. Currently, only **IAM** is supported.
+- **Access Key**: The access key of the user you want to use to connect to the Redshift cluster.
+- **Secret Key**: The secret key of the user you want to use to connect to the Redshift cluster.
+
+#### Optional Parameters
+
+- **Port**: The port number of the Redshift cluster. The default port number is `5439`.
+- **Workgroup name**: The name of the workgroup you want to use to connect to the Redshift cluster.
+
+
+
+
+
+
+
+
+
+## Supported Queries
+
+Redshift supports a comprehensive set of SQL commands. You can use the SQL editor to run any SQL query on the connected Redshift cluster. Refer to the [Redshift documentation](https://docs.aws.amazon.com/redshift/latest/dg/c_SQL_commands.html) for more information on the supported SQL commands.
+
+
+
+
+
+### Read Data
+
+The following example demonstrates how to read data from a table in the connected Redshift cluster. The query selects all the columns from the `employee` table.
+
+```sql
+SELECT * FROM employee
+```
+
+
+
+
+
+### Write Data
+
+The following example demonstrates how to write data to a table in the connected Redshift cluster. The query inserts a new row into the `employee` table.
+
+```sql
+INSERT INTO employee (
+ first_name,
+ last_name,
+ email,
+ phone_number,
+ hire_date,
+ job_title,
+ salary,
+ department_id
+) VALUES (
+ 'Tom',
+ 'Hudson',
+ 'tom.hudson@example.com',
+ '234843294323',
+ '2024-01-01',
+ 'Test Automation Engineer',
+ 245000.00,
+ 12
+);
+```
+
+
+
+
+
+### Update Data
+
+The following example demonstrates how to update data in a table in the connected Redshift cluster. The query updates the `first_name` and `last_name` columns of the `employee` table.
+
+```sql
+UPDATE employee
+SET first_name = 'Glenn',
+ last_name = 'Jacobs'
+WHERE employee_id = 8;
+```
+
+
+
+
+
+### Delete Data
+
+The following example demonstrates how to delete data from a table in the connected Redshift cluster. The query deletes a row from the `employee` table.
+
+```sql
+DELETE FROM employee
+WHERE employee_id = 7;
+```
+
+
+
diff --git a/docs/docs/marketplace/plugins/engagespot.md b/docs/docs/marketplace/plugins/engagespot.md
new file mode 100644
index 0000000000..70f5546b35
--- /dev/null
+++ b/docs/docs/marketplace/plugins/engagespot.md
@@ -0,0 +1,122 @@
+---
+id: marketplace-plugin-engagespot
+title: Engagespot
+---
+
+# Engagespot
+
+ToolJet connects to your Engagespot account, allowing you to send notifications, create or update users from within your ToolJet application.
+
+:::info
+**NOTE:** **Before following this guide, it is assumed that you have already completed the process of [Using Marketplace plugins](/docs/marketplace/marketplace-overview#using-marketplace-plugins)**.
+:::
+
+
+
+## Connection
+
+- Establish a connection to Engagespot by either clicking `+Add new Data source` on the query panel or navigating to the [Data Sources](/docs/data-sources/overview/) page from the ToolJet dashboard.
+
+- Enter your Engagespot API key and API secret into their designated fields. To generate user tokens directly from ToolJet, you can optionally provide a signing key.
+
+- Click **Test Connection** to validate your credentials. Click **Save** to store the data source.
+
+
+
+
+
+
+:::info
+You can change your Engagespot BaseURL by enable custom endpoint.
+:::
+
+
+
+
+
+## Querying Engagespot
+
+Click on `+Add` button of the [query manager](/docs/app-builder/query-panel/#add) and select the data source added in the previous step as the data source. Select the operation that you want to perform, fill in the required parameters and click on **Run** button to run the query.
+
+
+
+
+
+
+
+
+
+:::info
+Query results can be transformed using transformations. Read our [transformations documentation](/docs/tutorial/transformations).
+:::
+
+
+
+
+
+## Query Operations
+
+You can create query for Engagespot data source to perform several actions such as:
+ 1. **[Create or Update User](#create-or-update-user)**
+ 2. **[Send Notification](#send-notification)**
+ 3. **[Generate User Token](#generate-user-token)**
+
+
+
+
+
+### Create OR Update User
+
+ #### Required Parameters:
+ - **User Identifier** - Unique user identifier.
+
+
+
+
+
+
+:::info
+The user profile column accepts any key-value pairs in valid JSON object format.
+:::
+
+
+
+
+
+### Send Notification
+
+ #### Required Parameters:
+ - **Reciepient** - Unique user identifier.
+ - **Notification Title** - The title for your notification.
+
+
+
+
+
+
+
+
+
+
+### Generate User Token
+
+ #### Required Parameters:
+ - **User Identifier** - Unique user identifier.
+
+
+
+
+
+
+:::info
+To generate user tokens, ensure you provide a Signing Key when establishing a connection to your Engagespot data source.
+:::
+
+
+
+
+
+### Adding the In-App Inbox element to your Tooljet app
+ To set up an In-App Inbox element in your ToolJet application, refer to the [Adding In-App](https://docs.engagespot.co/docs/plugins/tooljet/adding-the-inbox-component) guide.
+
+
\ No newline at end of file
diff --git a/docs/docs/marketplace/plugins/github.md b/docs/docs/marketplace/plugins/github.md
index b01bc0a872..096a3cee9a 100644
--- a/docs/docs/marketplace/plugins/github.md
+++ b/docs/docs/marketplace/plugins/github.md
@@ -3,103 +3,63 @@ id: marketplace-plugin-github
title: GitHub
---
-ToolJet can connect to GitHub account to read and write data. In order for ToolJet to access and manipulate data on GitHub, a **GitHub Personal Access Token** is necessary to authenticate and interact with the GitHub API.
-
-
-
-
-
-
-
-:::note
-Before following this guide, it is assumed that you have already completed the process of **[Using Marketplace plugins](/docs/marketplace/marketplace-overview#using-marketplace-plugins)**.
-:::
+ToolJet offers seamless integration with GitHub. This connection allows you to directly interact with GitHub repositories and data.
## Connection
-For connecting to GitHub, following credentials are required:
-- **Personal Access Token**: Generate a Personal Access Token from your **[GitHub Account Settings](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)**
+To connect to GitHub, you need the following credential:
+- **Personal Access Token**: You can generate this token through your **[GitHub Account Settings](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)**.
-:::caution
-If a Personal Access Token is not provided, the data from the private repositories will not be retrieved via the GitHub Plugin. However, the public repositories data can still be retrieved.
-:::
+You'll need a Personal Access Token to access data from private repositories. Public repository data remains accessible without a Personal Access Token.
-
-
-
+
-## Supported queries
+## Supported Queries
- **[Get user info](#get-user-info)**
- **[Get repository](#get-repository)**
- **[Get repository issues](#get-repository-issues)**
- **[Get repository pull requests](#get-repository-pull-requests)**
+### Get User Info
+
+This operation fetches details for a specified user.
+
+#### Required Parameters:
+
+- **Username**: Specify the GitHub username or organization to retrieve their details.
+
-
-
-
+
-### Get user info
+### Get Repository
-All the details regarding the user is retrieved by running this query.
+Fetches detailed information about a specific repository.
-#### Required parameters:
+#### Required Parameters:
-- **Username**: To obtain the details, the username of the user must be provided for this field. You can input the username of a GitHub organization or a user for this field.
+- **Owner**: Name of the repository's owner, which can be either a GitHub user or an organization.
+- **Repository**: The exact name of the repository.
-
+### Get Repository Issues
-
+Generates a list of issues associated with a repository, with options to filter them by their status.
-
+#### Required Parameters:
-### Get repository
+- **Owner**: The name of the repository's owner. The owner can either be a GitHub organization or a user.
+- **Repository**: The repository name for which the issues are to be retrieved.
+- **State**: Filter the issues by their status: All, Open, or Closed.
-All the details regarding the repository are retrieved by running this query.
+### Get Repository Pull Requests
-#### Required parameters:
+Generates a list of pull requests from a repository, with options to filter them by their status.
-- **Owner**: The owner's name of the repository is required for this field. The owner can either be a GitHub organization or a user.
-- **Repository**: Provide the name of the repository of which you want to retrieve the details.
+#### Required Parameters:
-
-
-
-
-
-
-### Get repository issues
-
-Running this query will retrieve a list of issues from a repository. You can select whether to obtain All, Open, or Closed issues.
-
-#### Required parameters:
-
-- **Owner**: The owner's name of the repository is required for this field. The owner can either be a GitHub organization or a user.
-- **Repository**: Provide the name of the repository of which you want to retrieve the issues.
-- **State**: Choose the state of the issues that you would like to retrieve: All, Open, or Closed.
-
-
-
-
-
-
-
-### Get repository pull requests
-
-Running this query will retrieve a list of pull requests from a repository. You can select whether to obtain All, Open, or Closed issues.
-
-#### Required parameters:
-
-- **Owner**: The owner's name of the repository is required for this field. The owner can either be a GitHub organization or a user.
-- **Repository**: Provide the name of the repository of which you want to retrieve the pull requests.
-- **State**: Choose the state of the pull requests that you would like to retrieve: All, Open, or Closed.
-
-
-
-
-
-
\ No newline at end of file
+- **Owner**: The name of the repository's owner. The owner can either be a GitHub organization or a user.
+- **Repository**: The repository name for which the pull requests are to be retrieved.
+- **State**: Filter the pull requests by their status: All, Open, or Closed.
\ No newline at end of file
diff --git a/docs/docs/marketplace/plugins/harperdb.md b/docs/docs/marketplace/plugins/harperdb.md
index 18ed68849b..eb6162d6b9 100644
--- a/docs/docs/marketplace/plugins/harperdb.md
+++ b/docs/docs/marketplace/plugins/harperdb.md
@@ -7,7 +7,7 @@ HarperDB is a database and application development platform that is focused on p
-
+
@@ -15,6 +15,8 @@ HarperDB is a database and application development platform that is focused on p
Before following this guide, it is recommended to check the following doc: **[Using Marketplace plugins](/docs/marketplace/marketplace-overview#using-marketplace-plugins)**.
:::
+
+
## Connection
To establish a connection with HarperDB, you need the following credentials:
@@ -26,20 +28,28 @@ To establish a connection with HarperDB, you need the following credentials:
-
+
+
+
+
+
## Querying HarperDB
To perform queries on HarperDB, click the `+Add` button in the query manager located at the bottom panel of the app builder. Select the HarperDB from the Global Datasource section in the query editor.
-
+
-### SQL mode
+
+
+
+
+### SQL Mode
SQL mode enables you to perform various operations on the database using SQL statements.
@@ -58,7 +68,7 @@ SELECT * FROM sampleorg.people WHERE id = 1
-
+
@@ -72,7 +82,7 @@ INSERT INTO sampleorg.people (id, name, age, country, hobby) VALUE (5, 'Shubh',
-
+
@@ -86,7 +96,7 @@ UPDATE sampleorg.people SET hobby = 'chess' WHERE id = 5
-
+
@@ -100,11 +110,15 @@ DELETE FROM sampleorg.people WHERE id = 5
-
+
-### NoSQL mode
+
+
+
+
+### NoSQL Mode
NoSQL mode enables you to perform schema-less storage and retrieval of JSON documents.
@@ -119,7 +133,7 @@ NoSQL mode enables you to perform schema-less storage and retrieval of JSON docu
Insert operation allows to add one or more rows of data to a database table.
-| Parameters | Description |
+|
Parameters
|
Description
|
| ---------- | ----------- |
| Schema (required) | schema where the table you are inserting records into lives |
| Table (required) | table name where you want to insert records |
@@ -132,7 +146,7 @@ Insert operation allows to add one or more rows of data to a database table.
-
+
@@ -140,7 +154,7 @@ Insert operation allows to add one or more rows of data to a database table.
The Update operation modifies the values of specified attributes in one or more rows of a database table based on the hash attribute(primary key) that identifies the rows.
-| Parameters | Description |
+|
Parameters
|
Description
|
| ---------- | ----------- |
| Schema (required) | schema where the table you are updating records into lives |
| Table (required) | table name where you want to update records |
@@ -153,7 +167,7 @@ The Update operation modifies the values of specified attributes in one or more
-
+
@@ -161,7 +175,7 @@ The Update operation modifies the values of specified attributes in one or more
Removes one or more rows of data from a specified table.
-| Parameters | Description |
+|
Parameters
|
Description
|
| ---------- | ----------- |
| Schema (required) | schema where the table you are deleting records into lives |
| Table (required) | table name where you want to delete records |
@@ -174,7 +188,7 @@ Removes one or more rows of data from a specified table.
-
+
@@ -182,7 +196,7 @@ Removes one or more rows of data from a specified table.
Returns data from a table for one or more hash values.
-| Parameters | Description |
+|
Parameters
|
Description
|
| ---------- | ----------- |
| Schema (required) | schema where the table you are searching lives |
| Table (required) | table you wish to search |
@@ -201,7 +215,7 @@ Returns data from a table for one or more hash values.
-
+
@@ -209,7 +223,7 @@ Returns data from a table for one or more hash values.
Returns data from a table for a matching value.
-| Parameters | Description |
+|
Parameters
|
Description
|
| ---------- | ----------- |
| Schema (required) | schema where the table you are searching lives |
| Table (required) | table you wish to search |
@@ -237,7 +251,7 @@ Joh* // using wild card
-
+
@@ -245,11 +259,11 @@ Joh* // using wild card
Returns data from a table for one or more matching conditions.
-| Parameters | Description |
+|
Parameters
|
Description
|
| ---------- | ----------- |
| 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. |
@@ -267,6 +281,8 @@ Returns data from a table for one or more matching conditions.
-
+
+
+
\ No newline at end of file
diff --git a/docs/docs/marketplace/plugins/lambda.md b/docs/docs/marketplace/plugins/lambda.md
index 8808fc09ce..411aaa306b 100644
--- a/docs/docs/marketplace/plugins/lambda.md
+++ b/docs/docs/marketplace/plugins/lambda.md
@@ -1,10 +1,12 @@
---
-id: aws-lambda-plugin
+id: marketplace-plugin-aws-lambda
title: AWS Lambda
---
ToolJet can connect to AWS Lambda to run serverless functions.
+
+
## Connection
To connect to AWS Lambda plugin, you need to provide the following details:
@@ -17,7 +19,11 @@ To connect to AWS Lambda plugin, you need to provide the following details:
-## Supported queries
+
+
+
+
+## Supported Queries
### Invoke Lambda Function
@@ -30,3 +36,4 @@ This query is used to invoke a Lambda function. The following parameters are req
+
\ No newline at end of file
diff --git a/docs/docs/marketplace/plugins/openai.md b/docs/docs/marketplace/plugins/openai.md
index f61f663860..986f20b675 100644
--- a/docs/docs/marketplace/plugins/openai.md
+++ b/docs/docs/marketplace/plugins/openai.md
@@ -3,13 +3,7 @@ id: marketplace-plugin-openai
title: OpenAI
---
-ToolJet can connect to OpenAI and utilize two main services: Completions and Chat. With OpenAI's Completions service, ToolJet can generate text automatically based on an initial prompt or context. The Chat service allows users to interact with a chatbot powered by OpenAI's language model. In addition, ToolJet can also leverage the GPT-3 Turbo service from OpenAI, which provides faster and more responsive completions.
-
-
-
-
-
-
+ToolJet can integrate with OpenAI to access two main services: Completions and Chat. The Completions service enables ToolJet to produce text from a given prompt or context. Meanwhile, the Chat service facilitates user interaction with an AI-driven chatbot based on OpenAI's language models.
:::note
Before following this guide, it is assumed that you have already completed the process of **[Using Marketplace plugins](/docs/marketplace/marketplace-overview#using-marketplace-plugins)**.
@@ -19,12 +13,10 @@ Before following this guide, it is assumed that you have already completed the p
For connecting to OpenAI, following credentials are required:
- **API key**: API key for OpenAI can be generated here: https://platform.openai.com/account/api-keys
-- **Oganization ID**: Find the Organization ID here: https://platform.openai.com/account/org-settings
+- **Organization ID**: Find the Organization ID here: https://platform.openai.com/account/org-settings
-
-
-
+
## Supported queries
@@ -33,14 +25,12 @@ For connecting to OpenAI, following credentials are required:
- **[Chat](#chat)**
-
-
-
+
### Completions
-The purpose of this query is to generate text completions that resemble human writing based on a given prompt.
+The purpose of this query is to generate text completions based on a given prompt.
#### Required parameters:
@@ -48,17 +38,11 @@ The purpose of this query is to generate text completions that resemble human wr
#### Optional parameters:
-- **Max Tokens**: This parameter that specifies the maximum number of tokens to generate in the text completion output. For example, if you set it to 50, then it will generate a text completion that contains up to 50 tokens.
-- **Temperature**: Temperature is used to control the creativity and randomness of the generated text. It ranges from 0 to 2, a higher value such as 0.8 will increase the randomness of the output, whereas a lower value such as 0.2 will make it more focused and deterministic.
-- **Stop sequence**: the "stop" parameter is used to specify when the API should stop generating text completions. This parameter is optional and can be used to customize the length and quality of the generated text.
+- **Max Tokens**: This parameter specifies the maximum number of tokens to generate in the text completion output. For example, if you set it to 50, then it will generate a text completion that contains up to 50 tokens.
+- **Temperature**: Temperature is used to control the creativity and randomness of the generated text. It ranges from 0 to 1, a higher value such as 0.8 will increase the randomness of the output, whereas a lower value such as 0.2 will make it more focused and deterministic.
+- **Stop sequence**: Stop sequence is used to specify when the API should stop generating text completions. This parameter is optional and can be used to customize the length and quality of the generated text.
- **Suffix**: The suffix that follows the inserted text completion.
-
-
-
-
-
-
### Chat
The function of this query is to examine the user's input and generate a suitable response that simulates human-like conversation.
@@ -69,13 +53,7 @@ The function of this query is to examine the user's input and generate a suitabl
#### Optional parameters:
-- **Max Tokens**: This parameter that specifies the maximum number of tokens to generate in the text completion output. For example, if you set it to 50, then it will generate a text completion that contains up to 50 tokens.
+- **Max Tokens**: This parameter specifies the maximum number of tokens to generate in the text completion output. For example, if you set it to 50, then it will generate a text completion that contains up to 50 tokens.
- **Temperature**: Temperature is used to control the creativity and randomness of the generated text. It ranges from 0 to 2, a higher value such as 0.8 will increase the randomness of the output, whereas a lower value such as 0.2 will make it more focused and deterministic.
-- **Stop sequence**: the "stop" parameter is used to specify when the API should stop generating text completions. This parameter is optional and can be used to customize the length and quality of the generated text.
-- **Suffix**: The suffix that follows the inserted text completion.
-
-
-
-
-
-
\ No newline at end of file
+- **Stop sequence**: This Stop sequence/parameter is used to specify when the API should stop generating text completions. This parameter is optional and can be used to customize the length and quality of the generated text.
+- **Suffix**: The suffix that follows the inserted text completion.
\ No newline at end of file
diff --git a/docs/docs/marketplace/plugins/plivo.md b/docs/docs/marketplace/plugins/plivo.md
index e600a514bb..973ed5ac95 100644
--- a/docs/docs/marketplace/plugins/plivo.md
+++ b/docs/docs/marketplace/plugins/plivo.md
@@ -3,13 +3,7 @@ id: marketplace-plugin-plivo
title: Plivo
---
-ToolJet can connect to Plivo account to send SMS.
-
-
-
-
-
-
+You can integrate your ToolJet application with Plivo for SMS functionality.
:::note
Before following this guide, it is assumed that you have already completed the process of **[Using Marketplace plugins](/docs/marketplace/marketplace-overview#using-marketplace-plugins)**.
@@ -17,9 +11,9 @@ Before following this guide, it is assumed that you have already completed the p
## Connection
-For connecting to plivo, following credentials are required:
-- **Auth Token**:
-- **Auth ID**:
+To use the Plivo plugin, you need the following credentials:
+- **Auth Token**
+- **Auth ID**
:::info Generating Auth Token/ID
- Navigate to the Plivo Console (https://www.plivo.com/)
@@ -29,24 +23,24 @@ For connecting to plivo, following credentials are required:
-
+
-## Supported queries
+## Supported Queries
### Send SMS
-The specified mobile number will receive the SMS upon execution of this query.
+You can use the Send SMS operation to send an SMS to a specified mobile number.
-#### Required parameters:
+#### Required Parameters:
-- **To Number**:
-- **From Number**:
-- **Body**:
+- **To Number**
+- **From Number**
+- **Body**
-
+
\ No newline at end of file
diff --git a/docs/docs/marketplace/plugins/pocketbase.md b/docs/docs/marketplace/plugins/pocketbase.md
new file mode 100644
index 0000000000..1e6e11e99d
--- /dev/null
+++ b/docs/docs/marketplace/plugins/pocketbase.md
@@ -0,0 +1,123 @@
+---
+id: marketplace-plugin-pocketbase
+title: PocketBase
+---
+
+# PocketBase
+
+ToolJet connects to your PocketBase database, allowing you to directly interact with your PocketBase backend from the convenience of your ToolJet application.
+
+:::info
+**NOTE:** **Before following this guide, it is assumed that you have already completed the process of [Using Marketplace plugins](/docs/marketplace/marketplace-overview#using-marketplace-plugins)**.
+:::
+
+## Connection
+
+- To connect to PocketBase, you need the Host URL, email, and password. The Host URL is the URL of your PocketBase instance. Email and password are the credentials of the user who has access to the PocketBase instance.
+
+- Establish a connection to PocketBase by either clicking `+Add new Data source` on the query panel or navigating to the [Data Sources](/docs/data-sources/overview/) page from the ToolJet dashboard.
+
+- Enter your Host URL, email and password into their designated fields.
+
+- Click **Test Connection** to validate your credentials. Click **Save** to store the data source.
+
+
+
+
+
+## Querying PocketBase
+
+- To perform queries on PocketBase in ToolJet, click the **+Add** button in the [query manager](/docs/app-builder/query-panel/#add) located at the bottom panel of the editor.
+- Select the previously configured PocketBase datasource.
+
+- In the Operation dropdown, select the desired operation type. ToolJet currently [supports](#supported-operations) five query types for PocketBase interactions.
+
+- Enter the collection name and other required parameters for the selected operation and click on **Run** button to run the query.
+
+
+
+
+
+
+
+
+
+:::info
+Query results can be transformed using transformations. Read our [transformations documentation](/docs/tutorial/transformations).
+:::
+
+## Supported Operations
+
+You can create query for PocketBase data source to perform several operations such as:
+ 1. **[List Records](#list-records)**
+ 2. **[Get Record](#get-record)**
+ 3. **[Add Record to Collection](#add-record-to-collection)**
+ 4. **[Update Record to Collection](#update-record-to-collection)**
+ 5. **[Delete Record](#delete-record)**
+
+### List Records
+
+ #### Required parameters:
+
+ - **Collection Name** - Collection name in the database.
+
+
+
+ #### Optional Parameters:
+
+ - **Limit** - Number of records to be fetched.
+ - **Sort** - Sort the records based on a sort rule. Add `-` / `+`(default) in front of the attribute for DESC / ASC order.
+ - **Where** - Filter the records based on a filter conditions.
+
+
+
+
+
+
+
+### Get Record
+
+ #### Required parameters:
+ - **Collection Name** - Collection name in the database.
+ - **Record ID** - ID of the record to be fetched.
+
+
+
+
+
+
+### Add Record to Collection
+
+ #### Required parameters:
+ - **Collection Name** - Collection name in the database.
+ - **Body** - Data to be added to the collection. It should be in valid JSON format.
+
+
+
+
+
+
+### Update Record to Collection
+
+ #### Required parameters:
+ - **Collection Name** - Collection name in the database.
+ - **Record ID** - ID of the record to be updated.
+ - **Body** - Data to be updated in the collection. It should be in valid JSON format.
+
+
+
+
+
+
+### Delete Record
+
+ #### Required parameters:
+ - **Collection Name** - Collection name in the database.
+ - **Record ID** - ID of the record to be deleted.
+
+
+
+
+
+
+
diff --git a/docs/docs/marketplace/plugins/supabase.md b/docs/docs/marketplace/plugins/supabase.md
new file mode 100644
index 0000000000..d48b6325da
--- /dev/null
+++ b/docs/docs/marketplace/plugins/supabase.md
@@ -0,0 +1,134 @@
+---
+id: marketplace-plugin-supabase
+title: Supabase
+---
+
+# Supabase
+
+ToolJet connects to your Supabase database, allowing you to directly interact with your Supabase back-end from within your ToolJet application.
+
+:::info
+**NOTE:** **Before following this guide, it is assumed that you have already completed the process of [Using Marketplace plugins](/docs/marketplace/marketplace-overview#using-marketplace-plugins)**.
+:::
+
+## Connection
+
+- To connect to Supabase you need to have the Project URL and Service Role Secret. You can find these credentials in your API Settings on the Supabase dashboard. Make sure to copy the Service Role Secret key. This key has the ability to bypass Row Level Security.
+
+
+
+
+
+- Establish a connection to Supabase by either clicking `+Add new Data source` on the query panel or navigating to the [Data Sources](/docs/data-sources/overview/) page from the ToolJet dashboard.
+
+- Enter your Project URL and Service Role Secret into their designated fields.
+
+- Click **Test Connection** to validate your credentials. Click **Save** to store the data source.
+
+
+
+
+
+## Querying Supabase
+
+- To perform queries on Supabase in ToolJet, click the **+Add** button in the [query manager](/docs/app-builder/query-panel/#add) located at the bottom panel of the editor.
+- Select the previously configured Supabase datasource.
+
+- In the Operation dropdown, select the desired operation type. ToolJet currently [supports](#supported-operations) five query types for Supabase interactions.
+
+- Enter the table name and other required parameters for the selected operation and click on **Run** button to run the query.
+
+
+
+
+
+
+
+
+
+:::info
+Query results can be transformed using transformations. Read our [transformations documentation](/docs/tutorial/transformations).
+:::
+
+## Supported Operations
+
+You can create query for Supabase data source to perform several operations such as:
+ 1. **[Get Rows](#get-rows)**
+ 2. **[Create Row(s)](#create-rows)**
+ 3. **[Update Row(s)](#update-rows)**
+ 4. **[Delete Row(s)](#delete-rows)**
+ 5. **[Count Rows](#count-rows)**
+
+### Get Rows
+
+ #### Required parameters:
+ - **Table** - Database table name.
+
+
+
+ #### Optional Parameters:
+ - **Where** - Filter rows based on a condition.
+ - **Sort** - Sort rows based on a column.
+ - **Limit** - Limit the number of rows returned.
+
+
+
+
+
+
+
+### Create Row(s)
+
+ #### Required parameters:
+ - **Table** - Database table name.
+ - **Body** - Data to be inserted into the table. It should be an array of object(s).
+
+
+
+
+
+
+
+### Update Row(s)
+
+ #### Required parameters:
+ - **Table** - Database table name.
+ - **Columns** - Column name and value to be updated.
+
+
+ #### Optional Parameters:
+ - **Where** - Update rows based on a condition. If not provided, all rows will be updated.
+
+
+
+
+
+
+### Delete Row(s)
+
+ #### Required parameters:
+ - **Table** - Database table name.
+ - **Where** - Delete rows based on a condition.
+
+
+
+
+
+
diff --git a/docs/docs/marketplace/plugins/textract.md b/docs/docs/marketplace/plugins/textract.md
index e3d616156b..32494d4141 100644
--- a/docs/docs/marketplace/plugins/textract.md
+++ b/docs/docs/marketplace/plugins/textract.md
@@ -3,38 +3,27 @@ id: marketplace-plugin-textract
title: Amazon Textract
---
-ToolJet can connect to Amazon Textract to extract text and data from scanned documents, forms, and tables. Textract can process documents of various formats, including PDF, JPEG/JPG, and PNG.
-
-
-
-
-
-
-
-:::note
-Before following this guide, it is recommended to check the following doc: **[Using Marketplace plugins](/docs/marketplace/marketplace-overview#using-marketplace-plugins)**.
-:::
-
+ToolJet integrates with Amazon Textract to facilitate the extraction of text and data from various document types, such as scanned documents, forms, and tables. Supported document formats include PDF, JPEG/JPG, and PNG.
## Connection
-For connecting to Amazon Textract, following credentials are required:
+To connect ToolJet with Amazon Textract, you will need the following credentials:
- **Access key**
- **Secret key**
- **Region**
:::caution
- Access to the S3 bucket is dependent on the permissions granted to the IAM role added for the connection.
-- Only single page documents are supported. if there is a multipage PDF you can convert it to single page using available online tools.
+- Only single page documents are supported. For multi-page PDFs, consider converting them to single-page formats with online tools.
:::
-
+
-## Supported queries
+## Supported Queries
- **[Analyze Document](#analyze-document)**
- **[Analyze document stored in AWS S3](#analyze-document-stored-in-aws-s3)**
@@ -45,39 +34,27 @@ The data returned by the queries is in **JSON** format and may include additiona
### Analyze Document
-This operation let's you to analyze the document by providing the document data in **base64** format.
+This operation lets you analyze the document using the document data in **base64** format.
-#### Required parameters:
+#### Required Parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
-- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
- 1. **Forms**: Extracted data and text from forms, including field keys and values.
- 2. **Tables**: Extracted table data, including column and row headers and cell contents.
- 3. **Queries**: Extracted data from databases and other structured data sources.
- 4. **Signature Detection**: Identification and extraction of signatures and signature blocks from documents.
+- **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.
+ 3. **Queries**: Extract data from databases and other structured sources.
+ 4. **Signature Detection**: Identify and extract signatures.
-
+### Analyze Document Stored in AWS S3
-
+This operation let's you analyze the document stored in your AWS S3 buckets by providing the **bucket** and **object** name.
-
+#### Required Parameters:
-### Analyze document stored in AWS S3
-
-This operation let's you to analyze the document stored in your AWS S3 buckets by providing the **bucket** and **object** name.
-
-#### Required parameters:
-
-- **Bucket**: Name of the S3 bucket that has the document stored
-- **Key**: Object name(document name) that needs to be extracted
-- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
- 1. **Forms**: Extracted data and text from forms, including field keys and values.
- 2. **Tables**: Extracted table data, including column and row headers and cell contents.
- 3. **Queries**: Extracted data from databases and other structured data sources.
- 4. **Signature Detection**: Identification and extraction of signatures and signature blocks from documents.
-
-
-
-
-
-
\ No newline at end of file
+- **Bucket**: Specify the S3 bucket containing the document.
+- **Key**: Provide the name of the document (object) to be analyzed.
+- **Data Output**: Select one or more type of data output of the document. Options include:
+ 1. **Forms**: Extract key and value pairs from forms.
+ 2. **Tables**: Extract data from tables, including headers and cell content.
+ 3. **Queries**: Extract data from databases and other structured sources.
+ 4. **Signature Detection**: Identify and extract signatures.
\ No newline at end of file
diff --git a/docs/docs/org-management/licensing/cloud.md b/docs/docs/org-management/licensing/cloud.md
new file mode 100644
index 0000000000..dcc1d67a0a
--- /dev/null
+++ b/docs/docs/org-management/licensing/cloud.md
@@ -0,0 +1,134 @@
+---
+id: tooljet-cloud
+title: ToolJet Cloud
+---
+
+
Available on: Paid plans
+
+## Choosing Your ToolJet Cloud Subscription
+
+This comprehensive guide aims to assist you in the process of configuring paid plans for ToolJet Cloud. If you are looking for self-hosted/on-premises plans, please navigate to **[Self Hosted](/docs/org-management/licensing/self-hosted)** . For ToolJet Cloud, we offer three different types of subscriptions tailored to your specific requirements. Let's explore how to get the most out of ToolJet's powerful features! 🚀
+
+Let's look into three types of subscriptions:
+
+1. **Free Trial**: This is a free subscription that grants access to premium features for a 14-day trial period.
+
+ - **New Users**: Select the 14-day trial option during the onboarding process.
+ - **Existing Users**: If eligible, a start trial banner will be visible on your ToolJet dashboard.
+
+2. **Business Subscription**: This is a paid monthly subscription that you can [upgrade](#a-chosen-plan-business-plan) to from within the ToolJet app.
+3. **Enterprise Subscription**: This is a paid subscription with customizable options. To obtain this subscription, you have to contact our **[sales](https://tooljet.com/slack)** team.
+
+---
+
+## Updating To Trial Subscription (For Existing Users)
+
+If you are an existing user and wish to update to trial subscriptions, follow these steps:
+
+1. Navigate to the desired Workspace.
+2. If you are not currently on a paid plan and have not yet used your free trial, you will see a **Start Trial** banner within the ToolJet dashboard. Click on the **Start free trial** button inside this banner to initiate your 14-day trial.
+
+
+
+
+
+
+
+:::caution Note
+Your trial subscription is active for 14 days. To upgrade to our Business subscription, simply click the Upgrade or Renew button or connect with our team on Slack for the Enterprise subscription. Premium features like OpenID SSO login and Audit logs will be restricted after the trial ends. However, you can still upgrade to any of our premium plans and continue to enjoy the full benefits of ToolJet.
+:::
+
+## Upgrading to a Paid Subscription
+
+When you've identified the ideal paid subscription to meet your needs, the next step is to complete the purchase process, ensuring seamless access to premium features.
+
+### A) Chosen Plan: Business Plan
+
+If you want to upgrade from the basic or trial subscription and you decide to proceed with the Business Plan, follow these steps:
+
+- Click the gear icon (⚙️) at the bottom of the left sidebar and select **Settings** from the dropdown.
+- In the Settings page, choose the **Subscription** tab.
+- The subscription tab displays a subscription overview card summarizing your current plan. Locate the **Upgrade** button in the lower left corner and click on it.
+- A modal window will appear. Enter the desired number of builder and end user seats, then click the **Upgrade** button within the modal.
+- You'll be directed to a payment gateway. Provide your payment details and finalize the purchase.
+- Upon successful payment, you'll return to the ToolJet subscription tab. A success message will display, and your subscription overview card will update shortly to reflect your new plan.
+
+
+
+
+
+
+
+### B) Chosen Plan: Enterprise Plan
+
+- If you've selected the enterprise plan, expect a response from our team within 24-48 hours for onboarding.
+- The remaining days of your enterprise edition period can be conveniently viewed on the dashboard.
+
+## Adding Users
+
+### A) Business Plan
+
+Your business plan subscription cost is based on the total number of builder and viewer seats allocated to your account. You may choose between annual or monthly billing cycles.
+
+**Seat Pricing**
+
+|
Seat Type
|
Annual Billing
|
Monthly Billing
|
+| :------------ | :---------- | :------------ |
+| Builder | $24 per month | $30 per month |
+| End User | $8 per month | $10 per month |
+
+**Pro-rated charges for added seats**
+
+You only pay for the portion of the service you actually utilize, rather than being charged a full amount for a seat you might only use for a few days. If you add extra builder or viewer seats mid-cycle, charges are calculated proportionally. The cost is adjusted for the remaining days within your current billing period (monthly or annual).
+
+Example: If you add a builder seat halfway through your monthly billing cycle, you will be charged $15 for the remaining portion of that month. Starting with your next billing cycle, you will be charged the full monthly rate ($30) for the added builder seat.
+
+### 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.
+
+## 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.
+
+
+
+
+
+
+
+### 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?
+
+If your enterprise edition subscription is nearing expiration, please click the **Upgrade** button or contact us via email at hello@tooljet.com to extend your subscription.
+
+
+
+
+
+
+
+### 2) What is the duration of my subscription?
+
+If you have an active subscription, you can find its validity period in the Settings. Generally, the duration of your subscription varies based on the type:
+
+- Trial subscriptions are valid for 14 days.
+- Business subscriptions are charged monthly with no validity or expiration date.
+- Enterprise subscriptions can be customized to suit your needs.
+
+### 3) What happens if my subscription expires?
+
+If your business or enterprise subscription expires, your instance will revert to operating as a free plan. While you can still create unlimited apps, workspaces, and add users, premium features such as OpenID and Audit logs will no longer be accessible. For further information, please refer to the relevant **[plans](https://www.tooljet.com/pricing)**.
diff --git a/docs/docs/org-management/licensing/self-hosted.md b/docs/docs/org-management/licensing/self-hosted.md
new file mode 100644
index 0000000000..cf19d3b556
--- /dev/null
+++ b/docs/docs/org-management/licensing/self-hosted.md
@@ -0,0 +1,124 @@
+---
+id: self-hosted
+title: Self-Hosted
+---
+
+
Available on: Paid plans
+
+## Setting up for Licensing
+
+This comprehensive guide aims to assist you in the process of configuring paid plans on your self-hosted platform. We offer three different licenses tailored to your specific requirements. Let's explore how to get the most out of ToolJet's powerful features! 🚀
+
+Let's look into three types of licenses:
+
+1. **Trial License**: This is a free license that grants access to premium features for a 14-day trial period.
+ - **New Users**: Choose the 14-day trial during onboarding.
+ - **Existing Users**: Request a trial license key from our sales or support team.
+2. **Business License**: This is a paid license that you can purchase **[directly](https://www.tooljet.com/pricing)**.
+3. **Enterprise License**: This is a paid license with customizable options. To obtain this license, you have to contact our sales team.
+
+
+
+
+## Updating Your Trial License Key (For Existing Users)
+
+If you are an existing user and wish to update your trial license key, follow these steps:
+
+1. Set up the instance and log in as a **[Super Admin](/docs/Enterprise/superadmin)**.
+2. Navigate to the Settings page.
+3. In the license key tab, make the necessary updates to the provided license key.
+4. Within the license tab of the Settings page, you can access the limit tab, which displays the current status of available super admins, builders, and end users.
+
+:::caution Note
+The trial license key will be valid for 14 days. To fully enjoy ToolJet, we recommend upgrading to premium plans within this period. If you wish to upgrade from the trial to the business or enterprise edition, you can click the **Upgrade or Renew** button or contact our team via **[Slack](https://tooljet.com/slack)**. Upon expiration, access to premium features like OpenID SSO login and Audit logs will be restricted, ensuring no data loss occurs. However, don't worry! You can still upgrade to any of our premium plans and enjoy the benefits of ToolJet.
+:::
+
+
+
+
+
+
+## Purchasing a Paid License
+
+When you've identified the ideal paid license to meet your needs, the next step is to complete the purchase process, ensuring seamless access to premium features.
+
+### A) Chosen Plan: Business Plan
+
+If you decide to proceed with the Business Plan and have made the purchase, please wait for our team to get back to you within 24-48 hours to get you onboarded. Once you receive the business license key, follow the steps to [update the license key](#updating-license-key).
+
+:::warning Important
+The business license key will be valid for 3 months only. You can renew it to continue using ToolJet to its fullest potential.
+:::
+
+
+### B) Chosen Plan: Enterprise Plan
+
+- If you've selected the Enterprise Plan, expect a response from our team within 24-48 hours for onboarding.
+- To update the enterprise license key, follow the steps outlined previously.
+- The remaining days of your enterprise edition period can be conveniently viewed on the dashboard.
+
+
+
+
+
+## Updating License Key
+
+**To update the license key, follow these steps:**
+1. Log in as a **[Super Admin](/docs/Enterprise/superadmin)**, ensuring that you are on the correct instance URL.
+2. Go to the Settings page.
+3. In the license key tab, update the provided license key.
+4. Within the license tab of the Settings page, you can access the limit tab, which provides details about available super admins, builders, and end users.
+
+:::info Note
+As a super admin, you can conveniently view the remaining days of your enterprise edition period on the dashboard. (Refer to screenshots below)
+:::
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Frequently Asked Questions (FAQs)
+
+### 1) How can I upgrade or renew my license?
+If your business or enterprise edition license key is nearing expiration, please click the **Upgrade** button or contact us via email at hello@tooljet.com to obtain an extended license key. If you intend to increase the number of users, please reach out to us via **[Slack](https://tooljet.com/slack)** or review our pricing page at https://www.tooljet.com/pricing before making a request.
+
+
+
+
+
+
+
+Ref: Screenshot addressing upgrade/renew CTAs. Note that there are a couple of other pages which will display banners or CTAs, from where you can upgrade/renew.
+
+### 2) What is the duration of my license's validity?
+If you have an active license, you can find its validity period in the Settings. Generally, the duration of your license varies based on the type:
+- Trial licenses are valid for 14 days.
+- Business licenses are valid for 3 months.
+- Enterprise licenses can be customized to suit your needs.
+
+### 3) What happens if my license expires?
+If your business or enterprise license key expires, your instance will revert to operating as a free plan. While you can still create unlimited apps, workspaces, and add users, premium features such as OpenID and Audit logs will no longer be accessible. For further information, please refer to the relevant **[plans](https://www.tooljet.com/pricing)**.
+
+### 4) How can I add more users?
+
+There are different methods to do this:
+
+**a)** You can renew directly using the **[business plan](https://www.tooljet.com/pricing)**. (Note: Please do check the list of premium features available with this plan)
+
+**b)** 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.
+
+***Lastly, please keep in mind that your license key is private and strictly prohibited from being shared with any third parties.***
+
+
\ No newline at end of file
diff --git a/docs/docs/org-management/workspaces/workspace-variables.md b/docs/docs/org-management/workspaces/workspace-variables.md
index d0d5dd3fc6..ecdb832fbe 100644
--- a/docs/docs/org-management/workspaces/workspace-variables.md
+++ b/docs/docs/org-management/workspaces/workspace-variables.md
@@ -15,7 +15,9 @@ Workspace Variables are the variables with some value(usually tokens/secret keys
Server variables will not resolve if you use bracket notation. This is because bracket notation is not supported on the server-side, where server variables are resolved. If you use bracket notation in a query that is executed on the server, the query will fail. To avoid this, use dot notation to resolve workspace variables in queries.
:::
-## How can we add these variables to an Workspace?
+
+
+## How Can We Add these Variables to a Workspace?
Suppose there is an `API key` or a value that you want to use in the queries or widgets in the multiple apps of the same Workspace then the Workspace admin or the user with permissions can add an environment variable.
@@ -28,10 +30,14 @@ Suppose there is an `API key` or a value that you want to use in the queries or
-
+
+
+
+
+
### Types of variables
- **Client**: The client variable can be utilized in components, queries, and global datasources.
@@ -44,15 +50,23 @@ Variable Type cannot be changed once it has been created.
-
+
+
+
+
+
### Encryption
This feature enables us to add a client variable with and without `encryption`. The server variables are always encrypted by default.
-### Using variable in an app
+
+
+
+
+### Using Variable in an App
Let's use the variable that we created [here](/docs/tutorial/workspace-variables/#adding-the-environment-variable). If you have used ToolJet before, then you know that for getting the values from any variable we use JS notation i.e. `{{}}` but for using the Workspace variables we have different opening and closing notation `%% %%`. The environment variables will not work inside js code `{{}}`.
@@ -62,7 +76,7 @@ So, the syntax for using the variable that we created before will be `%%client.p
-
+
@@ -70,7 +84,7 @@ So, the syntax for using the variable that we created before will be `%%client.p
-
+
@@ -81,3 +95,6 @@ Starting from ToolJet version `2.10.0` and onwards, it is possible to utilize Se
+
+
+
\ No newline at end of file
diff --git a/docs/docs/org-management/workspaces/workspace_constants.md b/docs/docs/org-management/workspaces/workspace_constants.md
index e17f890eb4..64182128e1 100644
--- a/docs/docs/org-management/workspaces/workspace_constants.md
+++ b/docs/docs/org-management/workspaces/workspace_constants.md
@@ -3,44 +3,71 @@ id: workspace_constants
title: Workspace Constants
---
-Workspace constants are predefined values(usually tokens/secret keys/API keys) that can be used across your application to maintain consistency and facilitate easy updates. They allow you to store important data or configurations that should remain unchanged during the application's runtime. This doc will guide you through the usage and management of workspace constants within your workspaces.
+Workspace constants are predefined values(usually tokens/secret keys/API keys) that can be used across your application to maintain consistency and facilitate easy updates. They allow you to store important data or configurations that should remain unchanged during the application's runtime. This doc will guide you through the usage and management of workspace constants within your workspaces.
:::danger
Workspace constants are handled server-side and are not intended for use in query transformations or RunJS and RunPy queries. For these operations, employ variables and page variables instead.
:::
+
+
## Environment-Specific Configurations
Users can define environment-specific configurations by setting different values for constants across environments. It is useful for managing sensitive information such as API keys, database credentials, or external service endpoints. For Community edition only production environment is available and for Cloud/EE we will have multi environments (development, staging, production).
+
+
+
+
## Server-Side Resolution
-Workspace constants are designed to be resolved on the server side only. This means that when you make network calls, the payload sent will not include the actual values of the constants. Instead, the server will resolve the constants and use their actual values while processing the requests. This ensures that the constants remain secure and are not exposed to the client-side.
+Workspace constants are designed to be resolved on the server side only. This means that when you make network calls, the payload sent will not include the actual values of the constants. Instead, the server will resolve the constants and use their actual values while processing the requests. This ensures that the constants remain secure and are not exposed to the client-side.
+Workspace constants are encrypted before being stored in the database, providing an additional layer of security for sensitive data like API keys, tokens, and other confidential values.
+:::info
+Workspace constants encryption was introduced in ToolJet version 2.34.1. If you are upgrading from a version prior to 2.34.1, all your existing workspace constants will be automatically encrypted. You can continue utilizing the workspace constants as before, while benefiting from the added security provided by the encryption feature.
+:::
+
+
+
+
## Access Control
Creating, updating, and deleting constants are exclusive privileges granted to **Admins** (workspaces). Only users with administrative rights can perform these operations. Workspace constants are specific to the workspace where they are created and cannot be utilized in other workspaces.
-## Usage in App Builder and Global Datasource connection
+
+
+
+
+## Usage in App Builder and Global Datasource Connection
All users with edit app permissions have access to consume and utilize constants in the app builder and global datasource connection forms. This enables you to use the same constant values across different components of your application, ensuring consistency and reducing duplication of effort.
+
+
+
+
## Syntax
To use a workspace constant, you need to follow the syntax: **`{{constants.constant_name}}`**. For example, if you have a constant named "psql_host", you can access its value by using `{{constants.psql_host}}`.
+
+
+
+
## Creating Workspace Constants
To create workspace constants, follow these steps:
+
- Access the ToolJet Dashboard and navigate to Workspace Settings.
- Select the Workspace Constants tab.
- Click on the **Create New Constant** button.
-- A drawer will appear; enter the desired name and value for the constant.
+- A drawer will appear. Enter the desired name and value for the constant.
- Click the **Add Constant** button to save the constant.
-
+
@@ -48,39 +75,54 @@ To create workspace constants, follow these steps:
-
+
+
+
+
+
## Using Workspace Constants
Workspace constants can be used in the app builder and the global datasource connection forms.
+
+
+
+
### Using Workspace Constants in Global Datasource Connection
-You can use workspace constants in the **[global datasource connection](/docs/data-sources/overview#connecting-global-datasources)** form to store sensitive information like API keys, tokens, etc. This will ensure that the data remains secure and is not exposed to the client-side. You can use the syntax `{{constants.constant_name}}` to access the value of the constant.
+You can use workspace constants in the **[global datasource connection](/docs/data-sources/overview#connecting-global-datasources)** form to store sensitive information like API keys, tokens, etc. This will ensure that the data remains secure and is not exposed to the client-side. You can use the syntax `{{constants.constant_name}}` to access the value of the constant.
-
+
+
+
+
+
### Using Workspace Constants in App Builder
Inside the App Builder, you will find the **[Inspector](/docs/app-builder/left-sidebar#inspector)** on the left sidebar. The inspector will have a Constants section which will be updated dynamically to display all the available constant values.
-
+
As you build the application, you can easily refer to the constants and incorporate them into different elements of your app.
+
-With workspace constants, you can streamline your application's configuration and maintain a consistent experience for your users. By leveraging this feature, you can ensure that vital data remains secure while making it accessible for authorized users throughout the application building process.
\ No newline at end of file
+With workspace constants, you can streamline your application's configuration and maintain a consistent experience for your users. By leveraging this feature, you can ensure that vital data remains secure while making it accessible for authorized users throughout the application building process.
+
+
diff --git a/docs/docs/org-management/workspaces/workspace_overview.md b/docs/docs/org-management/workspaces/workspace_overview.md
index 6b2eb0a91e..074cb28ee4 100644
--- a/docs/docs/org-management/workspaces/workspace_overview.md
+++ b/docs/docs/org-management/workspaces/workspace_overview.md
@@ -9,18 +9,24 @@ The user who creates the workspace will automatically be assigned as its adminis
-
+
+
+
## Hierarchy
-
+
+
+
+
+
## Permissions
:::tip
@@ -29,13 +35,19 @@ 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.
- If a user is logged into ToolJet and switches to a workspace that only uses Single Sign-On (SSO), the user will be sent to a login page to select an SSO option.
- Users can directly login to a workspace using workspace login URL. Administrators can view the URL in the Workspace Settings under **SSO -> General Settings -> Login URL**.
+
+
+
+
### Disabling Workspace Creation (Super Admin)
- Only **[Super Admins](/docs/Enterprise/superadmin#restrict-creation-of-personal-workspace-of-users)** can disable the option for creating personal workspaces for a user.
- If the option to make personal workspaces is turned off for a user, the user won't be able to create new workspaces.
+
+
\ No newline at end of file
diff --git a/docs/docs/release-management/multi-env.md b/docs/docs/release-management/multi-env.md
index 965e36e56f..2739aac27c 100644
--- a/docs/docs/release-management/multi-env.md
+++ b/docs/docs/release-management/multi-env.md
@@ -9,10 +9,12 @@ ToolJet's **multi-environment** helps in streamlining workflows, thereby minimiz
-
+
+
+
### Environments
ToolJet provides three default **environments** that serve different purposes in the application development lifecycle:
@@ -27,7 +29,11 @@ ToolJet provides three default **environments** that serve different purposes in
The default environments cannot be removed or renamed.
:::
-### Configuring connections for environments
+
+
+
+
+### Configuring Connections for Environments
To configure connection settings for different environments, follow these steps:
@@ -38,10 +44,14 @@ To configure connection settings for different environments, follow these steps:
-
+
+
+
+
+
### Using Environments
@@ -54,7 +64,7 @@ To configure connection settings for different environments, follow these steps:
-
+
@@ -110,3 +120,6 @@ To configure connection settings for different environments, follow these steps:
:::
ToolJet's app builder remembers your last editing state. When you reopen an app, it resumes from where you left off, ensuring a seamless experience. For instance, if you edited an app in the staging environment, it will open in the staging environment when you return.
+
+
+
\ No newline at end of file
diff --git a/docs/docs/security.md b/docs/docs/security.md
index 27790381a6..01a8afde8b 100644
--- a/docs/docs/security.md
+++ b/docs/docs/security.md
@@ -6,18 +6,32 @@ slug: /security
# Security
+
+
## Uncompromised Data Security with SOC 2 Compliance
With SOC 2 compliance, Tooljet ensures the highest level of data security. The adherence to SOC 2 standards mirrors the rigorous data protection measures in place, covering everything from encryption to robust access controls. It also guarantees a consistent level of service availability and process integrity, instilling confidence in our customers and stakeholders about the safe handling of their sensitive information.
-## Data storage
+
+
+
+
+## Data Storage
ToolJet does not store data returned from your data sources. ToolJet server acts as a proxy and passes the data as it is to the ToolJet client. The credentials for the data sources are handled by the server and never exposed to the client. For example, if you are making an API request, the query is run from the server and not from the frontend.
-## Datasource credentials
+
+
+
+
+## Datasource Credentials
All the datasource credentials are securely encrypted using `aes-256-gcm`. The credentials are never exposed to the frontend ( ToolJet client ).
-## Other security features
+
+
+
+
+## Other Security Features
- **TLS**: If you are using ToolJet cloud, all connections are encrypted using TLS. We also have documentation for setting up TLS for self-hosted installations of ToolJet.
- **Audit logs**: Audit logs are available on the enterprise edition of ToolJet. Every user action is logged along with the IP addresses and user information.
- **Request logging**: All the requests to server are logged. If self-hosted, you can easily extend ToolJet to use your preferred logging service. ToolJet comes with built-in Sentry integration.
@@ -25,3 +39,5 @@ All the datasource credentials are securely encrypted using `aes-256-gcm`. The c
- **Backups**: ToolJet cloud is hosted on AWS using EKS with autoscaling and regular backups.
If you notice a security vulnerability, please let the team know by sending an email to `security@tooljet.com`.
+
+
\ No newline at end of file
diff --git a/docs/docs/setup/client.md b/docs/docs/setup/client.md
index a539a10102..1cb71d9b25 100644
--- a/docs/docs/setup/client.md
+++ b/docs/docs/setup/client.md
@@ -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.
diff --git a/docs/docs/setup/env-vars.md b/docs/docs/setup/env-vars.md
index 030d910da1..d533105eed 100644
--- a/docs/docs/setup/env-vars.md
+++ b/docs/docs/setup/env-vars.md
@@ -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.
@@ -326,3 +326,29 @@ By default, only embedding of public apps is permitted. By setting this variable
:::caution
The option is only available starting from ToolJet Enterprise Edition `2.8.0` or higher, and `2.10.0` for the Community edition and cloud version.
:::
+
+## Configuring the Default Language
+To change the default language, set the LANGUAGE variable to your desired language code.
+
+| Variable | Description |
+| --------------- | ------------------------------------- |
+| LANGUAGE | `LANGUAGE_CODE` |
+
+Available Languages with their codes and native names:
+
+| Language | Code | Native Name |
+|-------------|------|-------------------|
+| English | en | English |
+| French | fr | Français |
+| Spanish | es | Español |
+| Italian | it | Italiano |
+| Indonesian | id | Bahasa Indonesia |
+| Ukrainian | uk | Українська |
+| Russian | ru | Русский |
+| German | de | Deutsch |
+
+For instance, to set the language to French, you can set the LANGUAGE variable to `fr`.
+
+:::info
+The option to set a default language is not available on cloud version of ToolJet.
+:::
diff --git a/docs/docs/setup/kubernetes-aks.md b/docs/docs/setup/kubernetes-aks.md
index b01d6ee7d5..fc69f4d9b9 100644
--- a/docs/docs/setup/kubernetes-aks.md
+++ b/docs/docs/setup/kubernetes-aks.md
@@ -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
```
diff --git a/docs/docs/setup/openshift.md b/docs/docs/setup/openshift.md
index ac6815e79e..d533267330 100644
--- a/docs/docs/setup/openshift.md
+++ b/docs/docs/setup/openshift.md
@@ -55,7 +55,7 @@ If there are self signed HTTPS endpoints that Tooljet needs to connect to, pleas
-
+
diff --git a/docs/docs/setup/try-tooljet.md b/docs/docs/setup/try-tooljet.md
index ff2bc44904..d7f5e235c7 100644
--- a/docs/docs/setup/try-tooljet.md
+++ b/docs/docs/setup/try-tooljet.md
@@ -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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/docs/tooljet-concepts/data-sources.md b/docs/docs/tooljet-concepts/data-sources.md
index e9122353d6..78f94b44cf 100644
--- a/docs/docs/tooljet-concepts/data-sources.md
+++ b/docs/docs/tooljet-concepts/data-sources.md
@@ -12,7 +12,7 @@ Data sources are pivotal as they enable us to fetch and send data to and from di
Apart from its built-in database, ToolJet supports a range of external data sources which can be broadly categorized into databases, external APIs, and services. To manage these data sources, ToolJet provides a data source manager that can be opened by clicking on the **Data Sources** button located on the left-sidebar of the App-Builder.
-
+
@@ -24,7 +24,7 @@ Apart from its built-in database, ToolJet supports a range of external data sour
Adding a new data source is as easy as filling out a form; users can click on the Data Sources button in the left-sidebar, navigate to the required data source, click on the corresponding **Add** button and enter the credentials.
-
+
diff --git a/docs/docs/tooljet-concepts/workspace-constants.md b/docs/docs/tooljet-concepts/workspace-constants.md
index aa245d9791..44627ad7d9 100644
--- a/docs/docs/tooljet-concepts/workspace-constants.md
+++ b/docs/docs/tooljet-concepts/workspace-constants.md
@@ -11,7 +11,7 @@ Workspace Constants in ToolJet help in maintaining consistency and security acro
One of the key functionalities of Workspace Constants is allowing environment-specific configurations. This is particularly useful for managing sensitive data such as API keys and database credentials securely. The Constants ensure that such critical information is effectively managed across different environments like development, staging, and production. Moreover, to enhance security, Workspace Constants are resolved server-side. This means the actual values of the constants are not sent with network payloads; instead, the server resolves these values, thereby keeping them secure from client-side exposure.
-
+
diff --git a/docs/docs/tooljet_database.md b/docs/docs/tooljet_database.md
index 0b3e3adcac..d513bf5692 100644
--- a/docs/docs/tooljet_database.md
+++ b/docs/docs/tooljet_database.md
@@ -21,7 +21,7 @@ This feature is only enabled if [`ENABLE_TOOLJET_DB`](/docs/setup/env-vars#enabl
-### PostgREST server
+### PostgREST Server
PostgREST is a standalone web server that turns your PostgreSQL database directly into queryable RESTful APIs which is utilized for Tooljet Database. This server only talks with ToolJet server and therefore does not have to be publicly exposed.
@@ -31,7 +31,7 @@ If you have openssl installed, you can run the following command `openssl rand -
If this parameter is not specified then PostgREST refuses authentication requests.
:::
-| variable | description |
+|
Variable
|
Description
|
| ------------------ | ----------------------------------------------- |
| PGRST_JWT_SECRET | JWT token client provided for authentication |
| PGRST_DB_URI | database connection string for tooljet database |
@@ -46,7 +46,7 @@ Please make sure that DB_URI is given in the format `postgres://[USERNAME]:[PASS
#### Additional ToolJet server configuration
-| variable | description |
+|
Variable
|
Description
|
| ------------------ | -------------------------------------------- |
| ENABLE_TOOLJET_DB | `true` or `false` |
| TOOLJET_DB | Default value is `tooljet_db` |
@@ -67,6 +67,8 @@ Incase you want to trigger it manually, use the command `npm run db:create` on T
+
+
## Features
ToolJet database allows you to:
@@ -76,6 +78,8 @@ ToolJet database allows you to:
- **[Quickly build applications and write queries](#querying-data-from-the-tooljet-database)** to interact with the ToolJet Database, just like any other datasource but without any setup.
- **[Export schema](#export-schema)** from the ToolJet Database to a JSON file.
+
+
## Accessing ToolJet Database
@@ -90,6 +94,8 @@ The ToolJet Database is available on: **[ToolJet Cloud](https://tooljet.com)**,
+
+
## Database Editor
You can manage the ToolJet Database directly from the Database Editor. ToolJet Database organizes the data into **tables** that can have different structures. All the tables will be listed lexicographically on the left, click on any of the table to view the table data.
@@ -104,6 +110,10 @@ The sidebar on the left can also be collapsed to give more space to the database
+
+
+
+
### Create New Table
For creating a new table in ToolJet Database, click on the **Create New Table** button on the top left corner of the Database editor.
@@ -122,13 +132,17 @@ When the **Create New Table** button is clicked, a drawer opens up from the righ
- Enter a **Table name**
- Add **Columns** (`id` column with `serial` data type is automatically created as the **primary key** of the table)
-### Supported data types
+
-| Data type | Description | Example |
+
+
+### Supported Data Types
+
+|
Data Type
|
Description
|
Example
|
|:--------- |:----------- |:------- |
| **serial** | **serial** is used to generate a sequence of integers which are often used as the Primary key of a table. Whenever a new table is created in the ToolJet database, a column **id** with the serial data type is automatically created as the **primary key** of the table. | Numbers starting from 1, 2, 3, 4, 5, etc. |
| **varchar** | **varchar** data type is used to store characters of indefinite length | Any string value |
-| **int** | **Int** is a numeric data type used to store whole numbers, that is, numbers without fractional components. | Numbers ranging from -2147483648 to 2147483647 |
+| **int** | **int** is a numeric data type used to store whole numbers, that is, numbers without fractional components. | Numbers ranging from -2147483648 to 2147483647 |
| **bigint** | **bigint** is a numeric data type that is used to store whole numbers, that is, numbers without fractional components. | Numbers ranging from -9223372036854775808 to 9223372036854775807 |
| **float** | **float** is also a numeric data type that is used to store inexact, variable-precision values. | Any floating-point number, ex: 3.14 |
| **boolean** | **boolean** data type can hold true, false, and null values. | `true` or `false` |
@@ -137,6 +151,10 @@ When the **Create New Table** button is clicked, a drawer opens up from the righ
+
+
+
+
### Search Table
Open the Search bar by clicking on the **Search** button and search for a table in the ToolJet database by entering the table name.
@@ -145,6 +163,10 @@ Open the Search bar by clicking on the **Search** button and search for a table
+
+
+
+
### Rename Table
To rename a table, click on the kebab menu icon on the right of the table name and then select the **Rename table** option. A drawer will open from the right from where you can edit the table name.
@@ -153,7 +175,11 @@ To rename a table, click on the kebab menu icon on the right of the table name a
-### Add new column
+
+
+
+
+### Add New Column
To add a new column on a table, either click on the kebab menu icon on the right of the table name and then select the **Add new column** option or click on the **+** button present at the end of the column header.
@@ -165,14 +191,18 @@ A drawer from the right will open up where you can enter the details for the new
- **Column Name**: Enter a unique name for the new column, serving as its key identifier.
- **Data Type**: Choose the appropriate data type for the column from the [available options](#supported-data-types).
-- **Default Value**: Specify any default value that should be assigned to the column. Optionally, users can leave this field blank. It is mandatory to provide a value when NOT NULL is enabled for a column.
-- **NULL/NOT NULL**: Use the switch to determine whether the column should allow NULL values or not. By default, `NULL` is enabled for a column which means that the specified column may have no value (NULL) for certain rows. If you toggle the switch and enable the `NOT NULL` option, column is configured to disallow NULL values.
+- **Default Value**: Specify any default value that should be assigned to the column. Optionally, users can leave this field blank. When a table contains rows and NOT NULL is applied to one of its existing or new columns, specifying a default value becomes compulsory.
+- **NULL/NOT NULL**: Use the switch to determine whether the column should allow NULL values or not. By default, the toggle is off, allowing the column to have blank or empty entries. If you turn it on, the column is set to NOT NULL, meaning it can't have blank or empty entries anymore. But, for text columns, even with NOT NULL on, they can still have empty text (like an empty line) but not completely blank entries
-### Export schema
+
+
+
+
+### Export Schema
The export schema option allows you to download the selected table schema in a JSON file. This does not export the table data.
@@ -184,7 +214,11 @@ To export the table schema, click on the three vertical dots icon on the right o
-### Delete table
+
+
+
+
+### Delete Table
To delete a table, click on the three vertical dots icon on the right of the table name and then click on the **Delete** option. A confirmation modal will appear, click on the **Delete** button to delete the table.
@@ -192,7 +226,11 @@ To delete a table, click on the three vertical dots icon on the right of the tab
-### Edit column
+
+
+
+
+### Edit Column
To edit a column, click on the kebab menu on the column name and select the option to **Edit column**. When you edit the column, the data type cannot be changed.
@@ -200,7 +238,11 @@ To edit a column, click on the kebab menu on the column name and select the opti
-### Delete column
+
+
+
+
+### Delete Column
To delete a column, click on the kebab menu on the column name and select the option to **Delete**.
@@ -208,7 +250,11 @@ To delete a column, click on the kebab menu on the column name and select the op
-### Add new data
+
+
+
+
+### Add New Data
The Add new data button on the top of the table editor allows you to add data to the table. You can either **[Add new row](#add-new-row)** or **[Bulk upload data](#bulk-upload-data)** to add the data to the table.
@@ -216,7 +262,11 @@ The Add new data button on the top of the table editor allows you to add data to
-### Add new row
+
+
+
+
+### Add New Row
To add a new row on a table, either click on the `Add new data` button on top and then select the **Add new row** option or click on the **+** button present at the bottom left.
@@ -230,8 +280,11 @@ A drawer from the right will open up where the values for the new row can be pro
+
-### Edit row
+
+
+### Edit Row
To edit a row, hover on the row that you want to edit and the expand icon will appear next to the checkbox of that row. Click on the Expand icon to open the drawer and edit the row.
@@ -239,7 +292,11 @@ To edit a row, hover on the row that you want to edit and the expand icon will a
-### Edit a cell
+
+
+
+
+### Edit a Cell
1. **Double-Click**: Double-click on the cell you want to edit.
2. **Enter Value**: Input the new value.
@@ -249,7 +306,11 @@ To edit a row, hover on the row that you want to edit and the expand icon will a
-### Bulk upload data
+
+
+
+
+### Bulk Upload Data
You can bulk upload data to the ToolJet database by clicking on the **Bulk upload data** button on the top of the database editor. On clicking the button, a drawer will open from the right from where you can upload a **CSV** file. This file is used to upsert records onto the table. If data for id column is missing it will insert new record with the row data else if id is present it will update the corresponding record with the corresponding row data.
@@ -269,7 +330,11 @@ Once the CSV file is ready, click on the file picker to select the file or drag
-### Delete records
+
+
+
+
+### Delete Records
To delete one or many records/rows, select on the checkbox at the right of the record or records that you want to delete. As soon as you select a single record, the button to delete record will appear on the top, click on the **Delete record** button to delete the selected records.
@@ -277,6 +342,10 @@ To delete one or many records/rows, select on the checkbox at the right of the r
+
+
+
+
### Filter
You can add as many filter as you want into the table by clicking on the **Filter** button present on the top of the database editor.
@@ -306,6 +375,10 @@ You can add as many filter as you want into the table by clicking on the **Filte
+
+
+
+
### Sort
To sort the table data, click on the **Sort** button on top, select a **column** from the dropdown, and then choose an order **ascending** or **descending**.
@@ -314,7 +387,11 @@ To sort the table data, click on the **Sort** button on top, select a **column**
-## Querying data from the ToolJet database
+
+
+
+
+## Querying Data from the ToolJet Database
Querying ToolJet database is as easy as querying any other datasource on ToolJet.
@@ -337,41 +414,63 @@ Querying ToolJet database is as easy as querying any other datasource on ToolJet
- When a new query is created, by default the query name is set to `tooljetdbN` (where N is a number) - you can rename the query by click on the query name or from the left sidebar of query panel.
:::
-### Available operations
+
-### List rows
+
+
+### Available Operations
+
+
+
+### List Rows
This operation returns all the records from the table
-#### Optional parameters
+#### Optional Parameters
- **Filter**: Add a condition by choosing a column, an operation, and the value for filtering the records.
- **Sort**: Sort the query response by choosing a column and the order (ascending or descending).
- **Limit**: Limit the number of records to be returned by entering a number.
+
+
+
+
### Create row
This operation creates a new record in the table. You can create a single record or multiple records at once.
-#### Required parameters
+#### Required Parameters
- **Columns**: Choose the columns for which you want to add values for the new record and enter the values for the selected columns. You can also add a new column by clicking on the **+Add column** button.
-### Update row
+
+
+
+
+### Update Row
This operation updates a record in the table. You can update a single record or multiple records at once.
-#### Required parameter
+#### Required Parameter
- **Filter**: Add a condition by choosing a column, an operation, and the value for updating a particular record.
- **Columns**: Choose the columns for which you want to update the values for the selected record and enter the values for the selected columns.
-### Delete row
+
+
+
+
+### Delete Row
This operation deletes a record in the table. You can delete a single record or multiple records at once.
-#### Required parameters
+#### Required Parameters
- **Filter**: Add a condition by choosing a column, an operation, and the value for deleting a particular record.
- **Limit**: Limit the number of records to be deleted by entering a number.
-### Join tables
+
+
+
+
+### Join Tables
You can join two or more tables in the ToolJet database by using the **Join** operation.
-#### Required parameters
+#### Required Parameters
- **From**: In the **From** section, there are the following parameters:
- **Selected Table**: Select the table from which you want to join the other table.
- **Type of Join**: Select the type of join you want to perform. The available options are: `Inner Join`, `Left Join`, `Right Join`, and `Full Outer Join`.
@@ -400,3 +499,7 @@ You can join two or more tables in the ToolJet database by using the **Join** op
:::info
If you have any other questions or feedback about **ToolJet Database**, please reach us out at hello@tooljet.com or join our **[Slack Community](https://www.tooljet.com/slack)**
:::
+
+
+
+
\ No newline at end of file
diff --git a/docs/docs/tooljetcli.md b/docs/docs/tooljetcli.md
index b7b15e2a08..295d6cbf60 100644
--- a/docs/docs/tooljetcli.md
+++ b/docs/docs/tooljetcli.md
@@ -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
diff --git a/docs/docs/tracking.md b/docs/docs/tracking.md
index 6033e14f19..09cc7aa612 100644
--- a/docs/docs/tracking.md
+++ b/docs/docs/tracking.md
@@ -10,14 +10,22 @@ slug: /tracking
ToolJet does not store any data fetched from the data sources. ToolJet acts as a proxy and the data from data sources is sent to the client application without storing.
:::
+
+
## Server
:::tip
Self-hosted version of ToolJet pings our server to fetch the latest product updates every 24 hours. You can disable this by setting the value of `CHECK_FOR_UPDATES` environment variable to `0`. This feature is enabled by default.
:::
+
+
+
+
## Client
ToolJet tracks anonymous usage data such as page loads and clicks. ToolJet tracks only the events and doesn't capture data from data sources.
Tracking can be disabled by setting the value environment variable `ENABLE_TRACKING` to `0`.
+
+
\ No newline at end of file
diff --git a/docs/docs/tutorial/manage-users-groups.md b/docs/docs/tutorial/manage-users-groups.md
index c726323b78..9da449449c 100644
--- a/docs/docs/tutorial/manage-users-groups.md
+++ b/docs/docs/tutorial/manage-users-groups.md
@@ -5,13 +5,17 @@ title: Managing Users and Groups
# Managing Users and Groups
+
+
## Managing Users
Admins of a workspace can invite users to the workspace or archive/unarchive the existing users of a workspace. To manage users in a workspace, go to the **Workspace Settings** from the left sidebar on the dashboard and select **Users**.
-
+
+
+
@@ -22,7 +26,7 @@ Admins can invite anyone to a workspace using the email address. To invite a use
- Click on the `Add users` button on the top right corner of the **Users** page.
-
+
@@ -32,7 +36,7 @@ Admins can invite anyone to a workspace using the email address. To invite a use
-
+
@@ -42,17 +46,19 @@ Admins can invite anyone to a workspace using the email address. To invite a use
-
+
- You can also **Bulk Invite Users** by editing and uploading the sample CSV file including all the users details. Click on the `Add users` button and select the **Bulk Invite** tab.
-
+
+
+
### Edit User Details
Admins of a workspace can edit the details of any user in their workspace. The details include **adding** or **removing** the user from a group. To edit the details of a user:
@@ -63,11 +69,15 @@ Admins of a workspace can edit the details of any user in their workspace. The d
-
+
-### Archive User from a workspace
+
+
+
+
+### Archive User from a Workspace
Admins of a workspace can archive any user from their workspace. Archiving a user will disable their access to the workspace.
@@ -81,11 +91,15 @@ To archive a user:
-
+
-### Unarchive User from a workspace
+
+
+
+
+### Unarchive User from a Workspace
Admins of a workspace can unarchive any user from their workspace. Unarchiving a user will enable their access to the workspace.
@@ -99,20 +113,28 @@ To unarchive a user:
-
+
+
+
+
+
## Managing Groups
On ToolJet, Admins and Super Admins can create groups for users added in a workspace and grant them access to particular app(s) with specific permissions. To manage groups, just go to the **Workspace Settings** from the left-sidebar of the dashboard and click on the **Groups**.
-
+
+
+
+
+
### Group properties
Every group on ToolJet has **four** sections:
@@ -128,7 +150,7 @@ Admins and Super Admins can add or remove any number of apps for a group of user
-
+
@@ -138,7 +160,7 @@ Admins and Super Admins can add or remove any numbers of users in a group. Just
-
+
@@ -152,7 +174,7 @@ Admins and Super Admins can set granular permission for the users added in that
-
+
@@ -162,7 +184,7 @@ Only Admins and Super Admins can define what data sources can be **viewed** or *
-
+
@@ -170,6 +192,10 @@ Only Admins and Super Admins can define what data sources can be **viewed** or *
All the activities performed by any Admin, Super Admin or any user in a workspace is logged in [Audit logs](/docs/Enterprise/audit_logs) - including any activity related with managing users and groups.
:::
+
+
+
+
### Predefined Groups
By default, every workspace will have two User Groups:
@@ -184,7 +210,7 @@ This group contains all the users and admins.
-
+
@@ -198,10 +224,14 @@ This group contains admins by default. Admins can add more admins or remove the
-
+
+
+
+
+
### Creating new group (Paid plans only)
Option to create a new group is available in the **paid plans** only. To create a new group:
@@ -209,7 +239,7 @@ Option to create a new group is available in the **paid plans** only. To create
- Click on `Create new group` button in the **Groups** page.
-
+
@@ -223,16 +253,22 @@ Option to create a new group is available in the **paid plans** only. To create
- Once the group is created, you can add **Apps**, **Users** and set their **Permissions** for that group.
-
+
-### Deleting a group
+
+
+
+
+### Deleting a Group
To delete a group, click on `Delete` next to it. It will confirm whether you want to delete it or not, Click on `Yes` to delete the group.
-
+
+
+
diff --git a/docs/docs/tutorial/sharing-and-deploying.md b/docs/docs/tutorial/sharing-and-deploying.md
index 265b61c6a8..244d3ea3fb 100644
--- a/docs/docs/tutorial/sharing-and-deploying.md
+++ b/docs/docs/tutorial/sharing-and-deploying.md
@@ -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
diff --git a/docs/docs/tutorial/versioning-and-release.md b/docs/docs/tutorial/versioning-and-release.md
index 315737d0bf..4bae42f7a6 100644
--- a/docs/docs/tutorial/versioning-and-release.md
+++ b/docs/docs/tutorial/versioning-and-release.md
@@ -7,10 +7,16 @@ title: Versioning and Release
Versioning and Release lets you version control your apps and release app changes to the users.
+
+
## Versioning
Versioning is really useful if multiple developers are working on an app, it allows them to save their own version of the app. This also prevents developers from overwriting the other developer's work.
+
+
+
+
### Creating a Version
You can create new versions from **App Version Manager** on the top-right corner. It displays the version of the app that you're currently working and can be used to switch between the different version of the app. To create a new version:
@@ -25,11 +31,15 @@ You can create new versions from **App Version Manager** on the top-right corner
- Click on **Create new version** button present at the bottom of the dropdown and a modal will pop-up. Enter a **Version Name** and click on **Create version from** dropdown that will include all the versions of the app, choose a version from the dropdown that you want to use for your new version or ToolJet will automatically select the last created version, and then click on `Create new Version` button to add a new version.
-
+
-### Renaming a version
+
+
+
+
+### Renaming a Version
If you want to change the name of an app version, navigate to the **version manager** and select the version you wish to rename. From there, you can click on the rename button located beside the version name. This will open a modal where you can modify the version name to your desired choice.
@@ -39,7 +49,11 @@ If you want to change the name of an app version, navigate to the **version mana
-### Deleting a version
+
+
+
+
+### Deleting a Version
If you want to remove an app version, go to the **version manager** and locate the version you wish to delete from the dropdown menu. Next to the version, you will find a delete icon. Click on it to initiate the deletion process.
@@ -49,18 +63,22 @@ If you want to remove an app version, go to the **version manager** and locate t
+
+
+
+
## Release
Making a release let's you publish the app and push the changes to production.
-### Releasing a version
+### Releasing a Version
To release a version:
- Go to the **App Version Manager** and select the `version` from the dropdown that you want to release.
-
+
@@ -90,3 +108,5 @@ To release a version:
:::
+
+
\ No newline at end of file
diff --git a/docs/docs/user-authentication/general-settings.md b/docs/docs/user-authentication/general-settings.md
index a1427777d1..27da47f7ff 100644
--- a/docs/docs/user-authentication/general-settings.md
+++ b/docs/docs/user-authentication/general-settings.md
@@ -8,14 +8,14 @@ title: General Settings
- Go to the **Workspace Settings** (⚙️) from the left sidebar in the ToolJet dashboard
-
+
- Select `SSO` from sidebar and then select **General Settings**
-
+
@@ -33,6 +33,6 @@ You can use the login URL to login directly to the workspace. This will be hidde
-
+
diff --git a/docs/docs/user-authentication/password-login.md b/docs/docs/user-authentication/password-login.md
index b89b40cb4a..5cd821b919 100644
--- a/docs/docs/user-authentication/password-login.md
+++ b/docs/docs/user-authentication/password-login.md
@@ -13,7 +13,7 @@ Password login is a method of user authentication where user can login using the
-
+
diff --git a/docs/docs/user-authentication/sso/github.md b/docs/docs/user-authentication/sso/github.md
index c9fba8a2a6..04d48ee4ba 100644
--- a/docs/docs/user-authentication/sso/github.md
+++ b/docs/docs/user-authentication/sso/github.md
@@ -9,29 +9,29 @@ To enable GitHub Single Sign-on (SSO) for your ToolJet instance, follow these st
1. From the ToolJet dashboard, go to **Settings** (⚙️) from the bottom of the left sidebar and select the **Workspace Settings**.
+2. In the **Workspace Settings**, select **Workspace login** from the sidebar. On the right, you'll see toggles to enable SSO via different clients. All the client toggles are disabled by default. After turning it on, a modal will appear with input fields for parameters such as Host name, Client ID, and Client secret. At the top left of the modal, there is a toggle to enable this modal. Turn it on, and then, without entering any parameters, click on the **Save changes** button. This will generate a `Redirect URL` that you will need to utilize in the GitHub Developer settings.
+
+
+
+3. Now go to the **[GitHub Developer settings](https://github.com/settings/developers)** and navigate to `OAuth Apps` and create a new OAuth App.
+
+- Enter the **App Name**, **Homepage URL**, and **Authorization callback URL**. The **Authorization callback URL** should be the generated `Redirect URL` in the ToolJet GitHub manage SSO page. Click on the **Register application** button to create the OAuth App.
+
-
+
-2. In the **Workspace Settings**, select **SSO** from the sidebar and then select **GitHub**. GitHub login will be **Disabled** by default, **Enable** it and you will see the generated `Redirect URL`.
-
-
-
-
+- The **Client ID** will be generated automatically.
+- Generate the **Client Secret** by clicking the `Generate a new client secret` button.
-3. Now go to the **[GitHub Developer settings](https://github.com/settings/developers)** and navigate to `OAuth Apps` and create a new project.
- - The **Client ID** will be generated automatically.
- - Generate the **Client Secret** by clicking the `Generate new client secret` button. Copy the **Client Secret** and save it for later use.
- - Enter the **App Name**, **Homepage URL**, and **Authorization callback URL**. The **Authorization callback URL** should be the generated `Redirect URL` in the GitHub manage SSO page.
-
-
-
+
+
4. Open the ToolJet's GitHub SSO settings and enter the obtained **Client ID** and **Client Secret**.
-
+
5. If you are using **GitHub Enterprise** self-hosted, enter the `Host Name`. The host name should be a URL and should not end with `/`, for example, `https://github.tooljet.com`. If it is not self-hosted, you can skip this field.
@@ -40,18 +40,24 @@ To enable GitHub Single Sign-on (SSO) for your ToolJet instance, follow these st
7. Obtain the Login URL from the **[General Settings](/docs/user-authentication/general-settings#login-url)** of the SSO page.
+
+
### Setting Default SSO
To set GitHub as the default SSO for the instance, use the following environment variables:
-| Variable | Description |
-| ------------------------------------- | ----------------------------------------------------------- |
-| SSO_GIT_OAUTH2_CLIENT_ID | GitHub OAuth client ID |
-| SSO_GIT_OAUTH2_CLIENT_SECRET | GitHub OAuth client secret |
-| SSO_GIT_OAUTH2_HOST | GitHub OAuth host name if GitHub is self-hosted |
+|
Variable
|
Description
|
+| ---------------------------- | ----------------------------------------------- |
+| SSO_GIT_OAUTH2_CLIENT_ID | GitHub OAuth client ID |
+| SSO_GIT_OAUTH2_CLIENT_SECRET | GitHub OAuth client secret |
+| SSO_GIT_OAUTH2_HOST | GitHub OAuth host name if GitHub is self-hosted |
**Redirect URL should be `/sso/git`**
+
+
+
+
### Exposed ssoUserInfo
Once the GitHub SSO is configured (on ToolJet version **`2.28.0-ee2.12.2`** or above), ToolJet will expose the user info returned by the GitHub. The user info will be available under the `ssoUserInfo` property of the `currentUser` global variable. Check the **[Inspector](/docs/how-to/use-inspector)** doc to learn more.
@@ -60,47 +66,51 @@ The exposed user info can be dynamically accessed throughout the apps using JS *
The following is an example of the user info returned by GitHub:
-| Key | Description | Syntax to access |
-|:--- |:----------- |:---------------- |
-| **login** | GitHub username | `{{globals.currentUser.ssoUserInfo.login}}` |
-| **id** | GitHub user ID | `{{globals.currentUser.ssoUserInfo.id}}` |
-| **node_id** | GitHub user node ID | `{{globals.currentUser.ssoUserInfo.node_id}}` |
-| **avatar_url** | GitHub user avatar URL | `{{globals.currentUser.ssoUserInfo.avatar_url}}` |
-| **gravatar_id** | GitHub user gravatar ID | `{{globals.currentUser.ssoUserInfo.gravatar_id}}` |
-| **url** | GitHub user URL | `{{globals.currentUser.ssoUserInfo.url}}` |
-| **html_url** | GitHub user HTML URL | `{{globals.currentUser.ssoUserInfo.html_url}}` |
-| **followers_url** | GitHub user followers URL | `{{globals.currentUser.ssoUserInfo.followers_url}}` |
-| **following_url** | GitHub user following URL | `{{globals.currentUser.ssoUserInfo.following_url}}` |
-| **gists_url** | GitHub user gists URL | `{{globals.currentUser.ssoUserInfo.gists_url}}` |
-| **starred_url** | GitHub user starred URL | `{{globals.currentUser.ssoUserInfo.starred_url}}` |
-| **subscriptions_url** | GitHub user subscriptions URL | `{{globals.currentUser.ssoUserInfo.subscriptions_url}}` |
-| **organizations_url** | GitHub user organizations URL | `{{globals.currentUser.ssoUserInfo.organizations_url}}` |
-| **repos_url** | GitHub user repos URL | `{{globals.currentUser.ssoUserInfo.repos_url}}` |
-| **events_url** | GitHub user events URL | `{{globals.currentUser.ssoUserInfo.events_url}}` |
-| **received_events_url** | GitHub user received events URL | `{{globals.currentUser.ssoUserInfo.received_events_url}}` |
-| **type** | GitHub user type | `{{globals.currentUser.ssoUserInfo.type}}` |
-| **site_admin** | GitHub user site admin | `{{globals.currentUser.ssoUserInfo.site_admin}}` |
-| **name** | GitHub user name | `{{globals.currentUser.ssoUserInfo.name}}` |
-| **company** | GitHub user company | `{{globals.currentUser.ssoUserInfo.company}}` |
-| **blog** | GitHub user blog | `{{globals.currentUser.ssoUserInfo.blog}}` |
-| **location** | GitHub user location | `{{globals.currentUser.ssoUserInfo.location}}` |
-| **email** | GitHub user email | `{{globals.currentUser.ssoUserInfo.email}}` |
-| **hireable** | GitHub user hireable | `{{globals.currentUser.ssoUserInfo.hireable}}` |
-| **bio** | GitHub user bio | `{{globals.currentUser.ssoUserInfo.bio}}` |
-| **twitter_username** | GitHub user twitter username | `{{globals.currentUser.ssoUserInfo.twitter_username}}` |
-| **public_repos** | GitHub user public repos | `{{globals.currentUser.ssoUserInfo.public_repos}}` |
-| **public_gists** | GitHub user public gists | `{{globals.currentUser.ssoUserInfo.public_gists}}` |
-| **followers** | GitHub user followers | `{{globals.currentUser.ssoUserInfo.followers}}` |
-| **following** | GitHub user following | `{{globals.currentUser.ssoUserInfo.following}}` |
-| **created_at** | GitHub user created at | `{{globals.currentUser.ssoUserInfo.created_at}}` |
-| **updated_at** | GitHub user updated at | `{{globals.currentUser.ssoUserInfo.updated_at}}` |
-| **access_token** | GitHub user access token. Sensitive information of a logged-in user. | `{{globals.currentUser.ssoUserInfo.access_token}}` |
+|
Key
|
Description
|
Syntax to Access
|
+| :---------------------- | :------------------------------------------------------------------- | :-------------------------------------------------------- |
+| **login** | GitHub username | `{{globals.currentUser.ssoUserInfo.login}}` |
+| **id** | GitHub user ID | `{{globals.currentUser.ssoUserInfo.id}}` |
+| **node_id** | GitHub user node ID | `{{globals.currentUser.ssoUserInfo.node_id}}` |
+| **avatar_url** | GitHub user avatar URL | `{{globals.currentUser.ssoUserInfo.avatar_url}}` |
+| **gravatar_id** | GitHub user gravatar ID | `{{globals.currentUser.ssoUserInfo.gravatar_id}}` |
+| **url** | GitHub user URL | `{{globals.currentUser.ssoUserInfo.url}}` |
+| **html_url** | GitHub user HTML URL | `{{globals.currentUser.ssoUserInfo.html_url}}` |
+| **followers_url** | GitHub user followers URL | `{{globals.currentUser.ssoUserInfo.followers_url}}` |
+| **following_url** | GitHub user following URL | `{{globals.currentUser.ssoUserInfo.following_url}}` |
+| **gists_url** | GitHub user gists URL | `{{globals.currentUser.ssoUserInfo.gists_url}}` |
+| **starred_url** | GitHub user starred URL | `{{globals.currentUser.ssoUserInfo.starred_url}}` |
+| **subscriptions_url** | GitHub user subscriptions URL | `{{globals.currentUser.ssoUserInfo.subscriptions_url}}` |
+| **organizations_url** | GitHub user organizations URL | `{{globals.currentUser.ssoUserInfo.organizations_url}}` |
+| **repos_url** | GitHub user repos URL | `{{globals.currentUser.ssoUserInfo.repos_url}}` |
+| **events_url** | GitHub user events URL | `{{globals.currentUser.ssoUserInfo.events_url}}` |
+| **received_events_url** | GitHub user received events URL | `{{globals.currentUser.ssoUserInfo.received_events_url}}` |
+| **type** | GitHub user type | `{{globals.currentUser.ssoUserInfo.type}}` |
+| **site_admin** | GitHub user site admin | `{{globals.currentUser.ssoUserInfo.site_admin}}` |
+| **name** | GitHub user name | `{{globals.currentUser.ssoUserInfo.name}}` |
+| **company** | GitHub user company | `{{globals.currentUser.ssoUserInfo.company}}` |
+| **blog** | GitHub user blog | `{{globals.currentUser.ssoUserInfo.blog}}` |
+| **location** | GitHub user location | `{{globals.currentUser.ssoUserInfo.location}}` |
+| **email** | GitHub user email | `{{globals.currentUser.ssoUserInfo.email}}` |
+| **hireable** | GitHub user hireable | `{{globals.currentUser.ssoUserInfo.hireable}}` |
+| **bio** | GitHub user bio | `{{globals.currentUser.ssoUserInfo.bio}}` |
+| **twitter_username** | GitHub user twitter username | `{{globals.currentUser.ssoUserInfo.twitter_username}}` |
+| **public_repos** | GitHub user public repos | `{{globals.currentUser.ssoUserInfo.public_repos}}` |
+| **public_gists** | GitHub user public gists | `{{globals.currentUser.ssoUserInfo.public_gists}}` |
+| **followers** | GitHub user followers | `{{globals.currentUser.ssoUserInfo.followers}}` |
+| **following** | GitHub user following | `{{globals.currentUser.ssoUserInfo.following}}` |
+| **created_at** | GitHub user created at | `{{globals.currentUser.ssoUserInfo.created_at}}` |
+| **updated_at** | GitHub user updated at | `{{globals.currentUser.ssoUserInfo.updated_at}}` |
+| **access_token** | GitHub user access token. Sensitive information of a logged-in user. | `{{globals.currentUser.ssoUserInfo.access_token}}` |
-### Example: Getting user information using the access_token
+
+
+
+
+### Example: Getting User Information Using the access_token
Once a user is logged in to ToolJet using GitHub SSO, the access token of the user becomes available. This access token can be utilized within ToolJet apps to retrieve detailed user information from the GitHub API.
@@ -110,8 +120,10 @@ Once a user is logged in to ToolJet using GitHub SSO, the access token of the us
3. In the Headers section of the query, include the **key** `Authorization` and set the **value** to `Bearer {{globals.currentUser.ssoUserInfo.access_token}}`. This will pass the user's GitHub access token as a Bearer token in the request header.
-5. Execute the query to fetch the list of followers for the logged-in user. The response will contain the list of followers for the authenticated GitHub user.
+4. Execute the query to fetch the list of followers for the logged-in user. The response will contain the list of followers for the authenticated GitHub user.
+
+
\ No newline at end of file
diff --git a/docs/docs/user-authentication/sso/google.md b/docs/docs/user-authentication/sso/google.md
index 9bc12b4dff..cf69818088 100644
--- a/docs/docs/user-authentication/sso/google.md
+++ b/docs/docs/user-authentication/sso/google.md
@@ -3,37 +3,24 @@ id: google
title: Google
---
-# Google Single Sign-on
+# Google Single Sign-on Configuration
-- Go to the **Workspace Settings** (⚙️) from the left sidebar in the ToolJet dashboard
+To enable Google Single Sign-on (SSO) for your ToolJet instance, follow these steps:
+
+1. From the ToolJet dashboard, go to **Settings** (⚙️) from the bottom of the left sidebar and select the **Workspace Settings**.
+
+2. In the **Workspace Settings**, select **Workspace login** from the sidebar. On the right, you'll see toggles to enable SSO via different clients. All the client toggles are disabled by default. Turn on the Google toggle, a modal will appear with the input field for the parameter Client ID. At the top left of the modal, there is a toggle to enable this modal. Turn it on, and then, without entering the Client ID, click on the **Save changes** button. This will generate a `Redirect URL` that you will need to utilize in the Google Cloud console.
+
+
+
+3. Go to **[Google Cloud console](https://console.cloud.google.com/)** and create a project.
-
+
-- Select `SSO` from sidebar and then select **Google**. Google login will be **disabled** by default,
-
-
-
-
-
-
-- Enable Google. You can see `Redirect URL` generated
-
-
-
-
-
-
-- Go to **[Google cloud console](https://console.cloud.google.com/)** and create a project.
-
-
-
-
-
-
-- Go to the **[Google cloud console credentials page](https://console.cloud.google.com/apis/credentials)**, and create an OAuth client ID
+- Go to the **[Google Cloud console credentials page](https://console.cloud.google.com/apis/credentials)**, and create an OAuth client ID.
@@ -49,37 +36,35 @@ select 'External'.
- You'll be led to an app registration page where you can set OAuth scopes. Select 'Add or remove scopes' and add the scopes
-userinfo.email and userinfo.profile as shown in the image. This will allow ToolJet to store the email and name of the
-user who is signing in
+`userinfo.email` and `userinfo.profile` as shown in the image. This will allow ToolJet to store the email and name of the
+user who is signing in.
-- Set the domain on which ToolJet is hosted as an authorized domain
+- Set the domain on which ToolJet is hosted as an authorized domain.
-- Set the `Redirect URL` generated at manage SSO `Google` page under Authorised redirect URIs
+- Under Authorized redirect URIs, enter the `Redirect URL` which was generated in ToolJet's Google SSO settings.
-Lastly, set the `client id` in google manage SSO page. This value will be available from your [Google cloud console credentials page](https://console.cloud.google.com/apis/credentials)
+Lastly, set the `Client ID` in ToolJet's Google SSO settings. This value will be available from your [Google Cloud console credentials page](https://console.cloud.google.com/apis/credentials).
The Google sign-in button will now be available in your ToolJet login screen.
## Setting default SSO
To set Google as default SSO for the instance use environment variable.
-| variable | description |
+|
Variable
|
Description
|
| ------------------------------------- | ----------------------------------------------------------- |
-| SSO_GOOGLE_OAUTH2_CLIENT_ID | Google OAuth client id |
-
-**Redirect URL should be `/sso/google`**
+| SSO_GOOGLE_OAUTH2_CLIENT_ID | Google OAuth client id |
\ No newline at end of file
diff --git a/docs/docs/user-authentication/sso/ldap.md b/docs/docs/user-authentication/sso/ldap.md
index 0f92b2389b..5b5071bf42 100644
--- a/docs/docs/user-authentication/sso/ldap.md
+++ b/docs/docs/user-authentication/sso/ldap.md
@@ -9,7 +9,7 @@ To set up LDAP as Single Sign-On (SSO) for ToolJet, follow these steps:
-
+
@@ -17,7 +17,7 @@ To set up LDAP as Single Sign-On (SSO) for ToolJet, follow these steps:
-
+
@@ -42,7 +42,7 @@ To set up LDAP as Single Sign-On (SSO) for ToolJet, follow these steps:
-
+
diff --git a/docs/docs/user-authentication/sso/openid/azuread.md b/docs/docs/user-authentication/sso/openid/azuread.md
index c124c7a852..d72d59d6a4 100644
--- a/docs/docs/user-authentication/sso/openid/azuread.md
+++ b/docs/docs/user-authentication/sso/openid/azuread.md
@@ -9,10 +9,10 @@ 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`
-
+
@@ -23,7 +23,7 @@ To construct a Well Known URL refer this link :: https://docs.microsoft.com/en-u
-- 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`.
diff --git a/docs/docs/user-authentication/sso/openid/google-openid.md b/docs/docs/user-authentication/sso/openid/google-openid.md
index 80cd4675c0..433f85fc68 100644
--- a/docs/docs/user-authentication/sso/openid/google-openid.md
+++ b/docs/docs/user-authentication/sso/openid/google-openid.md
@@ -6,14 +6,14 @@ title: Google (Open ID)
- Go to the **Workspace Settings** (⚙️) from the left sidebar in the ToolJet dashboard
-
+
- Select `SSO` from workspace options
-
+
@@ -24,16 +24,16 @@ title: Google (Open ID)
-- 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.
-
+
@@ -68,7 +68,7 @@ user who is signing in
-- 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
diff --git a/docs/docs/user-authentication/sso/openid/setup.md b/docs/docs/user-authentication/sso/openid/setup.md
index 89706863cc..709a6eeeac 100644
--- a/docs/docs/user-authentication/sso/openid/setup.md
+++ b/docs/docs/user-authentication/sso/openid/setup.md
@@ -11,26 +11,28 @@ title: OpenID Setup
- Go to the **Workspace Settings** (⚙️) from the left sidebar in the ToolJet dashboard
-
+
- Select `SSO` from workspace options
-
+
- Select `OpenId Connect`.
-
+
- Find and set **Name**, **Client Id**, **Client Secret**, and **Well Known URL** from your Open Id provider.
+
+
### Exposed ssoUserInfo
Once the OpenID is configured (on ToolJet version **`v2.6.2-ee2.1.0`** or above), ToolJet will expose the user info returned by the OpenID provider. The user info will be available under the `ssoUserInfo` property of the `currentUser` variable. Check the **[Inspector](/docs/how-to/use-inspector)** doc to learn more.
@@ -39,7 +41,7 @@ The exposed user info can be dynamically accessed throughout the apps using JS *
The following is an example of the user info returned by Google OpenID provider:
-| Key | Description | Syntax to access |
+|
Key
|
Description
|
Syntax to access
|
|:--- |:----------- |:------- |
| **sub** | Subject - Identifier for the End-User at the Issuer. | `{{globals.currentUser.ssoUserInfo.sub}}` |
| **name** | End-User's full name in displayable form including all name parts, possibly including titles and suffixes, ordered according to the End-User's locale and preferences. | `{{globals.currentUser.ssoUserInfo.name}}` |
@@ -56,6 +58,8 @@ The following is an example of the user info returned by Google OpenID provider:
-
+
+
+
\ No newline at end of file
diff --git a/docs/docs/user-authentication/sso/saml.md b/docs/docs/user-authentication/sso/saml.md
index f412c69009..39b78fbb10 100644
--- a/docs/docs/user-authentication/sso/saml.md
+++ b/docs/docs/user-authentication/sso/saml.md
@@ -5,6 +5,8 @@ title: SAML
ToolJet supports SAML authentication for your workspace. The supported SAML providers are: Okta, Active Directory Federation Services, Azure AD, Auth0 and other SAML SSO providers.
+
+
### Configuring SAML
To enable SAML authentication, you need to configure the following workspace settings:
@@ -13,7 +15,7 @@ To enable SAML authentication, you need to configure the following workspace set
-
+
@@ -42,19 +44,23 @@ To enable SAML authentication, you need to configure the following workspace set
-
+
4. Once configured, click **Save Changes**.
+
+
+
+
### Logging in with SAML
1. Go to the **[General Settings](/docs/user-authentication/general-settings)** and copy the **Login URL** provided. Furthermore, you have the flexibility to choose whether to turn on 'Enable Signups,' allowing users to signup without an invite. Through SSO authentication, we check if the user already exists; if so, they can sign in seamlessly. Otherwise, an error will be displayed. Conversely, with this option disabled, only invited users can log in, provided SSO authentication is successful.
-
+
@@ -76,4 +82,6 @@ To enable SAML authentication, you need to configure the following workspace set
-4. Enter your credentials and click **Login**. If the user is signing in for the first time, they will be redirected to the ToolJet's onboarding page.
\ No newline at end of file
+4. Enter your credentials and click **Login**. If the user is signing in for the first time, they will be redirected to the ToolJet's onboarding page.
+
+
\ No newline at end of file
diff --git a/docs/docs/user-authentication/user-lifecycle.md b/docs/docs/user-authentication/user-lifecycle.md
index 48f536b873..ddebcf9ae0 100644
--- a/docs/docs/user-authentication/user-lifecycle.md
+++ b/docs/docs/user-authentication/user-lifecycle.md
@@ -9,13 +9,15 @@ title: User Lifecycle
Check Workspace docs [here](/docs/tutorial/workspace_overview).
:::
-### User onboarding
+
+
+### User Onboarding
- User can sign up using the sign up link provided on the login page, user will receive a welcome email with activation link. New workspace will be created for the user.
@@ -73,24 +83,36 @@ Check Workspace docs [here](/docs/tutorial/workspace_overview).
Archive or unarchive will not affect user login, user can login and use other workspaces where user is in active state.
:::
-### Switch between workspaces
+
+
+
+
+### Switch Between Workspaces
- 
+
+
-## User status
+
-| Status | Able to log in | How to activate |
+
+## User Status
+
+|
Status
|
Able to log in
|
How to activate
|
| -------- | ---------------- | ------------------------------------ |
| active | Yes | |
| invited | No (Yes with SSO)| Login through SSO or invitation link |
| archived | No | Not able to activate. Invite from `Manage Users` page, status will be changed to invited |
-## Workspace SSO flow
+
+
+
+
+## Workspace SSO Flow
- Diagram shows how SSO configurations are chosen in common login page and workspace login page. Instance level SSO is configured in environment variables and Workspace level SSO is configured in respective `Manage SSO` page.
diff --git a/docs/docs/user-authentication/workspace-settings.md b/docs/docs/user-authentication/workspace-settings.md
new file mode 100644
index 0000000000..1662617279
--- /dev/null
+++ b/docs/docs/user-authentication/workspace-settings.md
@@ -0,0 +1,123 @@
+---
+id: workspace-login
+title: Workspace Login
+---
+
+## Accessing Workspace Login
+
+To access the Workspace Login, navigate to the ToolJet dashboard and click on the gear icon (⚙️) located at the bottom of the left sidebar. From the dropdown, select `Workspace Settings` and then select the `Workspace Login` tab. Workspace login/SSO can be configured by both workspace admins and super admins.
+
+
+
+
+
+
+
+## Workspace Login State: Enabled/Inherited
+
+The workspace login state can be either `Enabled` or `Inherited`. When the workspace login state is `Enabled`, it overrides the instance login configurations, including allowed domains, enable sign-up toggle, and password login toggle. Workspace admins can separately choose to enable or disable the SSO options of the workspace.
+
+
+
+
+
+When the workspace login state is `Inherited`, the workspace login settings are inherited from the instance login settings. The workspace login settings are disabled, and the workspace admins cannot change the SSO settings. Only super admins can change the SSO settings from the instance login settings.
+
+
+
+
+
+
+
+
+
+## Configuring Workspace Login
+
+
+
+### Allowed Domains
+
+The allowed domains field is used to specify the domains that are allowed to access the workspace. If the allowed domains field is empty, all domains are allowed to access the workspace. If the allowed domains field is not empty, only the specified domains are allowed to access the workspace. The allowed domains field can be a comma-separated list of domains.
+
+
+
+
+
+### Login URL
+
+Login URL is automatically generated and can be used to login directly to the workspace. The login URL is unique to the workspace and can be shared with the users to access the workspace.
+
+
+
+
+
+### Enable Sign-up
+
+The enable sign-up toggle is used to enable or disable the sign-up option for the workspace. If the enable sign-up toggle is enabled, new users can sign up for the workspace. If the enable sign-up toggle is disabled, new users cannot sign up for the workspace.
+
+
+
+
+
+
+
+## Password Login
+
+Password login is a method of user authentication where user can login using their email and password. This option is enabled by default. If the password login toggle is disabled, users can only login to the workspace using the SSO options.
+
+
+
+
+
+### Retry Limits
+
+The user password authentication method will be disabled after predefined numbers of wrong password attempts. This feature can be disabled using setting `DISABLE_PASSWORD_RETRY_LIMIT` to `true` in environment variables. Number of retries allowed will be 5 by default, it can be override by `PASSWORD_RETRY_LIMIT` environment variable.
+
+
+
+
+
+### Reset Password
+
+There are two ways through which a user can reset their password. The first method is where user can reset their password by themselves. The second method is where a **Super Admin** can reset password for a user.
+
+#### 1. Forgot Password
+
+- On the login page, click on the **Forgot Password**.
+- Enter the registered email address associated with the account and then click on the **Send a reset link** button.
+- Receive a password reset link via email.
+- Click on the link to be directed to the password reset page.
+- Follow the prompts to set a new password.
+
+
+
+
+
+#### 2. **Super Admin**
+
+- Reach out to the **[Super Admin](/docs/Enterprise/superadmin)** of the workspace.
+- The **Super Admin** can reset the password for the user from the **Settings** > **All Users** section.
+- Select the user for whom the password needs to be reset.
+- Click on the kebab icon(three dots) on the right side of the user's name and select **Reset Password**.
+- A modal will appear with two options to reset the password: **Automatically generate a password** and **Create password**.
+
+#### Automatically Generate Password
+
+- Selecting this option will automatically generate a new password for the user.
+- Click on the **Reset** button to reset the password and the new password will be displayed in the modal.
+- Super Admin can copy this password and provide it to the user securely.
+
+
+
+
+
+#### Create Password
+
+- Selecting this option will allow the Super Admin to create a new password for the user.
+- Enter the new password and click on the **Reset** button.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/docs/widgets/bounded-box.md b/docs/docs/widgets/bounded-box.md
index 4e32edcc8e..0b86a401ef 100644
--- a/docs/docs/widgets/bounded-box.md
+++ b/docs/docs/widgets/bounded-box.md
@@ -3,16 +3,18 @@ id: bounded-box
title: Bounded Box
---
-# 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.
-
+
+
+
## Properties
@@ -23,25 +25,25 @@ A **bounded box** is an infinitely customizable image annotation component that
-| **Property** | **Description** | **Expected value** |
+|
**Property**
|
**Description**
|
**Expected Value**
|
| :----------- | :----------- | :----------------- |
-| **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']}}` |
+| 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']}}` |
#### Default value
Provide the data that will load the default bounding boxes over the image when the app is loaded. The data is expected to be an array of objects format.
-| **Property** | **Description** | **Expected value** |
+|
**Property**
|
**Description**
|
**Expected Value**
|
| :-------- | :------ | :-------- |
-| **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:**
@@ -66,26 +68,55 @@ Provide the data that will load the default bounding boxes over the image when t
]
```
+
+
+
+
## Events
Events are actions that can be triggered programmatically when the user interacts with the component. Click on the component handle to open its properties on the right. Go to the **Events** accordion and click on **+ Add handler**.
-
-
-
-
-
-
-| **Event** | **Description** |
+|
**Event**
|
**Description**
|
| :----------- | :----------- |
-| **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**.
:::
+
+
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the bounding box component.
+
+
+
+
+
+## Exposed Variables
+
+| Variable | Description |
+| :----------- | :----------- |
+| annotations | This variable is an array of objects, where each object represents an annotation added to an image. The object contains the following keys: type, x, y, width, height, text, and id. |
+| annotations.`type` | There are two types of annotations: `RECTANGLE` and `POINT`. |
+| annotations.`x` | coordinates on the x axis. |
+| annotations.`y` | coordinates on the y axis. |
+| annotations.`width` | width of the annotation. |
+| annotations.`height` | height of the annotation. |
+| annotations.`text` | label selected for the annotation. |
+| annotations.`id` | unique ID of the annotation (system generated). |
+
+The values can be accessed dynamically using `{{components.boundedbox1.annotations[0].text}}` or `{{components.boundedbox1.annotations[1].width}}`
+
+
+
+
+
## General
#### Tooltip
@@ -94,41 +125,31 @@ A Tooltip is often used to specify the extra information when the user hovers th
-
+
+
+
+
+
## Layout
-#### Show on desktop
-Use this toggle to show or hide the component in the desktop view. You can dynamically configure the value by clicking on **`Fx`** and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to **`{{true}}`** or **`{{false}}`**.
+|
Layout
|
Description
|
+| :----------- | :----------- |
+| Desktop | Toggle to show or hide the component in the desktop view. Dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, the values can be set to **`{{true}}`** or **`{{false}}`**. |
+| Mobile | Toggle to show or hide the component in the desktop view. Dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, the values can be set to **`{{true}}`** or **`{{false}}`**. |
-#### Show on mobile
-Use this toggle to show or hide the component in the mobile view. You can dynamically configure the value by clicking on **`Fx`** and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to **`{{true}}`** or **`{{false}}`**.
+
|
| :----------- | :----------- | :----------- |
-| **Visibility** | Toggle on or off to control the visibility of the component when the app is loaded | **`{{true}}`** or **`{{false}}`**, By default, it's set to `{{true}}` |
-| **Disable** | Toggle on to disable the component. | **`{{true}}`** or **`{{false}}`**, By default, it's set to `{{false}}` |
-| **Box shadow** | Sets the add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow. | Values that represent x,y, blur, spread and color. Ex: `9px 11px 5px 5px #00000040` |
+| Visibility | Toggle on or off to control the visibility of the component when the app is loaded. | **`{{true}}`** or **`{{false}}`**, By default, it's set to `{{true}}` |
+| Disable | Toggle on to disable the component. | **`{{true}}`** or **`{{false}}`**, By default, it's set to `{{false}}` |
+| Box shadow | Sets the add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow. | Values that represent x,y, blur, spread and color. Ex: `9px 11px 5px 5px #00000040` |
-## Exposed variables
-
-| variable | Description |
-| :----------- | :----------- |
-| **annotations** | This variable is an array of objects, where each object represents an annotation added to an image. The object contains the following keys: type, x, y, width, height, text, and id |
-| **annotations.`type`** | There are two types of annotations: `RECTANGLE` and `POINT` |
-| **annotations.`x`** | coordinates on the x axis |
-| **annotations.`y`** | coordinates on the y axis |
-| **annotations.`width`** | width of the annotation |
-| **annotations.`height`** | height of the annotation |
-| **annotations.`text`** | label selected for the annotation |
-| **annotations.`id`** | unique ID of the annotation (system generated) |
-
-The values can be accessed dynamically using `{{components.boundedbox1.annotations[0].text}}` or `{{components.boundedbox1.annotations[1].width}}`
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the bounding box component.
+
diff --git a/docs/docs/widgets/button-group.md b/docs/docs/widgets/button-group.md
index 75607f3df8..48dbffee3e 100644
--- a/docs/docs/widgets/button-group.md
+++ b/docs/docs/widgets/button-group.md
@@ -2,38 +2,66 @@
id: button-group
title: Button Group
---
-# 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.
|
|:----------- |:----------- |:-------------- |
-| **label** | Used to set the title of the button-group. | Any **String** value: `Select the options` or `{{queries.queryname.data.text}}` |
-| **values** | It can be used to set the values of the button group items. | **Array** of strings and numbers: `{{[1,2,3]}}` |
-| **labels** | It can be used to set the labels of the button group items. | **Array** of strings and numbers: `{{['A','B','C']}}` |
-| **Default selected** | Initial selected values can be set using this. | **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}}` |
+| 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']}}` |
+| 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}}` |
+
+
+
+
## Events
Events are actions that can be triggered programmatically when the user interacts with the component. Click on the component handle to open its properties on the right. Go to the **Events** accordion and click on **+ Add handler**.
-| Events | Description |
+|
Events
|
Description
|
|:----------- |:----------- |
-| **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**.
:::
+
+
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the button-group component.
+
+
+
+
+
+## Exposed Variables
+
+|
Variable
|
Description
|
How To Access
|
+| :---------- | :---------- | :----------|
+| selected | If the **enable multiple selection** option is turned off, then the variable is an array of objects, and the first object holds the value of the selected button. However, if it is turned on, the variable type changes from an array to an object, and the selected button values are stored as a string within that object. | Access the value using `{{components.buttongroup1.selected[0]}}` or `{{components.buttongroup1.selected}}` |
+
+
+
+
+
## General
#### Tooltip
@@ -41,39 +69,36 @@ A Tooltip is often used to display additional information when the user hovers t
-
+
+
+
+
+
## Layout
-#### Show on desktop
+|
Layout
|
Description
|
+| :----------- | :----------- |
+| Desktop | Toggle to show or hide the component in the desktop view. Dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, the values can be set to **`{{true}}`** or **`{{false}}`**.|
+| Mobile | Toggle to show or hide the component in the desktop view. Dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, the values can be set to **`{{true}}`** or **`{{false}}`**. |
-Use this toggle to show or hide the component in the desktop view. You can dynamically configure the value by clicking on **Fx** and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to **`{{true}}`** or **`{{false}}`**.
+
-#### Show on mobile
-
-Use this toggle to show or hide the component in the mobile view. You can dynamically configure the value by clicking on **Fx** and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to **`{{true}}`** or **`{{false}}`**.
+
|
| :---------- | :---------- | :-------------- |
-| **Background color** | Set a background color for the buttons in buttons group. | Choose a color from the picker or enter the Hex color code. ex: `#000000` |
-| **Text color** | Set a text color for the buttons in buttons group. | Choose a color from the picker or enter the Hex color code. ex: `#000000` |
-| **Visibility** | Make the component visible or hidden. | **`{{true}}`** or **`{{false}}`**, By default, its value is set to `{{true}}` |
-| **Disable** | Disable the component. | **`{{true}}`** or **`{{false}}`**, By default, its value is set to `{{false}}` |
-| **Border radius** | Add a border radius to the buttons in the component using this property. | Any numerical value from `0` to `100` |
-| **Selected text color** | Use this property to modify the text color of selected button | Choose a color from the picker or enter the Hex color code. ex: `#000000` |
-| **Selected background color** | Use this property to modify the background color of selected button | Choose a color from the picker or enter the Hex color code. ex: `#000000` |
-| **Box Shadow** | Sets the add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow. | Values that represent X, Y, blur, spread, and color. Example: `9px 11px 5px 5px #00000040`` |
+| Background color | Set a background color for the buttons in buttons group. | Choose a color from the picker or enter the Hex color code. ex: `#000000` |
+| Text color | Set a text color for the buttons in buttons group. | Choose a color from the picker or enter the Hex color code. ex: `#000000` |
+| Visibility | Make the component visible or hidden. | **`{{true}}`** or **`{{false}}`**, By default, its value is set to `{{true}}` |
+| Disable | Disable the component. | **`{{true}}`** or **`{{false}}`**, By default, its value is set to `{{false}}` |
+| Border radius | Add a border radius to the buttons in the component using this property. | Any numerical value from `0` to `100` |
+| Selected text color | Use this property to modify the text color of selected button | Choose a color from the picker or enter the Hex color code. ex: `#000000` |
+| Selected background color | Use this property to modify the background color of selected button | Choose a color from the picker or enter the Hex color code. ex: `#000000` |
+| Box shadow | Sets the add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow. | Values that represent X, Y, blur, spread, and color. Example: `9px 11px 5px 5px #00000040`` |
-## Exposed Variables
-
-| Variable | Description |
-| :---------- | :---------- |
-| **selected** | If the **enable multiple selection** option is turned off, then the variable is an array of objects, and the first object holds the value of the selected button. However, if the **enable multiple selection** option is turned on, the variable type changes from an array to an object, and the selected button values are stored as a string within that object. The value can be accessed using `{{components.buttongroup1.selected[0]}}` or `{{components.buttongroup1.selected}}` |
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the button-group component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/button.md b/docs/docs/widgets/button.md
index b0b43280a5..d5cfbdd330 100644
--- a/docs/docs/widgets/button.md
+++ b/docs/docs/widgets/button.md
@@ -4,30 +4,64 @@ 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.
-
+
|
| :----------- | :----------- | :----------- |
-| **Button Text** | It can be used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}` |
-| **Loading state** | The loading state can be 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}}`` |
+| 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}}` |
+
+
+
+
## Events
Events are actions that can be triggered programmatically when the user interacts with the component. Click on the component handle to open its properties on the right. Go to the **Events** accordion and click on **+ Add handler**.
-| Event | Description |
+|
Event
|
Description
|
| :----------- | :----------- |
-| **On click** | The On click event is triggered when the button is clicked. |
-| **On hover** | The On hover event is triggered when the mouse cursor is moved over the button. Just like any other event on ToolJet, you can set multiple handlers for on click event. |
+| On click | The On click event is triggered when the button is clicked. |
+| On hover | The On hover event is triggered when the mouse cursor is moved over the button. Just like any other event on ToolJet, you can set multiple handlers for on click event. |
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
:::
+
+
+
+
+## Component Specific Actions (CSA)
+
+Following actions of Button component can be controlled using the component specific actions(CSA):
+
+|
Actions
|
Description
|
How To Access
|
+| :----------- | :----------- | :--------|
+| click | Regulate the click of a button via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.button1.click()` |
+| setText | Control the button's text using component specific action from any of the event handler. You can also | Use RunJS query to execute component specific actions: `await components.button1.setText('New Button Text')` |
+| disable | Disable the button using the component specific action from any of the event handler. You can also | Use RunJS query to execute this action: `await components.button1.disable(true)` or `await components.button1.disable(false)` |
+| visibility | Hide the button using the component specific action from any of the event handler. You can also| Use RunJS query to execute this action: `await components.button1.visibility(true)` or `await components.button1.visibility(false)` |
+| loading | Sets the loading state of the button dynamically using the component specific actions from any of the event handler. | Use this action from RunJS: `await components.button1.loading(true)` or `await components.button1.loading(false)` |
+
+
+
+
+
+## Exposed Variables
+
+|
Variable
|
Description
|
How To Access
|
+| :----------- | :----------- | :---------- |
+| buttonText | This variable stores the text displayed on the button. | Access the value dynamically through JavaScript using the following syntax: `{{components.button1.buttonText}}` |
+
+
+
+
+
## General
#### Tooltip
@@ -35,47 +69,36 @@ A Tooltip is often used to display additional information when the user hovers t
-
+
+
+
+
+
## Layout
-#### Show on desktop
+|
Layout
|
Description
|
+| :----------- | :----------- |
+| Desktop | Toggle to show or hide the component in the desktop view. Dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, the values can be set to **`{{true}}`** or **`{{false}}`**.|
+| Mobile | Toggle to show or hide the component in the desktop view. Dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, the values can be set to **`{{true}}`** or **`{{false}}`**. |
-Use this toggle to show or hide the component in the desktop view. You can dynamically configure the value by clicking on **Fx** and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to **`{{true}}`** or **`{{false}}`**.
+
-#### Show on mobile
-
-Use this toggle to show or hide the component in the mobile view. You can dynamically configure the value by clicking on **Fx** and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to **`{{true}}`** or **`{{false}}`**.
+
|
| :----------- | :----------- | :----------- |
-| **Background color** | Change the background color. | Choose color from the colorpicker or enter the Hex color code. ex: `#000000` |
-| **Text color** | Change the text color. | Choose color from the colorpicker or enter the Hex color code. ex: `#000000` |
-| **Loader color** | Change the color of the loader (if loading state is enabled) | Choose color from the colorpicker or enter the Hex color code. ex: `#000000` |
-| **Visibility** | Make the component visible or hidden. | **`{{true}}`** or **`{{false}}`**, By default, its value is set to `{{true}}` |
-| **Disable** | Disable the button. | **`{{true}}`** or **`{{false}}`**, By default, its value is set to `{{false}}` |
-| **Border radius** | Add a border radius to the button using this property. | Any numerical value from `0` to `100` |
-| **Border color** | Change the border color of the button. | Choose color from the colorpicker or enter the Hex color code. ex: `#000000` |
-| **Box Shadow** | Sets the add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow. | Values that represent X, Y, blur, spread, and color. Example: `9px 11px 5px 5px #00000040`` |
+| Background color | Change the background color. | Choose color from the colorpicker or enter the Hex color code. ex: `#000000` |
+| Text color | Change the text color. | Choose color from the colorpicker or enter the Hex color code. ex: `#000000` |
+| Loader color | Change the color of the loader (if loading state is enabled) | Choose color from the colorpicker or enter the Hex color code. ex: `#000000` |
+| Visibility | Make the component visible or hidden. | **`{{true}}`** or **`{{false}}`**, By default, its value is set to `{{true}}` |
+| Disable | Disable the button. | **`{{true}}`** or **`{{false}}`**, By default, its value is set to `{{false}}` |
+| Border radius | Add a border radius to the button using this property. | Any numerical value from `0` to `100` |
+| Border color | Change the border color of the button. | Choose color from the colorpicker or enter the Hex color code. ex: `#000000` |
+| Box Shadow | Sets the add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow. | Values that represent X, Y, blur, spread, and color. Example: `9px 11px 5px 5px #00000040`` |
-## Exposed variables
-
-| Variable | Description |
-| :----------- | :----------- |
-| **buttonText** | This variable stores the text displayed on the button. Its value can be dynamically accessed through JavaScript using the following syntax: `{{components.button1.buttonText}}` |
-
-## Component specific actions (CSA)
-
-Following actions of button component can be controlled using the component specific actions(CSA):
-
-| Actions | Description |
-| :----------- | :----------- |
-| **click** | You can regulate the click of a button via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.button1.click()` |
-| **setText** | button's text can be controlled using component specific action from any of the event handler. You can also use RunJS query to execute component specific actions: `await components.button1.setText('New Button Text')` |
-| **disable** | button can be disabled using the component specific action from any of the event handler. You can also use RunJS query to execute this action: `await components.button1.disable(true)` or `await components.button1.disable(false)` |
-| **visibility** | button can be hidden using the component specific action from any of the event handler. You can also use RunJS query to execute this action: `await components.button1.visibility(true)` or `await components.button1.visibility(false)` |
-| **loading** | The loading state of the button can be set dynamically using the component specific actions from any of the event handler. You can also use this action from RunJS: `await components.button1.loading(true)` or `await components.button1.loading(false)` |
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/docs/widgets/calendar.md b/docs/docs/widgets/calendar.md
index fcc162b9d6..25d1b56d0a 100644
--- a/docs/docs/widgets/calendar.md
+++ b/docs/docs/widgets/calendar.md
@@ -4,14 +4,14 @@ 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**
-
+
@@ -23,12 +23,18 @@ If the builder attempts to add any of the aforementioned components inside the C
` cannot be used as a child component within the Calendar.`
:::
+
+
## Properties
-### Date format
-Determines the format in which any date passed to the calendar via any of the properties will be parsed. It also determines the format in which any date made available by the calendar via exposed variables will be displayed. It uses the date format conventions of [moment.js](https://momentjs.com/). The default Date format is set to `MM-DD-YYYY HH:mm:ss A Z`.
-### Default date
-Determines the date on which the calendar's view will be centered on. By default, the default date is set to the current date using moment.js i.e. `{{moment().format("MM-DD-YYYY HH:mm:ss A Z")}}`. If the calendar is on `month` view, it will show the month on which this date exists. If the calendar is on `week` view, it will show the week on which this date exists. This property needs to be formatted using the `Date format` property which is configurable on the inspector.
+|
Property
|
Description
|
+| :----------- | :----------- |
+| **Date Format** | Determines the format in which any date passed to the calendar via any of the properties will be parsed. It also determines the format in which any date made available by the calendar via exposed variables will be displayed. It uses the date format conventions of [moment.js](https://momentjs.com/). |
+| **Default Date** | Determines the date on which the calendar's view will be centered on. By default, the default date is set to the current date using moment.js i.e. `{{moment().format("MM-DD-YYYY HH:mm:ss A Z")}}`. If the calendar is on `month` view, it will show the month on which this date exists. If the calendar is on `week` view, it will show the week on which this date exists. This property needs to be formatted using the `Date format` property which is configurable on the inspector. |
+
+
+
+
### Events
`Events` property should contain an array of objects, each of which describes the events that the calendar needs to display.
@@ -47,24 +53,31 @@ Assuming that you set the date format to `MM-DD-YYYY HH:mm:ss A Z`, setting the
}
]}}
```
+
-### Event object properties
+
-| Name | Description |
-|------|-------------|
-| title | Title of the event |
-| start | The date(and time) on which this event begins. Needs to be formatted in the `Date format` you've supplied |
-| end | The date(and time) on which this event ends. Needs to be formatted in the `Date format` you've supplied |
-| allDay | Optional. Qualifies the event as an 'All day event', which will pin it to date headers on `day` and `week` level views |
-| tooltip | Tooltip which will be display when the user hovers over the event |
-| color | Background color of the event, any css supported color name or hex code can be used |
-| textColor | Color of the event title, any css supported color name or hex code can be used |
-| textOrientation | Optional. If it is set to `vertical`, the title of the event will be oriented vertically. |
-| resourceId | Applicable only if you're using resource scheduling. This is the id of the resource to which this event correspond to. |
+### Event Object Properties
+
+|
Name
|
Description
|
+|:------|:-------------|
+| **title** | Title of the event |
+| **start** | The date(and time) on which this event begins. Needs to be formatted in the `Date format` you've supplied |
+| **end** | The date(and time) on which this event ends. Needs to be formatted in the `Date format` you've supplied |
+| **allDay** | Optional. Qualifies the event as an 'All day event', which will pin it to date headers on `day` and `week` level views |
+| **tooltip** | Tooltip which will be display when the user hovers over the event |
+| **color** | Background color of the event, any css supported color name or hex code can be used |
+| **textColor** | Color of the event title, any css supported color name or hex code can be used |
+| **textOrientation** | Optional. If it is set to `vertical`, the title of the event will be oriented vertically. |
+| **resourceId** | Applicable only if you're using resource scheduling. This is the id of the resource to which this event correspond to. |
You may supply any other additional property to the event(s). These additional properties will available to you when the calendar widget
exposes any of the events via its exposed variables.
+
+
+
+
### Resources
Specifying resources will make the calendar categorize `week` view and `day` view for each of the resources specified.
@@ -83,138 +96,140 @@ If we specify the `resourceId` of any of the events as `1`, then that event will
-
+
-### Default view
+
+
+
+
+### Default View
Determines whether the calendar would display a `day`, a `week` or a `month`. Setting this property to anything other than these values will make the calendar default to `month` view.
The view that is currently selected will be exposed as the variable `currentView`.
-### Start time on week and day view
+
+
+
+
+### Start Time on Week and Day View
This determines the time at which week view and day view cells begins. Keep in mind that this field accepts a date, but still only the time and timezone(if provided) are taken from this date. The date should be provided in the date format chosen by you in the first property field.
-### End time on week and day view
+
+
+
+
+### End Time on Week and Day View
This determines the time at which week view and day view cells ends. Keep in mind that this field accepts a date, but still only the time and timezone(if provided) are taken from this date. The date should be provided in the date format chosen by you in the first property field.
-### Show toolbar
+
+
+
+
+### Show Toolbar
Determines whether the calendar toolbar should be displayed or not. Click on `Fx` button to programmatically determine the field value to `{{true}}` or `{{false}}`.
-### Show view switcher
+
+
+
+
+### Show View Switcher
Determines whether the calendar's buttons that allow user to switch between `month`, `week` and `day` level views will be displayed. Click on `Fx` button to programmatically determine the field value to `{{true}}` or `{{false}}`.
-### Highlight today
+
+
+
+
+### Highlight Today
Determines whether the today's card on the calendar should be highlighted or not. Click on `Fx` button to programmatically determine the field value to `{{true}}` or `{{false}}`.
-### Show popover when the event is clicked
+
+
+
+
+### Show Popover When the Event is Clicked
Determines whether to display a popover whenever an event is clicked. Click on `Fx` button to programmatically determine the field value to `{{true}}` or `{{false}}`.
-## Events
-
-
-
-
-
-### On Event selected
+
-This event is fired when the user clicks on a calendar event.
+## Events
-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**.
:::
-### 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 General accordion,you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
+
-
+## Component Specific Actions (CSA)
-
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the Calendar component.
-## Layout
-
-
-
-
-
-
-
-### Show on desktop
-
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
-
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-
-## Styles
-
-
-
-
-
-
-
-### 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.
-
-If we set this property to `compact`, the cell sizes will be smaller in `week` and `day` views.
-
-### 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**.
-:::
-
+
## Exposed Variables
| 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}}`|
-## Component specific actions (CSA)
+
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the calendar component.
\ No newline at end of file
+
+
+## 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 General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
+
+
+
+
+
+## Layout
+
+|
Layout
|
Description
|
Configuration Options
|
+|:---------------|:------------|:---------------|
+| **Show on Desktop** | Toggle on or off to display the widget in desktop view. | The value can be programmatically determined by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.|
+| **Show on Mobile** | Toggle on or off to display the widget in desktop view. | The value can be programmatically determined by clicking on `Fx` to set the value `{{true}}` or `{{false}}`. |
+
+
+
+
+
+## Styles
+
+| 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**.
+:::
+
+
diff --git a/docs/docs/widgets/chart.md b/docs/docs/widgets/chart.md
index c892dafff2..983d00026f 100644
--- a/docs/docs/widgets/chart.md
+++ b/docs/docs/widgets/chart.md
@@ -4,20 +4,72 @@ title: Chart
---
# Chart
-The Chart component allows you to visualize your data. In this document, we'll go through all the configuration options for the **Chart** component.
+The Chart component allows you to visualize your data. In this document, we'll go through all the configuration options for the **Chart** component.
+
+
## Title
Under the `Title` property, you can enter a title that displays at the top of the chart component.
+
+
+
+
## Plotly JSON Chart Schema
You can use the toggle to enable or disable `Use Ploty JSON Schema`. Additional, you can enable or disable it dynamically configure the value by clicking on `fx` and entering a logical expression.
+
+
+
+
## Properties
-#### Chart type
-You can select the type from the dropdown options or dynamically configure the value by clicking on `fx` and entering a logical expression that returns `line`, `pie` or `bar`.
+|
Property
|
Description
|
+|:----------- |:----------- |
+| Chart type | You can select the type from the dropdown options or dynamically configure the value by clicking on `fx` and entering a logical expression that returns `line`, `pie` or `bar`. |
+
+
+
+
+
+## Events
+
+|
Event
|
Description
|
+|:----------- |:----------- |
+| On data point click | Triggers whenever the user clicks on data points. |
+| On double click | Triggers whenever the user double clicks on the chart area. |
+
+:::info
+Check [Action Reference](/docs/category/actions-reference) docs to get detailed information about all the **Actions**.
+:::
+
+
+
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+
+
+
+## Exposed Variables
+
+
+| 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`. |
+
+
+
+
## Chart data
The data needs to be in JSON format and should have `x` and `y` keys. The component supports string and object JSON data types.
@@ -34,9 +86,17 @@ The data needs to be in JSON format and should have `x` and `y` keys. The compon
]
```
+
+
+
+
## Marker Color
Available for line and bar charts, `Marker Color` defines the color of the line or bars on the chart.
+
+
+
+
## Options
|
Option
|
Description
|
Configuration Options
|
|:------------------|:------------|:------------------------------|
@@ -44,27 +104,20 @@ Available for line and bar charts, `Marker Color` defines the color of the line
| Show axis | Hides or displays the axes on the chart. | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
| Show grid lines | Hides or displays the grid lines on the chart. | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
-## Events
+
-**On data point click**
-Triggers whenever the user clicks on data points.
-
-**On double click**
-Triggers whenever the user double clicks on the chart area.
-
-:::info
-Check [Action Reference](/docs/category/actions-reference) docs to get detailed information about all the **Actions**.
-:::
+
## Devices
-**Show on desktop**
+|
Device
|
Description
|
+|:----------- |:----------- |
+| Show on desktop | Makes the component visible in desktop view. You can set it with the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
+| Show on mobile | Makes the component visible in mobile view. You can set it with the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
-Makes the component visible in desktop view. You can set it with the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression.
+
-**Show on mobile**
-
-Makes the component visible in mobile view. You can set it with the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression.
+
## Plotly Configuration
@@ -290,9 +343,13 @@ In the **JSON description**, the value needs to be the `data` array with x and y
Check the **[Plotly documentation](https://plotly.com/chart-studio-help/json-chart-schema/#more-examples)** to explore the all type of charts available.
:::
+
---
-# Styles
+
+
+
+## Styles
|
Field Property
|
Description
|
Configuration Options
|
|:----------------|:------------|:--------------|
@@ -302,18 +359,4 @@ Check the **[Plotly documentation](https://plotly.com/chart-studio-help/json-cha
| Visibility | Sets the visibility of the component. | Enable/disable using the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression.|
| Disables | Allows you to enable/disable a component. The component is not interactive when it is disabled. | Enable/disable using the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression.|
-
-## Exposed variables
-
-|
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`. |
-
-
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/checkbox.md b/docs/docs/widgets/checkbox.md
index 9e6639d508..1e04095a38 100644
--- a/docs/docs/widgets/checkbox.md
+++ b/docs/docs/widgets/checkbox.md
@@ -4,113 +4,97 @@ 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.
:::
-## How To Use Checkbox Widget
-
-
+
## Properties
-### Label
-
-The text is to be used as the label for the checkbox. This field expects a `String` input.
-
-### Default Status
-
-The property is used to set 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.
-
-### 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**.
-
-
-
-
+|
Property
|
Description
|
+|:----------- |:----------- |
+| 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. |
-#### On check
+
-On check event is triggered when checkbox input is checked.
-#### On uncheck
+## Events
-On uncheck event is triggered when checkbox input is unchecked.
+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**.
+
+|
Events
|
Description
|
+|:----------- |:----------- |
+| On check | On check event is triggered when checkbox input is checked. |
+| On uncheck | On uncheck event is triggered when checkbox input is unchecked. |
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
:::
-### General
-#### Tooltip
+
+
+
+
+## Component Specific Actions (CSA)
+
+Following actions of Checkbox component can be controlled using the component specific actions(CSA):
+
+|
Actions
|
Description
|
How To Access
|
+|:----------- |:----------- |:---------|
+| setChecked | Changes the status of the checkbox component using component specific action from within any event handler.| Trigger it from the RunJS query: `await components.checkbox1.setChecked(true)` or `await components.checkbox1.setChecked(false)` |
+
+
+
+
+
+## Exposed Variables
+
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:----------|
+| value | Holds the boolean value `true` if the checkbox is checked and `false` if unchecked.| Access the value dynamically using JS: `{{components.checkbox1.value}}`|
+
+
+
+
+
+## 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 General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
+
-
+
+
+## Layout
+
+|
Layout
|
Description
|
+|:----------- |:----------- |
+| Show on desktop | Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}` |
-### Layout
-
-
-
-
-
-
-
-#### Show on desktop
-
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-#### Show on mobile
-
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-
-
-
-
-
-
-### Text color
-
-Change the color of the Text in checkbox by entering the `Hex color code` or choosing a color of your choice from the color-picker.
-
-### Checkbox color
-
-You can change the color of the checkbox by entering the `Hex color code` or choosing a color of your choice from the color-picker.
-
-### 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}}`.
-
-### Disable
-
-This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+|
Style
|
Description
|
Default Value
|
+|:----- |:--------- |:------------- |
+| Text color | Change the color of the text in the widget by providig the `Hex color code` or choosing a color from the picker. | |
+| Checkbox color | Change the color of the toggle switch in the widget by providig 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}}`. |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed Variables
-
-| Variables | Description |
-| ----------- | ----------- |
-| value | This variable holds the boolean value `true` if the checkbox is checked and `false` if unchecked. You can access the value dynamically using JS: `{{components.checkbox1.value}}`|
-
-## Component specific actions (CSA)
-
-Following actions of checkbox component can be controlled using the component specific actions(CSA):
-
-| Actions | Description |
-| ----------- | ----------- |
-| setChecked | You can change the status of the checkbox component using component specific action from within any event handler. Additionally, you have the option to trigger it from the RunJS query: `await components.checkbox1.setChecked(true)` or `await components.checkbox1.setChecked(false)` |
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/docs/widgets/circular-progressbar.md b/docs/docs/widgets/circular-progressbar.md
index 1914c9f6f8..43c2c747d1 100644
--- a/docs/docs/widgets/circular-progressbar.md
+++ b/docs/docs/widgets/circular-progressbar.md
@@ -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.
@@ -12,76 +12,75 @@ Circular progress bar widget can be used to show progress in a progress circle.
+
+
## Properties
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-
-
-
+|
Properties
|
Description
|
Expected Value
|
+| ----------- | ----------- | --------------- |
+| Text | Sets a text inside the progress circle.| It expects a `String`, you can also use js to dynamically update the text as the progress changes. |
+| Progress | Sets the progress of the widget. | Progress should be an integer between 0 and 100.|
-| properties | description | Expected Value |
-| ----------- | ----------- | --------------- |
-| Text | We can set a text inside the progress circle.| It expects a `String`, you can also use js to dynamically update the text as the progress changes. |
-| Progress | It can be used to set the progress of the widget. | Progress should be an integer between 0 and 100.|
+
-### General
-#### Tooltip
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+
+
+
+## Exposed Variables
+
+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 the mouse pointer over the widget.
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-
-
-
-
-
-
-| Layout | description |
+|
Layout
|
Description
|
| ----------- | ----------- |
| Show on desktop | Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
| Show on mobile | Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
-## Styles
-
-
-
-
-
-| properties | description | Expected Value |
+
+
+## Styles
+
+|
Property
|
Description
|
Expected Value
|
| ----------- | ----------- | ------------------- |
-| Color | To define stroke color.| `HEX color code` or choose color from color-picker. |
-| Text color | To define color of the text inside circular progress bar.| `HEX color code` or choose color from color-picker. |
-| Text size | To define the size of the text | Value must between 0-100. |
-| Stroke width | To define the width of stroke | Value must between 0-100.|
-| Counter Clockwise | Whether to rotate progress bar in counterclockwise direction. | It accepts `{{true}}` and `{{false}}`, Default value is `false`.|
-| Circle ratio | To define ratio of the full circle diameter the progressbar should use. | It accepts numerical value and the default is `1`. |
-| 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}}`. |
+| Color | Defines stroke color.| `HEX color code` or choose color from color-picker. |
+| Text color | Defines color of the text inside circular progress bar.| `HEX color code` or choose color from color-picker |
+| Text size | Defines the size of the text | Value must between 0-100 |
+| Stroke width | Defines the width of stroke | Value must between 0-100|
+| Counter clockwise | Whether to rotate progress bar in counterclockwise direction. | Accepts `{{true}}` and `{{false}}`, Default value is `false`|
+| Circle ratio | Defines ratio of the full circle diameter the progressbar should use. | Accepts numerical value and the default is `1` |
+| Visibility | Toggle on or off to control the visibility of the widget. | 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}}` |
:::info
Circular progress bar widget uses [react-circular-progress](https://github.com/kevinsqi/react-circular-progressbar) package. Check the repo for further more details about properties and styles.
:::
-
-## Exposed variables
-
-There are currently no exposed variables for the component.
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/code-editor.md b/docs/docs/widgets/code-editor.md
index 6434cd0e3f..70000f3c24 100644
--- a/docs/docs/widgets/code-editor.md
+++ b/docs/docs/widgets/code-editor.md
@@ -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.
@@ -12,23 +12,19 @@ Code Editor widget is a versatile text editor for editing code and supports seve
+
+
## Properties
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-
-
-
-
-
-
-| properties | description | Expected value |
-| ----------- | ----------- | ----------------- |
-| Placeholder | It specifies a hint that describes the expected value.| This field requires a `String` value |
-| Mode | It is used to specify the language to be used for the code-editor.| See `info` below for the list of all supported languages |
-| Show Line Number | This property is used to show or hide line numbers to the left of the editor.| This fields expects a boolean value `{{true}}` or `{{false}}` |
+|
Property
|
Description
|
Expected Value
|
+|:----------- |:----------- |:----------------- |
+| Placeholder | Specifies a hint that describes the expected value.| This field requires a `String` value |
+| Mode | Specifies the language to be used for the code-editor.| See `info` below for the list of all supported languages |
+| Show line number | Show or hides line numbers to the left of the editor.| This fields expects a boolean value `{{true}}` or `{{false}}` |
:::info
@@ -168,52 +164,56 @@ Any property having `Fx` button next to its field can be **programmatically conf
:::
-### General
-#### Tooltip
+
+
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+
+
+
+## Exposed Variables
+
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:---------- |
+| value | This variable holds the value whenever the user inputs anything on the code-editor . | Access the value dynamically using JS: `{{components.codeeditor1.value}}`|
+
+
+
+
+
+## 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 General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
|
+|:----------- |:----------- |
| Show on desktop | Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
| Show on mobile | Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
-## Styles
-
-
-
-
-
-| Styles | 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}}`. |
-| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. 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 editor. The field expects only numerical value from `1` to `100`, default is `0`. |
+
-## Exposed Variables
+## Styles
-| Variables | Description |
-| ----------- | ----------- |
-| value | This variable holds the value whenever the user inputs anything on the code-editor . You can access the value dynamically using JS: `{{components.codeeditor1.value}}`|
+|
Styles
|
Description
|
Default Value
|
+|:----------- |:----------- |:----------- |
+| 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}}` |
+| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. | By default, its value is set to `{{false}}` |
+| Border radius | Modifies the border radius of the editor. The field expects only numerical value from `1` to `100`. | Default is `0`. |
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/color-picker.md b/docs/docs/widgets/color-picker.md
index 2c3260315c..92b494a1e5 100644
--- a/docs/docs/widgets/color-picker.md
+++ b/docs/docs/widgets/color-picker.md
@@ -5,21 +5,17 @@ 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
-
-
-
-
-
+
## Properties
-### Default Color
+### Default color
The data needs to be an valid hex color
-- One can change default color either from color picker or using fx (need to provide only respective hex value)
+- One can change default color either from color picker or using `fx` (need to provide only respective hex value)
**Example:**
@@ -28,50 +24,78 @@ Valid color : #000000 or #000
Invalid Color : #0000, "black" , rgb(0,0,0) ,
```
-
-
-
-
+
+
## Events
To add an event to a color-picker 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**.
-
-
-
+|
Event
|
Description
|
+|:----------- |:----------- |
+| On change | On change event is triggered when the color is changed on the color-picker|
-### On change
+
-On change event is triggered when the color is changed on the color-picker.
+## Component Specific Actions (CSA)
+
+Following actions of Color Picker component can be controlled using the component specific actions(CSA):
+
+|
Actions
|
Description
|
How To Access
|
+|:----------- |:----------- |:----------- |
+| setColor | Set a color on the color component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.colorpicker1.setColor('#64A07A')` |
+
+
+
+
+
+## Exposed Variables
+
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:---------- |
+| selectedColorHex | Gets updated with HEX color code whenever a user selects a color from the color picker.| Access the value dynamically using JS: `{{components.colorpicker1.selectedColorHex}}`|
+| selectedColorRGB | Gets updated with RGB color code whenever a user selects a color from the color picker. | Access the value dynamically using JS: `{{components.colorpicker1.selectedColorRGB}}`|
+| selectedColorRGBA | Gets updated with RGBA color code whenever a user selects a color from the color picker.| Access the value dynamically using JS: `{{components.colorpicker1.selectedColorRGBA}}`|
+
+
+
+
## Layout
-| Layout | description | Expected value |
-| --------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | Programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | Programmatically determinine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+
+
+
+
## Styles
-| 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 visible after the app is deployed. By default, it's set to `{{true}}`. |
+|
Style
|
Description
|
Expected Value
|
+|:---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |:---------- |
+| Visibility | Toggle on or off to control the visibility of the widget.| Programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not visible after the app is deployed. By default, it's set to `{{true}}` |
-### Actions
+
|
+|:----------- |:----------- |:------------------ |
| setColor | Set the color. | `color` eg - `#ffffff` |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Example: Selecting/changing color from the color picker and getting respective hex, rgb and rgba value of selected color
+**Example: Selecting/changing color from the color picker and getting respective hex, rgb and rgba value of selected color**
- Let's start by creating a new app and then dragging the Color Picker widget onto the canvas.
- Click on the Color Picker widget, a picker pop-up will appear, one can select desired color from the picker.
- In order to close the appeared picker pop-up, one need's to move away mouse from the picker pop-up and picker pop-up will fade away.
@@ -79,22 +103,8 @@ Any property having `Fx` button next to its field can be **programmatically conf
-
+
-## Exposed Variables
-
-| Variables | Description |
-| ----------- | ----------- |
-| selectedColorHex | This variable gets updated with HEX color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorHex}}`|
-| selectedColorRGB | This variable gets updated with RGB color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorRGB}}`|
-| selectedColorRGBA | This variable gets updated with RGBA color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorRGBA}}`|
-
-## Component specific actions (CSA)
-
-Following actions of color picker component can be controlled using the component specific actions(CSA):
-
-| Actions | Description |
-| ----------- | ----------- |
-| setColor | Set a color on the color component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.colorpicker1.setColor('#64A07A')` |
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/docs/widgets/container.md b/docs/docs/widgets/container.md
index d387bf7ec8..ffbc46ab5c 100644
--- a/docs/docs/widgets/container.md
+++ b/docs/docs/widgets/container.md
@@ -6,12 +6,6 @@ title: Container
Containers are used to group widgets together. You can move the desired number of widgets inside a container to organize your app better.
-
-
-
-
-
-
:::caution Restricted components
In order to avoid excessively complex situations, certain components, namely **Calendar** and **Kanban**, are restricted from being placed within the Container component using drag-and-drop functionality.
@@ -20,80 +14,77 @@ If the builder attempts to add any of the aforementioned components inside the c
` cannot be used as a child component within the container.`
:::
-## Enabling vertical scroll on container
+
+
+## Enabling Vertical Scroll on Container
To enable the vertical scroll on the container, drag and place any component to the bottom grid of the container and the container will automatically enable the scrolling.
-
-
-
-
-## 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}}`.
+## 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}}`.
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}}`.
-
+
-
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+## Exposed Variables
+
+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 General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-
-
-
+|
Layout
|
Description
|
+|:----------- |:----------- |
+| 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 widget will display in the mobile view else it will not appear.|
-| Layout | description |
-| ----------- | ----------- |
-| 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.|
+
## Styles
-
-
-
-
-
-
-| Style | Description |
-| ----------- | ----------- |
-| Background Color | You can change the background color of the Container by entering the `Hex color code` or choosing a color of your choice from the color picker. |
-| Border radius | Use this property to modify the border radius of the container. The field expects only numerical value from `1` to `100`, default is `0`. |
-| Border Color | You can change the border color of the Container 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}}`. |
-| 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}}`. |
+|
Style
|
Description
|
Default Value
|
+|:----------- |:----------- |:---------|
+| Background color | Change the background color of the Container by entering the `Hex color code` or choosing a color of your choice from the color picker. | |
+| Border radius | Modifies the border radius of the container. The field expects only numerical value from `1` to `100`.| Default is `0` |
+| Border color | Changes the border color of the Container by entering the `Hex color code` or choosing a color of your choice from the color picker. | |
+| Visibility | Controls 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}}` |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-
-## Exposed variables
-
-There are currently no exposed variables for the component.
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/docs/widgets/custom-component.md b/docs/docs/widgets/custom-component.md
index 4752eab28b..6de4eb7647 100644
--- a/docs/docs/widgets/custom-component.md
+++ b/docs/docs/widgets/custom-component.md
@@ -5,19 +5,21 @@ 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.
-
+
+
+
## Properties
### 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:**
@@ -74,43 +76,58 @@ ReactDOM.render(, document.body);
`Tooljet.connectComponent` acts as a HOC and it is required to get access to the data passed into the custom component and run the query
:::
-### General
-#### Tooltip
+
+
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+
+
+
+## Exposed Variables
+
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:---------- |
+| data | This variable will hold the variables assigned inside the `code` for custom component.| Access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
+
+
+
+
+
+## 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 General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+
+
+
+
## Styles
-| 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 visible after the app is deployed. By default, it's set to `{{true}}`. |
+|
Style
|
Description
|
Default value
|
+|:---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |:--------- |
+| 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 visible after the app is deployed. | By default, it's set to `{{true}}`. |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed Variables
-
-| Variables | Description |
-| ----------- | ----------- |
-| data | This variable will hold the variables assigned inside the `code` for custom component. You can access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
-
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/date-range-picker.md b/docs/docs/widgets/date-range-picker.md
index 0b27cf4bca..c893615588 100644
--- a/docs/docs/widgets/date-range-picker.md
+++ b/docs/docs/widgets/date-range-picker.md
@@ -1,93 +1,92 @@
---
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.
-## How To Use Date Range Picker Widget
-
-
+
## Properties
-### Default start date
-
-Set the start date to be selected by default in the widget
-
-### Default end date
-
-Set the start date to be selected by default in the widget
-
-### Format
-
-The format of the date selected by the date picker. Default date format is **DD/MM/YYYY**. Date format should be followed as ISO 8601 as mentioned in the [moment documentation](https://momentjs.com/docs/).
-
-### 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 General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+|
Property
|
Description
|
+|:----------- |:----------- |
+| Default start date | Set the start date to be selected by default in the widget |
+| Default end date | Set the start date to be selected by default in the widget |
+| Format | The format of the date selected by the date picker. Default date format is **DD/MM/YYYY**. Date format should be followed as ISO 8601 as mentioned in the [moment documentation](https://momentjs.com/docs/). |
+
+
## Events
Date range picker supports the following events:
-### On select
-
-The On select event is triggered when the a start date and end date is selected on the picker. Just like any other event on ToolJet, you can set multiple handlers for on select event.
+|
Event
|
Description
|
+|:----------- |:----------- |
+| On select | The On select event is triggered when the a start date and end date is selected on the picker. Just like any other event on ToolJet, you can set multiple handlers for on select event. |
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
:::
-
+
-
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+## Exposed Variables
+
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:--------- |
+| endDate | This variable holds the date of the endDate selected in the component. | Access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
+| startDate | This variable holds the value assigned inside the `code` for custom component. | Access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
+
+
+
+
+
+## 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 General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
+
+
+
+
+
## Layout
-### Show on desktop
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
+
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-### Border Radius
-
-Use this property to modify the border radius of the date range picker. The field expects only numerical value from `1` to `100`, default is `0`.
-### 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}}`.
+|
Style
|
Description
|
Default Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Border radius | This is to modify the border radius of the date range picker. The field expects only numerical value from `1` to `100`| By default, it's set to `0`|
+| 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}}` |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed variables
-
-| Variables | Description |
-| ----------- | ----------- |
-| endDate | This variable will hold the date of the endDate selected in the component. You can access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
-| startDate | This variable will hold the value assigned inside the `code` for custom component. You can access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
-
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/docs/widgets/datepicker.md b/docs/docs/widgets/datepicker.md
index 22f19e4955..e9edbda358 100644
--- a/docs/docs/widgets/datepicker.md
+++ b/docs/docs/widgets/datepicker.md
@@ -1,54 +1,22 @@
---
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.
-
-
-
-
-
-
-## How To Use Datepicker Widget
-
-
-
-## Events
-
-To add an event to a date-picker 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**.
-
-### On select
-
-On select event is triggered when an date is selected.
-
-:::info
-Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
-:::
+
## Properties
-### Default value
-
-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`.
-
-### Format
-
-The format of the date selected by the date picker. Default date format is **DD/MM/YYYY**. Date format should be followed as ISO 8601 as mentioned in the [moment documentation](https://momentjs.com/docs/). This field requires a `String` input. Ex: `DD/MM`, `MM/YYYY`, `YY/MM`, `DD/MM/YYYY` etc.
-
-### 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`.
+|
Property
|
Description
|
+|:----------- |:----------- |
+| Default value | 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` |
+| 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` |
Example for disabling the 9th of January:
```js
@@ -57,6 +25,44 @@ Example for disabling the 9th of January:
Now user won't be able to select the mentioned date since it will be disabled.
+
+
+
+
+## Events
+
+To add an event to a date-picker 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**.
+
+|
Event
|
Description
|
+|:----------- |:----------- |
+| On select | On select event is triggered when an date is selected |
+
+:::info
+Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
+:::
+
+
+
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+
+
+
+## Exposed Variables
+
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- | :---------- |
+| 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}}`|
+
+
+
+
+
## Validation
### Custom Validation
@@ -67,52 +73,43 @@ Example of validation for selecting dates that are after the current date:
```js
{{moment(components.datepicker1.value, 'DD/MM/YYYY').isAfter(moment()) ? true : 'Date should be after today'}}
```
-### General
-#### Tooltip
+
+
+
+
+
+## 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 General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-### Show on desktop
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
+
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-### 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 date-picker. The field expects only numerical value from `1` to `100`, default is `0`.
+|
Style
|
Description
|
Default Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| 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 date-picker. 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**.
:::
-## Exposed variables
-
-| Variables | Description |
-| ----------- | ----------- |
-| value | This variable will hold the date selected on the component, the date value will be returned according to the format set in the datepicker properties. You can access the value dynamically using JS: `{{components.datepicker1.value}}`|
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/docs/widgets/divider.md b/docs/docs/widgets/divider.md
index 469b6626d0..715bcaa02c 100644
--- a/docs/docs/widgets/divider.md
+++ b/docs/docs/widgets/divider.md
@@ -4,14 +4,26 @@ title: Divider
---
# Divider
-Divider widget is used to add separator between components.
+**Divider** widget is used to add separator between components.
-
+
-
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+## Exposed variables
+
+There are currently no exposed variables for the component.
+
+
+
+
+
## General
### Tooltip
@@ -19,34 +31,25 @@ A Tooltip is often used to specify extra information about something when the us
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
|
+|:----------- |:----------- |
| Show on Desktop | This property have toggle switch. If enabled, the divider will display in the desktop view else it will not appear. |
| Show on Mobile | This property have toggle switch. If enabled, the divider will display in the mobile view else it will not appear. |
-## Styles
-
-
-
-
-
-| properties | description |
+
+
+## Styles
+
+|
Style
|
Description
|
| ----------- | ----------- |
| Divider Color | It is used to set the color of the divider. Use hex code to set the background color. |
| Visibility | This property is used to set the visibility of the divider. The property accepts Boolean value. |
@@ -55,11 +58,4 @@ Under the General accordion, you can set the value in the string format.
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed variables
-
-There are currently no exposed variables for the component.
-
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/docs/widgets/dropdown.md b/docs/docs/widgets/dropdown.md
index d50bfc5d0f..0882bb0ddc 100644
--- a/docs/docs/widgets/dropdown.md
+++ b/docs/docs/widgets/dropdown.md
@@ -4,57 +4,21 @@ 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.
-
-
-
-
-
-
-## Events
-
-
-
-
-
-
-
-### Event: On select
-
-On select event is triggered when an option is selected.
-
-### Event: On search text changed
-
-This event is triggered whenever the user searches through the options by typing on the dropdown's input box. The corresponding search text will be exposed as `searchText`.
+
## Properties
-
-
-
-
-
-
-### Label
-
-Set the value of the label in the dropdown. The value can also be set dynamically using JavaScript. For example, set the Label value to `Select the {{components.text1.text}}`
-
-### Default value
-
-Specify the default selected option in the dropdown.
-
-### Option value
-
-The option values correspond to the different options available in the dropdown. Dynamically set the option values based on your query, for example: `{{queries.datasource.data.map(item => item.value)}}`.
-
-### Option labels
-
-The option labels represent the displayed labels for each value in the dropdown list. Dynamically set the option labels based on your query, for example: `{{queries.datasource.data.map(item => item.value)}}`.
-
-### Advanced
-
-Configure the dropdown options and manage them by providing an array of objects as data. You can dynamically generate this data using JavaScript.
+|
Property
|
Description
|
+|:----------- |:----------- |
+| Label | Set the value of the label in the dropdown. The value can also be set dynamically using JavaScript. For example, set the Label value to `Select the {{components.text1.text}}` |
+| Default value | Specify the default selected option in the dropdown |
+| Option value | The option values correspond to the different options available in the dropdown. Dynamically set the option values based on your query, for example: `{{queries.datasource.data.map(item => item.value)}}` |
+| Option labels | The option values correspond to the different options available in the dropdown. Dynamically set the option values based on your query, for example: `{{queries.datasource.data.map(item => item.value)}}` |
+| Options loading state | Enable this property to display a loading state in the widget. By default, it is turned off. You can programmatically toggle it by setting the values to `{{true}}` or `{{false}}` using the `Fx` button |
+| Default placeholder | Set a placeholder value that appears in the dropdown when no default option is selected or set |
+| Advanced | The option labels represent the displayed labels for each value in the dropdown list. Dynamically set the option labels based on your query, for example: `{{queries.datasource.data.map(item => item.value)}}` |
For example:
```json
@@ -62,26 +26,61 @@ For example:
```
Each object in the array should include the following key-value pairs:
-| Key | Value |
-| --- | ----- |
+|
Key
|
Value
|
+|:--- |:----- |
| label | Option label |
| value | Option value |
| disable | Set to true to disable the option for selection, and false to keep it enabled |
| visible | Set to true to display the option in the dropdown list, and false to hide it |
-### Options loading state
+
-Enable this property to display a loading state in the widget. By default, it is turned off. You can programmatically toggle it by setting the values to `{{true}}` or `{{false}}` using the `Fx` button.
+
-### Default placeholder
+## Events
-Set a placeholder value that appears in the dropdown when no default option is selected or set.
+|
Event
|
Description
|
+|:----------- |:----------- |
+| On select | On select event is triggered when an option is selected |
+| On search text changed | This event is triggered whenever the user searches through the options by typing on the dropdown's input box. The corresponding search text will be exposed as `searchText` |
+
+
+
+
+
+## Component Specific Actions (CSA)
+
+|
Actions
|
Description
|
How To Access
|
+|:-------- |:----------- |:-------- |
+| 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)` |
+
+
+
+
+
+## Exposed Variables
+
+|
Variable
|
Description
|
How To Access
|
+|:-------- |:----------- |:--------- |
+| Value | Holds the value of the currently selected item on the dropdown.| Value can be accesed using `{{components.dropdown1.value}}` |
+| searchText | This variable is initially empty and will hold the value whenever the user searches on the dropdown. | searchText's value can be accesed using`{{components.dropdown1.searchText}}` |
+| label | The variable label holds the label name of the dropdown. | label's value can be accesed using`{{components.dropdown1.searchText}}` |
+| optionLabels | The optionLabels holds the option labels for the values of the dropdown. | optionLabels can be accesed using`{{components.dropdown1.optionLabels}}` for all the option labels in the array form or `{{components.dropdown1.optionLabels[0]}}` for particular option label |
+| selectedOptionLabel | The variable holds the label of the selected option in the dropdown components. | The selected option label can be accessed dynamically using `{{components.dropdown1.selectedOptionLabel}}` |
+
+
+
+
## Validation
-### Custom validation
+### 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.
+
+
+
+
## General
### Tooltip
@@ -90,71 +89,33 @@ A Tooltip is often used to specify extra information about something when the us
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-### Show on desktop
-
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
-
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-
-## Styles
-
-
-
-
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-### Border Radius
+
-Use this property to modify the border radius of the dropdown. The field expects only numerical value from `1` to `100`, default is `0`.
+## Styles
-### 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}}`.
-
-### Selected text color
-
-Change the text color of the selected option in the widget by providing the `HEX color code` or choosing the color from color picker.
-
-### 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}}`.
-
-### Align text
-
-You can align the text inside the widget in following ways: left, right, center, justified
+|
Style
|
Description
|
+|:--------------- |:----------------------------------------- |
+| Border radius | Use this property to modify the border radius of the dropdown. The field expects only numerical value from `1` to `100`. By default, it's set to `0` |
+| 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}}` |
+| Selected text color | Change the text color of the selected option in the widget by providing the `HEX color code` or choosing the color from color picker|
+| 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}}` |
+| Align text | You can align the text inside the widget in following ways: left, right, center, justified |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed variables
-
-
-
-
-
-
-
-| Variable | Description |
-| -------- | ----------- |
-| Value | This variable holds the value of the currently selected item on the dropdown. Value can be accesed using `{{components.dropdown1.value}}` |
-| searchText | This variable is initially empty and will hold the value whenever the user searches on the dropdown. searchText's value can be accesed using`{{components.dropdown1.searchText}}` |
-| label | The variable label holds the label name of the dropdown. label's value can be accesed using`{{components.dropdown1.searchText}}` |
-| optionLabels | The optionLabels holds the option labels for the values of the dropdown. optionLabels can be accesed using`{{components.dropdown1.optionLabels}}` for all the option labels in the array form or `{{components.dropdown1.optionLabels[0]}}` for particular option label |
-| selectedOptionLabel | The variable holds the label of the selected option in the dropdown components. The selected option label can be accessed dynamically using `{{components.dropdown1.selectedOptionLabel}}` |
-
-## Component specific actions (CSA)
-
-| Actions | Description |
-| -------- | ----------- |
-| selectOption | You can set an option on the dropdown component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.dropdown1.setOption(1)` |
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/docs/widgets/file-picker.md b/docs/docs/widgets/file-picker.md
index e428b9acec..50e998e2d9 100644
--- a/docs/docs/widgets/file-picker.md
+++ b/docs/docs/widgets/file-picker.md
@@ -1,16 +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.
@@ -18,73 +12,24 @@ Filepicker widget allows the user to drag and drop files or upload files by brow
To accept any/all file type(s), set `Accept file types` to an empty value.
:::
-
-
-
-
-
-
:::tip
[MIME](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows.
:::
-## Events
-
-
-
-
-
-
-
-### On file selected
-
-On file selected event is triggered when one or more files are selected by the selector dialogue box.
-
-### On file loaded
-
-On file loaded event is triggered when a file is loaded in the browser.
-
-### On file deselected
-
-On file selected event can be triggered when one or more files are removed from the picker.
-
-:::info
-Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to refer or display images/PDFs using base64 string
-:::
+
## Properties
-### Instruction Text
-
-Instruction text can be set to give information on the file picker.
-
-### Use Drop zone
-
-Creates a drag & drop zone. Files can be dragged and dropped to the "drag & drop" zone.
-
-### Use File Picker
-
-On clicking it invokes the default OS file prompt.
-
-### Pick multiple files
-
-Allows drag and drop (or selection from the file dialog) of multiple files. `Pick multiple files` is disabled by default.
-
-### Max file count
-
-The maximum accepted number of files The default value is `2`.
-
-### Accept file types
-
-By providing types, you can make the dropzone accept specific file types and reject the others. Example: `{{"image/*,application/pdf,application/msword"}}`
-
-### Max size limit
-
-Maximum file size (in bytes).
-
-### Min size limit
-
-Minimum file size (in bytes).
+|
Property
|
Description
|
+|:----------- |:----------- |
+| Instruction text | Instruction text can be set to give information on the file picker. |
+| Use drop zone | Creates a drag & drop zone. Files can be dragged and dropped to the "drag & drop" zone. |
+| Use file picker | On clicking it invokes the default OS file prompt. |
+| Pick multiple files | Allows drag and drop (or selection from the file dialog) of multiple files. `Pick multiple files` is disabled by default. |
+| Max file count | The maximum accepted number of files The default value is `2`. |
+| Accept file types | By providing types, you can make the dropzone accept specific file types and reject the others. Example: `{{"image/*,application/pdf,application/msword"}}`. |
+| Max size limit | Maximum file size (in bytes). |
+| Min size limit | Minimum file size (in bytes). |
:::tip
Files can be accepted or rejected based on the file types, maximum file count, maximum file size (in bytes) and minimum file size (in bytes).
@@ -92,87 +37,96 @@ If `Pick multiple files` is set to false and additional files are dropped, all f
Any file that does not have a size in the range of `Max size limit` and `Min size limit` will be rejected.
:::
-## Options
+
-
+
-
+## Events
+
+|
Event
|
Description
|
+|:----------- |:----------- |
+| On file selected | On file selected event is triggered when one or more files are selected by the selector dialogue box. |
+| On file loaded | On file loaded event is triggered when a file is loaded in the browser. |
+| On file deselected | On file selected event can be triggered when one or more files are removed from the picker. |
+
+:::info
+Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to refer or display images/PDFs using base64 string
+:::
-### Parse content
+
-Parse the selected files, supports **CSV**, **xls**, and **xlsx** files.
+## Component Specific Actions (CSA)
-### File type
-If **Parse content** is enabled, options to auto-detect files and parse content or parse selected file types.
+
+| Actions | Description | How To Access |
+|:--------|:-----------:|:------------:|
+|
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()` |
+
+
+
+
+
+## Exposed Variables
+
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:-------- |
+| file | This variable holds the array of objects where each object represents the file loaded on the file picker component. Each object has the following keys: **name**, **type**, **content**, **dataURL**, **base64Data**, **parsedData**, **filePath**. | The values can be accesed using `{{components.filepicker1.file[0].base64Data}}`|
+
+
+
+
+
+## Options
+
+|
Option
|
Description
|
+|:----------- |:----------- |
+| Parse content | Parse the selected files, supports **CSV**, **xls**, and **xlsx** files. |
+| File type | If **Parse content** is enabled, options to auto-detect files and parse content or parse selected file types. |
:::info
- If **Parse content** option is toggled off, **File Type** option will not be available.
- If the **Parse content** option is toggled on, it only parses the next file that is selected, not the already selected one.
:::
-### General
-#### Tooltip
+
+
+
+
+## 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 General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-
-
-
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-### Show on desktop
-
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
-
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-
-
-
-
-
-
-### 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`, default is `0`.
+|
Style
|
Description
|
Default Value
|
+|:----------- |:----------- |:----------- |
+| 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 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**.
:::
-## Exposed Variables
-
-| Variables | Description |
-| ----------- | ----------- |
-| file | This variable holds the array of objects where each object represents the file loaded on the file picker component. Each object has the following keys: **name**, **type**, **content**, **dataURL**, **base64Data**, **parsedData**, **filePath**. The values can be accesed using `{{components.filepicker1.file[0].base64Data}}` |
-
-## Component specific actions (CSA)
-
-| Actions | Description |
-| -------- | ----------- |
-| clearFiles() | You can clear the selected files on the filepicker component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.filepicker1.clearFiles()` |
+
diff --git a/docs/docs/widgets/form.md b/docs/docs/widgets/form.md
index e78510b19d..1f8a2e265b 100644
--- a/docs/docs/widgets/form.md
+++ b/docs/docs/widgets/form.md
@@ -5,34 +5,69 @@ title: Form
The **Form** component is designed to capture user input. It can act as a parent component to various components such as **Text**, **Text Input**, **Dropdown** and **Buttons** to initiate specific events. In this document, we'll go through all the configuration options for the **Form** component.
-
-
-
-
-
-
-
:::caution Restricted components
Components like **Kanban**, **Calendar**, **Modal**, **Container**, **ListView**, **Tabs**, and **Form** can't be dropped inside the Form component.
:::
+
|
| :---------- | :--------------------------- | :------------- |
-| **Button To Submit For**m | This dropdown can be used to select a **Button** that will be used to submit the form. | Any button that is a child component inside the **Form** component
-| **Loading State** | Loading state can be used to show a spinner while the content is loaded. Loading state is commonly used with the **isLoading** property of queries. | Use the toggle button or dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either `{{true}}` or `{{false}}`|
-| **Use Custom Schema** | Enabling this property allows you to provide a schema for the Form component in the JSON format. | Switch the toggle or click on `Fx` to programmatically enable the **JSON schema**|
+| Button To submit form | This dropdown can be used to select a **Button** that will be used to submit the form. | Any button that is a child component inside the **Form** component
+| Loading state | Loading state can be used to show a spinner while the content is loaded. Loading state is commonly used with the **isLoading** property of queries. | Use the toggle button or dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either `{{true}}` or `{{false}}`|
+| Use custom schema | Enabling this property allows you to provide a schema for the Form component in the JSON format. | Switch the toggle or click on `Fx` to programmatically enable the **JSON schema**|
:::info
If you need a step-by-step guide on using a **Form** component, you can checkout **[this](/docs/how-to/use-form-component)** guide.
:::
+
+
+
+
+## Events
+
+To add an event to the **Form** component, go to the **Events** section and click on **Add handler**.
+
+|
Event
|
Description
|
+|:------------|:-----------------|
+| On submit | **On submit** event is triggered when the submit button on the form component is clicked. |
+| On invalid | **On invalid** event is triggered when the input on the form is invalid. |
+
+
+
+
+
+## Component Specific Actions (CSA)
+
+Following actions of form component can be controlled using the Component Specific Actions(CSA):
+
+|
Actions
|
Description
|
How To Access
|
+| :----------- | :----------- |:----------- |
+| submitForm | Submits the form data via a **[component-specific action](/docs/actions/control-component/)** within any event handler. |Employ a RunJS query to execute component-specific actions such as `await components.form1.submitForm()` |
+| resetForm | Resets the form data via a **[component-specific action](/docs/actions/control-component/)** within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.form1.resetForm()` |
+
+
+
+
+
+## Exposed Variables
+
+|
Variables
|
Description
|
Expected Value
|
+| :----------- | :----------- | :-------- |
+| data | This variable holds the data of all the components that are nested inside the form component. | You can access the value dynamically using JS. For example, `{{components.form1.data.numberinput1.value}}`|
+
+
+
+
+
## Using Custom Schema
To provide the form schema in JSON format, we'll pass a JavaScript object with **title**, **properties** and **submitButton**.
-| Key | Description |
+|
Key
|
Description
|
| :----------- | :----------- |
| title | The **title** key specifies the title of the form. |
| properties | The **properties** key holds an object that defines the properties of the components that will be inside the form. |
@@ -130,26 +165,18 @@ Here's an example using the custom schema of **Text Input**, **Number Input** an
}}
```
-
-
-
-
-## Events
-
-To add an event to the **Form** component, go to the **Events** section and click on **Add handler**.
-
-| Event | Description |
-|:------------|:-----------------|
-| **On submit** | **On submit** event is triggered when the submit button on the form component is clicked. |
-| **On invalid** | **On invalid** event is triggered when the input on the form is invalid. |
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
:::
+
+
+
+
## General
-Tooltip
+### Tooltip
A Tooltip is often used to specify the extra information when the user hovers the mouse pointer over the component. Once a value is set for Tooltip, hovering over the element will display the specified string as the tooltip text.
@@ -157,53 +184,44 @@ A Tooltip is often used to specify the extra information when the user hovers th
+
+
+
+
## Layout
-Show on desktop
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-Use this toggle to show or hide the component in the desktop view. You can dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to `{{true}}` or `{{false}}`.
+
-Show on mobile
-
-Use this toggle to show or hide the component in the mobile view. You can dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to `{{true}}` or `{{false}}`.
-
----
+
|
| :----------- | :----------- | :-----------|
-| **Background color** | Changes the background color of the form. | Hex color code/choose a color using the color picker|
-| **Border radius** | Adjusts the roundness of the component's corners. | Numeric value|
-| **Border color** | Changes the border color of the component.| Hex color code/choose a color using the color picker|
-| **Visibility** | Controls the visibility of the component. If set to `{{false}}`, the component will not be visible.| Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
-| **Disable** | Makes the component non-functional when set to true. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
+| Background color | Changes the background color of the form. | Hex color code/choose a color using the color picker|
+| Border radius | Adjusts the roundness of the component's corners. | Numeric value|
+| Border color | Changes the border color of the component.| Hex color code/choose a color using the color picker|
+| Visibility | Controls the visibility of the component. If set to `{{false}}`, the component will not be visible.| Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
+| Disable | Makes the component non-functional when set to true. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
+
+
+
## General
-Box Shadow
+|
Property
|
Description
|
+|:-------- |:-------- |
+| Box Shadow | The **Box Shadow** property is used to add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow. |
-The **Box Shadow** property is used to add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow.
-
-
-
-## Exposed Variables
-
-| Variables | Description | Expected Value
-| :----------- | :----------- | :-------- |
-| **data** | This variable holds the data of all the components that are nested inside the form component. | You can access the value dynamically using JS. For example, `{{components.form1.data.numberinput1.value}}`
-
-## Component Specific Actions (CSA)
-
-Following actions of form component can be controlled using the Component Specific Actions(CSA):
-
-| Actions | Description |
-| :----------- | :----------- |
-| **submitForm** | Submits the form data via a **[component-specific action](/docs/actions/control-component/)** within any event handler. Additionally, there is an option to employ a RunJS query to execute component-specific actions such as `await components.form1.submitForm()` |
-| **resetForm** | Resets the form data via a **[component-specific action](/docs/actions/control-component/)** within any event handler. Additionally, there is an option to employ a RunJS query to execute component-specific actions such as `await components.form1.resetForm()` |
+
## Custom Schema Examples
- **[Datepicker](#datepicker)**
@@ -222,6 +240,10 @@ Following actions of form component can be controlled using the Component Specif
- **[Text](#text)**
- **[Radio](#radio)**
+
+
+
+
### Datepicker
Properties that can be used in Datepicker schema are:
@@ -242,24 +264,23 @@ datepicker1: {
}
```
-| Key | Description | Expected Value |
+|
Key
|
Description
|
Expected Value
|
| :----------- | :----------- | :-----------|
-| **type** | Specifies the type of component. | 'datepicker' |
-| **styles** | Specifies the styles of the component. | Object that will contain the styles of the component like `borderRadius`, `disabled`, `visibility` etc. |
-| **borderRadius** | Specifies the border radius of the component. | Numeric value like 5, 10, 20 etc. |
-| **disabled** | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
-| **visibility** | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
-| **value** | Specifies the default date of the datepicker. | Any date in the format specified in the `format` key |
-| **disabledDates** | Specifies the dates that you want to disable. | Provide the dates in an array that you want to disable |
-| **enableTime** | Specifies whether to enable time or not. | set `true` to enable time or `false` to disable it |
-| **format** | Specifies the format of the date. | 'DD/MM/YYYY' |
-| **label** | Specifies the label of the component. | Any string value |
+| type | Specifies the type of component. | 'datepicker' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `borderRadius`, `disabled`, `visibility` etc. |
+| borderRadius | Specifies the border radius of the component. | Numeric value like 5, 10, 20 etc. |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| value | Specifies the default date of the datepicker. | Any date in the format specified in the `format` key |
+| disabledDates | Specifies the dates that you want to disable. | Provide the dates in an array that you want to disable |
+| enableTime | Specifies whether to enable time or not. | set `true` to enable time or `false` to disable it |
+| format | Specifies the format of the date. | 'DD/MM/YYYY' |
+| label | Specifies the label of the component. | Any string value |
-
-
|
| :----------- | :----------- | :-----------|
-| **type** | Specifies the type of component. | 'number' |
-| **styles** | Specifies the styles of the component. | Object that will contain the styles of the component like `backgroundColor`, `borderRadius`, `textColor`, `borderColor`, `disabled`, `visibility` etc. |
-| **backgroundColor** | Specifies the background color of the component. | Color name or Hex color code '#f6f5ff' |
-| **borderRadius** | Specifies the border radius of the component. | Numeric value like 5, 10, 20 etc. |
-| **textColor** | Specifies the text color of the component. | Color name or Hex color code '#f6f5ff'|
-| **borderColor** | Specifies the border color of the component. | Color name or Hex color code '#f6f5ff'|
-| **disabled** | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
-| **visibility** | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
-| **value** | Specifies the default value of the number input. | Numeric value |
-| **maxValue** | Specifies the maximum value of the number input. | Numeric value |
-| **minValue** | Specifies the minimum value of the number input. | Numeric value |
-| **placeholder** | Specifies the placeholder text of the number input. | Any string value |
-| **label** | Specifies the label of the component. | Any string value |
-
-
-
-
+| type | Specifies the type of component. | 'number' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `backgroundColor`, `borderRadius`, `textColor`, `borderColor`, `disabled`, `visibility` etc. |
+| backgroundColor | Specifies the background color of the component. | Color name or Hex color code '#f6f5ff' |
+| borderRadius | Specifies the border radius of the component. | Numeric value like 5, 10, 20 etc. |
+| textColor | Specifies the text color of the component. | Color name or Hex color code '#f6f5ff'|
+| borderColor | Specifies the border color of the component. | Color name or Hex color code '#f6f5ff'|
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| value | Specifies the default value of the number input. | Numeric value |
+| maxValue | Specifies the maximum value of the number input. | Numeric value |
+| minValue | Specifies the minimum value of the number input. | Numeric value |
+| placeholder | Specifies the placeholder text of the number input. | Any string value |
+| label | Specifies the label of the component. | Any string value |
|
| :----------- | :----------- | :-----------|
-| **type** | Specifies the type of component. | 'password' |
-| **styles** | Specifies the styles of the component. | Object that will contain the styles of the component like `backgroundColor`, `borderRadius`, `disabled`, `visibility` etc. |
-| **backgroundColor** | Specifies the background color of the component. | Color name or Hex color code '#f6f5ff' |
-| **borderRadius** | Specifies the border radius of the component. | Numeric value like 10 |
-| **disabled** | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
-| **visibility** | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
-| **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,}$' |
-| **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 `' '` |
-
-
-
-
-
+| type | Specifies the type of component. | 'password' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `backgroundColor`, `borderRadius`, `disabled`, `visibility` etc. |
+| backgroundColor | Specifies the background color of the component. | Color name or Hex color code '#f6f5ff' |
+| borderRadius | Specifies the border radius of the component. | Numeric value like 10 |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| 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,}$'` |
+| 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 `' '` |
|
| :----------- | :----------- | :-----------|
-| **type** | Specifies the type of component. | 'checkbox' |
-| **styles** | Specifies the styles of the component. | Object that will contain the styles of the component like `checkboxColor`, `disabled`, `textColor`, `visibility` etc. |
-| **checkboxColor** | Specifies the color of the checkbox. | Color name or Hex color code '#f6f5ff' |
-| **disabled** | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
-| **textColor** | Specifies the text color of the component. | Color name or Hex color code '#f6f5ff' |
-| **visibility** | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
-| **value** | Specifies the default value of the checkbox. | Boolean value (true or false) |
-| **label** | Specifies the label of the component. | Any string value like 'Checkbox' |
-
-
-
-
-
+| type | Specifies the type of component. | 'checkbox' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `checkboxColor`, `disabled`, `textColor`, `visibility` etc. |
+| checkboxColor | Specifies the color of the checkbox. | Color name or Hex color code '#f6f5ff' |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| textColor | Specifies the text color of the component. | Color name or Hex color code '#f6f5ff' |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| value | Specifies the default value of the checkbox. | Boolean value (true or false) |
+| label | Specifies the label of the component. | Any string value like 'Checkbox' |
|
| :----------- | :----------- | :-----------|
-| **type** | Specifies the type of component. | 'toggle' |
-| **styles** | Specifies the styles of the component. | Object that will contain the styles of the component like `textColor`, `disabled`, `visibility`, `toggleSwitchColor` etc. |
-| **textColor** | Specifies the text color of the component. | Color name or Hex color code '#f6f5ff' |
-| **disabled** | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
-| **visibility** | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
-| **toggleSwitchColor** | Specifies the color of the toggle switch. | Color name or Hex color code '#f6f5ff' |
-| **value** | Specifies the default value of the toggle switch. | Boolean value (true or false) |
-| **label** | Specifies the label of the component. | Any string value like 'Toggle switch' |
-
-
-
-
-
+| type | Specifies the type of component. | 'toggle' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `textColor`, `disabled`, `visibility`, `toggleSwitchColor` etc. |
+| textColor | Specifies the text color of the component. | Color name or Hex color code '#f6f5ff' |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| toggleSwitchColor | Specifies the color of the toggle switch. | Color name or Hex color code '#f6f5ff' |
+| value | Specifies the default value of the toggle switch. | Boolean value (true or false) |
+| label | Specifies the label of the component. | Any string value like 'Toggle switch' |
+
+
### Text Area
**Properties**
@@ -440,24 +450,21 @@ textArea1: {
}
```
-| Key | Description | Expected Value |
+|
Key
|
Description
|
Expected Value
|
| :----------- | :----------- | :-----------|
-| **type** | Specifies the type of component. | 'textarea' |
-| **styles** | Specifies the styles of the component. | Object that will contain the styles of the component like `disabled`, `visibility`, `borderRadius` etc. |
-| **disabled** | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
-| **visibility** | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
-| **borderRadius** | Specifies the border radius of the component. | Numeric value like 20 |
-| **value** | Specifies the default value of the text area. | Any string value like 'This is a text area' |
-| **placeholder** | Specifies the placeholder text of the text area. | Any string value like 'Enter text here' |
-| **label** | Specifies the label of the component. | Any string value like 'Text Area' |
-
-
-
-
-
+| type | Specifies the type of component. | 'textarea' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `disabled`, `visibility`, `borderRadius` etc. |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| borderRadius | Specifies the border radius of the component. | Numeric value like 20 |
+| value | Specifies the default value of the text area. | Any string value like 'This is a text area' |
+| placeholder | Specifies the placeholder text of the text area. | Any string value like 'Enter text here' |
+| label | Specifies the label of the component. | Any string value like 'Text Area' |
+
+
### Date Range Picker
**Properties**
@@ -477,24 +484,22 @@ daterangepicker1: {
}
```
-| Key | Description | Expected Value |
+|
Key
|
Description
|
Expected Value
|
| :----------- | :----------- | :-----------|
-| **type** | Specifies the type of component. | 'daterangepicker' |
-| **styles** | Specifies the styles of the component. | Object that will contain the styles of the component like `disabled`, `visibility`, `borderRadius` etc. |
-| **disabled** | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
-| **visibility** | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
-| **borderRadius** | Specifies the border radius of the component. | Numeric value like 5 |
-| **defaultEndDate** | Specifies the default end date of the date range picker. | Date in the format specified in the `format` key, e.g., '12/04/2022' |
-| **defaultStartDate** | Specifies the default start date of the date range picker. | Date in the format specified in the `format` key, e.g., '1/04/2022' |
-| **format** | Specifies the format of the date. | 'DD/MM/YYYY' |
-| **label** | Specifies the label of the component. | Any string value like 'Select a date range' |
-
-
-
-
+| type | Specifies the type of component. | 'daterangepicker' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `disabled`, `visibility`, `borderRadius` etc. |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| borderRadius | Specifies the border radius of the component. | Numeric value like 5 |
+| defaultEndDate | Specifies the default end date of the date range picker. | Date in the format specified in the `format` key, e.g., '12/04/2022' |
+| defaultStartDate | Specifies the default start date of the date range picker. | Date in the format specified in the `format` key, e.g., '1/04/2022' |
+| format | Specifies the format of the date. | 'DD/MM/YYYY' |
+| label | Specifies the label of the component. | Any string value like 'Select a date range' |
|
| :----------- | :----------- | :-----------|
-| **type** | Specifies the type of component. | 'multiselect' |
-| **styles** | Specifies the styles of the component. | Object that will contain the styles of the component like `disabled`, `visibility`, `borderRadius` etc. |
-| **disabled** | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
-| **visibility** | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
-| **borderRadius** | Specifies the border radius of the component. | Numeric value like 5 |
-| **displayValues** | Specifies the value for option labels in an array format. | Array of strings like `["one", "two", "three"]` |
-| **label** | Specifies the label of the component. | Any string value like 'Select options of your choice' |
-| **value** | Specifies the default value(s) in an array. | Array of values like `[2, 3]` |
-| **values** | Specifies the values in an array. | Array of values like `[1, 2, 3]` |
-| **showAllOption** | Specifies whether to show the 'All' option in the multiselect or not. | set `true` to show the 'All' option or `false` to hide it |
-
-
-
-
-
+| type | Specifies the type of component. | 'multiselect' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `disabled`, `visibility`, `borderRadius` etc. |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| borderRadius | Specifies the border radius of the component. | Numeric value like 5 |
+| displayValues | Specifies the value for option labels in an array format. | Array of strings like `["one", "two", "three"]` |
+| label | Specifies the label of the component. | Any string value like 'Select options of your choice' |
+| value | Specifies the default value(s) in an array. | Array of values like `[2, 3]` |
+| values | Specifies the values in an array. | Array of values like `[1, 2, 3]` |
+| showAllOption | Specifies whether to show the 'All' option in the multiselect or not. | set `true` to show the 'All' option or `false` to hide it |
|
| :----------- | :----------- | :-----------|
-| **type** | Specifies the type of component. | 'starrating' |
-| **styles** | Specifies the styles of the component. | Object that will contain the styles of the component like `disabled`, `visibility`, `textColor`, `labelColor` etc. |
-| **disabled** | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
-| **visibility** | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
-| **textColor** | Specifies the color of the stars. | Color name or Hex color code '#f6f5ff' |
-| **labelColor** | Specifies the color of the label. | Color name or Hex color code '#f6f5ff' |
-| **allowHalfStar** | Specifies whether to allow selection of half star rating or not. | set `true` to allow half-star ratings or `false` to disable it |
-| **defaultSelected** | Specifies the default value of the star rating. | Numeric value like 4.5 |
-| **maxRating** | Specifies the maximum rating. | Numeric value like 10 |
-| **tooltips** | Specifies the tooltips for each star in an array. | Array of strings like `['one', 'two', 'three', 'four']` |
-| **label** | Specifies the label of the component. | Any string value like 'Select a rating' |
-
-
-
-
-
+| type | Specifies the type of component. | 'starrating' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `disabled`, `visibility`, `textColor`, `labelColor` etc. |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| textColor | Specifies the color of the stars. | Color name or Hex color code '#f6f5ff' |
+| labelColor | Specifies the color of the label. | Color name or Hex color code '#f6f5ff' |
+| allowHalfStar | Specifies whether to allow selection of half star rating or not. | set `true` to allow half-star ratings or `false` to disable it |
+| defaultSelected | Specifies the default value of the star rating. | Numeric value like 4.5 |
+| maxRating | Specifies the maximum rating. | Numeric value like 10 |
+| tooltips | Specifies the tooltips for each star in an array. | Array of strings like `['one', 'two', 'three', 'four']` |
+| label | Specifies the label of the component. | Any string value like 'Select a rating' |
|
| :----------- | :----------- | :-----------|
-| **type** | Specifies the type of component. | 'filepicker' |
-| **styles** | Specifies the styles of the component. | Object that will contain the styles of the component like `visibility`, `borderRadius` etc. |
-| **visibility** | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
-| **borderRadius** | Specifies the border radius of the component. | Numeric value like 10 |
-| **enableMultiple** | Specifies whether to enable multiple file selection or not. | set `true` to enable multiple file selection or `false` to disable it |
-| **fileType** | Specifies the mime file type. | Mime types like '*/*' (accepts all file types) |
-| **instructionText** | Specifies the instruction text of the file picker. | Any string value like 'Click here to select files' |
-| **maxFileCount** | Specifies the maximum number of files that can be selected. | Numeric value like 5 |
-| **maxSize** | Specifies the maximum size of the file in bytes. | Numeric value like 6000000 (6MB) |
-| **minSize** | Specifies the minimum size of the file in bytes. | Numeric value like 25 |
-| **parseContent** | Specifies whether to parse the content of the file or not. | set `true` to parse the content or `false` to disable it |
-| **parseFileType** | Specifies the file type to parse (e.g., csv, text, xlsx). | File type like 'csv' |
-| **label** | Specifies the label of the component. | Any string value like 'Select a file' |
-
-
-
-
+| type | Specifies the type of component. | 'filepicker' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `visibility`, `borderRadius` etc. |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| borderRadius | Specifies the border radius of the component. | Numeric value like 10 |
+| enableMultiple | Specifies whether to enable multiple file selection or not. | set `true` to enable multiple file selection or `false` to disable it |
+| fileType | Specifies the mime file type. | Mime types like '*/*' (accepts all file types) |
+| instructionText | Specifies the instruction text of the file picker. | Any string value like 'Click here to select files' |
+| maxFileCount | Specifies the maximum number of files that can be selected. | Numeric value like 5 |
+| maxSize | Specifies the maximum size of the file in bytes. | Numeric value like 6000000 (6MB) |
+| minSize | Specifies the minimum size of the file in bytes. | Numeric value like 25 |
+| parseContent | Specifies whether to parse the content of the file or not. | set `true` to parse the content or `false` to disable it |
+| parseFileType | Specifies the file type to parse (e.g., csv, text, xlsx). | File type like 'csv' |
+| label | Specifies the label of the component. | Any string value like 'Select a file' |
|
| :----------- | :----------- | :-----------|
-| **type** | Specifies the type of component. | 'textinput' |
-| **value** | Specifies the default value of the text input. | Any string value like 'Random text' |
-| **placeholder** | Specifies the placeholder text of the text input. | Any string value like 'enter first name here' |
-| **label** | Specifies the label of the component. | Any string value like 'First name' |
-| **validation** | Specifies validation rules for the text input. | Object containing `maxLength` property |
-| **maxLength** | Specifies the maximum length validation of the text input. | Numeric value like 6 |
-| **styles** | Specifies the styles of the component. | Object that will contain the styles of the component like `backgroundColor`, `borderRadius`, `errorTextColor`, `disabled`, `visibility`, `textColor` etc. |
-| **backgroundColor** | Specifies the background color of the component. | Color name or Hex color code '#f6f5ff' |
-| **borderRadius** | Specifies the border radius of the component. | Numeric value like 20 |
-| **errorTextColor** | Specifies the color of the error text. | Color name or Hex color code '#f6f5ff' |
-| **disabled** | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
-| **visibility** | Specifies whether to show the component or not. | set `false` to hide the component or `true` to show it |
-| **textColor** | Specifies the text color of the component. | Color name or Hex color code '#f6f5ff' |
-
-
-
-
+| type | Specifies the type of component. | 'textinput' |
+| value | Specifies the default value of the text input. | Any string value like 'Random text' |
+| placeholder | Specifies the placeholder text of the text input. | Any string value like 'enter first name here' |
+| label | Specifies the label of the component. | Any string value like 'First name' |
+| validation | Specifies validation rules for the text input. | Object containing `maxLength` property |
+| maxLength | Specifies the maximum length validation of the text input. | Numeric value like 6 |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `backgroundColor`, `borderRadius`, `errorTextColor`, `disabled`, `visibility`, `textColor` etc. |
+| backgroundColor | Specifies the background color of the component. | Color name or Hex color code '#f6f5ff' |
+| borderRadius | Specifies the border radius of the component. | Numeric value like 20 |
+| errorTextColor | Specifies the color of the error text. | Color name or Hex color code '#f6f5ff' |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `false` to hide the component or `true` to show it |
+| textColor | Specifies the text color of the component. | Color name or Hex color code '#f6f5ff' |
|
| :----------- | :----------- | :-----------|
-| **type** | Specifies the type of component. | 'dropdown' |
-| **displayValues** | Specifies the value for option labels in an array format. | Array of values like `[1, 2, 3]` |
-| **values** | Specifies the option labels in an array. | Array of strings like `['one', 'two', 'three']` |
-| **loading** | Specifies whether to show the loading state or not. | set `true` to show the loading state or `false` to hide it |
-| **value** | Specifies the default selected value of the dropdown. | Any value from the `values` array, like 'two' |
-| **label** | Specifies the label of the component. | Any string value like 'Select a number' |
-| **styles** | Specifies the styles of the component. | Object that will contain the styles of the component like `disabled`, `visibility`, `borderRadius`, `justifyContent` etc. |
-| **disabled** | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
-| **visibility** | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
-| **borderRadius** | Specifies the border radius of the component. | Numeric value like 5 |
-| **justifyContent** | Specifies the alignment of the dropdown options. | 'start', 'center', or 'end' |
-
-
-
-
-
+| type | Specifies the type of component. | 'dropdown' |
+| displayValues | Specifies the value for option labels in an array format. | Array of values like `[1, 2, 3]` |
+| values | Specifies the option labels in an array. | Array of strings like `['one', 'two', 'three']` |
+| loading | Specifies whether to show the loading state or not. | set `true` to show the loading state or `false` to hide it |
+| value | Specifies the default selected value of the dropdown. | Any value from the `values` array, like 'two' |
+| label | Specifies the label of the component. | Any string value like 'Select a number' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `disabled`, `visibility`, `borderRadius`, `justifyContent` etc. |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| borderRadius | Specifies the border radius of the component. | Numeric value like 5 |
+| justifyContent | Specifies the alignment of the dropdown options. | 'start', 'center', or 'end' |
|
| :----------- | :----------- | :-----------|
-| **type** | Specifies the type of component. | 'button' |
-| **value** | Specifies the button text. | Any string value like 'Submit' |
-| **label** | Specifies the label of the component. | Set to `''` (empty string) to hide the label |
-| **styles** | Specifies the styles of the component. | Object that will contain the styles of the component like `backgroundColor`, `textColor`, `borderRadius`, `borderColor`, `loaderColor`, `visibility`, `disabled` etc. |
-| **backgroundColor** | Specifies the background color of the button. | Color name or Hex color code '#f6f5ff' |
-| **textColor** | Specifies the text color of the button. | Color name or Hex color code '#f6f5ff' |
-| **borderRadius** | Specifies the border radius of the button. | Numeric value like 5 |
-| **borderColor** | Specifies the border color of the button. | Color name or Hex color code '#f6f5ff' |
-| **loaderColor** | Specifies the color of the loader on the button. | Color name or Hex color code '#f6f5ff' |
-| **visibility** | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
-| **disabled** | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
-
-
-
-
+| type | Specifies the type of component. | 'button' |
+| value | Specifies the button text. | Any string value like 'Submit' |
+| label | Specifies the label of the component. | Set to `''` (empty string) to hide the label |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `backgroundColor`, `textColor`, `borderRadius`, `borderColor`, `loaderColor`, `visibility`, `disabled` etc. |
+| backgroundColor | Specifies the background color of the button. | Color name or Hex color code '#f6f5ff' |
+| textColor | Specifies the text color of the button. | Color name or Hex color code '#f6f5ff' |
+| borderRadius | Specifies the border radius of the button. | Numeric value like 5 |
+| borderColor | Specifies the border color of the button. | Color name or Hex color code '#f6f5ff' |
+| loaderColor | Specifies the color of the loader on the button. | Color name or Hex color code '#f6f5ff' |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
|
| :----------- | :----------- | :-----------|
-| **type** | Specifies the type of component. | 'text' |
-| **value** | Specifies the value of the text component. | Any string value like 'This is a text component' |
-| **label** | Specifies the label of the component. | Set to `''` (empty string) to hide the label |
-| **styles** | Specifies the styles of the component. | Object that will contain the styles of the component like `backgroundColor`, `textColor`, `fontSize`, `fontWeight` etc. |
-| **backgroundColor** | Specifies the background color of the text. | Color name or Hex color code '#f6f5ff' |
-| **textColor** | Specifies the text color of the text. | Color name or Hex color code '#f6f5ff' |
-| **fontSize** | Specifies the font size of the text. | Numeric value like 24 |
-| **fontWeight** | Specifies the font weight of the text. | Numeric value like 30 |
-
-
-
-
+| type | Specifies the type of component. | 'text' |
+| value | Specifies the value of the text component. | Any string value like 'This is a text component' |
+| label | Specifies the label of the component. | Set to `''` (empty string) to hide the label |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `backgroundColor`, `textColor`, `fontSize`, `fontWeight` etc. |
+| backgroundColor | Specifies the background color of the text. | Color name or Hex color code '#f6f5ff' |
+| textColor | Specifies the text color of the text. | Color name or Hex color code '#f6f5ff' |
+| fontSize | Specifies the font size of the text. | Numeric value like 24 |
+| fontWeight | Specifies the font weight of the text. | Numeric value like 30 |
|
| :----------- | :----------- | :-----------|
-| **type** | Specifies the type of component. | 'radio' |
-| **styles** | Specifies the styles of the component. | Object that will contain the styles of the component like `textColor`, `disabled`, `visibility` etc. |
-| **textColor** | Specifies the text color of the radio options. | Color name or Hex color code '#f6f5ff' |
-| **disabled** | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
-| **visibility** | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
-| **displayValues** | Specifies the value for labels in an array format. | Array of strings like `['option 1', 'option 2', 'option 3']` |
-| **label** | Specifies the label of the component. | Any string value like 'Radio Buttons' |
-| **value** | Specifies the default selected value of the radio button. | Any value from the `values` array, like 2 |
-| **values** | Specifies the values in an array. | Array of values like `[1, 2, 3]` |
+| type | Specifies the type of component. | 'radio' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `textColor`, `disabled`, `visibility` etc. |
+| textColor | Specifies the text color of the radio options. | Color name or Hex color code '#f6f5ff' |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| displayValues | Specifies the value for labels in an array format. | Array of strings like `['option 1', 'option 2', 'option 3']` |
+| label | Specifies the label of the component. | Any string value like 'Radio Buttons' |
+| value | Specifies the default selected value of the radio button. | Any value from the `values` array, like 2 |
+| values | Specifies the values in an array. | Array of values like `[1, 2, 3]` |
-
-
-
-
-
+
\ No newline at end of file
diff --git a/docs/docs/widgets/html.md b/docs/docs/widgets/html.md
index cc1e06c574..da295e15e8 100644
--- a/docs/docs/widgets/html.md
+++ b/docs/docs/widgets/html.md
@@ -5,19 +5,15 @@ 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.
-
-
-
-
-
+
## Properties
-### Raw HTML
-
-The Raw HTML needs to be an HTML. In order to provide styles, one can add inline css to the respective HTML tags
+|
Property
|
Description
|
+|:------------|:-----------------|
+| Raw HTML | The Raw HTML needs to be an HTML. In order to provide styles, one can add inline css to the respective HTML tags. |
**Example:**
@@ -35,46 +31,56 @@ The Raw HTML needs to be an HTML. In order to provide styles, one can add inline
```
-
+
-
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
-### General
-#### Tooltip
+
+
+## Exposed Variables
+
+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 the mouse pointer over the widget.
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+
|
+|:---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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 visible after the app is deployed. By default, it's set to `{{true}}`. |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed variables
-
-There are currently no exposed variables for the component.
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/icon.md b/docs/docs/widgets/icon.md
index fd93553088..3301fdd8d7 100644
--- a/docs/docs/widgets/icon.md
+++ b/docs/docs/widgets/icon.md
@@ -3,34 +3,28 @@ 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.
-
|
+|:----------- |:----------- |:-------------- |
| Icon | Use this to choose an icon form the list of available icons | You can also use the search bar in it to look for the icons |
-## 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**.
+
+
+## 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**.
The Icon widget supports the following events:
-| Event | Description |
-| ----------- | ----------- |
+|
Event
|
Description
|
+|:----------- |:----------- |
| On hover | This event is triggered when the cursor is hovered over the icon|
| On click | This event is triggered when the icon is clicked |
@@ -40,22 +34,55 @@ Just like any other event on ToolJet, you can set multiple handlers for any of t
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
:::
+
+
+
+
+## Component Specific Actions (CSA)
+
+Following actions of the component can be controlled using the component specific actions(CSA):
+
+|
Actions
|
Description
|
How To Access
|
+|:----------- |:----------- |:--------- |
+| 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()` |
+
+
+
+
+
+## Exposed Variables
+
+There are currently no exposed variables for the component.
+
+
+
+
+
## General
Tooltip: Set a tooltip text to specify the information when the user moves the mouse pointer over the widget.
+
+
+
+
## Layout
-| Layout | description | Expected value |
-| ----------- | ----------- | ------------ |
-| Show on desktop | Toggle on or off to show/hide the widget on desktop screens. | You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile | Toggle on or off to show/hide the widget on mobile screens. | You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+
+
+
+
## Styles
-| Style | Description | Expected value |
-| ----------- | ----------- | ------------- |
-| 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. |
+|
Style
|
Description
|
Expected Value
|
+|:----------- |:----------- |:------------- |
+| 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. |
@@ -63,15 +90,4 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed variables
-
-There are currently no exposed variables for the component.
-
-## Component specific actions (CSA)
-
-Following actions of the component can be controlled using the component specific actions(CSA):
-
-| Actions | Description |
-| ----------- | ----------- |
-| setVisibility | You can toggle the visibility of the icon component via a component-specific action within any event handler. Additionally, you have the option to 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. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.icon1.click()` |
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/docs/widgets/iframe.md b/docs/docs/widgets/iframe.md
index d73ac37210..ff64a48243 100644
--- a/docs/docs/widgets/iframe.md
+++ b/docs/docs/widgets/iframe.md
@@ -4,72 +4,67 @@ 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.
-
-
-
-
-
+
## Properties
-### URL
+|
Property
|
Description
|
+|:--------- |:---------|
+| URL | Set the **URL** of the page to embed.|
-Set the **URL** of the page to embed.
+
-### General
-#### Tooltip
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+
+
+
+## Exposed Variables
+
+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 the mouse pointer over the widget.
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-
-
-
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-### Show on desktop
-
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
-
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-
-
-
-
-
-
-### 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}}`.
-
-### Disable
-
-This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+|
Style
|
Description
|
Default Value
|
+|:----------- |:----------- |:------------- |
+| 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}}`. |
+| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. | By default, its value is set to `{{false}}`. |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed variables
-
-There are currently no exposed variables for the component.
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/image.md b/docs/docs/widgets/image.md
index 33a071bb82..ee831939e7 100644
--- a/docs/docs/widgets/image.md
+++ b/docs/docs/widgets/image.md
@@ -4,52 +4,53 @@ title: Image
---
# Image
-Image widget is used to display images in your app.
+The **Image** widget is used to display images in your app.
-
+
-
+## Properties
+
+|
Properties
|
Description
|
+|:----------- |:----------- |
+| URL | Enter the URL of the image to display it on the widget. |
+| Loading state | Loading state can be used to show a spinner as the image content. 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}}`. |
+| Alternative text | Used for alt text of images. |
+| Zoom button | Toggle this to enable zoom options inside image. |
+| Rotate button | Toggle this on to enable rotate button in the image. |
+
+
## Events
-
-
-
-
-
-
-### On click
-
-On click event is triggered when an image is clicked.
+|
Event
|
Description
|
+|:----------- |:----------- |
+| On click | On click event is triggered when an image is clicked. |
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
:::
-## Properties
+
-
+
-
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
-### URL
-Enter the URL of the image to display it on the widget.
+
-### Loading state
-Loading state can be used to show a spinner as the image content. 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}}`.
+## Exposed Variables
-### Alternative text
-Used for alt text of images.
+There are currently no exposed variables for the component.
-### Zoom buttons
-Toggle this to enable zoom options inside image.
+
-### Rotate buttons
-Toggle this on to enable rotate button in the image.
+
## General
### Tooltip
@@ -58,58 +59,34 @@ A Tooltip is often used to specify extra information about something when the us
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-### Show on desktop
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}`.
+
-### Show on mobile
-
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-### Border type
-Choose a border type for the image from available options:
-- **None**
-- **Rounded**
-- **Circle**
-- **Thumbnail**
-
-### Image fit
-Choose a image fit - similar to object fit for the image from available options:
-- **fill**
-- **cover**
-- **contain**
-- **scale-down**
-
-### Background color
-Add a background color to widget by providing the `HEX color code` or choosing the color of your choice from the color-picker.
-
-### Padding
-Adds padding between the image and widget border. It accepts any numerical value from `0` to `100`.
-
-### 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}}`.
-
-### Disable
-This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+|
Style
|
Description
|
+|:--------- |:-------- |
+| Border type | Choose a border type for the image from available options: **None**, **Rounded**, **Circle**, **Thumbnail**. |
+| Image fit | Choose a image fit - similar to object fit for the image from available options: **fill**, **cover**, **contain**, **scale-down** |
+| Background color | Add a background color to widget by providing the `HEX color code` or choosing the color of your choice from the color-picker. |
+| Padding | Adds padding between the image and widget border. It accepts any numerical value from `0` to `100`. |
+| 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}}`. |
+| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed variables
-
-There are currently no exposed variables for the component.
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/kanban-board.md b/docs/docs/widgets/kanban-board.md
index 22027ca856..ff7b6361fc 100644
--- a/docs/docs/widgets/kanban-board.md
+++ b/docs/docs/widgets/kanban-board.md
@@ -5,27 +5,54 @@ title: Kanban
# Kanban
-Kanban widget 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.
+- **Card**: Calendar, Kanban, Form, Tabs, Modal, ListView, Container
+- **Popout**: Calendar, Kanban
+:::
-
+
+
+## Setting Card Data
+
+To dynamically populate Kanban cards, you can use the `cardData` key.
+
+For instance, you can set the `Data` property of a Text component on a card using the below code:
+
+```js
+{{cardData.title}}
+// Replace title with the key in your data
+```
-:::caution Restricted components
-In order to avoid excessively complex situations, 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
+
-If the builder attempts to add any of the aforementioned components inside the Kanban Card or Popout, an error message will be displayed:
+## Properties
-` cannot be used as a child component within the Kanban Popout/Card.`
+:::caution
+- It is mandatory to provide `id` for each column in the `column data` field. The `id` can be of type `string` or `number`.
+- It is mandatory to provide `id`, and `columnId` for each card in the `Card data` field. The `id` and `columnId` can be of type `string` or `number`.
:::
+|
Properties
|
Description
|
Expected Value
|
+|:----------- |:----------- |:----------- |
+| Column data | Enter the columns data - `id` and `title` in the form of array of objects or from a query that returns an array of objects. | `{{[{ "id": "c1", "title": "to do" },{ "id": "c2", "title": "in progress" },{ "id": "c3", "title": "Completed" }]}}` or `{{queries.xyz.data}}` |
+| Card data | Enter the cards data - `id`, `title` and `columnId` in the form of array of objects or from a query that returns an array of objects. | `{{[{ id: "r1", title: "Title 1", description: "Description 1", columnId: "c1" },{ id: "r2", title: "Title 2", description: "Description 2", columnId: "c2" },{ id: "r3", title: "Title 3", description: "Description 3",columnId: "c3" }]}}` or `{{queries.abc.data}}` |
+| 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 |
+
+
+
+
+
## Events
-To add an event, 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, click on the component handle to open the component properties on the right sidebar. Go to the **Events** section and click on **Add handler**.
- **[On update](#on-update)**
- **[On add card click](#on-add-card-click)**
@@ -34,12 +61,6 @@ To add an event, click on the widget handle to open the widget properties on the
- **[Card moved](#card-moved)**
- **[Card selected](#card-selected)**
-
-
-
-
-
-
Just like any other event on ToolJet, you can set multiple handlers for any of the above mentioned events.
:::info
@@ -48,111 +69,78 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
Check the **[Component Specific Action](#component-specific-actions-csa)** available for Kanban.
:::
-### 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.
-
-### Card selected
-This event is triggered whenever a card is clicked to open the modal.
-
-## Properties
-
-
-
-
+|
Event
|
Description
|
+|:----------- |:----------- |
+| 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. |
+| Card selected | This event is triggered whenever a card is clicked to open the modal. |
-:::caution
-- It is mandatory to provide `id` for each column in the `column data` field. The `id` can be of type `string` or `number`.
-- It is mandatory to provide `id`, and `columnId` for each card in the `Card data` field. The `id` and `columnId` can be of type `string` or `number`.
-:::
+
-| Properties | description | Expected value |
-| ----------- | ----------- | ----------- |
-| Column Data | Enter the columns data - `id` and `title` in the form of array of objects or from a query that returns an array of objects. | `{{[{ "id": "c1", "title": "to do" },{ "id": "c2", "title": "in progress" },{ "id": "c3", "title": "Completed" }]}}` or `{{queries.xyz.data}}` |
-| Card Data | Enter the cards data - `id`, `title` and `columnId` in the form of array of objects or from a query that returns an array of objects. | `{{[{ id: "r1", title: "Title 1", description: "Description 1", columnId: "c1" },{ id: "r2", title: "Title 2", description: "Description 2", columnId: "c2" },{ id: "r3", title: "Title 3", description: "Description 3",columnId: "c3" }]}}` or `{{queries.abc.data}}` |
-| 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 |
+## Exposed Variables
+
+|
Variable
|
Description
|
How To Access
|
+|:-------- |:----------- |:---------- |
+| 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 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}}` |
+
+
+
+
+
+## Component Specific Actions (CSA)
+
+Following actions of Kanban component can be controlled using the component specific actions(CSA):
+
+|
Actions
|
Description
|
How To Access
|
+|:----------- |:----------- |:----------- |
+| 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')` |
+
+
+
+
## General
### Tooltip
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
-Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+Under the General accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
+
+
## Layout
-
-
-
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Layout | description | Expected value |
-| --------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display the widget in desktop view. | You can programmatically set the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile | Toggle on or off to display the widget in mobile view. | You can programmatically set the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+
## Styles
-
-
-
-
-
-
-| Style | Description |
-| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Disable | If disabled or set to `{{false}}` the widget will be locked and becomes non-functional. By default, its disabled i.e. its value is set to `{{true}}` . |
-| Visibility | This is to control the visibility of the widget. If `{{false}}`/disabled the widget will not visible after the app is deployed. By default, it's enabled (set to `{{true}}`). |
+|
Style
|
Description
|
+|:------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Disable | If disabled or set to `{{false}}` the component will be locked and becomes non-functional. By default, its disabled i.e. its value is set to `{{true}}` . |
+| Visibility | This is to control the visibility of the component. If `{{false}}`/disabled the component will not visible after the app is deployed. By default, it's enabled (set to `{{true}}`). |
| Accent color | You can change the accent color of the column title by entering the Hex color code or choosing a color of your choice from the color picker. |
-## Exposed variables
-
-
-
-
-
-
-| Variable | Description |
-| -------- | ----------- |
-| updatedCardData | The `updatedCardData` variable will hold the latest values of all the cards in the kanban. This variable won't have any values initially, 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. You can 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. You can 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. You can 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. You can 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). You can 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). You can get the values using `{{components.kanban1.lastCardUpdate[0].title.oldValue}}` |
-
-## Component specific actions (CSA)
-
-Following actions of kanban component can be controlled using the component specific actions(CSA):
-
-| Actions | Description |
-| ----------- | ----------- |
-| updateCardData | Update the card data of kanban component via a component-specific action within any event handler. Additionally, you have the option to 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. Additionally, you have the option to 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. Additionally, you have the option to 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. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.kanban1.deleteCard('card id')` ex: `await components.kanban1.deleteCard('c2')` |
diff --git a/docs/docs/widgets/link.md b/docs/docs/widgets/link.md
index fffd89239a..b4bf51ed13 100644
--- a/docs/docs/widgets/link.md
+++ b/docs/docs/widgets/link.md
@@ -5,35 +5,58 @@ 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.
-
-
-
-
-
+
## Properties
-| Properties | description | Expected value |
-| ----------- | ----------- | -------------- |
-| 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` |
+|
Properties
|
Description
|
Expected Value
|
+|:----------- |:----------- |:-------------- |
+| 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 clicking the link | Options: `New Tab` & `Same Tab` |
+
+
+
+
## Events
To add an event to a link, click on the widget handle to open the widget properties on the right sidebar. Go to the **Events** section and click on **Add handler**.
-### On Click
-**On Click** event is triggered when the link is clicked. Just like any other event on ToolJet, you can set multiple handlers for on click event.
-
-### On hover
-**On Hover** event is triggered when the link is hovered. Just like any other event on ToolJet, you can set multiple handlers for on click event.
+|
Event
|
Description
|
+|:----------- |:----------- |
+| On click | **On Click** event is triggered when the link is clicked. Just like any other event on ToolJet, you can set multiple handlers for on click event. |
+| On hover | **On Hover** event is triggered when the link is hovered. Just like any other event on ToolJet, you can set multiple handlers for on click event. |
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
:::
+
+
+
+
+## Component Specific Actions (CSA)
+
+Following actions of link component can be controlled using the component specific actions(CSA):
+
+|
Actions
|
Description
|
How To Access
|
+|:----------- |:----------- |:------------ |
+| 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()` |
+
+
+
+
+
+## Exposed Variables
+
+There are currently no exposed variables for the component.
+
+
+
+
+
## General
### Tooltip
@@ -41,25 +64,27 @@ A Tooltip is often used to specify extra information about something when the us
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
+
+
+
+
## Layout
-| Layout | description | Expected value |
-| ----------- | ----------- | ------------ |
-| Show on desktop | Toggle on or off to show/hide the widget on desktop view. | You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile | Toggle on or off to show/hide the widget on mobile view. | You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-
-## Styles
-
-
-
-
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Style | Description |
-| ----------- | ----------- |
-| Text Color | You can change the background color of the text by entering the Hex color code or choosing a color of your choice from the color picker. |
-| Text Size | By default, the text size is set to 14. You can enter any value from 1-100 to set custom text size. |
+
+
+## Styles
+
+|
Style
|
Description
|
+|:----------- |:----------- |
+| Text color | You can change the background color of the text by entering the Hex color code or choosing a color of your choice from the color picker. |
+| Text size | By default, the text size is set to 14. You can enter any value from 1-100 to set custom text size. |
| Underline | You can change the underline of the text in the following ways: **on-hover (default), never, always** |
| 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 visible after the app is deployed. By default, it's set to `{{true}}`. |
@@ -67,15 +92,4 @@ Under the General accordion, you can set the value in the string format.
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-
-## Exposed variables
-
-There are currently no exposed variables for the component.
-
-## Component specific actions (CSA)
-
-Following actions of link component can be controlled using the component specific actions(CSA):
-
-| Actions | Description |
-| ----------- | ----------- |
-| click | You can trigger the click action of the link component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.link1.click()` |
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/docs/widgets/listview.md b/docs/docs/widgets/listview.md
index 7d13a07d45..7ef6afa4c9 100644
--- a/docs/docs/widgets/listview.md
+++ b/docs/docs/widgets/listview.md
@@ -1,28 +1,67 @@
---
id: listview
-title: List view
+title: List View
---
-# List view
+# List View
-List view widget allows to create a list of repeatable rows of data. Just like a container widget, you can nest other widgets 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.
+:::
+
+
+
+## Setting List Data
+
+To dynamically populate List View components, you can use specific data properties.
+
+Consider this data being passed inside a List View component's `List data` property:
+
+```js
+{{[
+ { imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 1' },
+ { imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 2' },
+ { imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 3' },
+]}}
+```
+
+Based on the above data, you can set the `Data` property of a Text component inside List View using the below code:
+
+```js
+{{listItem.text}}
+```
+
+Similarly, for an Image component inside List View, you can use the below code to pass the `imageURL` value:
+
+```js
+{{listItem.imageURL}}
+```
-:::caution Restricted components
-In order to avoid excessively complex situations, certain components, namely **Calendar** and **Kanban**, are restricted from being placed within the list view component using drag-and-drop functionality.
+
-If the builder attempts to add any of the aforementioned components inside the List view, an error message will be displayed:
+## Properties
-` cannot be used as a child component within the list view.`
-:::
+|
Property
|
Description
|
Expected Value
|
+|:---|:---|:---|
+| 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 |
+| 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 |
+
+
+
+
## 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.
@@ -31,17 +70,11 @@ There are two events that you can use with the List View component:
- **[Row clicked (Deprecated)](#row-clicked)**
- **[Record clicked](#record-clicked)**
-
-
-
-
-
-
### 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.
@@ -51,157 +84,129 @@ 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.
:::
-## Properties
+
-
+
-
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
-| **Properties** | **Description** | **Expected value** |
-|---|---|---|
-| **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 |
-| **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 |
+
-
+## Exposed Variables
-
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:-------- |
+| 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}}` |
+| selectedRecord | This variable stores the data of the components within the selected record. | Access the data using `{{components.listview1.selectedRecord.text1}}` |
+| children | This variable stores the data of the components within all the records in listview component. | The purpose of exposing children is to enable the child components to be [controlled using component specific actions](#controlling-child-components). |
-### General
-#### Tooltip
+
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+## General
+### Tooltip
-Under the General 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 component.
-
-
-
+Under the General accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
+
+
## Layout
-
-
-
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Layout | description | Expected value |
-| ----------- | ----------- | ------------ |
-| Show on desktop | Toggle on or off to display the desktop view. | You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile | Toggle on or off to display the mobile view. | You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+
## Styles
-
-
-
-
-
-
-| Style | Description |
-| ----------- | ----------- |
-| Background Color | You can change the background color of the widget by entering the Hex color code or choosing a color of your choice from the color picker. |
-| Border Color | You can change the border color of the listview 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 be 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}}`. |
+|
Style
|
Description
|
+|:----------- |:----------- |
+| Background color | You can change the background color of the component by entering the Hex color code or choosing a color of your choice from the color picker. |
+| Border color | You can change the border color of the listview 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 component. If `{{false}}` the component will not be 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 component 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 list view. The field expects only numerical value from `1` to `100`, default is `0`. |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Example: Displaying data in the list view
-
-- Let's start by creating a new app and then dragging the List view widget onto the canvas.
-
-
-
-
-
+
+
+## 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.
+
+
+
+
+
+
+
- Now lets create a query and select the REST API from the datasource dropdown. Choose the `GET` method and enter the API endpoint - `https://reqres.in/api/users?page=1`. Save this query and fire it. Inspect the query results from the left sidebar, you'll see that it resulted in the `data` object having an array of objects.
-
+
-
+
-
+
-- Now lets edit the `List data` property of the list view widget 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 widget 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.
-
+
-
+
-
+
-- Finally, we will need to nest widgets into the first row of list view widget and the widget 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.
-
+
-
+
-
+
:::tip
-Use `{{listItem.key}}` to display data on the nested widgets. Example: For displaying the images we used `{{listItem.avatar}}` where **avatar** is one of the key in the objects from the query result.
+Use `{{listItem.key}}` to display data on the nested components. Example: For displaying the images we used `{{listItem.avatar}}` where **avatar** is one of the key in the objects from the query result.
:::
-## Exposed Variables
-
-
-
-
-
-| **Variables** | **Description** |
-| ----------- | ----------- |
-| **data** | This variable stores the data loaded into the list view component. You can 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`. You can access the selectedRowId using `{{components.listview1.selectedRowId}}` |
-| **selectedRow** (deprecated) | This variable contains the data of the components within the selected row. You can 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`. You can access the selectedRecordId using `{{components.listview1.selectedRecordId}}` |
-| **selectedRecord** | This variable stores the data of the components within the selected record. You can access the data using `{{components.listview1.selectedRecord.text1}}` |
-| **children** | This variable stores the data of the components within all the records in listview component. The purpose of exposing children is to enable the child components to be [controlled using component specific actions](#controlling-child-components). |
+
-## Component specific actions (CSA)
+## Controlling Child Components
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
-
-## 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:
@@ -213,4 +218,6 @@ components.listview1.children[0].button1.disable(true) // disables the button1 c
:::caution
Currently, only those child components can be controlled using the javascript queries that have component specific actions implemented. To check if a component has component specific actions implemented, refer to the document of that **[specific component](/docs/widgets/overview)**.
-:::
\ No newline at end of file
+:::
+
+
\ No newline at end of file
diff --git a/docs/docs/widgets/map.md b/docs/docs/widgets/map.md
index 5bd422b165..fe41b20a2b 100644
--- a/docs/docs/widgets/map.md
+++ b/docs/docs/widgets/map.md
@@ -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-).
@@ -15,75 +15,97 @@ If you are utilizing the self-hosted version of ToolJet, it is necessary to conf
|
|:----------- |:----------- |:------------------ |
-| **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} }}` |
-| **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. |
-| **Search for places** | Enable to show the search box on the map. | By default, it's set to `On`. Toggle `off` to disable the search box on the map. Click `Fx` to set `{{true}}` or `{{false}}` programmatically. |
-
-
-
-
+| 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. |
+| Search for places | Enable to show the search box on the map. | By default, it's set to `On`. Toggle `off` to disable the search box on the map. Click `Fx` to set `{{true}}` or `{{false}}` programmatically. |
+
+
## Events
-| Event Name | Description |
+|
Event Name
|
Description
|
|:----------------- | :--------------------------------------------- |
-| **On bounds change** | Triggers when the bounding area is modified. This event occurs after the `bounds` variable changes. |
-| **On create marker** | Triggers when a new marker is added to the map. |
-| **On marker click** | Triggers when the user clicks on any of the markers on the map. |
-| **On polygon click** | Triggers when the user clicks on the polygon on the map. |
+| On bounds change | Triggers when the bounding area is modified. This event occurs after the `bounds` variable changes. |
+| On create marker | Triggers when a new marker is added to the map. |
+| On marker click | Triggers when the user clicks on any of the markers on the map. |
+| On polygon click | Triggers when the user clicks on the polygon on the map. |
:::info
For detailed information about all the available **Actions**, please refer to the [Action Reference](/docs/category/actions-reference) documentation.
:::
-## General
-#### Tooltip
+
-A Tooltip is often used to specify the extra information when the user hovers the mouse pointer over the component. Once a value is set for Tooltip, hovering over the element will display the specified string as the tooltip text.
+
-## Layout
+## Component Specific Actions (CSA)
-| Properties | Description | Expected value |
-|:----------- |:----------- |:------------------ |
-| Show on desktop | Toggle on or off to display the component in desktop view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
-| Show on mobile | Toggle on or off to display the component in mobile view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
+Following actions of Map component can be controlled using the component specific actions(CSA):
-## Styles
+|
Actions
|
Description
|
How To Access
|
+|:---------- |:---------- |:------- |
+| 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)` |
-| Properties | Description | Expected value |
-|:----------- |:----------- |:------------------ |
-| **Visibility** | Toggle on or off to control the visibility of the component. | You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the component will not be visible after the app is release. By default, it's set to `{{true}}`. |
-| **Disable** | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. | You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
-| **Box shadow** | Add a shadow effect to the component by providing values to X, Y, Blur, Spread and Color. | You can also programmatically set the value by clicking on the `Fx` button next to it. Ex: `{{"x": 0, "y": 0, "blur": 0, "spread": 0, "color": "#000000"}}` |
+
+
+
## Exposed Variables
Exposed variables can be used to get data from the component.
-| Variables | Description |
-| ----------- | ----------- |
-| **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. You can 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. You can 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. You can 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. Values can be accessed 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 |
-| **bounds.northEast** | It holds the latitude and longitude of the north-east corner of the rectangle. You can access the value dynamically using JS: `{{components.map1.bounds.northEast.lat}}` or `{{components.map1.bounds.northEast.lng}}` |
-| **bounds.southWest** | It holds the latitude and longitude of the south-west corner of the rectangle. You can access the value dynamically using JS: `{{components.map1.bounds.southWest.lat}}` or `{{components.map1.bounds.southWest.lng}}` |
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:--------- |
+| 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.`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}}`|
+| 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 |
+| bounds.northEast | It holds the latitude and longitude of the north-east corner of the rectangle.| Access the value dynamically using JS: `{{components.map1.bounds.northEast.lat}}` or `{{components.map1.bounds.northEast.lng}}` |
+| bounds.southWest | It holds the latitude and longitude of the south-west corner of the rectangle. | Access the value dynamically using JS: `{{components.map1.bounds.southWest.lat}}` or `{{components.map1.bounds.southWest.lng}}` |
-## Component specific actions (CSA)
+
-Following actions of map component can be controlled using the component specific actions(CSA):
+
-| Actions | Description |
-|:---------- |:---------- |
-| **setLocation** | Set the marker's location on map using latitude and longitude values as parameteres via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as: `component.map1.setLocation(40.7128, -73.935242)` |
+## General
+### Tooltip
+
+A Tooltip is often used to specify the extra information when the user hovers the mouse pointer over the component. Once a value is set for Tooltip, hovering over the element will display the specified string as the tooltip text.
+
+
+
+
+
+## Layout
+
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+
+
+
+
+
+## Styles
+
+|
Properties
|
Description
|
Expected Value
|
+|:----------- |:----------- |:------------------ |
+| Visibility | Toggle on or off to control the visibility of the component. | You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the component will not be visible after the app is release. By default, it's set to `{{true}}`. |
+| Disable | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. | You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
+| Box shadow | Add a shadow effect to the component by providing values to X, Y, Blur, Spread and Color. | You can also programmatically set the value by clicking on the `Fx` button next to it. Ex: `{{"x": 0, "y": 0, "blur": 0, "spread": 0, "color": "#000000"}}` |
+
+
\ No newline at end of file
diff --git a/docs/docs/widgets/modal.md b/docs/docs/widgets/modal.md
index ae3ebd33b6..994ed196b1 100644
--- a/docs/docs/widgets/modal.md
+++ b/docs/docs/widgets/modal.md
@@ -4,13 +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.
@@ -20,61 +14,32 @@ If the builder attempts to add any of the aforementioned components inside the M
` cannot be used as a child component within the Modal.`
:::
-## How To Use Modal Widget
+
-
-
-## Add widgets to Modal
+## Add Widgets to Modal
To add widgets to the Modals please refer to **[Tutorial - Adding widgets to a modal](/docs/tutorial/adding-widget#adding-widgets-to-modal)**
+
+
+
+
## Properties
-### Title
+|
Property
|
Description
|
+|:----------- |:----------- |
+| Title | Title that should be shown on the header of the modal. |
+| Loading state | Loading state can be used to show a spinner on the modal content. Loading state is commonly used with isLoading property of the queries to show a loading status while a query is being run. Enable the toggle **On** or click on `fx` to programmatically set the value `{{true}}` or `{{false}}` . |
+| Hide title bar | Enabling this option hides the title bar in the modal. The value `{{true}}` or `{{false}}` can be set programmatically by clicking on the `Fx` button next to it. |
+| Hide close button | By enabling this option, the close button within the modal will be hidden. The value can be programmatically set to either `{{true}}` or `{{false}}` by clicking the adjacent `Fx` button. |
+| Close on escape key | Enabling this option will cause the modal to close whenever the escape key is pressed. The value can be programmatically set to either `{{true}}` or `{{false}}` by clicking the adjacent `Fx` button. This property is enabled by default. |
+| Close on outside click | Enabling this feature will result in the modal closing when clicked outside of its boundaries. The value can be programmatically set to either `{{true}}` or `{{false}}` by clicking the adjacent `Fx` button. |
+| Modal size | Determines the size of the modal. Available options include `medium`, `small`, and `large`, with the default set to `medium`. The value can also be programmatically configured by clicking the `Fx` button and setting it to `sm`, `md`, or `lg`. |
+| Modal height | Specifies the height of the modal, with the default height set to `400px`. The modal's height can also be dynamically set using JS binding by utilizing the `{{components.xyz.data.key === 'Sun' ?? '600px' : '300px'}}` syntax. |
-Title that should be shown on the header of the modal.
+
-### Loading State
-
-Loading state can be used to show a spinner on the modal content. Loading state is commonly used with isLoading property of the queries to show a loading status while a query is being run. Enable the toggle **On** or click on `fx` to programmatically set the value `{{true}}` or `{{false}}` .
-
-### Hide title bar
-
-Enabling this option hides the title bar in the modal. The value `{{true}}` or `{{false}}` can be set programmatically by clicking on the `Fx` button next to it.
-
-### Hide close button
-
-By enabling this option, the close button within the modal will be hidden. The value can be programmatically set to either `{{true}}` or `{{false}}` by clicking the adjacent `Fx` button.
-
-### Close on escape key
-
-Enabling this option will cause the modal to close whenever the escape key is pressed. The value can be programmatically set to either `{{true}}` or `{{false}}` by clicking the adjacent `Fx` button. This property is enabled by default.
-
-### Close on outside click
-
-Enabling this feature will result in the modal closing when clicked outside of its boundaries. The value can be programmatically set to either `{{true}}` or `{{false}}` by clicking the adjacent `Fx` button.
-
-### Modal size
-
-Determines the size of the modal. Available options include `medium`, `small`, and `large`, with the default set to `medium`. The value can also be programmatically configured by clicking the `Fx` button and setting it to `sm`, `md`, or `lg`.
-
-### Modal height
-
-Specifies the height of the modal, with the default height set to `400px`. The modal's height can also be dynamically set using JS binding by utilizing the `{{components.xyz.data.key === 'Sun' ?? '600px' : '300px'}}` syntax.
-
-## Options
-
-### Use default trigger button
-
-The default trigger button is enabled by default, this button can be used to show the modal. The value `{{true}}` or `{{false}}` can be set programmatically by clicking on the `Fx` button next to it.
-
-:::info
-A modal can be triggered using the default trigger button, [action](/docs/actions/show-modal) or via [JavaScript](/docs/how-to/run-actions-from-runjs#show-modal).
-:::
-
-### Trigger button label
-
-It can be used to set the label of the trigger button.
+
## Events
@@ -86,20 +51,61 @@ Modal supports the following two events:
Just like any other event on ToolJet, you can set multiple handlers for the events supported by Modal. Check all the [actions here](/docs/category/actions-reference).
:::
+
+
+
+
+## Component Specific Actions (CSA)
+
+Following actions of Modal component can be controlled using the component specific actions(CSA):
+
+|
Actions
|
Description
|
How To Access
|
+|:----------- |:----------- |:--------- |
+| 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()` |
+
+
+
+
+
+## Exposed Variables
+
+There are currently no exposed variables for the component.
+
+
+
+
+
+## Options
+
+|
Option
|
Description
|
+|:----------- |:----------- |
+| Use default trigger button | The default trigger button is enabled by default, this button can be used to show the modal. The value `{{true}}` or `{{false}}` can be set programmatically by clicking on the `Fx` button next to it. |
+| Trigger button label | It can be used to set the label of the trigger button. |
+
+:::info
+A modal can be triggered using the default trigger button, [action](/docs/actions/show-modal) or via [JavaScript](/docs/how-to/run-actions-from-runjs#show-modal).
+:::
+
+
+
+
+
## Layout
-### Show on desktop
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
+
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
|
+|:----------- |:----------- |:------ |
| Header background color | Change the background color of the header in modal | Enter the Hex color code or choose a color of your choice from the color picker |
| Header title color | Change the color of the Title in modal | Enter the Hex color code or choose a color of your choice from the color picker |
| Body background color | Change the background color of the body in modal | Enter the Hex color code or choose a color of your choice from the color picker |
@@ -111,17 +117,4 @@ Toggle on or off to display the widget in mobile view. You can programmatically
:::info
Trigger Button styles are only visible when **Use default trigger button** under Options is toggled on.
:::
-
-## Exposed variables
-
-There are currently no exposed variables for the component.
-
-
-## Component specific actions (CSA)
-
-Following actions of modal component can be controlled using the component specific actions(CSA):
-
-| Actions | Description |
-| ----------- | ----------- |
-| open | Control the opening and closing of the modal componennt via a component-specific action within any event handler. Additionally, you have the option to 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. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.modal1.close()` |
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/docs/widgets/multiselect.md b/docs/docs/widgets/multiselect.md
index 07146db893..2c8bb81da0 100644
--- a/docs/docs/widgets/multiselect.md
+++ b/docs/docs/widgets/multiselect.md
@@ -4,91 +4,103 @@ 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.
-
+
-
+## Properties
+
+|
Property
|
Description
|
+|:----------- |:----------- |
+| 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. |
+
+
## Events
-
-
-
-
-
-
-### 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)**.
+|
Event
|
Description
|
+|:----------------- | :--------------------------------------------- |
+| 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)**. |
:::info
For comprehensive information on all available **Actions**, refer to the [Action Reference](/docs/category/actions-reference) documentation.
:::
-## Properties
+
-### Label
+
-The text is to be used as the label for the multiselect widget.
+## Component Specific Actions (CSA)
+`await components.multiselect1.clearSelections()`
+`await components.multiselect1.deselectOption(2)`
-### Default value
+Following actions of Multiselect component can be controlled using the component specific actions(CSA):
-The value of the default option. This should always be an array.
-### Option values
+|
Actions
|
Description
|
How To Access
|
+|:----------- |:----------- |:-------- |
+| 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)` |
-Values for different items/options in the list of the multiselect.
+
-### Option labels
+
-Labels for different items/options in the list of the multiselect.
+## Exposed Variables
-### General
-#### Tooltip
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:----------|
+| 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 |
+
+
+
+
+
+## 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 General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-### Show on desktop
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
+
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-### Border radius
+|
Style
|
Description
|
+|:----------- |:----------- |
+| Border radius | Add a border radius to the multiselect using this property. It accepts any numerical value from `0` to `100`. |
+| 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}}`. |
+| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
-Add a border radius to the multiselect using this property. It accepts any numerical value from `0` to `100`.
+
-### 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}}`.
-
-### Disable
-
-This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+
|
+|:----------- |:----------- |:------------------ |
| `selectOption` | Select options. | pass options as parameter. ex: `components.multiselect1.selectOption(1)` |
| `deselectOption` | Deselect options.| pass options as parameter. ex: `components.multiselect1.deselectOption(1)` |
| `clearSelections` | Clear all selection. | ex: `components.multiselect1.clearSelections()` |
@@ -98,21 +110,4 @@ This is `off` by default, toggle `on` the switch to lock the widget and make it
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed Variables
-
-| Variables | Description |
-| ----------- | ----------- |
-| values | This variable holds the values of the multiselect component in an array of objects where the objects are the options in the multiselect. You can 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. |
-
-## Component specific actions (CSA)
-await components.multiselect1.clearSelections()
-await components.multiselect1.deselectOption(2)
-
-Following actions of multselect component can be controlled using the component specific actions(CSA):
-
-| Actions | Description |
-| ----------- | ----------- |
-| selectOption | Select an option on the multiselect component via a component-specific action within any event handler. Additionally, you have the option to 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. Additionally, you have the option to 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. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.multiselect1.clearSelections(2,3)` |
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/docs/widgets/number-input.md b/docs/docs/widgets/number-input.md
index 02be724ac5..d685f8121e 100644
--- a/docs/docs/widgets/number-input.md
+++ b/docs/docs/widgets/number-input.md
@@ -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
@@ -18,7 +18,7 @@ The Number Input component allows users to enter numeric values. It can be used
## Events
| Event | Description |
-|------------------|---------------------|
+|:------------------|:---------------------|
| **On change** | Triggers whenever the user types something in the input field. |
| **On focus** | Triggers whenever the user clicks inside the input field. |
| **On blur** | Triggers whenever the user clicks outside the input field. |
@@ -48,15 +48,15 @@ Check the **component specific actions** available for this component **[here](/
## Exposed Variables
-|
Variable
|
Description
|
How To Access
|
-|: ---------- | :---------- | :------------ |
-| 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 |
+|:--------:|:-----------:|:------------:|
+|
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}}`).|
## Validation
@@ -68,6 +68,11 @@ Check the **component specific actions** available for this component **[here](/
| Max value | Sets the maximum value allowed. | Integer (e.g., `1000` for a maximum value of 1000).|
| Custom validation | Specifies a validation error message for specific conditions. | Logical Expression (e.g., `{{components.numberinput1.value<5&&"Value needs to be more than 5"}}`). |
+To add regex inside `Custom Validation`, you can use the below format:
+
+**Format**: `{{(.test()) ? '' : 'Error message';}}`
+
+**Example**: `{{(/^\d{1,10}$/.test(components.numberinput1.value)) ? '' : 'Error message';}}`
## Additional Actions
diff --git a/docs/docs/widgets/overview.md b/docs/docs/widgets/overview.md
index a0937368bd..04c6e5a9e6 100644
--- a/docs/docs/widgets/overview.md
+++ b/docs/docs/widgets/overview.md
@@ -7,7 +7,9 @@ title: Overview
Components are used to build the UI of the applications. They can be dragged onto the canvas from the Component Library and can be modified from the Properties Panel without needing to write any code. **[Event Handlers](/docs/widgets/overview#component-event-handlers)** in Components allow end users to trigger queries and other application events to perform the **[Actions](/docs/category/actions-reference)**.
-## Adding components
+
+
+## Adding Components
Components can be dragged and dropped from the Component Library(from the right side on app builder) on to the canvas. Components can be moved by simply click and hold, and can be resized from edges or borders.
@@ -17,7 +19,11 @@ Components can be dragged and dropped from the Component Library(from the right
-### Select multiple components
+
+
+
+
+### Select Multiple Components
For moving the **multiple components** at once, simply **shift+click**, to select multiple components. Once grouped, the components can be moved on the canvas while maintaining their relative positions.
@@ -39,16 +45,24 @@ You can also create a selection triangle and move multiple components together b
You can also use many other **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)** in ToolJet to copy, cut, paste components to the canvas.
:::
-## Component properties
+
+
+
+
+## Component Properties
Each Component can be modified and styled from the Properties Panel such as the **data** field, a toggle for **disabling** the component, or stylings like a **background color**. Properties can be modified directly or programmatically by using **[Bindings](#bindings)**, which enables you to write JavaScript code.
-
+
+
+
+
+
## Component Event Handlers
Event Handlers can be found in the Component's **Property Panel** or in the **Advanced** section of the Query. Event handlers can be used to trigger **[Actions](/docs/category/actions-reference)** such as executing the queries, perform Component Specific Actions(CSA) or for setting a variable.
@@ -63,10 +77,14 @@ Event handlers for components have the following properties:
-
+
+
+
+
+
### Using Run only if
With this option in Event Handlers, users can specify a condition that must be met before the event handler's action is executed. This allows for more fine-grained control over when certain actions should be triggered in response to component events.
@@ -98,6 +116,10 @@ or
+
+
+
+
## Bindings
Bindings allow you to get dynamic data into the components. Anything inside of **`{{}}`** is evaluated as a JavaScript expression in ToolJet.
@@ -120,3 +142,5 @@ or
:::tip
Check out the How-to guides like **[changing color of text in table column](/docs/how-to/access-cellvalue-rowdata)**, **[Enable/Disable a component using JavaScript](/docs/how-to/access-currentuser)**, and **[more](/docs/category/how-to)**.
:::
+
+
\ No newline at end of file
diff --git a/docs/docs/widgets/pagination.md b/docs/docs/widgets/pagination.md
index 182e4211f2..e116f2c517 100644
--- a/docs/docs/widgets/pagination.md
+++ b/docs/docs/widgets/pagination.md
@@ -4,32 +4,53 @@ 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.
:::
-
-
-
-
-
+
## Properties
-### Number of pages
+|
Property
|
Description
|
+|:------------ |:-------------|
+| Number of pages | You can use this to predefined the total number of pages. It is calculated by dividing the length of the data array that will be passed, by the data limit which is the number of posts we will show on each page. |
+| Default page index | It is used to set and display the default page index when the app initially loads. You can also put a conditional logic to set its value as per your use case. |
-You can use this to predefined the total number of pages. It is calculated by dividing the length of the data array that will be passed, by the data limit which is the number of posts we will show on each page.
+
-### Default page index
-It is used to set and display the default page index when the app initially loads. You can also put a conditional logic to set its value as per your use case.
+
## Event
-### On Page Change
+|
Event
|
Description
|
+|:------------------|:---------------------|
+| On Page Change | This event is triggered whenever the user switches to another page index. You can explore various actions associated with this event as per app logic. |
-This event is triggered whenever the user switches to another page index. You can explore various actions associated with this event as per app logic.
+
+
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+
+
+
+## Exposed Variables
+
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:--------- |
+| 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}}`. |
+
+
+
+
## General
### Tooltip
@@ -38,42 +59,30 @@ A Tooltip is often used to specify extra information about something when the us
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-### Show on desktop
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
+
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-### 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}}`.
-
-### Disable
-
-This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+|
Style
|
Description
|
Default Value
|
+|:------------ |:-------------|:--------- |
+| 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}}`. |
+| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. | By default, its value is set to `{{false}}`. |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed Variables
-
-| Variables | Description |
-| ----------- | ----------- |
-| totalPages | This variable holds the value of the `Number of Pages` set from the pagination component properties. You can 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. You can access the value dynamically using JS: `{{components.pagination1.currentPageIndex}}`|
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/docs/widgets/password-input.md b/docs/docs/widgets/password-input.md
index c401404ad0..ed93cd6ef6 100644
--- a/docs/docs/widgets/password-input.md
+++ b/docs/docs/widgets/password-input.md
@@ -4,7 +4,9 @@ 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.
+
+
## Properties
|
Property
|
Description
|
Expected Value
|
@@ -13,109 +15,147 @@ The Password Input component allows users to enter passwords securely. In this c
| Placeholder | A hint displayed to guide the user on what to enter. | String (e.g., `SecurePassword123`). |
| Default value | The default value that the component will hold when the app is loaded. | String (e.g., `Default Text`). |
+
+
+
## Events
| Event | Description |
-|------------------|--------------|
-| **On change** | Triggers whenever the user types something in the input field. |
-| **On focus** | Triggers whenever the user clicks inside the input field. |
-| **On blur** | Triggers whenever the user clicks outside the input field. |
-| **On enter pressed** | Triggers whenever the user presses the enter button on the keyboard after entering some text in the input field. |
+|:------------------|:--------------|
+| On change | Triggers whenever the user types something in the input field. |
+| On focus | Triggers whenever the user clicks inside the input field. |
+| On blur | Triggers whenever the user clicks outside the input field. |
+| On enter pressed | Triggers whenever the user presses the enter button on the keyboard after entering some text in the input field. |
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get detailed information about all the **Actions**.
:::
+
+
+
+
## Component Specific Actions (CSA)
Following actions of component can be controlled using the component specific actions(CSA):
|
Action
|
Description
|
How To Access
|
| :------------ | :---------- | :------------ |
-| setText() | Sets the value of the input field. | Employ a RunJS query (for e.g., `await components.passwordinput1.setText('password123')`) or trigger it using an event. |
-| clear() | Clears the entered text in the input field. | Employ a RunJS query (for e.g., `await components.passwordinput1.clear()`) or trigger it using an event. |
-| setFocus() | Sets the focus of the cursor on the input field. | Employ a RunJS query (for e.g., `await components.passwordinput1.setFocus()`) or trigger it using an event. |
-| setBlur() | Removes the focus of the cursor from the input field. | Employ a RunJS query (for e.g., `await components.passwordinput1.setBlur()`) or trigger it using an event. |
-| setVisibility()| Sets the visibility of the component. | Employ a RunJS query (for e.g., `await components.passwordinput1.setVisibility(false)`) or trigger it using an event. |
-| setLoading() | Sets the loading state of the component. | Employ a RunJS query (for e.g., `await components.passwordinput1.setLoading(true)`) or trigger it using an event. |
-| setDisable() | Disables the component. | Employ a RunJS query (for e.g., `await components.passwordinput1.setDisable(true)`) or trigger it using an event. |
+| setText() | Sets the value of the input field. | Employ a RunJS query (for e.g., `await components.passwordinput1.setText('password123')`) or trigger it using an event |
+| clear() | Clears the entered text in the input field. | Employ a RunJS query (for e.g., `await components.passwordinput1.clear()`) or trigger it using an event |
+| setFocus() | Sets the focus of the cursor on the input field. | Employ a RunJS query (for e.g., `await components.passwordinput1.setFocus()`) or trigger it using an event |
+| setBlur() | Removes the focus of the cursor from the input field. | Employ a RunJS query (for e.g., `await components.passwordinput1.setBlur()`) or trigger it using an event |
+| setVisibility()| Sets the visibility of the component. | Employ a RunJS query (for e.g., `await components.passwordinput1.setVisibility(false)`) or trigger it using an event |
+| setLoading() | Sets the loading state of the component. | Employ a RunJS query (for e.g., `await components.passwordinput1.setLoading(true)`) or trigger it using an event |
+| setDisable() | Disables the component. | Employ a RunJS query (for e.g., `await components.passwordinput1.setDisable(true)`) or trigger it using an event |
:::info
Check the **component specific actions** available for this component **[here](/docs/actions/control-component)**.
:::
+
+
+
+
## Exposed Variables
-|
Variable
|
Description
|
How To Access
|
-|: ---------- | :---------- | :------------ |
-| 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 |
+|:--------:|:-----------:|:------------:|
+|
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}}`).|
+
+
+
## Validation
|
Validation Option
|
Description
|
Expected Value
|
|:---------------|:-------------------------------------------------|:-----------------------------|
-| Make this field mandatory | Displays a 'Field cannot be empty' message if no value is entered. | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
-| Regex | Regular Expression to validate the input. | Regular Expression Pattern (e.g., `^\d{3}-\d{2}-\d{4}$`). |
-| Min length | Sets the minimum number of characters allowed. | Integer (e.g., `6` for a minimum of 6 characters). |
-| Max length | Sets the maximum number of characters allowed. | Integer (e.g., `12` for a maximum of 12 characters).|
-| Custom validation | Specifies a validation error message for specific conditions. | Logical Expression (e.g., `{{components.passwordinput1.value<5&&"Value needs to be more than 5"}}`). |
+| Make this field mandatory | Displays a 'Field cannot be empty' message if no value is entered. | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression |
+| Regex | Regular Expression to validate the input. | Regular Expression Pattern (e.g., `^\d{3}-\d{2}-\d{4}$`) |
+| Min length | Sets the minimum number of characters allowed. | Integer (e.g., `6` for a minimum of 6 characters) |
+| Max length | Sets the maximum number of characters allowed. | Integer (e.g., `12` for a maximum of 12 characters)|
+| Custom validation | Specifies a validation error message for specific conditions. | Logical Expression (e.g., `{{components.passwordinput1.value<5&&"Value needs to be more than 5"}}`) |
+To add regex inside `Custom Validation`, you can use the below format:
+**Format**: `{{(.test()) ? '' : 'Error message';}}`
+
+**Example**: `{{(/^\d{1,10}$/.test(components.passwordinput1.value)) ? '' : 'Error message';}}`
+
+
+
+
## Additional Actions
|
Action
|
Description
|
Configuration Options
|
|:------------------|:------------|:------------------------------|
-| Loading state | Enables a loading spinner, often used with `isLoading` to indicate progress. | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
-| Visibility | Controls component visibility. | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
-| Disable | Enables or disables the component. | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
-| Tooltip | Provides additional information on hover. | String (e.g., `Enter your password here.` ). |
+| Loading state | Enables a loading spinner, often used with `isLoading` to indicate progress. | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression |
+| Visibility | Controls component visibility. | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression |
+| Disable | Enables or disables the component. | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression |
+| Tooltip | Provides additional information on hover. | String (e.g., `Enter your password here.` ) |
+
+
+
+
## Devices
-**Show on desktop**
+|
Property
|
Description
|
Expected Value
|
+|:---------- |:----------- |:----------|
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression |
+| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression |
-Makes the component visible in desktop view. You can set it with the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression.
-
-**Show on mobile**
-
-Makes the component visible in mobile view. You can set it with the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression.
+
---
+
# Styles
+
+
+
+
## Label
|
Label Property
|
Description
|
Configuration Options
|
|:---------------|:------------|:---------------|
-| Text | Sets the color of the component's label. | Select the color or click on `fx` and input JavaScript code that programmatically returns a Hex color code. |
-| Alignment | Sets the position of the label and input field. | Click on the toggle options or click on `fx` to input code that programmatically returns an alignment value - `side` or `top`. |
-| Width | Sets the width of the input field. | Keep the `Auto width` option for standard width or deselect it to modify the width using the slider or through code entry in `fx` that returns a numeric value. |
+| Text | Sets the color of the component's label. | Select the color or click on `fx` and input JavaScript code that programmatically returns a Hex color code |
+| Alignment | Sets the position of the label and input field. | Click on the toggle options or click on `fx` to input code that programmatically returns an alignment value - `side` or `top` |
+| Width | Sets the width of the input field. | Keep the `Auto width` option for standard width or deselect it to modify the width using the slider or through code entry in `fx` that returns a numeric value |
+
+
+
+
## Field
|
Field Property
|
Description
|
Configuration Options
|
|:----------------|:------------|:--------------|
-| Background | Sets the background color of the component. | Select the color or click on `fx` and input code that programmatically returns a Hex color code. |
-| Border | Sets the border color of the component. | Select the color or click on `fx` and input code that programmatically returns a Hex color code. |
-| Text | Sets the color of the text entered in the component. | Select the color or click on `fx` and input code that programmatically returns a Hex color code. |
-| Error text | Sets the color of validation message that displays. | Select the color or click on `fx` and input code that programmatically returns a Hex color code. |
-| Icon | Allows you to select an icon for the component. | Enable the icon visibility, select icon and icon color. Alternatively, you can set it programmatically using `fx`. |
-| Border radius | Modifies the border radius of the component. | Enter a number or click on `fx` and enter a code that programmatically returns a numeric value. |
-| Box shadow | Sets the box shadow properties of the component. | Select the box shadow color and adjust the related properties or set it programmatically using `fx`. |
+| Background | Sets the background color of the component. | Select the color or click on `fx` and input code that programmatically returns a Hex color code |
+| Border | Sets the border color of the component. | Select the color or click on `fx` and input code that programmatically returns a Hex color code |
+| Text | Sets the color of the text entered in the component. | Select the color or click on `fx` and input code that programmatically returns a Hex color code |
+| Error text | Sets the color of validation message that displays. | Select the color or click on `fx` and input code that programmatically returns a Hex color code |
+| Icon | Allows you to select an icon for the component. | Enable the icon visibility, select icon and icon color. Alternatively, you can set it programmatically using `fx` |
+| Border radius | Modifies the border radius of the component. | Enter a number or click on `fx` and enter a code that programmatically returns a numeric value |
+| Box shadow | Sets the box shadow properties of the component. | Select the box shadow color and adjust the related properties or set it programmatically using `fx` |
+
+
+
## Container
**Padding**
Allows you to maintain a standard padding by enabling the `Default` option.
-
+
diff --git a/docs/docs/widgets/pdf.md b/docs/docs/widgets/pdf.md
index 8dbc206c17..c59f0872ac 100644
--- a/docs/docs/widgets/pdf.md
+++ b/docs/docs/widgets/pdf.md
@@ -5,65 +5,85 @@ title: PDF
# PDF
-PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
+The **PDF** component can be used to embed PDF files either by URL or through Base64 code.
+
+
+
+## Compatibility
+
+The PDF component is compatible with the following browser versions:
+
+|
Browser
|
Version
|
+|:--------|:--------------------|
+| Chrome | 92 or later |
+| Edge | 92 or later |
+| Safari | 15.4 or later |
+| Firefox | 90 or later |
+
+
+If the PDF component is integrated into your application, it will only render in supported browsers.
+
+
+
+
+
+## Properties
+
+|
Property
|
Description
|
+|:----------- |:------------|
+| File URL | Under this property, you can enter the URL of the PDF file to display. Base64 format is also supported, the input needs to be prefixed with `data:application/pdf;base64,`. |
+| Scale page to width | The `Scale page to width` property automatically adjusts the PDF to fill the entire width of the component. |
+| Show page controls | By default, when hovering over the PDF file, buttons for the previous and next page, along with the page number, are displayed. They can be toggled on or off using the `Show page controls` toggle. |
+| Show the download | The `Download` button on the PDF component allows you to download the PDF file. By default, `Show the download` button is enabled. Toggle it off to remove the `Download` button from the PDF component. |
+
+
+
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+
+
+
+## Exposed Variables
+
+There are currently no exposed variables for the component.
+
+
+
+
+
+## General
+### Tooltip
+
+To display instructional text when a user hovers over the PDF component, add some text under the Tooltip property.
+
+
+
+
+
+## Devices
+
+|
Property
|
Description
|
Expected Value
|
+| :-------------- | :---------------------------------------- | :------------------ |
+| Show on desktop | Display the component in Desktop view. | Programmatically determine the value by clicking on `fx` or use the toggle switch |
+| Show on mobile | Display the component in Mobile view. | Programmatically determine the value by clicking on `fx` or use the toggle switch |
+
+
+
+
+
+## Styles
+
+|
Style
|
Description
|
Default Value
|
+|:------------ |:-------------|:--------- |
+| Visibility | Toggle the `Visibility` condition on or off to control the visibility of the component. You can also programmatically change its value by clicking on the `fx` button next to it. If `{{false}}` the component will not be visible after the app is deployed. | By default, it's set to `{{true}}` |
:::info
Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
-## Properties
-
-### File URL
-
-The URL of the PDF file on the web. `data:application/pdf;base64,` format is supported and the input needs to be prefixed with `data:application/pdf;base64,`
-
-### Scale page to width
-
-It can be toggled to adjust the PDF content to fit the width or height of the component
-
-### Show page controls
-
-By default, page number, previous & next button is displayed while hovering the PDF file. It can be toggled on or off.
-
-### Show the download
-
-The `Download` button on the PDF component allows you to download the pdf file. By default, Show the download button is enabled. Toggle it off to remove the `Download` button from PDF component, you can also click on the `Fx` button to set the values `{{true}}` or `{{false}}` dynamically.
-
-## 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 General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
-
-
-
-## Layout
-
-| Layout | description | Expected value |
-| --------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-
-## Styles
-
-| 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 visible after the app is deployed. By default, it's set to `{{true}}`. |
-
-:::info
-Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
-
-
-## Exposed variables
-
-There are currently no exposed variables for the component.
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/qr-scanner.md b/docs/docs/widgets/qr-scanner.md
index f031728575..75bc7c17a0 100644
--- a/docs/docs/widgets/qr-scanner.md
+++ b/docs/docs/widgets/qr-scanner.md
@@ -5,25 +5,17 @@ title: QR Scanner
# QR Scanner
Scan QR codes using device camera and hold the data they carry.
-
-
-
-
-
-
:::note Known Issue
You might have to stick to the Safari browser in IOS as camera access is restricted for third-party browsers.
:::
-## Exposed variables
-### lastDetectedValue
-
-This variable holds the data contained in the last QR code scanned by the widget. To fetch the data use `{{components.qrscanner1.lastDetectedValue}}`.
+
## Events
-### onDetect
-This event is fired whenever the widget successfully scans a QR code.
+|
Event
|
Description
|
+|:------------------|:---------------------|
+| onDetect | This event is fired whenever the widget successfully scans a QR code. |
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
@@ -36,6 +28,28 @@ Browser camera APIs restrict this widget to only work in either `localhost` or `
So if you're testing it out, be sure to either use `localhost` or `https`.
:::
+
+
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+
+
+
+## Exposed Variables
+
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:--------- |
+| lastDetectedValue | This variable holds the data contained in the last QR code scanned by the widget. | To fetch the data use `{{components.qrscanner1.lastDetectedValue}}` |
+
+
+
+
+
## General
### Tooltip
@@ -45,31 +59,26 @@ mouse pointer over the widget.
Under the General accordion, you can set the value in the string format.
Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-### Show on desktop
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
+
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-### Visibility
+|
Style
|
Description
|
Default Value
|
+|:------------ |:-------------|:--------- |
+| 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}}` |
+| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. | By default, its value is set to `{{false}}` |
-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}}`.
-
-### Disable
-
-This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/radio-button.md b/docs/docs/widgets/radio-button.md
index 26c3c5c725..e0e2adf248 100644
--- a/docs/docs/widgets/radio-button.md
+++ b/docs/docs/widgets/radio-button.md
@@ -4,47 +4,46 @@ title: Radio Button
---
# Radio Button
-Radio button widget can be used to select one option from a group of options.
-
-## How To Use Radio button Widget
-
-
+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
For more than six options, consider using **[Dropdown](/docs/widgets/dropdown)** widget.
:::
+## Properties
+
+|
Property
|
Description
|
+|:------------ |:-------------|
+| Label | The text is to be used as the label for the radio button. This field expects a `String` value. |
+| Default value | The value of the default option. |
+| Option values | List of values for different items/options. Refer your query data with dynamic variables `{{queries.datasource.data.map(item => item.value)}}` or populate it with sample values `{{[true, false]}}`. |
+| Option labels | List of labels for different items/options. Refer your query data with dynamic variables `{{queries.datasource.data.map(item => item.label)}}` or populate it with sample values `{{["yes", "no"]}}`. |
+
## Event
-### On select
-
-This event is triggered when an option is clicked.
+|
Event
|
Description
|
+|:------------------|:---------------------|
+| On select | This event is triggered when an option is clicked. |
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
:::
-## Properties
+## Component Specific Actions (CSA)
-### Label
+Following actions of color picker component can be controlled using the component specific actions(CSA):
-The text is to be used as the label for the radio button. This field expects a `String` value.
+|
Actions
|
Description
|
How To Access
+|:----------- |:----------- |:------- |
+| selectOption | Select an option from the radio buttons via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as: `await components.radiobutton1.selectOption('one')` |
-### Default value
+## Exposed Variables
-The value of the default option.
-
-### Option values
-
-List of values for different items/options. Refer your query data with dynamic variables `{{queries.datasource.data.map(item => item.value)}}` or populate it with sample values `{{[true, false]}}`
-
-### Option labels
-
-List of labels for different items/options. Refer your query data with dynamic variables `{{queries.datasource.data.map(item => item.label)}}` or populate it with sample values `{{["yes", "no"]}}`
+There are currently no exposed variables for the component.
## General
### Tooltip
@@ -53,55 +52,18 @@ A Tooltip is often used to specify extra information about something when the us
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
-
-
## Layout
-### Show on desktop
-
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
-
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
## Styles
-### Text color
-
-Change the color of the text in the widget by providing the `Hex color code` or by choosing the color of your choice from the color picker.
-
-### Active color
-
-Change the color of active radio button by providing the `Hex color code` or by choosing the color of your choice from the color picker.
-
-### 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}}`.
-
-### Disable
-
-This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
-
-## Example
-
-
-
-
-
-
-
-## Exposed variables
-
-There are currently no exposed variables for the component.
-
-## Component specific actions (CSA)
-
-Following actions of color picker component can be controlled using the component specific actions(CSA):
-
-| Actions | Description |
-| ----------- | ----------- |
-| selectOption | Select an option from the radio buttons via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as: `await components.radiobutton1.selectOption('one')` |
\ No newline at end of file
+|
Style
|
Description
|
Default Value
|
+|:------------ |:-------------|:--------- |
+| Text color | Change the color of the text in the widget by providing the `Hex color code` or by choosing the color of your choice from the color picker. | |
+| Active color | Change the color of active radio button by providing the `Hex color code` or by choosing the color of your choice from the color picker. | |
+| 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}}` |
+| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. | By default, its value is set to `{{false}}` |
\ No newline at end of file
diff --git a/docs/docs/widgets/range-slider.md b/docs/docs/widgets/range-slider.md
index 604d9ee204..f0ccf3bcb3 100644
--- a/docs/docs/widgets/range-slider.md
+++ b/docs/docs/widgets/range-slider.md
@@ -4,35 +4,44 @@ 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.
:::
-
-
-
-
-
+
## Properties
-### Minimum value
+|
Property
|
Description
|
+|:------------ |:-------------|
+| Minimum value | Set the minimum value for the slider. This field accepts any numerical value. |
+| Maximum value | Set the maximum value for the slider. This field accepts any numerical value. |
+| Value | Set the default value when the widget loads. This can be used to pre-fill the value based on your data and requirements. |
+| Two handles | The slider will now have 2 dragging handles. It is used to define a range of values versus a single given value. |
-Set the minimum value for the slider. This field accepts any numerical value.
+
-### Maximum value
+
-Set the maximum value for the slider. This field accepts any numerical value.
+## Component Specific Actions (CSA)
-### Value
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
-Set the default value when the widget loads. This can be used to pre-fill the value based on your data and requirements.
+
-### Two handles
+
-The slider will now have 2 dragging handles. It is used to define a range of values versus a single given value.
+## Exposed Variables
+
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:--------- |
+| value | Holds an object when `two handles` option is disabled or an array when `two handles` is enabled from the component properties. | The value can be accessed dynamically using JS: `{{components.rangeslider1.value}}` or `{{components.rangeslider1.value[1]}}` |
+
+
+
+
## General
### Tooltip
@@ -41,46 +50,32 @@ A Tooltip is often used to specify extra information about something when the us
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-### Show on desktop
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
+
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-### 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}}`.
+|
Style
|
Description
|
+|:------------ |:-------------|
+| 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 visibility of the slider programmatically. The default value is `{{true}}`. |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed Variables
-
-| Variables | Description |
-| ----------- | ----------- |
-| value | This variable holds an object when `two handles` option is disabled or an array when `two handles` is enabled from the component properties. The value can be accessed dynamically using JS: `{{components.rangeslider1.value}}` or `{{components.rangeslider1.value[1]}}` |
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/rich-text-editor.md b/docs/docs/widgets/rich-text-editor.md
index 9d99fb99e3..3995495797 100644
--- a/docs/docs/widgets/rich-text-editor.md
+++ b/docs/docs/widgets/rich-text-editor.md
@@ -4,24 +4,39 @@ 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.
-
-
-
-
-
+
## Properties
-### Placeholder
+|
Placeholder
|
Description
|
+|:----------- |:----------- |
+| Placeholder | It specifies a hint that describes the expected value. |
+| Default Value | The default value that the widget will hold when the app is loaded. |
-It specifies a hint that describes the expected value.
+
-### Default Value
+
-The default value that the widget will hold when the app is loaded.
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+
+
+
+## Exposed Variables
+
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:--------- |
+| 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}}`|
+
+
+
+
## General
### Tooltip
@@ -30,37 +45,26 @@ A Tooltip is often used to specify extra information about something when the us
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-### Show on desktop
+|
Layout
|
Description
|
+|:----------- |:----------- |
+| Show on desktop | Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}` |
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
+
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-### Visibility
+|
Style
|
Description
|
Default Value
|
+|:---------------|:-----------|:---------------|
+| 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}}`. |
+| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. | By default, its value is set to `{{false}}`. |
-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}}`.
-
-### Disable
-
-This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
-
-## Exposed Variables
-
-| Variables | Description |
-| ----------- | ----------- |
-| 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}}`|
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/spinner.md b/docs/docs/widgets/spinner.md
index 7869b13be0..026cc27f26 100644
--- a/docs/docs/widgets/spinner.md
+++ b/docs/docs/widgets/spinner.md
@@ -4,14 +4,26 @@ 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.
-
+
-
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+## Exposed Variables
+
+There are currently no exposed variables for the component.
+
+
+
+
+
## General
### Tooltip
@@ -19,39 +31,27 @@ A Tooltip is often used to specify extra information about something when the us
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-### Show on desktop
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
+
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-### Visibility
+|
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}}`. |
+| Color | Change the color of the Spinner by entering the `Hex color code` or choosing a color of your choice from the color-picker. |
+| Size | Change the size of the Spinner by selecting options from the dropdown. It has small and large sizes available. |
-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}}`.
-
-### Color
-
-Change the color of the Spinner by entering the `Hex color code` or choosing a color of your choice from the color-picker.
-
-### Size
-
-Change the size of the Spinner by selecting options from the dropdown. It has small and large sizes available.
-
-## Exposed variables
-
-There are currently no exposed variables for the component.
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
diff --git a/docs/docs/widgets/star-rating.md b/docs/docs/widgets/star-rating.md
index 3b5d2cfe9e..433ed93aa2 100644
--- a/docs/docs/widgets/star-rating.md
+++ b/docs/docs/widgets/star-rating.md
@@ -1,48 +1,58 @@
---
id: star-rating
-title: Star rating
+title: Star Rating
---
-# 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.
-
+
-
+## Properties
+
+|
Property
|
Description
|
Expected Value
|
+|:------------ |:-------------|:---------- |
+| Label | The text to be used as the label for the star rating. | This field expects a `String` value. |
+| Number of stars | Initial number of stars in the list on initial load. `default: 5`. | This field expects an integer value. |
+| Default no of selected stars | This property specifies the default count of stars that are selected on the initial load. `default: 5` (integer). | This field expects an integer value. |
+| Enable half star | Toggle `on` to allow selection of half stars. `default: false` (bool). | Click on `Fx` to programmatically define the value `{{true}}` or `{{false}}`. |
+| Tooltips | This is used for displaying informative tooltips on each star, and it is mapped to the index of the star. | `default: []` (array of strings ). |
+
+
## Events
-### On Change
-
-This event is triggered when a star is clicked.
+|
Event
|
Description
|
+|:----------- |:----------- |
+| On Change | This event is triggered when a star is clicked. |
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
:::
-## Properties
+
-### Label
+
-The text to be used as the label for the star rating. This field expects a `String` value.
+## Component Specific Actions (CSA)
-### Number of stars
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
-Initial number of stars in the list on initial load. `default: 5`. This field expects an integer value.
+
-### Default no of selected stars
+
-This property specifies the default count of stars that are selected on the initial load. `default: 5` (integer). This field expects an integer value.
+## Exposed Variables
-### Enable half star
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:--------- |
+| value | This variable holds the value whenever a rating is added on the component. The variable holds a numerical value. | Access the value dynamically using JS: `{{components.colorpicker1.selectedColorHex}}`|
-Toggle `on` to allow selection of half stars. `default: false` (bool). Click on `Fx` to programmatically define the value `{{true}}` or `{{false}}`.
+
-### Tooltips
-
-This is used for displaying informative tooltips on each star, and it is mapped to the index of the star. `default: []` (array of strings ). Ex: `{{["bad", "okay", "good", "best"]}}`
+
## General
### Tooltip
@@ -51,45 +61,28 @@ A Tooltip is often used to specify extra information about something when the us
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-### Show on desktop
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
+
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-### Star Color
+|
Style
|
Description
|
Default Value
|
+|:------------ |:-------------|:--------- |
+| Star Color | Display color of the star. `default: #ffb400` (color hex). Change color by providing `Hex color code` or choosing one from the picker. | |
+| Label color | Change the color of label in widget by providing `Hex color code` or choosing one from the picker. | |
+| 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}}` |
+| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. | By default, its value is set to `{{false}}` |
-Display color of the star. `default: #ffb400` (color hex). Change color by providing `Hex color code` or choosing one from the picker.
-
-### Label color
-
-Change the color of label in widget by providing `Hex color code` or choosing one from the picker.
-
-### 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}}`.
-
-### Disable
-
-This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
-
-## Exposed Variables
-
-| Variables | Description |
-| ----------- | ----------- |
-| value | This variable holds the value whenever a rating is added on the component. The variable holds a numerical value. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorHex}}`|
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/statistics.md b/docs/docs/widgets/statistics.md
index 62cd3f8e2b..4e11272a35 100644
--- a/docs/docs/widgets/statistics.md
+++ b/docs/docs/widgets/statistics.md
@@ -5,43 +5,41 @@ title: Statistics
# Statistics
-Statistics can be used to display different statistical information.
+**Statistics** can be used to display different statistical information.
-
-
-
-
-
+
## Properties
-### Primary value label
+|
Property
|
Description
|
+|:------------ |:-------------|
+| 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. |
+| 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. |
+| 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}}`. |
-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.
+## Component Specific Actions (CSA)
-### Hide secondary value
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
-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.
+## Exposed Variables
-### Secondary value
+There are currently no exposed variables for the component.
-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}}`.
+
## General
### Tooltip
@@ -50,52 +48,33 @@ A Tooltip is often used to specify extra information about something when the us
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-### Show on desktop
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
-### Show on mobile
-
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-### Primary Label Colour
-
-You can change the primary label color by entering the Hex color code or choosing a color of your choice from the color picker.
-
-### Primary Text Colour
-
-You can change the primary text color of the primary label by entering the Hex color code or choosing a color of your choice from the color picker.
-
-### Secondary Label Colour
-
-You can change the secondary label color of the primary label by entering the Hex color code or choosing a color of your choice from the color picker.
-
-### Secondary Text Colour
-
-You can change the secondary text color of the primary label by entering the Hex color code or choosing a color of your choice from the color picker.
-
-### 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}}`.
+|
Style
|
Description
|
+|:------------ |:-------------|
+| Primary label colour | You can change the primary label color by entering the Hex color code or choosing a color of your choice from the color picker. |
+| Primary text colour | You can change the primary text color of the primary label by entering the Hex color code or choosing a color of your choice from the color picker. |
+| Secondary label colour | You can change the secondary label color of the primary label by entering the Hex color code or choosing a color of your choice from the color picker. |
+| Secondary text colour | You can change the secondary text color of the primary label by entering the Hex color code or choosing a color of your choice from the color picker. |
+| 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}}`. |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed variables
-
-There are currently no exposed variables for the component.
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/steps.md b/docs/docs/widgets/steps.md
index bdd757dce9..287b3925af 100644
--- a/docs/docs/widgets/steps.md
+++ b/docs/docs/widgets/steps.md
@@ -4,22 +4,12 @@ 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.
-
-
-
-
-
+
## Properties
-
-
-
-
-
-
### Steps
This property lets you add and the steps. Every object represents a step.
@@ -44,9 +34,37 @@ This property lets you select the current step you want to be highlighted.
This property when disabled will disable selection of steps.
+
+
+
+
## Events
-### On select
-This event is fired whenever the user selects any step.
+
+|
Event
|
Description
|
+|:------------------|:---------------------|
+| On select | This event is fired whenever the user selects any step. |
+
+
+
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+
+
+
+## Exposed Variables
+
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:--------------|
+| currentStepId | This variable holds the id of the currently selected step on the step component.| Access the value dynamically using JS: `{{components.steps1.currentStepId}}`|
+
+
+
+
## General
### Tooltip
@@ -55,49 +73,32 @@ A Tooltip is often used to specify extra information about something when the us
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
+
-
+
+
+## Layout
+
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-## Layout
-### Show on desktop
-
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
-
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-### Theme
-
-You can change the theme of widget by selecting available themes from dropdown.
-
-### Colour
-
-You can change the color of the widget by entering the Hex color code or choosing a color of your choice from the color picker.
-
-### Text Colour
-
-You can change the text color of the widget by entering the Hex color code or choosing a color of your choice from the color picker.
-
-### 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}}`.
+|
Style
|
Description
|
+|:------------ |:-------------|
+| Theme | You can change the theme of widget by selecting available themes from dropdown. |
+| Colour | You can change the color of the widget by entering the Hex color code or choosing a color of your choice from the color picker. |
+| Text colour | You can change the text color of the widget by entering the Hex color code or choosing a color of your choice from the color picker. |
+| 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}}`. |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-
-## Exposed Variables
-
-| Variables | Description |
-| ----------- | ----------- |
-| currentStepId | This variable holds the id of the currently selected step on the step component. You can access the value dynamically using JS: `{{components.steps1.currentStepId}}`|
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/svg-image.md b/docs/docs/widgets/svg-image.md
index b3a7a5ac7f..94361ff0c5 100644
--- a/docs/docs/widgets/svg-image.md
+++ b/docs/docs/widgets/svg-image.md
@@ -8,15 +8,11 @@ It is used to render vector images. We can display images, icons, texts using th
Developers prefer having SVG **(Scalable Vector Graphics)** files as they are scalable and will render pixel-perfect at any resolution whereas JPEGs, PNGs and GIFs will not.
-
-
-
-
-
+
## Properties
-### SVG Data
+### SVG data
Enter the SVG data of the image to display it on the widget.
@@ -28,6 +24,25 @@ Refer to the resources where SVG files are downloaded for free. You copy-paste t
```
+
+
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+
+
+
+## Exposed Variables
+
+There are currently no exposed variables for the component.
+
+
+
+
## General
@@ -37,31 +52,25 @@ A Tooltip is often used to specify extra information about something when the us
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-### Show on desktop
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
+
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-### Visibility
+|
Style
|
Description
|
Default Value
|
+|:------------ |:-------------|:--------- |
+| 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}}`. |
-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}}`.
-
-## Exposed variables
-
-There are currently no exposed variables for the component.
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/docs/widgets/table.md b/docs/docs/widgets/table.md
index 0cd3d47a00..0f97ab0bcb 100644
--- a/docs/docs/widgets/table.md
+++ b/docs/docs/widgets/table.md
@@ -8,13 +8,7 @@ Tables can be used for both displaying and editing data. You can use the table c
## Table UI
-
-
-
-
-
-
-### Filter data
+### Filter Data
The table data can be filtered using the Filter data option on its top-left. You have the option to choose from various filters, such as:
@@ -45,7 +39,7 @@ You can use the `Tab` key to navigate through cells on the table.
The table component supports both **[client-side pagination](/docs/widgets/table#client-side-pagination)** and **[server-side pagination](/docs/widgets/table#server-side-pagination)**. The `<<` and `>>` button skips to the first and last page respectively. The `<` and `>` button takes the user to the previous and next page respectively. You can also **[hide the pagination buttons](/docs/widgets/table#show-pagination-buttons)** in the table properties.
-### Add new rows
+### Add New Rows
Upon clicking this button, a popup modal will show, providing users with the ability to insert new rows. Initially, the modal will contain a single row, with columns mirroring those found in the table. If users input data into this row, it will be stored within the **[`newRows` variable](/docs/widgets/table#exposed-variables)** associated with the table. Clicking on the **Discard** button will clear the data within this variable. However, if the users close the popup without any action (neither saving nor discarding), the data will persist, accompanied by a green indicator on the **Add new row** button. The table incorporates an **[Add new rows event handler](/docs//widgets/table#add-new-rows)**, which can be employed to execute queries that store the data into the data source upon clicking the **Save** button.
@@ -68,7 +62,7 @@ You have the option to **[hide the download button](/docs/widgets/table#show-dow
You can utilize **[Component Specific Actions](#component-specific-actions-csa)** to retrieve the table data in the mentioned formats from the event handlers across the application.
:::
-### Hide columns
+### Hide Columns
You can choose which columns to show or hide in the table using this option. You also have the option to **[hide the column selector button](/docs/widgets/table#show-column-selector-button)** in the table properties.
@@ -76,14 +70,7 @@ You can choose which columns to show or hide in the table using this option. You
You can sort the table data in ascending or descending order by clicking on the column header. You can also **[disable the sorting](/docs/widgets/table#disable-sorting)** from the table properties.
-## Table data
-
-
-
-
-
-
-
+## Table Data
To populate the table with the data, it is required to provide the data in the form of an array of objects. You can utilize data from queries, using `{{queries.restapi1.data}}`, to populate table.
@@ -139,13 +126,7 @@ The table component will **automatically generate all the required columns** whe
Whenever data is loaded into a table, the columns are automatically generated. You can add, remove, or modify columns by accessing the table properties under the column section. You can also rearrange the columns by dragging and dropping them.
-
-
-
-
-
-
-### Use dynamic column
+### Use Dynamic Column
Enabling the **Use dynamic column** toggle will allow users to set the **Column data** using which the user can link the column data dynamically from a query.
@@ -165,12 +146,6 @@ The **column data** field expects a JSON value:
}
```
-
-
-
-
-
-
### Types of Columns
The table component supports the following column types:
@@ -192,8 +167,8 @@ The table component supports the following column types:
This column type is automatically selected by default when a column is added or when data is populated in the table.
-| Column property | Description |
-| ----------- | ----------- |
+|
Column Property
|
Description
|
+|:----------- |:----------- |
| Column name | Specify the name to be displayed on the table column header |
| Overflow | Manage the handling of content that exceeds the cell dimensions. `Wrap` wraps the content onto the next line within the cell, `Scroll` enables scrolling for content that exceeds the cell, and `Hide` conceals content that goes beyond the cell boundary. |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
@@ -207,8 +182,8 @@ This column type is automatically selected by default when a column is added or
Selecting the column type as **Number** will only load numerical data in the column cells.
-| Column property | Description |
-| ----------- | ----------- |
+|
Column Property
|
Description
|
+|:----------- |:----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
| Transformation | Allows you to transform the data of a cell value. The default value will be `{{cellValue}}`. You can use JavaScript code to dynamically generate a value. For instance, to round off a value, you can use `{{cellValue > 4.5 ? 5 : 4}}`. |
@@ -216,18 +191,12 @@ Selecting the column type as **Number** will only load numerical data in the col
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
| Column Visibility | This option is enabled by default. Disabling it hides the column from the table. Its value can also be dynamically set to `{{true}}` or `{{false}}` to show or hide the column. |
-
-
-
-
-
-
#### Badge
The **Badge** column type is utilized to exhibit labels on the columns using the column data.
-| Column property | Description |
-| ----------- | ----------- |
+|
Column Property
|
Description
|
+|:----------- |:----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
| Transformation | Allows you to transform the data of a cell value. The default value will be `{{cellValue}}`. You can use JavaScript code to dynamically generate a value. For instance, to round off a value, you can use `{{cellValue > 4.5 ? 5 : 4}}`. || Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
@@ -236,18 +205,12 @@ The **Badge** column type is utilized to exhibit labels on the columns using the
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
| Column Visibility | This option is enabled by default. Disabling it hides the column from the table. Its value can also be dynamically set to `{{true}}` or `{{false}}` to show or hide the column. |
-
-
-
-
-
-
#### Multiple Badges
Similar to the **Badge** column type, the **Multiple Badges** type is used to display multiple badges within a column cell.
-| Column property | Description |
-| ----------- | ----------- |
+|
Column Property
|
Description
|
+|:----------- |:----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
| Transformation | Allows you to transform the data of a cell value. The default value will be `{{cellValue}}`. You can use JavaScript code to dynamically generate a value. For instance, to round off a value, you can use `{{cellValue > 4.5 ? 5 : 4}}`. || Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
@@ -256,36 +219,24 @@ Similar to the **Badge** column type, the **Multiple Badges** type is used to di
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
| Column Visibility | This option is enabled by default. Disabling it hides the column from the table. Its value can also be dynamically set to `{{true}}` or `{{false}}` to show or hide the column. |
-
-
-
-
-
-
#### Tags
The **Tags** column type is utilized to display tags within the column cells using the column data. The provided **key** should have values in an array format.
-| Column property | Description |
-| ----------- | ----------- |
+|
Column Property
|
Description
|
+|:----------- |:----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
| Transformation | Allows you to transform the data of a cell value. The default value will be `{{cellValue}}`. You can use JavaScript code to dynamically generate a value. For instance, to round off a value, you can use `{{cellValue > 4.5 ? 5 : 4}}`. || Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
| Column Visibility | This option is enabled by default. Disabling it hides the column from the table. Its value can also be dynamically set to `{{true}}` or `{{false}}` to show or hide the column. |
-
-
-
-
-
-
#### Dropdown
The **Dropdown** column type is used to display a dropdown in the column cells using the column data.
-| Column property | Description |
-| ----------- | ----------- |
+|
Column Property
|
Description
|
+|:----------- |:----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
| Transformation | Allows you to transform the data of a cell value. The default value will be `{{cellValue}}`. You can use JavaScript code to dynamically generate a value. For instance, to round off a value, you can use `{{cellValue > 4.5 ? 5 : 4}}`. || Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
@@ -294,18 +245,12 @@ The **Dropdown** column type is used to display a dropdown in the column cells u
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
| Column Visibility | This option is enabled by default. Disabling it hides the column from the table. Its value can also be dynamically set to `{{true}}` or `{{false}}` to show or hide the column. |
-
-
-
-
-
-
#### Radio
The **Radio** column type is used to show radio buttons in the column cells using the column data.
-| Column property | Description |
-| ----------- | ----------- |
+|
Column Property
|
Description
|
+|:----------- |:----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
| Transformation | Allows you to transform the data of a cell value. The default value will be `{{cellValue}}`. You can use JavaScript code to dynamically generate a value. For instance, to round off a value, you can use `{{cellValue > 4.5 ? 5 : 4}}`. || Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
@@ -314,18 +259,12 @@ The **Radio** column type is used to show radio buttons in the column cells usin
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
| Column Visibility | This option is enabled by default. Disabling it hides the column from the table. Its value can also be dynamically set to `{{true}}` or `{{false}}` to show or hide the column. |
-
-
-
-
-
-
#### Multiselect
The **Multiselect** column type is used to show a multiselect dropdown in the column cells using the column data.
-| Column property | Description |
-| ----------- | ----------- |
+|
Column Property
|
Description
|
+|:----------- |:----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
| Transformation | Allows you to transform the data of a cell value. The default value will be `{{cellValue}}`. You can use JavaScript code to dynamically generate a value. For instance, to round off a value, you can use `{{cellValue > 4.5 ? 5 : 4}}`. || Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
@@ -334,18 +273,12 @@ The **Multiselect** column type is used to show a multiselect dropdown in the co
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
| Column Visibility | This option is enabled by default. Disabling it hides the column from the table. Its value can also be dynamically set to `{{true}}` or `{{false}}` to show or hide the column. |
-
-
-
-
-
-
#### Toggle Switch
The **Toggle Switch** column type is used to display a toggle switch in the column cells using the column data. The provided **key** should be a boolean value, either true or false.
-| Column property | Description |
-| ----------- | ----------- |
+|
Column Property
|
Description
|
+|:----------- |:----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
| Transformation | Allows you to transform the data of a cell value. The default value will be `{{cellValue}}`. You can use JavaScript code to dynamically generate a value. For instance, to round off a value, you can use `{{cellValue > 4.5 ? 5 : 4}}`. || Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
@@ -354,18 +287,12 @@ The **Toggle Switch** column type is used to display a toggle switch in the colu
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
| Column Visibility | This option is enabled by default. Disabling it hides the column from the table. Its value can also be dynamically set to `{{true}}` or `{{false}}` to show or hide the column. |
-
-
-
-
-
-
#### Date Picker
The **Date Picker** column type is used to display a date picker in the column cells using the column data.
-| Column property | Description |
-| ----------- | ----------- |
+|
Column Property
|
Description
|
+|:----------- |:----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. The provided **key** should hold a date value. |
| Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
@@ -377,18 +304,12 @@ The **Date Picker** column type is used to display a date picker in the column c
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
| Column Visibility | This option is enabled by default. Disabling it hides the column from the table. Its value can also be dynamically set to `{{true}}` or `{{false}}` to show or hide the column. |
-
-
-
-
-
-
#### Image
The **Image** column type is used to display images in the column cells using the column data.
-| Column property | Description |
-| ----------- | ----------- |
+|
Column Property
|
Description
|
+|:----------- |:----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. The provided **key** should hold a URL for the image to be loaded in the column cells. |
| Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
@@ -398,18 +319,12 @@ The **Image** column type is used to display images in the column cells using th
| Object fit | This option allows you to choose how the image should be fitted within its container. The available options are: **Cover**, **Contain**, and **Fill**. **Cover** maintains the aspect ratio of the image but may crop or clip parts of it to cover the container's width, **Contain** maintains the aspect ratio and resizes the image to fit within the given dimensions while displaying the entire image, and **Fill** stretches the image to cover 100% of the width. |
| Column Visibility | This option is enabled by default. Disabling it hides the column from the table. Its value can also be dynamically set to `{{true}}` or `{{false}}` to show or hide the column. |
-
-
-
-
-
-
#### Link
The **Link** column type enables cells to become clickable links that can be loaded on either the same page or a new page.
-| Column property | Description |
-| ----------- | ----------- |
+|
Column Property
|
Description
|
+|:----------- |:----------- |
| Column name | Specifies the name displayed on the table column header. |
| Key | Specify the key that holds the URL. By default. The provided key should hold either a `string` or a `URL`. |
| Link Target | Specifies whether the link should be loaded on the same window or a new window. The values can also be set dynamically to `_set` for same window and `_blank` for new window. |
@@ -419,32 +334,14 @@ The **Link** column type enables cells to become clickable links that can be loa
For more information on using cellValue and rowData, refer to the **[how-to guide](/docs/how-to/access-cellvalue-rowdata)**.
:::
-
-
-
-
-
-
### Add Column
You can add a new column to the table by clicking on the **+ Add Column** button. On clicking this button a new column will be added to the table and you can edit it's properties from the column section. Check [Displaying Data](#displaying-data) section to learn more.
-
-
-
-
-
-
### Delete Column
Hover on the column under the columns section and click on the three dots icon, a dropdown will appear with the option to delete the column. Click on the **delete** option to remove the column from the table.
-
-
-
-
-
-
### Displaying Data
The data object should be an array of objects. Table columns can be added, removed, rearranged from the inspector. `key` property is the accessor key used to get data from a single element of a table data object. For example:
@@ -468,7 +365,7 @@ If the table data is:
To display email column, the key for the column should be `user.email`.
-### Saving data
+### Saving Data
Enable `editable` property of a column to make the cells editable. If a data type is not selected, `string` is selected as the data type.
:::tip
@@ -502,43 +399,6 @@ Along with `changeSet`, `dataUpdates` property will also be changed when the val
If the data of a cell is changed, "save changes" button will be shown at the bottom of the table. This button when clicked will trigger the `Bulk update query` event. This event can be used to run a query to update the data on your data source.
-## Validation
-
-Under column properties, expand the detailed view of a column type to access a toggle button called `make editable`. You can toggle it `ON` to apply the validations. Validations will be different for different column types. For instance, the a column with `string` type will have the following validations.
-
-### Regex
-Use this field to enter a Regular Expression that will validate the content.
-
-### Min length
-
-Enter the number for a minimum length of characters allowed.
-
-### Max length
-
-Enter the number for the maximum length of characters allowed.
-
-### Custom rule
-
-If the condition is true, the validation passes, otherwise return a string that should be displayed as the error message. For example: `{{components.table1.selectedRow.id==1&&"This row can't be deleted"}}`
-
-## 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.
-
-| Property | Description |
-| -------- | ------------ |
-| Button text | Set the text that you want to be displayed on the action button. |
-| Button position | Set the button position to the left or right |
-| Background color (Action Button) | Background color of the action button. |
-| Text color (Action Button) | Color of button-text of the action button. |
-| Disable Action Button | Toggle on to disable the action button. You can programmatically set its value by clicking on the `Fx` button next to it, if set to `{{true}}`, the action button will be disabled and becomes non-functional. By default, its value is set to `{{false}}`. |
-
## Events
- **[Row hovered](#row-hovered)**
@@ -552,72 +412,17 @@ Action buttons will be displayed as the last column of the table. The styles of
- **[Filter changed](#filter-changed)**
- **[Add new rows](#add-new-rows)**
-
-
-
-
-
-
-### Row hovered
-
-This event is triggered when the mouse pointer is moved over a row in the table. The `hoveredRowId` exposed variable of the table will include the id of the latest hovered row and `hoveredRow` property of the table will have the data of the hovered row in the object format.
-
-### Row clicked
-
-This event is triggered when a table row is clicked. The `selectedRowId` exposed variable of the table will include the id of the selected row and the `selectedRow` property of the table object will have the table data of the selected row.
-
-### Save changes
-
-If any cell of the table is edited, the `save changes` button appears at the footer of the table. Save changes event is triggered when this button is clicked.
-
-### Cancel changes
-
-If any cell of the table is edited, the `Discard changes` button appears at the footer of the table. Cancel changes event is triggered when this button is clicked.
-
-### Page changed
-
-If server-side pagination is enabled, this event is fired when the current page is changed. This event is triggered after updating the `pageIndex` variable.
-
-### Search
-
-This event is triggered when a text is entered to the search input box of the table. `searchText` variable is updated before triggering this event.
-
-### Sort applied
-
-This event is triggered when the column name header is clicked to apply sorting in `asc` or `desc`. The `sortApplied` variable is updated with an object having `column` and `direction` values.
-
-### Cell value changed
-
-If any cell of the table is edited, the `cell value changed` event is triggered.
-
-### Filter changed
-
-This event is triggered when filter is added, removed, or updated from the filter section of the table. `filters` property of the table is updated to reflect the status of filters applied. The objects will have properties: `condition`, `value`, and `column`.
-
-### Add new rows
-
-This event is triggered when the **Save** button is clicked from the **Add new row** modal on the table.
-
-## Row Selection
-
-
-
-
-
-
-
-
-### Allow selection
+### Allow Selection
This option is active by default. **Enabling** this functionality allows users to choose a row in the table by utilizing `checkboxes` placed next to each row. If this option is **disabled**, the ability to highlight selected rows and perform bulk selection will not be accessible.
If the option for allowing selection is enabled, a new option called **[Default selected row](#default-selected-row)** will become visible. However, if the option for allowing selection is disabled, the **[Default selected row](#default-selected-row)** option will not be displayed.
-### Highlight selected row
+### Highlight Selected Row
Activate this option to visually emphasize the last clicked row. **Enabling** this feature will alter the row selection appearance of the table from a `checkbox`-based theme to a `highlighting`-based theme.
-### Bulk selection
+### Bulk Selection
To enable the selection of one or more rows from the current page of a table, you can activate the 'Bulk selection' setting in the inspector. The values of the selected rows will be exposed as '**selectedRows**'.
@@ -634,131 +439,10 @@ Example:
Please ensure that the value provided in the object corresponds to a valid id in the table to ensure proper functionality.
-## Search Sort and Filter
+### Select Row on Cell Edit
+Enabling the `Make editable` property for a column allows the app users to edit the column. While editing, the related row will be selected by default. To stop the row from getting selected by default, turn off `Select row on cell edit`.
-
-
-
-
-
-
-### Show search
-
-It can be used to show or hide Table Search box. Client-side search is enabled by default and server-side search can be enabled from the events section of the inspector. Whenever the search text is changed, the `searchText` property of the table component is updated. If server-side search is enabled, `on search` event is fired after the content of `searchText` property is changed. `searchText` can be used to run a specific query to search for the records in your data source.
-
-If you don't wish to use the search feature altogether, you can disable it from the inspector.
-
-#### Server-side search
-
-If server-side search is enabled, `on search` event is fired after the content of `searchText` property is changed. `searchText` can be used to run a specific query to search for the records in your data source.
-
-### Enable column sorting
-
-Disable this option to lock the sorting of columns when clicked on column header.
-
-#### Server-side sort
-When Server-side sort is enabled, clicking on the column headers will not automatically sort the table, instead, the `Sort applied` event will be fired and the applied sorting will be exposed as `sortApplied`. You can use this data to run any query that feeds data to the table in a manner that reflects the sorting applied.
-
-### 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.
-
-#### 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.
-
-
-## Pagination
-
-
-
-
-
-
-
-### Client-side pagination
-
-Client-side pagination is enabled by default. When the client-side pagination is enabled(`{{true}}`), another property **Number of rows per page** will be shown that can be used to set the number of records per page. By default, the value is set to 10 and if it is disabled(`{{false}}`) then it will show all the records in the single page.
-
-### Server-side pagination
-
-Server-side pagination can be used to run a query whenever the page is changed. Go to events section of the inspector and change the action for `on page changed` event. Number of records per page needs to be handled in your query. If server-side pagination is enabled, `pageIndex` property will be exposed on the table object, this property will have the current page index. `pageIndex` can be used to query the next set of results when page is changed.
-
-When Server-side pagination is enabled, you'll be able to set three other table properties:
-- **Enable previous page button**: When server-side pagination is enabled, this button is enabled by default. Toggle this off to disable the previous page button from the table.
-- **Enable next page button**: When server-side pagination is enabled, this button is enabled by default. Toggle this off to disable the next page button from the table.
-- **Total records server side**: Set a numerical value to display particular number of records.
-
-:::tip
-Check this how-to guide to learn more about [server-side pagination](/docs/how-to/use-server-side-pagination).
-:::
-
-## Addional 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.
-
-### 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.
-
-### 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.
-
-### Loading state (Boolean)
-
-Loading state shows a loading skeleton for the table. This property can be used to show a loading status on the table while data is being loaded. `isLoading` property of a query can be used to get the status of a query.
-
-### Show update buttons
-
-It's enabled by default. Table footer will show two update buttons **Save changes** & **Discard changes** whenever a cell is edited. Toggle `off` to hide update buttons.
-
-## Devices
-
-| Option | Description | Expected value |
-|:----------- |:----------- |:----------- |
-| **Show on desktop** | Toggle on or off to show or hide the component on desktop devices | `{{true}}` or `{{false}}` |
-| **Show on mobile** | Toggle on or off to show or hide the component on mobile devices | `{{true}}` or `{{false}}` |
-
-## Styles
-
-| Style | Description |
-| :---------- | :---------- |
-| **Text color** | Change the color of the text in table by providing `hex color code` or choosing one from the picker |
-| **Action button radius** | This field can be used to give a radius to all action buttons. The default value is `0` |
-| **Table type** | Select a type of table from the dropdown: Bordered, Regular, or Striped. |
-| **Cell size** | This decides the size of table cells. You can choose between a `Condensed` size for table cells or a `Regular` size |
-| **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 component will not visible after the app is deployed. By default, it's set to `{{true}}`. |
-| **Disable** | Toggle on to lock the widget. You can programmatically change its value by clicking on the `Fx` button next to it, if set to `{{true}}`, the component 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 button. |
-
-:::info
-Any property having `Fx` button next to its field can be **programmatically configured**.
-:::
-
-## Exposed variables
-
-| Variable | Description |
-| :---------- | :---------- |
-| **currentData** | Data that is currently being displayed by the table (including edits if any ) |
-| **currentPageData** | Data that is displayed on the current page if pagination is enabled (including edits if any) |
-| **pageIndex** | Index of the current page, starting from 1
-| **changeSet** | Object with row number as the key and object of edited fields and their values as the value |
-| **dataUpdates** | Just like changeSet but includes the data of the entire row |
-| **selectedRow** | Contains the data of the row that was most recently clicked. When an action button is clicked, `selectedRow` is also updated. Its initial value is set to the data of the first row when the app is loaded. |
-| **selectedRowId** | Stores the ID of the row that was last clicked. Similar to `selectedRow`, it gets updated when an action button is clicked. You can access its value using `{{components.table1.selectedRowId}}`. By default, it is set to `0`, representing the ID of the first row when the app is loaded. |
-| **selectedCell** | The data of the cell that was last clicked on the table. |
-| **searchText** | The value of the search field if server-side pagination is enabled |
-| **newRows**| The newRows variable stores an array of objects, each containing data for a row that was added to the table using the "Add new row" button. When the user clicks either the "Save" or "Discard" button in the modal, this data is cleared.|
-
-## Component specific actions (CSA)
+## Component Specific Actions (CSA)
Following actions of color picker component can be controlled using the component specific actions(CSA):
@@ -774,3 +458,133 @@ Following actions of color picker component can be controlled using the componen
| downloadTableData() | Retrieves the data from the table in the PDF, CSV, or Excel sheet. | Employ a RunJS query (for e.g., `await components.table1.downloadTableData('pdf')`) or trigger it using an event. |
| setFilters() | Applies filters to the table data. | Employ a RunJS query (for e.g., `await components.table1.setFilters ([{column:'name',condition:'contains',value: 'Sarah'}])`) or trigger it using an event. |
| clearFilters() | Removes all applied filters from the table. | Employ a RunJS query (for e.g., `await components.table1.clearFilters()`) or trigger it using an event. |
+
+## Exposed Variables
+
+|
Variable
|
Description
|
+| :---------- | :---------- |
+| currentData | Data that is currently being displayed by the table (including edits if any ) |
+| currentPageData | Data that is displayed on the current page if pagination is enabled (including edits if any) |
+| pageIndex | Index of the current page, starting from 1
+| changeSet | Object with row number as the key and object of edited fields and their values as the value |
+| dataUpdates | Just like changeSet but includes the data of the entire row |
+| selectedRow | Contains the data of the row that was most recently clicked. When an action button is clicked, `selectedRow` is also updated. Its initial value is set to the data of the first row when the app is loaded. |
+| selectedRowId | Stores the ID of the row that was last clicked. Similar to `selectedRow`, it gets updated when an action button is clicked. You can access its value using `{{components.table1.selectedRowId}}`. By default, it is set to `0`, representing the ID of the first row when the app is loaded. |
+| selectedCell | The data of the cell that was last clicked on the table. |
+| searchText | The value of the search field if server-side pagination is enabled |
+| newRows| The newRows variable stores an array of objects, each containing data for a row that was added to the table using the "Add new row" button. When the user clicks either the "Save" or "Discard" button in the modal, this data is cleared.|
+
+## Validation
+
+Under column properties, expand the detailed view of a column type to access a toggle button called `make editable`. You can toggle it `ON` to apply the validations. Validations will be different for different column types. For instance, the a column with `string` type will have the following validations.
+
+|
Method
|
Description
|
+|:----------- |:----------- |
+| Regex | Use this field to enter a Regular Expression that will validate the content. |
+| Min length | Enter the number for a minimum length of characters allowed. |
+| Max length | Enter the number for the maximum length of characters allowed. |
+| Custom rule | If the condition is true, the validation passes, otherwise return a string that should be displayed as the error message. For example: `{{components.table1.selectedRow.id==1&&"This row can't be deleted"}}` |
+
+## Action Buttons
+
+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.
+
+|
Property
|
Description
|
+|:-------- |:------------ |
+| Button text | Set the text that you want to be displayed on the action button. |
+| Button position | Set the button position to the left or right |
+| Background color (Action Button) | Background color of the action button. |
+| Text color (Action Button) | Color of button-text of the action button. |
+| Disable Action Button | Toggle on to disable the action button. You can programmatically set its value by clicking on the `Fx` button next to it, if set to `{{true}}`, the action button will be disabled and becomes non-functional. By default, its value is set to `{{false}}`. |
+
+## Search Sort and Filter
+
+### Show Search
+
+It can be used to show or hide Table Search box. Client-side search is enabled by default and server-side search can be enabled from the events section of the inspector. Whenever the search text is changed, the `searchText` property of the table component is updated. If server-side search is enabled, `on search` event is fired after the content of `searchText` property is changed. `searchText` can be used to run a specific query to search for the records in your data source.
+
+If you don't wish to use the search feature altogether, you can disable it from the inspector.
+
+#### Server-side Search
+
+If server-side search is enabled, `on search` event is fired after the content of `searchText` property is changed. `searchText` can be used to run a specific query to search for the records in your data source.
+
+### Enable Column Sorting
+
+Disable this option to lock the sorting of columns when clicked on column header.
+
+#### Server-side Sort
+When Server-side sort is enabled, clicking on the column headers will not automatically sort the table, instead, the `Sort applied` event will be fired and the applied sorting will be exposed as `sortApplied`. You can use this data to run any query that feeds data to the table in a manner that reflects the sorting applied.
+
+### 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.
+
+#### 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.
+
+
+## Pagination
+
+### Client-side Pagination
+
+Client-side pagination is enabled by default. When the client-side pagination is enabled(`{{true}}`), another property **Number of rows per page** will be shown that can be used to set the number of records per page. By default, the value is set to 10 and if it is disabled(`{{false}}`) then it will show all the records in the single page.
+
+### Server-side Pagination
+
+Server-side pagination can be used to run a query whenever the page is changed. Go to events section of the inspector and change the action for `on page changed` event. Number of records per page needs to be handled in your query. If server-side pagination is enabled, `pageIndex` property will be exposed on the table object, this property will have the current page index. `pageIndex` can be used to query the next set of results when page is changed.
+
+When Server-side pagination is enabled, you'll be able to set three other table properties:
+- **Enable previous page button**: When server-side pagination is enabled, this button is enabled by default. Toggle this off to disable the previous page button from the table.
+- **Enable next page button**: When server-side pagination is enabled, this button is enabled by default. Toggle this off to disable the next page button from the table.
+- **Total records server side**: Set a numerical value to display particular number of records.
+
+:::tip
+Check this how-to guide to learn more about [server-side pagination](/docs/how-to/use-server-side-pagination).
+:::
+
+## 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.
+
+### 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.
+
+### 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.
+
+### Loading State (Boolean)
+
+Loading state shows a loading skeleton for the table. This property can be used to show a loading status on the table while data is being loaded. `isLoading` property of a query can be used to get the status of a query.
+
+### Show Update Buttons
+
+It's enabled by default. Table footer will show two update buttons **Save changes** & **Discard changes** whenever a cell is edited. Toggle `off` to hide update buttons.
+
+## Devices
+
+|
Option
|
Description
|
Expected Value
|
+|:----------- |:----------- |:----------- |
+| Show on desktop | Toggle on or off to show or hide the component on desktop devices | `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to show or hide the component on mobile devices | `{{true}}` or `{{false}}` |
+
+## Styles
+
+|
Style
|
Description
|
+| :---------- | :---------- |
+| Text color | Change the color of the text in table by providing `hex color code` or choosing one from the picker |
+| Action button radius | This field can be used to give a radius to all action buttons. The default value is `0` |
+| Table type | Select a type of table from the dropdown: Bordered, Regular, or Striped. |
+| Cell size | This decides the size of table cells. You can choose between a `Condensed` size for table cells or a `Regular` size |
+| 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 component will not visible after the app is deployed. By default, it's set to `{{true}}`. |
+| Disable | Toggle on to lock the widget. You can programmatically change its value by clicking on the `Fx` button next to it, if set to `{{true}}`, the component 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 button. |
+
+:::info
+Any property having `Fx` button next to its field can be **programmatically configured**.
+:::
+
diff --git a/docs/docs/widgets/tabs.md b/docs/docs/widgets/tabs.md
index 463224fefc..cc001c3f55 100644
--- a/docs/docs/widgets/tabs.md
+++ b/docs/docs/widgets/tabs.md
@@ -5,13 +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,15 +15,13 @@ If the builder attempts to add any of the aforementioned components inside the T
` cannot be used as a child component within the Tabs.`
:::
-## How To Use Tabs Widget
-
-
+
## Properties
### 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
{{[
@@ -51,12 +43,6 @@ You can specify the different color for each tab using the `backgroundColor` pro
]}}
```
-
-
-
-
-
-
### Default tab
This property selects the container in the tab which matches the corresponding `id`. By default, the value is set to `0`.
@@ -69,70 +55,78 @@ It allows you to hide all the tab titles defined in the Tabs property above. It
This property is enabled by default. When enabled, only the active tab will be rendered and when disabled, all the tabs in the component will be rendered.
-## Events
-
-
-
-
-
-### On tab switch
+
-This event is triggered when the tab is switched.
+## Events
+
+|
Layout
|
Description
|
+|:----------- |:----------- |
+| On tab switch | This event is triggered when the tab is switched. |
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
:::
+
+
+
+
+## Component Specific Actions (CSA)
+
+Following actions of Tabs component can be controlled using the component specific actions(CSA):
+
+|
Actions
|
Description
|
How To Access
|
+|:----------- |:----------- |:--------- |
+| 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)` |
+
+
+
+
+
+## Exposed Variables
+
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:--------- |
+| currentTab | This variable holds the id of the current tab selected on the Tabs component. | Access the value dynamically using JS: `{{components.tabs1.currentTab}}`|
+
+
|
+|:----------- |:----------- |:------------------ |
| setTab | Set current tab. | `id` |
+
+
+
+
## Layout
-### Show on desktop
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
-### Show on mobile
-
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-### Highlight Color
-
-You can change the highlight color of the selected tab by entering the Hex color code or choosing a color of your choice from the color picker.
-
-### Tab width
-
-Tab width can be set as **auto** or **equally split**.
-
-### 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}}`.
-
-### Disable
-
-This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+|
Style
|
Description
|
+|:----------- |:----------- |
+| Highlight color | You can change the highlight color of the selected tab by entering the Hex color code or choosing a color of your choice from the color picker. |
+| Tab width | Tab width can be set as **auto** or **equally split**. |
+| 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}}`. |
+| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed Variables
-
-| Variables | Description |
-| ----------- | ----------- |
-| currentTab | This variable holds the id of the current tab selected on the tabs component. You can access the value dynamically using JS: `{{components.tabs1.currentTab}}`|
-
-## Component specific actions (CSA)
-
-Following actions of Tabs component can be controlled using the component specific actions(CSA):
-
-| Actions | Description |
-| ----------- | ----------- |
-| setTab | Set the current tab of the tabs component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.tabs1.setTab(1)` |
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/docs/widgets/tags.md b/docs/docs/widgets/tags.md
index 8d86319d07..47d59b8930 100644
--- a/docs/docs/widgets/tags.md
+++ b/docs/docs/widgets/tags.md
@@ -4,13 +4,9 @@ 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.
-
-
-
-
-
+
## Properties
@@ -31,6 +27,26 @@ It can be used to set array of tags. It must be an array of objects like this:
Each object should contain a title, color code of a particular tag, and also a text color.
+
+
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+
+
+
+## Exposed Variables
+
+There are currently no exposed variables for the component.
+
+
+
+
+
## General
### Tooltip
@@ -38,32 +54,25 @@ A Tooltip is often used to specify extra information about something when the us
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-### Show on desktop
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
+
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-### Visibility
+|
Visibility
|
Description
|
Default Value
|
+|:----------- |:----------- |:---------- |
+| 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}}`. |
-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}}`.
-
-
-## Exposed variables
-
-There are currently no exposed variables for the component.
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/text-input.md b/docs/docs/widgets/text-input.md
index 38221e3a54..d79bca3257 100644
--- a/docs/docs/widgets/text-input.md
+++ b/docs/docs/widgets/text-input.md
@@ -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
|
Property
|
Description
|
Expected Value
|
@@ -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
-|
Variable
|
Description
|
How To Access
|
-|: ---------- | :---------- | :------------ |
-| 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 |
+|:--------:|:-----------:|:------------:|
+|
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}}`).|
## Validation
@@ -66,6 +66,12 @@ Check the **component specific actions** available for this component **[here](/
| Max length | Sets the maximum number of characters allowed. | Integer (e.g., `12` for a maximum of 12 characters).|
| Custom validation | Specifies a validation error message for specific conditions. | Logical Expression (e.g., `{{components.textinput1.value<5&&"Value needs to be more than 5"}}`). |
+To add regex inside `Custom Validation`, you can use the below format:
+
+**Format**: `{{(.test()) ? '' : 'Error message';}}`
+
+**Example**: `{{(/^\d{1,10}$/.test(components.textinput1.value)) ? '' : 'Error message';}}`
+
## Additional Actions
|
Action
|
Description
|
Configuration Options
|
diff --git a/docs/docs/widgets/text.md b/docs/docs/widgets/text.md
index bd4dd6d5ed..fa98ea42f9 100644
--- a/docs/docs/widgets/text.md
+++ b/docs/docs/widgets/text.md
@@ -31,11 +31,11 @@ Following actions of the **Text** component can be controlled using Component-Sp
|
Action
|
Description
|
How To Access
|
| :------------ | :---------- | :------------ |
-| setText() | Sets the value of the input field. | Employ a RunJS query (for e.g., `await components.text1.setText('this is input text')`) or trigger it using an event. |
-| clear() | Clears the entered text in the input field. | Employ a RunJS query (for e.g., `await components.text1.clear()`) or trigger it using an event. |
-| setVisibility()| Sets the visibility of the component. | Employ a RunJS query (for e.g., `await components.text1.setVisibility(false)`) or trigger it using an event. |
-| setLoading() | Sets the loading state of the component. | Employ a RunJS query (for e.g., `await components.text1.setLoading(true)`) or trigger it using an event. |
-| setDisable() | Disables the component. | Employ a RunJS query (for e.g., `await components.text1.setDisable(true)`) or trigger it using an event. |
+| setText() | Sets the value of the input field. | Employ a RunJS query (for e.g., `await components.text1.setText('this is input text')`) or trigger it using an event.|
+| clear() | Clears the entered text in the input field. | Employ a RunJS query (for e.g., `await components.text1.clear()`) or trigger it using an event |
+| setVisibility()| Sets the visibility of the component. | Employ a RunJS query (for e.g., `await components.text1.setVisibility(false)`) or trigger it using an event |
+| setLoading() | Sets the loading state of the component. | Employ a RunJS query (for e.g., `await components.text1.setLoading(true)`) or trigger it using an event |
+| setDisable() | Disables the component. | Employ a RunJS query (for e.g., `await components.text1.setDisable(true)`) or trigger it using an event |
:::info
Check the **component specific actions** available for this component **[here](/docs/actions/control-component)**.
@@ -43,21 +43,21 @@ Check the **component specific actions** available for this component **[here](/
## Exposed Variables
-|
Variable
|
Description
|
How To Access
|
-|: ---------- | :---------- | :------------ |
-| 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 |
+|:--------:|:-----------:|:------------:|
+|
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}}`) |
## Additional Actions
|
Action
|
Description
|
Configuration Options
|
|:------------------|:------------|:------------------------------|
-| Loading state | Enables a loading spinner, often used with `isLoading` to indicate progress. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
-| Visibility | Controls component visibility. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
-| Disable | Enables or disables the component. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
-| Tooltip | Provides additional information on hover. Set a string value for display. | String (e.g., `Enter your name here.` ). |
+| Loading state | Enables a loading spinner, often used with `isLoading` to indicate progress. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression |
+| Visibility | Controls component visibility. Toggle or set dynamically | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
+| Disable | Enables or disables the component. Toggle or set dynamically | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
+| Tooltip | Provides additional information on hover. Set a string value for display. | String (e.g., `Enter your name here.` ) |
## Devices
@@ -76,19 +76,19 @@ Makes the component visible in mobile view. You can set it with the toggle butto
| Text Property | Description | Configuration Options |
|:--------------------|:--------------------------------------|:---------------|
-| Size | Dimensions of the characters in a font. | Enter any number between `1-100` or dynamically configure it using `fx`. |
-| Weight | Determines how bold or light your text will appear. | Select from `light`, `regular`, `semi-bold` or `bold` or dynamically configure it using `fx`. |
-| Style | Allows you to apply styles like italic or normal, altering the overall look of the text content. | Select from `normal`, `italic` or `oblique` or dynamically configure it using `fx`. |
-| Color | Sets the color of the text. | Choose a color using the color picker or dynamically configure it using `fx`. |
-| Scroll | Creates a scroll bar if the text exceeds the component's dimensions. | Choose between `enable` or `disable` or dynamically configure it using `fx`. |
-| Line Height | Determines the vertical space between lines of text within an element. | Enter a number as the value (example: `1.5`) or dynamically configure it using `fx`.|
-| Text Indent | Commonly used to create an indentation effect. | Enter a number as the value (example: `10`) or dynamically configure it using `fx`.|
-| Alignment | Sets the alignment of the text. | Select the available options to align the text vertically or horizontally or dynamically configure it using `fx`.|
-| Text Decoration | Adds an underline, overline, line-through, or a combination of lines to selected text. | Select one of the available options - `none(default)`, `underline`, `overline`, and `strike-through` or dynamically configure it using `fx`. |
-| Transformation | Dictates the capitalization of text. | Select one of the available options - `none (default)`, `uppercase`, `lowercase`, `capitalize` or dynamically configure it using `fx`.|
-| Letter spacing | Determines the space between each letter. | Enter a number as the value (example: `15`) or dynamically configure it using `fx`.|
-| Word spacing | Determines the space between each word. | Enter a number as the value (example: `15`) or dynamically configure it using `fx`.|
-| Font variant | Adjusts the text appearance by applying font variations. | Select one of the available options - `normal`, `inherit`, `small-caps`, `initial` or dynamically configure it using `fx`.|
+| Size | Dimensions of the characters in a font. | Enter any number between `1-100` or dynamically configure it using `fx` |
+| Weight | Determines how bold or light your text will appear. | Select from `light`, `regular`, `semi-bold` or `bold` or dynamically configure it using `fx` |
+| Style | Allows you to apply styles like italic or normal, altering the overall look of the text content. | Select from `normal`, `italic` or `oblique` or dynamically configure it using `fx` |
+| Color | Sets the color of the text. | Choose a color using the color picker or dynamically configure it using `fx` |
+| Scroll | Creates a scroll bar if the text exceeds the component's dimensions. | Choose between `enable` or `disable` or dynamically configure it using `fx` |
+| Line Height | Determines the vertical space between lines of text within an element. | Enter a number as the value (example: `1.5`) or dynamically configure it using `fx`|
+| Text Indent | Commonly used to create an indentation effect. | Enter a number as the value (example: `10`) or dynamically configure it using `fx`|
+| Alignment | Sets the alignment of the text. | Select the available options to align the text vertically or horizontally or dynamically configure it using `fx`|
+| Text Decoration | Adds an underline, overline, line-through, or a combination of lines to selected text. | Select one of the available options - `none(default)`, `underline`, `overline`, and `strike-through` or dynamically configure it using `fx` |
+| Transformation | Dictates the capitalization of text. | Select one of the available options - `none (default)`, `uppercase`, `lowercase`, `capitalize` or dynamically configure it using `fx`|
+| Letter spacing | Determines the space between each letter. | Enter a number as the value (example: `15`) or dynamically configure it using `fx`|
+| Word spacing | Determines the space between each word. | Enter a number as the value (example: `15`) or dynamically configure it using `fx`|
+| Font variant | Adjusts the text appearance by applying font variations. | Select one of the available options - `normal`, `inherit`, `small-caps`, `initial` or dynamically configure it using `fx`|
@@ -96,9 +96,9 @@ Makes the component visible in mobile view. You can set it with the toggle butto
|
Field Property
|
Description
|
Configuration Options
|
|:----------------|:------------|:--------------|
-| Background | Sets the background color of the component. | Select the color or click on `fx` and input code that programmatically returns a Hex color code. |
-| Border | Sets the border color of the component. | Select the color or click on `fx` and input code that programmatically returns a Hex color code. |
-| Border radius | Modifies the border radius of the component. | Enter a number or click on `fx` and enter a code that programmatically returns a numeric value. |
-| Box shadow | Sets the box shadow properties of the component. | Select the box shadow color and adjust the related properties or programmatically set it using `fx`.
-| Padding | Adds padding to the component | Select `None` for no padding and `Default` for standard padding.
+| Background | Sets the background color of the component. | Select the color or click on `fx` and input code that programmatically returns a Hex color code |
+| Border | Sets the border color of the component. | Select the color or click on `fx` and input code that programmatically returns a Hex color code |
+| Border radius | Modifies the border radius of the component. | Enter a number or click on `fx` and enter a code that programmatically returns a numeric value |
+| Box shadow | Sets the box shadow properties of the component. | Select the box shadow color and adjust the related properties or programmatically set it using `fx`
+| Padding | Adds padding to the component | Select `None` for no padding and `Default` for standard padding
diff --git a/docs/docs/widgets/textarea.md b/docs/docs/widgets/textarea.md
index 236c54ec38..30746bc7a5 100644
--- a/docs/docs/widgets/textarea.md
+++ b/docs/docs/widgets/textarea.md
@@ -5,70 +5,84 @@ title: Textarea
# Textarea
The **Textarea** component allows users to enter text in an input field similar to the [Text Input](/docs/widgets/text-input) component. Textarea is generally preferred when we are expecting an input of multiple sentences. In this document, we'll go through all the configuration options for the **Textarea** component.
-## How To Use Textarea Widget
-
+
|
|:-------------|:------------------------------------------------------------|:------------|
| Default value| Used to set initial value in textarea on load. It is a pre-established value that can be retrieved from the Text area component if no modifications are made to it. | Enter some text as the value (example: "John Doe")|
| Placeholder | Provides a hint for the expected value. It disappears once the user interacts with the component. | Enter some instructional text as the value (example: "Type name here") |
-## General
-
-Tooltip
-
-A **Tooltip** is commonly used to provide additional information about an element. This information becomes visible when the user hovers the mouse pointer over the respective component.
-
-In the input field under **Tooltip**, you can enter some text and the component will show the specified text as a tooltip when it is hovered over.
-
-
-
-## Layout
-
-Show on desktop
-
-Use this toggle to show or hide the component in the desktop view. You can dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to `{{true}}` or `{{false}}`.
-
-Show on mobile
-
-Use this toggle to show or hide the component in the mobile view. You can dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to `{{true}}` or `{{false}}`.
-
----
-
-## Styles
-
-| Property | Description | Expected Value |
-|:---------------|:-----------|:---------------|
-| Visibility | Controls the visibility of the component. If set to `{{false}}`, the component will not be visible after the app is deployed.| Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
-| Disable | Makes the component non-functional when set to true. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
-| Border Radius | Adjusts the roundness of the component's corners. | Numeric value|
-
-## General
-
-Box Shadow
-
-The **Box Shadow** property is used to add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow.
-
-
-
-
-
-## Exposed Variables
-
-| Variables | Description | Expected Value |
-|: ----------- |: ----------- | :-------------|
-| value | This variable holds the value entered in the text area component. | You can access the value dynamically using JS. For example, `{{components.textarea1.value}}`|
+
## Component Specific Actions (CSA)
Following actions of the **Textarea** component can be controlled using Component-Specific Actions(CSA):
-| Actions | Description |
-| :----------- | :----------- |
-| setText | Sets the text on the text area component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textarea1.setText('this is a textarea')`. |
-| clear | Clears the value from the text area component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textarea1.clear()`. |
+|
Actions
|
Description
|
How To Access
|
+| :----------- | :----------- |:---------|
+| setText | Sets the text on the text area component via a component-specific action within any event handler.| Employ a RunJS query to execute component-specific actions such as `await components.textarea1.setText('this is a textarea')`. |
+| clear | Clears the value from the text area component via a component-specific action within any event handler.| Employ a RunJS query to execute component-specific actions such as `await components.textarea1.clear()`. |
+
+
+
+
+
+## Exposed Variables
+
+| Variables | Description | How To Access |
+|:---------:|:-----------:|:-------------:|
+|
value
| This variable holds the value entered in the text area component. | Access the value dynamically using JS. For example, `{{components.textarea1.value}}` |
+
+
+
+
+
+## General
+
+### Tooltip
+
+A **Tooltip** is commonly used to provide additional information about an element. This information becomes visible when the user hovers the mouse pointer over the respective component.
+
+In the input field under **Tooltip**, you can enter some text and the component will show the specified text as a tooltip when it is hovered over.
+
+
+
+
+
+## Layout
+
+|
Layout
|
Description
|
Expected Value
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+
+
+
+
+
+---
+
+## Styles
+
+|
Style
|
Description
|
Expected Value
|
+|:---------------|:-----------|:---------------|
+| Visibility | Controls the visibility of the component. If set to `{{false}}`, the component will not be visible after the app is deployed.| Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
+| Disable | Makes the component non-functional when set to true. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
+| Border radius | Adjusts the roundness of the component's corners. | Numeric value|
+
+
+
+
+
+## General
+
+### Box Shadow
+
+The **Box Shadow** property is used to add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow.
+
+
\ No newline at end of file
diff --git a/docs/docs/widgets/timeline.md b/docs/docs/widgets/timeline.md
index 51a845855b..b4e401391e 100644
--- a/docs/docs/widgets/timeline.md
+++ b/docs/docs/widgets/timeline.md
@@ -4,11 +4,9 @@ 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.
-
-
-
+
## Properties
@@ -36,7 +34,27 @@ 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.
+
+
+
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+
+
+
+## Exposed Variables
+
+There are currently no exposed variables for the component.
+
+
+
+
## General
### Tooltip
@@ -45,34 +63,29 @@ A Tooltip is often used to specify extra information when the user hovers the mo
Under the General accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
-
|
+|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+
+
+
+
## Styles
-| Style | Description |
-| ----------- | ----------- |
-| Visibility | Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the component will not visible after the app is deployed. By default, it's set to `{{true}}`. |
+|
Style
|
Description
|
How To Access
|
+|:----------- |:----------- |:--------|
+| Visibility | Toggle on or off to control the visibility of the component. | Programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the component will not visible after the app is deployed. By default, it's set to `{{true}}`. |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-
-## Exposed variables
-
-There are currently no exposed variables for the component.
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/timer.md b/docs/docs/widgets/timer.md
index ec7c14a23d..b43615b375 100644
--- a/docs/docs/widgets/timer.md
+++ b/docs/docs/widgets/timer.md
@@ -4,45 +4,57 @@ 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
-
-
-
-
-
+
## Properties
-### Default value
+|
Property
|
Description
|
+|:----------- |:----------- |
+| Default value | It specifies the initial value of timer. Format is: `HH.mm.ss.SS`. |
+| Timer type | It specifies If its a upward or downward counter. Select `Count Up` or `Count Down` from the dropdown or you can click on `Fx` to programmatically define the values `countUp` or `countDown`. |
-It specifies the initial value of timer. Format is: `HH.mm.ss.SS`.
+
-### Timer type
-
-It specifies If its a upward or downward counter. Select `Count Up` or `Count Down` from the dropdown or you can click on `Fx` to programmatically define the values `countUp` or `countDown`.
+
## Events
-### On start
-This event is fired when user clicks on start button.
-
-### On resume
-This event is fired when user clicks on resume button.
-
-### On pause
-This event is fired when user clicks on pause button.
-
-### On count down finish
-This event is fired when the count down timer reaches zero.
-
-### On reset
-This event is fired when user clicks on reset button.
+|
Event
|
Description
|
+|:----------- |:----------- |
+| On start | This event is fired when user clicks on start button. |
+| On resume | This event is fired when user clicks on resume button. |
+| On pause | This event is fired when user clicks on pause button. |
+| On count down finish | This event is fired when the count down timer reaches zero. |
+| On reset | This event is fired when user clicks on reset button. |
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
:::
+
+
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+
+
+
+## Exposed Variables
+
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:-------- |
+| value | This variable holds the value of the timer in the following keys: **hour**, **minute**, **second**, and **mSecond**.| Access the value dynamically using JS: `{{components.timer1.value.second}}`|
+
+
+
+
+
## General
### Tooltip
@@ -50,40 +62,30 @@ A Tooltip is often used to specify extra information about something when the us
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-### Show on desktop
+|
Layout
|
Description
|
Expected Value
|
+|:----- |:--------- |:------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}`.
-### Show on mobile
+
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-### 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}}`.
+|
Style
|
Description
|
Default Value
|
+|:----- |:--------- |:------------- |
+| 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}}`. |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed Variables
-
-| Variables | Description |
-| ----------- | ----------- |
-| value | This variable holds the value of the timer in the following keys: **hour**, **minute**, **second**, and **mSecond**. You can access the value dynamically using JS: `{{components.timer1.value.second}}`|
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/toggle-switch.md b/docs/docs/widgets/toggle-switch.md
index 4d11ed9ecf..bd0b3033aa 100644
--- a/docs/docs/widgets/toggle-switch.md
+++ b/docs/docs/widgets/toggle-switch.md
@@ -4,33 +4,55 @@ 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**.
-## How To Use Toggle Switch Widget
-
-
+
## Properties
-### Label
+|
Property
|
Description
|
+|:----------- |:----------- |
+| Label | This property can be used to set a label for the switch. Default Label: **Toggle label** |
+| Default status | The property is used to set the default status (enabled or disabled) of the toggle switch component when the app is loaded. By default, the checkbox component is set to `{{false}}`/disabled. |
-This property can be used to set a label for the switch. Default Label: **Toggle label**
+
-### Default status
+
-The property is used to set the default status (enabled or disabled) of the toggle switch component when the app is loaded. By default, the checkbox component is set to `{{false}}`/disabled.
+## Events
-## Event
-
-### On change
-This event is triggered whenever the toggle switch is clicked.
+|
Event
|
Description
|
+|:----------- |:----------- |
+| On change | This event is triggered whenever the toggle switch is clicked. |
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
:::
+
+
+
+
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+
+
+
+## Exposed Variables
+
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:------- |
+| value | This variable holds the boolean value i.e `true` or `false` when the toggle is on or off respectively.| Access the value dynamically using JS: `{{components.toggleswitch1.value}}`|
+
+
+
+
+
## General
### Tooltip
@@ -38,49 +60,32 @@ A Tooltip is often used to specify extra information about something when the us
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-### Show on desktop
+|
Layout
|
Description
|
Expected Value
|
+|:----- |:--------- |:------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
-### Show on mobile
+
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
## Styles
-### 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.
-
-### 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}}`.
+|
Style
|
Description
|
Default Value
|
+|:----- |:--------- |:------------- |
+| 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}}` |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed Variables
-
-| Variables | Description |
-| ----------- | ----------- |
-| value | This variable holds the boolean value i.e `true` or `false` when the toggle is on or off respectively. You can access the value dynamically using JS: `{{components.toggleswitch1.value}}`|
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/tree-select.md b/docs/docs/widgets/tree-select.md
index 5bccb5c366..ae2cd17633 100644
--- a/docs/docs/widgets/tree-select.md
+++ b/docs/docs/widgets/tree-select.md
@@ -5,13 +5,9 @@ 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.
-
-
-
-
-
+
## Properties
@@ -68,7 +64,7 @@ The text is to be used as the title for the tree select. This field expects a `S
Note: The `value` should be unique throughout the structure array.
:::
-### Checked Values
+### Checked values
Checked values is an array of values passed to select the checkboxes by default.
@@ -78,7 +74,7 @@ Checked values is an array of values passed to select the checkboxes by default.
["asia", "spain"]
```
-### Expanded Values
+### Expanded values
Similar to checked values, expanded values is an array of values passed to expand the node by default.
@@ -88,83 +84,69 @@ Similar to checked values, expanded values is an array of values passed to expan
["asia"]
```
-### Events
-
-
-
-
-
+
+
+## Events
+
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
:::
-#### On change
-
-On check event is triggered whenever the checkbox value is changed (checked or unchecked).
-
-#### On check
-
-On check event is triggered whenever the checkbox value is checked.
-
-#### On uncheck
-
-On uncheck event is triggered whenever the checkbox value is unchecked.
-
-### Layout
-
-
-
-
+|
Event
|
Description
|
+|:----------- |:----------- |
+| On change | On check event is triggered whenever the checkbox value is changed (checked or unchecked). |
+| On check | On check event is triggered whenever the checkbox value is checked. |
+| On uncheck | On uncheck event is triggered whenever the checkbox value is unchecked. |
-#### Show on desktop
+
-Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+## Component Specific Actions (CSA)
-#### Show on mobile
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
-Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
+
+
+
+## Exposed Variables
+
+|
Variables
|
Description
|
How To Access
|
+|:----------- |:----------- |:-------|
+| 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]}}`|
+
+
+
+
+
+## Layout
+
+|
Layout
|
Description
|
Expected Value
|
+|:----- |:--------- |:------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+
+
+
+
## Styles
-
-
-
-
-
-
-### Text color
-
-Change the color of the Label by entering the `Hex color code` or choosing a color of your choice from the color-picker.
-
-### Checkbox color
-
-You can change the color of the checkbox by entering the `Hex color code` or choosing a color of your choice from the color-picker.
-
-### 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}}`.
-
-### Disable
-
-This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+|
Style
|
Description
|
Default Value
|
+|:----- |:--------- |:------------- |
+| Text color | Change the color of the text in the widget by providig the `Hex color code` or choosing a color from the picker. | |
+| Checkbox color | Change the color of the toggle switch in the widget by providig 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}}`. |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed Variables
-
-| Variables | Description |
-| ----------- | ----------- |
-| checked | This variable holds the value of all the checked items on the tree select component. You can access the value dynamically using JS: `{{components.treeselect1.checked[1]}}`|
-| expanded | This variable holds the value of expanded items on the tree select component. You can access the value dynamically using JS: `{{components.treeselect1.expanded[0]}}`|
-| checkedPathArray | This variable holds the path of the checked items in differet arrays. You can 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(-). You can access the value dynamically using JS: `{{components.treeselect1.checkedPathStrings[2]}}`|
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/widgets/vertical-divider.md b/docs/docs/widgets/vertical-divider.md
index 769920cd73..384bd705f7 100644
--- a/docs/docs/widgets/vertical-divider.md
+++ b/docs/docs/widgets/vertical-divider.md
@@ -4,14 +4,26 @@ 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.
-
+
-
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
+
+## Exposed Variables
+
+There are currently no exposed variables for the component.
+
+
+
+
+
## General
### Tooltip
@@ -19,34 +31,24 @@ A Tooltip is often used to specify extra information about something when the us
Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
-
-
-
-
+
+
## Layout
-
-
-
+|
Layout
|
Description
|
Expected Value
|
+|:----- |:--------- |:------------- |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| properties | description |
-| ----------- | ----------- |
-| Show on Desktop | This property have toggle switch. If enabled, the divider will display in the desktop view else it will not appear. |
-| Show on Mobile | This property have toggle switch. If enabled, the divider will display in the mobile view else it will not appear. |
+
## Styles
-
-
-
-
-
-
-| properties | description |
+|
Properties
|
Description
|
| ----------- | ----------- |
| Divider Color | It is used to set the color of the divider. Use hex code to set the background color. |
| Visibility | This property is used to set the visibility of the divider. The property accepts Boolean value. |
@@ -56,10 +58,4 @@ Under the General accordion, you can set the value in the string format.
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
-## Exposed variables
-
-There are currently no exposed variables for the component.
-
-## Component specific actions (CSA)
-
-There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
\ No newline at end of file
diff --git a/docs/docs/workflows/logs.md b/docs/docs/workflows/logs.md
index 9e8aa33c34..b372b577fa 100644
--- a/docs/docs/workflows/logs.md
+++ b/docs/docs/workflows/logs.md
@@ -6,7 +6,7 @@ title: Logs
Once you execute the workflow by clicking on the **Run** button, the logs panel will reflect the execution details of each node. Logs let you easily track the order of execution and check whether the execution of individual nodes is successful. You can click on the top bar of the logs panel to expand or minimize it.
-
+
In the above screenshot, we can see the start time and end time for all the nodes along with their names and a message that highlights whether the node was successfully executed or failed. Additionally, logs can also highlight detailed messages to expand on any errors that may occur during execution.
\ No newline at end of file
diff --git a/docs/docs/workflows/nodes.md b/docs/docs/workflows/nodes.md
index ec97cafeca..802ea41735 100644
--- a/docs/docs/workflows/nodes.md
+++ b/docs/docs/workflows/nodes.md
@@ -7,58 +7,66 @@ Nodes are a graphical representation of each process in a workflow. Each node in
Apart from the default **Start Trigger** and **Result** nodes, there are an array of nodes that you can add to the canvas. They can be broadly divided into four types - **JavaScript**, **If condition**, **Data sources** and **REST API**. Let's take a closer look at each node.
+
+
## JavaScript
The **JavaScript** node lets you write custom JavaScript code than runs on the server side. Server-side execution of code protects sensitive logic and data from exposure to the client and improves performance by offloading complex computations from the client. You can use the JavaScript code to transform data, create alert messages and more. The code you enter in each JavaScript node needs a **return** statement to ensure that the result is sent to the next node.
-
+
+
+
+
+
## If condition
The **If condition** node can have one or two incoming flows and two outgoing flows. If it has two incoming flows, it'll only trigger after the execution of both the incoming flows is completed.
The **If condition** node triggers one of the outgoing flows depending on the given logical expression. If the expression evaluates to true, it activates the flow connected to the green circle. Conversely, if it's false, the flow linked to the red circle will be activated.
-
-
-
-
-
-
- - If you click on the If condition node, a dialog box will appear on the right that accepts a logical expression.
-
-
- - The If condition node can be handy when you want to run flows based on the data received or create alert messages based on success or failure of certain nodes.
-
-
-
-
-
+
-## 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.
+- If you click on the **If condition** node, a dialog box will appear on the right that accepts a logical expression.
+- The **If condition** node can be handy when you want to run flows based on the data received or create alert messages based on success or failure of certain nodes.
-
+
+
+
+
+
+
+
+
+## Data Sources
+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.
+
+
+
Each node type will have a different configuration based on the function it performs. For example, a **Twilio** node might come with the relevant fields needed to send an SMS, while a **PostgreSQL** node will have a query field to retrieve the data.
-
+
+
+
+
+
## REST API
The **REST API** node acts as a bridge to connect with RESTful web services. By leveraging standard HTTP methods like GET, POST, PUT, and DELETE, the REST API node ensures smooth communication with web services, making data integration and manipulation more efficient and straightforward.
-
+
-
+
diff --git a/docs/docs/workflows/overview.md b/docs/docs/workflows/overview.md
index 5344f79f62..8f40357562 100644
--- a/docs/docs/workflows/overview.md
+++ b/docs/docs/workflows/overview.md
@@ -8,7 +8,7 @@ title: Overview
ToolJet Workflows is a visual, node-based platform tailored for data-centric automation tasks. With its intuitive design, users can create detailed queries across diverse data sources, manage conditional flows, and execute custom JavaScript code while making the processes presentable and easy to manage.
-
+
Whether you're delving into data integration, generating detailed reports, or ensuring rigorous validation, ToolJet Workflows is your go-to solution.
@@ -17,6 +17,8 @@ Whether you're delving into data integration, generating detailed reports, or en
You're currently exploring the beta version of ToolJet Workflows. Please be aware that this version is experimental, and is not recommended for production use at the moment.
:::
+
+
## Quickstart Guide
This introductory guide will help you understand the basics of ToolJet Workflows. We'll create a workflow that fetches the sales data from the database, transforms the data using JavaScript and sends an SMS notification to the Sales Manager using Twilio. The workflow will also conditionally return a success/failure message that can be used in a ToolJet Application to show a pop-up alert.
@@ -28,7 +30,7 @@ All data sources that are configured in **Global Datasources** will be available
To create a new workflow, click on the workflow icon in the left sidebar and click on the **Create New Workflow** button. You'll be taken to the flow builder with a new workflow. Let's start by renaming the workflow to *Quickstart Guide*.
-
+
The new workflow will have two nodes on the canvas - **Start Trigger** and **Result**. Nodes are a graphical representation of each process in a workflow.
@@ -36,64 +38,39 @@ The new workflow will have two nodes on the canvas - **Start Trigger** and **Res
Click on the blue circle on the **Start trigger** node and drag it to create a new node. Then select **PostgreSQL** node.
-
+
For this guide, we've created a MonthlySales table in PostgreSQL with 5 columns - *SalesID, ProductID, Month, UnitsSold* and *Total Revenue*. We've also configured Twilio to send an SMS notification.
-We can now see a node named *postgresql1* connected to the outgoing flow of the **Start trigger** node on the canvas. Click on the *postgresql1* node, a dialog box will show up on the right.
+We can now see a node named *postgresql1* connected to the outgoing flow of the **Start trigger** node on the canvas. Click on the *postgresql1* node, a dialog box will show up on the right.
-
-
-
- - Click on the input field next to the PostgreSQL logo and rename the node to fetchSalesData.
-
-
- - There are two dropdowns right below the name field. The first dropdown lets you pick from a list of available nodes. The second dropdown lets you pick between SQL mode and GUI mode to frame your query.
-
-
- - We will stick to SQL mode for our example.
-
-
- - Below the two dropdowns we have an input field to write our SQL query, we'll enter the below query in the input field to fetch the required data:
-
- SELECTProductID, Month, UnitsSold, TotalRevenueFROMMonthlySales;
-
-
- - If you click on the Run button in the top bar, the results field at the bottom will be populated with the result of the query.
-
+- Click on the input field next to the PostgreSQL logo and rename the node to fetchSalesData.
+- There are two dropdowns right below the name field. The first dropdown lets you pick from a list of available nodes. The second dropdown lets you pick between SQL mode and GUI mode to frame your query.
+- We will stick to SQL mode for our example.
+- Below the two dropdowns we have an input field to write our SQL query, we'll enter the below query in the input field to fetch the required data:
+**SELECT** *ProductID, Month, UnitsSold, TotalRevenue* **FROM** *MonthlySales*;
+- If you click on the Run button in the top bar, the results field at the bottom will be populated with the result of the query.
+
+
+
-
-
-
-
-
Create an outgoing flow from the *fetchSalesData* node that we just created by clicking on the blue circle on its right. Select the **JavaScript** node and rename it to *createNotification*.
-
+
The **JavaScript** node lets you run JavaScript code to transform data and perform other tasks. The JavaScript code executes on the server side to protect sensitive logic and data from exposure to the client. In our example, we are using it to convert the result from the previous node into a string.
-
-
-
-
- - In the JavaScript node, the data retrieved from the fetchSalesData node can be accessed using the property - fetchSalesData.data.
-
-
- - Additionally, to determine the execution status (success or failure) of the node, refer to the fetchSalesData.status property.
-
-
- - It is important to use a return statement in the JavaScript node to ensure that the node returns some data after the code executes.
-
-
-
-
-
-
-
+
+- In the JavaScript node, the data retrieved from the *fetchSalesData* node can be accessed using the property - **fetchSalesData.data**.
+- Additionally, to determine the execution status (success or failure) of the node, refer to the **fetchSalesData.status** property.
+- It is important to use a **return** statement in the JavaScript node to ensure that the node returns some data after the code executes.
+
+
+
+
We'll use the following code in the *createNotification* node to format our notification. Note that we are using a **return** statement to make sure that we are returning the data for the next node.
```js
@@ -110,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}}
```
@@ -118,20 +95,20 @@ In the **Body** field of the *sendSMS* node, we will retreive the data returned
Click on the **Run** button on the top right to test our workflow. The **Logs** panel at the bottom will expand with details of each node execution. Logs give a quick overview of errors, execution start time, execution end time and success/failure of each node. Click on top bar of the Logs panel to expand or minimize it.
-
+
In the above screenshot, Logs indicate that all three nodes have successfully executed. The *sendSMS* node has sent an SMS notification to the entered number.
-
+
Click on the *sendSMS* node and look at the **Results**. Under the **data** property, we can see an **errorMessage** identifier. The **errorMessage** will be null for the messages that are successfully sent to the intended number.
-
+
@@ -140,35 +117,26 @@ Referring to the **errorMessage** identifier of the *sendSMS* node, we'll use th
The **If condition** node accepts a logical expression and evaluates it. The outgoing flow connected to the green circle will execute if the logical expression is evaluated to `true`, and the one with the red circle will execute if the logical expression is evaluated to `false`.
-
+
Click on the **If condition** node, a dialog box will appear on the right.
-
-
-
- - Enter the below logical expression in the input area:
- sendSMS.data.errorMessage == null
-
-
- - The If condition node will return true if errorMessage is null. In case an error message is present, it'll return false.
-
-
- - We can now configure two outgoing flows, one of which will be executed based on the provided logical expression.
-
-
-
-
-
+- Enter the below logical expression in the input area:
+**sendSMS.data.errorMessage == null**
+- The If condition node will return true if **errorMessage** is null. In case an error message is present, it'll return false.
+- We can now configure two outgoing flows, one of which will be executed based on the provided logical expression.
+
+
+
-
+
Click on the green circle on the **If condition** node and drag it, select a new **JavaScript node** and rename it to *successMessage*. Similarly, create one outgoing flow from the red circle and select a JavaScript node. Rename it to *failureMessage*.
-
+
Click on the *successMessage* node, and enter the below code.
@@ -186,7 +154,7 @@ return "Error: Message Not Sent"
Note that we are using the return statement in both the newly created JavaScript nodes. Without a return statement, the nodes will not return any data. Click on the **Run** button to execute the workflow.
-
+
Check the logs. All the nodes should get executed sequentially. The *successMessage* or *failureMessage* node will get executed based on the evaluation of the **If condition** node.
@@ -196,7 +164,7 @@ With this basic workflow, we've essentially isolated a complex data-centric task
You can now use this workflow in your ToolJet Application from the query panel. In your application, simply click on the **+ Add** button in the query panel and select **Run Workflow**. Then select **Quickstart Guide** in the **Workflow** dropdown. Rename the query to *sendNotification*.
-
+
@@ -205,7 +173,7 @@ We'll now run the workflow whenever a **Button** is clicked.
Select a **Button** component, click on **Add handler** under **Events**. Leave the **Event** as **On click** and select **Run Query** as **Action**. For the **Query** dropdown under **Action Options**, select the *sendNotification* query that we have created in the previous step using our *Quickstart Guide* workflow.
-
+
@@ -217,7 +185,7 @@ queries.sendNotification.data.failureMessage}}
The above code will return success or failure message based on the output we receive from the *Quickstart Guide* workflow. Now, every time we press the button, an SMS containing the sales data will be sent, and an alert message will appear.
-
+
@@ -229,3 +197,4 @@ Continue learning about the different elements of ToolJet Workflows using the be
**[Overview of Logs](/docs/workflows/logs)**
**[Permissions in Workflows](/docs/workflows/permissions)**
+
\ No newline at end of file
diff --git a/docs/docs/workflows/permissions.md b/docs/docs/workflows/permissions.md
index db6f6485df..8a22f7ae30 100644
--- a/docs/docs/workflows/permissions.md
+++ b/docs/docs/workflows/permissions.md
@@ -11,14 +11,19 @@ Permissions in **ToolJet Workflows** provide a structured approach to access con
| **Groups with App Editing Permissions** | ❌ | ❌ | ✅ | ✅ | ❌ |
| **End Users** | ❌ | ❌ | ✅ | ❌ | ❌ |
+
## Admins
**Admins** can create, edit, and manage workflows, access the workflow dashboard and flow builder, and use them in ToolJet's **App Builder**. They also have the option to use the **Enable** toggle on the top-right to enable or disable the execution of workflows in ToolJet applications.
-
+
+
+
+
+
## Groups with App Editing Permissions
**Groups with App Editing Permissions** can use the existing workflows in ToolJet's **App Builder**.
@@ -31,6 +36,10 @@ Imagine a company using ToolJet to build internal applications. The HR departmen
While they can harness existing workflows and integrate them into app functionalities, Groups with App Editing Permissions can't create or modify the workflows themselves like **Admins**.
+
+
+
+
## End Users
**End Users** can only execute workflows in the application.
@@ -42,4 +51,4 @@ Taking the same company scenario, an employee(end user) from the Sales departmen
- Upon submission, they click the *Request Leave* button (which is linked to a workflow that sends this request to the HR department).
- Once HR approves the leave using the *Approve Leave* button (created by the "Groups with App Editing Permissions"), the employee receives an automated email notification, which is triggered by another workflow.
-
+
diff --git a/docs/docs/workflows/triggers.md b/docs/docs/workflows/triggers.md
index 5855b4fa60..d19f2caf07 100644
--- a/docs/docs/workflows/triggers.md
+++ b/docs/docs/workflows/triggers.md
@@ -6,37 +6,42 @@ title: Triggers
Triggers can be used to execute a workflow. Currently, ToolJet supports two types of triggers: [Webhooks](#webhooks) and [Manual](#manual).
-
+
+
+
## Webhooks
A webhook trigger allows you to run the workflow when a webhook is received. You can configure the webhook trigger from the Triggers tab. The webhook URL is unique for each workflow.
-### Creating a webhook trigger
+
+
+
+### Creating a Webhook Trigger
- Click on the **Triggers** option in the left panel to open the Triggers tab.
-
+
- Click on the **Webhooks** option.
-
+
- By default, the webhook trigger is disabled. Toggle the switch to **enable** the webhook trigger.
-
+
- Once enabled, you can choose the **Environment** to modify the webhook endpoint URL to be copied for that specific environment. For example, if you choose the **Production** environment, you can `Copy URL` or `Copy as cURL` which can then be used to trigger for **Production** environment accordingly.
-
+
- Find the API endpoint URL in the **Endpoint** field. You can use this URL to send a POST request to trigger the workflow. You can also click on the **Copy** button to copy the URL to the clipboard. You can either select `Copy URL` or `Copy as cURL` from the dropdown menu. The `Copy as cURL` option copies the URL as a cURL command which will include details such as the `API token` and `Environment`. An example of the Endpoint URL is as follows:
@@ -46,15 +51,23 @@ A webhook trigger allows you to run the workflow when a webhook is received. You
```
-
+
- The API token is used to authenticate the request. You can find the API token in the **API Token** field. You can also click on the **Copy** button to copy the API token to the clipboard.
-
+
+ :::info
+ Currently, authentication is mandatory for webhooks. Use a bearer token in the `Authorization` header for authentication.
+ **Format:**
+ `Authorization: Bearer `
+ **Example:**
+ `Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...`
+ :::
+
- Parameters can be passed to the workflow using the **Parameters** field. The parameter `key` and their `type` can be specified in the **Parameters** field. For example, if you want to pass the `name` and `age` parameters to the workflow using the webhook triggers, you can set the **Parameters** field as follows:
```json
@@ -63,7 +76,7 @@ A webhook trigger allows you to run the workflow when a webhook is received. You
```
-
+
- The **Test JSON parameters** field can be used to test the webhook trigger. You can enter the parameter values in the **Test JSON parameters** field and click on the **Run** button to test the webhook trigger. The workflow will be executed with the parameter values specified in the **Test JSON parameters** field.
@@ -78,10 +91,14 @@ A webhook trigger allows you to run the workflow when a webhook is received. You
These parameters can be accessed in the workflow using the `startTrigger.params`.
-
+
-### Restrictions on usage of webhook triggers
+
+
+
+
+### Restrictions on Usage of Webhook Triggers
There are certain restrictions on the usage of webhook triggers that are configurable, both at the instance level and at the workspace level depending on the license. The restrictions are as follows:
@@ -92,7 +109,7 @@ There are certain restrictions on the usage of webhook triggers that are configu
For limiting parallel executions, the following environment variables can be used:
-| Environment variable | Value | Description |
+|
Environment Variable
|
Value
|
Description
|
| -------------------- | ----- | ----------- |
| WEBHOOK_THROTTLE_TTL | 60000 | Time in milliseconds for the webhook requests to live |
| WEBHOOK_THROTTLE_LIMIT | 100 | Maximum number of requests within the TTL that will be throttled |
@@ -101,6 +118,10 @@ For limiting parallel executions, the following environment variables can be use
For Virtual Private Clouds (VPCs), restrict access only to the `{TOOLJET_HOST}/api/v2/workflows/*` endpoint.
:::
+
+
+
+
## Manual
Manual triggers can be used to run a workflow manually from the ToolJet apps. Manual triggers work similar to the queries of a data source. You can add a trigger to an application from the query panel.
@@ -108,10 +129,14 @@ Manual triggers can be used to run a workflow manually from the ToolJet apps. Ma
In the application, simply click on the `+ Add` button in the query panel and select **Run Workflow**. Then select the desired workflow from the dropdown. Rename the query if required and click on the **Run** button to trigger the workflow or add this query to a event handler to trigger the workflow on a specific event.
-
+
-### Passing parameters
+
+
+
+
+### Passing Parameters
Parameters can be passed to the workflow from the **Params** field in the query. The parameter `key` and their `value` can be specified in the **Params** field. For example, if you want to pass the `name` and `age` parameters to the workflow using the manual triggers, you can set the **Params** field as follows:
@@ -123,5 +148,7 @@ Parameters can be passed to the workflow from the **Params** field in the query.
Assume a scenario where teams manage multiple ToolJet apps, each requiring queries to the same database for specific data. Instead of duplicating these steps across various apps, a workflow can be created once and seamlessly integrated wherever needed.
-4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using **{{queries.tooljetdb1.data}}**. The table will be auto-populated once the table data is entered.
+4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using `{{queries.tooljetdb1.data}}`. The table will be auto-populated once the table data is entered.
diff --git a/docs/versioned_docs/version-2.0.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.0.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.0.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.0.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.0.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.0.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.0.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.0.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
-- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter **{{queries.queryname.data}}** where queryname is the name of the query that we created in previous step.
+- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter `{{queries.queryname.data}}` where queryname is the name of the query that we created in previous step.
diff --git a/docs/versioned_docs/version-2.0.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.0.0/setup/try-tooljet.md
index e2158d85fd..38b76b68b2 100644
--- a/docs/versioned_docs/version-2.0.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.0.0/setup/try-tooljet.md
@@ -26,15 +26,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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.1.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.1.0/contributing-guide/setup/macos.md
index 0a6c62219b..66fc30b08c 100644
--- a/docs/versioned_docs/version-2.1.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.1.0/contributing-guide/setup/macos.md
@@ -12,8 +12,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
+
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.1.0/data-sources/stripe.md b/docs/versioned_docs/version-2.1.0/data-sources/stripe.md
index e6fa073e9c..77aa839750 100644
--- a/docs/versioned_docs/version-2.1.0/data-sources/stripe.md
+++ b/docs/versioned_docs/version-2.1.0/data-sources/stripe.md
@@ -50,67 +50,67 @@ 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**
diff --git a/docs/versioned_docs/version-2.1.0/getting-started.md b/docs/versioned_docs/version-2.1.0/getting-started.md
index 4b77cb0615..e9d9360264 100644
--- a/docs/versioned_docs/version-2.1.0/getting-started.md
+++ b/docs/versioned_docs/version-2.1.0/getting-started.md
@@ -19,18 +19,7 @@ Once the data sources are connected, ToolJet can run **queries** on these data s
-
## How ToolJet works
@@ -168,7 +157,7 @@ ToolJet application's User interface is constructed using Components like Tables
-4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using **{{queries.tooljetdb1.data}}**. The table will be auto-populated once the table data is entered.
+4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using `{{queries.tooljetdb1.data}}`. The table will be auto-populated once the table data is entered.
diff --git a/docs/versioned_docs/version-2.1.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.1.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.1.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.1.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.1.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.1.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.1.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.1.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
-- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter **{{queries.queryname.data}}** where queryname is the name of the query that we created in previous step.
+- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter `{{queries.queryname.data}}` where queryname is the name of the query that we created in previous step.
diff --git a/docs/versioned_docs/version-2.1.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.1.0/setup/try-tooljet.md
index e2158d85fd..38b76b68b2 100644
--- a/docs/versioned_docs/version-2.1.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.1.0/setup/try-tooljet.md
@@ -26,15 +26,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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.10.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.10.0/contributing-guide/setup/macos.md
index e2c62ffd95..3d3f2e2bac 100644
--- a/docs/versioned_docs/version-2.10.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.10.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
+
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.10.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.10.0/contributing-guide/troubleshooting/eslint.md
index efb8d897fe..d0e352a565 100644
--- a/docs/versioned_docs/version-2.10.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.10.0/contributing-guide/troubleshooting/eslint.md
@@ -42,5 +42,5 @@ For VSCode users, you can set the formatter to `ESLint` in the [**settings.json*
2. **npm version 8.11.0**
:::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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.10.0/data-sources/stripe.md b/docs/versioned_docs/version-2.10.0/data-sources/stripe.md
index e6fa073e9c..77aa839750 100644
--- a/docs/versioned_docs/version-2.10.0/data-sources/stripe.md
+++ b/docs/versioned_docs/version-2.10.0/data-sources/stripe.md
@@ -50,67 +50,67 @@ 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**
diff --git a/docs/versioned_docs/version-2.10.0/getting-started.md b/docs/versioned_docs/version-2.10.0/getting-started.md
index 205e92d241..94e3839917 100644
--- a/docs/versioned_docs/version-2.10.0/getting-started.md
+++ b/docs/versioned_docs/version-2.10.0/getting-started.md
@@ -19,18 +19,7 @@ Once the data sources are connected, ToolJet can run **queries** on these data s
-
## How ToolJet works
@@ -168,7 +157,7 @@ ToolJet application's User interface is constructed using Components like Tables
-4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using **{{queries.tooljetdb1.data}}**. The table will be auto-populated once the table data is entered.
+4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using `{{queries.tooljetdb1.data}}`. The table will be auto-populated once the table data is entered.
diff --git a/docs/versioned_docs/version-2.10.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.10.0/how-to/serverside-pagination.md
index ed6536c270..5d6e2fcb5a 100644
--- a/docs/versioned_docs/version-2.10.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.10.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
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 datasources 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.
diff --git a/docs/versioned_docs/version-2.10.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.10.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.10.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.10.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.10.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.10.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.10.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.10.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
-- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter **{{queries.queryname.data}}** where queryname is the name of the query that we created in previous step.
+- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter `{{queries.queryname.data}}` where queryname is the name of the query that we created in previous step.
diff --git a/docs/versioned_docs/version-2.10.0/marketplace/plugins/textract.md b/docs/versioned_docs/version-2.10.0/marketplace/plugins/textract.md
index e3d616156b..4a9e4f6d99 100644
--- a/docs/versioned_docs/version-2.10.0/marketplace/plugins/textract.md
+++ b/docs/versioned_docs/version-2.10.0/marketplace/plugins/textract.md
@@ -49,7 +49,7 @@ This operation let's you to analyze the document by providing the document data
#### Required parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
+- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: `{{components.filepicker1.file[0].base64Data}}`
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
diff --git a/docs/versioned_docs/version-2.10.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.10.0/setup/try-tooljet.md
index e2158d85fd..38b76b68b2 100644
--- a/docs/versioned_docs/version-2.10.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.10.0/setup/try-tooljet.md
@@ -26,15 +26,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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.10.0/widgets/calendar.md b/docs/versioned_docs/version-2.10.0/widgets/calendar.md
index 27791aea3f..ec0f642448 100644
--- a/docs/versioned_docs/version-2.10.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.10.0/widgets/calendar.md
@@ -203,7 +203,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.10.0/widgets/number-input.md b/docs/versioned_docs/version-2.10.0/widgets/number-input.md
index 215790f6af..e7232c3d90 100644
--- a/docs/versioned_docs/version-2.10.0/widgets/number-input.md
+++ b/docs/versioned_docs/version-2.10.0/widgets/number-input.md
@@ -44,7 +44,7 @@ The loading state can be enabled to show a spinner as the content of the number
This property determines the number of decimal places displayed in the number input component. It allows you to specify the level of precision for decimal values.
-For example, if you set the decimal places to **{{2}}**, any decimal value entered or displayed in the number input will be rounded to two decimal places. This ensures consistent formatting and helps users input and visualize decimal values accurately. It can be set to **{{0}}** for whole numbers or increased to display more precise decimal values.
+For example, if you set the decimal places to `{{2}}`, any decimal value entered or displayed in the number input will be rounded to two decimal places. This ensures consistent formatting and helps users input and visualize decimal values accurately. It can be set to `{{0}}` for whole numbers or increased to display more precise decimal values.
## Events
diff --git a/docs/versioned_docs/version-2.10.0/widgets/table.md b/docs/versioned_docs/version-2.10.0/widgets/table.md
index 293654d691..106519e042 100644
--- a/docs/versioned_docs/version-2.10.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.10.0/widgets/table.md
@@ -461,19 +461,19 @@ If server-side search is enabled, `on search` event is fired after the content o
### 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.
### Show filter 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.
+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.
### 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 update buttons
diff --git a/docs/versioned_docs/version-2.11.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.11.0/contributing-guide/setup/macos.md
index e2c62ffd95..3d3f2e2bac 100644
--- a/docs/versioned_docs/version-2.11.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.11.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
+
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.11.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.11.0/contributing-guide/troubleshooting/eslint.md
index efb8d897fe..d0e352a565 100644
--- a/docs/versioned_docs/version-2.11.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.11.0/contributing-guide/troubleshooting/eslint.md
@@ -42,5 +42,5 @@ For VSCode users, you can set the formatter to `ESLint` in the [**settings.json*
2. **npm version 8.11.0**
:::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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.11.0/data-sources/custom-js.md b/docs/versioned_docs/version-2.11.0/data-sources/custom-js.md
index f6415bc7b3..87a750da67 100644
--- a/docs/versioned_docs/version-2.11.0/data-sources/custom-js.md
+++ b/docs/versioned_docs/version-2.11.0/data-sources/custom-js.md
@@ -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.
-4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using **{{queries.tooljetdb1.data}}**. The table will be auto-populated once the table data is entered.
+4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using `{{queries.tooljetdb1.data}}`. The table will be auto-populated once the table data is entered.
diff --git a/docs/versioned_docs/version-2.11.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.11.0/how-to/serverside-pagination.md
index ed6536c270..5d6e2fcb5a 100644
--- a/docs/versioned_docs/version-2.11.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.11.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
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 datasources 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.
diff --git a/docs/versioned_docs/version-2.11.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.11.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.11.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.11.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.11.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.11.0/how-to/use-form-component.md
index 51eb84ef10..a4ae4aea18 100644
--- a/docs/versioned_docs/version-2.11.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.11.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
-- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter **{{queries.queryname.data}}** where queryname is the name of the query that we created in previous step.
+- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter `{{queries.queryname.data}}` where queryname is the name of the query that we created in previous step.
diff --git a/docs/versioned_docs/version-2.11.0/marketplace/plugins/textract.md b/docs/versioned_docs/version-2.11.0/marketplace/plugins/textract.md
index e3d616156b..4a9e4f6d99 100644
--- a/docs/versioned_docs/version-2.11.0/marketplace/plugins/textract.md
+++ b/docs/versioned_docs/version-2.11.0/marketplace/plugins/textract.md
@@ -49,7 +49,7 @@ This operation let's you to analyze the document by providing the document data
#### Required parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
+- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: `{{components.filepicker1.file[0].base64Data}}`
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
diff --git a/docs/versioned_docs/version-2.11.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.11.0/setup/try-tooljet.md
index e2158d85fd..38b76b68b2 100644
--- a/docs/versioned_docs/version-2.11.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.11.0/setup/try-tooljet.md
@@ -26,15 +26,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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.11.0/widgets/calendar.md b/docs/versioned_docs/version-2.11.0/widgets/calendar.md
index fcc162b9d6..2d0549a697 100644
--- a/docs/versioned_docs/version-2.11.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.11.0/widgets/calendar.md
@@ -211,7 +211,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.11.0/widgets/number-input.md b/docs/versioned_docs/version-2.11.0/widgets/number-input.md
index 215790f6af..e7232c3d90 100644
--- a/docs/versioned_docs/version-2.11.0/widgets/number-input.md
+++ b/docs/versioned_docs/version-2.11.0/widgets/number-input.md
@@ -44,7 +44,7 @@ The loading state can be enabled to show a spinner as the content of the number
This property determines the number of decimal places displayed in the number input component. It allows you to specify the level of precision for decimal values.
-For example, if you set the decimal places to **{{2}}**, any decimal value entered or displayed in the number input will be rounded to two decimal places. This ensures consistent formatting and helps users input and visualize decimal values accurately. It can be set to **{{0}}** for whole numbers or increased to display more precise decimal values.
+For example, if you set the decimal places to `{{2}}`, any decimal value entered or displayed in the number input will be rounded to two decimal places. This ensures consistent formatting and helps users input and visualize decimal values accurately. It can be set to `{{0}}` for whole numbers or increased to display more precise decimal values.
## Events
diff --git a/docs/versioned_docs/version-2.11.0/widgets/pdf.md b/docs/versioned_docs/version-2.11.0/widgets/pdf.md
index 8dbc206c17..90f3bf99df 100644
--- a/docs/versioned_docs/version-2.11.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.11.0/widgets/pdf.md
@@ -5,12 +5,27 @@ title: PDF
# PDF
-PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
+The PDF component can be used to embed PDF files either by URL or through Base64 code.
+
+## Compatibility
+
+The PDF component is compatible with the following browser versions:
+
+| Browser | Version |
+|:--------|:--------------------|
+| Chrome | 92 or later |
+| Edge | 92 or later |
+| Safari | 15.4 or later |
+| Firefox | 90 or later |
+
+
+If the PDF component is integrated into your application, it will only render in supported browsers.
:::info
Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
+
## Properties
### File URL
diff --git a/docs/versioned_docs/version-2.11.0/widgets/table.md b/docs/versioned_docs/version-2.11.0/widgets/table.md
index ba79c8a17f..9adc54d187 100644
--- a/docs/versioned_docs/version-2.11.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.11.0/widgets/table.md
@@ -523,19 +523,19 @@ If server-side search is enabled, `on search` event is fired after the content o
### 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.
### Show filter 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.
+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.
### 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 update buttons
diff --git a/docs/versioned_docs/version-2.12.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.12.0/contributing-guide/setup/macos.md
index e2c62ffd95..3d3f2e2bac 100644
--- a/docs/versioned_docs/version-2.12.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.12.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
+
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.12.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.12.0/contributing-guide/troubleshooting/eslint.md
index efb8d897fe..d0e352a565 100644
--- a/docs/versioned_docs/version-2.12.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.12.0/contributing-guide/troubleshooting/eslint.md
@@ -42,5 +42,5 @@ For VSCode users, you can set the formatter to `ESLint` in the [**settings.json*
2. **npm version 8.11.0**
:::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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.12.0/data-sources/custom-js.md b/docs/versioned_docs/version-2.12.0/data-sources/custom-js.md
index e9064bffef..c9ac19e0ba 100644
--- a/docs/versioned_docs/version-2.12.0/data-sources/custom-js.md
+++ b/docs/versioned_docs/version-2.12.0/data-sources/custom-js.md
@@ -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.
-4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using **{{queries.tooljetdb1.data}}**. The table will be auto-populated once the table data is entered.
+4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using `{{queries.tooljetdb1.data}}`. The table will be auto-populated once the table data is entered.
diff --git a/docs/versioned_docs/version-2.12.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.12.0/how-to/serverside-pagination.md
index ed6536c270..5d6e2fcb5a 100644
--- a/docs/versioned_docs/version-2.12.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.12.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
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 datasources 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.
diff --git a/docs/versioned_docs/version-2.12.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.12.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.12.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.12.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.12.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.12.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.12.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.12.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
-- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter **{{queries.queryname.data}}** where queryname is the name of the query that we created in previous step.
+- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter `{{queries.queryname.data}}` where queryname is the name of the query that we created in previous step.
diff --git a/docs/versioned_docs/version-2.12.0/marketplace/plugins/textract.md b/docs/versioned_docs/version-2.12.0/marketplace/plugins/textract.md
index e3d616156b..4a9e4f6d99 100644
--- a/docs/versioned_docs/version-2.12.0/marketplace/plugins/textract.md
+++ b/docs/versioned_docs/version-2.12.0/marketplace/plugins/textract.md
@@ -49,7 +49,7 @@ This operation let's you to analyze the document by providing the document data
#### Required parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
+- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: `{{components.filepicker1.file[0].base64Data}}`
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
diff --git a/docs/versioned_docs/version-2.12.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.12.0/setup/try-tooljet.md
index 59c9108cf2..6fc5128f65 100644
--- a/docs/versioned_docs/version-2.12.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.12.0/setup/try-tooljet.md
@@ -27,15 +27,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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.12.0/widgets/calendar.md b/docs/versioned_docs/version-2.12.0/widgets/calendar.md
index fcc162b9d6..2d0549a697 100644
--- a/docs/versioned_docs/version-2.12.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.12.0/widgets/calendar.md
@@ -211,7 +211,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.12.0/widgets/number-input.md b/docs/versioned_docs/version-2.12.0/widgets/number-input.md
index 215790f6af..e7232c3d90 100644
--- a/docs/versioned_docs/version-2.12.0/widgets/number-input.md
+++ b/docs/versioned_docs/version-2.12.0/widgets/number-input.md
@@ -44,7 +44,7 @@ The loading state can be enabled to show a spinner as the content of the number
This property determines the number of decimal places displayed in the number input component. It allows you to specify the level of precision for decimal values.
-For example, if you set the decimal places to **{{2}}**, any decimal value entered or displayed in the number input will be rounded to two decimal places. This ensures consistent formatting and helps users input and visualize decimal values accurately. It can be set to **{{0}}** for whole numbers or increased to display more precise decimal values.
+For example, if you set the decimal places to `{{2}}`, any decimal value entered or displayed in the number input will be rounded to two decimal places. This ensures consistent formatting and helps users input and visualize decimal values accurately. It can be set to `{{0}}` for whole numbers or increased to display more precise decimal values.
## Events
diff --git a/docs/versioned_docs/version-2.12.0/widgets/pdf.md b/docs/versioned_docs/version-2.12.0/widgets/pdf.md
index 8dbc206c17..90f3bf99df 100644
--- a/docs/versioned_docs/version-2.12.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.12.0/widgets/pdf.md
@@ -5,12 +5,27 @@ title: PDF
# PDF
-PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
+The PDF component can be used to embed PDF files either by URL or through Base64 code.
+
+## Compatibility
+
+The PDF component is compatible with the following browser versions:
+
+| Browser | Version |
+|:--------|:--------------------|
+| Chrome | 92 or later |
+| Edge | 92 or later |
+| Safari | 15.4 or later |
+| Firefox | 90 or later |
+
+
+If the PDF component is integrated into your application, it will only render in supported browsers.
:::info
Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
+
## Properties
### File URL
diff --git a/docs/versioned_docs/version-2.12.0/widgets/table.md b/docs/versioned_docs/version-2.12.0/widgets/table.md
index ba79c8a17f..9adc54d187 100644
--- a/docs/versioned_docs/version-2.12.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.12.0/widgets/table.md
@@ -523,19 +523,19 @@ If server-side search is enabled, `on search` event is fired after the content o
### 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.
### Show filter 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.
+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.
### 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 update buttons
diff --git a/docs/versioned_docs/version-2.13.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.13.0/contributing-guide/setup/macos.md
index e2c62ffd95..3d3f2e2bac 100644
--- a/docs/versioned_docs/version-2.13.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.13.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
+
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.13.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.13.0/contributing-guide/troubleshooting/eslint.md
index efb8d897fe..d0e352a565 100644
--- a/docs/versioned_docs/version-2.13.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.13.0/contributing-guide/troubleshooting/eslint.md
@@ -42,5 +42,5 @@ For VSCode users, you can set the formatter to `ESLint` in the [**settings.json*
2. **npm version 8.11.0**
:::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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.13.0/data-sources/custom-js.md b/docs/versioned_docs/version-2.13.0/data-sources/custom-js.md
index e9064bffef..c9ac19e0ba 100644
--- a/docs/versioned_docs/version-2.13.0/data-sources/custom-js.md
+++ b/docs/versioned_docs/version-2.13.0/data-sources/custom-js.md
@@ -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.
-4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using **{{queries.tooljetdb1.data}}**. The table will be auto-populated once the table data is entered.
+4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using `{{queries.tooljetdb1.data}}`. The table will be auto-populated once the table data is entered.
diff --git a/docs/versioned_docs/version-2.13.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.13.0/how-to/serverside-pagination.md
index ed6536c270..5d6e2fcb5a 100644
--- a/docs/versioned_docs/version-2.13.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.13.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
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 datasources 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.
diff --git a/docs/versioned_docs/version-2.13.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.13.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.13.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.13.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.13.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.13.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.13.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.13.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
-- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter **{{queries.queryname.data}}** where queryname is the name of the query that we created in previous step.
+- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter `{{queries.queryname.data}}` where queryname is the name of the query that we created in previous step.
diff --git a/docs/versioned_docs/version-2.13.0/marketplace/plugins/textract.md b/docs/versioned_docs/version-2.13.0/marketplace/plugins/textract.md
index e3d616156b..4a9e4f6d99 100644
--- a/docs/versioned_docs/version-2.13.0/marketplace/plugins/textract.md
+++ b/docs/versioned_docs/version-2.13.0/marketplace/plugins/textract.md
@@ -49,7 +49,7 @@ This operation let's you to analyze the document by providing the document data
#### Required parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
+- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: `{{components.filepicker1.file[0].base64Data}}`
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
diff --git a/docs/versioned_docs/version-2.13.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.13.0/setup/try-tooljet.md
index 59c9108cf2..6fc5128f65 100644
--- a/docs/versioned_docs/version-2.13.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.13.0/setup/try-tooljet.md
@@ -27,15 +27,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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.13.0/widgets/calendar.md b/docs/versioned_docs/version-2.13.0/widgets/calendar.md
index fcc162b9d6..2d0549a697 100644
--- a/docs/versioned_docs/version-2.13.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.13.0/widgets/calendar.md
@@ -211,7 +211,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.13.0/widgets/number-input.md b/docs/versioned_docs/version-2.13.0/widgets/number-input.md
index 215790f6af..e7232c3d90 100644
--- a/docs/versioned_docs/version-2.13.0/widgets/number-input.md
+++ b/docs/versioned_docs/version-2.13.0/widgets/number-input.md
@@ -44,7 +44,7 @@ The loading state can be enabled to show a spinner as the content of the number
This property determines the number of decimal places displayed in the number input component. It allows you to specify the level of precision for decimal values.
-For example, if you set the decimal places to **{{2}}**, any decimal value entered or displayed in the number input will be rounded to two decimal places. This ensures consistent formatting and helps users input and visualize decimal values accurately. It can be set to **{{0}}** for whole numbers or increased to display more precise decimal values.
+For example, if you set the decimal places to `{{2}}`, any decimal value entered or displayed in the number input will be rounded to two decimal places. This ensures consistent formatting and helps users input and visualize decimal values accurately. It can be set to `{{0}}` for whole numbers or increased to display more precise decimal values.
## Events
diff --git a/docs/versioned_docs/version-2.13.0/widgets/pdf.md b/docs/versioned_docs/version-2.13.0/widgets/pdf.md
index 8dbc206c17..90f3bf99df 100644
--- a/docs/versioned_docs/version-2.13.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.13.0/widgets/pdf.md
@@ -5,12 +5,27 @@ title: PDF
# PDF
-PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
+The PDF component can be used to embed PDF files either by URL or through Base64 code.
+
+## Compatibility
+
+The PDF component is compatible with the following browser versions:
+
+| Browser | Version |
+|:--------|:--------------------|
+| Chrome | 92 or later |
+| Edge | 92 or later |
+| Safari | 15.4 or later |
+| Firefox | 90 or later |
+
+
+If the PDF component is integrated into your application, it will only render in supported browsers.
:::info
Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
+
## Properties
### File URL
diff --git a/docs/versioned_docs/version-2.13.0/widgets/table.md b/docs/versioned_docs/version-2.13.0/widgets/table.md
index ba79c8a17f..9adc54d187 100644
--- a/docs/versioned_docs/version-2.13.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.13.0/widgets/table.md
@@ -523,19 +523,19 @@ If server-side search is enabled, `on search` event is fired after the content o
### 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.
### Show filter 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.
+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.
### 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 update buttons
diff --git a/docs/versioned_docs/version-2.14.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.14.0/contributing-guide/setup/macos.md
index e2c62ffd95..3d3f2e2bac 100644
--- a/docs/versioned_docs/version-2.14.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.14.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
+
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.14.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.14.0/contributing-guide/troubleshooting/eslint.md
index efb8d897fe..d0e352a565 100644
--- a/docs/versioned_docs/version-2.14.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.14.0/contributing-guide/troubleshooting/eslint.md
@@ -42,5 +42,5 @@ For VSCode users, you can set the formatter to `ESLint` in the [**settings.json*
2. **npm version 8.11.0**
:::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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.14.0/data-sources/custom-js.md b/docs/versioned_docs/version-2.14.0/data-sources/custom-js.md
index e9064bffef..c9ac19e0ba 100644
--- a/docs/versioned_docs/version-2.14.0/data-sources/custom-js.md
+++ b/docs/versioned_docs/version-2.14.0/data-sources/custom-js.md
@@ -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.
-4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using **{{queries.tooljetdb1.data}}**. The table will be auto-populated once the table data is entered.
+4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using `{{queries.tooljetdb1.data}}`. The table will be auto-populated once the table data is entered.
diff --git a/docs/versioned_docs/version-2.14.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.14.0/how-to/serverside-pagination.md
index ed6536c270..5d6e2fcb5a 100644
--- a/docs/versioned_docs/version-2.14.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.14.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
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 datasources 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.
diff --git a/docs/versioned_docs/version-2.14.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.14.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.14.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.14.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.14.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.14.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.14.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.14.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
-- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter **{{queries.queryname.data}}** where queryname is the name of the query that we created in previous step.
+- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter `{{queries.queryname.data}}` where queryname is the name of the query that we created in previous step.
diff --git a/docs/versioned_docs/version-2.14.0/marketplace/plugins/textract.md b/docs/versioned_docs/version-2.14.0/marketplace/plugins/textract.md
index e3d616156b..4a9e4f6d99 100644
--- a/docs/versioned_docs/version-2.14.0/marketplace/plugins/textract.md
+++ b/docs/versioned_docs/version-2.14.0/marketplace/plugins/textract.md
@@ -49,7 +49,7 @@ This operation let's you to analyze the document by providing the document data
#### Required parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
+- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: `{{components.filepicker1.file[0].base64Data}}`
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
diff --git a/docs/versioned_docs/version-2.14.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.14.0/setup/try-tooljet.md
index 59c9108cf2..6fc5128f65 100644
--- a/docs/versioned_docs/version-2.14.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.14.0/setup/try-tooljet.md
@@ -27,15 +27,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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.14.0/widgets/calendar.md b/docs/versioned_docs/version-2.14.0/widgets/calendar.md
index fcc162b9d6..2d0549a697 100644
--- a/docs/versioned_docs/version-2.14.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.14.0/widgets/calendar.md
@@ -211,7 +211,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.14.0/widgets/number-input.md b/docs/versioned_docs/version-2.14.0/widgets/number-input.md
index 215790f6af..e7232c3d90 100644
--- a/docs/versioned_docs/version-2.14.0/widgets/number-input.md
+++ b/docs/versioned_docs/version-2.14.0/widgets/number-input.md
@@ -44,7 +44,7 @@ The loading state can be enabled to show a spinner as the content of the number
This property determines the number of decimal places displayed in the number input component. It allows you to specify the level of precision for decimal values.
-For example, if you set the decimal places to **{{2}}**, any decimal value entered or displayed in the number input will be rounded to two decimal places. This ensures consistent formatting and helps users input and visualize decimal values accurately. It can be set to **{{0}}** for whole numbers or increased to display more precise decimal values.
+For example, if you set the decimal places to `{{2}}`, any decimal value entered or displayed in the number input will be rounded to two decimal places. This ensures consistent formatting and helps users input and visualize decimal values accurately. It can be set to `{{0}}` for whole numbers or increased to display more precise decimal values.
## Events
diff --git a/docs/versioned_docs/version-2.14.0/widgets/pdf.md b/docs/versioned_docs/version-2.14.0/widgets/pdf.md
index 8dbc206c17..90f3bf99df 100644
--- a/docs/versioned_docs/version-2.14.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.14.0/widgets/pdf.md
@@ -5,12 +5,27 @@ title: PDF
# PDF
-PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
+The PDF component can be used to embed PDF files either by URL or through Base64 code.
+
+## Compatibility
+
+The PDF component is compatible with the following browser versions:
+
+| Browser | Version |
+|:--------|:--------------------|
+| Chrome | 92 or later |
+| Edge | 92 or later |
+| Safari | 15.4 or later |
+| Firefox | 90 or later |
+
+
+If the PDF component is integrated into your application, it will only render in supported browsers.
:::info
Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
+
## Properties
### File URL
diff --git a/docs/versioned_docs/version-2.14.0/widgets/table.md b/docs/versioned_docs/version-2.14.0/widgets/table.md
index 69c638c298..389f38f477 100644
--- a/docs/versioned_docs/version-2.14.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.14.0/widgets/table.md
@@ -524,19 +524,19 @@ If server-side search is enabled, `on search` event is fired after the content o
### 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.
### Show filter 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.
+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.
### 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 update buttons
diff --git a/docs/versioned_docs/version-2.15.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.15.0/contributing-guide/setup/macos.md
index e2c62ffd95..3d3f2e2bac 100644
--- a/docs/versioned_docs/version-2.15.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.15.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
+
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.15.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.15.0/contributing-guide/troubleshooting/eslint.md
index efb8d897fe..d0e352a565 100644
--- a/docs/versioned_docs/version-2.15.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.15.0/contributing-guide/troubleshooting/eslint.md
@@ -42,5 +42,5 @@ For VSCode users, you can set the formatter to `ESLint` in the [**settings.json*
2. **npm version 8.11.0**
:::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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.15.0/data-sources/custom-js.md b/docs/versioned_docs/version-2.15.0/data-sources/custom-js.md
index e9064bffef..c9ac19e0ba 100644
--- a/docs/versioned_docs/version-2.15.0/data-sources/custom-js.md
+++ b/docs/versioned_docs/version-2.15.0/data-sources/custom-js.md
@@ -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.
-4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using **{{queries.tooljetdb1.data}}**. The table will be auto-populated once the table data is entered.
+4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using `{{queries.tooljetdb1.data}}`. The table will be auto-populated once the table data is entered.
diff --git a/docs/versioned_docs/version-2.15.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.15.0/how-to/serverside-pagination.md
index ed6536c270..5d6e2fcb5a 100644
--- a/docs/versioned_docs/version-2.15.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.15.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
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 datasources 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.
diff --git a/docs/versioned_docs/version-2.15.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.15.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.15.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.15.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.15.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.15.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.15.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.15.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
-- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter **{{queries.queryname.data}}** where queryname is the name of the query that we created in previous step.
+- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter `{{queries.queryname.data}}` where queryname is the name of the query that we created in previous step.
diff --git a/docs/versioned_docs/version-2.15.0/marketplace/plugins/textract.md b/docs/versioned_docs/version-2.15.0/marketplace/plugins/textract.md
index e3d616156b..4a9e4f6d99 100644
--- a/docs/versioned_docs/version-2.15.0/marketplace/plugins/textract.md
+++ b/docs/versioned_docs/version-2.15.0/marketplace/plugins/textract.md
@@ -49,7 +49,7 @@ This operation let's you to analyze the document by providing the document data
#### Required parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
+- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: `{{components.filepicker1.file[0].base64Data}}`
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
diff --git a/docs/versioned_docs/version-2.15.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.15.0/setup/try-tooljet.md
index 59c9108cf2..6fc5128f65 100644
--- a/docs/versioned_docs/version-2.15.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.15.0/setup/try-tooljet.md
@@ -27,15 +27,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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.15.0/widgets/calendar.md b/docs/versioned_docs/version-2.15.0/widgets/calendar.md
index fcc162b9d6..2d0549a697 100644
--- a/docs/versioned_docs/version-2.15.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.15.0/widgets/calendar.md
@@ -211,7 +211,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.15.0/widgets/form.md b/docs/versioned_docs/version-2.15.0/widgets/form.md
index e78510b19d..9227cdf2f1 100644
--- a/docs/versioned_docs/version-2.15.0/widgets/form.md
+++ b/docs/versioned_docs/version-2.15.0/widgets/form.md
@@ -321,7 +321,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: ''
@@ -339,7 +339,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 `' '` |
diff --git a/docs/versioned_docs/version-2.15.0/widgets/number-input.md b/docs/versioned_docs/version-2.15.0/widgets/number-input.md
index 215790f6af..e7232c3d90 100644
--- a/docs/versioned_docs/version-2.15.0/widgets/number-input.md
+++ b/docs/versioned_docs/version-2.15.0/widgets/number-input.md
@@ -44,7 +44,7 @@ The loading state can be enabled to show a spinner as the content of the number
This property determines the number of decimal places displayed in the number input component. It allows you to specify the level of precision for decimal values.
-For example, if you set the decimal places to **{{2}}**, any decimal value entered or displayed in the number input will be rounded to two decimal places. This ensures consistent formatting and helps users input and visualize decimal values accurately. It can be set to **{{0}}** for whole numbers or increased to display more precise decimal values.
+For example, if you set the decimal places to `{{2}}`, any decimal value entered or displayed in the number input will be rounded to two decimal places. This ensures consistent formatting and helps users input and visualize decimal values accurately. It can be set to `{{0}}` for whole numbers or increased to display more precise decimal values.
## Events
diff --git a/docs/versioned_docs/version-2.15.0/widgets/pdf.md b/docs/versioned_docs/version-2.15.0/widgets/pdf.md
index 8dbc206c17..90f3bf99df 100644
--- a/docs/versioned_docs/version-2.15.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.15.0/widgets/pdf.md
@@ -5,12 +5,27 @@ title: PDF
# PDF
-PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
+The PDF component can be used to embed PDF files either by URL or through Base64 code.
+
+## Compatibility
+
+The PDF component is compatible with the following browser versions:
+
+| Browser | Version |
+|:--------|:--------------------|
+| Chrome | 92 or later |
+| Edge | 92 or later |
+| Safari | 15.4 or later |
+| Firefox | 90 or later |
+
+
+If the PDF component is integrated into your application, it will only render in supported browsers.
:::info
Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
+
## Properties
### File URL
diff --git a/docs/versioned_docs/version-2.15.0/widgets/table.md b/docs/versioned_docs/version-2.15.0/widgets/table.md
index ba79c8a17f..9adc54d187 100644
--- a/docs/versioned_docs/version-2.15.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.15.0/widgets/table.md
@@ -523,19 +523,19 @@ If server-side search is enabled, `on search` event is fired after the content o
### 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.
### Show filter 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.
+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.
### 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 update buttons
diff --git a/docs/versioned_docs/version-2.16.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.16.0/contributing-guide/setup/macos.md
index e2c62ffd95..3d3f2e2bac 100644
--- a/docs/versioned_docs/version-2.16.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.16.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
+
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.16.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.16.0/contributing-guide/troubleshooting/eslint.md
index efb8d897fe..d0e352a565 100644
--- a/docs/versioned_docs/version-2.16.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.16.0/contributing-guide/troubleshooting/eslint.md
@@ -42,5 +42,5 @@ For VSCode users, you can set the formatter to `ESLint` in the [**settings.json*
2. **npm version 8.11.0**
:::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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.16.0/data-sources/custom-js.md b/docs/versioned_docs/version-2.16.0/data-sources/custom-js.md
index e9064bffef..c9ac19e0ba 100644
--- a/docs/versioned_docs/version-2.16.0/data-sources/custom-js.md
+++ b/docs/versioned_docs/version-2.16.0/data-sources/custom-js.md
@@ -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.
-4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using **{{queries.tooljetdb1.data}}**. The table will be auto-populated once the table data is entered.
+4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using `{{queries.tooljetdb1.data}}`. The table will be auto-populated once the table data is entered.
diff --git a/docs/versioned_docs/version-2.16.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.16.0/how-to/serverside-pagination.md
index ed6536c270..5d6e2fcb5a 100644
--- a/docs/versioned_docs/version-2.16.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.16.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
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 datasources 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.
diff --git a/docs/versioned_docs/version-2.16.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.16.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.16.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.16.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.16.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.16.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.16.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.16.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
-- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter **{{queries.queryname.data}}** where queryname is the name of the query that we created in previous step.
+- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter `{{queries.queryname.data}}` where queryname is the name of the query that we created in previous step.
diff --git a/docs/versioned_docs/version-2.16.0/marketplace/plugins/textract.md b/docs/versioned_docs/version-2.16.0/marketplace/plugins/textract.md
index e3d616156b..4a9e4f6d99 100644
--- a/docs/versioned_docs/version-2.16.0/marketplace/plugins/textract.md
+++ b/docs/versioned_docs/version-2.16.0/marketplace/plugins/textract.md
@@ -49,7 +49,7 @@ This operation let's you to analyze the document by providing the document data
#### Required parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
+- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: `{{components.filepicker1.file[0].base64Data}}`
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
diff --git a/docs/versioned_docs/version-2.16.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.16.0/setup/try-tooljet.md
index 59c9108cf2..6fc5128f65 100644
--- a/docs/versioned_docs/version-2.16.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.16.0/setup/try-tooljet.md
@@ -27,15 +27,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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.16.0/widgets/calendar.md b/docs/versioned_docs/version-2.16.0/widgets/calendar.md
index fcc162b9d6..2d0549a697 100644
--- a/docs/versioned_docs/version-2.16.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.16.0/widgets/calendar.md
@@ -211,7 +211,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.16.0/widgets/form.md b/docs/versioned_docs/version-2.16.0/widgets/form.md
index e78510b19d..9227cdf2f1 100644
--- a/docs/versioned_docs/version-2.16.0/widgets/form.md
+++ b/docs/versioned_docs/version-2.16.0/widgets/form.md
@@ -321,7 +321,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: ''
@@ -339,7 +339,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 `' '` |
diff --git a/docs/versioned_docs/version-2.16.0/widgets/number-input.md b/docs/versioned_docs/version-2.16.0/widgets/number-input.md
index 215790f6af..e7232c3d90 100644
--- a/docs/versioned_docs/version-2.16.0/widgets/number-input.md
+++ b/docs/versioned_docs/version-2.16.0/widgets/number-input.md
@@ -44,7 +44,7 @@ The loading state can be enabled to show a spinner as the content of the number
This property determines the number of decimal places displayed in the number input component. It allows you to specify the level of precision for decimal values.
-For example, if you set the decimal places to **{{2}}**, any decimal value entered or displayed in the number input will be rounded to two decimal places. This ensures consistent formatting and helps users input and visualize decimal values accurately. It can be set to **{{0}}** for whole numbers or increased to display more precise decimal values.
+For example, if you set the decimal places to `{{2}}`, any decimal value entered or displayed in the number input will be rounded to two decimal places. This ensures consistent formatting and helps users input and visualize decimal values accurately. It can be set to `{{0}}` for whole numbers or increased to display more precise decimal values.
## Events
diff --git a/docs/versioned_docs/version-2.16.0/widgets/pdf.md b/docs/versioned_docs/version-2.16.0/widgets/pdf.md
index 8dbc206c17..90f3bf99df 100644
--- a/docs/versioned_docs/version-2.16.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.16.0/widgets/pdf.md
@@ -5,12 +5,27 @@ title: PDF
# PDF
-PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
+The PDF component can be used to embed PDF files either by URL or through Base64 code.
+
+## Compatibility
+
+The PDF component is compatible with the following browser versions:
+
+| Browser | Version |
+|:--------|:--------------------|
+| Chrome | 92 or later |
+| Edge | 92 or later |
+| Safari | 15.4 or later |
+| Firefox | 90 or later |
+
+
+If the PDF component is integrated into your application, it will only render in supported browsers.
:::info
Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
+
## Properties
### File URL
diff --git a/docs/versioned_docs/version-2.16.0/widgets/table.md b/docs/versioned_docs/version-2.16.0/widgets/table.md
index ba79c8a17f..9adc54d187 100644
--- a/docs/versioned_docs/version-2.16.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.16.0/widgets/table.md
@@ -523,19 +523,19 @@ If server-side search is enabled, `on search` event is fired after the content o
### 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.
### Show filter 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.
+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.
### 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 update buttons
diff --git a/docs/versioned_docs/version-2.17.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.17.0/contributing-guide/setup/macos.md
index e2c62ffd95..3d3f2e2bac 100644
--- a/docs/versioned_docs/version-2.17.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.17.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
+
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.17.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.17.0/contributing-guide/troubleshooting/eslint.md
index efb8d897fe..d0e352a565 100644
--- a/docs/versioned_docs/version-2.17.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.17.0/contributing-guide/troubleshooting/eslint.md
@@ -42,5 +42,5 @@ For VSCode users, you can set the formatter to `ESLint` in the [**settings.json*
2. **npm version 8.11.0**
:::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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.17.0/data-sources/custom-js.md b/docs/versioned_docs/version-2.17.0/data-sources/custom-js.md
index e9064bffef..c9ac19e0ba 100644
--- a/docs/versioned_docs/version-2.17.0/data-sources/custom-js.md
+++ b/docs/versioned_docs/version-2.17.0/data-sources/custom-js.md
@@ -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.
diff --git a/docs/versioned_docs/version-2.17.0/data-sources/stripe.md b/docs/versioned_docs/version-2.17.0/data-sources/stripe.md
index e6fa073e9c..77aa839750 100644
--- a/docs/versioned_docs/version-2.17.0/data-sources/stripe.md
+++ b/docs/versioned_docs/version-2.17.0/data-sources/stripe.md
@@ -50,67 +50,67 @@ 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**
diff --git a/docs/versioned_docs/version-2.17.0/getting-started.md b/docs/versioned_docs/version-2.17.0/getting-started.md
index a2bd4d505a..c8f312772b 100644
--- a/docs/versioned_docs/version-2.17.0/getting-started.md
+++ b/docs/versioned_docs/version-2.17.0/getting-started.md
@@ -19,18 +19,7 @@ Once the data sources are connected, ToolJet can run **queries** on these data s
-
## How ToolJet works
@@ -283,7 +272,7 @@ We are ready with the labels, let's place the input components next to the label
|:----------------|:-------------------|:-----------------|
| Text Input | taskNameInput | Development |
| Number Input | taskDurationInput | 1 |
-| Date Picker | taskDateInput | {{moment().format("DD/MM/YYYY")}}|
+| Date Picker | taskDateInput | `{{moment().format("DD/MM/YYYY")}}`|
| Textarea | taskDescriptionInput| Creating a modal component |
@@ -306,11 +295,11 @@ Rename the query to *addLog*, select **Create row** as Operations and use the be
| Column Name | Keys |
| :-------------- | :------------------------ |
-| employee | {{globals.currentUser.email}} |
-| taskname | {{components.taskNameInput.value}} |
-| duration | {{components.taskDurationInput.value}} |
-| dateoftask | {{components.taskDateInput.value}} |
-| taskdescription | {{components.taskDescriptionInput.value}} |
+| employee | `{{globals.currentUser.email}}` |
+| taskname | `{{components.taskNameInput.value}}` |
+| duration | `{{components.taskDurationInput.value}}` |
+| dateoftask | `{{components.taskDateInput.value}}` |
+| taskdescription | `{{components.taskDescriptionInput.value}}` |
diff --git a/docs/versioned_docs/version-2.17.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.17.0/how-to/serverside-pagination.md
index ed6536c270..5d6e2fcb5a 100644
--- a/docs/versioned_docs/version-2.17.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.17.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
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 datasources 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.
diff --git a/docs/versioned_docs/version-2.17.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.17.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.17.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.17.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.17.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.17.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.17.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.17.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
-- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter **{{queries.queryname.data}}** where queryname is the name of the query that we created in previous step.
+- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter `{{queries.queryname.data}}` where queryname is the name of the query that we created in previous step.
diff --git a/docs/versioned_docs/version-2.17.0/marketplace/plugins/textract.md b/docs/versioned_docs/version-2.17.0/marketplace/plugins/textract.md
index e3d616156b..4a9e4f6d99 100644
--- a/docs/versioned_docs/version-2.17.0/marketplace/plugins/textract.md
+++ b/docs/versioned_docs/version-2.17.0/marketplace/plugins/textract.md
@@ -49,7 +49,7 @@ This operation let's you to analyze the document by providing the document data
#### Required parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
+- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: `{{components.filepicker1.file[0].base64Data}}`
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
diff --git a/docs/versioned_docs/version-2.17.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.17.0/setup/try-tooljet.md
index 59c9108cf2..6fc5128f65 100644
--- a/docs/versioned_docs/version-2.17.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.17.0/setup/try-tooljet.md
@@ -27,15 +27,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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.17.0/widgets/bounded-box.md b/docs/versioned_docs/version-2.17.0/widgets/bounded-box.md
index 4e32edcc8e..a472dffd4f 100644
--- a/docs/versioned_docs/version-2.17.0/widgets/bounded-box.md
+++ b/docs/versioned_docs/version-2.17.0/widgets/bounded-box.md
@@ -25,7 +25,7 @@ A **bounded box** is an infinitely customizable image annotation component that
| **Property** | **Description** | **Expected value** |
| :----------- | :----------- | :----------------- |
-| **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']}}` |
diff --git a/docs/versioned_docs/version-2.17.0/widgets/button.md b/docs/versioned_docs/version-2.17.0/widgets/button.md
index b0b43280a5..b8d5f1c2bd 100644
--- a/docs/versioned_docs/version-2.17.0/widgets/button.md
+++ b/docs/versioned_docs/version-2.17.0/widgets/button.md
@@ -13,7 +13,7 @@ Button component can be used to trigger an action. It can be used to submit a fo
| Property | Description | Expected value |
| :----------- | :----------- | :----------- |
| **Button Text** | It can be used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}` |
-| **Loading state** | The loading state can be 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 can be 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}}` |
## Events
diff --git a/docs/versioned_docs/version-2.17.0/widgets/calendar.md b/docs/versioned_docs/version-2.17.0/widgets/calendar.md
index fcc162b9d6..2d0549a697 100644
--- a/docs/versioned_docs/version-2.17.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.17.0/widgets/calendar.md
@@ -211,7 +211,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.17.0/widgets/form.md b/docs/versioned_docs/version-2.17.0/widgets/form.md
index e78510b19d..9227cdf2f1 100644
--- a/docs/versioned_docs/version-2.17.0/widgets/form.md
+++ b/docs/versioned_docs/version-2.17.0/widgets/form.md
@@ -321,7 +321,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: ''
@@ -339,7 +339,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 `' '` |
diff --git a/docs/versioned_docs/version-2.17.0/widgets/pdf.md b/docs/versioned_docs/version-2.17.0/widgets/pdf.md
index 8dbc206c17..90f3bf99df 100644
--- a/docs/versioned_docs/version-2.17.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.17.0/widgets/pdf.md
@@ -5,12 +5,27 @@ title: PDF
# PDF
-PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
+The PDF component can be used to embed PDF files either by URL or through Base64 code.
+
+## Compatibility
+
+The PDF component is compatible with the following browser versions:
+
+| Browser | Version |
+|:--------|:--------------------|
+| Chrome | 92 or later |
+| Edge | 92 or later |
+| Safari | 15.4 or later |
+| Firefox | 90 or later |
+
+
+If the PDF component is integrated into your application, it will only render in supported browsers.
:::info
Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
+
## Properties
### File URL
diff --git a/docs/versioned_docs/version-2.17.0/widgets/table.md b/docs/versioned_docs/version-2.17.0/widgets/table.md
index b421970811..0d258d8be1 100644
--- a/docs/versioned_docs/version-2.17.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.17.0/widgets/table.md
@@ -660,7 +660,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.
@@ -701,15 +701,15 @@ Check this how-to guide to learn more about [server-side pagination](/docs/how-t
### 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)
diff --git a/docs/versioned_docs/version-2.17.0/widgets/text.md b/docs/versioned_docs/version-2.17.0/widgets/text.md
index 1d32def6bf..e7d2ea86ee 100644
--- a/docs/versioned_docs/version-2.17.0/widgets/text.md
+++ b/docs/versioned_docs/version-2.17.0/widgets/text.md
@@ -58,7 +58,7 @@ Use this toggle to show or hide the component in the mobile view. You can dynami
| Background Color | Sets the background color of the component. | Hex color code/choose a color using the color picker |
| Text Color | Sets the color of the text. |Hex color code/choose a color using the color picker |
| Align Text | Sets the alignment of the text. | left, right, center, justified |
-| Visibility | Controls the visibility of the component. If set to {{false}}, the component will not be visible after the app is deployed. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
+| Visibility | Controls the visibility of the component. If set to `{{false}}`, the component will not be visible after the app is deployed. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
| Disable | Makes the component non-functional when set to true. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
## General
diff --git a/docs/versioned_docs/version-2.18.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.18.0/contributing-guide/setup/macos.md
index e2c62ffd95..3d3f2e2bac 100644
--- a/docs/versioned_docs/version-2.18.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.18.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
+
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.18.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.18.0/contributing-guide/troubleshooting/eslint.md
index efb8d897fe..d0e352a565 100644
--- a/docs/versioned_docs/version-2.18.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.18.0/contributing-guide/troubleshooting/eslint.md
@@ -42,5 +42,5 @@ For VSCode users, you can set the formatter to `ESLint` in the [**settings.json*
2. **npm version 8.11.0**
:::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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.18.0/data-sources/custom-js.md b/docs/versioned_docs/version-2.18.0/data-sources/custom-js.md
index e9064bffef..c9ac19e0ba 100644
--- a/docs/versioned_docs/version-2.18.0/data-sources/custom-js.md
+++ b/docs/versioned_docs/version-2.18.0/data-sources/custom-js.md
@@ -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.
diff --git a/docs/versioned_docs/version-2.18.0/data-sources/stripe.md b/docs/versioned_docs/version-2.18.0/data-sources/stripe.md
index e6fa073e9c..77aa839750 100644
--- a/docs/versioned_docs/version-2.18.0/data-sources/stripe.md
+++ b/docs/versioned_docs/version-2.18.0/data-sources/stripe.md
@@ -50,67 +50,67 @@ 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**
diff --git a/docs/versioned_docs/version-2.18.0/getting-started.md b/docs/versioned_docs/version-2.18.0/getting-started.md
index c85358fe5a..7411b74fa5 100644
--- a/docs/versioned_docs/version-2.18.0/getting-started.md
+++ b/docs/versioned_docs/version-2.18.0/getting-started.md
@@ -19,18 +19,7 @@ Once the data sources are connected, ToolJet can run **queries** on these data s
-
## How ToolJet works
@@ -283,7 +272,7 @@ We are ready with the labels, let's place the input components next to the label
|:----------------|:-------------------|:-----------------|
| Text Input | taskNameInput | Development |
| Number Input | taskDurationInput | 1 |
-| Date Picker | taskDateInput | {{moment().format("DD/MM/YYYY")}}|
+| Date Picker | taskDateInput | `{{moment().format("DD/MM/YYYY")}}`|
| Textarea | taskDescriptionInput| Creating a modal component |
@@ -306,11 +295,11 @@ Rename the query to *addLog*, select **Create row** as Operations and use the be
| Column Name | Keys |
| :-------------- | :------------------------ |
-| employee | {{globals.currentUser.email}} |
-| taskname | {{components.taskNameInput.value}} |
-| duration | {{components.taskDurationInput.value}} |
-| dateoftask | {{components.taskDateInput.value}} |
-| taskdescription | {{components.taskDescriptionInput.value}} |
+| employee | `{{globals.currentUser.email}}` |
+| taskname | `{{components.taskNameInput.value}}` |
+| duration | `{{components.taskDurationInput.value}}` |
+| dateoftask | `{{components.taskDateInput.value}}` |
+| taskdescription | `{{components.taskDescriptionInput.value}}` |
diff --git a/docs/versioned_docs/version-2.18.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.18.0/how-to/serverside-pagination.md
index ed6536c270..5d6e2fcb5a 100644
--- a/docs/versioned_docs/version-2.18.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.18.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
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 datasources 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.
diff --git a/docs/versioned_docs/version-2.18.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.18.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.18.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.18.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.18.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.18.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.18.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.18.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
-- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter **{{queries.queryname.data}}** where queryname is the name of the query that we created in previous step.
+- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter `{{queries.queryname.data}}` where queryname is the name of the query that we created in previous step.
diff --git a/docs/versioned_docs/version-2.18.0/marketplace/plugins/textract.md b/docs/versioned_docs/version-2.18.0/marketplace/plugins/textract.md
index e3d616156b..4a9e4f6d99 100644
--- a/docs/versioned_docs/version-2.18.0/marketplace/plugins/textract.md
+++ b/docs/versioned_docs/version-2.18.0/marketplace/plugins/textract.md
@@ -49,7 +49,7 @@ This operation let's you to analyze the document by providing the document data
#### Required parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
+- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: `{{components.filepicker1.file[0].base64Data}}`
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
diff --git a/docs/versioned_docs/version-2.18.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.18.0/setup/try-tooljet.md
index 59c9108cf2..6fc5128f65 100644
--- a/docs/versioned_docs/version-2.18.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.18.0/setup/try-tooljet.md
@@ -27,15 +27,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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.18.0/widgets/bounded-box.md b/docs/versioned_docs/version-2.18.0/widgets/bounded-box.md
index 4e32edcc8e..a472dffd4f 100644
--- a/docs/versioned_docs/version-2.18.0/widgets/bounded-box.md
+++ b/docs/versioned_docs/version-2.18.0/widgets/bounded-box.md
@@ -25,7 +25,7 @@ A **bounded box** is an infinitely customizable image annotation component that
| **Property** | **Description** | **Expected value** |
| :----------- | :----------- | :----------------- |
-| **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']}}` |
diff --git a/docs/versioned_docs/version-2.18.0/widgets/button.md b/docs/versioned_docs/version-2.18.0/widgets/button.md
index b0b43280a5..b8d5f1c2bd 100644
--- a/docs/versioned_docs/version-2.18.0/widgets/button.md
+++ b/docs/versioned_docs/version-2.18.0/widgets/button.md
@@ -13,7 +13,7 @@ Button component can be used to trigger an action. It can be used to submit a fo
| Property | Description | Expected value |
| :----------- | :----------- | :----------- |
| **Button Text** | It can be used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}` |
-| **Loading state** | The loading state can be 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 can be 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}}` |
## Events
diff --git a/docs/versioned_docs/version-2.18.0/widgets/calendar.md b/docs/versioned_docs/version-2.18.0/widgets/calendar.md
index fcc162b9d6..2d0549a697 100644
--- a/docs/versioned_docs/version-2.18.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.18.0/widgets/calendar.md
@@ -211,7 +211,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.18.0/widgets/form.md b/docs/versioned_docs/version-2.18.0/widgets/form.md
index e78510b19d..9227cdf2f1 100644
--- a/docs/versioned_docs/version-2.18.0/widgets/form.md
+++ b/docs/versioned_docs/version-2.18.0/widgets/form.md
@@ -321,7 +321,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: ''
@@ -339,7 +339,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 `' '` |
diff --git a/docs/versioned_docs/version-2.18.0/widgets/pdf.md b/docs/versioned_docs/version-2.18.0/widgets/pdf.md
index 8dbc206c17..90f3bf99df 100644
--- a/docs/versioned_docs/version-2.18.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.18.0/widgets/pdf.md
@@ -5,12 +5,27 @@ title: PDF
# PDF
-PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
+The PDF component can be used to embed PDF files either by URL or through Base64 code.
+
+## Compatibility
+
+The PDF component is compatible with the following browser versions:
+
+| Browser | Version |
+|:--------|:--------------------|
+| Chrome | 92 or later |
+| Edge | 92 or later |
+| Safari | 15.4 or later |
+| Firefox | 90 or later |
+
+
+If the PDF component is integrated into your application, it will only render in supported browsers.
:::info
Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
+
## Properties
### File URL
diff --git a/docs/versioned_docs/version-2.18.0/widgets/table.md b/docs/versioned_docs/version-2.18.0/widgets/table.md
index b421970811..0d258d8be1 100644
--- a/docs/versioned_docs/version-2.18.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.18.0/widgets/table.md
@@ -660,7 +660,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.
@@ -701,15 +701,15 @@ Check this how-to guide to learn more about [server-side pagination](/docs/how-t
### 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)
diff --git a/docs/versioned_docs/version-2.18.0/widgets/text.md b/docs/versioned_docs/version-2.18.0/widgets/text.md
index 1d32def6bf..e7d2ea86ee 100644
--- a/docs/versioned_docs/version-2.18.0/widgets/text.md
+++ b/docs/versioned_docs/version-2.18.0/widgets/text.md
@@ -58,7 +58,7 @@ Use this toggle to show or hide the component in the mobile view. You can dynami
| Background Color | Sets the background color of the component. | Hex color code/choose a color using the color picker |
| Text Color | Sets the color of the text. |Hex color code/choose a color using the color picker |
| Align Text | Sets the alignment of the text. | left, right, center, justified |
-| Visibility | Controls the visibility of the component. If set to {{false}}, the component will not be visible after the app is deployed. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
+| Visibility | Controls the visibility of the component. If set to `{{false}}`, the component will not be visible after the app is deployed. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
| Disable | Makes the component non-functional when set to true. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
## General
diff --git a/docs/versioned_docs/version-2.19.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.19.0/contributing-guide/setup/macos.md
index e2c62ffd95..3d3f2e2bac 100644
--- a/docs/versioned_docs/version-2.19.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.19.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
+
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.19.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.19.0/contributing-guide/troubleshooting/eslint.md
index efb8d897fe..d0e352a565 100644
--- a/docs/versioned_docs/version-2.19.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.19.0/contributing-guide/troubleshooting/eslint.md
@@ -42,5 +42,5 @@ For VSCode users, you can set the formatter to `ESLint` in the [**settings.json*
2. **npm version 8.11.0**
:::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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.19.0/data-sources/custom-js.md b/docs/versioned_docs/version-2.19.0/data-sources/custom-js.md
index e9064bffef..c9ac19e0ba 100644
--- a/docs/versioned_docs/version-2.19.0/data-sources/custom-js.md
+++ b/docs/versioned_docs/version-2.19.0/data-sources/custom-js.md
@@ -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.
diff --git a/docs/versioned_docs/version-2.19.0/data-sources/stripe.md b/docs/versioned_docs/version-2.19.0/data-sources/stripe.md
index e6fa073e9c..77aa839750 100644
--- a/docs/versioned_docs/version-2.19.0/data-sources/stripe.md
+++ b/docs/versioned_docs/version-2.19.0/data-sources/stripe.md
@@ -50,67 +50,67 @@ 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**
diff --git a/docs/versioned_docs/version-2.19.0/getting-started.md b/docs/versioned_docs/version-2.19.0/getting-started.md
index d09c59b643..fca2ac9042 100644
--- a/docs/versioned_docs/version-2.19.0/getting-started.md
+++ b/docs/versioned_docs/version-2.19.0/getting-started.md
@@ -19,18 +19,7 @@ Once the data sources are connected, ToolJet can run **queries** on these data s
-
## How ToolJet works
@@ -283,7 +272,7 @@ We are ready with the labels, let's place the input components next to the label
|:----------------|:-------------------|:-----------------|
| Text Input | taskNameInput | Development |
| Number Input | taskDurationInput | 1 |
-| Date Picker | taskDateInput | {{moment().format("DD/MM/YYYY")}}|
+| Date Picker | taskDateInput | `{{moment().format("DD/MM/YYYY")}}`|
| Textarea | taskDescriptionInput| Creating a modal component |
@@ -306,11 +295,11 @@ Rename the query to *addLog*, select **Create row** as Operations and use the be
| Column Name | Keys |
| :-------------- | :------------------------ |
-| employee | {{globals.currentUser.email}} |
-| taskname | {{components.taskNameInput.value}} |
-| duration | {{components.taskDurationInput.value}} |
-| dateoftask | {{components.taskDateInput.value}} |
-| taskdescription | {{components.taskDescriptionInput.value}} |
+| employee | `{{globals.currentUser.email}}` |
+| taskname | `{{components.taskNameInput.value}}` |
+| duration | `{{components.taskDurationInput.value}}` |
+| dateoftask | `{{components.taskDateInput.value}}` |
+| taskdescription | `{{components.taskDescriptionInput.value}}` |
diff --git a/docs/versioned_docs/version-2.19.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.19.0/how-to/serverside-pagination.md
index ed6536c270..5d6e2fcb5a 100644
--- a/docs/versioned_docs/version-2.19.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.19.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
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 datasources 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.
diff --git a/docs/versioned_docs/version-2.19.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.19.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.19.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.19.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.19.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.19.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.19.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.19.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
-- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter **{{queries.queryname.data}}** where queryname is the name of the query that we created in previous step.
+- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter `{{queries.queryname.data}}` where queryname is the name of the query that we created in previous step.
diff --git a/docs/versioned_docs/version-2.19.0/marketplace/plugins/textract.md b/docs/versioned_docs/version-2.19.0/marketplace/plugins/textract.md
index e3d616156b..4a9e4f6d99 100644
--- a/docs/versioned_docs/version-2.19.0/marketplace/plugins/textract.md
+++ b/docs/versioned_docs/version-2.19.0/marketplace/plugins/textract.md
@@ -49,7 +49,7 @@ This operation let's you to analyze the document by providing the document data
#### Required parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
+- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: `{{components.filepicker1.file[0].base64Data}}`
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
diff --git a/docs/versioned_docs/version-2.19.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.19.0/setup/try-tooljet.md
index 59c9108cf2..6fc5128f65 100644
--- a/docs/versioned_docs/version-2.19.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.19.0/setup/try-tooljet.md
@@ -27,15 +27,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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.19.0/widgets/bounded-box.md b/docs/versioned_docs/version-2.19.0/widgets/bounded-box.md
index 4e32edcc8e..a472dffd4f 100644
--- a/docs/versioned_docs/version-2.19.0/widgets/bounded-box.md
+++ b/docs/versioned_docs/version-2.19.0/widgets/bounded-box.md
@@ -25,7 +25,7 @@ A **bounded box** is an infinitely customizable image annotation component that
| **Property** | **Description** | **Expected value** |
| :----------- | :----------- | :----------------- |
-| **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']}}` |
diff --git a/docs/versioned_docs/version-2.19.0/widgets/button.md b/docs/versioned_docs/version-2.19.0/widgets/button.md
index b0b43280a5..b8d5f1c2bd 100644
--- a/docs/versioned_docs/version-2.19.0/widgets/button.md
+++ b/docs/versioned_docs/version-2.19.0/widgets/button.md
@@ -13,7 +13,7 @@ Button component can be used to trigger an action. It can be used to submit a fo
| Property | Description | Expected value |
| :----------- | :----------- | :----------- |
| **Button Text** | It can be used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}` |
-| **Loading state** | The loading state can be 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 can be 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}}` |
## Events
diff --git a/docs/versioned_docs/version-2.19.0/widgets/calendar.md b/docs/versioned_docs/version-2.19.0/widgets/calendar.md
index fcc162b9d6..2d0549a697 100644
--- a/docs/versioned_docs/version-2.19.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.19.0/widgets/calendar.md
@@ -211,7 +211,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.19.0/widgets/form.md b/docs/versioned_docs/version-2.19.0/widgets/form.md
index e78510b19d..9227cdf2f1 100644
--- a/docs/versioned_docs/version-2.19.0/widgets/form.md
+++ b/docs/versioned_docs/version-2.19.0/widgets/form.md
@@ -321,7 +321,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: ''
@@ -339,7 +339,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 `' '` |
diff --git a/docs/versioned_docs/version-2.19.0/widgets/pdf.md b/docs/versioned_docs/version-2.19.0/widgets/pdf.md
index 8dbc206c17..90f3bf99df 100644
--- a/docs/versioned_docs/version-2.19.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.19.0/widgets/pdf.md
@@ -5,12 +5,27 @@ title: PDF
# PDF
-PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
+The PDF component can be used to embed PDF files either by URL or through Base64 code.
+
+## Compatibility
+
+The PDF component is compatible with the following browser versions:
+
+| Browser | Version |
+|:--------|:--------------------|
+| Chrome | 92 or later |
+| Edge | 92 or later |
+| Safari | 15.4 or later |
+| Firefox | 90 or later |
+
+
+If the PDF component is integrated into your application, it will only render in supported browsers.
:::info
Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
+
## Properties
### File URL
diff --git a/docs/versioned_docs/version-2.19.0/widgets/table.md b/docs/versioned_docs/version-2.19.0/widgets/table.md
index b421970811..0d258d8be1 100644
--- a/docs/versioned_docs/version-2.19.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.19.0/widgets/table.md
@@ -660,7 +660,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.
@@ -701,15 +701,15 @@ Check this how-to guide to learn more about [server-side pagination](/docs/how-t
### 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)
diff --git a/docs/versioned_docs/version-2.19.0/widgets/text.md b/docs/versioned_docs/version-2.19.0/widgets/text.md
index 1d32def6bf..e7d2ea86ee 100644
--- a/docs/versioned_docs/version-2.19.0/widgets/text.md
+++ b/docs/versioned_docs/version-2.19.0/widgets/text.md
@@ -58,7 +58,7 @@ Use this toggle to show or hide the component in the mobile view. You can dynami
| Background Color | Sets the background color of the component. | Hex color code/choose a color using the color picker |
| Text Color | Sets the color of the text. |Hex color code/choose a color using the color picker |
| Align Text | Sets the alignment of the text. | left, right, center, justified |
-| Visibility | Controls the visibility of the component. If set to {{false}}, the component will not be visible after the app is deployed. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
+| Visibility | Controls the visibility of the component. If set to `{{false}}`, the component will not be visible after the app is deployed. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
| Disable | Makes the component non-functional when set to true. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
## General
diff --git a/docs/versioned_docs/version-2.2.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.2.0/contributing-guide/setup/macos.md
index 0a6c62219b..66fc30b08c 100644
--- a/docs/versioned_docs/version-2.2.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.2.0/contributing-guide/setup/macos.md
@@ -12,8 +12,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
+
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.2.0/data-sources/stripe.md b/docs/versioned_docs/version-2.2.0/data-sources/stripe.md
index e6fa073e9c..77aa839750 100644
--- a/docs/versioned_docs/version-2.2.0/data-sources/stripe.md
+++ b/docs/versioned_docs/version-2.2.0/data-sources/stripe.md
@@ -50,67 +50,67 @@ 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**
diff --git a/docs/versioned_docs/version-2.2.0/getting-started.md b/docs/versioned_docs/version-2.2.0/getting-started.md
index 779b192501..059f1f8a27 100644
--- a/docs/versioned_docs/version-2.2.0/getting-started.md
+++ b/docs/versioned_docs/version-2.2.0/getting-started.md
@@ -19,18 +19,7 @@ Once the data sources are connected, ToolJet can run **queries** on these data s
-
## How ToolJet works
@@ -168,7 +157,7 @@ ToolJet application's User interface is constructed using Components like Tables
-4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using **{{queries.tooljetdb1.data}}**. The table will be auto-populated once the table data is entered.
+4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using `{{queries.tooljetdb1.data}}`. The table will be auto-populated once the table data is entered.
diff --git a/docs/versioned_docs/version-2.2.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.2.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.2.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.2.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.2.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.2.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.2.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.2.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
-- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter **{{queries.queryname.data}}** where queryname is the name of the query that we created in previous step.
+- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter `{{queries.queryname.data}}` where queryname is the name of the query that we created in previous step.
diff --git a/docs/versioned_docs/version-2.2.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.2.0/setup/try-tooljet.md
index 59c9108cf2..6fc5128f65 100644
--- a/docs/versioned_docs/version-2.2.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.2.0/setup/try-tooljet.md
@@ -27,15 +27,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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.22.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.22.0/contributing-guide/setup/macos.md
index e2c62ffd95..3d3f2e2bac 100644
--- a/docs/versioned_docs/version-2.22.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.22.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
+
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.22.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.22.0/contributing-guide/troubleshooting/eslint.md
index efb8d897fe..d0e352a565 100644
--- a/docs/versioned_docs/version-2.22.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.22.0/contributing-guide/troubleshooting/eslint.md
@@ -42,5 +42,5 @@ For VSCode users, you can set the formatter to `ESLint` in the [**settings.json*
2. **npm version 8.11.0**
:::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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.22.0/data-sources/custom-js.md b/docs/versioned_docs/version-2.22.0/data-sources/custom-js.md
index e9064bffef..c9ac19e0ba 100644
--- a/docs/versioned_docs/version-2.22.0/data-sources/custom-js.md
+++ b/docs/versioned_docs/version-2.22.0/data-sources/custom-js.md
@@ -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.
diff --git a/docs/versioned_docs/version-2.22.0/data-sources/stripe.md b/docs/versioned_docs/version-2.22.0/data-sources/stripe.md
index e6fa073e9c..77aa839750 100644
--- a/docs/versioned_docs/version-2.22.0/data-sources/stripe.md
+++ b/docs/versioned_docs/version-2.22.0/data-sources/stripe.md
@@ -50,67 +50,67 @@ 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**
diff --git a/docs/versioned_docs/version-2.22.0/getting-started.md b/docs/versioned_docs/version-2.22.0/getting-started.md
index 6cec99d7b7..c7312694df 100644
--- a/docs/versioned_docs/version-2.22.0/getting-started.md
+++ b/docs/versioned_docs/version-2.22.0/getting-started.md
@@ -19,18 +19,7 @@ Once the data sources are connected, ToolJet can run **queries** on these data s
-
## How ToolJet works
@@ -283,7 +272,7 @@ We are ready with the labels, let's place the input components next to the label
|:----------------|:-------------------|:-----------------|
| Text Input | taskNameInput | Development |
| Number Input | taskDurationInput | 1 |
-| Date Picker | taskDateInput | {{moment().format("DD/MM/YYYY")}}|
+| Date Picker | taskDateInput | `{{moment().format("DD/MM/YYYY")}}`|
| Textarea | taskDescriptionInput| Creating a modal component |
@@ -306,11 +295,11 @@ Rename the query to *addLog*, select **Create row** as Operations and use the be
| Column Name | Keys |
| :-------------- | :------------------------ |
-| employee | {{globals.currentUser.email}} |
-| taskname | {{components.taskNameInput.value}} |
-| duration | {{components.taskDurationInput.value}} |
-| dateoftask | {{components.taskDateInput.value}} |
-| taskdescription | {{components.taskDescriptionInput.value}} |
+| employee | `{{globals.currentUser.email}}` |
+| taskname | `{{components.taskNameInput.value}}` |
+| duration | `{{components.taskDurationInput.value}}` |
+| dateoftask | `{{components.taskDateInput.value}}` |
+| taskdescription | `{{components.taskDescriptionInput.value}}` |
diff --git a/docs/versioned_docs/version-2.22.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.22.0/how-to/serverside-pagination.md
index ed6536c270..5d6e2fcb5a 100644
--- a/docs/versioned_docs/version-2.22.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.22.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
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 datasources 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.
diff --git a/docs/versioned_docs/version-2.22.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.22.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.22.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.22.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.22.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.22.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.22.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.22.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
-- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter **{{queries.queryname.data}}** where queryname is the name of the query that we created in previous step.
+- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter `{{queries.queryname.data}}` where queryname is the name of the query that we created in previous step.
diff --git a/docs/versioned_docs/version-2.22.0/marketplace/plugins/textract.md b/docs/versioned_docs/version-2.22.0/marketplace/plugins/textract.md
index e3d616156b..4a9e4f6d99 100644
--- a/docs/versioned_docs/version-2.22.0/marketplace/plugins/textract.md
+++ b/docs/versioned_docs/version-2.22.0/marketplace/plugins/textract.md
@@ -49,7 +49,7 @@ This operation let's you to analyze the document by providing the document data
#### Required parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
+- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: `{{components.filepicker1.file[0].base64Data}}`
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
diff --git a/docs/versioned_docs/version-2.22.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.22.0/setup/try-tooljet.md
index 59c9108cf2..6fc5128f65 100644
--- a/docs/versioned_docs/version-2.22.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.22.0/setup/try-tooljet.md
@@ -27,15 +27,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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.22.0/widgets/bounded-box.md b/docs/versioned_docs/version-2.22.0/widgets/bounded-box.md
index 4e32edcc8e..a472dffd4f 100644
--- a/docs/versioned_docs/version-2.22.0/widgets/bounded-box.md
+++ b/docs/versioned_docs/version-2.22.0/widgets/bounded-box.md
@@ -25,7 +25,7 @@ A **bounded box** is an infinitely customizable image annotation component that
| **Property** | **Description** | **Expected value** |
| :----------- | :----------- | :----------------- |
-| **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']}}` |
diff --git a/docs/versioned_docs/version-2.22.0/widgets/button.md b/docs/versioned_docs/version-2.22.0/widgets/button.md
index b0b43280a5..b8d5f1c2bd 100644
--- a/docs/versioned_docs/version-2.22.0/widgets/button.md
+++ b/docs/versioned_docs/version-2.22.0/widgets/button.md
@@ -13,7 +13,7 @@ Button component can be used to trigger an action. It can be used to submit a fo
| Property | Description | Expected value |
| :----------- | :----------- | :----------- |
| **Button Text** | It can be used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}` |
-| **Loading state** | The loading state can be 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 can be 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}}` |
## Events
diff --git a/docs/versioned_docs/version-2.22.0/widgets/calendar.md b/docs/versioned_docs/version-2.22.0/widgets/calendar.md
index fcc162b9d6..2d0549a697 100644
--- a/docs/versioned_docs/version-2.22.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.22.0/widgets/calendar.md
@@ -211,7 +211,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.22.0/widgets/form.md b/docs/versioned_docs/version-2.22.0/widgets/form.md
index e78510b19d..9227cdf2f1 100644
--- a/docs/versioned_docs/version-2.22.0/widgets/form.md
+++ b/docs/versioned_docs/version-2.22.0/widgets/form.md
@@ -321,7 +321,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: ''
@@ -339,7 +339,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 `' '` |
diff --git a/docs/versioned_docs/version-2.22.0/widgets/pdf.md b/docs/versioned_docs/version-2.22.0/widgets/pdf.md
index 8dbc206c17..90f3bf99df 100644
--- a/docs/versioned_docs/version-2.22.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.22.0/widgets/pdf.md
@@ -5,12 +5,27 @@ title: PDF
# PDF
-PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
+The PDF component can be used to embed PDF files either by URL or through Base64 code.
+
+## Compatibility
+
+The PDF component is compatible with the following browser versions:
+
+| Browser | Version |
+|:--------|:--------------------|
+| Chrome | 92 or later |
+| Edge | 92 or later |
+| Safari | 15.4 or later |
+| Firefox | 90 or later |
+
+
+If the PDF component is integrated into your application, it will only render in supported browsers.
:::info
Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
+
## Properties
### File URL
diff --git a/docs/versioned_docs/version-2.22.0/widgets/table.md b/docs/versioned_docs/version-2.22.0/widgets/table.md
index b421970811..0d258d8be1 100644
--- a/docs/versioned_docs/version-2.22.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.22.0/widgets/table.md
@@ -660,7 +660,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.
@@ -701,15 +701,15 @@ Check this how-to guide to learn more about [server-side pagination](/docs/how-t
### 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)
diff --git a/docs/versioned_docs/version-2.22.0/widgets/text.md b/docs/versioned_docs/version-2.22.0/widgets/text.md
index 1d32def6bf..e7d2ea86ee 100644
--- a/docs/versioned_docs/version-2.22.0/widgets/text.md
+++ b/docs/versioned_docs/version-2.22.0/widgets/text.md
@@ -58,7 +58,7 @@ Use this toggle to show or hide the component in the mobile view. You can dynami
| Background Color | Sets the background color of the component. | Hex color code/choose a color using the color picker |
| Text Color | Sets the color of the text. |Hex color code/choose a color using the color picker |
| Align Text | Sets the alignment of the text. | left, right, center, justified |
-| Visibility | Controls the visibility of the component. If set to {{false}}, the component will not be visible after the app is deployed. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
+| Visibility | Controls the visibility of the component. If set to `{{false}}`, the component will not be visible after the app is deployed. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
| Disable | Makes the component non-functional when set to true. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
## General
diff --git a/docs/versioned_docs/version-2.23.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.23.0/contributing-guide/setup/macos.md
index e2c62ffd95..3d3f2e2bac 100644
--- a/docs/versioned_docs/version-2.23.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.23.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
+
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.23.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.23.0/contributing-guide/troubleshooting/eslint.md
index efb8d897fe..d0e352a565 100644
--- a/docs/versioned_docs/version-2.23.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.23.0/contributing-guide/troubleshooting/eslint.md
@@ -42,5 +42,5 @@ For VSCode users, you can set the formatter to `ESLint` in the [**settings.json*
2. **npm version 8.11.0**
:::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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.23.0/data-sources/custom-js.md b/docs/versioned_docs/version-2.23.0/data-sources/custom-js.md
index e9064bffef..c9ac19e0ba 100644
--- a/docs/versioned_docs/version-2.23.0/data-sources/custom-js.md
+++ b/docs/versioned_docs/version-2.23.0/data-sources/custom-js.md
@@ -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.
diff --git a/docs/versioned_docs/version-2.23.0/data-sources/stripe.md b/docs/versioned_docs/version-2.23.0/data-sources/stripe.md
index e6fa073e9c..77aa839750 100644
--- a/docs/versioned_docs/version-2.23.0/data-sources/stripe.md
+++ b/docs/versioned_docs/version-2.23.0/data-sources/stripe.md
@@ -50,67 +50,67 @@ 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**
diff --git a/docs/versioned_docs/version-2.23.0/getting-started.md b/docs/versioned_docs/version-2.23.0/getting-started.md
index b2a5b85795..3a6e714593 100644
--- a/docs/versioned_docs/version-2.23.0/getting-started.md
+++ b/docs/versioned_docs/version-2.23.0/getting-started.md
@@ -19,18 +19,7 @@ Once the data sources are connected, ToolJet can run **queries** on these data s
-
## How ToolJet works
@@ -283,7 +272,7 @@ We are ready with the labels, let's place the input components next to the label
|:----------------|:-------------------|:-----------------|
| Text Input | taskNameInput | Development |
| Number Input | taskDurationInput | 1 |
-| Date Picker | taskDateInput | {{moment().format("DD/MM/YYYY")}}|
+| Date Picker | taskDateInput | `{{moment().format("DD/MM/YYYY")}}`|
| Textarea | taskDescriptionInput| Creating a modal component |
@@ -306,11 +295,11 @@ Rename the query to *addLog*, select **Create row** as Operations and use the be
| Column Name | Keys |
| :-------------- | :------------------------ |
-| employee | {{globals.currentUser.email}} |
-| taskname | {{components.taskNameInput.value}} |
-| duration | {{components.taskDurationInput.value}} |
-| dateoftask | {{components.taskDateInput.value}} |
-| taskdescription | {{components.taskDescriptionInput.value}} |
+| employee | `{{globals.currentUser.email}}` |
+| taskname | `{{components.taskNameInput.value}}` |
+| duration | `{{components.taskDurationInput.value}}` |
+| dateoftask | `{{components.taskDateInput.value}}` |
+| taskdescription | `{{components.taskDescriptionInput.value}}` |
diff --git a/docs/versioned_docs/version-2.23.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.23.0/how-to/serverside-pagination.md
index ed6536c270..5d6e2fcb5a 100644
--- a/docs/versioned_docs/version-2.23.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.23.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
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 datasources 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.
diff --git a/docs/versioned_docs/version-2.23.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.23.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.23.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.23.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.23.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.23.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.23.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.23.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
-- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter **{{queries.queryname.data}}** where queryname is the name of the query that we created in previous step.
+- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter `{{queries.queryname.data}}` where queryname is the name of the query that we created in previous step.
diff --git a/docs/versioned_docs/version-2.23.0/marketplace/plugins/textract.md b/docs/versioned_docs/version-2.23.0/marketplace/plugins/textract.md
index e3d616156b..4a9e4f6d99 100644
--- a/docs/versioned_docs/version-2.23.0/marketplace/plugins/textract.md
+++ b/docs/versioned_docs/version-2.23.0/marketplace/plugins/textract.md
@@ -49,7 +49,7 @@ This operation let's you to analyze the document by providing the document data
#### Required parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
+- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: `{{components.filepicker1.file[0].base64Data}}`
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
diff --git a/docs/versioned_docs/version-2.23.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.23.0/setup/try-tooljet.md
index eb60b5323a..9056cbf370 100644
--- a/docs/versioned_docs/version-2.23.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.23.0/setup/try-tooljet.md
@@ -27,15 +27,4 @@ docker run \
- 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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.23.0/widgets/bounded-box.md b/docs/versioned_docs/version-2.23.0/widgets/bounded-box.md
index 4e32edcc8e..a472dffd4f 100644
--- a/docs/versioned_docs/version-2.23.0/widgets/bounded-box.md
+++ b/docs/versioned_docs/version-2.23.0/widgets/bounded-box.md
@@ -25,7 +25,7 @@ A **bounded box** is an infinitely customizable image annotation component that
| **Property** | **Description** | **Expected value** |
| :----------- | :----------- | :----------------- |
-| **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']}}` |
diff --git a/docs/versioned_docs/version-2.23.0/widgets/button.md b/docs/versioned_docs/version-2.23.0/widgets/button.md
index b0b43280a5..b8d5f1c2bd 100644
--- a/docs/versioned_docs/version-2.23.0/widgets/button.md
+++ b/docs/versioned_docs/version-2.23.0/widgets/button.md
@@ -13,7 +13,7 @@ Button component can be used to trigger an action. It can be used to submit a fo
| Property | Description | Expected value |
| :----------- | :----------- | :----------- |
| **Button Text** | It can be used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}` |
-| **Loading state** | The loading state can be 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 can be 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}}` |
## Events
diff --git a/docs/versioned_docs/version-2.23.0/widgets/calendar.md b/docs/versioned_docs/version-2.23.0/widgets/calendar.md
index fcc162b9d6..2d0549a697 100644
--- a/docs/versioned_docs/version-2.23.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.23.0/widgets/calendar.md
@@ -211,7 +211,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.23.0/widgets/form.md b/docs/versioned_docs/version-2.23.0/widgets/form.md
index e78510b19d..9227cdf2f1 100644
--- a/docs/versioned_docs/version-2.23.0/widgets/form.md
+++ b/docs/versioned_docs/version-2.23.0/widgets/form.md
@@ -321,7 +321,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: ''
@@ -339,7 +339,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 `' '` |
diff --git a/docs/versioned_docs/version-2.23.0/widgets/pdf.md b/docs/versioned_docs/version-2.23.0/widgets/pdf.md
index 8dbc206c17..90f3bf99df 100644
--- a/docs/versioned_docs/version-2.23.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.23.0/widgets/pdf.md
@@ -5,12 +5,27 @@ title: PDF
# PDF
-PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
+The PDF component can be used to embed PDF files either by URL or through Base64 code.
+
+## Compatibility
+
+The PDF component is compatible with the following browser versions:
+
+| Browser | Version |
+|:--------|:--------------------|
+| Chrome | 92 or later |
+| Edge | 92 or later |
+| Safari | 15.4 or later |
+| Firefox | 90 or later |
+
+
+If the PDF component is integrated into your application, it will only render in supported browsers.
:::info
Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
+
## Properties
### File URL
diff --git a/docs/versioned_docs/version-2.23.0/widgets/table.md b/docs/versioned_docs/version-2.23.0/widgets/table.md
index b421970811..0d258d8be1 100644
--- a/docs/versioned_docs/version-2.23.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.23.0/widgets/table.md
@@ -660,7 +660,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.
@@ -701,15 +701,15 @@ Check this how-to guide to learn more about [server-side pagination](/docs/how-t
### 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)
diff --git a/docs/versioned_docs/version-2.23.0/widgets/text.md b/docs/versioned_docs/version-2.23.0/widgets/text.md
index 1d32def6bf..e7d2ea86ee 100644
--- a/docs/versioned_docs/version-2.23.0/widgets/text.md
+++ b/docs/versioned_docs/version-2.23.0/widgets/text.md
@@ -58,7 +58,7 @@ Use this toggle to show or hide the component in the mobile view. You can dynami
| Background Color | Sets the background color of the component. | Hex color code/choose a color using the color picker |
| Text Color | Sets the color of the text. |Hex color code/choose a color using the color picker |
| Align Text | Sets the alignment of the text. | left, right, center, justified |
-| Visibility | Controls the visibility of the component. If set to {{false}}, the component will not be visible after the app is deployed. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
+| Visibility | Controls the visibility of the component. If set to `{{false}}`, the component will not be visible after the app is deployed. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
| Disable | Makes the component non-functional when set to true. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
## General
diff --git a/docs/versioned_docs/version-2.24.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.24.0/contributing-guide/setup/macos.md
index e2c62ffd95..3d3f2e2bac 100644
--- a/docs/versioned_docs/version-2.24.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.24.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
+
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.24.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.24.0/contributing-guide/troubleshooting/eslint.md
index efb8d897fe..d0e352a565 100644
--- a/docs/versioned_docs/version-2.24.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.24.0/contributing-guide/troubleshooting/eslint.md
@@ -42,5 +42,5 @@ For VSCode users, you can set the formatter to `ESLint` in the [**settings.json*
2. **npm version 8.11.0**
:::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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.24.0/data-sources/custom-js.md b/docs/versioned_docs/version-2.24.0/data-sources/custom-js.md
index e9064bffef..c9ac19e0ba 100644
--- a/docs/versioned_docs/version-2.24.0/data-sources/custom-js.md
+++ b/docs/versioned_docs/version-2.24.0/data-sources/custom-js.md
@@ -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.
diff --git a/docs/versioned_docs/version-2.24.0/data-sources/stripe.md b/docs/versioned_docs/version-2.24.0/data-sources/stripe.md
index e6fa073e9c..77aa839750 100644
--- a/docs/versioned_docs/version-2.24.0/data-sources/stripe.md
+++ b/docs/versioned_docs/version-2.24.0/data-sources/stripe.md
@@ -50,67 +50,67 @@ 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**
diff --git a/docs/versioned_docs/version-2.24.0/getting-started.md b/docs/versioned_docs/version-2.24.0/getting-started.md
index f1b010cfb1..84b4bb01ef 100644
--- a/docs/versioned_docs/version-2.24.0/getting-started.md
+++ b/docs/versioned_docs/version-2.24.0/getting-started.md
@@ -19,18 +19,7 @@ Once the data sources are connected, ToolJet can run **queries** on these data s
-
## How ToolJet works
@@ -283,7 +272,7 @@ We are ready with the labels, let's place the input components next to the label
|:----------------|:-------------------|:-----------------|
| Text Input | taskNameInput | Development |
| Number Input | taskDurationInput | 1 |
-| Date Picker | taskDateInput | {{moment().format("DD/MM/YYYY")}}|
+| Date Picker | taskDateInput | `{{moment().format("DD/MM/YYYY")}}`|
| Textarea | taskDescriptionInput| Creating a modal component |
@@ -306,11 +295,11 @@ Rename the query to *addLog*, select **Create row** as Operations and use the be
| Column Name | Keys |
| :-------------- | :------------------------ |
-| employee | {{globals.currentUser.email}} |
-| taskname | {{components.taskNameInput.value}} |
-| duration | {{components.taskDurationInput.value}} |
-| dateoftask | {{components.taskDateInput.value}} |
-| taskdescription | {{components.taskDescriptionInput.value}} |
+| employee | `{{globals.currentUser.email}}` |
+| taskname | `{{components.taskNameInput.value}}` |
+| duration | `{{components.taskDurationInput.value}}` |
+| dateoftask | `{{components.taskDateInput.value}}` |
+| taskdescription | `{{components.taskDescriptionInput.value}}` |
diff --git a/docs/versioned_docs/version-2.24.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.24.0/how-to/serverside-pagination.md
index ed6536c270..5d6e2fcb5a 100644
--- a/docs/versioned_docs/version-2.24.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.24.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
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 datasources 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.
diff --git a/docs/versioned_docs/version-2.24.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.24.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.24.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.24.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.24.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.24.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.24.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.24.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
-- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter **{{queries.queryname.data}}** where queryname is the name of the query that we created in previous step.
+- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter `{{queries.queryname.data}}` where queryname is the name of the query that we created in previous step.
diff --git a/docs/versioned_docs/version-2.24.0/marketplace/plugins/textract.md b/docs/versioned_docs/version-2.24.0/marketplace/plugins/textract.md
index e3d616156b..4a9e4f6d99 100644
--- a/docs/versioned_docs/version-2.24.0/marketplace/plugins/textract.md
+++ b/docs/versioned_docs/version-2.24.0/marketplace/plugins/textract.md
@@ -49,7 +49,7 @@ This operation let's you to analyze the document by providing the document data
#### Required parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
+- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: `{{components.filepicker1.file[0].base64Data}}`
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
diff --git a/docs/versioned_docs/version-2.24.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.24.0/setup/try-tooljet.md
index ff2bc44904..d7f5e235c7 100644
--- a/docs/versioned_docs/version-2.24.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.24.0/setup/try-tooljet.md
@@ -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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.24.0/widgets/bounded-box.md b/docs/versioned_docs/version-2.24.0/widgets/bounded-box.md
index 4e32edcc8e..a472dffd4f 100644
--- a/docs/versioned_docs/version-2.24.0/widgets/bounded-box.md
+++ b/docs/versioned_docs/version-2.24.0/widgets/bounded-box.md
@@ -25,7 +25,7 @@ A **bounded box** is an infinitely customizable image annotation component that
| **Property** | **Description** | **Expected value** |
| :----------- | :----------- | :----------------- |
-| **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']}}` |
diff --git a/docs/versioned_docs/version-2.24.0/widgets/button.md b/docs/versioned_docs/version-2.24.0/widgets/button.md
index b0b43280a5..b8d5f1c2bd 100644
--- a/docs/versioned_docs/version-2.24.0/widgets/button.md
+++ b/docs/versioned_docs/version-2.24.0/widgets/button.md
@@ -13,7 +13,7 @@ Button component can be used to trigger an action. It can be used to submit a fo
| Property | Description | Expected value |
| :----------- | :----------- | :----------- |
| **Button Text** | It can be used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}` |
-| **Loading state** | The loading state can be 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 can be 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}}` |
## Events
diff --git a/docs/versioned_docs/version-2.24.0/widgets/calendar.md b/docs/versioned_docs/version-2.24.0/widgets/calendar.md
index fcc162b9d6..2d0549a697 100644
--- a/docs/versioned_docs/version-2.24.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.24.0/widgets/calendar.md
@@ -211,7 +211,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.24.0/widgets/form.md b/docs/versioned_docs/version-2.24.0/widgets/form.md
index e78510b19d..9227cdf2f1 100644
--- a/docs/versioned_docs/version-2.24.0/widgets/form.md
+++ b/docs/versioned_docs/version-2.24.0/widgets/form.md
@@ -321,7 +321,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: ''
@@ -339,7 +339,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 `' '` |
diff --git a/docs/versioned_docs/version-2.24.0/widgets/pdf.md b/docs/versioned_docs/version-2.24.0/widgets/pdf.md
index 8dbc206c17..90f3bf99df 100644
--- a/docs/versioned_docs/version-2.24.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.24.0/widgets/pdf.md
@@ -5,12 +5,27 @@ title: PDF
# PDF
-PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
+The PDF component can be used to embed PDF files either by URL or through Base64 code.
+
+## Compatibility
+
+The PDF component is compatible with the following browser versions:
+
+| Browser | Version |
+|:--------|:--------------------|
+| Chrome | 92 or later |
+| Edge | 92 or later |
+| Safari | 15.4 or later |
+| Firefox | 90 or later |
+
+
+If the PDF component is integrated into your application, it will only render in supported browsers.
:::info
Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
+
## Properties
### File URL
diff --git a/docs/versioned_docs/version-2.24.0/widgets/table.md b/docs/versioned_docs/version-2.24.0/widgets/table.md
index b421970811..0d258d8be1 100644
--- a/docs/versioned_docs/version-2.24.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.24.0/widgets/table.md
@@ -660,7 +660,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.
@@ -701,15 +701,15 @@ Check this how-to guide to learn more about [server-side pagination](/docs/how-t
### 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)
diff --git a/docs/versioned_docs/version-2.24.0/widgets/text.md b/docs/versioned_docs/version-2.24.0/widgets/text.md
index 1d32def6bf..e7d2ea86ee 100644
--- a/docs/versioned_docs/version-2.24.0/widgets/text.md
+++ b/docs/versioned_docs/version-2.24.0/widgets/text.md
@@ -58,7 +58,7 @@ Use this toggle to show or hide the component in the mobile view. You can dynami
| Background Color | Sets the background color of the component. | Hex color code/choose a color using the color picker |
| Text Color | Sets the color of the text. |Hex color code/choose a color using the color picker |
| Align Text | Sets the alignment of the text. | left, right, center, justified |
-| Visibility | Controls the visibility of the component. If set to {{false}}, the component will not be visible after the app is deployed. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
+| Visibility | Controls the visibility of the component. If set to `{{false}}`, the component will not be visible after the app is deployed. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
| Disable | Makes the component non-functional when set to true. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
## General
diff --git a/docs/versioned_docs/version-2.24.0/workflows/triggers.md b/docs/versioned_docs/version-2.24.0/workflows/triggers.md
index 5855b4fa60..3e9968d1b5 100644
--- a/docs/versioned_docs/version-2.24.0/workflows/triggers.md
+++ b/docs/versioned_docs/version-2.24.0/workflows/triggers.md
@@ -13,8 +13,7 @@ Triggers can be used to execute a workflow. Currently, ToolJet supports two type
A webhook trigger allows you to run the workflow when a webhook is received. You can configure the webhook trigger from the Triggers tab. The webhook URL is unique for each workflow.
-### Creating a webhook trigger
-
+### Creating a Webhook Trigger
- Click on the **Triggers** option in the left panel to open the Triggers tab.
@@ -55,6 +54,13 @@ A webhook trigger allows you to run the workflow when a webhook is received. You
+:::info
+Currently, authentication is mandatory for webhooks. Use a bearer token in the `Authorization` header for authentication.
+**Format:**
+`Authorization: Bearer `
+**Example:**
+`Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...`
+:::
- Parameters can be passed to the workflow using the **Parameters** field. The parameter `key` and their `type` can be specified in the **Parameters** field. For example, if you want to pass the `name` and `age` parameters to the workflow using the webhook triggers, you can set the **Parameters** field as follows:
```json
@@ -81,7 +87,7 @@ A webhook trigger allows you to run the workflow when a webhook is received. You
-### Restrictions on usage of webhook triggers
+### Restrictions on Usage of Webhook Triggers
There are certain restrictions on the usage of webhook triggers that are configurable, both at the instance level and at the workspace level depending on the license. The restrictions are as follows:
@@ -111,7 +117,7 @@ In the application, simply click on the `+ Add` button in the query panel and se
-### Passing parameters
+### Passing Parameters
Parameters can be passed to the workflow from the **Params** field in the query. The parameter `key` and their `value` can be specified in the **Params** field. For example, if you want to pass the `name` and `age` parameters to the workflow using the manual triggers, you can set the **Params** field as follows:
diff --git a/docs/versioned_docs/version-2.25.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.25.0/contributing-guide/setup/macos.md
index e2c62ffd95..3d3f2e2bac 100644
--- a/docs/versioned_docs/version-2.25.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.25.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
+
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.25.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.25.0/contributing-guide/troubleshooting/eslint.md
index efb8d897fe..d0e352a565 100644
--- a/docs/versioned_docs/version-2.25.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.25.0/contributing-guide/troubleshooting/eslint.md
@@ -42,5 +42,5 @@ For VSCode users, you can set the formatter to `ESLint` in the [**settings.json*
2. **npm version 8.11.0**
:::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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.25.0/data-sources/custom-js.md b/docs/versioned_docs/version-2.25.0/data-sources/custom-js.md
index e9064bffef..c9ac19e0ba 100644
--- a/docs/versioned_docs/version-2.25.0/data-sources/custom-js.md
+++ b/docs/versioned_docs/version-2.25.0/data-sources/custom-js.md
@@ -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.
diff --git a/docs/versioned_docs/version-2.25.0/data-sources/stripe.md b/docs/versioned_docs/version-2.25.0/data-sources/stripe.md
index e6fa073e9c..77aa839750 100644
--- a/docs/versioned_docs/version-2.25.0/data-sources/stripe.md
+++ b/docs/versioned_docs/version-2.25.0/data-sources/stripe.md
@@ -50,67 +50,67 @@ 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**
diff --git a/docs/versioned_docs/version-2.25.0/how-to/access-users-location.md b/docs/versioned_docs/version-2.25.0/how-to/access-users-location.md
index 3251431595..cc65b5ea94 100644
--- a/docs/versioned_docs/version-2.25.0/how-to/access-users-location.md
+++ b/docs/versioned_docs/version-2.25.0/how-to/access-users-location.md
@@ -1,6 +1,6 @@
---
id: access-users-location
-title: Accessing User Location with RunJS Query (Geolocation API)
+title: Accessing User Location with RunJS Query
---
In this step-by-step guide we will build a ToolJet application that harnesses the power of the **JavaScript Geolocation API** to retrieve the user's location. The Geolocation API offers access to various geographical data associated with a user's device, utilizing methods such as GPS, WIFI, IP Geolocation, and more.
diff --git a/docs/versioned_docs/version-2.25.0/how-to/import-external-lib-js.md b/docs/versioned_docs/version-2.25.0/how-to/import-external-lib-js.md
index f382b49994..4f3ad0352e 100644
--- a/docs/versioned_docs/version-2.25.0/how-to/import-external-lib-js.md
+++ b/docs/versioned_docs/version-2.25.0/how-to/import-external-lib-js.md
@@ -16,7 +16,7 @@ You can import various JavaScript libraries using their Content Delivery Network
Start by creating a new application in ToolJet. Then, proceed to create a new RunJS query from the query panel.
-
+
@@ -64,7 +64,7 @@ Enable the **Run this query on application load?** option to make the libraries
-
+
@@ -92,7 +92,7 @@ return flatten({
Preview the output in the query manager or run the query to see the flattened JSON.
-
+
@@ -110,7 +110,7 @@ return math.atan2(3, -3) / math.pi;
Preview the output, or Run the query to see the result of the calculation.
-
+
diff --git a/docs/versioned_docs/version-2.25.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.25.0/how-to/serverside-pagination.md
index a897b235a0..276cdef295 100644
--- a/docs/versioned_docs/version-2.25.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.25.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
diff --git a/docs/versioned_docs/version-2.25.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.25.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.25.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.25.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.25.0/how-to/use-to-py.md b/docs/versioned_docs/version-2.25.0/how-to/use-to-py.md
index 9d1eeb35fe..08f8a463a0 100644
--- a/docs/versioned_docs/version-2.25.0/how-to/use-to-py.md
+++ b/docs/versioned_docs/version-2.25.0/how-to/use-to-py.md
@@ -1,6 +1,6 @@
---
id: use-to-py-function-in-runpy
-title: "Utilize the to_py() Function in RunPy: Translating JavaScript Objects to Python"
+title: "Translating JavaScript Objects to Python in RunPy"
---
This guide demonstrates the utilization of the `to_py()` function in RunPy queries for converting JavaScript objects into their corresponding Python representations.
diff --git a/docs/versioned_docs/version-2.25.0/marketplace/plugins/textract.md b/docs/versioned_docs/version-2.25.0/marketplace/plugins/textract.md
index e3d616156b..4a9e4f6d99 100644
--- a/docs/versioned_docs/version-2.25.0/marketplace/plugins/textract.md
+++ b/docs/versioned_docs/version-2.25.0/marketplace/plugins/textract.md
@@ -49,7 +49,7 @@ This operation let's you to analyze the document by providing the document data
#### Required parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
+- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: `{{components.filepicker1.file[0].base64Data}}`
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
diff --git a/docs/versioned_docs/version-2.25.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.25.0/setup/try-tooljet.md
index ff2bc44904..d7f5e235c7 100644
--- a/docs/versioned_docs/version-2.25.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.25.0/setup/try-tooljet.md
@@ -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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.25.0/widgets/bounded-box.md b/docs/versioned_docs/version-2.25.0/widgets/bounded-box.md
index 4e32edcc8e..a472dffd4f 100644
--- a/docs/versioned_docs/version-2.25.0/widgets/bounded-box.md
+++ b/docs/versioned_docs/version-2.25.0/widgets/bounded-box.md
@@ -25,7 +25,7 @@ A **bounded box** is an infinitely customizable image annotation component that
| **Property** | **Description** | **Expected value** |
| :----------- | :----------- | :----------------- |
-| **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']}}` |
diff --git a/docs/versioned_docs/version-2.25.0/widgets/button.md b/docs/versioned_docs/version-2.25.0/widgets/button.md
index b0b43280a5..b8d5f1c2bd 100644
--- a/docs/versioned_docs/version-2.25.0/widgets/button.md
+++ b/docs/versioned_docs/version-2.25.0/widgets/button.md
@@ -13,7 +13,7 @@ Button component can be used to trigger an action. It can be used to submit a fo
| Property | Description | Expected value |
| :----------- | :----------- | :----------- |
| **Button Text** | It can be used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}` |
-| **Loading state** | The loading state can be 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 can be 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}}` |
## Events
diff --git a/docs/versioned_docs/version-2.25.0/widgets/calendar.md b/docs/versioned_docs/version-2.25.0/widgets/calendar.md
index fcc162b9d6..2d0549a697 100644
--- a/docs/versioned_docs/version-2.25.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.25.0/widgets/calendar.md
@@ -211,7 +211,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.25.0/widgets/form.md b/docs/versioned_docs/version-2.25.0/widgets/form.md
index e78510b19d..9227cdf2f1 100644
--- a/docs/versioned_docs/version-2.25.0/widgets/form.md
+++ b/docs/versioned_docs/version-2.25.0/widgets/form.md
@@ -321,7 +321,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: ''
@@ -339,7 +339,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 `' '` |
diff --git a/docs/versioned_docs/version-2.25.0/widgets/pdf.md b/docs/versioned_docs/version-2.25.0/widgets/pdf.md
index 8dbc206c17..90f3bf99df 100644
--- a/docs/versioned_docs/version-2.25.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.25.0/widgets/pdf.md
@@ -5,12 +5,27 @@ title: PDF
# PDF
-PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
+The PDF component can be used to embed PDF files either by URL or through Base64 code.
+
+## Compatibility
+
+The PDF component is compatible with the following browser versions:
+
+| Browser | Version |
+|:--------|:--------------------|
+| Chrome | 92 or later |
+| Edge | 92 or later |
+| Safari | 15.4 or later |
+| Firefox | 90 or later |
+
+
+If the PDF component is integrated into your application, it will only render in supported browsers.
:::info
Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
+
## Properties
### File URL
diff --git a/docs/versioned_docs/version-2.25.0/widgets/table.md b/docs/versioned_docs/version-2.25.0/widgets/table.md
index b421970811..0d258d8be1 100644
--- a/docs/versioned_docs/version-2.25.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.25.0/widgets/table.md
@@ -660,7 +660,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.
@@ -701,15 +701,15 @@ Check this how-to guide to learn more about [server-side pagination](/docs/how-t
### 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)
diff --git a/docs/versioned_docs/version-2.25.0/widgets/text.md b/docs/versioned_docs/version-2.25.0/widgets/text.md
index 1d32def6bf..e7d2ea86ee 100644
--- a/docs/versioned_docs/version-2.25.0/widgets/text.md
+++ b/docs/versioned_docs/version-2.25.0/widgets/text.md
@@ -58,7 +58,7 @@ Use this toggle to show or hide the component in the mobile view. You can dynami
| Background Color | Sets the background color of the component. | Hex color code/choose a color using the color picker |
| Text Color | Sets the color of the text. |Hex color code/choose a color using the color picker |
| Align Text | Sets the alignment of the text. | left, right, center, justified |
-| Visibility | Controls the visibility of the component. If set to {{false}}, the component will not be visible after the app is deployed. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
+| Visibility | Controls the visibility of the component. If set to `{{false}}`, the component will not be visible after the app is deployed. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
| Disable | Makes the component non-functional when set to true. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
## General
diff --git a/docs/versioned_docs/version-2.25.0/workflows/triggers.md b/docs/versioned_docs/version-2.25.0/workflows/triggers.md
index 5855b4fa60..3e9968d1b5 100644
--- a/docs/versioned_docs/version-2.25.0/workflows/triggers.md
+++ b/docs/versioned_docs/version-2.25.0/workflows/triggers.md
@@ -13,8 +13,7 @@ Triggers can be used to execute a workflow. Currently, ToolJet supports two type
A webhook trigger allows you to run the workflow when a webhook is received. You can configure the webhook trigger from the Triggers tab. The webhook URL is unique for each workflow.
-### Creating a webhook trigger
-
+### Creating a Webhook Trigger
- Click on the **Triggers** option in the left panel to open the Triggers tab.
@@ -55,6 +54,13 @@ A webhook trigger allows you to run the workflow when a webhook is received. You
+:::info
+Currently, authentication is mandatory for webhooks. Use a bearer token in the `Authorization` header for authentication.
+**Format:**
+`Authorization: Bearer `
+**Example:**
+`Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...`
+:::
- Parameters can be passed to the workflow using the **Parameters** field. The parameter `key` and their `type` can be specified in the **Parameters** field. For example, if you want to pass the `name` and `age` parameters to the workflow using the webhook triggers, you can set the **Parameters** field as follows:
```json
@@ -81,7 +87,7 @@ A webhook trigger allows you to run the workflow when a webhook is received. You
-### Restrictions on usage of webhook triggers
+### Restrictions on Usage of Webhook Triggers
There are certain restrictions on the usage of webhook triggers that are configurable, both at the instance level and at the workspace level depending on the license. The restrictions are as follows:
@@ -111,7 +117,7 @@ In the application, simply click on the `+ Add` button in the query panel and se
-### Passing parameters
+### Passing Parameters
Parameters can be passed to the workflow from the **Params** field in the query. The parameter `key` and their `value` can be specified in the **Params** field. For example, if you want to pass the `name` and `age` parameters to the workflow using the manual triggers, you can set the **Params** field as follows:
diff --git a/docs/versioned_docs/version-2.27.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.27.0/contributing-guide/setup/macos.md
index f66b7ab63d..aa22f1776e 100644
--- a/docs/versioned_docs/version-2.27.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.27.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /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)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.27.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.27.0/contributing-guide/troubleshooting/eslint.md
index 924f7bfcc3..8caacce4c9 100644
--- a/docs/versioned_docs/version-2.27.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.27.0/contributing-guide/troubleshooting/eslint.md
@@ -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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.27.0/data-sources/custom-js.md b/docs/versioned_docs/version-2.27.0/data-sources/custom-js.md
index e9064bffef..c9ac19e0ba 100644
--- a/docs/versioned_docs/version-2.27.0/data-sources/custom-js.md
+++ b/docs/versioned_docs/version-2.27.0/data-sources/custom-js.md
@@ -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.
diff --git a/docs/versioned_docs/version-2.27.0/data-sources/stripe.md b/docs/versioned_docs/version-2.27.0/data-sources/stripe.md
index e6fa073e9c..77aa839750 100644
--- a/docs/versioned_docs/version-2.27.0/data-sources/stripe.md
+++ b/docs/versioned_docs/version-2.27.0/data-sources/stripe.md
@@ -50,67 +50,67 @@ 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**
diff --git a/docs/versioned_docs/version-2.27.0/how-to/access-users-location.md b/docs/versioned_docs/version-2.27.0/how-to/access-users-location.md
index 3251431595..cc65b5ea94 100644
--- a/docs/versioned_docs/version-2.27.0/how-to/access-users-location.md
+++ b/docs/versioned_docs/version-2.27.0/how-to/access-users-location.md
@@ -1,6 +1,6 @@
---
id: access-users-location
-title: Accessing User Location with RunJS Query (Geolocation API)
+title: Accessing User Location with RunJS Query
---
In this step-by-step guide we will build a ToolJet application that harnesses the power of the **JavaScript Geolocation API** to retrieve the user's location. The Geolocation API offers access to various geographical data associated with a user's device, utilizing methods such as GPS, WIFI, IP Geolocation, and more.
diff --git a/docs/versioned_docs/version-2.27.0/how-to/import-external-lib-js.md b/docs/versioned_docs/version-2.27.0/how-to/import-external-lib-js.md
index f382b49994..4f3ad0352e 100644
--- a/docs/versioned_docs/version-2.27.0/how-to/import-external-lib-js.md
+++ b/docs/versioned_docs/version-2.27.0/how-to/import-external-lib-js.md
@@ -16,7 +16,7 @@ You can import various JavaScript libraries using their Content Delivery Network
Start by creating a new application in ToolJet. Then, proceed to create a new RunJS query from the query panel.
-
+
@@ -64,7 +64,7 @@ Enable the **Run this query on application load?** option to make the libraries
-
+
@@ -92,7 +92,7 @@ return flatten({
Preview the output in the query manager or run the query to see the flattened JSON.
-
+
@@ -110,7 +110,7 @@ return math.atan2(3, -3) / math.pi;
Preview the output, or Run the query to see the result of the calculation.
-
+
diff --git a/docs/versioned_docs/version-2.27.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.27.0/how-to/serverside-pagination.md
index a897b235a0..276cdef295 100644
--- a/docs/versioned_docs/version-2.27.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.27.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
diff --git a/docs/versioned_docs/version-2.27.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.27.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.27.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.27.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.27.0/how-to/use-to-py.md b/docs/versioned_docs/version-2.27.0/how-to/use-to-py.md
index 9d1eeb35fe..08f8a463a0 100644
--- a/docs/versioned_docs/version-2.27.0/how-to/use-to-py.md
+++ b/docs/versioned_docs/version-2.27.0/how-to/use-to-py.md
@@ -1,6 +1,6 @@
---
id: use-to-py-function-in-runpy
-title: "Utilize the to_py() Function in RunPy: Translating JavaScript Objects to Python"
+title: "Translating JavaScript Objects to Python in RunPy"
---
This guide demonstrates the utilization of the `to_py()` function in RunPy queries for converting JavaScript objects into their corresponding Python representations.
diff --git a/docs/versioned_docs/version-2.27.0/marketplace/plugins/textract.md b/docs/versioned_docs/version-2.27.0/marketplace/plugins/textract.md
index e3d616156b..4a9e4f6d99 100644
--- a/docs/versioned_docs/version-2.27.0/marketplace/plugins/textract.md
+++ b/docs/versioned_docs/version-2.27.0/marketplace/plugins/textract.md
@@ -49,7 +49,7 @@ This operation let's you to analyze the document by providing the document data
#### Required parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
+- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: `{{components.filepicker1.file[0].base64Data}}`
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
diff --git a/docs/versioned_docs/version-2.27.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.27.0/setup/try-tooljet.md
index ff2bc44904..d7f5e235c7 100644
--- a/docs/versioned_docs/version-2.27.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.27.0/setup/try-tooljet.md
@@ -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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.27.0/widgets/bounded-box.md b/docs/versioned_docs/version-2.27.0/widgets/bounded-box.md
index 4e32edcc8e..a472dffd4f 100644
--- a/docs/versioned_docs/version-2.27.0/widgets/bounded-box.md
+++ b/docs/versioned_docs/version-2.27.0/widgets/bounded-box.md
@@ -25,7 +25,7 @@ A **bounded box** is an infinitely customizable image annotation component that
| **Property** | **Description** | **Expected value** |
| :----------- | :----------- | :----------------- |
-| **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']}}` |
diff --git a/docs/versioned_docs/version-2.27.0/widgets/button.md b/docs/versioned_docs/version-2.27.0/widgets/button.md
index b0b43280a5..b8d5f1c2bd 100644
--- a/docs/versioned_docs/version-2.27.0/widgets/button.md
+++ b/docs/versioned_docs/version-2.27.0/widgets/button.md
@@ -13,7 +13,7 @@ Button component can be used to trigger an action. It can be used to submit a fo
| Property | Description | Expected value |
| :----------- | :----------- | :----------- |
| **Button Text** | It can be used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}` |
-| **Loading state** | The loading state can be 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 can be 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}}` |
## Events
diff --git a/docs/versioned_docs/version-2.27.0/widgets/calendar.md b/docs/versioned_docs/version-2.27.0/widgets/calendar.md
index fcc162b9d6..2d0549a697 100644
--- a/docs/versioned_docs/version-2.27.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.27.0/widgets/calendar.md
@@ -211,7 +211,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.27.0/widgets/form.md b/docs/versioned_docs/version-2.27.0/widgets/form.md
index e78510b19d..9227cdf2f1 100644
--- a/docs/versioned_docs/version-2.27.0/widgets/form.md
+++ b/docs/versioned_docs/version-2.27.0/widgets/form.md
@@ -321,7 +321,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: ''
@@ -339,7 +339,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 `' '` |
diff --git a/docs/versioned_docs/version-2.27.0/widgets/pdf.md b/docs/versioned_docs/version-2.27.0/widgets/pdf.md
index 8dbc206c17..90ba3e4d67 100644
--- a/docs/versioned_docs/version-2.27.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.27.0/widgets/pdf.md
@@ -5,61 +5,66 @@ title: PDF
# PDF
-PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
+The PDF component can be used to embed PDF files either by URL or through Base64 code.
-:::info
-Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
-:::
+## Compatibility
+
+The PDF component is compatible with the following browser versions:
+
+| Browser | Version |
+|:--------|:--------------------|
+| Chrome | 92 or later |
+| Edge | 92 or later |
+| Safari | 15.4 or later |
+| Firefox | 90 or later |
+
+
+If the PDF component is integrated into your application, it will only render in supported browsers.
## Properties
### File URL
-The URL of the PDF file on the web. `data:application/pdf;base64,` format is supported and the input needs to be prefixed with `data:application/pdf;base64,`
+Under this property, you can enter the URL of the PDF file to display. Base64 format is also supported, the input needs to be prefixed with `data:application/pdf;base64,`.
+For example:
+```js
+{{'data:application/pdf;base64,' + components.filepicker1.file[0].base64Data}}
+```
### Scale page to width
-It can be toggled to adjust the PDF content to fit the width or height of the component
+The `Scale page to width` property automatically adjusts the PDF to fill the entire width of the component.
### Show page controls
-By default, page number, previous & next button is displayed while hovering the PDF file. It can be toggled on or off.
+By default, when hovering over the PDF file, buttons for the previous and next page, along with the page number, are displayed. They can be toggled on or off using the `Show page controls` toggle.
### Show the download
-The `Download` button on the PDF component allows you to download the pdf file. By default, Show the download button is enabled. Toggle it off to remove the `Download` button from PDF component, you can also click on the `Fx` button to set the values `{{true}}` or `{{false}}` dynamically.
+The `Download` button on the PDF component allows you to download the PDF file. By default, `Show the download` button is enabled. Toggle it off to remove the `Download` button from the PDF component.
## General
### Tooltip
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+To display instructional text when a user hovers over the PDF component, add some text under the Tooltip property.
-Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
+## Devices
-
-
-
-
-
-
-## Layout
-
-| Layout | description | Expected value |
-| --------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Property | Description | Expected value |
+| :-------------- | :---------------------------------------- | :------------------ |
+| Show on desktop | Display the component in Desktop view | Programmatically determine the value by clicking on `fx` or use the toggle switch |
+| Show on mobile | Display the component in Mobile view | Programmatically determine the value by clicking on `fx` or use the toggle switch |
## Styles
-| 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 visible after the app is deployed. By default, it's set to `{{true}}`. |
+### Visibility
+
+Toggle the `Visibility` condition on or off to control the visibility of the component. You can also programmatically change its value by clicking on the `fx` button next to it. If `{{false}}` the component will not be visible after the app is deployed. By default, it's set to `{{true}}`.
:::info
-Any property having `Fx` button next to its field can be **programmatically configured**.
+Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
-
## Exposed variables
There are currently no exposed variables for the component.
diff --git a/docs/versioned_docs/version-2.27.0/widgets/table.md b/docs/versioned_docs/version-2.27.0/widgets/table.md
index b421970811..0d258d8be1 100644
--- a/docs/versioned_docs/version-2.27.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.27.0/widgets/table.md
@@ -660,7 +660,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.
@@ -701,15 +701,15 @@ Check this how-to guide to learn more about [server-side pagination](/docs/how-t
### 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)
diff --git a/docs/versioned_docs/version-2.27.0/widgets/text.md b/docs/versioned_docs/version-2.27.0/widgets/text.md
index 1d32def6bf..e7d2ea86ee 100644
--- a/docs/versioned_docs/version-2.27.0/widgets/text.md
+++ b/docs/versioned_docs/version-2.27.0/widgets/text.md
@@ -58,7 +58,7 @@ Use this toggle to show or hide the component in the mobile view. You can dynami
| Background Color | Sets the background color of the component. | Hex color code/choose a color using the color picker |
| Text Color | Sets the color of the text. |Hex color code/choose a color using the color picker |
| Align Text | Sets the alignment of the text. | left, right, center, justified |
-| Visibility | Controls the visibility of the component. If set to {{false}}, the component will not be visible after the app is deployed. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
+| Visibility | Controls the visibility of the component. If set to `{{false}}`, the component will not be visible after the app is deployed. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
| Disable | Makes the component non-functional when set to true. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
## General
diff --git a/docs/versioned_docs/version-2.27.0/workflows/triggers.md b/docs/versioned_docs/version-2.27.0/workflows/triggers.md
index 5855b4fa60..3e9968d1b5 100644
--- a/docs/versioned_docs/version-2.27.0/workflows/triggers.md
+++ b/docs/versioned_docs/version-2.27.0/workflows/triggers.md
@@ -13,8 +13,7 @@ Triggers can be used to execute a workflow. Currently, ToolJet supports two type
A webhook trigger allows you to run the workflow when a webhook is received. You can configure the webhook trigger from the Triggers tab. The webhook URL is unique for each workflow.
-### Creating a webhook trigger
-
+### Creating a Webhook Trigger
- Click on the **Triggers** option in the left panel to open the Triggers tab.
@@ -55,6 +54,13 @@ A webhook trigger allows you to run the workflow when a webhook is received. You
+:::info
+Currently, authentication is mandatory for webhooks. Use a bearer token in the `Authorization` header for authentication.
+**Format:**
+`Authorization: Bearer `
+**Example:**
+`Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...`
+:::
- Parameters can be passed to the workflow using the **Parameters** field. The parameter `key` and their `type` can be specified in the **Parameters** field. For example, if you want to pass the `name` and `age` parameters to the workflow using the webhook triggers, you can set the **Parameters** field as follows:
```json
@@ -81,7 +87,7 @@ A webhook trigger allows you to run the workflow when a webhook is received. You
-### Restrictions on usage of webhook triggers
+### Restrictions on Usage of Webhook Triggers
There are certain restrictions on the usage of webhook triggers that are configurable, both at the instance level and at the workspace level depending on the license. The restrictions are as follows:
@@ -111,7 +117,7 @@ In the application, simply click on the `+ Add` button in the query panel and se
-### Passing parameters
+### Passing Parameters
Parameters can be passed to the workflow from the **Params** field in the query. The parameter `key` and their `value` can be specified in the **Params** field. For example, if you want to pass the `name` and `age` parameters to the workflow using the manual triggers, you can set the **Params** field as follows:
diff --git a/docs/versioned_docs/version-2.29.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.29.0/contributing-guide/setup/macos.md
index f66b7ab63d..aa22f1776e 100644
--- a/docs/versioned_docs/version-2.29.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.29.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /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)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.29.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.29.0/contributing-guide/troubleshooting/eslint.md
index 924f7bfcc3..8caacce4c9 100644
--- a/docs/versioned_docs/version-2.29.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.29.0/contributing-guide/troubleshooting/eslint.md
@@ -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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.29.0/data-sources/custom-js.md b/docs/versioned_docs/version-2.29.0/data-sources/custom-js.md
index e9064bffef..c9ac19e0ba 100644
--- a/docs/versioned_docs/version-2.29.0/data-sources/custom-js.md
+++ b/docs/versioned_docs/version-2.29.0/data-sources/custom-js.md
@@ -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.
diff --git a/docs/versioned_docs/version-2.29.0/data-sources/run-py.md b/docs/versioned_docs/version-2.29.0/data-sources/run-py.md
index 18dfaddb0b..41c194e241 100644
--- a/docs/versioned_docs/version-2.29.0/data-sources/run-py.md
+++ b/docs/versioned_docs/version-2.29.0/data-sources/run-py.md
@@ -66,13 +66,11 @@ value
#### Retrieve the latest raw data of a query:
```py
-response = await queries.getCustomerData.run()
+await queries.getCustomerData.run()
#replace getCustomerData with your query name
value = queries.getCustomerData.getRawData()
#replace getCustomerData with your query name
-
-value
```
#### Retrieve the loading state of a query:
diff --git a/docs/versioned_docs/version-2.29.0/data-sources/stripe.md b/docs/versioned_docs/version-2.29.0/data-sources/stripe.md
index e6fa073e9c..77aa839750 100644
--- a/docs/versioned_docs/version-2.29.0/data-sources/stripe.md
+++ b/docs/versioned_docs/version-2.29.0/data-sources/stripe.md
@@ -50,67 +50,67 @@ 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**
diff --git a/docs/versioned_docs/version-2.29.0/how-to/access-users-location.md b/docs/versioned_docs/version-2.29.0/how-to/access-users-location.md
index 3251431595..cc65b5ea94 100644
--- a/docs/versioned_docs/version-2.29.0/how-to/access-users-location.md
+++ b/docs/versioned_docs/version-2.29.0/how-to/access-users-location.md
@@ -1,6 +1,6 @@
---
id: access-users-location
-title: Accessing User Location with RunJS Query (Geolocation API)
+title: Accessing User Location with RunJS Query
---
In this step-by-step guide we will build a ToolJet application that harnesses the power of the **JavaScript Geolocation API** to retrieve the user's location. The Geolocation API offers access to various geographical data associated with a user's device, utilizing methods such as GPS, WIFI, IP Geolocation, and more.
diff --git a/docs/versioned_docs/version-2.29.0/how-to/run-action-from-runjs.md b/docs/versioned_docs/version-2.29.0/how-to/run-action-from-runjs.md
index 0b385d8193..c0031c4446 100644
--- a/docs/versioned_docs/version-2.29.0/how-to/run-action-from-runjs.md
+++ b/docs/versioned_docs/version-2.29.0/how-to/run-action-from-runjs.md
@@ -7,9 +7,9 @@ ToolJet allows you to execute various [actions](/docs/actions/show-alert) within
-## Run Query Action
+### Run Query
-**Syntax:**
+To trigger a query, you can use the below functions:
```js
queries.getSalesData.run()
@@ -23,117 +23,144 @@ await actions.runQuery('getSalesData')
**Example:**
-In the following screenshot, we demonstrate triggering two different queries, `getCustomers` and `updateCustomers`, using the two available syntax options for the `Run Query` action.
+In the screenshot below, we are triggering two different queries using two different syntax available for `Run Query` action.
-
+
-## Set Variable Action
+### Get Query Data
+
+In the previous section, we saw how we can trigger queries. Once the queries are triggered, if you want to immediately use the data returned by the query inside the RunJS query, you can use the `getData()`, `getRawData()` and `getLoadingState()` functions:
+
+#### Trigger a query and retrieve its data:
+
+```js
+await queries.getSalesData.run();
+// replace getSalesData with your query name
+
+let value = queries.getSalesData.getData();
+// replace getSalesData with your query name
+```
+
+#### Trigger a query and retrieve its raw data:
+
+```js
+await queries.getCustomerData.run();
+//replace getCustomerData with your query name
+
+let value = queries.getCustomerData.getRawData();
+// replace getCustomerData your with query name
+```
+
+#### Trigger a query and retrieve its loading state:
+
+```js
+await queries.getTodos.run()
+//replace getTodos with your query name
+
+let value = queries.getTodos.getLoadingState();
+//replace getTodos with your query name
+```
+
+
+
+
+
+### Set Variables
+
+To create a variable, you can use the below function:
+
+```javascript
+actions.setVariable('', ``)
+```
+
+
+
+
+
+### Unset Variable
+
+To delete a created variable, you can use the below function:
**Syntax:**
```javascript
-actions.setVariable(variableName, variableValue);
+actions.unSetVariable('')
```
-**Example:**
-
-In this example, we set two variables, `test` and `test2`. Note that `test` contains a numerical value, so it is not wrapped in quotes, while `test2` is a string and is wrapped in quotes.
-
-
-
-
-
-## Unset Variable Action
+### Get Variables
-**Syntax:**
+To access variables immediately after setting them in a RunJS query, you can use the `getVariable` and `getPageVariable` functions:
-```javascript
-actions.unSetVariable(variableName);
+#### Set and retrieve a variable:
+
+```js
+actions.setVariable('mode','dark');
+//replace mode with your desired variable name
+
+return actions.getVariable('mode');
```
-**Example:**
+#### Set and retrieve a page-specific variable:
+```js
+actions.setPageVariable('number',1);
+//replace number with your desired variable name
-In the following screenshot, we unset the variable `test2` that was created in the previous step.
-
-
-
-
+return actions.getPageVariable('number');
+```
-## Logout Action
+### Logout
-**Syntax:**
+To log out the current logged-in user from the ToolJet, use the below function:
```javascript
actions.logout();
```
-**Example:**
-
-Executing `actions.logout()` will log out the current user from ToolJet and redirect to the sign-in page.
-
-
-
-
-
-## Show Modal Action
+### Show Modal
-**Syntax:**
+To open a modal using RunJS query, use the below function:
```javascript
-actions.showModal('modalName');
+actions.showModal('')
```
-**Example:**
-
-In this example, a modal named `formModal` is present on the canvas, and we use a RunJS query to show the modal.
-
-
-
-
-
-## Close Modal Action
+### Close Modal
-**Syntax:**
+To close a modal using RunJS query, use the below function:
```javascript
-actions.closeModal('modalName');
+actions.closeModal('')
```
-**Example:**
-
-Here, we use a RunJS query to close the modal that was shown in the previous step.
-
-
-
-
-
-## Set Local Storage Action
+### Set Local Storage
+
+Set a value in local storage using the below code:
**Syntax:**
@@ -141,166 +168,101 @@ Here, we use a RunJS query to close the modal that was shown in the previous ste
actions.setLocalStorage('key', 'value');
```
-
-
-
-
-## Copy to Clipboard Action
+### Copy to Clipboard
-**Syntax:**
+Use the below code to copy content to the clipboard:
```javascript
-actions.copyToClipboard('contentToCopy');
+actions.copyToClipboard('')
```
-
-
-
-
-## Generate File Action
+### Generate File
-**Syntax:**
+The below action can be used to generate a file.
```js
-actions.generateFile('fileName', 'fileType', 'data');
+actions.generateFile('', '', '')
```
-Example for generating a CSV file:
+`fileName` is the name that you want to give the file(string), `fileType` can be **csv**, **plaintext**, or **pdf** and `data` is the data that you want to store in the file.
+
+Example for generating CSV file:
```js
-actions.generateFile('csvfile1', 'csv', '{{components.table1.currentPageData}}')
+actions.generateFile('csvfile1', 'csv', '{{components.table1.currentPageData}}') // generate a csv file named csvfile1 with the data from the current page of table
```
-Example for generating a Text file:
+Example for generating Text file:
```js
-actions.generateFile('textfile1', 'plaintext', '{{JSON.stringify(components.table1.currentPageData)}}');
+actions.generateFile('textfile1', 'plaintext', '{{JSON.stringify(components.table1.currentPageData)}}') // generate a text file named textfile1 with the data from the current page of table (stringified)
```
-Example for generating a PDF file:
+Example for generating PDF file:
```js
-actions.generateFile('Pdffile1', 'pdf', '{{components.table1.currentPageData}}');
+actions.generateFile('Pdffile1', 'pdf', '{{components.table1.currentPageData}}') // generate a text file named Pdffile1 with the data from the current page of table
```
-
-
-
-
-## Go to App Action
+### Go to App
-**Syntax:**
+You can switch to a different application using the below action:
```javascript
-actions.goToApp('slug', queryparams)
+actions.goToApp('slug',queryparams)
```
-- `slug` can be found in the URL of the released app after the `application/`, or in the `Share` modal. You can also set a custom slug for the app in the `Share` modal or from the global settings in the app builder.
-- `queryparams` can be provided like this `[{"key":"value"}, {"key2":"value2"}]`.
-- Only the apps that are released can be accessed using this action.
-
-
-
-
+- `slug` can be found in URL of the released app after `application/` or in the share modal that opens up when you click on the `Share` button on the top-right of the app-builder
+- `queryparams` can be provided in this format - `[{"key":"value"}, {"key2":"value2"}]`
-## Show Alert Action
+### Show Alert
-**Syntax:**
+To show an alert using RunJS query, use the below code:
```js
-actions.showAlert(alertType, message); // alert types are info, success, warning, and error
+actions.showAlert('' , '' )
```
-**Example:**
+Available alert types are `info`, `success`, `warning`, and `danger`.
+Example:
```js
-actions.showAlert('error', 'This is an error')
+actions.showAlert('error' , 'This is an error' )
```
-
-
-
-
-## Run Multiple Actions from RunJS Query
+### Run Multiple Actions From RunJS Query
-To run multiple actions from a RunJS query, use **async-await** in the function. Here's an example code snippet for running queries and showing an alert at specific intervals:
+To run multiple actions from a RunJS query, you'll have to use **async-await** in the function.
+
+Here is a example code snippet for running the queries and showing alert after specific intervals. Check the complete guide on running queries at specified intervals **[here](/docs/how-to/run-query-at-specified-intervals)**.
```js
-actions.setVariable('interval', setInterval(countdown, 5000));
-
-async function countdown() {
- await queries.restapi1.run();
- await queries.restapi2.run();
- await actions.showAlert('info', 'This is an information');
+actions.setVariable('interval',setInterval(countdown, 5000));
+async function countdown(){
+ await queries.restapi1.run()
+ await queries.restapi2.run()
+ await actions.showAlert('info','This is an information')
}
```
-
-
-
-## Actions on pages
-
-
-
-### Switch page
-
-To switch to a page from the JavaScript query, use the following syntax:
-
-```js
-await actions.switchPage('')
-```
-
-
-
-
-
-### Switch page with query parameters
-
-Query parameters can be passed through action such as Switch Page. The parameters are appended to the end of the application URL and are preceded by a question mark (?). Multiple parameters are separated by an ampersand (&).
-
-To switch to a page with query parameters from the JavaScript query, use the following syntax:
-
-```js
-actions.switchPage('', [['param1', 'value1'], ['param2', 'value2']])
-```
-
-
-
-
-
-### Set page variable
-
-Page variables are restricted to the page where they are created and cannot be accessed throughout the entire application like regular variables.
-
-To set a page variable from the JavaScript query, use the following syntax:
-
-```js
-await actions.setPageVariable('',)
-```
-
-
-
-
-
-This enhanced guide provides a detailed walkthrough of executing various ToolJet actions from RunJS queries.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.29.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.29.0/how-to/serverside-pagination.md
index ed6536c270..5d6e2fcb5a 100644
--- a/docs/versioned_docs/version-2.29.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.29.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
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 datasources 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.
diff --git a/docs/versioned_docs/version-2.29.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.29.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.29.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.29.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.29.0/how-to/use-to-py.md b/docs/versioned_docs/version-2.29.0/how-to/use-to-py.md
index 9d1eeb35fe..08f8a463a0 100644
--- a/docs/versioned_docs/version-2.29.0/how-to/use-to-py.md
+++ b/docs/versioned_docs/version-2.29.0/how-to/use-to-py.md
@@ -1,6 +1,6 @@
---
id: use-to-py-function-in-runpy
-title: "Utilize the to_py() Function in RunPy: Translating JavaScript Objects to Python"
+title: "Translating JavaScript Objects to Python in RunPy"
---
This guide demonstrates the utilization of the `to_py()` function in RunPy queries for converting JavaScript objects into their corresponding Python representations.
diff --git a/docs/versioned_docs/version-2.29.0/marketplace/plugins/textract.md b/docs/versioned_docs/version-2.29.0/marketplace/plugins/textract.md
index e3d616156b..4a9e4f6d99 100644
--- a/docs/versioned_docs/version-2.29.0/marketplace/plugins/textract.md
+++ b/docs/versioned_docs/version-2.29.0/marketplace/plugins/textract.md
@@ -49,7 +49,7 @@ This operation let's you to analyze the document by providing the document data
#### Required parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
+- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: `{{components.filepicker1.file[0].base64Data}}`
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
diff --git a/docs/versioned_docs/version-2.29.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.29.0/setup/try-tooljet.md
index ff2bc44904..d7f5e235c7 100644
--- a/docs/versioned_docs/version-2.29.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.29.0/setup/try-tooljet.md
@@ -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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.29.0/widgets/bounded-box.md b/docs/versioned_docs/version-2.29.0/widgets/bounded-box.md
index 4e32edcc8e..a472dffd4f 100644
--- a/docs/versioned_docs/version-2.29.0/widgets/bounded-box.md
+++ b/docs/versioned_docs/version-2.29.0/widgets/bounded-box.md
@@ -25,7 +25,7 @@ A **bounded box** is an infinitely customizable image annotation component that
| **Property** | **Description** | **Expected value** |
| :----------- | :----------- | :----------------- |
-| **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']}}` |
diff --git a/docs/versioned_docs/version-2.29.0/widgets/button.md b/docs/versioned_docs/version-2.29.0/widgets/button.md
index b0b43280a5..b8d5f1c2bd 100644
--- a/docs/versioned_docs/version-2.29.0/widgets/button.md
+++ b/docs/versioned_docs/version-2.29.0/widgets/button.md
@@ -13,7 +13,7 @@ Button component can be used to trigger an action. It can be used to submit a fo
| Property | Description | Expected value |
| :----------- | :----------- | :----------- |
| **Button Text** | It can be used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}` |
-| **Loading state** | The loading state can be 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 can be 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}}` |
## Events
diff --git a/docs/versioned_docs/version-2.29.0/widgets/calendar.md b/docs/versioned_docs/version-2.29.0/widgets/calendar.md
index fcc162b9d6..2d0549a697 100644
--- a/docs/versioned_docs/version-2.29.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.29.0/widgets/calendar.md
@@ -211,7 +211,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.29.0/widgets/chart.md b/docs/versioned_docs/version-2.29.0/widgets/chart.md
index c892dafff2..ff888758f2 100644
--- a/docs/versioned_docs/version-2.29.0/widgets/chart.md
+++ b/docs/versioned_docs/version-2.29.0/widgets/chart.md
@@ -305,11 +305,11 @@ Check the **[Plotly documentation](https://plotly.com/chart-studio-help/json-cha
## Exposed variables
-|
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}}`). |
+| 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`. |
diff --git a/docs/versioned_docs/version-2.29.0/widgets/form.md b/docs/versioned_docs/version-2.29.0/widgets/form.md
index e78510b19d..9227cdf2f1 100644
--- a/docs/versioned_docs/version-2.29.0/widgets/form.md
+++ b/docs/versioned_docs/version-2.29.0/widgets/form.md
@@ -321,7 +321,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: ''
@@ -339,7 +339,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 `' '` |
diff --git a/docs/versioned_docs/version-2.29.0/widgets/number-input.md b/docs/versioned_docs/version-2.29.0/widgets/number-input.md
index 02be724ac5..c6ea12ada6 100644
--- a/docs/versioned_docs/version-2.29.0/widgets/number-input.md
+++ b/docs/versioned_docs/version-2.29.0/widgets/number-input.md
@@ -48,15 +48,15 @@ Check the **component specific actions** available for this component **[here](/
## Exposed Variables
-|
Variable
|
Description
|
How To Access
|
-|: ---------- | :---------- | :------------ |
-| 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 |
+|:--------:|:-----------:|:------------:|
+|
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}}`).|
## Validation
@@ -68,6 +68,12 @@ Check the **component specific actions** available for this component **[here](/
| Max value | Sets the maximum value allowed. | Integer (e.g., `1000` for a maximum value of 1000).|
| Custom validation | Specifies a validation error message for specific conditions. | Logical Expression (e.g., `{{components.numberinput1.value<5&&"Value needs to be more than 5"}}`). |
+To add regex inside `Custom Validation`, you can use the below format:
+
+**Format**: `{{(.test()) ? '' : 'Error message';}}`
+
+**Example**: `{{(/^\d{1,10}$/.test(components.numberinput1.value)) ? '' : 'Error message';}}`
+
## Additional Actions
diff --git a/docs/versioned_docs/version-2.29.0/widgets/password-input.md b/docs/versioned_docs/version-2.29.0/widgets/password-input.md
index c401404ad0..683aebc94c 100644
--- a/docs/versioned_docs/version-2.29.0/widgets/password-input.md
+++ b/docs/versioned_docs/version-2.29.0/widgets/password-input.md
@@ -67,6 +67,12 @@ Check the **component specific actions** available for this component **[here](/
| Max length | Sets the maximum number of characters allowed. | Integer (e.g., `12` for a maximum of 12 characters).|
| Custom validation | Specifies a validation error message for specific conditions. | Logical Expression (e.g., `{{components.passwordinput1.value<5&&"Value needs to be more than 5"}}`). |
+To add regex inside `Custom Validation`, you can use the below format:
+
+**Format**: `{{(.test()) ? '' : 'Error message';}}`
+
+**Example**: `{{(/^\d{1,10}$/.test(components.passwordinput1.value)) ? '' : 'Error message';}}`
+
## Additional Actions
diff --git a/docs/versioned_docs/version-2.29.0/widgets/pdf.md b/docs/versioned_docs/version-2.29.0/widgets/pdf.md
index 8dbc206c17..90ba3e4d67 100644
--- a/docs/versioned_docs/version-2.29.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.29.0/widgets/pdf.md
@@ -5,61 +5,66 @@ title: PDF
# PDF
-PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
+The PDF component can be used to embed PDF files either by URL or through Base64 code.
-:::info
-Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
-:::
+## Compatibility
+
+The PDF component is compatible with the following browser versions:
+
+| Browser | Version |
+|:--------|:--------------------|
+| Chrome | 92 or later |
+| Edge | 92 or later |
+| Safari | 15.4 or later |
+| Firefox | 90 or later |
+
+
+If the PDF component is integrated into your application, it will only render in supported browsers.
## Properties
### File URL
-The URL of the PDF file on the web. `data:application/pdf;base64,` format is supported and the input needs to be prefixed with `data:application/pdf;base64,`
+Under this property, you can enter the URL of the PDF file to display. Base64 format is also supported, the input needs to be prefixed with `data:application/pdf;base64,`.
+For example:
+```js
+{{'data:application/pdf;base64,' + components.filepicker1.file[0].base64Data}}
+```
### Scale page to width
-It can be toggled to adjust the PDF content to fit the width or height of the component
+The `Scale page to width` property automatically adjusts the PDF to fill the entire width of the component.
### Show page controls
-By default, page number, previous & next button is displayed while hovering the PDF file. It can be toggled on or off.
+By default, when hovering over the PDF file, buttons for the previous and next page, along with the page number, are displayed. They can be toggled on or off using the `Show page controls` toggle.
### Show the download
-The `Download` button on the PDF component allows you to download the pdf file. By default, Show the download button is enabled. Toggle it off to remove the `Download` button from PDF component, you can also click on the `Fx` button to set the values `{{true}}` or `{{false}}` dynamically.
+The `Download` button on the PDF component allows you to download the PDF file. By default, `Show the download` button is enabled. Toggle it off to remove the `Download` button from the PDF component.
## General
### Tooltip
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+To display instructional text when a user hovers over the PDF component, add some text under the Tooltip property.
-Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
+## Devices
-
-
-
-
-
-
-## Layout
-
-| Layout | description | Expected value |
-| --------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Property | Description | Expected value |
+| :-------------- | :---------------------------------------- | :------------------ |
+| Show on desktop | Display the component in Desktop view | Programmatically determine the value by clicking on `fx` or use the toggle switch |
+| Show on mobile | Display the component in Mobile view | Programmatically determine the value by clicking on `fx` or use the toggle switch |
## Styles
-| 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 visible after the app is deployed. By default, it's set to `{{true}}`. |
+### Visibility
+
+Toggle the `Visibility` condition on or off to control the visibility of the component. You can also programmatically change its value by clicking on the `fx` button next to it. If `{{false}}` the component will not be visible after the app is deployed. By default, it's set to `{{true}}`.
:::info
-Any property having `Fx` button next to its field can be **programmatically configured**.
+Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
-
## Exposed variables
There are currently no exposed variables for the component.
diff --git a/docs/versioned_docs/version-2.29.0/widgets/table.md b/docs/versioned_docs/version-2.29.0/widgets/table.md
index 0cd3d47a00..8983b27842 100644
--- a/docs/versioned_docs/version-2.29.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.29.0/widgets/table.md
@@ -661,7 +661,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.
@@ -702,15 +702,15 @@ Check this how-to guide to learn more about [server-side pagination](/docs/how-t
### 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)
diff --git a/docs/versioned_docs/version-2.29.0/widgets/text-input.md b/docs/versioned_docs/version-2.29.0/widgets/text-input.md
index 38221e3a54..c2076758c5 100644
--- a/docs/versioned_docs/version-2.29.0/widgets/text-input.md
+++ b/docs/versioned_docs/version-2.29.0/widgets/text-input.md
@@ -46,15 +46,15 @@ Check the **component specific actions** available for this component **[here](/
## Exposed Variables
-|
Variable
|
Description
|
How To Access
|
-|: ---------- | :---------- | :------------ |
-| 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 |
+|:--------:|:-----------:|:------------:|
+|
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}}`).|
## Validation
@@ -66,6 +66,12 @@ Check the **component specific actions** available for this component **[here](/
| Max length | Sets the maximum number of characters allowed. | Integer (e.g., `12` for a maximum of 12 characters).|
| Custom validation | Specifies a validation error message for specific conditions. | Logical Expression (e.g., `{{components.textinput1.value<5&&"Value needs to be more than 5"}}`). |
+To add regex inside `Custom Validation`, you can use the below format:
+
+**Format**: `{{(.test()) ? '' : 'Error message';}}`
+
+**Example**: `{{(/^\d{1,10}$/.test(components.textinput1.value)) ? '' : 'Error message';}}`
+
## Additional Actions
|
Action
|
Description
|
Configuration Options
|
diff --git a/docs/versioned_docs/version-2.29.0/workflows/triggers.md b/docs/versioned_docs/version-2.29.0/workflows/triggers.md
index 5855b4fa60..3e9968d1b5 100644
--- a/docs/versioned_docs/version-2.29.0/workflows/triggers.md
+++ b/docs/versioned_docs/version-2.29.0/workflows/triggers.md
@@ -13,8 +13,7 @@ Triggers can be used to execute a workflow. Currently, ToolJet supports two type
A webhook trigger allows you to run the workflow when a webhook is received. You can configure the webhook trigger from the Triggers tab. The webhook URL is unique for each workflow.
-### Creating a webhook trigger
-
+### Creating a Webhook Trigger
- Click on the **Triggers** option in the left panel to open the Triggers tab.
@@ -55,6 +54,13 @@ A webhook trigger allows you to run the workflow when a webhook is received. You
+:::info
+Currently, authentication is mandatory for webhooks. Use a bearer token in the `Authorization` header for authentication.
+**Format:**
+`Authorization: Bearer `
+**Example:**
+`Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...`
+:::
- Parameters can be passed to the workflow using the **Parameters** field. The parameter `key` and their `type` can be specified in the **Parameters** field. For example, if you want to pass the `name` and `age` parameters to the workflow using the webhook triggers, you can set the **Parameters** field as follows:
```json
@@ -81,7 +87,7 @@ A webhook trigger allows you to run the workflow when a webhook is received. You
-### Restrictions on usage of webhook triggers
+### Restrictions on Usage of Webhook Triggers
There are certain restrictions on the usage of webhook triggers that are configurable, both at the instance level and at the workspace level depending on the license. The restrictions are as follows:
@@ -111,7 +117,7 @@ In the application, simply click on the `+ Add` button in the query panel and se
-### Passing parameters
+### Passing Parameters
Parameters can be passed to the workflow from the **Params** field in the query. The parameter `key` and their `value` can be specified in the **Params** field. For example, if you want to pass the `name` and `age` parameters to the workflow using the manual triggers, you can set the **Params** field as follows:
diff --git a/docs/versioned_docs/version-2.3.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.3.0/contributing-guide/setup/macos.md
index e2c62ffd95..3d3f2e2bac 100644
--- a/docs/versioned_docs/version-2.3.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.3.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
+
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.3.0/data-sources/stripe.md b/docs/versioned_docs/version-2.3.0/data-sources/stripe.md
index e6fa073e9c..77aa839750 100644
--- a/docs/versioned_docs/version-2.3.0/data-sources/stripe.md
+++ b/docs/versioned_docs/version-2.3.0/data-sources/stripe.md
@@ -50,67 +50,67 @@ 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**
diff --git a/docs/versioned_docs/version-2.3.0/getting-started.md b/docs/versioned_docs/version-2.3.0/getting-started.md
index c33ec03c06..e79e161664 100644
--- a/docs/versioned_docs/version-2.3.0/getting-started.md
+++ b/docs/versioned_docs/version-2.3.0/getting-started.md
@@ -19,18 +19,7 @@ Once the data sources are connected, ToolJet can run **queries** on these data s
-
## How ToolJet works
@@ -168,7 +157,7 @@ ToolJet application's User interface is constructed using Components like Tables
-4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using **{{queries.tooljetdb1.data}}**. The table will be auto-populated once the table data is entered.
+4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using `{{queries.tooljetdb1.data}}`. The table will be auto-populated once the table data is entered.
diff --git a/docs/versioned_docs/version-2.3.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.3.0/how-to/serverside-pagination.md
index ed6536c270..5d6e2fcb5a 100644
--- a/docs/versioned_docs/version-2.3.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.3.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
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 datasources 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.
diff --git a/docs/versioned_docs/version-2.3.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.3.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.3.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.3.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.3.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.3.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.3.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.3.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
-- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter **{{queries.queryname.data}}** where queryname is the name of the query that we created in previous step.
+- The query will read the data from the database and we will use the returned data to populate the table. Go to the **table** property and in the table data value enter `{{queries.queryname.data}}` where queryname is the name of the query that we created in previous step.
diff --git a/docs/versioned_docs/version-2.3.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.3.0/setup/try-tooljet.md
index 59c9108cf2..6fc5128f65 100644
--- a/docs/versioned_docs/version-2.3.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.3.0/setup/try-tooljet.md
@@ -27,15 +27,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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.3.0/widgets/calendar.md b/docs/versioned_docs/version-2.3.0/widgets/calendar.md
index 115935cd52..f5799fdeee 100644
--- a/docs/versioned_docs/version-2.3.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.3.0/widgets/calendar.md
@@ -202,7 +202,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.30.0/Enterprise/white-label.md b/docs/versioned_docs/version-2.30.0/Enterprise/white-label.md
index 9f1d7b95ad..c5d4a3aad4 100644
--- a/docs/versioned_docs/version-2.30.0/Enterprise/white-label.md
+++ b/docs/versioned_docs/version-2.30.0/Enterprise/white-label.md
@@ -12,45 +12,45 @@ With this feature, you gain the ability to rebrand the following key elements:
- **Application Logo**: This includes the logo displayed on the login screen, dashboard, and app-editor.
-
+
- **Favicon**: The small icon associated with your application.
-
+
- **Page Title**: This is the text displayed next to the Favicon.
-
+
## Configuration
-To enable white labelling, you'll need to go to the **Settings** from the Dashboard and click on the `White labelling` tab. On the White labelling page, you'll be able to configure the following:
+To enable white labelling, click on the gear icon on the bottom left of the dashboard and select `Settings`. From the settings page, click on the `White labelling` tab. On the White labelling page, you'll be able to configure the following:
- **Application Logo**: Add the URL of the image you want to use as your application logo. Preferred dimensions of the logo are: width `130px` and height `26px`.
- **Favicon**: Enter the URL of the image you want to use as your application's favicon. Preferred dimensions of the favicon are: width `32px` and height `32px` or `16px` and height `16px`.
- **Page Title**: Enter the text you want to display as your application's title. Preferred title length are 50-60 characters.
-
+
## ToolJet Cloud
-If you are using ToolJet Cloud, you can enable white labelling by going to the **Settings** from the Dashboard and clicking on the `White labelling` tab. On the White labelling page, you'll be able to configure the following:
+If you are using ToolJet Cloud, click on the gear icon on the bottom left of the dashboard and select `Settings`. From the settings page, click on the `White labelling` tab. On the White labelling page, you'll be able to configure the following:
- **Application Logo**: Add the URL of the image you want to use as your application logo. Preferred dimensions of the logo are: width `130px` and height `26px`.
- **Page Title**: Enter the text you want to display as your application's title. Preferred title length are 50-60 characters.
- **Favicon**: Enter the URL of the image you want to use as your application's favicon. Preferred dimensions of the favicon are: width `32px` and height `32px` or `16px` and height `16px`.
-
+
diff --git a/docs/versioned_docs/version-2.30.0/contributing-guide/setup/macos.md b/docs/versioned_docs/version-2.30.0/contributing-guide/setup/macos.md
index f66b7ab63d..aa22f1776e 100644
--- a/docs/versioned_docs/version-2.30.0/contributing-guide/setup/macos.md
+++ b/docs/versioned_docs/version-2.30.0/contributing-guide/setup/macos.md
@@ -15,8 +15,9 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
1.1 Install Homebrew
```bash
- /bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+ /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)
```bash
brew install nvm
diff --git a/docs/versioned_docs/version-2.30.0/contributing-guide/troubleshooting/eslint.md b/docs/versioned_docs/version-2.30.0/contributing-guide/troubleshooting/eslint.md
index 924f7bfcc3..8caacce4c9 100644
--- a/docs/versioned_docs/version-2.30.0/contributing-guide/troubleshooting/eslint.md
+++ b/docs/versioned_docs/version-2.30.0/contributing-guide/troubleshooting/eslint.md
@@ -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: `{...}`**.
:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.30.0/data-sources/custom-js.md b/docs/versioned_docs/version-2.30.0/data-sources/custom-js.md
index e9064bffef..c9ac19e0ba 100644
--- a/docs/versioned_docs/version-2.30.0/data-sources/custom-js.md
+++ b/docs/versioned_docs/version-2.30.0/data-sources/custom-js.md
@@ -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.
diff --git a/docs/versioned_docs/version-2.30.0/data-sources/run-py.md b/docs/versioned_docs/version-2.30.0/data-sources/run-py.md
index 18dfaddb0b..6efd312fa1 100644
--- a/docs/versioned_docs/version-2.30.0/data-sources/run-py.md
+++ b/docs/versioned_docs/version-2.30.0/data-sources/run-py.md
@@ -53,44 +53,38 @@ queries.getSalesData.run()
To immediately access the data returned by a query in **Run Python code**, you can use the below functions:
-#### Retrieve the latest data of a query:
+#### Trigger a query and retrieve its data:
```py
-response = await queries.getSalesData.run()
+await queries.getSalesData.run()
#replace getSalesData with your query name
value = queries.getSalesData.getData()
#replace getSalesData with your query name
-
-value
```
-#### Retrieve the latest raw data of a query:
+#### Trigger a query and retrieve its raw data:
```py
-response = await queries.getCustomerData.run()
+await queries.getCustomerData.run()
#replace getCustomerData with your query name
value = queries.getCustomerData.getRawData()
#replace getCustomerData with your query name
-
-value
```
-#### Retrieve the loading state of a query:
+#### Trigger a query and retrieve its loading state:
```py
-response = await queries.getTodos.run()
+await queries.getTodos.run()
#replace getTodos with your query name
value = queries.getTodos.getLoadingState()
#replace getTodos with your query name
-
-value
```
## Get Variables
-To immediately access a variable or page variable after setting it in the **Run Python code**, you can use the below functions.
+To immediately access a variable or page variable after setting it in the **Run Python code**, you can use the below functions:
-#### Retrieve the current value of a variable:
+#### Set and retrieve a variable:
```py
actions.setVariable('mode','dark')
#replace mode with your desired variable name
@@ -99,7 +93,7 @@ actions.getVariable('mode')
#replace mode with your desired variable name
```
-#### Retrieve the current value of a page-specific variable:
+#### Set and retrieve a page-specific variable:
```py
actions.setPageVariable('number',1)
#replace number with your desired variable name
diff --git a/docs/versioned_docs/version-2.30.0/data-sources/stripe.md b/docs/versioned_docs/version-2.30.0/data-sources/stripe.md
index e6fa073e9c..77aa839750 100644
--- a/docs/versioned_docs/version-2.30.0/data-sources/stripe.md
+++ b/docs/versioned_docs/version-2.30.0/data-sources/stripe.md
@@ -50,67 +50,67 @@ 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**
diff --git a/docs/versioned_docs/version-2.30.0/how-to/access-users-location.md b/docs/versioned_docs/version-2.30.0/how-to/access-users-location.md
index 3251431595..cc65b5ea94 100644
--- a/docs/versioned_docs/version-2.30.0/how-to/access-users-location.md
+++ b/docs/versioned_docs/version-2.30.0/how-to/access-users-location.md
@@ -1,6 +1,6 @@
---
id: access-users-location
-title: Accessing User Location with RunJS Query (Geolocation API)
+title: Accessing User Location with RunJS Query
---
In this step-by-step guide we will build a ToolJet application that harnesses the power of the **JavaScript Geolocation API** to retrieve the user's location. The Geolocation API offers access to various geographical data associated with a user's device, utilizing methods such as GPS, WIFI, IP Geolocation, and more.
diff --git a/docs/versioned_docs/version-2.30.0/how-to/import-external-lib-js.md b/docs/versioned_docs/version-2.30.0/how-to/import-external-lib-js.md
index f382b49994..2da47f7552 100644
--- a/docs/versioned_docs/version-2.30.0/how-to/import-external-lib-js.md
+++ b/docs/versioned_docs/version-2.30.0/how-to/import-external-lib-js.md
@@ -1,29 +1,39 @@
---
id: import-external-libraries-using-runjs
-title: Import external libraries using RunJS
+title: Import External Libraries using RunJS
---
+
ToolJet allows you to integrate external JavaScript libraries into your application using RunJS queries. This guide walks you through the process of importing and utilizing these libraries effectively.
+
+
## Choosing Libraries
You can import various JavaScript libraries using their Content Delivery Network (CDN) links. Find the CDN links for your desired open-source projects on [jsDelivr](https://www.jsdelivr.com/).
-## 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.
+
+
+## Creating a New App and RunJS Query
+
+- Create a new app from the ToolJet Dashboard.
+- Once the app is ready, choose ToolJet's deafult **JavaScript** Data Source from the query panel.
-
+
+
+
## 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:
@@ -55,27 +65,30 @@ try {
-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.
:::
+
+
+
+
+
+
-
-
-
-
-
-
## Examples
+
+
### 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({
@@ -89,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.
-
+
@@ -101,16 +114,17 @@ 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.
-
+
diff --git a/docs/versioned_docs/version-2.30.0/how-to/run-action-from-runjs.md b/docs/versioned_docs/version-2.30.0/how-to/run-action-from-runjs.md
index 0b385d8193..c0031c4446 100644
--- a/docs/versioned_docs/version-2.30.0/how-to/run-action-from-runjs.md
+++ b/docs/versioned_docs/version-2.30.0/how-to/run-action-from-runjs.md
@@ -7,9 +7,9 @@ ToolJet allows you to execute various [actions](/docs/actions/show-alert) within
-## Run Query Action
+### Run Query
-**Syntax:**
+To trigger a query, you can use the below functions:
```js
queries.getSalesData.run()
@@ -23,117 +23,144 @@ await actions.runQuery('getSalesData')
**Example:**
-In the following screenshot, we demonstrate triggering two different queries, `getCustomers` and `updateCustomers`, using the two available syntax options for the `Run Query` action.
+In the screenshot below, we are triggering two different queries using two different syntax available for `Run Query` action.
-
+
-## Set Variable Action
+### Get Query Data
+
+In the previous section, we saw how we can trigger queries. Once the queries are triggered, if you want to immediately use the data returned by the query inside the RunJS query, you can use the `getData()`, `getRawData()` and `getLoadingState()` functions:
+
+#### Trigger a query and retrieve its data:
+
+```js
+await queries.getSalesData.run();
+// replace getSalesData with your query name
+
+let value = queries.getSalesData.getData();
+// replace getSalesData with your query name
+```
+
+#### Trigger a query and retrieve its raw data:
+
+```js
+await queries.getCustomerData.run();
+//replace getCustomerData with your query name
+
+let value = queries.getCustomerData.getRawData();
+// replace getCustomerData your with query name
+```
+
+#### Trigger a query and retrieve its loading state:
+
+```js
+await queries.getTodos.run()
+//replace getTodos with your query name
+
+let value = queries.getTodos.getLoadingState();
+//replace getTodos with your query name
+```
+
+
+
+
+
+### Set Variables
+
+To create a variable, you can use the below function:
+
+```javascript
+actions.setVariable('', ``)
+```
+
+
+
+
+
+### Unset Variable
+
+To delete a created variable, you can use the below function:
**Syntax:**
```javascript
-actions.setVariable(variableName, variableValue);
+actions.unSetVariable('')
```
-**Example:**
-
-In this example, we set two variables, `test` and `test2`. Note that `test` contains a numerical value, so it is not wrapped in quotes, while `test2` is a string and is wrapped in quotes.
-
-
-
-
-
-## Unset Variable Action
+### Get Variables
-**Syntax:**
+To access variables immediately after setting them in a RunJS query, you can use the `getVariable` and `getPageVariable` functions:
-```javascript
-actions.unSetVariable(variableName);
+#### Set and retrieve a variable:
+
+```js
+actions.setVariable('mode','dark');
+//replace mode with your desired variable name
+
+return actions.getVariable('mode');
```
-**Example:**
+#### Set and retrieve a page-specific variable:
+```js
+actions.setPageVariable('number',1);
+//replace number with your desired variable name
-In the following screenshot, we unset the variable `test2` that was created in the previous step.
-
-
-
-
+return actions.getPageVariable('number');
+```
-## Logout Action
+### Logout
-**Syntax:**
+To log out the current logged-in user from the ToolJet, use the below function:
```javascript
actions.logout();
```
-**Example:**
-
-Executing `actions.logout()` will log out the current user from ToolJet and redirect to the sign-in page.
-
-
-
-
-
-## Show Modal Action
+### Show Modal
-**Syntax:**
+To open a modal using RunJS query, use the below function:
```javascript
-actions.showModal('modalName');
+actions.showModal('')
```
-**Example:**
-
-In this example, a modal named `formModal` is present on the canvas, and we use a RunJS query to show the modal.
-
-
-
-
-
-## Close Modal Action
+### Close Modal
-**Syntax:**
+To close a modal using RunJS query, use the below function:
```javascript
-actions.closeModal('modalName');
+actions.closeModal('')
```
-**Example:**
-
-Here, we use a RunJS query to close the modal that was shown in the previous step.
-
-
-
-
-
-## Set Local Storage Action
+### Set Local Storage
+
+Set a value in local storage using the below code:
**Syntax:**
@@ -141,166 +168,101 @@ Here, we use a RunJS query to close the modal that was shown in the previous ste
actions.setLocalStorage('key', 'value');
```
-
-
-
-
-## Copy to Clipboard Action
+### Copy to Clipboard
-**Syntax:**
+Use the below code to copy content to the clipboard:
```javascript
-actions.copyToClipboard('contentToCopy');
+actions.copyToClipboard('')
```
-
-
-
-
-## Generate File Action
+### Generate File
-**Syntax:**
+The below action can be used to generate a file.
```js
-actions.generateFile('fileName', 'fileType', 'data');
+actions.generateFile('', '', '')
```
-Example for generating a CSV file:
+`fileName` is the name that you want to give the file(string), `fileType` can be **csv**, **plaintext**, or **pdf** and `data` is the data that you want to store in the file.
+
+Example for generating CSV file:
```js
-actions.generateFile('csvfile1', 'csv', '{{components.table1.currentPageData}}')
+actions.generateFile('csvfile1', 'csv', '{{components.table1.currentPageData}}') // generate a csv file named csvfile1 with the data from the current page of table
```
-Example for generating a Text file:
+Example for generating Text file:
```js
-actions.generateFile('textfile1', 'plaintext', '{{JSON.stringify(components.table1.currentPageData)}}');
+actions.generateFile('textfile1', 'plaintext', '{{JSON.stringify(components.table1.currentPageData)}}') // generate a text file named textfile1 with the data from the current page of table (stringified)
```
-Example for generating a PDF file:
+Example for generating PDF file:
```js
-actions.generateFile('Pdffile1', 'pdf', '{{components.table1.currentPageData}}');
+actions.generateFile('Pdffile1', 'pdf', '{{components.table1.currentPageData}}') // generate a text file named Pdffile1 with the data from the current page of table
```
-
-
-
-
-## Go to App Action
+### Go to App
-**Syntax:**
+You can switch to a different application using the below action:
```javascript
-actions.goToApp('slug', queryparams)
+actions.goToApp('slug',queryparams)
```
-- `slug` can be found in the URL of the released app after the `application/`, or in the `Share` modal. You can also set a custom slug for the app in the `Share` modal or from the global settings in the app builder.
-- `queryparams` can be provided like this `[{"key":"value"}, {"key2":"value2"}]`.
-- Only the apps that are released can be accessed using this action.
-
-
-
-
+- `slug` can be found in URL of the released app after `application/` or in the share modal that opens up when you click on the `Share` button on the top-right of the app-builder
+- `queryparams` can be provided in this format - `[{"key":"value"}, {"key2":"value2"}]`
-## Show Alert Action
+### Show Alert
-**Syntax:**
+To show an alert using RunJS query, use the below code:
```js
-actions.showAlert(alertType, message); // alert types are info, success, warning, and error
+actions.showAlert('' , '' )
```
-**Example:**
+Available alert types are `info`, `success`, `warning`, and `danger`.
+Example:
```js
-actions.showAlert('error', 'This is an error')
+actions.showAlert('error' , 'This is an error' )
```
-
-
-
-
-## Run Multiple Actions from RunJS Query
+### Run Multiple Actions From RunJS Query
-To run multiple actions from a RunJS query, use **async-await** in the function. Here's an example code snippet for running queries and showing an alert at specific intervals:
+To run multiple actions from a RunJS query, you'll have to use **async-await** in the function.
+
+Here is a example code snippet for running the queries and showing alert after specific intervals. Check the complete guide on running queries at specified intervals **[here](/docs/how-to/run-query-at-specified-intervals)**.
```js
-actions.setVariable('interval', setInterval(countdown, 5000));
-
-async function countdown() {
- await queries.restapi1.run();
- await queries.restapi2.run();
- await actions.showAlert('info', 'This is an information');
+actions.setVariable('interval',setInterval(countdown, 5000));
+async function countdown(){
+ await queries.restapi1.run()
+ await queries.restapi2.run()
+ await actions.showAlert('info','This is an information')
}
```
-
-
-
-## Actions on pages
-
-
-
-### Switch page
-
-To switch to a page from the JavaScript query, use the following syntax:
-
-```js
-await actions.switchPage('')
-```
-
-
-
-
-
-### Switch page with query parameters
-
-Query parameters can be passed through action such as Switch Page. The parameters are appended to the end of the application URL and are preceded by a question mark (?). Multiple parameters are separated by an ampersand (&).
-
-To switch to a page with query parameters from the JavaScript query, use the following syntax:
-
-```js
-actions.switchPage('', [['param1', 'value1'], ['param2', 'value2']])
-```
-
-
-
-
-
-### Set page variable
-
-Page variables are restricted to the page where they are created and cannot be accessed throughout the entire application like regular variables.
-
-To set a page variable from the JavaScript query, use the following syntax:
-
-```js
-await actions.setPageVariable('',)
-```
-
-
-
-
-
-This enhanced guide provides a detailed walkthrough of executing various ToolJet actions from RunJS queries.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.30.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.30.0/how-to/serverside-pagination.md
index a897b235a0..1416ee9f9d 100644
--- a/docs/versioned_docs/version-2.30.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.30.0/how-to/serverside-pagination.md
@@ -1,89 +1,92 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
-
+
-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.
-### Loading data from PostgreSQL in chunks
+### 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.
+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.
+
+
+To obtain the count of records in the users table, execute the following query:
- 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.
+```sql
+SELECT COUNT(*)
+FROM users;
+```
-- 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:
-
- ```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..data[0].count}}`.
+### Edit the Table Component
-
+**Follow the steps below to edit the properties of the Table component:**
-### Edit the Table component
+- Drag the table component to the canvas from the components library and set the value of the **Data** property to `{{queries..data}}` to populate the table with the relevant data.
-**Now, let's edit the properties of the Table component:**
-
-- Set the value of the **Table data** property to `{{queries..data}}`
-
-
-
-
-- Enable the **Server-side pagination** option
+- 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..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..data[0].count}}
- ```
-
-
-
-- 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..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
-
-
-
+- 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..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..data[0].count}}
+ ```
+
+
+
+
+
+
+- To add the loading indicator on the table component while executing the query, set the `Loading state` property as:
+
+ ```js
+ {{queries..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.
+
+
+
+
Now, whenever the page is changed, the query will be executed, and the data will be fetched from the PostgreSQL table in chunks.
-
+
+
+
diff --git a/docs/versioned_docs/version-2.30.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.30.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.30.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.30.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.30.0/how-to/use-events-on-chart.md b/docs/versioned_docs/version-2.30.0/how-to/use-events-on-chart.md
index 36fe7ae1ba..0c908fa7e2 100644
--- a/docs/versioned_docs/version-2.30.0/how-to/use-events-on-chart.md
+++ b/docs/versioned_docs/version-2.30.0/how-to/use-events-on-chart.md
@@ -1,21 +1,33 @@
---
id: use-events-on-chart
-title: Use Events on Chart
+title: Use Events on Chart Created Through Custom Component
---
+
-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.
-
+
+
+
+
+
## 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.
-## Step 2: Add the code to the Custom Component
+
+
+
+
+## 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';
@@ -24,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 (
-
-
-
-)}
+ // Define onClick handler for bars
+ const barOnClick = ({ points }) => {
+ alert('A bar is clicked');
+ };
+
+ // Render the component
+ return (
+
+
+
+ );
+};
+
+// Connect the component
const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent);
+
+// Render the connected component to the DOM
ReactDOM.render(, 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
@@ -139,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
@@ -150,113 +150,92 @@ 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
- // Material UI Container component
-
-
-)}
+ return (
+
+
+
+ );
+};
```
-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
ReactDOM.render(, document.body); // render the component
```
-## Step 3: Using events from the Custom Component
+
+
+
+
+## Step 3: Using Events from the Custom Component
In the code above, we created a function called `barOnClick` that will be called when the user clicks on the bar. This function holds the code that will be executed when the user clicks on the bar.
@@ -274,4 +253,6 @@ const barOnClick = ({points}) => {
}
```
-`runQuery` is a function which accepts a query name as a string used to run the query from the custom component. Learn more about the custom component [here](/docs/widgets/custom-component/).
\ No newline at end of file
+`runQuery` is a function which accepts a query name as a string used to run the query from the custom component. Learn more about the custom component [here](/docs/widgets/custom-component/).
+
+
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.30.0/how-to/use-s3-presigned-url-to-upload-docs.md b/docs/versioned_docs/version-2.30.0/how-to/use-s3-presigned-url-to-upload-docs.md
index 61dd6448d3..a69965a7ca 100644
--- a/docs/versioned_docs/version-2.30.0/how-to/use-s3-presigned-url-to-upload-docs.md
+++ b/docs/versioned_docs/version-2.30.0/how-to/use-s3-presigned-url-to-upload-docs.md
@@ -1,173 +1,138 @@
---
id: use-s3-signed-url-to-upload-docs
-title: Use S3 signed URL to upload documents
+title: Use S3 Signed URL to Upload Documents
---
+
-# Use S3 signed URL to upload documents
+In this how-to guide, we will upload documents to S3 buckets using the **S3 signed URL** from a ToolJet application.
-In this how-to guide, you'll learn to 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**
-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.
-:::
+
-
+## 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**.
+
+
+
+
+
-- 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.
+:::
+
+
+
+
+
+
+
+
+
+
+
+## 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.
-
+
-- 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**.
+- Running the *getBuckets* query will load all the buckets in the app's left table.
+
- :::tip
- Check the [AWS S3 datasource reference](/docs/data-sources/s3) to learn more about connnection and choosing your preferred authentication method.
- :::
-
+
-- 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.
+
+
+
+
+## Get the Objects Inside the Bucket
+
+- 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.
+
+
-
+
-- Running the **getBuckets** query will load all the buckets in the dropdown in the app.
+
+
+
+
+## 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.
-
+
-- 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.
+
+
+
+
+## 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.
+
+
+
+
+
+## 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.
-
+
-- 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
-
-
-
-
-
-
-
-- 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
- ```
-
-
-
-
-
-
-
- - 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": []
- }
- ]
- ```
- :::
-
-
-
-
-
-
-
-- 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.
-
-
-
-
-
-
-- 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.
-
-
-
-
-
-
-- 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**.
-
-
-
-
-
-
-- 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.
-
-
-
-
-
-
-- 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.
-
+
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.30.0/how-to/use-to-py.md b/docs/versioned_docs/version-2.30.0/how-to/use-to-py.md
index 9d1eeb35fe..08f8a463a0 100644
--- a/docs/versioned_docs/version-2.30.0/how-to/use-to-py.md
+++ b/docs/versioned_docs/version-2.30.0/how-to/use-to-py.md
@@ -1,6 +1,6 @@
---
id: use-to-py-function-in-runpy
-title: "Utilize the to_py() Function in RunPy: Translating JavaScript Objects to Python"
+title: "Translating JavaScript Objects to Python in RunPy"
---
This guide demonstrates the utilization of the `to_py()` function in RunPy queries for converting JavaScript objects into their corresponding Python representations.
diff --git a/docs/versioned_docs/version-2.30.0/marketplace/plugins/textract.md b/docs/versioned_docs/version-2.30.0/marketplace/plugins/textract.md
index e3d616156b..4a9e4f6d99 100644
--- a/docs/versioned_docs/version-2.30.0/marketplace/plugins/textract.md
+++ b/docs/versioned_docs/version-2.30.0/marketplace/plugins/textract.md
@@ -49,7 +49,7 @@ This operation let's you to analyze the document by providing the document data
#### Required parameters:
-- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
+- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: `{{components.filepicker1.file[0].base64Data}}`
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
diff --git a/docs/versioned_docs/version-2.30.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.30.0/setup/try-tooljet.md
index ff2bc44904..d7f5e235c7 100644
--- a/docs/versioned_docs/version-2.30.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.30.0/setup/try-tooljet.md
@@ -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.
-
-
-
-
-
-#### Setup information
-
-- Open port 80 after the docker containers are up and running
-- Visit the url shared on the dashboard to try out tooljet
diff --git a/docs/versioned_docs/version-2.30.0/widgets/bounded-box.md b/docs/versioned_docs/version-2.30.0/widgets/bounded-box.md
index 4e32edcc8e..a472dffd4f 100644
--- a/docs/versioned_docs/version-2.30.0/widgets/bounded-box.md
+++ b/docs/versioned_docs/version-2.30.0/widgets/bounded-box.md
@@ -25,7 +25,7 @@ A **bounded box** is an infinitely customizable image annotation component that
| **Property** | **Description** | **Expected value** |
| :----------- | :----------- | :----------------- |
-| **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']}}` |
diff --git a/docs/versioned_docs/version-2.30.0/widgets/button.md b/docs/versioned_docs/version-2.30.0/widgets/button.md
index b0b43280a5..b8d5f1c2bd 100644
--- a/docs/versioned_docs/version-2.30.0/widgets/button.md
+++ b/docs/versioned_docs/version-2.30.0/widgets/button.md
@@ -13,7 +13,7 @@ Button component can be used to trigger an action. It can be used to submit a fo
| Property | Description | Expected value |
| :----------- | :----------- | :----------- |
| **Button Text** | It can be used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}` |
-| **Loading state** | The loading state can be 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 can be 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}}` |
## Events
diff --git a/docs/versioned_docs/version-2.30.0/widgets/calendar.md b/docs/versioned_docs/version-2.30.0/widgets/calendar.md
index fcc162b9d6..2d0549a697 100644
--- a/docs/versioned_docs/version-2.30.0/widgets/calendar.md
+++ b/docs/versioned_docs/version-2.30.0/widgets/calendar.md
@@ -211,7 +211,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
| 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}}`|
diff --git a/docs/versioned_docs/version-2.30.0/widgets/chart.md b/docs/versioned_docs/version-2.30.0/widgets/chart.md
index c892dafff2..ff888758f2 100644
--- a/docs/versioned_docs/version-2.30.0/widgets/chart.md
+++ b/docs/versioned_docs/version-2.30.0/widgets/chart.md
@@ -305,11 +305,11 @@ Check the **[Plotly documentation](https://plotly.com/chart-studio-help/json-cha
## Exposed variables
-|
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}}`). |
+| 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`. |
diff --git a/docs/versioned_docs/version-2.30.0/widgets/form.md b/docs/versioned_docs/version-2.30.0/widgets/form.md
index e78510b19d..9227cdf2f1 100644
--- a/docs/versioned_docs/version-2.30.0/widgets/form.md
+++ b/docs/versioned_docs/version-2.30.0/widgets/form.md
@@ -321,7 +321,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: ''
@@ -339,7 +339,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 `' '` |
diff --git a/docs/versioned_docs/version-2.30.0/widgets/kanban-board.md b/docs/versioned_docs/version-2.30.0/widgets/kanban-board.md
index 22027ca856..3e20309a60 100644
--- a/docs/versioned_docs/version-2.30.0/widgets/kanban-board.md
+++ b/docs/versioned_docs/version-2.30.0/widgets/kanban-board.md
@@ -5,27 +5,33 @@ title: Kanban
# Kanban
-Kanban widget 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.
-
-
-
-
+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
-In order to avoid excessively complex situations, 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
-
-If the builder attempts to add any of the aforementioned components inside the Kanban Card or Popout, an error message will be displayed:
-
-` cannot be used as a child component within the Kanban Popout/Card.`
:::
+
+## Setting Card Data
+
+To dynamically populate Kanban cards, you can use the `cardData` key.
+
+For instance, you can set the `Data` property of a Text component on a card using the below code:
+
+```js
+{{cardData.title}}
+// Replace title with the key in your data
+```
+
## Events
-To add an event, 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, click on the component handle to open the component properties on the right sidebar. Go to the **Events** section and click on **Add handler**.
- **[On update](#on-update)**
- **[On add card click](#on-add-card-click)**
@@ -36,7 +42,7 @@ To add an event, click on the widget handle to open the widget properties on the
-
+
@@ -70,7 +76,7 @@ This event is triggered whenever a card is clicked to open the modal.
-
+
@@ -91,13 +97,13 @@ This event is triggered whenever a card is clicked to open the modal.
## General
### Tooltip
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
-Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
+Under the General accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
-
+
@@ -105,34 +111,34 @@ Under the General accordion, you can set the value in the string format.
-
+
| Layout | description | Expected value |
| --------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display the widget in desktop view. | You can programmatically set the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile | Toggle on or off to display the widget in mobile view. | You can programmatically set the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on desktop | Toggle on or off to display the component in desktop view. | You can programmatically set the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display the component in mobile view. | You can programmatically set the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
## Styles
-
+
| Style | Description |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Disable | If disabled or set to `{{false}}` the widget will be locked and becomes non-functional. By default, its disabled i.e. its value is set to `{{true}}` . |
-| Visibility | This is to control the visibility of the widget. If `{{false}}`/disabled the widget will not visible after the app is deployed. By default, it's enabled (set to `{{true}}`). |
+| Disable | If disabled or set to `{{false}}` the component will be locked and becomes non-functional. By default, its disabled i.e. its value is set to `{{true}}` . |
+| Visibility | This is to control the visibility of the component. If `{{false}}`/disabled the component will not visible after the app is deployed. By default, it's enabled (set to `{{true}}`). |
| Accent color | You can change the accent color of the column title by entering the Hex color code or choosing a color of your choice from the color picker. |
## Exposed variables
-
+
diff --git a/docs/versioned_docs/version-2.30.0/widgets/listview.md b/docs/versioned_docs/version-2.30.0/widgets/listview.md
index 7d13a07d45..a59b91a796 100644
--- a/docs/versioned_docs/version-2.30.0/widgets/listview.md
+++ b/docs/versioned_docs/version-2.30.0/widgets/listview.md
@@ -1,25 +1,46 @@
---
id: listview
-title: List view
+title: List View
---
# List view
-List view widget allows to create a list of repeatable rows of data. Just like a container widget, you can nest other widgets inside of it and control how many times they repeat.
-
-
-
-
+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
-In order to avoid excessively complex situations, certain components, namely **Calendar** and **Kanban**, are restricted from being placed within the list view component using drag-and-drop functionality.
-
-If the builder attempts to add any of the aforementioned components inside the List view, an error message will be displayed:
-
-` cannot be used as a child component within the list view.`
+Certain components, namely **Calendar** and **Kanban**, are restricted from being placed within the list view component using drag-and-drop functionality.
:::
+## Setting List Data
+
+To dynamically populate List View components, you can use specific data properties.
+
+Consider this data being passed inside a List View component's `List data` property:
+
+```js
+{{[
+ { imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 1' },
+ { imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 2' },
+ { imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 3' },
+]}}
+```
+
+Based on the above data, you can set the `Data` property of a Text component inside List View using the below code:
+
+```js
+{{listItem.text}}
+```
+
+Similarly, for an Image component inside List View, you can use the below code to pass the `imageURL` value:
+
+```js
+{{listItem.imageURL}}
+```
+
+
## Events
To attach an event handler to the list view component, follow these steps:
@@ -33,7 +54,7 @@ There are two events that you can use with the List View component:
-
+
@@ -61,7 +82,7 @@ To get detailed information about all the **Actions**, please consult the [Actio
-
+
@@ -77,16 +98,16 @@ To get detailed information about all the **Actions**, please consult the [Actio
-
+
### General
#### Tooltip
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
-Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
+Under the General accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
@@ -98,7 +119,7 @@ Under the General accordion, you can set the value in the string format.
-
+
@@ -111,16 +132,16 @@ Under the General accordion, you can set the value in the string format.
-
+
| Style | Description |
| ----------- | ----------- |
-| Background Color | You can change the background color of the widget by entering the Hex color code or choosing a color of your choice from the color picker. |
+| Background Color | You can change the background color of the component by entering the Hex color code or choosing a color of your choice from the color picker. |
| Border Color | You can change the border color of the listview 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 be 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}}`. |
+| Visibility | This is to control the visibility of the component. If `{{false}}` the component will not be 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 component 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 list view. The field expects only numerical value from `1` to `100`, default is `0`. |
:::info
@@ -129,11 +150,11 @@ 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 widget onto the canvas.
+- Let's start by creating a new app and then dragging the List view component onto the canvas.
-
+
@@ -141,32 +162,32 @@ Any property having `Fx` button next to its field can be **programmatically conf
-
+
-- Now lets edit the `List data` property of the list view widget 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 widget 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.
-
+
-- Finally, we will need to nest widgets into the first row of list view widget and the widget 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.
-
+
:::tip
-Use `{{listItem.key}}` to display data on the nested widgets. Example: For displaying the images we used `{{listItem.avatar}}` where **avatar** is one of the key in the objects from the query result.
+Use `{{listItem.key}}` to display data on the nested components. Example: For displaying the images we used `{{listItem.avatar}}` where **avatar** is one of the key in the objects from the query result.
:::
@@ -174,7 +195,7 @@ Use `{{listItem.key}}` to display data on the nested widgets. Example: For displ
-
+
@@ -197,7 +218,7 @@ All the child components of the list view component are exposed through the `chi
-
+
diff --git a/docs/versioned_docs/version-2.30.0/widgets/number-input.md b/docs/versioned_docs/version-2.30.0/widgets/number-input.md
index 02be724ac5..c6ea12ada6 100644
--- a/docs/versioned_docs/version-2.30.0/widgets/number-input.md
+++ b/docs/versioned_docs/version-2.30.0/widgets/number-input.md
@@ -48,15 +48,15 @@ Check the **component specific actions** available for this component **[here](/
## Exposed Variables
-|
Variable
|
Description
|
How To Access
|
-|: ---------- | :---------- | :------------ |
-| 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 |
+|:--------:|:-----------:|:------------:|
+|
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}}`).|
## Validation
@@ -68,6 +68,12 @@ Check the **component specific actions** available for this component **[here](/
| Max value | Sets the maximum value allowed. | Integer (e.g., `1000` for a maximum value of 1000).|
| Custom validation | Specifies a validation error message for specific conditions. | Logical Expression (e.g., `{{components.numberinput1.value<5&&"Value needs to be more than 5"}}`). |
+To add regex inside `Custom Validation`, you can use the below format:
+
+**Format**: `{{(.test()) ? '' : 'Error message';}}`
+
+**Example**: `{{(/^\d{1,10}$/.test(components.numberinput1.value)) ? '' : 'Error message';}}`
+
## Additional Actions
diff --git a/docs/versioned_docs/version-2.30.0/widgets/password-input.md b/docs/versioned_docs/version-2.30.0/widgets/password-input.md
index c401404ad0..683aebc94c 100644
--- a/docs/versioned_docs/version-2.30.0/widgets/password-input.md
+++ b/docs/versioned_docs/version-2.30.0/widgets/password-input.md
@@ -67,6 +67,12 @@ Check the **component specific actions** available for this component **[here](/
| Max length | Sets the maximum number of characters allowed. | Integer (e.g., `12` for a maximum of 12 characters).|
| Custom validation | Specifies a validation error message for specific conditions. | Logical Expression (e.g., `{{components.passwordinput1.value<5&&"Value needs to be more than 5"}}`). |
+To add regex inside `Custom Validation`, you can use the below format:
+
+**Format**: `{{(.test()) ? '' : 'Error message';}}`
+
+**Example**: `{{(/^\d{1,10}$/.test(components.passwordinput1.value)) ? '' : 'Error message';}}`
+
## Additional Actions
diff --git a/docs/versioned_docs/version-2.30.0/widgets/pdf.md b/docs/versioned_docs/version-2.30.0/widgets/pdf.md
index 8dbc206c17..90ba3e4d67 100644
--- a/docs/versioned_docs/version-2.30.0/widgets/pdf.md
+++ b/docs/versioned_docs/version-2.30.0/widgets/pdf.md
@@ -5,61 +5,66 @@ title: PDF
# PDF
-PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
+The PDF component can be used to embed PDF files either by URL or through Base64 code.
-:::info
-Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
-:::
+## Compatibility
+
+The PDF component is compatible with the following browser versions:
+
+| Browser | Version |
+|:--------|:--------------------|
+| Chrome | 92 or later |
+| Edge | 92 or later |
+| Safari | 15.4 or later |
+| Firefox | 90 or later |
+
+
+If the PDF component is integrated into your application, it will only render in supported browsers.
## Properties
### File URL
-The URL of the PDF file on the web. `data:application/pdf;base64,` format is supported and the input needs to be prefixed with `data:application/pdf;base64,`
+Under this property, you can enter the URL of the PDF file to display. Base64 format is also supported, the input needs to be prefixed with `data:application/pdf;base64,`.
+For example:
+```js
+{{'data:application/pdf;base64,' + components.filepicker1.file[0].base64Data}}
+```
### Scale page to width
-It can be toggled to adjust the PDF content to fit the width or height of the component
+The `Scale page to width` property automatically adjusts the PDF to fill the entire width of the component.
### Show page controls
-By default, page number, previous & next button is displayed while hovering the PDF file. It can be toggled on or off.
+By default, when hovering over the PDF file, buttons for the previous and next page, along with the page number, are displayed. They can be toggled on or off using the `Show page controls` toggle.
### Show the download
-The `Download` button on the PDF component allows you to download the pdf file. By default, Show the download button is enabled. Toggle it off to remove the `Download` button from PDF component, you can also click on the `Fx` button to set the values `{{true}}` or `{{false}}` dynamically.
+The `Download` button on the PDF component allows you to download the PDF file. By default, `Show the download` button is enabled. Toggle it off to remove the `Download` button from the PDF component.
## General
### Tooltip
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+To display instructional text when a user hovers over the PDF component, add some text under the Tooltip property.
-Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
+## Devices
-
-
-
-
-
-
-## Layout
-
-| Layout | description | Expected value |
-| --------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Property | Description | Expected value |
+| :-------------- | :---------------------------------------- | :------------------ |
+| Show on desktop | Display the component in Desktop view | Programmatically determine the value by clicking on `fx` or use the toggle switch |
+| Show on mobile | Display the component in Mobile view | Programmatically determine the value by clicking on `fx` or use the toggle switch |
## Styles
-| 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 visible after the app is deployed. By default, it's set to `{{true}}`. |
+### Visibility
+
+Toggle the `Visibility` condition on or off to control the visibility of the component. You can also programmatically change its value by clicking on the `fx` button next to it. If `{{false}}` the component will not be visible after the app is deployed. By default, it's set to `{{true}}`.
:::info
-Any property having `Fx` button next to its field can be **programmatically configured**.
+Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
-
## Exposed variables
There are currently no exposed variables for the component.
diff --git a/docs/versioned_docs/version-2.30.0/widgets/table.md b/docs/versioned_docs/version-2.30.0/widgets/table.md
index 0cd3d47a00..23e7f0498b 100644
--- a/docs/versioned_docs/version-2.30.0/widgets/table.md
+++ b/docs/versioned_docs/version-2.30.0/widgets/table.md
@@ -621,7 +621,7 @@ Activate this option to visually emphasize the last clicked row. **Enabling** th
To enable the selection of one or more rows from the current page of a table, you can activate the 'Bulk selection' setting in the inspector. The values of the selected rows will be exposed as '**selectedRows**'.
-### Default Selected Row
+### Default selected row
By enabling this option, you can designate a default row to be pre-selected when the app loads. This means that whenever the app is opened for the first time, a specific row will already be highlighted in the table by default. Additionally, there is an accessible variable that stores the value for this setting. You can find a list of all accessible variables **[here](#exposed-variables)**.
@@ -634,6 +634,9 @@ Example:
Please ensure that the value provided in the object corresponds to a valid id in the table to ensure proper functionality.
+### Select row on cell edit
+Enabling the `Make editable` property for a column allows the app users to edit the column. While editing, the related row will be selected by default. To stop the row from getting selected by default, turn off `Select row on cell edit`.
+
## Search Sort and Filter
@@ -661,7 +664,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.
@@ -702,15 +705,15 @@ Check this how-to guide to learn more about [server-side pagination](/docs/how-t
### 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)
diff --git a/docs/versioned_docs/version-2.30.0/widgets/text-input.md b/docs/versioned_docs/version-2.30.0/widgets/text-input.md
index 38221e3a54..c2076758c5 100644
--- a/docs/versioned_docs/version-2.30.0/widgets/text-input.md
+++ b/docs/versioned_docs/version-2.30.0/widgets/text-input.md
@@ -46,15 +46,15 @@ Check the **component specific actions** available for this component **[here](/
## Exposed Variables
-|
Variable
|
Description
|
How To Access
|
-|: ---------- | :---------- | :------------ |
-| 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 |
+|:--------:|:-----------:|:------------:|
+|
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}}`).|
## Validation
@@ -66,6 +66,12 @@ Check the **component specific actions** available for this component **[here](/
| Max length | Sets the maximum number of characters allowed. | Integer (e.g., `12` for a maximum of 12 characters).|
| Custom validation | Specifies a validation error message for specific conditions. | Logical Expression (e.g., `{{components.textinput1.value<5&&"Value needs to be more than 5"}}`). |
+To add regex inside `Custom Validation`, you can use the below format:
+
+**Format**: `{{(.test()) ? '' : 'Error message';}}`
+
+**Example**: `{{(/^\d{1,10}$/.test(components.textinput1.value)) ? '' : 'Error message';}}`
+
## Additional Actions
|
Action
|
Description
|
Configuration Options
|
diff --git a/docs/versioned_docs/version-2.30.0/workflows/triggers.md b/docs/versioned_docs/version-2.30.0/workflows/triggers.md
index 5855b4fa60..3e9968d1b5 100644
--- a/docs/versioned_docs/version-2.30.0/workflows/triggers.md
+++ b/docs/versioned_docs/version-2.30.0/workflows/triggers.md
@@ -13,8 +13,7 @@ Triggers can be used to execute a workflow. Currently, ToolJet supports two type
A webhook trigger allows you to run the workflow when a webhook is received. You can configure the webhook trigger from the Triggers tab. The webhook URL is unique for each workflow.
-### Creating a webhook trigger
-
+### Creating a Webhook Trigger
- Click on the **Triggers** option in the left panel to open the Triggers tab.
@@ -55,6 +54,13 @@ A webhook trigger allows you to run the workflow when a webhook is received. You
+:::info
+Currently, authentication is mandatory for webhooks. Use a bearer token in the `Authorization` header for authentication.
+**Format:**
+`Authorization: Bearer `
+**Example:**
+`Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...`
+:::
- Parameters can be passed to the workflow using the **Parameters** field. The parameter `key` and their `type` can be specified in the **Parameters** field. For example, if you want to pass the `name` and `age` parameters to the workflow using the webhook triggers, you can set the **Parameters** field as follows:
```json
@@ -81,7 +87,7 @@ A webhook trigger allows you to run the workflow when a webhook is received. You
-### Restrictions on usage of webhook triggers
+### Restrictions on Usage of Webhook Triggers
There are certain restrictions on the usage of webhook triggers that are configurable, both at the instance level and at the workspace level depending on the license. The restrictions are as follows:
@@ -111,7 +117,7 @@ In the application, simply click on the `+ Add` button in the query panel and se
-### Passing parameters
+### Passing Parameters
Parameters can be passed to the workflow from the **Params** field in the query. The parameter `key` and their `value` can be specified in the **Params** field. For example, if you want to pass the `name` and `age` parameters to the workflow using the manual triggers, you can set the **Params** field as follows:
diff --git a/docs/versioned_docs/version-2.33.0/Enterprise/_category_.json b/docs/versioned_docs/version-2.33.0/Enterprise/_category_.json
new file mode 100644
index 0000000000..b9b132f890
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/Enterprise/_category_.json
@@ -0,0 +1,5 @@
+{
+ "label": "Enterprise",
+ "position": 9,
+ "collapsed": true
+}
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/Enterprise/audit_logs.md b/docs/versioned_docs/version-2.33.0/Enterprise/audit_logs.md
new file mode 100644
index 0000000000..061bb49d38
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/Enterprise/audit_logs.md
@@ -0,0 +1,143 @@
+---
+id: audit_logs
+title: Audit logs
+---
+
+
Available on: Paid plans
+
+
+The audit log is the report of all the activities done in your ToolJet account. It will capture and display events automatically by recording who performed an activity, what when, and where the activity was performed, along with other information such as IP address.
+
+
+
+
+
+
+
+### Date Range
+
+Retrieve the log of events that occurred within the specified date and time range using the range picker. By default, the system loads 24-hour logs for the initial view. The maximum duration that can be specified for the "from" and "to" dates is 30 days.
+
+:::info
+Pagination at the bottom allows navigation through the pages, with each page displaying a maximum of 7 logs.
+:::
+
+
+
+
+
+
+
+### Filter Audit Logs
+
+You can apply filters to the audited events based on the following criteria.
+
+#### Select Users
+
+Choose a specific user from the dropdown list to view all their activities.
+
+#### Select Apps
+
+The dropdown will display all the apps associated with your account. Select an app to filter the logs related to that particular app.
+
+#### Select Resources
+
+| Resources | description |
+| ----------- | ----------- |
+| User | Filter all the User events like `USER_LOGIN`, `USER_SIGNUP`, `USER_INVITE`, AND `USER_INVITE_REDEEM`. |
+| App | Filter all the App events like `APP_CREATE`, `APP_UPDATE`,`APP_VIEW`,`APP_DELETE`,`APP_IMPORT`,`APP_EXPORT`,`APP_CLONE`. |
+| Data Query | Filters the events associated with Data Query like `DATA_QUERY_RUN`. |
+| Group Permission | All the events associated with Group Permissions will be filtered. Group Permissions include `GROUP_CREATE`, `GROUP_UPDATE`, `GROUP_DELETE`. |
+| App Group Permission | Within each group, you can set apps for read or edit privileges. These events get recorded as App Group Permissions. |
+
+#### Select Actions
+
+| Actions | description |
+| ----------- | ----------- |
+| USER_LOGIN | This event is recorded everytime a user logins. |
+| USER_SIGNUP | This event is recorded everytime a new signup is made. |
+| USER_INVITE | You can invite users to your account from `Manage Users` section and an event is audited everytime an invite is sent. |
+| USER_INVITE_REDEEM | This event is recorded whenever an invite is redeemed. |
+| APP_CREATE | This event is recorded when a user creates a new app. |
+| APP_UPDATE | This event is recorded whenever actions like renaming the app, making the app public, editing shareable link, or deploying the app are made. |
+| APP_VIEW | This event is logged when someone views the launched app. (public apps aren't accounted for) |
+| APP_DELETE | This event is recorded whenever a user deletes an app from the dashboard. |
+| APP_IMPORT | This event is recorded whenever a user imports an app. |
+| APP_EXPORT | This event is recorded whenever an app is exported. |
+| APP_CLONE | This event is recorded whenever a clone of the existing app is created. |
+| DATA_QUERY_RUN | This event is logged whenever a data source is added, a query is created, or whenever a query is run either from the query editor or from the launched app. |
+| GROUP_PERMISSION_CREATE | This event is recorded whenever a group is created. |
+| GROUP_PERMISSION_UPDATE | This event is recorded whenever an app or user is added to or removed from a group, or the permissions for a group are updated. |
+| GROUP_PERMISSION_DELETE | This event is recorded whenever a user group is deleted from an account. |
+| APP_GROUP_PERMISSION_UPDATE | For every app added in to user group, you can set privileges like `View` or `Edit` and whenever these privileges are updated this event is recorded. By default, the permission of an app for a user group is set to `View`. |
+
+### Understanding Log Information
+
+
+
+
+
+
+
+| Property | Description |
+| ----------- | ----------- |
+| action_type | This indicates the type of action that was logged in the event. Refer to [this](#select-actions) for more information on actions. |
+| created_at | Shows the date and time when the event was logged. |
+| id | Each logged event is assigned a unique event ID. |
+| ip_address | Displays the IP address from which the event was logged. |
+| metadata | The metadata includes two sub-properties: `tooljet_version` and `user_agent`. `tooljet_version` shows the version of ToolJet used for the event, while `user_agent` contains information about the device and browser used. |
+| organization_id | Every organization in ToolJet has a unique ID associated with it, which is recorded when an event occurs. |
+| resource_id | Different [resources](#select-resources) have their respective IDs associated with them. These IDs are assigned when the resources are created. |
+| resource_name | Shows the name of the [resources](#select-resources) that were involved in the logged event. For example, if an app was created or deleted, it will display the name of that app. |
+| resource_type | Indicates the type of the [resources](#select-resources) involved in the logged event. |
+| user_id | Each user account in ToolJet has a unique ID associated with it, which is recorded when an event occurs. |
+
+### Log file
+
+The file will contain all the data from audit logs. The log file can be created by specifying the path in the [environment variables](/docs/setup/env-vars). The log file is rotated on a daily basis and is updated dynamically every time a new audit log is generated.
+
+Learn more about **setting up the log file generation** [here](/docs/how-to/setup-rsyslog).
+
+#### Log Rotation
+
+The log file is configured to rotate on a daily basis. This means that a new log file will be created every day, ensuring efficient management and organization of audit data.
+
+#### Log File Path
+
+The path for the log file is defined using the `LOG_FILE_PATH` variable in the environment. It's important to understand that this path is relative to the home directory of the machine. For instance, if `LOG_FILE_PATH` is set to `hsbc/dashboard/log`, the resulting log file path will be structured as follows:
+```
+homepath/hsbc/dashboard/log/tooljet_log/{process_id}-{date}/audit.log
+```
+Here, `{process_id}` is a placeholder for the unique process identifier, and `{date}` represents the current date. This structured path ensures that audit logs are organized by both process and date, facilitating easy traceability and analysis.
+
+| Variable | Description |
+| -------- | --------------------------------------------------------------------------- |
+| LOG_FILE_PATH | the path where the log file will be created ( eg: tooljet/log/tooljet-audit.log) |
+
+
+Example Log file data
+
+```bash
+{
+ level: 'info',
+ message: 'PERFORM APP_CREATE OF awdasdawdwd APP',
+ timestamp: '2023-11-02 17:12:40',
+ auditLog: {
+ userId: '0ad48e21-e7a2-4597-9568-c4535aedf687',
+ organizationId: 'cf8e132f-a68a-4c81-a0d4-3617b79e7b17',
+ resourceId: 'eac02f79-b8e2-495a-bffe-82633416c829',
+ resourceType: 'APP',
+ actionType: 'APP_CREATE',
+ resourceName: 'awdasdawdwd',
+ ipAddress: '::1',
+ metadata: {
+ userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36',
+ tooljetVersion: '2.22.2-ee2.8.3'
+ }
+ },
+ label: 'APP'
+}
+```
+
+
+
diff --git a/docs/versioned_docs/version-2.33.0/Enterprise/superadmin.md b/docs/versioned_docs/version-2.33.0/Enterprise/superadmin.md
new file mode 100644
index 0000000000..a41bd68bcd
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/Enterprise/superadmin.md
@@ -0,0 +1,236 @@
+---
+id: superadmin
+title: Super Admin
+---
+
+
Available on: Paid plans
+
+A Super Admin is the user who has full access to all the Workspaces, Users, and Groups of an instance. An instance can have more than one Super Admin. A Super Admin has full control over other users' workspaces and can create users, groups, and other super admins.
+
+The user details entered while setting up ToolJet will have Super Admin privileges.
+
+## How Super Admin is different from Admin
+
+| Privilege | Admin | Super Admin |
+| --------- | ----- | ----------- |
+| Manage Users in their workspace (Invite/Archive/Unarchive) | ✅ | ✅ |
+| Manage Groups in their workspace (Create Group/Add or Delete Users from groups/ Modify Group Permissions) | ✅ | ✅ |
+| Manage SSO in their workspace | ✅ | ✅ |
+| Manage Workspace Variables in their workspace | ✅ | ✅ |
+| Manage Workspace Constants in their workspace | ✅ | ✅ |
+| [Manage data sources for the user group in their workspace](/docs/data-sources/overview#permissions) | ✅ | ✅ |
+| [Access any user's personal workspace (create, edit or delete apps)](#access-any-workspace) | ❌ | ✅ |
+| [Archive Admin or any user of any workspace](#archiveunarchive-users) | ❌ | ✅ |
+| [Access any user's ToolJet database (create, edit or delete database)](#access-tooljet-db-in-any-workspace) | ❌ | ✅ |
+| [Manage any workspace's setting (Groups/SSO/Workspace constants)](#manage-workspace-setting-groupsssoworkspace-constants) | ❌ | ✅ |
+| [Manage all users from all the workspaces in the instance](#manage-all-users-in-the-instance) | ❌ | ✅ |
+| [Archive/Unarchive any user from all the workspaces in the instance](#archiving-a-user-from-all-the-workspaces-instance-level) | ❌ | ✅ |
+| [Reset password of any user](#reset-password-of-any-user) | ❌ | ✅ |
+| [Edit name of any user](#edit-name) | ❌ | ✅ |
+| [Make any user Super Admin](#make-the-user-super-admin) | ❌ | ✅ |
+| [Manage all workspaces in the instance(Archive/Unarchive)](#all-workspaces) | ❌ | ✅ |
+| [Restrict creation of personal workspace of users](#restrict-creation-of-personal-workspace-of-users) | ❌ | ✅ |
+| [Configure instance level login](#instance-login) | ❌ | ✅ |
+| [Enable Multiplayer editing](#enable-multiplayer-editing) | ❌ | ✅ |
+| [Implement White Labelling](#white-labelling) | ❌ | ✅ |
+
+## Super Admin features
+
+### Access any workspace
+
+If a user is a Super Admin, they can switch to any workspace created by any user within the instance using the Workspace Switcher located in the bottom left corner of the screen.
+
+The dropdown will display all workspaces, including those created by both Super Admins and any other users.
+
+
+
+
+
+### Create, Edit or Delete apps from any user's personal workspace
+
+Once the Super Admin access the workspace of any other user, they can create, edit or delete app on the workspace.
+
+This also includes - modifying folders and importing, exporting, or cloning apps to any user's workspace.
+
+### Archive/Unarchive Users
+
+Super Admin can not only archive/unarchive users/admins on their workspace but also from the workspaces of any other user.
+
+If a user is Super Admin, they just need to open the workspace in which they want to archive or unarchive a user. Then go to the **Workspace Settings** from the sidebar -> **Manage Users** -> **Archive/Unarchive** any user/admin
+
+
+
+
+
+### Access ToolJet DB in any workspace
+
+Super Admins have access to the database of any user's workspace - just like Super Admins can access any application in any workspace. They have full access to modify or create any table in the ToolJet DB of any workspace.
+
+### Manage Workspace Settings (Groups/SSO/Workspace constants)
+
+Super Admins have all the privileges that an Admin of a workspace have, Super Admins can:
+- **✅ Manage Groups**: Creating/Deleting/Updating a Group in any workspace
+- **✅ Manage SSO**: Full control over General Settings, Password login and other SSO options
+- **✅ Workspace Variables**: Adding, updating or deleting workspace variables
+- **✅ Workspace Constants**: Adding, updating or deleting workspace constants
+- **✅ Copilot**: Enabling or disabling Copilot
+- **✅ Custom Styles**: Adding or modifying custom styles
+
+## Settings
+
+Only Super Admins can access the Settings. To access the Settings page, click on the **⚙️** button and select **Settings** from the dropdown.
+
+- **[All Users](#all-users)**
+- **[All workspaces](#all-workspaces)**
+- **[Manage instance settings](#manage-instance-settings)**
+- **[License](#license)**
+- **[White labelling](#white-labelling)**
+
+
+
+
+
+## All Users
+
+### Manage all users in the instance
+
+**All Users** settings can be used to check the list of all the users available on all the workspaces in the instance. Super Admins can also promote/demote any user to/from Super Admin from this page. They can also archive/unarchive any user at an instance level from this setting.
+
+
+
+
+
+### Archiving a user from all the workspaces (Instance level)
+
+Super Admins have the authority to deactivate any user at instance level. This will remove the user from all the workspaces in the instance.
+
+To archive a user, go to the **All Users** settings, click on the kebab menu next to the user that is to be archived and select **Archive** option. Once the user is archived, the status will change from **Active** to **Archived**. The user will not be able to login to any workspace in the instance.
+
+
+
+
+
+
+
+**Unarchiving** a user from **All Users** settings will unarchive the user from the instance and not at workspace level.
+
+**Info**: The user will be unarchived from instance level automatically if a workspace admin unarchives the user from their workspace.
+
+
+
+
+
+### Reset password of any user
+
+Super Admins can reset the password of any user from the **All Users** settings. To reset the password, click on the kebab menu next to the user and select **Reset Password** option. A pop-up will appear asking either to auto-generate a password or to enter a new password.
+
+### Edit user details
+
+Super Admins can edit the details of any user from the **All Users** settings. To edit the details, click on the kebab menu next to the user and select **Edit user details** option.
+
+#### Edit name
+
+On selecting the **Edit user details** option, a drawer will open from the right. Super Admins can edit the name of the user from this drawer. Once the changes are made, click on the **Update** button.
+
+#### Make the user Super Admin
+
+From the **Edit user details** drawer, Super Admins can make any user as Super Admin or remove any Super Admin from the **All Users** settings. To make a user Super Admin, toggle on the **Super Admin** radio button. The user will become Super Admin and the Type column will update from **`Workspace`** to **`Instance`**.
+
+
+
+
+
+## All workspaces
+
+The All Workspaces tab provides a comprehensive view of all workspaces within the ToolJet instance. Super Admins can use this functionality to monitor and manage workspaces collectively, ensuring efficient administration and organization-wide oversight.
+
+Super Admins have the authority to **archive** or **unarchive** workspaces of any user in the instance as needed. Archiving a workspace essentially sets it to an inactive state, removing it from active use. Conversely, unarchiving reactivates a previously archived workspace, making it accessible once again.
+
+
+
+
+
+### Current Workspace
+
+The **Current Workspace** label will be displayed next to the workspace that the Super Admin has currently opened. If the Super Admin archives the current workspace, they will be prompted to switch to another active workspace to ensure continuous accessibility.
+
+### Open Active Workspaces
+
+In the list of active workspaces, there is an option to open the workspace directly. This feature helps superadmins to quickly navigate to the workspace on the new tab of the browser and manage the workspace.
+
+### Archive Workspaces
+
+The **Archive** button on the right of the workspace name allows Super Admins to archive the workspace. Once archived, the workspace will be moved to the **Archived Workspaces** section.
+
+**Impact**:
+- The apps on the archived workspace won't be accessable through the URL
+- Users will be logged out if they don't have access to any active workspace
+
+### Archived Workspaces
+
+The **Archived** section displays a list of all archived workspaces. Super Admins can unarchive any workspace from this section by clicking the **Unarchive** button.
+
+
+
+
+
+## Manage instance settings
+
+
+
+
+
+### Restrict creation of personal workspace of users
+
+When a user joins a workspace, they are provided with their own personal workspace and option to create new workspaces.
+
+Super Admins can **control** this behavior from the Manage Settings page, they can **toggle off** the option to **Allow personal workspace**. Now whenever a user joins a workspace they won't be provided a personal workspace nor they will be able to create a new workspace in the instance.
+
+### Enable multiplayer editing
+
+Super Admins can enable multiplayer editing from the Manage Settings page. Once enabled, users will be able to edit the same app simultaneously resulting in real-time collaboration.
+
+### Comments
+
+Super Admins can enable comments from the Manage Settings page. Once enabled, users will be able to collaborate by adding comments anywhere on the canvas.
+
+## White labelling
+This feature allows you to customize the ToolJet instance with your own branding. You can change the logo, favicon, and the name of the instance.
+
+Check out the [White labelling](/docs/enterprise/white-label/) page for more details.
+
+## Instance login
+
+Instance login configuration at the Settings level allows super admins to set up and manage the default login method for all workspaces within the instance. This ensures a standardized login experience unless individual workspace admins choose to configure a different method for their specific workspace.
+
+### Access and permissions
+
+Only super admins have the authority to configure **Instance login** settings. This ensures centralized control over the default login method across the entire instance.
+
+### Super Admin URL
+
+This URL serves as a fail-safe in scenarios where password login is disabled, SSO is not configured, or a paid plan expires. Importantly, this URL exclusively supports password login and is accessible only by the super admin, preventing any unauthorized access.
+
+The default URL for super admin login is `https:///login/super-admin`. This URL can be accessed by the super admin to log in to the instance and manage the settings.
+
+### Enable sign-up
+
+The "Enable Sign Up" option allows users to sign up without being invited. It is important to note that this feature includes both password login and SSO, providing a seamless onboarding experience for users.
+
+### Password login
+
+Super admins can enable or disable password login for the entire instance. This setting ensures that all workspaces within the instance adhere to the same login method, unless individual workspace admins choose to configure a different method for their specific workspace.
+
+### Enable workspace configuration
+
+Turning off this option restricts workspace admins from configuring the login method for their workspace. This configuration hides the Workspace Login option from the workspace settings tab.
+
+
+
+
+
+## License
+
+Manage the instance license via the **Settings** page. Super Admins have the capability to update the instance's license key from this page.
+
+Check out the [License](/docs/licensing) page for more details.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/Enterprise/white-label.md b/docs/versioned_docs/version-2.33.0/Enterprise/white-label.md
new file mode 100644
index 0000000000..b365ba2073
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/Enterprise/white-label.md
@@ -0,0 +1,55 @@
+---
+id: white-label
+title: White Label
+---
+
+
Available on: Paid plans
+
+The White Label feature allows you to completely remove ToolJet's branding from the ToolJet platform, allowing you to replace it with your own customized logo, favicon and page title. This feature grants you full control over the visual identity of your ToolJet-powered application, ensuring a seamless and personalized user experience.
+
+With this feature, you gain the ability to rebrand the following key elements:
+
+- **Application Logo**: This includes the logo displayed on the login screen, dashboard, and app-editor.
+
+
+
+
+
+- **Favicon**: The small icon associated with your application. It is displayed in the browser tab.
+
+- **Page Title**: This is the text displayed in the browser tab.
+
+Example, we have set a favicon image and page title as `Bon Ton` in the below image.
+
+
+
+
+
+## Configuration
+
+To enable white labelling, click on the gear icon on the bottom left of the dashboard and select `Settings`. From the settings page, click on the `White labelling` tab. On the White labelling page, you'll be able to configure the following:
+
+- **Application Logo**: Add the URL of the image you want to use as your application logo. Preferred dimensions of the logo are: width `130px` and height `26px`.
+- **Favicon**: Enter the URL of the image you want to use as your application's favicon. Preferred dimensions of the favicon are: width `32px` and height `32px` or `16px` and height `16px`.
+- **Page Title**: Enter the text you want to display as your application's title. Preferred title length are 50-60 characters.
+
+
+
+
+
+
+
+## ToolJet Cloud
+
+If you are using ToolJet Cloud, click on the gear icon on the bottom left of the dashboard and select `Settings`. From the settings page, click on the `White labelling` tab. On the White labelling page, you'll be able to configure the following:
+
+- **Application Logo**: Add the URL of the image you want to use as your application logo. Preferred dimensions of the logo are: width `130px` and height `26px`.
+- **Page Title**: Enter the text you want to display as your application's title. Preferred title length are 50-60 characters.
+- **Favicon**: Enter the URL of the image you want to use as your application's favicon. Preferred dimensions of the favicon are: width `32px` and height `32px` or `16px` and height `16px`.
+
+
+
+
+
+
+
diff --git a/docs/versioned_docs/version-2.33.0/actions/_category_.json b/docs/versioned_docs/version-2.33.0/actions/_category_.json
new file mode 100644
index 0000000000..f5b2dfe045
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/_category_.json
@@ -0,0 +1,5 @@
+{
+ "label": "Actions Reference",
+ "position": 7,
+ "collapsed": true
+}
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/actions/close-modal.md b/docs/versioned_docs/version-2.33.0/actions/close-modal.md
new file mode 100644
index 0000000000..bb772142f9
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/close-modal.md
@@ -0,0 +1,19 @@
+---
+id: close-modal
+title: Close modal
+---
+
+Use this action to close the modal that is already shown.
+
+Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+
+
+
+
+
+
diff --git a/docs/versioned_docs/version-2.33.0/actions/control-component.md b/docs/versioned_docs/version-2.33.0/actions/control-component.md
new file mode 100644
index 0000000000..61f653d21e
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/control-component.md
@@ -0,0 +1,102 @@
+---
+id: control-component
+title: Control component (Component Specific Actions)
+---
+
+Control component action invokes the component specific actions. Component specific actions are the actions that are exclusive actions for a particular component. Component specific actions can be triggered either through the event handlers or from the Run JavaScript code query.
+
+You can find the component specific actions for the specific component in their respective documentation. For example, you can find the component specific actions for the **Bounded Box** component in the [Bounded Box](/docs/widgets/bounded-box) documentation.
+
+
+ Currently, Component specific actions are supported only by the below listed components.
+
+
+
+:::info
+Check out the **[demo](https://youtu.be/JIhSH3YeM3E)** of Component specific actions demonstrated in one of our community call.
+:::
+
+## Using Component Specific Actions
+
+### Set a value for text input component using button's event handler
+
+- Drag a **Text Input** and a **Button** component onto the canvas.
+
+- Go to the **Inspector** on the left sidebar to check the exposed variables available for the `textinput1` component under the `components`. You'll see that the variable `value` is an empty string because the field value of the text input component is empty right now.
+
+
+
+
+
+
+
+- Now enter some value in the text input component and you'll see that the `value` in inspector has been updated.
+
+
+
+
+
+
+
+- Now, click on the button's component handler to open up its properties in the right sidebar and then add a event handler for **On Click** event to trigger **Control Component** action. Select `textinput1` in component dropdown, `Set text` as Action, and in `Text` field enter the text that you want to update in the field value.
+
+
+
+
+
+
+
+- Now when you'll click on the button you'll see that the field value of the text input component has been updated with value that you set.
+
+
+
+
+
+
+
+
+### Clear value of text input component using JavaScript query
+
+- Let's clear the value that we set in the previous section, using Run JavaScript code. Create a new Run JavaScript Code query and call the component and the CSA that component provides.
+
+**Syntax:**
+```js
+await components.textinput1.clear()
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Finally, hit the **save and run** query button to fire up the query, and you'll see that the field value of the text input component has been cleared.
+
diff --git a/docs/versioned_docs/version-2.33.0/actions/copy-to-clipboard.md b/docs/versioned_docs/version-2.33.0/actions/copy-to-clipboard.md
new file mode 100644
index 0000000000..81f97c360e
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/copy-to-clipboard.md
@@ -0,0 +1,18 @@
+---
+id: copy-to-clipboard
+title: Copy to clipboard
+---
+
+Use this action to copy the text to the clipboard.
+
+Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+
+
+
+
+
diff --git a/docs/versioned_docs/version-2.33.0/actions/generate-file.md b/docs/versioned_docs/version-2.33.0/actions/generate-file.md
new file mode 100644
index 0000000000..5e969b87a8
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/generate-file.md
@@ -0,0 +1,56 @@
+---
+id: generate-file
+title: Generate file
+---
+
+# Generate file
+
+This action allows you to construct files on the fly and let users download it.
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| Type | Type of file to be generated. Types: `CSV`, `Text` and `PDF` |
+| File name | Name of the file to be generated |
+| Data | Data that will be used to construct the file. Its format will depend on the file type, as specified in the following section |
+| Debounce | Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300` |
+
+:::tip
+Check how to run **[generate file action using RunJS](/docs/how-to/run-actions-from-runjs/#generate-file)**.
+:::
+
+### CSV Data Format
+
+To use the `CSV` file format, the data field should contain an array of objects. ToolJet assumes that the keys in each object are the same and represent the column headers of the CSV file.
+
+Example:
+
+```javascript
+{{
+ [
+ { name: 'John', email: 'john@tooljet.com' },
+ { name: 'Sarah', email: 'sarah@tooljet.com' },
+ ]
+}}
+```
+
+Using the above code snippet will generate a CSV file with the following content:
+
+```csv
+name,email
+John,john@tooljet.com
+Sarah,sarah@tooljet.com
+```
+
+### Text Data Format
+
+To use the `Text` file format, the data field should contain a string.
+
+If you want to generate a text file based on an array of objects, you need to stringify the data before providing it.
+
+For example, if you are using the table component to provide the data, you can enter **`{{JSON.stringify(components.table1.currentPageData)}}`** in the Data field.
+
+### PDF data format
+
+The PDF data format supports two types of input: either a `string` or an `array of objects`. When using an array of objects, the resulting PDF will display the data in a tabular format with columns and rows. On the other hand, if a string is provided, the generated PDF will consist of plain text.
diff --git a/docs/versioned_docs/version-2.33.0/actions/go-to-app.md b/docs/versioned_docs/version-2.33.0/actions/go-to-app.md
new file mode 100644
index 0000000000..e38e00468e
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/go-to-app.md
@@ -0,0 +1,18 @@
+---
+id: go-to-app
+title: Go to app
+---
+
+This action allows you to open any released ToolJet application when an event occurs. Only the apps that are released can be opened using this action.
+
+Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/actions/logout.md b/docs/versioned_docs/version-2.33.0/actions/logout.md
new file mode 100644
index 0000000000..0e3187471c
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/logout.md
@@ -0,0 +1,18 @@
+---
+id: logout
+title: Logout
+---
+
+This action allows you to log out of the application (ToolJet).
+
+Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/actions/open-webpage.md b/docs/versioned_docs/version-2.33.0/actions/open-webpage.md
new file mode 100644
index 0000000000..749b205eb9
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/open-webpage.md
@@ -0,0 +1,18 @@
+---
+id: open-webpage
+title: Open webpage
+---
+
+You can use this action to open a webpage(on a new tab) for any event.
+
+Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/actions/run-query.md b/docs/versioned_docs/version-2.33.0/actions/run-query.md
new file mode 100644
index 0000000000..55eb1f16aa
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/run-query.md
@@ -0,0 +1,18 @@
+---
+id: run-query
+title: Run Query
+---
+
+This action allows you to fire queries when an event occurs.
+
+Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/actions/set-localstorage.md b/docs/versioned_docs/version-2.33.0/actions/set-localstorage.md
new file mode 100644
index 0000000000..bfa52c0a5e
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/set-localstorage.md
@@ -0,0 +1,58 @@
+---
+id: set-localstorage
+title: Set localStorage
+---
+
+# Set localStorage
+
+This action allows you to specify a `key` and its corresponding `value` to be stored in local storage of the browser. Local storage can be useful in a lot of scenarios. Some of the most common use cases of the local storage includes:
+- Saving form values so that users don't accidentally lose them if they reload the page
+- Storing any kind of data that is not going to be transferred to the database
+
+
+
+## Example: Setting a Component Value Based on Local Storage
+
+1. Add **Text Input**, **Button** and **Text** components to the canvas.
+
+
+
+
+
+
+2. Select the Button, add a new event handler, and add a `Set local storage` action with `key` set to `localtest` and `value` set to `{{components.textinput1.value}}`.
+
+
+
+
+
+ This will set a local storage value with `localtest` as the key and the value entered in the Text Input component as its value.
+
+3. Create a `Run JavaScript code` query, and enter the code below:
+
+ ```js
+ return localStorage.getItem("localtest");
+ ```
+
+
+
+
+ Click on the **Run** button in the Query Panel. This query will fetch the `localtest` local storage variable that we had set earlier.
+
+4. Select the **Text** component. Under its `Text` property, enter `{{queries.runjs1.data}}`. Now, the Text component will display the value returned by the `Run JavaScript code` query - the local variable we had set earlier.
+
+
+
+
+5. Select the Button component. Add a new event handler to it, add a `Run query` action, select `runjs1` as the query, and set a debounce of `300`.
+
+
+
+
+ Now, every time you click on the Button component, it will set the local storage value, and the Text component will display the value set in local storage.
+
+ :::info
+ Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+ :::
+
+
diff --git a/docs/versioned_docs/version-2.33.0/actions/set-page-var.md b/docs/versioned_docs/version-2.33.0/actions/set-page-var.md
new file mode 100644
index 0000000000..5c50bab3ee
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/set-page-var.md
@@ -0,0 +1,36 @@
+---
+id: set-page-variable
+title: Set page variable
+---
+
+Page variables are restricted to the page where they are created and cannot be accessed throughout the entire application like regular variables.
+
+Use this action to establish a variable and assign a value to it within the [Multipage Apps](/docs/tutorial/pages).
+
+By default, the debounce field is left empty. However, you can input a numeric value to indicate the time in milliseconds before the action is executed. For example, `300`.
+
+
+
+
+
+
+
+## Using RunJS query to set page variable
+
+Alternatively, the set page variable action can be triggered via a RunJS query using the following syntax:
+```js
+await actions.setPageVariable('',)
+```
+
+`variablekey` must be provided as a string (enclosed in quotes), while the `variablevalue` does not require quotation marks if it is a numerical value.
+
+
+
+
+
+
+
+:::info
+For instructions on how to run actions from a RunJS query, refer to the how-to guide [Running Actions from RunJS Query](/docs/how-to/run-actions-from-runjs).
+:::
+
diff --git a/docs/versioned_docs/version-2.33.0/actions/set-table-page.md b/docs/versioned_docs/version-2.33.0/actions/set-table-page.md
new file mode 100644
index 0000000000..6c6414650c
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/set-table-page.md
@@ -0,0 +1,24 @@
+---
+id: set-table-page
+title: Set Table Page
+---
+
+Use this action to change the page index in the table widget.
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| Table | Select table from the dropdown |
+| Page Index | Numerical value for the page index. ex: `{{2}}` |
+| Debounce | Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300` |
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/actions/set-variable.md b/docs/versioned_docs/version-2.33.0/actions/set-variable.md
new file mode 100644
index 0000000000..ef611d43ba
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/set-variable.md
@@ -0,0 +1,24 @@
+---
+id: set-variable
+title: Set variable
+---
+
+This action allows you to create a variable and assign a `value` to it.
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| Key | Name(String) of the variable through which you can access the value |
+| Value | A value can be a string, number, boolean expression, array, or object |
+| Debounce | Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300` |
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/actions/show-alert.md b/docs/versioned_docs/version-2.33.0/actions/show-alert.md
new file mode 100644
index 0000000000..f92ec12cd7
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/show-alert.md
@@ -0,0 +1,23 @@
+---
+id: show-alert
+title: Show alert
+---
+
+This action allows you to display an alert message.
+
+You can set a custom **message** for the alert and choose a particular alert type.
+
+There are 4 types of alert messages - **Info**, **Success**, **Warning**, and **Error**.
+
+Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+
+
+
+
+
+
diff --git a/docs/versioned_docs/version-2.33.0/actions/show-modal.md b/docs/versioned_docs/version-2.33.0/actions/show-modal.md
new file mode 100644
index 0000000000..10f5d9ab17
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/show-modal.md
@@ -0,0 +1,18 @@
+---
+id: show-modal
+title: Show modal
+---
+
+Use this action to show the modal for an event.
+
+Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/actions/switch-page.md b/docs/versioned_docs/version-2.33.0/actions/switch-page.md
new file mode 100644
index 0000000000..2438fb45e7
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/switch-page.md
@@ -0,0 +1,55 @@
+---
+id: switch-page
+title: Switch Page
+---
+
+Utilize this action with various event handler to transition to a different page within the [Multipage App](/docs/tutorial/pages).
+
+By default, the debounce field is left empty. However, you can input a numeric value to indicate the time in milliseconds before the action is executed. For example, `300`.
+
+
+
+
+
+
+
+## Query Params
+
+Query parameters can be passed through action such as `Switch Page`. The parameters are appended to the end of the application URL and are preceded by a question mark (`?`).
+
+Query parameters are composed of key-value pairs, where the `key` and `value` are separated by an equals sign (`=`). Multiple query parameters can be included by clicking on the `+` button.
+
+
+
+
+
+
+
+In the above screenshot, we have provided the `username` as the key and the value is `{{globals.currentUser.email}}` which gets the email of the signed in user dynamically. When the button is clicked to trigger the `Switch Page` event handler attached to it then the URL on the switched page will have the parameters.
+
+They are commonly used to provide additional information to the server or to modify the behavior of a web page. They can be used for filtering search results, pagination, sorting, and various other purposes.
+
+
+
+
+
+
+
+## Using RunJS query to switch page
+
+Alternatively, the switch page action can be activated via a RunJS query using the following syntax:
+```js
+await actions.switchPage('')
+```
+
+:::info
+For instructions on how to run actions from a RunJS query, refer to the how-to guide [Running Actions from RunJS Query](/docs/how-to/run-actions-from-runjs).
+:::
+
+### Switch page with query params
+
+The switch page action can also be triggered along with query parameters using the following syntax:
+
+```js
+actions.switchPage('', [['param1', 'value1'], ['param2', 'value2']])
+```
diff --git a/docs/versioned_docs/version-2.33.0/actions/unset-page-var.md b/docs/versioned_docs/version-2.33.0/actions/unset-page-var.md
new file mode 100644
index 0000000000..933721c12d
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/unset-page-var.md
@@ -0,0 +1,27 @@
+---
+id: unset-page-variable
+title: Unset page variable
+---
+
+Utilize this action to clear a variable that was established using the [set page variable action](/docs/actions/set-page-variable).
+
+By default, the debounce field is left empty. However, you can input a numeric value to indicate the time in milliseconds before the action is executed. For example, `300`.
+
+
+
+
+
+
+
+## Using RunJS query to unset variable
+
+Alternatively, the unset page variable action can be triggered via a RunJS query using the following syntax:
+```js
+await actions.unsetPageVariable('')
+```
+
+`variablename` is the key of the variable that was provided while creating the variable.
+
+:::info
+For instructions on how to run actions from a RunJS query, refer to the how-to guide [Running Actions from RunJS Query](/docs/how-to/run-actions-from-runjs).
+:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/actions/unset-variable.md b/docs/versioned_docs/version-2.33.0/actions/unset-variable.md
new file mode 100644
index 0000000000..1e6b35f99f
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/actions/unset-variable.md
@@ -0,0 +1,23 @@
+---
+id: unset-variable
+title: Unset variable
+---
+
+This action allows you to remove the variable variable that was created using the set variable action.
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| Key | Name(String) of the variable through which you can access the value |
+| Debounce | Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300` |
+
+:::info
+You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
+:::
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/app-builder/canvas.md b/docs/versioned_docs/version-2.33.0/app-builder/canvas.md
new file mode 100644
index 0000000000..99d2a75318
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/app-builder/canvas.md
@@ -0,0 +1,67 @@
+---
+id: canvas
+title: Canvas
+---
+
+Canvas is the center area of the ToolJet app builder where the application is built. You arrange the **components** by dragging them from the Components library(right-sidebar).
+
+
+
+
+
+
+
+
+:::info
+- The Canvas height and width can be adjusted from the [Global Settings](/docs/app-builder/left-sidebar#global-settings).
+- When the [Pages drawer](/docs/tutorial/pages) on the left is opened or pinned, the canvas becomes horizontally scrollable.
+
+
+
+
+
+
+:::
+
+### Arrange Components
+
+All the components are fully interactive in editor mode - to prevent interaction you can **click and hold** the **Component Handle** to change component's position.
+
+
+
+
+
+
+
+### Resize Components
+
+Components on the canvas can be resized from the edges.
+
+You can precisely set the position of selected components using keyboard arrow keys after clicking the component handle.
+
+
+
+
+
+
+
+### Group Components
+
+ToolJet comes with flexible components to group other components together, such as **[Container](/docs/widgets/container/)** and **[Form](/docs/widgets/form/)**. When you drag and drop components in containers/forms they create a group of nested components. All components can be nested in this way.
+
+### Hide or Disable Components
+
+Hide or Disable a component by setting its **Visibility** or **Disabled** property to `true`. Click on the component handle to open **config inspector** on right side. These values can also evaluate to true based on a truthy value. For example, you can use the property of one component to toggle the Visibility property of another component dynamically, you just need to write a conditional statement.
+
+For example: We want to disable a button when a checkbox is checked so we can simple use `{{components.checkbox1.value}}` in **Disable** property of the button. `{{components.checkbox1.value}}` evaluates to `true` when the checkbox is checked, and false when unchecked.
+
+
+
+
+
+
+
+### Clone Components
+
+You can clone existing components on the canvas by **cmd/ctrl + d**. Check other **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)**.
+
diff --git a/docs/versioned_docs/version-2.33.0/app-builder/customcss.md b/docs/versioned_docs/version-2.33.0/app-builder/customcss.md
new file mode 100644
index 0000000000..9e3f5abcd5
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/app-builder/customcss.md
@@ -0,0 +1,56 @@
+---
+id: customstyles
+title: Custom Styles
+---
+
+
Available on: Paid plans
+
+Custom Styles feature enables the implementation of theming on ToolJet apps, allowing users to inject their own CSS styling to override the default app styling. This feature fulfills the requirement of allowing users to easily customize the appearance of their apps.
+
+Custom Styles helps in maintaining consistent themes across the ToolJet apps, alleviating the repetitive burden of styling components whenever a new app is created. By enabling users to apply standardized styles, this feature ensures that each app adheres to a unified theme without the need to manually restyle the components from scratch. As a result, the ToolJet app development process becomes more efficient, and the visual coherence of the apps is preserved, providing users with a seamless experience across all applications.
+
+
+
+
+
+
+
+## Applying Custom Styles
+
+To add Custom Styles to ToolJet apps, users should follow these steps:
+
+1. Go to the **Custom Styles** Page, accessible under **Workspace Settings** from the ToolJet dashboard.
+
+
+
+
+
+
+2. When creating a new app on ToolJet, the default button color is **blue**. If you wish to change the default button color to **red**, you must identify the class of the button component, which follows the format `_tooljet-`.
+ - The browser's inspector can also help you find the class of the component. Classes are added for both **pages** and **components**, and there are two types of selectors for classes: **Common** (`_tooljet-`) and **Individual** (`_tooljet-`).
+
+
+
+
+
+
+3. Once the class (**`_tooljet-Button`**) is identified, navigate to the Custom Styles page and apply the desired CSS changes for that class, as shown in the following CSS code:
+ ```css
+ ._tooljet-Button button {
+ background: red !important;
+ }
+ ._tooljet-Button button:hover {
+ background: green !important;
+ }
+ ```
+
+4. By applying this custom styles, all future instances of the app will have buttons with a red default color, and they will turn green on hover. This eliminates the need for users to individually edit button properties, streamlining the customization process.
+ :::info
+ Custom Styles are injected at the workspace level, ensuring consistent theming across all apps within the workspace.
+ :::
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/app-builder/import-export-apps.md b/docs/versioned_docs/version-2.33.0/app-builder/import-export-apps.md
new file mode 100644
index 0000000000..8d1667cd09
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/app-builder/import-export-apps.md
@@ -0,0 +1,46 @@
+---
+id: importing-exporting-applications
+title: Importing and Exporting Applications
+---
+
+This documentation explains the process of exporting and importing applications in ToolJet.
+
+
+
+## 1. Exporting Applications
+
+- Navigate to the dashboard.
+- Click on the settings icon located in the top right corner of the application.
+- Click on the **Export app** button.
+
+
+
+
+
+- If you select `Export All`, all the versions of the application will be exported in JSON format. If you select `Export selected version`, only the selected version will be exported in JSON format.
+- Ticking the `Export ToolJet table schema` checkbox will also export the related ToolJet Database table schemas with your application. In this case, when you import the application in a workspace, the related ToolJet Database tables will also be created.
+
+
+
+
+
+
+
+
+
+## 2. Importing Applications
+
+- Navigate to the dashboard.
+- Click on the ellipses on the **Create new app** button and select `Import`.
+
+
+
+
+
+- After clicking on `Import`, choose the relevant JSON file that you previously downloaded during the application export process.
+
+
+
+
+
+
diff --git a/docs/versioned_docs/version-2.33.0/app-builder/left-sidebar.md b/docs/versioned_docs/version-2.33.0/app-builder/left-sidebar.md
new file mode 100644
index 0000000000..54a2f0a8ad
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/app-builder/left-sidebar.md
@@ -0,0 +1,101 @@
+---
+id: left-sidebar
+title: Left-sidebar
+---
+
+Left-sidebar has the following options:
+
+- **[Pages](#pages)**
+- **[Inspector](#inspector)**
+- **[Debugger](#debugger)**
+- **[Global Settings](#global-settings)**
+- **[Comments](#comments)**
+- **[Theme switch](#theme-switch)**
+
+
+
+
+
+
+
+## Pages
+
+Pages allows you to have multiple pages in a single application, making your ToolJet applications more robust and user-friendly.
+
+Check the detailed documentation for **[Pages](/docs/tutorial/pages)**.
+
+
+
+
+
+
+
+## Inspector
+
+The Inspector can be used to inspect the data of the **queries**, properties and values of the **components** that are there on the canvas, ToolJet's global variables and the variables that have been set by the user.
+
+Check the detailed guide on **[using Inspector](/docs/how-to/use-inspector)**.
+
+
+
+
+
+
+
+## Debugger
+
+Debugger records any errors that occur during the execution of queries. For instance, if a database query fails because the database is unavailable or if a REST API query fails due to an incorrect URL, the errors will be captured and shown in the debugger. Additionally, the debugger provides pertinent information associated with the error alongside the error message.
+
+If you wish to prevent the debugger from closing, you can simply click on the pin icon located in the top-right corner. By doing so, the debugger will stay open until you decide to unpin it.
+
+Debugger consists of two main sections:
+
+1. **All Log:** In this section, you can view a comprehensive list of all the logs generated during the execution of the application. These logs may include various types of messages, such as success messages, warning, and error messages.
+
+2. **Errors:** This section specifically focuses on displaying the error messages that occurred during the program's execution. These error messages indicate issues or problems that need attention, as they may lead to unexpected behaviors of the application.
+
+
+
+
+
+
+
+## Global Settings
+
+To configure the app's global settings, click on the kebab menu(three vertical dots) on the left of the app name. Global settings include:
+
+- **Unique app slug**: The unique slug of the application. This slug is used in the URL of the application. By default, the slug is the `app id` of the application. You can change the slug to a custom value. For example, if the slug is `7b56293b-be5a-401f-8806-b71625f8ee0d` you can change it to `` then the new URL of the application will be `https://app.tooljet.com//apps//`
+- **App link**: The link to the application. This link can be used to share the application with other users of the workspace. If you want to share the application with users outside the workspace, you can make the application public from the **[Share](/docs/app-builder/share)** modal.
+- **Hide header for launched apps**: Toggle this on to the hide the tooljet's header when the applications are launched
+- **Maintenance mode**: Toggle this on to put the application in maintenance mode. When in **maintenance mode**, on launching the app, the user will get an error message that **the app is under maintenance**.
+- **Max width of canvas**: Modify the width of the canvas in **px** or **%**. The default width is `1292` px.
+- **Background color of canvas**: Enter the hex color code or choose a color from the picker to change the background color of the canvas. You can also click on the **Fx** to programmatically set the value.
+- **Export app**: Click on the [Export app](/docs/dashboard/#export-app) button to export the application as a JSON file. You can import this JSON file in any other workspace to use the application.
+
+
+
+
+
+
+
+## Comments
+
+Comment anywhere on the canvas and collaborate with other users in the workspace. Click on the comments button to enable it and then drop comment anywhere on the canvas.
+
+
+
+
+
+
+
+## Theme Switch
+
+Use the theme switch button to toggle ToolJet between light and dark modes.
+
+While developers can access the current theme's value through global variables using `{{globals.theme.name}}`, it is not currently feasible to change the theme programmatically.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/app-builder/overview.md b/docs/versioned_docs/version-2.33.0/app-builder/overview.md
new file mode 100644
index 0000000000..b653f085ac
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/app-builder/overview.md
@@ -0,0 +1,23 @@
+---
+id: overview
+title: Overview
+---
+
+# App-Builder: Overview
+
+ToolJet's App Builder allows you to build applications. ToolJet's app builder has the following major components:
+
+- **[Topbar](/docs/app-builder/topbar)**: Configure app settings
+- **[Canvas](/docs/app-builder/canvas)**: Arrange the components to build the interface of app
+- **[Left-sidebar](/docs/app-builder/left-sidebar)**: Add **[pages](/docs/tutorial/pages)**, **[inspect](/docs/how-to/use-inspector)** the components, queries or variables, and **[debug](#debugger)** the errors.
+- **[Components library](/docs/app-builder/components-library)**(right sidebar): Drag any component or modify the property or styling
+- **[Query Panel](/docs/app-builder/query-panel)**: Create, edit or manage the queries from the **[datasources](/docs/data-sources/overview)**
+- **[Preview](/docs/app-builder/preview)**: Preview your application
+
+
+
+
+
+
+
+
diff --git a/docs/versioned_docs/version-2.33.0/app-builder/preview.md b/docs/versioned_docs/version-2.33.0/app-builder/preview.md
new file mode 100644
index 0000000000..d6aef27a9b
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/app-builder/preview.md
@@ -0,0 +1,12 @@
+---
+id: preview
+title: Preview
+---
+
+You can preview your app by clicking on the `Preview` icon on the top-right of the App-Builder.
+
+
+
+
+
+Once you are in preview mode, you can change preview settings to test the app in different settings. Change the version of the app and switch between different versions to see how they compare. You can also select **Mobile** or **Desktop** view to see how the components are displayed in different screen settings.
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/app-builder/query-panel.md b/docs/versioned_docs/version-2.33.0/app-builder/query-panel.md
new file mode 100644
index 0000000000..dbcf2d833e
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/app-builder/query-panel.md
@@ -0,0 +1,218 @@
+---
+id: query-panel
+title: Query Panel
+---
+
+
+
+The Query Panel, located at the bottom of the app-builder, allows you to create and manage queries to interact with connected **data sources**. It provides the capability to perform API requests, query **[databases](/docs/data-sources/overview)**, and apply **[transformations](/docs/tutorial/transformations)** or data manipulation using **[JavaScript](/docs/data-sources/run-js)** and **[Python](/docs/data-sources/run-py)**.
+
+The Query Panel consists of two sections:
+- The **[Query Manager](#query-manager)** on the right side, which displays a list of all the created queries.
+- The **[Query Editor](#query-editor)**, used to configure the selected query.
+
+
+
+
+
+
+
+
+
+## Query Manager
+
+The Query Manager on the left lists all the queries that have been created in the application. Query Manager helps in managing the queries that have been created.
+
+
+
+
+
+
+The `+ Add` button on the Query Manager is used to add new queries in the application. When Add button is clicked, a menu will open with a list of options for creating a query from the available data sources.
+
+### Sort and Filter Queries
+On the top of Query Manager, there is button to Sort or Filter queries. The button allows you to select from the following options:
+
+**Filter:**
+- By Data source
+
+**Sort:**
+- Name: A-Z
+- Name: Z-A
+- Type: A-Z
+- Type: Z-A
+- Last modified: oldest first
+- Last modified: newest First
+
+Next to the filter is the search box that can be used to search for a specific query.
+
+### Edit, Copy and Delete Queries
+
+On hovering on a query name, you can see the edit, copy and delete buttons.
+The edit button lets you rename the query, the delete button lets you delete the selected query, and the duplicate button duplicates the selected query.
+
+
+
+## Query Editor
+
+Query Editor provides the functionality to construct queries either through a low-code interface or by manually entering the query text.
+
+:::info
+The changes made in the query panel will be saved automatically.
+:::
+
+
+
+
+
+
+
+
+### Query Name
+
+Apart from the query editor, the query name is displayed at the top of the query panel. Click on it to make edits and customize the query name as needed.
+
+
+
+
+
+
+
+
+
+### Custom Parameters
+
+Custom parameters provide a convenient method for passing variables to a query. To add parameters, simply click the **+** button next to the Parameters label in the top bar of the query editor.
+
+For each parameter, you need to specify:
+- **Name**: The identifier for the parameter.
+- **Default value**: This value can be a constant string, number, or object.
+
+**Syntax for utilizing the parameter:** Employ `parameters.` in your query. It's important to note that parameters can only be utilized within the specific query where they are defined.
+
+Learn more about **[Using Custom Parameters](/docs/how-to/use-custom-parameters)**.
+
+
+
+
+
+
+
+
+
+### Preview
+
+The Preview button allows you to preview the data returned by the query. The data is displayed in the preview section at the bottom of the query panel, aiding in query debugging without triggering the query in the app.
+
+Data preview is available in two formats: **Raw** and **JSON**. Click the clear button to reset the preview data.
+
+
+
+
+
+
+
+
+
+### Run
+
+The Run button triggers the query, causing it to interact with the application. This action differs from the `Preview` feature.
+
+
+
+
+
+
+
+
+
+### Query Configuration
+
+Query Configuration allows you to set vital values that are necessary to generate a response from a database. These configurations may include but are not limited to:
+
+- `Data source`: Name of the data source
+- `Operation`: The kind of operation you want to perform (For e.g., `List collections`,`Find one`, `Find many`,etc.)
+
+The set of configuration options you get depend on the type of data source.
+
+
+
+
+
+#### Data Source
+
+The primary and default parameter for all queries is **data source**. This option enables the selection of the appropriate data source for your query.
+
+In cases where multiple data sources of the same type are connected, easily switch the query's data source using the dropdown menu.
+
+
+
+
+
+
+
+
+
+### Transformation
+
+Queries can be enhanced with transformations to modify the query results. ToolJet supports transformations using two programming languages: JavaScript & Python. Refer to the detailed documentation on **[Transformations](/docs/tutorial/transformations)** for more information.
+
+
+
+
+
+
+
+
+
+### Settings
+
+
+
+
+
+#### Run this query on application load?
+
+Enabling this option executes the query every time the app is loaded.
+
+#### Request confirmation before running the query?
+
+Enabling this option displays a confirmation modal, prompting for a `Yes` or `No` before firing the query.
+
+#### Show notification on success?
+
+Enabling this option shows a success toast notification when the query is successfully triggered. Customize the **success message** and **notification duration** in milliseconds.
+
+
+
+
+
+### Events
+
+Event handlers can be added to queries for the following events:
+
+- **Query Success**
+- **Query Failure**
+
+Event handlers link actions in your application for smoother operation. Here's an example:
+
+Scenario: You have two queries:
+
+- *getTodos*: Fetches your to-do list.
+- *deleteTodos*: Removes a to-do item.
+- Event Handler: A Query Success event handler on deleteTodos that runs getTodos after a deletion.
+
+The Result:
+- User deletes a to-do.
+- The event handler refreshes the to-do list.
+- The component displaying the to-do data will be update with the lates data.
+
+:::info
+Learn more about [Event Handlers and Actions](/docs/widgets/overview#component-event-handlers).
+:::
+
+
+
+
+
+
diff --git a/docs/versioned_docs/version-2.33.0/app-builder/right-sidebar.md b/docs/versioned_docs/version-2.33.0/app-builder/right-sidebar.md
new file mode 100644
index 0000000000..88faa89314
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/app-builder/right-sidebar.md
@@ -0,0 +1,29 @@
+---
+id: components-library
+title: Components Library
+---
+
+The **Components Library** on the right sidebar contains all of the available components. Use this to drag-and-drop a component from the library to the canvas. It organizes components into sections and you can enter a search term to quickly find a component you need.
+
+
+
+
+
+
+
+:::tip
+Check the **[Components Catalog](/docs/widgets/overview)** to know more about specific component.
+:::
+
+## Component Config Inspector
+
+The Component Config Inspector is also called as component inspector. It contains all the available settings for the selected component and is where you **set values**, **update component names**, and **create event handlers**. The Component Inspector organizes settings into different sections, such as **Property** and **Styles**.
+
+To open the Component Config Inspector, click on the **[component handle](/docs/app-builder/canvas#arrange-components)** that is present on the top of the component including **⚙️ + Component Name** and the component inspector will open up on the right side:
+
+
+
+
+
+
+
diff --git a/docs/versioned_docs/version-2.33.0/app-builder/share.md b/docs/versioned_docs/version-2.33.0/app-builder/share.md
new file mode 100644
index 0000000000..d951e9b7de
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/app-builder/share.md
@@ -0,0 +1,56 @@
+---
+id: share
+title: Share
+---
+
+ToolJet apps offer two sharing options: they can either be shared privately with workspace users or publicly by generating a shareable link. To obtain the shareable URL, you can easily do so by clicking on the Share button located on the top bar of the App builder.
+
+
+
+
+
+
+
+### Making the app public
+
+To share the app with external end users and make it accessible to anyone on the internet without requiring a ToolJet login, you can toggle on the Switch for "Make application public" in the Share modal.
+
+:::info
+Only released apps can be accessed using the Shareable app link.
+:::
+
+
+
+
+
+
+
+### Customizing the app URL
+
+By default, ToolJet will generate a unique URL for your application. However, you also have the option to edit the slug of the URL to make it more customized and user-friendly.
+
+
+
+
+
+
+
+### Embedding ToolJet Apps
+
+ToolJet apps can be directly shared with end users and embedded into web apps using `iframes`. If you want to make your application public, you can use the Share modal to obtain the embeddable link.
+
+:::info
+For embedding private ToolJet apps, you'll need to set an environment variable in the `.env` file.
+
+| Variable | Description |
+|:-------------- |:------------------------------------ |
+| ENABLE_PRIVATE_APP_EMBED | `true` or `false` |
+
+You can learn more [here](/docs/setup/env-vars#enabling-embedding-of-private-apps).
+:::
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/app-builder/toolbar.md b/docs/versioned_docs/version-2.33.0/app-builder/toolbar.md
new file mode 100644
index 0000000000..960378187d
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/app-builder/toolbar.md
@@ -0,0 +1,123 @@
+---
+id: topbar
+title: Topbar
+---
+
+Topbar is present at the top of the app-builder, and is used to configure the app settings.
+
+### App name
+
+The App name can be modified by selecting the application name located on the left side of the topbar.
+
+Upon the creation of a new app, it is automatically assigned a unique app name.
+
+
+
+
+
+
+
+### Desktop or Mobile layout
+
+Switch the canvas mode in Mobile or Desktop layout from the topbar.
+
+#### Showing component on mobile layout
+
+Click on the component handle to open [component config inspector](/docs/app-builder/components-library#component-config-inspector) on the right sidebar. Scroll down to the **Layout** section and toggle on the Mobile Layout option. The width of the components will be adjusted to fit the Mobile Layout.
+
+#### Adding a new component to mobile layout
+
+Switch the canvas to mobile layout by clicking the mobile icon on the topbar. Drag and drop a new component to the canvas. This component will not be visible on the desktop layout unless **Show on desktop** is enabled from the component config inspector.
+
+:::info
+Width of the component will be automatically adjusted to fit the screen while viewing the application in app viewer.
+:::
+
+### Changes saved indicator
+
+Whenever a change is made on the component or the query panel/queries, the changes are saved automatically. The changes saved indicator will be displayed on the topbar. This helps the developer to know if the changes are saved or not.
+
+
+
+
+
+
+
+### Developer Details
+
+This will show a profile picture of the developer who is currently working on the application. Hovering over the profile picture will show the name of the developer. If there is no profile picture, then the first letter of the first name and last name will be displayed.
+
+
+
+
+
+
+
+### Version Manager
+
+**Add** or **remove** versions of an application from the Version Manager. Click on the `edit` icon next to version name to rename the version.
+
+When many developers are working on an app, **Versioning** allows them to save their own version of the app. This also prevents developers from overwriting the other developer's work.
+
+:::tip
+Versioning is also helpful when working with **[multiple environments](/docs/release-management/multi-environment/)** like development, staging and production.
+:::
+
+
+
+
+
+
+
+### Undo or Redo
+
+Undo or Redo any action performed on the canvas.
+
+You can also use **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)** to perform such actions.
+
+
+
+
+
+
+
+### Share
+
+Share your applications with a unique URL generated automatically or edit the URL slug to personalize it.
+
+- When **Make application public** toggle is off and **Shareable app link** is shared then the users will have to login to ToolJet to use the application. Toggle on to make the application public and accessible to anyone on the internet without requiring a ToolJet login. Only released apps can be accessed using the **Shareable app link**.
+- ToolJet generates the **Embedded link** which can be used to embed application on the webpages.
+
+:::tip
+Learn more about **[Sharing](/docs/app-builder/share)** your tooljet applications.
+:::
+
+
+
+
+
+
+
+### Preview
+
+Clicking on **Preview** button will open up the currently opened version of the app in the new tab. This is really handy when the app developer wants to immediately check the app preview in production.
+
+
+
+
+
+
+
+### Release
+
+Release the app to publish the current version of the app and push the changes into the production.
+
+:::caution
+ToolJet will block editing of the Released version of an app and will display a prompt to create a new version to make the changes. This is to prevent accidentally pushing an unfinished app to the live version.
+:::
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/contributing-guide/_category_.json b/docs/versioned_docs/version-2.33.0/contributing-guide/_category_.json
new file mode 100644
index 0000000000..317067020d
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/contributing-guide/_category_.json
@@ -0,0 +1,5 @@
+{
+ "label": "Contributing Guide",
+ "position": 11,
+ "collapsed": true
+}
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/contributing-guide/code-of-conduct.md b/docs/versioned_docs/version-2.33.0/contributing-guide/code-of-conduct.md
new file mode 100644
index 0000000000..03f7184d51
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/contributing-guide/code-of-conduct.md
@@ -0,0 +1,81 @@
+---
+id: code-of-conduct
+title: Contributor Code of Conduct
+---
+
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to make participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies within all project spaces, and it also applies when
+an individual is representing the project or its community in public spaces.
+Examples of representing a project or community include using an official
+project e-mail address, posting via an official social media account, or acting
+as an appointed representative at an online or offline event. Representation of
+a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at hello@tooljet.com . All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/contributing-guide/l10n.md b/docs/versioned_docs/version-2.33.0/contributing-guide/l10n.md
new file mode 100644
index 0000000000..196a10aba2
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/contributing-guide/l10n.md
@@ -0,0 +1,69 @@
+---
+id: l10n
+title: Localization
+---
+
+Welcome to ToolJet Localization Guide. The goal of the Localization is to make ToolJet easy to use and close to all countries, languages, and general cultural groups. On this page, you will find instructions on how to contribute to ToolJet through Localization and make a more friendly ToolJet for all regions.
+
+## Adding Translations
+
+- For adding the translations of your language in ToolJet, you'll need to create a new **languagecode.json** file which will include all the translations for the keywords in your language, and then list the language in the **languages.json** file for the language to be listed in the dashboard of the ToolJet.
+
+- Go to the **frontend** directory which is at the root of ToolJet, then go to the **assets** and inside assets, you'll find the **translations** directory. You have created a new json file with the **language code** as the file name. The language code should follow [ISO 639-1 Code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes).
+
+ ```
+ \frontend
+ |--\assets
+ |--\--\translations
+ |--\--\--\languages.json
+ |--\--\--\en.json
+ ```
+
+
+
+
+
+
+
+- Let's localize ToolJet in the **French** language. Create a new json file inside the translations directory and name it **fr.json**. `fr` is the language code for French.
+
+- After creating the new file, open the **en.json** file and copy all the contents of the file to the newly created **fr.json**.
+
+
+
+
+
+
+
+- Once copied, you can now start adding the translations for the keywords in the french language.
+
+- After completing the translation, all you need to do is list the language in **languages.json** file. You'll need to add an object with three key-value pairs. **lang** - the name of the language that you added, **code** - the language code, and the **nativeLang** - name of language in the native.
+
+ ```js
+ {
+ "languageList":
+ [
+ { "lang": "English", "code": "en", "nativeLang": "English" },
+ { "lang": "French", "code": "fr", "nativeLang": "Français" }
+ ]
+ }
+ ```
+
+
+
+:::note
+Feel free to reach us on [Slack](https://tooljet.com/slack) for any help related to Localization.
+:::
\ No newline at end of file
diff --git a/docs/versioned_docs/version-2.33.0/contributing-guide/marketplace/creating-a-plugin.md b/docs/versioned_docs/version-2.33.0/contributing-guide/marketplace/creating-a-plugin.md
new file mode 100644
index 0000000000..6cadb88d7e
--- /dev/null
+++ b/docs/versioned_docs/version-2.33.0/contributing-guide/marketplace/creating-a-plugin.md
@@ -0,0 +1,390 @@
+---
+id: creating-a-plugin
+title: 'Marketplace: Creating plugins'
+---
+
+# Marketplace: Creating plugins
+
+## What are plugins
+
+ToolJet’s development has centered on extensibility, allowing developers to utilize plugins that expand their capabilities. Currently, these plugins are limited to connectors, including data source connectors like PostgreSQL, MySQL, Twilio, Stripe, and more. Using JavaScript/TypeScript, developers can develop plugins to enhance ToolJet's functionality and publish these plugins on the ToolJet Marketplace.
+
+This guide will provide step-by-step instructions for creating ToolJet plugins using the `tooljet` CLI.
+
+The `tooljet` CLI is a user-friendly command-line tool designed to simplify the plugin building process. As part of this guide, we will create a basic plugin for GitHub.
+
+## Step 1: Creating a New Plugin - GitHub Plugin
+
+The first step is to bootstrap a new plugin for the ToolJet marketplace. The plugin will authenticate users with a GitHub Personal Access Token and include fundamental operations such as fetching user details, repositories, issues, and pull requests.
+
+If you have completed the **[Setup](/docs/contributing-guide/marketplace/marketplace-setup)** guide, you can begin developing the plugin using the `tooljet` CLI. To initiate plugin development, enter the following command in the terminal:
+```bash
+# create a new plugin
+tooljet plugin create github
+```
+
+When prompted, enter the **plugin name** and select the **plugin type**, which is api in this case. Additionally, select **yes** when prompted to create a new plugin for the marketplace.
+
+If your plugin is hosted on GitHub, please provide the **repository URL** when prompted. Otherwise, leave it blank.
+
+When a plugin is created using the `ToolJet` CLI, an object is added to the **plugins.json** file in the **`ToolJet/server/src/assets/marketplace/`** directory. This object includes metadata about the plugin, such as its name, description, version, author, and other relevant details.
+
+The plugins.json file serves as a registry of all available plugins for use in ToolJet. When the ToolJet server starts up, it reads the plugins.json file and loads all plugins that are listed in it.
+
+:::info
+It is important to note that the plugins.json file should not be manually edited, as it is automatically generated by the `ToolJet CLI`. Making changes to this file can result in issues with the proper functioning of the plugins in the system.
+:::
+
+All marketplace plugins are stored in the **`/marketplace`** directory of the ToolJet repository. You can find the GitHub plugin **[here](https://github.com/ToolJet/ToolJet/tree/develop/marketplace/plugins/github)**.
+
+The structure of a typical ToolJet plugin directory appears as follows:
+```bash
+github/
+ package.json
+ lib/
+ icon.svg
+ index.ts
+ operations.json
+ manifest.json
+```
+
+In this structure, the file **manifest.json** contains information about the plugin's name, description, and other details. The file **operations.json** contains metadata about all the operations that the plugin supports. The main file, **index.ts**, creates a QueryService for the plugin, which handles queries, connection testing, caching, and more. The **icon.svg** file serves as the plugin's icon, while **package.json** is automatically generated by the CLI.
+
+:::info
+**Why do we need a manifest.json file or a operations.json file?**
+
+The manifest.json file is used by a React component to create a dynamic UI for connection forms. It defines the schema of an API or data source, including its name, type, and any exposed variables, as well as options for authentication and other customizable properties. The properties section specifies the required fields and their types for connecting to the API or data source. By reading the manifest.json file, the React component generates the necessary UI components based on the schema, such as text inputs, dropdowns, checkboxes, and other elements.
+
+On the other hand, the operations.json file contains a schema definition for a specific data source, like Github. It describes the available operations and their parameters that can be used to query the data source. A React component uses this schema to create queries in ToolJet applications, generating a UI that allows users to select the desired operation and provide the required parameters. The component uses the properties defined in the operations.json file to create various UI elements, such as dropdowns and input fields, and handle user interactions to create the final query. Once the user fills in the required parameters, the component uses them to generate a query that can be executed against the data source and return the results to the user.
+
+Overall, *manifest.json* and *operations.json* files are essential for creating dynamic UI components in ToolJet applications. They define the schema for data sources and available operations, which React components then use to generate user-friendly UI elements. By utilizing these files, ToolJet enables users to easily connect to various APIs and data sources, perform queries, and retrieve data in an intuitive and efficient manner.
+:::
+
+## Step 2: Defining the manifest.json file
+
+To construct the connection form, it's important to include the necessary options in the manifest.json file. Here's an example of how to do it:
+```json
+ "properties": {
+ "credentials": {
+ "label": "Authentication",
+ "key": "auth_type",
+ "type": "dropdown-component-flip",
+ "description": "A single select dropdown to choose credentials",
+ "list": [
+ {
+ "value": "personal_access_token",
+ "name": "Use Personal Access Token"
+ }
+ ]
+ },
+ "personal_access_token": {
+ "token": {
+ "label": "Token",
+ "key": "personal_token",
+ "type": "password",
+ "description": "Enter your personal access token",
+ "hint": "You can generate a personal access token from your Github account settings."
+ }
+ }
+ }
+```
+This manifest.json file includes information about authentication options, specifically a dropdown to choose a type of credentials and a field to enter a personal access token. 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.
+
+In this particular code, there are two main properties defined: **`credentials`** and **`personal_access_token`**.
+
+The **`credentials`** property specifies the authentication method to be used. It contains several keys:
+- **`label`**: a user-friendly label for the authentication method, set to "Authentication"
+- **`key`**: a unique identifier for the authentication method, set to "auth_type"
+- **`type`**: the type of the authentication method, set to "dropdown-component-flip"
+- **`description`**: a description of the authentication method, set to "A single select dropdown to choose credentials"
+- **`list`**: an array of objects representing the different authentication methods available. In this case, there is only one method available: a personal access token. The `value` key in the object is set to "personal_access_token" and the `name` key is set to "Use Personal Access Token".
+
+The **`personal_access_token`** property specifies the details of the personal access token authentication method. It contains a `token` key, which specifies the actual personal access token to be used. The `token` key contains several keys:
+- **`label`**: a user-friendly label for the personal access token, set to "Token"
+- **`key`**: a unique identifier for the personal access token, set to "personal_token"
+- **`type`**: the type of the personal access token, set to "password"
+- **`description`**: a description of the personal access token, set to "Enter your personal access token"
+- **`hint`**: a hint for the personal access token, set to "You can generate a personal access token from your Github account settings."
+
+The available `type` options are:
+
+However, based on the code you provided, the available **`type`** options are:
+- **`password`**: used to input a secret value, such as a password or an access token.
+- **`dropdown-component-flip`**: used to create a dropdown menu that flips its position relative to the component that triggers it.
+- **`text`**: used to input a single line of text.
+- **`textarea`**: used to input multiple lines of text.
+- **`toggle`**: used to create a simple on/off switch.
+- **`react-component-headers`**: used to display headers for React components.
+- **`codehinter`**: is a specialized input field used for entering code and has additional functionality, such as resolving JavaScript code within double curly braces`{{}}`.
+
+:::tip
+The **manifest.json** file is utilized by the connection modal component, which appears to prompt users to enter their datasource credentials. Meanwhile, the **operations.json** file is used by the query manager when users generate a specific query for a connected datasource. **Both files utilize a similar schema**.
+:::
+
+## Step 3: Defining the operations.json file
+```json
+ "properties": {
+ "operation": {
+ "label": "Operation",
+ "key": "operation",
+ "type": "dropdown-component-flip",
+ "description": "Single select dropdown for operation",
+ "list": [
+ {
+ "value": "get_user_info",
+ "name": "Get user info"
+ },
+ {
+ "value": "get_repo",
+ "name": "Get repository"
+ },
+ {
+ "value": "get_repo_issues",
+ "name": "Get repository issues"
+ },
+ {
+ "value": "get_repo_pull_requests",
+ "name": "Get repository pull requests"
+ }
+ ]
+ },
+ "get_user_info": {
+ "username": {
+ "label": "Username",
+ "key": "username",
+ "type": "codehinter",
+ "lineNumbers": false,
+ "description": "Enter username",
+ "width": "320px",
+ "height": "36px",
+ "className": "codehinter-plugins",
+ "placeholder": "Enter username"
+ }
+ },
+ "get_repo": {
+ "owner": {
+ "label": "Owner",
+ "key": "owner",
+ "type": "codehinter",
+ "lineNumbers": false,
+ "description": "Enter owner name",
+ "width": "320px",
+ "height": "36px",
+ "className": "codehinter-plugins",
+ "placeholder": "developer"
+ },
+ "repo": {
+ "label": "Repository",
+ "key": "repo",
+ "type": "codehinter",
+ "lineNumbers": false,
+ "description": "Enter repository name",
+ "width": "320px",
+ "height": "36px",
+ "className": "codehinter-plugins",
+ "placeholder": "tooljet"
+ }
+ },
+ "get_repo_issues": {
+ "owner": {
+ "label": "Owner",
+ "key": "owner",
+ "type": "codehinter",
+ "lineNumbers": false,
+ "description": "Enter owner name",
+ "width": "320px",
+ "height": "36px",
+ "className": "codehinter-plugins",
+ "placeholder": "developer"
+ },
+ "repo": {
+ "label": "Repository",
+ "key": "repo",
+ "type": "codehinter",
+ "lineNumbers": false,
+ "description": "Enter repository name",
+ "width": "320px",
+ "height": "36px",
+ "className": "codehinter-plugins",
+ "placeholder": "tooljet"
+ },
+ "state": {
+ "label": "State",
+ "key": "state",
+ "className": "codehinter-plugins col-4",
+ "type": "dropdown",
+ "description": "Single select dropdown for choosing state",
+ "list": [
+ {
+ "value": "open",
+ "name": "Open"
+ },
+ {
+ "value": "closed",
+ "name": "Closed"
+ },
+ {
+ "value": "all",
+ "name": "All"
+ }
+ ]
+ }
+ },
+ "get_repo_pull_requests": {
+ "owner": {
+ "label": "Owner",
+ "key": "owner",
+ "type": "codehinter",
+ "lineNumbers": false,
+ "description": "Enter owner name",
+ "width": "320px",
+ "height": "36px",
+ "className": "codehinter-plugins",
+ "placeholder": "developer"
+ },
+ "repo": {
+ "label": "Repository",
+ "key": "repo",
+ "type": "codehinter",
+ "lineNumbers": false,
+ "description": "Enter repository name",
+ "width": "320px",
+ "height": "36px",
+ "className": "codehinter-plugins",
+ "placeholder": "tooljet"
+ },
+ "state": {
+ "label": "State",
+ "key": "state",
+ "type": "dropdown",
+ "className": "codehinter-plugins col-4",
+ "description": "Single select dropdown for choosing state",
+ "list": [
+ {
+ "value": "open",
+ "name": "Open"
+ },
+ {
+ "value": "closed",
+ "name": "Closed"
+ },
+ {
+ "value": "all",
+ "name": "All"
+ }
+ ]
+ }
+ }
+ }
+```
+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
+
+- Change directory to the plugin directory where the npm package needs to be installed and then install the package
+ ```bash
+ # change directory to the plugin directory and install the npm package
+ npm i octokit --workspace=@tooljet-marketplace/github
+ ```
+
+ :::info
+ Steps to install npm package to a plugin
+
+ ```bash
+ npm i --workspace=
+ ```
+
+ The command `npm i --workspace=` is used to install a specific npm package into a particular workspace of a multi-package repository.
+
+ The *--workspace* flag is used to specify the workspace where the package should be installed. In this case, we are installing the package in the *@tooljet-marketplace/github* workspace.
+ :::
+
+## Step 5: Implement the query execution logic in index.ts
+
+In index.ts, the query execution logic needs to be implemented for the Github plugin's QueryService. The QueryService is responsible for handling the process of running queries and receives information about the data source, including credentials, configurations, and query parameters.
+
+For the Github data source, the sourceOptions will contain the necessary authentication credentials, like the personal access token, while the queryOptions will include the configurations and parameters specific to the query, like obtaining a list of repositories for a particular user.
+
+Using this information, the QueryService will create and execute API requests against the Github API. The resulting data will be returned to the caller for further processing as needed.
+
+Create a new file **query_operations.ts** in the **plugins/github/src** directory and add the following code to it.
+```typescript
+import { Octokit } from 'octokit'
+import { QueryOptions } from './types'
+
+
+export async function getUserInfo(octokit: Octokit, options: QueryOptions): Promise
+
+
+ 
+ 
-### Reset password of any user
+### Reset Password of any User
Super Admins can reset the password of any user from the **All Users** settings. To reset the password, click on the kebab menu next to the user and select **Reset Password** option. A pop-up will appear asking either to auto-generate a password or to enter a new password.
-### Edit user details
+### Edit User Details
Super Admins can edit the details of any user from the **All Users** settings. To edit the details, click on the kebab menu next to the user and select **Edit user details** option.
@@ -139,24 +154,40 @@ From the **Edit user details** drawer, Super Admins can make any user as Super A
-## All workspaces
+
+
+
+ 
+ 
+ 
+
+ 
+ 
- 
+ 
+
+ 
+
+ 
+ 
+ 
+ 
+ 
-
+ 
-
+ 
+
+Similarly, you can toggle on the `Show on desktop` option to make the component visible in the Desktop view.
+### Changes Saved Indicator
+
+Whenever changes are made in the application, they are saved automatically. The topbar's `Changes Saved` indicator shows the save status.
+
+
+
+### App Environment
+You can use the Env dropdown menu to select an environment for your app: Development, Staging, or Production. This feature facilitates seamless transition through the app development cycle.
+
+:::tip
+Learn more about multi-environment configuration **[here](/docs/release-management/multi-environment/)**.
+:::
+
+
-
+ 
-
+ 
-
+ 
-
+ 
-
+ 
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
## Supported Operations
diff --git a/docs/docs/data-sources/clickhouse.md b/docs/docs/data-sources/clickhouse.md
index a9d60b9cd4..50dd44f9d8 100644
--- a/docs/docs/data-sources/clickhouse.md
+++ b/docs/docs/data-sources/clickhouse.md
@@ -29,7 +29,7 @@ ToolJet requires the following to connect to your ClickHouse Database:
- **Debug**
- **Raw**
-
+
## Querying ClickHouse
diff --git a/docs/docs/data-sources/cosmosdb.md b/docs/docs/data-sources/cosmosdb.md
index 9ffe9b3e6d..79a4258ce9 100644
--- a/docs/docs/data-sources/cosmosdb.md
+++ b/docs/docs/data-sources/cosmosdb.md
@@ -24,7 +24,7 @@ You can find the endpoint and key in the **[Azure Portal](https://portal.azure.c
diff --git a/docs/docs/data-sources/databricks.md b/docs/docs/data-sources/databricks.md
new file mode 100644
index 0000000000..e902fa778d
--- /dev/null
+++ b/docs/docs/data-sources/databricks.md
@@ -0,0 +1,132 @@
+---
+id: databricks
+title: Databricks
+---
+
+# Databricks
+
+Databricks is a cloud-based platform for data processing, analytics, and machine learning. ToolJet connects to Databricks, allowing your applications to access and update your data in your Databricks Warehouses directly using SQL queries.
+
+
+
+ 
+ 
+ 
+
+
+
-
+
## Querying Firestore
diff --git a/docs/docs/data-sources/google.sheets.md b/docs/docs/data-sources/google.sheets.md
index d955c2cc33..b49d4ab8c8 100644
--- a/docs/docs/data-sources/google.sheets.md
+++ b/docs/docs/data-sources/google.sheets.md
@@ -31,7 +31,7 @@ When connecting to a Google Sheets datasource, you can choose between two permis
+
+
+
### Write data
diff --git a/docs/docs/data-sources/mailgun.md b/docs/docs/data-sources/mailgun.md
index 09907b82d1..003cd60a28 100644
--- a/docs/docs/data-sources/mailgun.md
+++ b/docs/docs/data-sources/mailgun.md
@@ -7,7 +7,7 @@ title: Mailgun
ToolJet can connect to your Mailgun account to send emails.
-
+
:::info
The Mailgun API Datasource supports for interaction with the mail endpoint of the [Mailgun API](https://documentation.mailgun.com/en/latest/api-intro.html#authentication-1).
@@ -42,8 +42,6 @@ Optional parameters:
- Body as HTML
-
-
:::info
**Send mail to** - accepts a single email id.
For example:
diff --git a/docs/docs/data-sources/mariadb.md b/docs/docs/data-sources/mariadb.md
index 6a7930c345..1dfbef5d7c 100644
--- a/docs/docs/data-sources/mariadb.md
+++ b/docs/docs/data-sources/mariadb.md
@@ -13,7 +13,7 @@ To establish a connection with the MariaDB global datasource, you can either cli
+
+
+
+
-
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
-
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
diff --git a/docs/docs/how-to/build-plugin-for-marketplace.md b/docs/docs/how-to/build-plugin-for-marketplace.md
index 59c1aa6fee..c6e5a7399a 100644
--- a/docs/docs/how-to/build-plugin-for-marketplace.md
+++ b/docs/docs/how-to/build-plugin-for-marketplace.md
@@ -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
diff --git a/docs/docs/how-to/bulk-update-multiple-rows-in-table.md b/docs/docs/how-to/bulk-update-multiple-rows-in-table.md
index 8026034e79..53df502a00 100644
--- a/docs/docs/how-to/bulk-update-multiple-rows-in-table.md
+++ b/docs/docs/how-to/bulk-update-multiple-rows-in-table.md
@@ -2,9 +2,13 @@
id: bulk-update-multiple-rows
title: Bulk Update Multiple Rows in Table
---
-
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
-
+ 
+ 
+ 
-
-
-
-
-
-
-
-
-
-
+ 
- 
- 
- 
+
+
+ 
+
+
+ 
+ 
+ 
+ 
+ 
+- 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**.
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
+
-### Query 3: JavaScript code to use URL parameters
+### Query 3: JavaScript Code To Use URL Parameters
- Create a new JavaScript code query and name it as `urlparams`. We will be using this query to access the URL parameters and to check if the email parameter is present in the URL, then trigger the REST API queries.
@@ -91,7 +104,11 @@ async function checkAndRunQuery(timeout) { // Check if URL parameters are availa
checkAndRunQuery(5000); // Check if URL parameters are available and run the REST API queries after a timeout of 5 seconds
```
-## Dashboard page event handler
+
+
+
-
+ 
-
+ 
+
-
+ 
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
+ 
-
+ 
+Generates a list of issues associated with a repository, with options to filter them by their status.
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+ 
-
+ 
-
-
-
-
-
-
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+This operation let's you analyze the document stored in your AWS S3 buckets by providing the **bucket** and **object** name.
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+
+
+
+
+ 
+
- 
+ 
+ 
+ 
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+ 
+ 
+
+ 
+ 
+ 
+ 
+
+
+
+3. Now go to the **[GitHub Developer settings](https://github.com/settings/developers)** and navigate to `OAuth Apps` and create a new OAuth App.
+
+- Enter the **App Name**, **Homepage URL**, and **Authorization callback URL**. The **Authorization callback URL** should be the generated `Redirect URL` in the ToolJet GitHub manage SSO page. Click on the **Register application** button to create the OAuth App.
+
+ 
- 
+ 
+
+
+3. Go to **[Google Cloud console](https://console.cloud.google.com/)** and create a project.
-
- 
-
- 
-
- 
@@ -49,37 +36,35 @@ select 'External'.
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+ 
+ 
+ 
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
-
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the Calendar component.
-
-
-
-
+| 
-
-
-
-
+| 
-
-
-
-
-
-
-
-
-
-
-
+| 
+
-
-
-
+
+| 
-
-
+
+
-
-
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
-
-
-
-
-
-
-
-
-
+| 
-
-
-
-
-
-
-
-
+## Events
+
+| 
+| 
-
-
-
-
-
+| type | Specifies the type of component. | 'number' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `backgroundColor`, `borderRadius`, `textColor`, `borderColor`, `disabled`, `visibility` etc. |
+| backgroundColor | Specifies the background color of the component. | Color name or Hex color code '#f6f5ff' |
+| borderRadius | Specifies the border radius of the component. | Numeric value like 5, 10, 20 etc. |
+| textColor | Specifies the text color of the component. | Color name or Hex color code '#f6f5ff'|
+| borderColor | Specifies the border color of the component. | Color name or Hex color code '#f6f5ff'|
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| value | Specifies the default value of the number input. | Numeric value |
+| maxValue | Specifies the maximum value of the number input. | Numeric value |
+| minValue | Specifies the minimum value of the number input. | Numeric value |
+| placeholder | Specifies the placeholder text of the number input. | Any string value |
+| label | Specifies the label of the component. | Any string value |
+| type | Specifies the type of component. | 'password' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `backgroundColor`, `borderRadius`, `disabled`, `visibility` etc. |
+| backgroundColor | Specifies the background color of the component. | Color name or Hex color code '#f6f5ff' |
+| borderRadius | Specifies the border radius of the component. | Numeric value like 10 |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| 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,}$'` |
+| 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 `' '` |
+| type | Specifies the type of component. | 'checkbox' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `checkboxColor`, `disabled`, `textColor`, `visibility` etc. |
+| checkboxColor | Specifies the color of the checkbox. | Color name or Hex color code '#f6f5ff' |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| textColor | Specifies the text color of the component. | Color name or Hex color code '#f6f5ff' |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| value | Specifies the default value of the checkbox. | Boolean value (true or false) |
+| label | Specifies the label of the component. | Any string value like 'Checkbox' |
+| type | Specifies the type of component. | 'toggle' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `textColor`, `disabled`, `visibility`, `toggleSwitchColor` etc. |
+| textColor | Specifies the text color of the component. | Color name or Hex color code '#f6f5ff' |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| toggleSwitchColor | Specifies the color of the toggle switch. | Color name or Hex color code '#f6f5ff' |
+| value | Specifies the default value of the toggle switch. | Boolean value (true or false) |
+| label | Specifies the label of the component. | Any string value like 'Toggle switch' |
+| type | Specifies the type of component. | 'textarea' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `disabled`, `visibility`, `borderRadius` etc. |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| borderRadius | Specifies the border radius of the component. | Numeric value like 20 |
+| value | Specifies the default value of the text area. | Any string value like 'This is a text area' |
+| placeholder | Specifies the placeholder text of the text area. | Any string value like 'Enter text here' |
+| label | Specifies the label of the component. | Any string value like 'Text Area' |
+| type | Specifies the type of component. | 'daterangepicker' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `disabled`, `visibility`, `borderRadius` etc. |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| borderRadius | Specifies the border radius of the component. | Numeric value like 5 |
+| defaultEndDate | Specifies the default end date of the date range picker. | Date in the format specified in the `format` key, e.g., '12/04/2022' |
+| defaultStartDate | Specifies the default start date of the date range picker. | Date in the format specified in the `format` key, e.g., '1/04/2022' |
+| format | Specifies the format of the date. | 'DD/MM/YYYY' |
+| label | Specifies the label of the component. | Any string value like 'Select a date range' |
+| type | Specifies the type of component. | 'multiselect' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `disabled`, `visibility`, `borderRadius` etc. |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| borderRadius | Specifies the border radius of the component. | Numeric value like 5 |
+| displayValues | Specifies the value for option labels in an array format. | Array of strings like `["one", "two", "three"]` |
+| label | Specifies the label of the component. | Any string value like 'Select options of your choice' |
+| value | Specifies the default value(s) in an array. | Array of values like `[2, 3]` |
+| values | Specifies the values in an array. | Array of values like `[1, 2, 3]` |
+| showAllOption | Specifies whether to show the 'All' option in the multiselect or not. | set `true` to show the 'All' option or `false` to hide it |
+| type | Specifies the type of component. | 'starrating' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `disabled`, `visibility`, `textColor`, `labelColor` etc. |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| textColor | Specifies the color of the stars. | Color name or Hex color code '#f6f5ff' |
+| labelColor | Specifies the color of the label. | Color name or Hex color code '#f6f5ff' |
+| allowHalfStar | Specifies whether to allow selection of half star rating or not. | set `true` to allow half-star ratings or `false` to disable it |
+| defaultSelected | Specifies the default value of the star rating. | Numeric value like 4.5 |
+| maxRating | Specifies the maximum rating. | Numeric value like 10 |
+| tooltips | Specifies the tooltips for each star in an array. | Array of strings like `['one', 'two', 'three', 'four']` |
+| label | Specifies the label of the component. | Any string value like 'Select a rating' |
+| type | Specifies the type of component. | 'filepicker' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `visibility`, `borderRadius` etc. |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| borderRadius | Specifies the border radius of the component. | Numeric value like 10 |
+| enableMultiple | Specifies whether to enable multiple file selection or not. | set `true` to enable multiple file selection or `false` to disable it |
+| fileType | Specifies the mime file type. | Mime types like '*/*' (accepts all file types) |
+| instructionText | Specifies the instruction text of the file picker. | Any string value like 'Click here to select files' |
+| maxFileCount | Specifies the maximum number of files that can be selected. | Numeric value like 5 |
+| maxSize | Specifies the maximum size of the file in bytes. | Numeric value like 6000000 (6MB) |
+| minSize | Specifies the minimum size of the file in bytes. | Numeric value like 25 |
+| parseContent | Specifies whether to parse the content of the file or not. | set `true` to parse the content or `false` to disable it |
+| parseFileType | Specifies the file type to parse (e.g., csv, text, xlsx). | File type like 'csv' |
+| label | Specifies the label of the component. | Any string value like 'Select a file' |
+| type | Specifies the type of component. | 'textinput' |
+| value | Specifies the default value of the text input. | Any string value like 'Random text' |
+| placeholder | Specifies the placeholder text of the text input. | Any string value like 'enter first name here' |
+| label | Specifies the label of the component. | Any string value like 'First name' |
+| validation | Specifies validation rules for the text input. | Object containing `maxLength` property |
+| maxLength | Specifies the maximum length validation of the text input. | Numeric value like 6 |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `backgroundColor`, `borderRadius`, `errorTextColor`, `disabled`, `visibility`, `textColor` etc. |
+| backgroundColor | Specifies the background color of the component. | Color name or Hex color code '#f6f5ff' |
+| borderRadius | Specifies the border radius of the component. | Numeric value like 20 |
+| errorTextColor | Specifies the color of the error text. | Color name or Hex color code '#f6f5ff' |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `false` to hide the component or `true` to show it |
+| textColor | Specifies the text color of the component. | Color name or Hex color code '#f6f5ff' |
+| type | Specifies the type of component. | 'dropdown' |
+| displayValues | Specifies the value for option labels in an array format. | Array of values like `[1, 2, 3]` |
+| values | Specifies the option labels in an array. | Array of strings like `['one', 'two', 'three']` |
+| loading | Specifies whether to show the loading state or not. | set `true` to show the loading state or `false` to hide it |
+| value | Specifies the default selected value of the dropdown. | Any value from the `values` array, like 'two' |
+| label | Specifies the label of the component. | Any string value like 'Select a number' |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `disabled`, `visibility`, `borderRadius`, `justifyContent` etc. |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| borderRadius | Specifies the border radius of the component. | Numeric value like 5 |
+| justifyContent | Specifies the alignment of the dropdown options. | 'start', 'center', or 'end' |
+| type | Specifies the type of component. | 'button' |
+| value | Specifies the button text. | Any string value like 'Submit' |
+| label | Specifies the label of the component. | Set to `''` (empty string) to hide the label |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `backgroundColor`, `textColor`, `borderRadius`, `borderColor`, `loaderColor`, `visibility`, `disabled` etc. |
+| backgroundColor | Specifies the background color of the button. | Color name or Hex color code '#f6f5ff' |
+| textColor | Specifies the text color of the button. | Color name or Hex color code '#f6f5ff' |
+| borderRadius | Specifies the border radius of the button. | Numeric value like 5 |
+| borderColor | Specifies the border color of the button. | Color name or Hex color code '#f6f5ff' |
+| loaderColor | Specifies the color of the loader on the button. | Color name or Hex color code '#f6f5ff' |
+| visibility | Specifies whether to show the component or not. | set `'true'` to show the component or `'false'` to hide it |
+| disabled | Specifies whether to disable the component or not. | set `true` to disable the component or `false` to enable it |
+| type | Specifies the type of component. | 'text' |
+| value | Specifies the value of the text component. | Any string value like 'This is a text component' |
+| label | Specifies the label of the component. | Set to `''` (empty string) to hide the label |
+| styles | Specifies the styles of the component. | Object that will contain the styles of the component like `backgroundColor`, `textColor`, `fontSize`, `fontWeight` etc. |
+| backgroundColor | Specifies the background color of the text. | Color name or Hex color code '#f6f5ff' |
+| textColor | Specifies the text color of the text. | Color name or Hex color code '#f6f5ff' |
+| fontSize | Specifies the font size of the text. | Numeric value like 24 |
+| fontWeight | Specifies the font weight of the text. | Numeric value like 30 |
-
-
-
-
+
-
-
-
-
-
+| 
-
-
+## Properties
+
+| 
-
-
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+
-
-
+| 
+Under the General accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
+| 
-
-
-
-
-
+| 
+:::caution Restricted components
+Certain components, namely **Calendar** and **Kanban**, are restricted from being placed within the List View component using drag-and-drop functionality.
+:::
+
+
-
-
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+| 
+| 
-
-
-
+ 
+ 
+ 
-
-
-
+| 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. |
+| Search for places | Enable to show the search box on the map. | By default, it's set to `On`. Toggle `off` to disable the search box on the map. Click `Fx` to set `{{true}}` or `{{false}}` programmatically. |
-
-
+## Properties
+
+| 
-
-
+
+
-
-
-
-
-
-
-
-
-
-
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+## Properties
+
+| 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+| 
-
-
+## Component Specific Actions (CSA)
+
+There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
+ 
+ 
-
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
- 
+ 
+ 
+ 
+ 
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
-
## How ToolJet works
@@ -168,7 +157,7 @@ ToolJet application's User interface is constructed using Components like Tables
diff --git a/docs/versioned_docs/version-2.0.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.0.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.0.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.0.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.0.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.0.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.0.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.0.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
diff --git a/docs/versioned_docs/version-2.0.0/setup/try-tooljet.md b/docs/versioned_docs/version-2.0.0/setup/try-tooljet.md
index e2158d85fd..38b76b68b2 100644
--- a/docs/versioned_docs/version-2.0.0/setup/try-tooljet.md
+++ b/docs/versioned_docs/version-2.0.0/setup/try-tooljet.md
@@ -26,15 +26,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.
-
- 
diff --git a/docs/versioned_docs/version-2.17.0/how-to/serverside-pagination.md b/docs/versioned_docs/version-2.17.0/how-to/serverside-pagination.md
index ed6536c270..5d6e2fcb5a 100644
--- a/docs/versioned_docs/version-2.17.0/how-to/serverside-pagination.md
+++ b/docs/versioned_docs/version-2.17.0/how-to/serverside-pagination.md
@@ -1,6 +1,6 @@
---
id: use-server-side-pagination
-title: Using server side pagination for efficient data handling in tables
+title: Using Server Side Pagination in Tables
---
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 datasources 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.
diff --git a/docs/versioned_docs/version-2.17.0/how-to/upload-files-aws.md b/docs/versioned_docs/version-2.17.0/how-to/upload-files-aws.md
index 1543d8a928..1e67737ad3 100644
--- a/docs/versioned_docs/version-2.17.0/how-to/upload-files-aws.md
+++ b/docs/versioned_docs/version-2.17.0/how-to/upload-files-aws.md
@@ -95,7 +95,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`
diff --git a/docs/versioned_docs/version-2.17.0/how-to/use-form-component.md b/docs/versioned_docs/version-2.17.0/how-to/use-form-component.md
index 414afa7f5d..021f214044 100644
--- a/docs/versioned_docs/version-2.17.0/how-to/use-form-component.md
+++ b/docs/versioned_docs/version-2.17.0/how-to/use-form-component.md
@@ -31,7 +31,7 @@ In this how-to guide, we will be building a simple application that will leverag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+