Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 17:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge branch 'main' into appdefinition-architecture-revamp

Browse source
This commit is contained in:
arpitnath 2023-10-11 16:21:45 +05:30
commit 927c96009e
777 changed files with 120465 additions and 3358 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.github/workflows/packer-build.yml vendored
View file

@ -1,8 +1,8 @@
name: AWS AMI build using Packer config
on:
release:
types: [published]
# release:
# types: [published]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:

7
.github/workflows/tooljet-docker-develop-build.yml vendored
View file

@ -65,6 +65,7 @@ jobs:
curl -X POST -H 'Content-type: application/json' --data "{\"text\":\"$message\"}" ${{ secrets.SLACK_WEBHOOK_URL_OPS_CHANNEL }}
tooljet-server-develop-image:
runs-on: ubuntu-latest
if: |
@ -109,9 +110,9 @@ jobs:
env:
DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
- name: Send Slack Notification on Failure
if: failure()
run: |
message="Job '${{ env.JOB_NAME }}' failed! tooljet/tooljet-ce:develop"
curl -X POST -H 'Content-type: application/json' --data "{\"text\":\"$message\"}" ${{ secrets.SLACK_WEBHOOK_URL_OPS_CHANNEL }}
message="Job '${{ env.JOB_NAME }}' failed! tooljet/tooljet-server-ce:develop"
curl -X POST -H 'Content-type: application/json' --data "{\"text\":\"$message\"}" ${{ secrets.SLACK_WEBHOOK_URL_OPS_CHANNEL }}

181
.github/workflows/tooljet-release-docker-image-build.yml vendored
View file

@ -7,8 +7,8 @@ on:
workflow_dispatch:
inputs:
job-to-run:
description: Enter the job name (tooljet-ce/tooljet-server-ce/try-tooljet)
options: ["tooljet-ce", "try-tooljet", "tooljet-server-ce"]
description: Enter the job name (tooljet-ce/tooljet-server-ce)
options: ["tooljet-ce", "tooljet-server-ce"]
required: true
image:
description: "Enter the latest image tag"
@ -68,130 +68,7 @@ jobs:
curl -X POST -H 'Content-type: application/json' --data "{\"text\":\"$message\"}" ${{ secrets.SLACK_WEBHOOK_URL }}
try-tooljet-image-build:
runs-on: ubuntu-latest
needs: build-tooljet-ce-image
if: ${{ needs.build-tooljet-ce-image.result == 'success' }}
steps:
- name: Checkout code
uses: actions/checkout@v2
with:
ref: main
# Create Docker Buildx builder with platform configuration
- name: Set up Docker Buildx
run: |
mkdir -p ~/.docker/cli-plugins
curl -SL https://github.com/docker/buildx/releases/download/v0.11.0/buildx-v0.11.0.linux-amd64 -o ~/.docker/cli-plugins/docker-buildx
chmod a+x ~/.docker/cli-plugins/docker-buildx
docker buildx create --name mybuilder --platform linux/arm64,linux/amd64,linux/amd64/v2,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
docker buildx use mybuilder
- name: Set DOCKER_CLI_EXPERIMENTAL
run: echo "DOCKER_CLI_EXPERIMENTAL=enabled" >> $GITHUB_ENV
- name: use mybuilder buildx
run: docker buildx use mybuilder
- name: Docker Login
uses: docker/login-action@v1
with:
username: ${{ secrets.DOCKER_USERNAME }}
password: ${{ secrets.DOCKER_PASSWORD }}
- name: Check if Docker image is present
id: check-image-presence
run: |
response=$(curl -s "https://hub.docker.com/v2/repositories/tooljet/tooljet-ce/tags/${{ github.event.release.tag_name }}")
if [[ $? -ne 0 ]]; then
echo "Failed to fetch JSON response. Stopping workflow execution."
exit 1
fi
if [[ $response == *"tag '${{ github.event.release.tag_name }}' not found"* ]]; then
echo "Docker image tag '${{ github.event.release.tag_name }}' not present."
exit 1
else
echo "Docker image tag '${{ github.event.release.tag_name }}' is present."
fi
- name: Build and Push Docker image
uses: docker/build-push-action@v4
with:
context: .
file: docker/try-tooljet.Dockerfile
push: true
tags: tooljet/try:${{ github.event.release.tag_name }},tooljet/try:latest
platforms: linux/amd64
env:
DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
- name: Send Slack Notification
run: |
if [[ "${{ job.status }}" == "success" ]]; then
message="Job '${{ env.JOB_NAME }}' succeeded! tooljet/try:${{ github.event.release.tag_name }}"
else
message="Job '${{ env.JOB_NAME }}' failed! tooljet/try:${{ github.event.release.tag_name }}"
fi
curl -X POST -H 'Content-type: application/json' --data "{\"text\":\"$message\"}" ${{ secrets.SLACK_WEBHOOK_URL }}
building-tooljet-server-ce-image:
runs-on: ubuntu-latest
if: "${{ github.event.release }}"
steps:
- name: Checkout code
uses: actions/checkout@v2
with:
ref: refs/heads/main
# Create Docker Buildx builder with platform configuration
- name: Set up Docker Buildx
run: |
mkdir -p ~/.docker/cli-plugins
curl -SL https://github.com/docker/buildx/releases/download/v0.11.0/buildx-v0.11.0.linux-amd64 -o ~/.docker/cli-plugins/docker-buildx
chmod a+x ~/.docker/cli-plugins/docker-buildx
docker buildx create --name mybuilder --platform linux/arm64,linux/amd64,linux/amd64/v2,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
docker buildx use mybuilder
- name: Set DOCKER_CLI_EXPERIMENTAL
run: echo "DOCKER_CLI_EXPERIMENTAL=enabled" >> $GITHUB_ENV
- name: use mybuilder buildx
run: docker buildx use mybuilder
- name: Docker Login
uses: docker/login-action@v2
with:
username: ${{ secrets.DOCKER_USERNAME }}
password: ${{ secrets.DOCKER_PASSWORD }}
- name: Build and Push Docker image
uses: docker/build-push-action@v4
with:
context: .
file: docker/server.Dockerfile
push: true
tags: tooljet/tooljet-server-ce:${{ github.event.release.tag_name }},tooljet/tooljet-server-ce:latest
platforms: linux/amd64
env:
DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
- name: Send Slack Notification
run: |
if [[ "${{ job.status }}" == "success" ]]; then
message="Job '${{ env.JOB_NAME }}' succeeded! tooljet/tooljet-server-ce:${{ github.event.release.tag_name }}"
else
message="Job '${{ env.JOB_NAME }}' failed! tooljet/tooljet-server-ce:${{ github.event.release.tag_name }}"
fi
curl -X POST -H 'Content-type: application/json' --data "{\"text\":\"$message\"}" ${{ secrets.SLACK_WEBHOOK_URL }}
#Below code helps to trigger the workflow separately
# #Below code helps to trigger the workflow separately
tooljet-ce:
runs-on: ubuntu-latest
@ -297,56 +174,4 @@ jobs:
fi
curl -X POST -H 'Content-type: application/json' --data "{\"text\":\"$message\"}" ${{ secrets.SLACK_WEBHOOK_URL }}
try-tooljet:
runs-on: ubuntu-latest
if: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.job-to-run == 'try-tooljet' }}
steps:
- name: Checkout code
uses: actions/checkout@v2
with:
ref: main
# Create Docker Buildx builder with platform configuration
- name: Set up Docker Buildx
run: |
mkdir -p ~/.docker/cli-plugins
curl -SL https://github.com/docker/buildx/releases/download/v0.11.0/buildx-v0.11.0.linux-amd64 -o ~/.docker/cli-plugins/docker-buildx
chmod a+x ~/.docker/cli-plugins/docker-buildx
docker buildx create --name mybuilder --platform linux/arm64,linux/amd64,linux/amd64/v2,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
docker buildx use mybuilder
- name: Set DOCKER_CLI_EXPERIMENTAL
run: echo "DOCKER_CLI_EXPERIMENTAL=enabled" >> $GITHUB_ENV
- name: use mybuilder buildx
run: docker buildx use mybuilder
- name: Docker Login
uses: docker/login-action@v1
with:
username: ${{ secrets.DOCKER_USERNAME }}
password: ${{ secrets.DOCKER_PASSWORD }}
- name: Build and Push Docker image
uses: docker/build-push-action@v4
with:
context: .
file: docker/try-tooljet.Dockerfile
push: true
tags: tooljet/try:${{ github.event.inputs.image }},tooljet/try:latest
platforms: linux/amd64
env:
DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
- name: Send Slack Notification
run: |
if [[ "${{ job.status }}" == "success" ]]; then
message="Job '${{ env.JOB_NAME }}' succeeded! tooljet/try:${{ github.event.inputs.image }}"
else
message="Job '${{ env.JOB_NAME }}' failed! tooljet/try:${{ github.event.inputs.image }}"
fi
curl -X POST -H 'Content-type: application/json' --data "{\"text\":\"$message\"}" ${{ secrets.SLACK_WEBHOOK_URL }}

2
.version
View file

@ -1 +1 @@
2.17.0
2.19.2

6
cypress-tests/cypress/e2e/editor/inspectorHappypath.cy.js
View file

@ -129,7 +129,7 @@ describe("Editor- Inspector", () => {
verifyValue("key", "String", `"value"`);
cy.get(`[data-cy="inspector-node-key"] > .mx-1`).realHover();
cy.get("[data-cy='copy-icon']").realClick();
cy.get('[data-cy="copy-path-to-clipboard"]').realClick();
cy.realPress("Escape");
cy.window().then((win) => {
@ -138,10 +138,8 @@ describe("Editor- Inspector", () => {
});
});
cy.get(".action-icons-group > .d-flex > :nth-child(2)").click();
cy.get(".list-group-item").click();
cy.get('[data-cy="copy-value-to-clicpboard"]').realClick();
cy.realPress("Escape");
cy.window().then((win) => {
win.navigator.clipboard.readText().then((text) => {
expect(text).to.eq(`"value"`);

2
cypress-tests/cypress/e2e/editor/widget/csa.cy.js
View file

@ -153,7 +153,7 @@ describe("Editor- CSA", () => {
cy.get(commonWidgetSelector.draggableWidget("button1")).click();
cy.get(`${commonWidgetSelector.draggableWidget("filepicker1")} p`).should(
"have.text",
"Drag and Drop some files here, or click to select files"
"Drag and drop files here or click to select files"
);
});

2
cypress-tests/cypress/e2e/workspace/dashboard.cy.js
View file

@ -284,7 +284,7 @@ describe("dashboard", () => {
commonSelectors.toastMessage,
dashboardText.appClonedToast
);
cy.waitForAppLoad();
// cy.waitForAppLoad();
cy.wait(2000);
cy.clearAndType(commonSelectors.appNameInput, data.cloneAppName);
cy.dragAndDropWidget("button", 25, 25);

9
cypress-tests/cypress/support/utils/database.js
View file

@ -211,6 +211,7 @@ export const createNewColumnAndVerify = (
.should("be.visible")
.and("have.text", commonText.createButton)
.click();
cy.wait(1000);
cy.verifyToastMessage(
commonSelectors.toastMessage,
createNewColumnText.columnCreatedSuccessfullyToast
@ -402,7 +403,8 @@ export const deleteCondition = (selector, columnName = [], deleteIcon) => {
};
export const deleteRowAndVerify = (tableName, rowNumber = []) => {
navigateToTable(tableName);
cy.wait("@dbLoad");
cy.wait(1000);
//cy.wait("@dbLoad");
cy.get("body")
.find(".table>>tr")
.its("length")
@ -441,7 +443,8 @@ export const editRowAndVerify = (
cy.reload();
cy.intercept("GET", "api/tooljet_db/organizations/**").as("dbLoad");
navigateToTable(tableName);
cy.wait("@dbLoad");
cy.wait(1000);
//cy.wait("@dbLoad");
cy.get(editRowSelectors.editRowbutton).should("be.visible").click();
cy.get(editRowSelectors.editRowHeader).verifyVisibleElement(
"have.text",
@ -497,7 +500,7 @@ export const editRowWithInvalidData = (
) => {
cy.intercept("GET", "api/tooljet_db/organizations/**").as("dbLoad");
navigateToTable(tableName);
cy.wait("@dbLoad");
//cy.wait("@dbLoad");
cy.get(editRowSelectors.editRowbutton).should("be.visible").click();
cy.get(editRowSelectors.editRowHeader).verifyVisibleElement(

6
cypress-tests/cypress/support/utils/queryPanel/queryEditor.js
View file

@ -1,11 +1,11 @@
export const verifyElemtsNoGds = (option) => {
cy.get('[data-cy="label-select-datasource"]').verifyVisibleElement(
"have.text",
"Connect to a datasource"
"Connect to a Data Source"
);
cy.get('[data-cy="querymanager-description"]').verifyVisibleElement(
"contain.text",
"Select a datasource to start creating a new query. To know more about queries in ToolJet, you can read our"
"Select a Data Source to start creating a new query. To know more about queries in ToolJet, you can read our"
);
cy.get('[data-cy="querymanager-doc-link"]').verifyVisibleElement(
"have.text",
@ -47,4 +47,4 @@ export const verifyElemtsNoGds = (option) => {
);
};
export const verifyElemtsWithGds = (option) => {};
export const verifyElemtsWithGds = (option) => { };

2
deploy/ec2/variables.pkr.hcl
View file

@ -19,5 +19,5 @@ variable "ami_groups" {
variable "ami_regions" {
type = list(string)
default = ["us-west-1", "us-east-1", "us-east-2", "eu-west-2", "eu-central-1", "ap-northeast-1", "ap-southeast-1", "ap-northeast-3", "ap-south-1", "ap-northeast-2", "ap-southeast-2", "ca-central-1", "eu-west-1", "eu-north-1", "sa-east-1", "ap-east-1"]
default = ["us-west-1", "us-east-1", "us-east-2", "eu-west-2", "eu-central-1", "ap-northeast-1", "ap-southeast-1","ap-northeast-3", "ap-south-1", "ap-northeast-2", "ap-southeast-2", "ca-central-1", "eu-west-1", "eu-north-1", "sa-east-1", "ap-east-1"]
}

69
docs/docs/Enterprise/superadmin.md
View file

@ -17,18 +17,21 @@ The user details entered while setting up ToolJet will have Super Admin privileg
| 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 Global datasources for the user group in their workspace](/docs/data-sources/overview#permissions) | ✅ | ✅ |
| 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 Variables)](#manage-workspace-setting-groupsssoworkspace-variables) | ❌ | ✅ |
| [Manage all users from all the workspaces in the instance](#checking-all-the-users-in-the-instance) | ❌ | ✅ |
| [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) | ❌ | ✅ |
| [Make any user Super Admin](#make-the-user-super-admin) | ❌ | ✅ |
| [Restrict creation of personal workspace of users](#restrict-creation-of-personal-workspace-of-users) | ❌ | ✅ |
| [Enable Multiplayer editing](#enable-multiplayer-editing) | ❌ | ✅ |
| [Implement White Labelling](#white-labelling) | ❌ | ✅ |
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/superadmin/instance.png" alt="Super Admin: Enterprise" />
<img className="screenshot-full" src="/img/enterprise/superadmin/instanceset.png" alt="Super Admin: Enterprise" />
</div>
@ -36,17 +39,17 @@ The user details entered while setting up ToolJet will have Super Admin privileg
### Access any workspace
If a user is a Super Admin then they can switch to any workspace created by any user in the instance from the dropdown on the top-left of dashboard that is used to switch between workspaces.
If a user has Super Admin privileges, 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 list all the workspaces including workspaces created by the Super Admin or Any User.
The dropdown will display all workspaces, including those created by both Super Admins and any other users.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/superadmin/workspacedrop.png" alt="Super Admin: Enterprise" />
<img className="screenshot-full" src="/img/enterprise/superadmin/workspaceswitcher.png" alt="Super Admin: Enterprise" />
</div>
### Create Edit or Delete apps from any user's personal workspace
### Create, Edit or Delete apps from any user's personal workspace
Once the Super Admin accesses the workspace of any other user, they can create, edit or delete app on the workspace.
@ -60,7 +63,7 @@ If a user is Super Admin, they just need to open the workspace in which they wan
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/superadmin/archive.png" alt="Super Admin: Enterprise" />
<img className="screenshot-full" src="/img/enterprise/superadmin/unarchivesa.png" alt="Super Admin: Enterprise" />
</div>
@ -68,39 +71,46 @@ If a user is Super Admin, they just need to open the workspace in which they wan
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 Variables)
### 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
## Instance Settings
Only Super Admins can access the Instance Settings:
- **Manage All Users**
- **All Users**
- **Manage Instance Settings**
- **License**
- **White labelling**
### Checking all the users in the instance
## All Users
**Manage All Users** can be used to check all the users that are there - altogether from all the workspaces in an instance.
### Manage all users in the instance
**All Users** page can be used to check the list of all the users 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 from this page.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/superadmin/instancesettings.png" alt="Super Admin: Enterprise" />
<img className="screenshot-full" src="/img/enterprise/superadmin/allusersa.png" alt="Super Admin: Enterprise" />
</div>
### Archiving a user from workspace
Super Admins have the privilege to remove any user from any of the workspace they belong.
Super Admins have the privilege to remove any user from any workspace to which they belong.
Super Admins can go to **Manage All Users** page, Under the **Workspaces** column they'll see the number of workspaces a user belongs to. Click on the **`View(n)`**, a modal will pop up that will have the list of **`n`** number the workspaces, click on the **Archive/Unarchive** button next to the workspace name to remove the user from the workspace.
Super Admins can go to **All Users** page, Under the **Workspaces** column they'll see the number of workspaces a user belongs to. Click on the **`View(n)`**, a modal will pop up that will have the list of **`n`** number the workspaces, click on the **Archive/Unarchive** button next to the workspace name to remove the user from the workspace.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/superadmin/archwork.png" alt="Super Admin: Enterprise" />
<img className="screenshot-full" src="/img/enterprise/superadmin/archivesa.png" alt="Super Admin: Enterprise" />
</div>
@ -114,7 +124,15 @@ The user will become Super Admin and the Type column will update from **`workspa
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/superadmin/makesa.png" alt="Super Admin: Enterprise" />
<img className="screenshot-full" src="/img/enterprise/superadmin/saset.png" alt="Super Admin: Enterprise" />
</div>
## Manage Instance Settings
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/superadmin/instancesett.png" alt="Super Admin: Enterprise" />
</div>
@ -124,8 +142,17 @@ When a user joins a workspace, they are provided with their own personal workspa
Super Admins can **control** this behavior from the Manage Instance 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.
<div style={{textAlign: 'center'}}>
### Enable multiplayer editing
<img className="screenshot-full" src="/img/enterprise/superadmin/personal.png" alt="Super Admin: Enterprise" />
Super Admins can enable multiplayer editing from the Manage Instance Settings page. Once enabled, users will be able to edit the same app simultaneously resulting in real-time collaboration.
</div>
## License
Manage the instance license via the **Instance 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.
## 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.

45
docs/docs/Enterprise/white-label.md
View file

@ -5,35 +5,44 @@ title: White Label
<div className='badge badge--primary heading-badge'>Available on: Paid plans</div>
White Label feature will allow you to remove the ToolJet branding from the ToolJet platform and add your own custom logo and text.
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.
This feature allows you to rebrand the following:
- **App logo** (Logo on login screen, dashboard, and app-editor)
<div style={{textAlign: 'center'}}>
With this feature, you gain the ability to rebrand the following key elements:
<img className="screenshot-full" src="/img/enterprise/white-label/applogo.png" alt="ToolJet - Enterprise - White label" width="500"/>
- **Application Logo**: This includes the logo displayed on the login screen, dashboard, and app-editor.
</div>
<div style={{textAlign: 'center'}}>
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/white-label/newdash.png" alt="ToolJet - Enterprise - White label"/>
<img className="screenshot-full" src="/img/enterprise/white-label/appeditor.png" alt="ToolJet - Enterprise - White label" width="500"/>
</div>
</div>
- **Favicon**: The small icon associated with your application.
- **Favicon**
<div style={{textAlign: 'center'}}>
- **Page Title** (next to Favicon)
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/white-label/newfav.png" alt="ToolJet - Enterprise - White label"/>
<img className="screenshot-full" src="/img/enterprise/white-label/favicon.png" alt="ToolJet - Enterprise - White label" width="500" />
</div>
</div>
- **Page Title**: This is the text displayed next to the Favicon.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/white-label/title.png" alt="ToolJet - Enterprise - White label" />
</div>
## Configuration
To enable white labelling, you'll need to set the below mentioned **environment variables** in the .env file:
To enable white labelling, you'll need to go to the **Instance Settings** from the Dashboard and click on the `White labelling` tab. On the White labelling page, you'll be able to configure the following:
- `WHITE_LABEL_LOGO`: URL of the logo. Preferred dimensions of the logo are: width 130px and height 26px
- `WHITE_LABEL_TEXT`: The text that you want to display as Page Title
- `WHITE_LABEL_FAVICON`: URL of the favicon. Preferred dimensions of the logo are: 16x16px or 32x32px
- **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.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/white-label/whitelabelsettings.png" alt="ToolJet - Enterprise - White label" />
</div>

2
docs/docs/copilot.md
View file

@ -6,7 +6,7 @@ title: Copilot
<div className='badge badge--primary heading-badge'>Available on: Paid plans</div>
:::info BETA
ToolJet Copilot is currently in private beta for **Business** and **Enterprise** users only. It is not yet available for ToolJet Community Edition, but we plan to make it accessible in the future.
ToolJet Copilot is currently in private beta for **Business** and **Enterprise** users only.
:::
**ToolJet Copilot** helps you write your queries faster. It uses OpenAI to suggest queries based on your data.

34
docs/docs/data-sources/overview.md
View file

@ -3,26 +3,26 @@ id: overview
title: Overview
---
# Global Datasources : Overview
# Data Sources : Overview
Global data sources pull in and push data to any source including databases, external APIs, or services. Once a data source is connected to a workspace, the connection can be shared with any app of that workspace.
Data Sources pull in and push data to any source including databases, external APIs, or services. Once a data source is connected to a workspace, the connection can be shared with any app of that workspace.
:::caution
Global data sources are available only on **ToolJet version 2.3.0 and above**.
Data Source page is available only on **ToolJet version 2.3.0 and above**.
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/overview/overview.png" alt="Datasources: Overview" width="600"/>
<img className="screenshot-full" src="/img/datasource-reference/overview/overview.png" alt="Data Sources: Overview" width="600"/>
</div>
## Connecting global data sources
## Connecting data sources
1. **Create a new app** from the dashboard, and Click on the **+ Add new** button from the query panel.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/newqpanel.png" alt="Datasources: Overview" />
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/newqpanel.png" alt="Data Sources: Overview" />
</div>
@ -30,7 +30,7 @@ Global data sources are available only on **ToolJet version 2.3.0 and above**.
<div style={{textAlign: 'left'}}>
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/newgds.png" alt="Datasources: Overview" />
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/newgds.png" alt="Data Sources: Overview" />
</div>
@ -38,7 +38,7 @@ Global data sources are available only on **ToolJet version 2.3.0 and above**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/gdsadd.gif" alt="Overview of Datasources" />
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/gdsadd.gif" alt="Overview of Data Sources" />
</div>
@ -48,7 +48,7 @@ Global data sources are available only on **ToolJet version 2.3.0 and above**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/connectinggds.gif" alt="Overview of Datasources" />
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/connectinggds.gif" alt="Overview of Data Sources" />
</div>
@ -56,7 +56,7 @@ Global data sources are available only on **ToolJet version 2.3.0 and above**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/gdslist.png" alt="Overview of Datasources" />
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/gdslist.png" alt="Overview of Data Sources" />
</div>
@ -64,7 +64,7 @@ Global data sources are available only on **ToolJet version 2.3.0 and above**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/switch1.gif" alt="Overview of Datasources" />
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/switch1.gif" alt="Overview of Data Sources" />
</div>
@ -78,7 +78,7 @@ By default, 4 data sources will be available on every app on ToolJet:
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/defds.png" alt="Datasources: Overview" />
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/defds.png" alt="Data Sources: Overview" />
</div>
@ -101,7 +101,7 @@ To configure these permissions, navigate to **Workspace Settings** -> **Groups S
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/newpermissions.png" alt="Datasources: Overview" />
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/newpermissions.png" alt="Data Sources: Overview" />
</div>
@ -116,7 +116,7 @@ To configure these permissions, navigate to **Workspace Settings** -> **Groups S
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/viewedit.png" alt="Datasources: Overview" />
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/viewedit.png" alt="Data Sources: Overview" />
</div>
@ -129,14 +129,14 @@ On ToolJet versions below 2.3.0, the data source connection was made from within
1. When dealing with apps that were created using ToolJet versions prior to 2.3.0, you will notice the presence of the data source manager in the left sidebar of the App Builder.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/overview/leftsidebar.png" alt="Datasources: Overview" />
<img className="screenshot-full" src="/img/datasource-reference/overview/leftsidebar.png" alt="Data Sources: Overview" />
</div>
2. To change the scope, locate the kebab menu situated next to the connected data source. From this menu, select the **change scope** option.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/overview/changescope.png" alt="Datasources: Overview" />
<img className="screenshot-full" src="/img/datasource-reference/overview/changescope.png" alt="Data Sources: Overview" />
</div>
@ -145,6 +145,6 @@ On ToolJet versions below 2.3.0, the data source connection was made from within
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/overview/queryadd.png" alt="Datasources: Overview" />
<img className="screenshot-full" src="/img/datasource-reference/overview/queryadd.png" alt="Data Sources: Overview" />
</div>

145
docs/docs/data-sources/restapi.md
View file

@ -7,7 +7,7 @@ ToolJet can establish a connection with any available REST API endpoint and crea
## Connection
To establish a connection with the REST API global datasource, you can either click on the `Add new global datasource` button located on the query panel or navigate to the **[Global Datasources](/docs/data-sources/overview)** page through the ToolJet dashboard.
To establish a connection with the REST API data source, you can either click on the `Add new` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
<div style={{textAlign: 'center'}}>
@ -15,7 +15,7 @@ To establish a connection with the REST API global datasource, you can either cl
</div>
**ToolJet requires the following to connect to a REST API datasource:**
**ToolJet requires the following to connect to a REST API data source:**
- __Base URL__: REST API endpoint URL
- __Headers__: Key-value pairs to include as headers with REST API requests.
@ -33,29 +33,18 @@ To establish a connection with the REST API global datasource, you can either cl
</div>
:::info
REST HTTP methods that are supported are **GET, POST, PUT, PATCH & DELETE**.
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/rest-api/restquery.png" alt="ToolJet - Data source - REST API" />
</div>
## Querying REST API
Once you have connected to the REST API datasource, follow these steps to write queries and interact with a REST API in the ToolJet application:
Once you have connected to the REST API data source, follow these steps to write queries and interact with a REST API in the ToolJet application:
1. Open the ToolJet application and navigate to the query panel at the bottom of the app builder.
2. Click the `+Add` button to open the list of available `local` and `global datasources`.
3. Select **REST API** from the global datasource section.
2. Click the `+Add` button to open the list of available `Data Sources`.
3. Select **REST API** from the Data Source section.
4. Enter the required query parameters.
5. Click `Preview` to view the data returned from the query or click `Run` to execute the query.
:::tip
Query results can be transformed using Transformation. For more information on transformations, please refer to our documentation at **[link](/docs/tutorial/transformations)**.
Query results can be transformed using the **[Transformations](/docs/how-to/transformations)** feature.
:::
<div style={{textAlign: 'center'}}>
@ -64,6 +53,16 @@ Query results can be transformed using Transformation. For more information on t
</div>
<br/>
ToolJet supports the REST HTTP methods **GET**, **POST**, **PUT**, **PATCH**, and **DELETE**. You can select the method from the dropdown menu.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/rest-api/restquery.png" alt="ToolJet - Data source - REST API" />
</div>
## Response types
REST APIs can return data in a variety of formats, including **JSON** and **Base64**. JSON is a common format used for data exchange in REST APIs, while Base64 is often used for encoding binary data, such as images or video, within a JSON response.
@ -152,4 +151,114 @@ Read the guide on **[loading base64 data](/docs/how-to/loading-image-pdf-from-db
<img className="screenshot-full" src="/img/datasource-reference/rest-api/base64.png" alt="ToolJet - Data source - REST API" />
</div>
</div>
## OAuth 2.0 method for authenticating REST APIs
ToolJet’s REST API data source supports OAuth 2.0 as the authentication type.
Before setting up the REST API data source in ToolJet, we need to configure the **Google Cloud Platform** to gather the API keys required for the authorization access.
### Setting up Google Cloud Platform
Google Cloud Platform provides access to more than 350 APIs and Services that can allow us to access data from our Google account and its services. Let's create an OAuth application that can be given permission to use our Google profile data such as Name and Profile picture.
1. Sign in to your [Google Cloud](https://cloud.google.com/) account, and from the console create a New Project.
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:
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.
<img class="screenshot-full" src="/img/how-to/oauth2-authorization/gcp.png" alt="ToolJet - How To - REST API authentication using OAuth 2.0" height="420"/>
### Configuring ToolJet Application with Google's OAuth 2.0 API
Let's follow the steps to authorize ToolJet to access your Google profile data:
- Go to the **Data Sources** page from the ToolJet dashboard, select API category on sidebar and choose the **REST API** data source.
:::info
You can rename the data source by clicking on its default name `restapi`
:::
- In the **Base URL** field, enter the base URL `https://www.googleapis.com/oauth2/v1/userinfo`; the base URL specifies the network address of the API service.
- Select **Authentication** type as `OAuth 2.0`
- Keep the default values for **Grant Type**, **Add Access Token To**, and **Header Prefix** i.e. `Authorization Code`, `Request Header`, and `Bearer` respectively.
- Enter **Access Token URL**: `https://oauth2.googleapis.com/token`; this token allows users to verify their identity, and in return, receive a unique access token.
- Enter the **Client ID** and **Client Secret** that we generated from the [Google Console](http://console.developers.google.com/).
- In the **Scope** field, enter `https://www.googleapis.com/auth/userinfo.profile`; Scope is a mechanism in OAuth 2.0 to limit an application's access to a user's account. Check the scopes available for [Google OAuth2 API here](https://developers.google.com/identity/protocols/oauth2/scopes#oauth2).
- Enter **Authorization URL:** `https://accounts.google.com/o/oauth2/v2/auth`; the Authorization URL requests authorization from the user and redirects to retrieve an authorization code from identity server.
- Create three **Custom Authentication Parameters:**
| Params | Description |
|:----------- |:----------- |
| response_type | code ( `code` refers to the Authorization Code) |
| client_id | **Client ID** |
| redirect_uri | `http://localhost:8082/oauth2/authorize` if using ToolJet locally or enter this `https://app.tooljet.com/oauth2/authorize` if using ToolJet Cloud. |
- Keep the default selection for **Client Authentication** and **Save** the data source.
<img class="screenshot-full" src="/img/how-to/oauth2-authorization/restapi.png" alt="ToolJet - How To - REST API authentication using OAuth 2.0"/>
### Authenticating REST API
Let’s create a query to make a `GET` request to the URL, it will pop a new window and ask the user to authenticate against the API.
- Add a new query and select the REST API data source from the dropdown
- In the **Method** dropdown select `GET` and enabe the `Run query on application load?`
- Run the query.
- A new window will pop for authentication and once auth is successful, you can run the query again to get the user data like Name and Profile Picture.
## Bearer Token method for authenticating REST APIs
ToolJet’s REST API data source supports Bearer Token as the authentication type. Bearer Token is a security token that is issued by the authentication server to the client. The client then uses the token to access the protected resources hosted by the resource server.
### Configuring REST API data source with Bearer Token
- Go to the **Data Sources** page from the ToolJet dashboard, select **API** category on sidebar and choose the **REST API** data source.
:::info
You can rename the data source by clicking on its default name `restapi`
:::
- In the **Base URL** field, enter the base URL. The base URL specifies the network address of the API service. For example, `http://localhost:3001/api/bearer-auth`
- Enter the **Headers** if required. Headers are key-value pairs to include as headers with REST API requests.
- Select **Authentication** type as `Bearer` from the dropdown.
- Enter the **Token** in the field. The token is a security token that is issued by the authentication server to the client. The client then uses the token to access the protected resources hosted by the resource server.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/rest-api/none.png" alt="ToolJet - Data source - REST API" />
</div>
- Now you have option to select the **SSL Certificate** if required. SSL certificate is used to verify the server certificate. By default, it is set to `None`. You can provide the **CA Certificate** or **Client Certificate** from the dropdown.
- **CA Certificate**: Requires a CA certificate to verify the server certificate. Copy the content of `server.crt` file and paste it in the **CA Cert** field. `server.crt` file is the certificate file that is used to verify the server certificate.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/rest-api/cacert.png" alt="ToolJet - Data source - REST API" />
</div>
- **Client Certificate**: Requires a client certificate to authenticate with the server. `client.key`, `client.crt`, and `server.crt` files are the certificate files that are used to authenticate with the server. Copy the content of `client.key` file and paste it in the **Client Key** field. Copy the content of `client.crt` file and paste it in the **Client Cert** field. Copy the content of `server.crt` file and paste it in the **CA Cert** field.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/rest-api/clientcert.png" alt="ToolJet - Data source - REST API" />
</div>
- Once you have configured the REST API data source, click on the **Save** button.
### Authenticating REST API
Create a query to make a `GET` request to the URL, and it will return a success message if the token is valid.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/rest-api/bearersuccess.png" alt="ToolJet - Data source - REST API" />
</div>

26
docs/docs/data-sources/s3.md
View file

@ -11,7 +11,9 @@ ToolJet can connect to Amazon S3 buckets and perform various operation on them.
To add a new S3 source, go to the **Datasources manager** on the left sidebar of the app editor and click on `Add datasource` button. Select **AWS S3** from the modal that pops up.
ToolJet requires the following to connect to your AWS S3:
ToolJet supports connecting to AWS S3 using **IAM credentials**, **AWS Instance Profile** or **AWS ARN Role**.
If you are using **IAM credentials**, you will need to provide the following details:
- **Region**
- **Access key**
@ -21,7 +23,27 @@ It is recommended to create a new IAM user for the database so that you can cont
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/aws-s3/connectv2.png" alt="aws s3 modal" width="600" />
<img className="screenshot-full" src="/img/datasource-reference/aws-s3/iam.png" alt="aws s3 modal" width="600" />
</div>
To connect to AWS S3 using **AWS Instance Profile**, select the **Use AWS Instance Profile**. This will use the IAM role attached to the EC2 instance where ToolJet is running.
To access the metadata service of an ECS container and the EC2 instance, we use the WebIdentityToken parameter which is obtained from a successful login with an identity provider.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/aws-s3/awsinstance.png" alt="aws s3 modal" width="600" />
</div>
If you are using **AWS ARN Role**, you will need to provide the following details:
- **Region**
- **Role ARN**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/aws-s3/arn.png" alt="aws s3 modal" width="600" />
</div>

66
docs/docs/how-to/oauth2-authorization.md
View file

@ -1,66 +0,0 @@
---
id: oauth2-authorization
title: REST API authentication using OAuth 2.0
---
# REST API authentication using OAuth 2.0
ToolJet’s REST API data source supports OAuth 2.0 as the authentication type. In this guide, we’ll learn how to use **Google OAuth2 API** to delegate authorization and authentication for your ToolJet Application.
Before setting up the REST API data source in ToolJet, we need to configure the **Google Cloud Platform** to gather the API keys required for the authorization access.
## Setting up Google Cloud Platform
Google Cloud Platform provides access to more than 350 APIs and Services that can allow us to access data from our Google account and its services. Let's create an OAuth application that can be given permission to use our Google profile data such as Name and Profile picture.
1. Sign in to your [Google Cloud](https://cloud.google.com/) account, and from the console create a New Project.
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:
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.
<img class="screenshot-full" src="/img/how-to/oauth2-authorization/gcp.png" alt="ToolJet - How To - REST API authentication using OAuth 2.0" height="420"/>
## Configuring ToolJet Application with Google's OAuth 2.0 API
Let's follow the steps to authorize ToolJet to access your Google profile data:
- Select **add data source** from the left sidebar, and choose **REST API** from the dialog window.
:::info
You can rename the data source by clicking on its default name `REST API`
:::
- In the **URL** field, enter the base URL `https://www.googleapis.com/oauth2/v1/userinfo`; the base URL specifies the network address of the API service.
- Select authentication type as `OAuth 2.0`
- Keep the default values for **Grant Type**, **Add Access Token To**, and **Header Prefix** i.e. `Authorization Code`, `Request Header`, and `Bearer` respectively.
- Enter **Access Token URL**: `https://oauth2.googleapis.com/token`; this token allows users to verify their identity, and in return, receive a unique access token.
- Enter the **Client ID** and **Client Secret** that we generated from the [Google Console](http://console.developers.google.com/).
- In the **Scope** field, enter `https://www.googleapis.com/auth/userinfo.profile`; Scope is a mechanism in OAuth 2.0 to limit an application's access to a user's account. Check the scopes available for [Google OAuth2 API here](https://developers.google.com/identity/protocols/oauth2/scopes#oauth2).
- Enter **Authorization URL:** `https://accounts.google.com/o/oauth2/v2/auth`; the Authorization URL requests authorization from the user and redirects to retrieve an authorization code from identity server.
- Create three **Custom Authentication Parameters:**
| params | description |
| ----------- | ----------- |
| response_type | code ( `code` refers to the Authorization Code) |
| client_id | **Client ID** |
| redirect_uri | `http://localhost:8082/oauth2/authorize` if using ToolJet locally or enter this `https://app.tooljet.com/oauth2/authorize` if using ToolJet Cloud. |
- Keep the default selection for **Client Authentication** and **Save** the data source.
<img class="screenshot-full" src="/img/how-to/oauth2-authorization/restapi.png" alt="ToolJet - How To - REST API authentication using OAuth 2.0"/>
## Create the query
Let’s create a query to make a `GET` request to the URL, it will pop a new window and ask the user to authenticate against the API.
- Add a new query and select the REST API datasource from the dropdown
- In the **Method** dropdown select `GET` and in advance tab toggle `run query on page load?`
- **Save** and **Run** the query.
<img class="screenshot-full" src="/img/how-to/oauth2-authorization/oauth.gif" alt="ToolJet - How To - REST API authentication using OAuth 2.0"/>
A new window will pop for authentication and once auth is successful, you can run the query again to get the user data like Name and Profile Picture.

66
docs/docs/licensing.md → docs/docs/org-management/licensing.md
View file

@ -11,13 +11,18 @@ This comprehensive guide aims to assist you in the process of configuring paid p
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. In order to get this, please reach out to our team.
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.
After selecting the appropriate license that aligns with your needs, the next step is to proceed with the purchase. Once you have completed the onboarding process, we will generate a unique license key specifically tailored to your chosen specifications. Keep reading to gain a more comprehensive understanding of this process.
---
## 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:
**To update your trial license key, please follow these steps:**
1. Set up the instance and log in as a **[Super Admin](/docs/Enterprise/superadmin)**.
2. Navigate to the instance settings page.
3. In the license key tab, make the necessary updates to the provided license key.
@ -35,13 +40,32 @@ The trial license key will be valid for 14 days. To fully enjoy ToolJet, we reco
**Ref: Screenshot to update license key**
## A) Chosen Plan: Business Plan
## Purchasing a Paid License
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.
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.
**To update the business license key, follow these steps:**
### 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 instance settings page.
2. Go to the Instance settings page.
3. In the license key tab, update the provided license key.
4. Within the license tab of the instance settings page, you can access the limit tab, which provides details about available super admins, builders, and end users.
@ -61,24 +85,6 @@ As a super admin, you can conveniently view the remaining days of your enterpris
</div>
:::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 choose to move forward with the Enterprise Plan and have completed the purchase process with our sales team, kindly anticipate a response from our team within 24-48 hours to facilitate your onboarding process.
**To update the enterprise 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 instance settings page.
3. In the license key tab, update the provided license key.
4. Within the license tab of the instance 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.
:::
---
## Frequently Asked Questions (FAQs)
@ -94,10 +100,16 @@ If your business or enterprise edition license key is nearing expiration, please
**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 happens if my license expires?
### 2) What is the duration of my license's validity?
If you have an active license, you can find its validity period in the instance 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)**.
### 3) How can I add more users?
### 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)

12
docs/docs/release-management/multi-env.md
View file

@ -31,14 +31,14 @@ The default environments cannot be removed or renamed.
To configure connection settings for different environments, follow these steps:
1. Go to the **[Global Datasource](/docs/data-sources/overview)** page.
2. Click on the **Add new datasource** button.
3. Choose a datasource. In the connection modal, you'll find three tabs: **Production**, **Staging**, and **Development**.
4. Switch to each tab and enter the appropriate credentials for connecting to the respective database. Remember to save after entering credentials on each tab.
1. Go to the **[Data Source](/docs/data-sources/overview)** page.
2. Click on each category of data sources to view the list of available data sources. As you hover over the desired data source, an **Add** button will appear.
3. On clicking the **Add** button, a connection modal will appear. In the connection modal, you'll find three tabs: **Production**, **Staging**, and **Development**.
4. Switch to each tab and enter the appropriate credentials for connecting to the respective database. Remember to **save** after entering credentials on each tab.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/multi-env/envconnect.gif" alt="Multi-Environment" />
<img className="screenshot-full" src="/img/v2-beta/multi-env/multienvtabs.png" alt="Multi-Environment" />
</div>
@ -109,4 +109,4 @@ To configure connection settings for different environments, follow these steps:
Please note that only one version of the app can be released at a time.
:::
ToolJet automatically saves your most recently selected environment in the app builder. The next time you open an app, it will use the same environment. For example, if you switch to the staging environment in an app, the next time you open it will automatically use the same staging environment.
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.

137
docs/docs/setup/digitalocean.md
View file

@ -9,40 +9,141 @@ Now you can quickly deploy ToolJet using the Deploy to DigitalOcean button.
*If you have any questions feel free to join our [Slack Community](https://tooljet.com/slack) or send us an email at hello@tooljet.com.*
The latest docker image is `tooljet/tooljet:<version_tag>`
## Deploying
#### Follow the steps below to deploy ToolJet on DigitalOcean:
1. Click on the button below to start one click deployment
1. Once signed-in to your DigitalOcean account, click on the **Create App** button.
<div style={{textAlign: 'center'}}>
[![Deploy to DigitalOcean](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/ToolJet/ToolJet/tree/main)
<img className="screenshot-full" src="/img/setup/digitalocean/1.png" alt="ToolJet - Deploy on DigitalOcean" />
</div>
2. A new tab will open up, sign-in to your DigitalOCean account. Once signed-in, the **Create App** page will open up and **Resources** will be already selected. Click on **Next** button.
2. On the next page, you'll be asked to choose a **Resource** type, select **Docker Hub**. Enter the Repository name as `tooljet/tooljet` and the corresponding tag.
<img className="screenshot-full" src="/img/setup/digitalocean/resources.png" alt="ToolJet - Deploy on DigitalOcean - Resources" />
<div style={{textAlign: 'center'}}>
3. Now, on **Environment Variables** page you can add new variables or edit the existing ones. Check the [environment variables here](/docs/setup/env-vars).
<img className="screenshot-full" src="/img/setup/digitalocean/2.png" alt="ToolJet - Deploy on DigitalOcean" />
<img className="screenshot-full" src="/img/setup/digitalocean/env.png" alt="ToolJet - Deploy on DigitalOcean - Environment Variables" />
</div>
4. On the next page, you can change the **App name**, **Project**, and the **Region**.
3. Once the Resource is created, you'll be redirected to the **Resources** page. Click on the **Edit** button next to the Resource.
<img className="screenshot-full" src="/img/setup/digitalocean/region.png" alt="ToolJet - Deploy on DigitalOcean - App name" />
<div style={{textAlign: 'center'}}>
5. On the last page, you'll be asked to **Review** all the app details such that we entered before such as **Resources**, **Environment Variables**, **Region**, and there will also be **Billing** section at the end. Review all the details and click the **Create Resource** button.
<img className="screenshot-full" src="/img/setup/digitalocean/3.png" alt="ToolJet - Deploy on DigitalOcean" />
<img className="screenshot-full" src="/img/setup/digitalocean/review.png" alt="ToolJet - Deploy on DigitalOcean - App name" />
</div>
Make sure the **Run Command** is `./server/scripts/digitalocean-postbuild.sh` and the **HTTP** port is `3000`. Once you have edited the ToolJet resource click on the **Back** button.
6. Once you click the **Create Resource** button, the build will begin. Once the build is complete, you'll see the resource and a **URL** next to it. Click on the URL to open the deployed **ToolJet**.
<div style={{textAlign: 'center'}}>
:::tip
ToolJet server and client can be deployed as standalone applications. If you do not want to deploy the client on DigitalOcean, modify `package.json` accordingly. We have a [guide](/docs/setup/client) on deploying ToolJet client using services such as Firebase.
:::
<img className="screenshot-full" src="/img/setup/digitalocean/4.png" alt="ToolJet - Deploy on DigitalOcean" />
</div>
### Redis setup
ToolJet requires configuring Redis which is used for enabling multiplayer editing and for background jobs.
Follow the steps below to configure Redis database:
1. Navigate to **Database** and create a database cluster.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/setup/digitalocean/5.png" alt="ToolJet - Deploy on DigitalOcean" />
</div>
2. Select `Redis` from the database engine and add a unique name to the cluster and click on **Create Database cluster**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/setup/digitalocean/6.png" alt="ToolJet - Deploy on DigitalOcean" />
</div>
3. Once the set-up is complete, add the Redis connection string in the environmental variable of `tooliet-app`.
:::info
In the business edition, saving or making changes in apps is dependent on Redis, even if multi-player editing is not necessary.
:::
### Database setup
Follow the below steps to attach a postgresql database:
1. Click on **Add Resource** and select **Database** and click on add.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/setup/digitalocean/7.png" alt="ToolJet - Deploy on DigitalOcean" />
</div>
2. Enter the preffered name for the database and click **Create and attach**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/setup/digitalocean/8.png" alt="ToolJet - Deploy on DigitalOcean" />
</div>
### Setting up environment variables
1. Once the database is attached, click on **Next** to set up the environment variables.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/setup/digitalocean/9.png" alt="ToolJet - Deploy on DigitalOcean" />
</div>
2. Click on **Edit** next to `tooljet-app`.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/setup/digitalocean/10.png" alt="ToolJet - Deploy on DigitalOcean" />
</div>
3. Click on the build editor to edit the environment variables.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/setup/digitalocean/11.png" alt="ToolJet - Deploy on DigitalOcean" />
</div>
```bash
NODE_ ENV=production
NODE_OPTIONS=--max-old-space-size=4096
LOCKBOX MASTER_KEY= #Use `openssl rand -hex 32`
SECRET KEY BASE= #Use `openssl rand -hex 64`
DEPLOYMENT_PLATFORM=digitalocean
DATABASE_URL=${<enter the db name which was attached>.DATABASE_URL}
CA CERT=${<enter the db name which was attached>.CA_CERT}
TOOLJET HOST=${APP_URL}
TOOLJET_SERVER_URL=${APP_URL}
REDIS_URL= #connection string
```
DATABASE_URL and CA_CERT variable should be added in the above format.
4. After adding the environment variables, click on **Save**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/setup/digitalocean/12.png" alt="ToolJet - Deploy on DigitalOcean" />
</div>
To add additional environment variables, refer this [doc](https://docs.tooljet.com/docs/setup/env-vars/).
#### Deploying Tooljet Database
@ -51,7 +152,7 @@ You can learn more about this feature [here](/docs/tooljet-database).
Follow the steps below to deploy ToolJet Database on DigitalOcean:
1. If you are using dev database within ToolJet deployment, upgrade it to managed database. You could also add a separate database, if you intent use a different database, please refer the [environment variables](/docs/setup/env-vars#tooljet-database-feature-enable--optional-) for additional env variables.
1. If you are using dev database within ToolJet deployment, upgrade it to managed database. You could also add a separate database, if you intent use a different database, please refer the [environment variables](/docs/setup/env-vars#enable-tooljet-database--optional-) for additional env variables.
2. Create a new app for PostgREST server. You can opt for docker hub to deploy PostgREST image of version `10.1.x`.
@ -63,4 +164,4 @@ Follow the steps below to deploy ToolJet Database on DigitalOcean:
4. Add your newly created PostgREST app to the trusted sources of your managed or separate database.
5. Update your existing ToolJet application deployment with [environment variables](/docs/setup/env-vars#tooljet-database-feature-enable--optional-) required for PostgREST.
5. Update your existing ToolJet application deployment with [environment variables](/docs/setup/env-vars#enable-tooljet-database--optional-) required for PostgREST.

14
docs/docs/setup/docker.md
View file

@ -35,16 +35,17 @@ Confused about which setup to select? Feel free to ask the community via Slack:
1. Download our production docker-compose file into the server.
```bash
curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/docker/docker-compose-db.yaml
curl -LO https://tooljet-deployments.s3.us-west-1.amazonaws.com/docker/docker-compose-db.yaml
mv docker-compose-db.yaml docker-compose.yaml
mkdir postgres_data
mkdir redis_data
```
2. Create `.env` file in the current directory (where the docker-compose.yaml file is downloaded as in step 1):
```bash
curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/docker/.env.internal.example
curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/docker/internal.sh && chmod +x internal.sh
curl -LO https://tooljet-deployments.s3.us-west-1.amazonaws.com/docker/.env.internal.example
curl -LO https://tooljet-deployments.s3.us-west-1.amazonaws.com/docker/internal.sh && chmod +x internal.sh
mv .env.internal.example .env && ./internal.sh
```
@ -82,7 +83,8 @@ Confused about which setup to select? Feel free to ask the community via Slack:
2. Download our production docker-compose file into the server.
```bash
curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/docker/docker-compose.yaml
curl -LO https://tooljet-deployments.s3.us-west-1.amazonaws.com/docker/docker-compose.yaml
mkdir redis_data
```
3. Create `.env` file in the current directory (where the docker-compose.yaml file is downloaded as in step 1):
@ -96,8 +98,8 @@ Confused about which setup to select? Feel free to ask the community via Slack:
</div>
```bash
curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/docker/.env.external.example
curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/docker/external.sh && chmod +x external.sh
curl -LO https://tooljet-deployments.s3.us-west-1.amazonaws.com/docker/.env.external.example
curl -LO https://tooljet-deployments.s3.us-west-1.amazonaws.com/docker/external.sh && chmod +x external.sh
mv .env.external.example .env && ./external.sh
```

14
docs/docs/setup/ecs.md
View file

@ -39,8 +39,8 @@ Follow the steps below to deploy ToolJet on a ECS cluster.
Within the add container form that is shown:
- Specify your container name ex: `tooljet-ce`
- Set the image you intend to deploy. ex: `tooljet/tooljet-ce:v1.26.0`
- Specify your container name ex: `tooljet`
- Set the image you intend to deploy. ex: `tooljet/tooljet:<version_tag>`
- Update port mappings at container port `3000` for tcp protocol.
<img className="screenshot-full" src="/img/setup/ecs/container-setup.png" alt="container setup" />
@ -58,6 +58,16 @@ Follow the steps below to deploy ToolJet on a ECS cluster.
Read **[environment variables reference](/docs/setup/env-vars)**
:::
5. Please add redis container as part of the deployment. Please make sure that you are using redis version 6.x.x
Also add these env variable in the above tooljet container
```
REDIS_HOST=localhost
REDIS_PORT=6379
REDIS_USER=default
REDIS_PASSWORD=
```
4. Create a service to run your task definition within your cluster.
- Select launch type as Fargate.

10
docs/docs/setup/env-vars.md
View file

@ -63,20 +63,12 @@ Self-hosted version of ToolJet pings our server to fetch the latest product upda
### Comment feature enable ( optional )
Use this environment variable to enable/disable the feature that allows you to add comments on the canvas.
Use this environment variable to enable/disable the feature that allows you to add comments on the canvas. To configure this environment variable, ensure that multiplayer editing is enabled in the instance settings.
| variable | value |
| ---------------------- | ----------------- |
| COMMENT_FEATURE_ENABLE | `true` or `false` |
### Multiplayer feature enable ( optional )
Use this environment variable to enable/disable the feature that allows users to collaboratively work on the canvas.
| variable | value |
| -------------------------- | ----------------- |
| ENABLE_MULTIPLAYER_EDITING | `true` or `false` |
### Marketplace
#### Marketplace feature enable ( optional )

6
docs/docs/setup/google-cloud-run.md
View file

@ -20,9 +20,9 @@ Follow the steps below to deploy ToolJet on Cloud run with `gcloud` CLI.
```bash
gcloud auth configure-docker
docker pull tooljet/tooljet-ce:latest
docker tag tooljet/tooljet-ce:latest gcr.io/<replace-your-project-id>/tooljet/tooljet-ce:latest
docker push gcr.io/<replace-your-project-id>/tooljet/tooljet-ce:latest
docker pull tooljet/tooljet:latest
docker tag tooljet/tooljet:latest gcr.io/<replace-your-project-id>/tooljet/tooljet:latest
docker push gcr.io/<replace-your-project-id>/tooljet/tooljet:latest
```
Please run the above command by launching GoogleCLI which will help to push the Tooljet application image to Google container registry.

145
docs/docs/setup/heroku.md
View file

@ -1,145 +0,0 @@
---
id: heroku
title: Heroku
---
# Deploying ToolJet on Heroku
<iframe width="800" height="500" src="https://www.youtube.com/embed/ApDtwE1OXY0" frameborder="0" allowfullscreen width="100%"></iframe>
*If you have any questions feel free to join our [Slack Community](https://tooljet.com/slack) or send us an email at hello@tooljet.com.*
### Follow the steps below to deploy ToolJet on Heroku:
1. Click the button below to start one click deployment.
<div style={{textAlign: 'center'}}>
[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/tooljet/tooljet/tree/main)
</div>
2. On Heroku tab, you'll be asked to provide an `App name` and `Choose a region`. Enter the name for your deployment and select the region according to your choice.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/setup/heroku/appname.png" alt="heroku appname" />
</div>
3. Now let's enter the `Config vars` to configure additional [environment variables](/docs/setup/env-vars) that are required for the installation.
- **LOCKBOX_MASTER_KEY**: ToolJet server uses lockbox to encrypt datasource credentials. You should set the environment variable LOCKBOX_MASTER_KEY with a 32 byte hexadecimal string. If you have OpenSSL installed, you can run the command `openssl rand -hex 32` to generate the key.
- **NODE_ENV**: By default NODE_ENV is set to production.
- **NODE_OPTIONS**: Node options are configured to increase node memory to support app build.
- **SECRET_KEY_BASE**: ToolJet server uses a secure 64 byte hexadecimal string to encrypt session cookies. You should set the environment variable SECRET_KEY_BASE. If you have OpenSSL installed, you can run the command `openssl rand -hex 64` to generate the key.
- **TOOLJET_HOST**: Public URL of ToolJet installation. This is usually `https://<app-name-in-first-step\>.herokuapp.com`.
- **TOOLJET_SERVER_URL**: URL of ToolJet server installation. (This is same as the TOOLJET_HOST for Heroku deployments)
4. Click on `Deploy app` button at the bottom to initiate the build.
5. After the successful build, you'll see two buttons at the bottom: `Manage App` and `View`. Click on the `View` to open the app or click on `Manage App` to configure any settings.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/setup/heroku/build.png" alt="heroku build" />
</div>
:::tip
ToolJet server and client can be deployed as standalone applications. If you do not want to deploy the client on Heroku, modify `package.json` accordingly. We have a [guide](/docs/setup/client) on deploying ToolJet client using services such as Firebase.
:::
### Deploying Tooljet Database
If you intend to use this feature, you'd have to set up and deploy PostgREST server which helps querying ToolJet Database.
This feature is only enabled if `ENABLE_TOOLJET_DB` is set to `true` in the Tooljet application.
#### Follow the steps below to deploy ToolJet Database on Heroku:
:::note
Please install Heroku CLI on your local machine. Please refer Heroku CLI installation steps [**here**](https://devcenter.heroku.com/articles/heroku-cli).
:::
1. **Create a new Heroku app using the PostgREST buildpack**
1.1 Create a folder with your app name. Please give a unique name to the app.
```bash
mkdir ${YOUR_PGRST_APP_NAME}
cd $${YOUR_PGRST_APP_NAME}
git init
```
1.2 Add PostgREST buildpack to your app.
```bash
heroku apps:create ${YOUR_PGRST_APP_NAME} --buildpack https://github.com/PostgREST/postgrest-heroku.git
heroku git:remote -a ${YOUR_PGRST_APP_NAME}
```
2. **Attach the Tooljet app’s PostgreSQL database your Tooljet database app**
`${HEROKU_PG_DB_NAME` Should be the name of the PostgreSQL created by the Tooljet app.
You can get the `${HEROKU_PG_DB_NAME` of the Tooljet application from the Resources tab under Heroku Postgres attachments as shown below. (eg: `${HEROKU_PG_DB_NAME = postgresql-transparent-24158` ).
```bash
heroku addons:attach ${HEROKU_PG_DB_NAME} -a ${YOUR_PGRST_APP_NAME}
```
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/heroku/PostgreSQL-database.png" alt="PostgreSQL-database" />
</div>
3. **Create a Procfile**
:::info
The Procfile is a simple text file that is named Procfile without a file extension. For example, Procfile.txt is not valid.
:::
Please paste the below string within the Procfile file.
```bash
web: PGRST_SERVER_HOST=0.0.0.0 PGRST_SERVER_PORT=${PORT} PGRST_DB_URI=${PGRST_DB_URI:-${DATABASE_URL}} ./postgrest-${POSTGREST_VER}
```
4. **Set environment variables**
You can also refer environment variable [**here**](/docs/setup/env-vars#tooljet-database).
:::tip
If you have openssl installed, you can run the following command `openssl rand -hex 32` to generate the value for `PGRST_JWT_SECRET`.
If this parameter is not specified then PostgREST refuses authentication requests.
:::
```bash
heroku config:set PGRST_JWT_SECRET=
heroku config:set POSTGREST_VER=10.0.0
```
You can also refer environment variable [**here**](/docs/setup/env-vars#tooljet-database).
5. **Build and deploy your app**
```bash
git add Procfile
git commit -m "PostgREST on Heroku"
git push --set-upstream heroku main
```
Your Heroku app should be live at `${YOUR_APP_NAME}.herokuapp.com`.
6. **Additional environment variables for Tooljet application**
Please enter the below env variables in the Tooljet application, under the setting tab. You can also refer environment variable [**here**](/docs/setup/env-vars#tooljet-database).

8
docs/docs/setup/kubernetes-aks.md
View file

@ -18,7 +18,7 @@ Follow the steps below to deploy ToolJet on a AKS Kubernetes cluster.
2. Create k8s deployment
```bash
curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/AKS/deployment.yaml
curl -LO https://tooljet-deployments.s3.us-west-1.amazonaws.com/kubernetes/AKS/deployment.yaml
```
Make sure to edit the environment variables in the `deployment.yaml`. We advise to use secrets to setup sensitive information. You can check out the available options [here](https://docs.tooljet.com/docs/setup/env-vars).
@ -29,7 +29,7 @@ If there are self signed HTTPS endpoints that Tooljet needs to connect to, pleas
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`.
```bash
curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/AKS/service.yaml
curl -LO https://tooljet-deployments.s3.us-west-1.amazonaws.com/kubernetes/AKS/service.yaml
```
4. Apply YAML configs
@ -49,7 +49,7 @@ If you intend to use this feature, you'd have to set up and deploy PostgREST ser
1. Setup PostgREST server
```bash
kubectl apply -f https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/AKS/postgrest.yaml
kubectl apply -f https://tooljet-deployments.s3.us-west-1.amazonaws.com/kubernetes/AKS/postgrest.yaml
```
2. Update ToolJet deployment with the appropriate env variables [here](https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/AKS/deployment.yaml) and apply the changes.
2. Update ToolJet deployment with the appropriate env variables [here](https://tooljet-deployments.s3.us-west-1.amazonaws.com/kubernetes/AKS/deployment.yaml) and apply the changes.

12
docs/docs/setup/kubernetes-gke.md
View file

@ -16,7 +16,7 @@ Follow the steps below to deploy ToolJet on a GKE Kubernetes cluster.
1. Create an SSL certificate.
```bash
curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/GKE/certificate.yaml
curl -LO https://tooljet-deployments.s3.us-west-1.amazonaws.com/kubernetes/GKE/certificate.yaml
```
Change the domain name to the domain/subdomain that you wish to use for ToolJet installation.
@ -30,7 +30,7 @@ gcloud compute addresses create tj-static-ip --global
3. Create k8s deployment
```bash
curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/GKE/deployment.yaml
curl -LO https://tooljet-deployments.s3.us-west-1.amazonaws.com/kubernetes/GKE/deployment.yaml
```
Make sure to edit the environment variables in the `deployment.yaml`. You can check out the available options [here](https://docs.tooljet.com/docs/setup/env-vars).
@ -42,13 +42,13 @@ If there are self signed HTTPS endpoints that Tooljet needs to connect to, pleas
4. Create k8s service
```bash
curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/GKE/service.yaml
curl -LO https://tooljet-deployments.s3.us-west-1.amazonaws.com/kubernetes/GKE/service.yaml
```
5. Create k8s ingress
```bash
curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/GKE/ingress.yaml
curl -LO https://tooljet-deployments.s3.us-west-1.amazonaws.com/kubernetes/GKE/ingress.yaml
```
Change the domain name to the domain/subdomain that you wish to use for ToolJet installation.
@ -75,7 +75,7 @@ If you intend to use this feature, you'd have to set up and deploy PostgREST ser
1. Setup PostgREST server
```bash
kubectl apply -f https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/GKE/postgrest.yaml
kubectl apply -f https://tooljet-deployments.s3.us-west-1.amazonaws.com/kubernetes/GKE/postgrest.yaml
```
2. Update ToolJet deployment with the appropriate env variables [here](https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/GKE/deployment.yaml) and apply the changes.
2. Update ToolJet deployment with the appropriate env variables [here](https://tooljet-deployments.s3.us-west-1.amazonaws.com/kubernetes/GKE/deployment.yaml) and apply the changes.

6
docs/docs/setup/kubernetes.md
View file

@ -23,7 +23,7 @@ Follow the steps below to deploy ToolJet on a Kubernetes cluster.
3. Create a Kubernetes deployment
```bash
kubectl apply -f https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/deployment.yaml
kubectl apply -f https://tooljet-deployments.s3.us-west-1.amazonaws.com/kubernetes/deployment.yaml
```
:::info
@ -40,7 +40,7 @@ If there are self signed HTTPS endpoints that Tooljet needs to connect to, pleas
kubectl get pods
```
5. Create a Kubernetes services to publish the Kubernetes deployment that you've created. This step varies with cloud providers. We have a [template](https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/service.yaml) for exposing the ToolJet server as a service using an AWS loadbalancer.
5. Create a Kubernetes services to publish the Kubernetes deployment that you've created. This step varies with cloud providers. We have a [template](https://tooljet-deployments.s3.us-west-1.amazonaws.com/kubernetes/service.yaml) for exposing the ToolJet server as a service using an AWS loadbalancer.
**Examples:**
@ -61,4 +61,4 @@ If you intend to use this feature, you'd have to set up and deploy PostgREST ser
kubectl apply -f https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/postgrest.yaml
```
2. Update ToolJet deployment with the appropriate env variables [here](https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/deployment.yaml) and apply the changes.
2. Update ToolJet deployment with the appropriate env variables [here](https://tooljet-deployments.s3.us-west-1.amazonaws.com/kubernetes/deployment.yaml) and apply the changes.

8
docs/docs/setup/openshift.md
View file

@ -28,14 +28,14 @@ When entering one or more files and use --- to separate each definition
Copy paste deployment.yaml to the online editor
```
https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/openshift/deployment.yaml
https://tooljet-deployments.s3.us-west-1.amazonaws.com/openshift/deployment.yaml
```
Copy paste the service.yaml to the online editor
```
https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/openshift/service.yaml
https://tooljet-deployments.s3.us-west-1.amazonaws.com/openshift/service.yaml
```
<div style={{textAlign: 'center'}}>
@ -66,5 +66,5 @@ You can know more about tooljet database [here](https://docs.tooljet.com/docs/to
If you intend to use this feature, you'd have to set up and deploy PostgREST server which helps querying ToolJet Database. Please [follow the instructions here](https://docs.tooljet.com/docs/setup/env-vars#tooljet-database) for additional environment variables configuration to be done.
```
https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/openshift/postgrest.yaml
```
https://tooljet-deployments.s3.us-west-1.amazonaws.com/openshift/postgrest.yaml
```

228
docs/docs/tooljet_database.md
View file

@ -7,7 +7,7 @@ Use the ToolJet-hosted database to build apps faster, and manage your data with
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/db.png" alt="ToolJet Database" />
<img className="screenshot-full" src="/img/v2-beta/database/newui2/tabledash.png" alt="ToolJet Database" />
</div>
@ -68,6 +68,7 @@ ToolJet database allows you to:
- **[Maintain tables of data](#accessing-tooljet-database)** in a secure database that's only accessible within your ToolJet organization.
- **[Edit, search, filter, sort, and filter](#database-editor)** data using a spreadsheet-like interface.
- **[Quickly build applications and write queries](#querying-data-from-the-tooljet-database)** to interact with the ToolJet Database, just like any other datasource but without any setup.
- **[Export table](#export-table)** from the ToolJet Database to a JSON file.
## Accessing ToolJet Database
@ -77,7 +78,7 @@ The ToolJet Database is available on: **[ToolJet Cloud](https://tooljet.com)**,
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/tjdbside.png" alt="ToolJet Database editor" />
<img className="screenshot-full" src="/img/v2-beta/database/newui2/sidebaroption.png" alt="ToolJet Database" />
</div>
@ -87,7 +88,7 @@ You can manage the ToolJet Database directly from the Database Editor. ToolJet D
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/tables.png" alt="ToolJet Database editor"/>
<img className="screenshot-full" src="/img/v2-beta/database/newui2/tablescol.png" alt="ToolJet Database" />
</div>
@ -97,7 +98,7 @@ For creating a new table in ToolJet Database, click on the **Create New Table**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/newtable.png" alt="ToolJet Database editor"/>
<img className="screenshot-full" src="/img/v2-beta/database/newui2/createnew.png" alt="ToolJet Database" />
</div>
@ -105,7 +106,7 @@ When the **Create New Table** button is clicked, a drawer opens up from the righ
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/drawer.png" alt="ToolJet Database editor"/>
<img className="screenshot-full" src="/img/v2-beta/database/newui2/create2.png" alt="ToolJet Database editor"/>
</div>
@ -119,12 +120,13 @@ When the **Create New Table** button is clicked, a drawer opens up from the righ
- **int**: It is a numeric data type used to store whole numbers, that is, numbers without fractional components.
- **float**: float is also a numeric data type that is used to store inexact, variable-precision values.
- **boolean**: boolean data type can hold true, false, and null values.
- **bigint**: bigint is a numeric data type that is used to store whole numbers, that is, numbers without fractional components.
Click on **Create** button to create a new table.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/newtable2.png" alt="ToolJet Database editor" width="500"/>
<img className="screenshot-full" src="/img/v2-beta/database/newui2/datatypes.png" alt="ToolJet Database editor" width="500"/>
</div>
@ -134,7 +136,7 @@ You can enter a search term to search through all tables in the database.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/search.png" alt="ToolJet Database editor" />
<img className="screenshot-full" src="/img/v2-beta/database/newui2/search.png" alt="ToolJet Database editor" />
</div>
@ -149,7 +151,69 @@ A drawer from the right will open up from where you can create a new column by e
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/newcolumn2.png" alt="ToolJet Database editor"/>
<img className="screenshot-full" src="/img/v2-beta/database/newui2/addnewcolumn.png" alt="ToolJet Database editor"/>
</div>
### Delete column
To delete a particular column, just click on the column header and the **delete** button will appear, click on it to delete the column.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui2/deletecol.png" alt="ToolJet Database editor" />
</div>
### Add new row
To add a new row to the existing table data, click on the **Add new row** button. A drawer will open from the right where you can **enter the values** for the new row.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui2/addnewrow.png" alt="ToolJet Database editor" />
</div>
### Edit row
To edit the rows from the ToolJet database dashboard, click on the **Edit row** button. A drawer will open from the right from where first you need to **select the id** of the row to be edited from the dropdown and then you can edit the cell values of the selected row.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui2/editrow.gif" alt="ToolJet Database editor" />
</div>
### 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.
From the drawer, users can download the **template CSV file** in which they can enter the data to be uploaded to the ToolJet database's table or format their CSV file in the same way as the template file.
Once the CSV file is ready, click on the file picker to select the file or drag and drop the file in the file picker. Now, click on the **Upload data** button to upload the data to the ToolJet database.
**Requirements**:
- The data types of columns in the CSV file should match those in the ToolJet database table.
- The `id` column with a `serial` data type should not contain duplicate values.
**Limitations**:
- There is a limit of 1000 rows per CSV file that can be uploaded to the ToolJet database.
- The CSV file should not exceed 2MB in size.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui2/uploadcsv.png" alt="ToolJet Database editor" />
</div>
### 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.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui2/deleterec.png" alt="ToolJet Database editor" />
</div>
@ -163,24 +227,24 @@ You can add as many filter as you want into the table by clicking on the **Filte
- Enter a **value** for the selected operation
#### Available operations are:
- **equals**
- **greater than**
- **greater than or equal**
- **less than**
- **less than or equal**
- **not equal**
- **like**
- **ilike**
- **match**
- **imatch**
- **in**
- **contains**
- **contained**
- **not**
- **equals**: This operation is used to check if the value of the column is equal to the value entered in the input field.
- **greater than**: This operation is used to check if the value of the column is greater than the value entered in the input field.
- **greater than or equal**: This operation is used to check if the value of the column is greater than or equal to the value entered in the input field.
- **less than**: This operation is used to check if the value of the column is less than the value entered in the input field.
- **less than or equal**: This operation is used to check if the value of the column is less than or equal to the value entered in the input field.
- **not equal**: This operation is used to check if the value of the column is not equal to the value entered in the input field.
- **like**: This operation is used to check if the value of the column is like the value entered in the input field. This operation is case-sensitive. ex: `ToolJet` will not match `tooljet`
- **ilike**: This operation is used to check if the value of the column is like the value entered in the input field. This operation is case-insensitive. ex: `ToolJet` will match `tooljet`
- **match**: This operation is used to check if the value of the column is like the value entered in the input field. This operation is case-sensitive. ex: `ToolJet` will not match `tooljet`. This operation uses regular expressions. ex: `^ToolJet$` will match `ToolJet` but not `ToolJet Inc`.
- **imatch**: This operation is used to check if the value of the column is like the value entered in the input field. This operation is case-insensitive. This operation uses regular expressions. ex: `^ToolJet$` will match `ToolJet` but not `ToolJet Inc`.
- **in**: This operation is used to check if the value of the column is in the list of values entered in the input field. ex: `1,2,3`
- **contains**: This operation is used to check if the value of the column contains the value entered in the input field. This operation is case-sensitive. ex: `ToolJet` will not match `tooljet`
- **contained**: This operation is used to check if the value of the column is contained in the value entered in the input field. This operation is case-sensitive. ex: `ToolJet` will not match `tooljet`
- **not**: This operation is used to negate the result of the operation selected in the dropdown. ex: `not equals` will return all the records where the value of the column is not equal to the value entered in the input field.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/filter2.png" alt="ToolJet Database editor" />
<img className="screenshot-full" src="/img/v2-beta/database/newui2/filters.png" alt="ToolJet Database editor" />
</div>
@ -190,59 +254,41 @@ To sort the table data, click on the **Sort** button on top, select a **column**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/sort2.png" alt="ToolJet Database editor" />
<img className="screenshot-full" src="/img/v2-beta/database/newui2/sort.png" alt="ToolJet Database editor" />
</div>
### Add new row
### Edit table
To add a new row to the existing table data, click on the **Add new row** button. A drawer will open from the right where you can **enter the values** for the new row.
To edit the table name, click on the three vertical dots icon on the right of the table name and then click on the **Edit** option. A drawer will open from the right from where you can edit the table name.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/newrow2.png" alt="ToolJet Database editor" />
<img className="screenshot-full" src="/img/v2-beta/database/newui2/edittablename.png" alt="ToolJet Database editor" />
</div>
### Edit row
### Export table
To edit the rows from the ToolJet database dashboard, click on the **Edit row** button. A drawer will open from the right from where first you need to **select the id** of the row to be edited from the dropdown and then you can edit the cell values of the selected row.
The export table option allows you to download the selected table schema in a JSON file. This does not export the table data.
While [exporting the app](https://docs.tooljet.com/docs/dashboard#export-app), you can choose to export the app with or without table schema connected to the app.
To export the table schema, click on the three vertical dots icon on the right of the table name and then click on the **Export** option. A JSON file will be downloaded with the table schema.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/editrow.gif" alt="ToolJet Database editor" />
<img className="screenshot-full" src="/img/v2-beta/database/newui2/export.png" alt="ToolJet Database editor" />
</div>
### Delete records
### Delete table
To delete one or many records/rows, select on the checkbox at the right of the record or records that you want to delete. As soon as you select a single record, the button to delete record will appear on the top, click on the **Delete record** button to delete the selected records.
To delete 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.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/deleterecord.png" alt="ToolJet Database editor" />
</div>
### Delete column
To delete a particular column, just click on the column name and the **delete** button will appear, click on it to delete the column.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/delcol.png" alt="ToolJet Database editor" />
</div>
### Edit or Delete a table
When you click on the kebab menu (three vertical dots icon) on the right of the table name, you'll get two options: Edit and Delete.
- **Edit** will allow you to rename the table
- **Delete** will allow you to delete the table permanently
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/edittable.png" alt="ToolJet Database editor" />
<img className="screenshot-full" src="/img/v2-beta/database/newui2/deletetable.png" alt="ToolJet Database editor" />
</div>
@ -250,52 +296,84 @@ When you click on the kebab menu (three vertical dots icon) on the right of the
Querying ToolJet database is as easy as querying any other datasource on ToolJet.
- Go to the **query panel**, and click on the **+Add** button to add a new query, and select **Run ToolJetDb query**
- Go to the **query panel**, and click on the **+Add** button to add a new query, and select **ToolJet Database**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/q1.png" alt="ToolJet Database editor" />
<img className="screenshot-full" src="/img/v2-beta/database/newui/qtjdb.png" alt="ToolJet Database editor" />
</div>
- Enter the **Name** of the table that you want to query, select an **Operation** from the dropdown, **Create** the query, and then **Run** the query to get the response.
- Select the **table** that you want to query from the dropdown, choose an **operation** from the dropdown, and then enter the required parameters for the selected operation. Click on the **Run** button to execute the query.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/q2.png" alt="ToolJet Database editor" />
<img className="screenshot-full" src="/img/v2-beta/database/newui/qtjdb2.png" alt="ToolJet Database editor" />
</div>
:::info
- **Preview** button on the query panel returns the query response without executing the query. Once clicked, the response will be displayed on the Preview section of the query panel which can be viewed in JSON or Raw.
- When a new query is created, by default the query name is set to `tooljetdbN` (where N is a number) - you can rename the query by click on the query name or from the left sidebar of query panel.
:::
:::info
- **Preview** button on the query panel returns the query response without executing the query. Once clicked, the response will be displayed on the Preview section of the query panel which can be viewed as JSON or Raw.
- When a new query is created, by default the query name is set to `tooljetdbN` (where N is a number) - you can rename the query by click on the query name or from the left sidebar of query panel.
:::
### Available operations
#### List rows
This operation returns the list of all the records in the table
### List rows
This operation returns all the records from the table
#### Optional parameters
- **Filter**: Add a filter to the query response by setting a column, operation and value.
- **Sort**: Add a sort to the query response by setting a column and direction.
- **Limit**: Limit the query response. This parameter expects a numerical value. ex: 5
- **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
### Create row
This operation creates a new record in the table. You can create a single record or multiple records at once.
#### Required parameters
- **Columns**: Choose a column from the dropdown and enter a value for the new record.
- **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
This operation updates an existing record in the table
### Update row
This operation updates a record in the table. You can update a single record or multiple records at once.
#### Required parameter
- **Filter**: Add a condition by choosing a column, an operation, and the value for updating a particular record.
- **Columns**: Choose the columns for which you want to update the values for the selected record and enter the values for the selected columns.
#### Delete row
This operation deletes a record from the table
### Delete row
This operation deletes a record in the table. You can delete a single record or multiple records at once.
#### Required parameters
- **Filter**: Add a condition by choosing a column, an operation, and the value for deleting a particular record.
- **Limit**: Limit the number of records to be deleted by entering a number.
### Join tables
You can join two or more tables in the ToolJet database by using the **Join** operation.
#### Required parameters
- **From**: In the **From** section, there are the following parameters:
- **Selected Table**: Select the table from which you want to join the other table.
- **Type of Join**: Select the type of join you want to perform. The available options are: `Inner Join`, `Left Join`, `RIght Join`, and `Full Outer Join`.
- **Joining Table**: Select the table that you want to join with the selected table.
- **On**: Select the column from the **selected table** and the **joining table** on which you want to join the tables. Currently, only `=` operation is supported for joining tables.
- **AND or OR condition**: You can add multiple conditions by clicking on the **+Add more** button below each join. The conditions can be joined by `AND` or `OR` operation.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/join1.png" alt="ToolJet Database editor" />
</div>
- **Filter**: Add a condition by choosing a column, an operation, and the value for filtering the records. The operations supported are same as the [filter operations](#available-operations-are) for the **List rows** operation.
- **Sort**: Sort the query response by choosing a column and the order (ascending or descending).
- **Limit**: Limit the number of records to be returned by entering a number.
- **Offset**: Offset the number of records to be returned by entering a number. This parameter is used for pagination.
- **Select**: Select the columns that you want to return in the query response. By default, all the columns are selected.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/database/newui/join2.png" alt="ToolJet Database editor" />
</div>
:::info
If you have any other questions or feedback about **ToolJet Database**, please reach us out at hello@tooljet.com or join our **[Slack Community](https://www.tooljet.com/slack)**

14
docs/docs/tutorial/manage-users-groups.md
View file

@ -90,7 +90,7 @@ Every group on ToolJet has **four** sections:
- [Apps](#apps)
- [Users](#users)
- [Permissions](#permissions)
- [Datasources](#datasources)
- [Data Sources](#data-sources)
#### Apps:
@ -117,8 +117,8 @@ Admins and Super Admins can add or remove any numbers of users in a group. Just
Admins and Super Admins can set granular permission for the users added in that particular group, such as:
- **Create** and **Delete** Apps
- **Create**, **Update**, and **Delete** Folders
- **Create**, **Update**, and **Delete** [Workspace Variables](/docs/tutorial/workspace-variables)
- **Create** and **Delete** [Global Datasources](/docs/widgets/overview)
- **Create**, **Update**, and **Delete** [Workspace Constants](/docs/org-management/workspaces/workspace_constants/)
- **Create** and **Delete** [Data Sources](/docs/data-sources/overview)
<div style={{textAlign: 'center'}}>
@ -126,9 +126,9 @@ Admins and Super Admins can set granular permission for the users added in that
</div>
#### Datasources:
#### Data Sources
Only Admins and Super Admins can define what datasources can be **viewed** or **edited** by the users of that group.
Only Admins and Super Admins can define what data sources can be **viewed** or **edited** by the users of that group.
<div style={{textAlign: 'center'}}>
@ -172,7 +172,9 @@ This group contains admins by default. Admins can add more admins or remove the
</div>
### Creating new group
### Creating new group (Paid plans only)
Option to create a new group is available in the **paid plans** only. To create a new group:
- Click on `Create new group` button in the **Groups** page.
<div style={{textAlign: 'center'}}>

676
docs/docs/widgets/form.md
View file

@ -54,6 +54,86 @@ This **[list](/docs/widgets/form#custom-schema-examples)** provides examples of
}}
```
Here's an example using the custom schema of **Text Input**, **Number Input** and **Dropdown** components:
```js
{{{
"title":"Event Registration",
"properties":{
"textinput1":{
"type":"textinput",
"value":"",
"placeholder":"Enter Full Name",
"label":"Full Name",
"validation":{
"maxLength":30,
"minLength":5
},
"styles":{
"backgroundColor":"#00000000",
"borderRadius":5,
"borderColor":"#4299e1",
"errorTextColor":"#4299e1",
"disabled":false,
"visibility":"true",
"textColor":"#4299e1"
}
},
"numberInput1":{
"type":"number",
"styles":{
"backgroundColor":"#f6f5ff",
"borderRadius":5,
"textColor":"#4299e1",
"borderColor":"#4299e1",
"disabled":false,
"visibility":"true"
},
"value":22,
"maxValue":100,
"minValue":14,
"placeholder":"Enter your age",
"label":"Age"
},
"dropdown1":{
"type":"dropdown",
"values":[
1,
2,
3
],
"displayValues":[
"Male",
"Female",
"Perfer not to Answer"
],
"loading":false,
"value":3,
"label":"Gender",
"styles":{
"disabled":false,
"visibility":"true",
"borderRadius":5,
"borderColor":"#4299e1",
"justifyContent":"center"
}
}
},
"submitButton":{
"value":"Submit",
"styles":{
"backgroundColor":"#3A433B",
"borderColor":"#595959"
}
}
}
}}
```
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/form/customform.png" alt="Example form schema" />
</div>
## Events
To add an event to the **Form** component, go to the **Events** section and click on **Add handler**.
@ -147,21 +227,35 @@ Following actions of form component can be controlled using the Component Specif
Properties that can be used in Datepicker schema are:
```js
datepicker1: { // component name
type: 'datepicker', // define the type of component
datepicker1: {
type: 'datepicker',
styles: {
borderRadius: 5, // define the border radius as a numeric value
disabled: false, // set true to disable the component or false to enable it
visibility: 'true' // set 'true' to show the component or 'false' to hide it
borderRadius: 5,
disabled: false,
visibility: 'true'
},
value: '09/09/2023', // set the default date for the datepicker
disabledDates: ['08/09/2023'], // provide the dates in an array that you want to disable
enableTime: true, // set true to enable time or false to disable it
format: 'DD/MM/YYYY', // set the format of the date
label: 'Select a date' // set the label of the component
value: '09/09/2023',
disabledDates: ['08/09/2023'],
enableTime: true,
format: 'DD/MM/YYYY',
label: 'Select a date'
}
```
| 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 |
<div style={{textAlign:'center'}}>
<img className="screenshot-full" src="/img/widgets/form/datepickerschema.png" alt="Form custom schema" />
</div>
@ -171,24 +265,40 @@ datepicker1: { // component name
**Properties**
```js
numberInput:{ // component name
type: 'number', // define the type of component
styles: {
backgroundColor: '#f6f5ff', // set the background color of the component by providing a hex color code
borderRadius: 20, // provide a numeric value to set the border radius
textColor: 'red', // set the text color of the component by providing a hex color code
borderColor: 'blue', // set the border color of the component by providing a hex color code
disabled: false, // set true to disable the component or false to enable it
visibility: 'true' // set 'true' to show the component or 'false' to hide it
},
value: 10, // set the default value of the number input
maxValue: 12, // set the maximum value of the number input
minValue: 6, // set the minimum value of the number input
placeholder: 'test', // set the placeholder text of the number input
label: 'Number Input' // set the label of the component
},
numberInput1: {
type: 'number',
styles: {
backgroundColor: '#f6f5ff',
borderRadius: 20,
textColor: 'red',
borderColor: 'blue',
disabled: false,
visibility: 'true'
},
value: 10,
maxValue: 12,
minValue: 6,
placeholder: 'test',
label: 'Number Input'
}
```
| Key | Description | Expected 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 |
<div style={{textAlign:'center'}}>
<img className="screenshot-full" src="/img/widgets/form/numberinput.png" alt="Form custom schema" />
@ -200,49 +310,76 @@ numberInput:{ // component name
**Properties**
```js
passwordInput1:{ // component name
type:"password", // define the type of component
styles:{
backgroundColor: '#f6f5ff', // set the background color of the component by providing a hex color code
borderRadius: 10, // provide a numeric value to set the border radius
disabled: false, // set true to disable the component or false to enable it
visibility: 'true' // set 'true' to show the component or 'false' to hide it
},
validation:{
maxLength: 9, // set the maximum length of the password
minLength: 5, // set the minimum length of the password
regex: '^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$' // set the regex for the password
},
placeholder:"Enter a password", // set the placeholder text of the password input
label: '' // set the label of the component
},
passwordInput1: {
type: 'password',
styles: {
backgroundColor: '#f6f5ff',
borderRadius: 10,
disabled: false,
visibility: 'true'
},
validation: {
maxLength: 9,
minLength: 5,
regex: '^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$'
},
placeholder: 'Enter a password',
label: ''
}
```
| Key | Description | Expected 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 `' '` |
<div style={{textAlign:'center'}}>
<img className="screenshot-full" src="/img/widgets/form/password.png" alt="Form custom schema" />
</div>
### Checkbox
**Properties**
```js
checkbox1:{ // component name
type: 'checkbox', // define the type of component
styles: {
checkboxColor: 'red', // set the color of the checkbox by providing a hex color code
disabled: false, // set true to disable the component or false to enable it
textColor: 'red', // set the text color of the component by providing a hex color code
visibility: 'true' // set 'true' to show the component or 'false' to hide it
},
value: false, // set the default value of the checkbox
label: 'Checkbox' // set the label of the component
},
checkbox1: {
type: 'checkbox',
styles: {
checkboxColor: 'red',
disabled: false,
textColor: 'red',
visibility: 'true'
},
value: false,
label: 'Checkbox'
}
```
| Key | Description | Expected Value |
| :----------- | :----------- | :-----------|
| **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' |
<div style={{textAlign:'center'}}>
<img className="screenshot-full" src="/img/widgets/form/checkbox.png" alt="Form custom schema" />
@ -254,19 +391,31 @@ checkbox1:{ // component name
**Properties**
```js
toggleswitch1:{ // component name
type: 'toggle', // define the type of component
styles: {
textColor: 'blue', // set the text color of the component by providing a hex color code
disabled: false, // set true to disable the component or false to enable it
visibility: 'true', // set 'true' to show the component or 'false' to hide it
toggleSwitchColor: 'red' // set the color of the toggle switch by providing a hex color code
},
value: true, // set the default value of the toggle switch
label: 'Toggle switch' // set the label of the component
},
toggleswitch1: {
type: 'toggle',
styles: {
textColor: 'blue',
disabled: false,
visibility: 'true',
toggleSwitchColor: 'red'
},
value: true,
label: 'Toggle switch'
}
```
| Key | Description | Expected Value |
| :----------- | :----------- | :-----------|
| **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' |
<div style={{textAlign:'center'}}>
<img className="screenshot-full" src="/img/widgets/form/toggle.png" alt="Form custom schema" />
@ -278,19 +427,31 @@ toggleswitch1:{ // component name
**Properties**
```js
textArea1:{ // component name
type: 'textarea', // define the type of component
styles: {
disabled: false, // set true to disable the component or false to enable it
visibility: 'true', // set 'true' to show the component or 'false' to hide it
borderRadius: 20 // provide a numeric value to set the border radius
},
value: 'This is a text area', // set the default value of the text area
placeholder: 'Enter text here', // set the placeholder text of the text area
label: 'Text Area' // set the label of the component
},
textArea1: {
type: 'textarea',
styles: {
disabled: false,
visibility: 'true',
borderRadius: 20
},
value: 'This is a text area',
placeholder: 'Enter text here',
label: 'Text Area'
}
```
| 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' |
<div style={{textAlign:'center'}}>
<img className="screenshot-full" src="/img/widgets/form/textarea.png" alt="Form custom schema" />
@ -302,20 +463,32 @@ textArea1:{ // component name
**Properties**
```js
daterangepicker1: { // component name
type: 'daterangepicker', // define the type of component
styles: {
disabled: true, // set true to disable the component or false to enable it
visibility: 'true', // set 'true' to show the component or 'false' to hide it
borderRadius: 5 // provide a numeric value to set the border radius
},
defaultEndDate: '12/04/2022', // set the default end date of the date range picker
defaultStartDate: '1/04/2022', // set the default start date of the date range picker
format: 'DD/MM/YYYY', // set the format of the date
label: 'Select a date range' // set the label of the component
},
daterangepicker1: {
type: 'daterangepicker',
styles: {
disabled: true,
visibility: 'true',
borderRadius: 5
},
defaultEndDate: '12/04/2022',
defaultStartDate: '1/04/2022',
format: 'DD/MM/YYYY',
label: 'Select a date range'
}
```
| 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' |
<div style={{textAlign:'center'}}>
<img className="screenshot-full" src="/img/widgets/form/daterange.png" alt="Form custom schema" />
@ -327,22 +500,35 @@ daterangepicker1: { // component name
**Properties**
```js
multiselect1: { // component name
type: 'multiselect', // define the type of component
styles: {
disabled: false, // set true to disable the component or false to enable it
visibility: 'true', // set 'true' to show the component or 'false' to hide it
borderRadius: 5 // provide a numeric value to set the border radius
},
displayValues: ["one","two","three"], // set the value for option labels in an array format
label: 'Select options', // set the label of the component
value: [2,3], // set the default value(s) in an array
values: [1,2,3], // set the values in an array
showAllOption: true, // set true to show the 'All' option in the multiselect or false to hide it
label: 'Select options of your choice' // set the label of the component
},
multiselect1: {
type: 'multiselect',
styles: {
disabled: false,
visibility: 'true',
borderRadius: 5
},
displayValues: ["one", "two", "three"],
label: 'Select options of your choice',
value: [2, 3],
values: [1, 2, 3],
showAllOption: true
}
```
| Key | Description | Expected Value |
| :----------- | :----------- | :-----------|
| **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 |
<div style={{textAlign:'center'}}>
<img className="screenshot-full" src="/img/widgets/form/multiselect.png" alt="Form custom schema" />
@ -354,22 +540,37 @@ multiselect1: { // component name
**Properties**
```js
starRating1: { // component name
type: 'starrating', // define the type of component
styles: {
disabled: false, // set true to disable the component or false to enable it
visibility: 'true', // set 'true' to show the component or 'false' to hide it
textColor: 'yellow', // set the color of the stars by providing a hex color code
labelColor: 'red' // set the color of the label by providing a hex color code
},
allowHalfStar: true, // set true to allow selection of half star rating or false to disable it
defaultSelected: 4.5, // set the default value of the star rating
maxRating: 10, // set the maximum rating
tooltips: ['one','two','three','four'], // set the tooltips for each star in an array
label: 'Select a rating' // set the label of the component
},
starRating1: {
type: 'starrating',
styles: {
disabled: false,
visibility: 'true',
textColor: 'yellow',
labelColor: 'red'
},
allowHalfStar: true,
defaultSelected: 4.5,
maxRating: 10,
tooltips: ['one', 'two', 'three', 'four'],
label: 'Select a rating'
}
```
| Key | Description | Expected Value |
| :----------- | :----------- | :-----------|
| **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' |
<div style={{textAlign:'center'}}>
<img className="screenshot-full" src="/img/widgets/form/star.png" alt="Form custom schema" />
@ -381,24 +582,39 @@ starRating1: { // component name
**Properties**
```js
filepicker1: { // component name
type: 'filepicker', // define the type of component
styles: {
visibility: 'true', // set 'true' to show the component or 'false' to hide it
borderRadius: 10 // provide a numeric value to set the border radius
},
enableMultiple: true, // set true to enable multiple file selection or false to disable it
fileType: '*/*', // set the mime file type
instructionText: 'Click here to select files', // set the instruction text of the file picker
maxFileCount: 5, // set the maximum number of files that can be selected
maxSize: 6000000, // set the maximum size of the file in bytes
minSize: 25, // set the minimum size of the file in bytes
parseContent: true, // set true to parse the content of the file or false to disable it
parseFileType: 'csv', // set the file type to parse e.g. csv, text, xlsx
label: 'Select a file' // set the label of the component
},
filepicker1: {
type: 'filepicker',
styles: {
visibility: 'true',
borderRadius: 10
},
enableMultiple: true,
fileType: '*/*',
instructionText: 'Click here to select files',
maxFileCount: 5,
maxSize: 6000000,
minSize: 25,
parseContent: true,
parseFileType: 'csv',
label: 'Select a file'
}
```
| Key | Description | Expected Value |
| :----------- | :----------- | :-----------|
| **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' |
<div style={{textAlign:'center'}}>
@ -411,25 +627,41 @@ filepicker1: { // component name
**Properties**
```js
textinput1: { // component name
type: 'textinput', // define the type of component
value: 'Random text', // set the default value of the text input
placeholder: 'enter first name here', // set the placeholder text of the text input
label: 'First name', // set the label of the component
textinput1: {
type: 'textinput',
value: 'Random text',
placeholder: 'enter first name here',
label: 'First name',
validation: {
maxLength: 6, // set the maximum length validation of the text input
maxLength: 6
},
styles: {
backgroundColor: 'red', // set the background color of the component by providing a hex color code
borderRadius: 20, // provide a numeric value to set the border radius
errorTextColor: 'green', // set the color of the error text by providing a hex color code
disabled: false, // set true to disable the component or false to enable it
visibility: false, // set 'true' to show the component or 'false' to hide it
textColor: 'yellow' // set the text color by providing a hex color code
},
},
backgroundColor: 'red',
borderRadius: 20,
errorTextColor: 'green',
disabled: false,
visibility: false,
textColor: 'yellow'
}
}
```
| Key | Description | Expected Value |
| :----------- | :----------- | :-----------|
| **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' |
<div style={{textAlign:'center'}}>
<img className="screenshot-full" src="/img/widgets/form/textinput.png" alt="Form custom schema" />
@ -441,22 +673,37 @@ textinput1: { // component name
**Properties**
```js
dropdown1: { // component name
type: 'dropdown', // define the type of component
displayValues: [1, 2, 3], // set the value for option labels in an array format
values: ['one', 'two', 'three'], // set the option labels in an array
loading: false, // set true to show the loading state or false to hide it
value: 'two', // set the default selected value of the dropdown
label: 'Select a number', // set the label of the component
styles: {
disabled: false, // set true to disable the component or false to enable it
visibility: 'true', // set 'true' to show the component or 'false' to hide it
borderRadius: 5, // provide a numeric value to set the border radius
justifyContent: 'end' // set the alignment of the dropdown options to start, center or end
}
},
dropdown1: {
type: 'dropdown',
displayValues: [1, 2, 3],
values: ['one', 'two', 'three'],
loading: false,
value: 'two',
label: 'Select a number',
styles: {
disabled: false,
visibility: 'true',
borderRadius: 5,
justifyContent: 'end'
}
}
```
| Key | Description | Expected Value |
| :----------- | :----------- | :-----------|
| **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' |
<div style={{textAlign:'center'}}>
<img className="screenshot-full" src="/img/widgets/form/dropdown.png" alt="Form custom schema" />
@ -468,22 +715,36 @@ dropdown1: { // component name
**Properties**
```js
button1: { // component name
type:'button', // define the type of component
value: 'Submit', // set the button text
label: '', // set the label of the component, set the value null i.e '' to hide the label
styles: {
backgroundColor: 'blue', // set the background color of the button by providing a hex color code
textColor: 'white', // set the text color of the button by providing a hex color code
borderRadius: 5, // provide a numeric value to set the border radius
borderColor: 'black', // set the border color of the button by providing a hex color code
loaderColor: 'gray', // set the color of the loader on the button by providing a hex color code
visibility: 'true', // set 'true' to show the component or 'false' to hide it
disabled: true // set true to disable the component or false to enable it
button1: {
type: 'button',
value: 'Submit',
label: '',
styles: {
backgroundColor: 'blue',
textColor: 'white',
borderRadius: 5,
borderColor: 'black',
loaderColor: 'gray',
visibility: 'true',
disabled: true
}
},
}
```
| Key | Description | Expected Value |
| :----------- | :----------- | :-----------|
| **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 |
<div style={{textAlign:'center'}}>
<img className="screenshot-full" src="/img/widgets/form/button.png" alt="Form custom schema" />
@ -495,19 +756,30 @@ button1: { // component name
**Properties**
```js
text1: { // component name
type: 'text', // define the type of component
value: 'This is a text component', // set the value of the text component
label: '', // set the label of the component, set the value null i.e '' to hide the label
styles: {
backgroundColor: '#f6f5ff', // set the background color of the text by providing a hex color code
textColor: 'red', // set the text color by providing a hex color code
fontSize: 24, // set the font size of the text
fontWeight: 30 // set the font weight of the text
}
},
text1: {
type: 'text',
value: 'This is a text component',
label: '',
styles: {
backgroundColor: '#f6f5ff',
textColor: 'red',
fontSize: 24,
fontWeight: 30
}
}
```
| Key | Description | Expected Value |
| :----------- | :----------- | :-----------|
| **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 |
<div style={{textAlign:'center'}}>
<img className="screenshot-full" src="/img/widgets/form/text.png" alt="Form custom schema" />
@ -519,20 +791,32 @@ text1: { // component name
**Properties**
```js
radioButton1: { // component name
type: 'radio', // define the type of component
styles: {
textColor: 'black', // set the text color of the radio option by providing a hex color code
disabled: false, // set true to disable the component or false to enable it
visibility: 'true' // set 'true' to show the component or 'false' to hide it
},
displayValues: ['option 1', 'option 2', 'option 3'], // set the value for labels in an array format
label: 'Radio Buttons', // set the label of the component
value: 2, // set the default selected value of the radio button
values: [1,2,3], // set the valuees in an array
},
radioButton1: {
type: 'radio',
styles: {
textColor: 'black',
disabled: false,
visibility: 'true'
},
displayValues: ['option 1', 'option 2', 'option 3'],
label: 'Radio Buttons',
value: 2,
values: [1, 2, 3]
}
```
| Key | Description | Expected Value |
| :----------- | :----------- | :-----------|
| **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]` |
<div style={{textAlign:'center'}}>
<img className="screenshot-full" src="/img/widgets/form/radio.png" alt="Form custom schema" />

8
docs/docs/widgets/table.md
View file

@ -410,21 +410,17 @@ The **Link** column type enables cells to become clickable links that can be loa
| Column property | Description |
| ----------- | ----------- |
| Column name | Specifies the name displayed on the table column header. |
| Key | Specifies the key name associated with the loaded data in the table. The provided **key** can hold either a `string` or a `URL`. |
| Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
| Href | Specifies the key that holds the URL. By default, it is set to `{{cellValue}}`, which sets the href to the data loaded from the specified key. |
| 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. |
| 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. |
In the screenshot below, the **key** is set to `Title`, this key holds the string values. In the **Href** field, we are using `{{rowData.image}}`, which retrieves the URLs from the image key for their respective row.
:::info
For more information on using cellValue and rowData, refer to the **[how-to guide](/docs/how-to/access-cellvalue-rowdata)**.
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/table/linktype.png" alt="ToolJet - Widget Reference - Table" />
<img className="screenshot-full" src="/img/widgets/table/linkupd.png" alt="ToolJet - Widget Reference - Table" />
</div>

2
docs/docusaurus.config.js
View file

@ -121,7 +121,7 @@ module.exports = {
// Please change this to your repo.
editUrl: 'https://github.com/ToolJet/Tooljet/blob/develop/docs/',
includeCurrentVersion: false,
lastVersion: '2.17.0',
lastVersion: '2.19.0',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),

6
docs/sidebars.js
View file

@ -22,7 +22,6 @@ const sidebars = {
'setup/try-tooljet',
'setup/digitalocean',
'setup/docker',
'setup/heroku',
'setup/ec2',
'setup/ecs',
'setup/openshift',
@ -39,7 +38,6 @@ const sidebars = {
'setup/v2-migration-guide'
]
},
'licensing',
'tooljet-database',
'tooljet-copilot',
{
@ -291,6 +289,7 @@ const sidebars = {
'Enterprise/audit_logs',
'Enterprise/white-label',
'Enterprise/superadmin',
'org-management/licensing',
],
},
{
@ -360,7 +359,6 @@ const sidebars = {
'how-to/access-users-location',
'how-to/use-s3-signed-url-to-upload-docs',
'how-to/s3-custom-endpoints',
'how-to/oauth2-authorization',
'how-to/upload-files-aws',
'how-to/upload-files-gcs',
'how-to/loading-image-pdf-from-db',
@ -429,7 +427,7 @@ const sidebars = {
{
'type': 'link',
'label': 'Roadmap',
'href': 'https://github.com/ToolJet/ToolJet/projects/2?query=is%3Aopen+sort%3Aupdated-desc',
'href': 'https://github.com/tooljet/tooljet/milestones',
},
],
},

4
docs/src/css/custom.css
View file

@ -271,6 +271,10 @@ img {
width: 13px;
}
.DocSearch-Button-Placeholder {
font-size: 0.85rem
}
@media screen and (min-width: 768px) {
.DocSearch-Button-Container {
min-width: 200px;

BIN
docs/static/img/datasource-reference/rest-api/bearersuccess.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 132 KiB

BIN
docs/static/img/datasource-reference/rest-api/cacert.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
docs/static/img/datasource-reference/rest-api/clientcert.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 220 KiB

BIN
docs/static/img/datasource-reference/rest-api/none.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
docs/static/img/enterprise/superadmin/allusersa.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
docs/static/img/enterprise/superadmin/archivesa.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
docs/static/img/enterprise/superadmin/instanceset.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
docs/static/img/enterprise/superadmin/instancesett.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
docs/static/img/enterprise/superadmin/saset.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
docs/static/img/enterprise/superadmin/unarchivesa.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
docs/static/img/enterprise/superadmin/workspaceswitcher.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
docs/static/img/enterprise/white-label/newdash.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
docs/static/img/enterprise/white-label/newfav.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
docs/static/img/enterprise/white-label/title.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
docs/static/img/enterprise/white-label/whitelabelsettings.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
docs/static/img/setup/digitalocean/1.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 266 KiB

BIN
docs/static/img/setup/digitalocean/10.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
docs/static/img/setup/digitalocean/11.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 155 KiB

BIN
docs/static/img/setup/digitalocean/12.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 174 KiB

BIN
docs/static/img/setup/digitalocean/2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
docs/static/img/setup/digitalocean/3.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
docs/static/img/setup/digitalocean/4.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 90 KiB

BIN
docs/static/img/setup/digitalocean/5.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 306 KiB

BIN
docs/static/img/setup/digitalocean/6.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 229 KiB

BIN
docs/static/img/setup/digitalocean/7.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
docs/static/img/setup/digitalocean/8.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
docs/static/img/setup/digitalocean/9.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
docs/static/img/v2-beta/database/newui/create1.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
docs/static/img/v2-beta/database/newui/create2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 240 KiB

BIN
docs/static/img/v2-beta/database/newui/delete1.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 137 KiB

BIN
docs/static/img/v2-beta/database/newui/delete11.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 177 KiB

BIN
docs/static/img/v2-beta/database/newui/edit1.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 201 KiB

BIN
docs/static/img/v2-beta/database/newui/exporttable.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 140 KiB

BIN
docs/static/img/v2-beta/database/newui/filter1.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 182 KiB

BIN
docs/static/img/v2-beta/database/newui/join.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 244 KiB

BIN
docs/static/img/v2-beta/database/newui/join1.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 156 KiB

BIN
docs/static/img/v2-beta/database/newui/join2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
docs/static/img/v2-beta/database/newui/newcolumn1.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 238 KiB

BIN
docs/static/img/v2-beta/database/newui/qtjdb.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 132 KiB

BIN
docs/static/img/v2-beta/database/newui/qtjdb2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 163 KiB

BIN
docs/static/img/v2-beta/database/newui/search1.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
docs/static/img/v2-beta/database/newui/sort1.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 155 KiB

BIN
docs/static/img/v2-beta/database/newui/tables1.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
docs/static/img/v2-beta/database/newui/tjdb1.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 228 KiB

BIN
docs/static/img/v2-beta/database/newui/tjdbdash.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
docs/static/img/v2-beta/database/newui2/addnewcolumn.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 438 KiB

BIN
docs/static/img/v2-beta/database/newui2/addnewrow.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
docs/static/img/v2-beta/database/newui2/create2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 443 KiB

BIN
docs/static/img/v2-beta/database/newui2/createnew.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 139 KiB

BIN
docs/static/img/v2-beta/database/newui2/datatypes.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
docs/static/img/v2-beta/database/newui2/deletecol.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 145 KiB

BIN
docs/static/img/v2-beta/database/newui2/deleterec.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 138 KiB

BIN
docs/static/img/v2-beta/database/newui2/deletetable.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 158 KiB

BIN
docs/static/img/v2-beta/database/newui2/editrow.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
docs/static/img/v2-beta/database/newui2/edittablename.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 158 KiB

BIN
docs/static/img/v2-beta/database/newui2/export.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 196 KiB

BIN
docs/static/img/v2-beta/database/newui2/filters.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 217 KiB

BIN
docs/static/img/v2-beta/database/newui2/search.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 131 KiB

BIN
docs/static/img/v2-beta/database/newui2/sidebaroption.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 129 KiB

BIN
docs/static/img/v2-beta/database/newui2/sort.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 198 KiB

BIN
docs/static/img/v2-beta/database/newui2/tabledash.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 618 KiB

BIN
docs/static/img/v2-beta/database/newui2/tablescol.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 140 KiB

BIN
docs/static/img/v2-beta/database/newui2/uploadcsv.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 484 KiB

BIN
docs/static/img/v2-beta/multi-env/multienvtabs.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 103 KiB

Some files were not shown because too many files have changed in this diff Show more