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

Merge branch 'main' into appbuilder-1.6

Browse source
This commit is contained in:
Johnson Cherian 2024-04-08 14:42:40 +05:30
commit beeccff546
580 changed files with 67038 additions and 1622 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
.github/workflows/maketplace-plugins-deploy.yml vendored Normal file
View file

@ -0,0 +1,69 @@
name: Maketplace plugin build
on:
pull_request_target:
types: [labeled, unlabeled, closed]
workflow_dispatch:
env:
PR_NUMBER: ${{ github.event.number }}
BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
jobs:
deploy-marketplace-plugin:
if: ${{ github.event.action == 'labeled' && github.event.label.name == 'deploy-marketplace-plugin' }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
with:
ref: ${{ github.event.pull_request.head.ref }}
- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v4
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_MAR_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_MAR_ACCESS_KEY }}
aws-region: us-east-2
- name: Build marketplace plugins
run: |
cd markertplace
npm install && npm run build --workspaces
AWS_BUCKET=tooljet-plugins-stage node scripts/upload-to-s3.js
- name: Comment deployment URL
uses: actions/github-script@v5
with:
github-token: ${{secrets.GITHUB_TOKEN}}
script: |
github.rest.issues.createComment({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
body: 'Marketplace Plugin added to stage bucket'
})
- uses: actions/github-script@v6
with:
script: |
try {
await github.rest.issues.removeLabel({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
name: 'deploy-marketplace-plugin'
})
} catch (e) {
console.log(e)
}
await github.rest.issues.addLabels({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
labels: ['marketplace-plugin-deployed']
})

4
.github/workflows/render-preview-deploy.yml vendored
View file

@ -132,6 +132,10 @@ jobs:
{
"key": "ENABLE_MARKETPLACE_FEATURE",
"value": "true"
},
{
"key": "TOOLJET_MARKETPLACE_URL",
"value": "${{ secrets.MARKETPLACE_BUCKET }}"
}
],
"serviceDetails": {

2
.version
View file

@ -1 +1 @@
2.33.3
2.34.2

2
cypress-tests/cypress-workspace.config.js
View file

@ -76,7 +76,7 @@ module.exports = defineConfig({
experimentalRunAllSpecs: true,
baseUrl: "http://localhost:8082",
specPattern: [
"cypress/e2e/happyPath/platform/ceTestcases/appSlug.cy.js",
"cypress/e2e/happyPath/platform/ceTestcases/editor/appSlug.cy.js",
"cypress/e2e/happyPath/platform/commonTestcases/**/*.cy.js",
"cypress/e2e/happyPath/platform/ceTestcases/**/!(*appSlug).cy.js"
],

4
cypress-tests/cypress/constants/texts/dataSource.js
View file

@ -2,8 +2,8 @@ export const dataSourceText = {
labelDataSources: "Datasources",
labelAddDataSource: "+ add data source",
allDataSources: "All data sources (41)",
allDatabase: "Databases (17)",
allDataSources: "All data sources (42)",
allDatabase: "Databases (18)",
allApis: "APIs (20)",
allCloudStorage: "Cloud Storages (4)",
pluginsLabelAndCount: "Plugins (0)",

2
cypress-tests/cypress/constants/texts/elasticsearch.js
View file

@ -2,6 +2,6 @@ export const elasticsearchText = {
elasticSearch: "Elasticsearch",
cypressElasticsearch: "cypress-elasticsearch",
errorConnectionRefused: "connect ECONNREFUSED ::1:9200",
errorConnectionRefused: "connect ECONNREFUSED 127.0.0.1:9200",
errorGetAddrInfoNotFound: "getaddrinfo ENOTFOUND elasticsearch_host",
};

8
cypress-tests/cypress/constants/texts/postgreSql.js
View file

@ -4,13 +4,13 @@ export const postgreSqlText = {
allDataSources: () => {
return Cypress.env("marketplace_action")
? "All data sources (43)"
: "All data sources (41)";
? "All data sources (44)"
: "All data sources (42)";
},
allDatabase: () => {
return Cypress.env("marketplace_action")
? "Databases (19)"
: "Databases (17)";
? "Databases (20)"
: "Databases (18)";
},
allApis: "APIs (20)",
allCloudStorage: "Cloud Storages (4)",

8
cypress-tests/cypress/e2e/happyPath/marketplace/commonTestcases/data-source/mongoDbHappyPath.cy.js
View file

@ -108,7 +108,7 @@ describe("Data source MongoDB", () => {
);
cy.get('[data-cy="connection-alert-text"]').verifyVisibleElement(
"have.text",
"connect ECONNREFUSED ::1:27017"
mongoDbText.errorConnectionRefused
);
cy.get('[data-cy="query-select-dropdown"]').type(
mongoDbText.optionConnectUsingConnectionString
@ -149,7 +149,11 @@ describe("Data source MongoDB", () => {
cy.get(postgreSqlSelector.buttonSave)
.verifyVisibleElement("have.text", postgreSqlText.buttonTextSave)
.click();
cy.verifyToastMessage(
commonSelectors.toastMessage,
postgreSqlText.toastDSSaved
);
cy.wait(1000);
deleteDatasource(`cypress-${data.dataSourceName}-mongodb`);
});

10
cypress-tests/cypress/e2e/happyPath/marketplace/commonTestcases/data-source/sqlServerHappyPath.cy.js
View file

@ -120,11 +120,11 @@ describe("Data sources", () => {
postgreSqlText.placeholderEnterHost,
Cypress.env("sqlserver_host")
);
fillDataSourceTextField(
"Instance",
"Enter the name of the database instance",
Cypress.env("sqlserver_instance")
);
// fillDataSourceTextField(
// "Instance",
// "Enter the name of the database instance",
// Cypress.env("sqlserver_instance")
// );
fillDataSourceTextField(
postgreSqlText.labelPort,
postgreSqlText.placeholderEnterPort,

0
cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/appSlug.cy.js → cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/editor/appSlug.cy.js
View file

0
cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/privateAndPublicApp.cy.js → cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/editor/privateAndPublicApp.cy.js
View file

0
cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/groupDuplication.cy.js → cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/workspace/groupDuplication.cy.js
View file

116
cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/manageSSO.cy.js → cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/workspace/manageSSO.cy.js
View file

@ -11,10 +11,13 @@ describe("Manage SSO for multi workspace", () => {
const envVar = Cypress.env("environment");
beforeEach(() => {
cy.defaultWorkspaceLogin();
SSO.setSSOStatus("My workspace", "google", false);
SSO.setSSOStatus("My workspace", "git", false);
SSO.deleteOrganisationSSO("My workspace", ["google", "git"]);
});
it("Should verify General settings page elements", () => {
SSO.resetDomain();
SSO.setSignupStatus(false);
SSO.defaultSSO(true);
common.navigateToManageSSO();
cy.get(commonSelectors.breadcrumbTitle).should(($el) => {
expect($el.contents().first().text().trim()).to.eq(
@ -83,7 +86,7 @@ describe("Manage SSO for multi workspace", () => {
.verifyVisibleElement("have.text", ssoText.saveButton);
SSO.googleSSOPageElements();
SSO.defaultSSO("My workspace", false);
SSO.defaultSSO(false);
cy.logoutApi();
cy.visit("/login/my-workspace");
cy.get(ssoSelector.googleIcon).should("be.visible");
@ -94,7 +97,7 @@ describe("Manage SSO for multi workspace", () => {
});
it("Should verify Git SSO page elements", () => {
SSO.defaultSSO("My workspace", true);
SSO.defaultSSO(true);
common.navigateToManageSSO();
@ -139,7 +142,7 @@ describe("Manage SSO for multi workspace", () => {
.verifyVisibleElement("have.text", ssoText.saveButton);
SSO.gitSSOPageElements();
SSO.defaultSSO("My workspace", false);
SSO.defaultSSO(false);
cy.logoutApi();
cy.visit("/login/my-workspace");
@ -149,107 +152,4 @@ describe("Manage SSO for multi workspace", () => {
ssoText.gitSignInText
);
});
if (envVar === "Community") {
it.skip("Should verify the workspace login page", () => {
data.workspaceName = fake.companyName.toLowerCase();
cy.apiLogin();
cy.apiCreateWorkspace(data.workspaceName, data.workspaceName);
cy.visit(data.workspaceName);
cy.wait(500);
common.navigateToManageSSO();
SSO.visitWorkspaceLoginPage();
SSO.workspaceLoginPageElements(data.workspaceName);
SSO.workspaceLogin(data.workspaceName);
SSO.disableDefaultSSO();
SSO.visitWorkspaceLoginPage();
cy.notVisible(ssoSelector.googleSSOText);
cy.notVisible(ssoSelector.gitSSOText);
SSO.passwordLoginVisible();
SSO.workspaceLogin(data.workspaceName);
common.navigateToManageSSO();
cy.get(ssoSelector.google).should("be.visible").click();
cy.get(ssoSelector.googleEnableToggle).check();
cy.get(ssoSelector.statusLabel).verifyVisibleElement(
"have.text",
ssoText.enabledLabel
);
SSO.visitWorkspaceLoginPage();
cy.get(ssoSelector.googleSSOText).verifyVisibleElement(
"have.text",
ssoText.googleSSOText
);
cy.notVisible(ssoSelector.gitSSOText);
SSO.passwordLoginVisible();
SSO.workspaceLogin(data.workspaceName);
common.navigateToManageSSO();
cy.get(ssoSelector.google).should("be.visible").click();
cy.get(ssoSelector.googleEnableToggle).uncheck();
cy.get(ssoSelector.statusLabel).verifyVisibleElement(
"have.text",
ssoText.disabledLabel
);
cy.get(ssoSelector.git).should("be.visible").click();
cy.get(ssoSelector.gitEnableToggle).check();
cy.get(ssoSelector.statusLabel).verifyVisibleElement(
"have.text",
ssoText.enabledLabel
);
SSO.visitWorkspaceLoginPage();
cy.get(ssoSelector.gitSSOText).verifyVisibleElement(
"have.text",
ssoText.gitSignInText
);
SSO.passwordLoginVisible();
SSO.workspaceLogin(data.workspaceName);
common.navigateToManageSSO();
cy.get(ssoSelector.google).should("be.visible").click();
cy.get(ssoSelector.googleEnableToggle).check();
cy.get(ssoSelector.statusLabel).verifyVisibleElement(
"have.text",
ssoText.enabledLabel
);
SSO.visitWorkspaceLoginPage();
SSO.workspaceLoginPageElements(data.workspaceName);
SSO.workspaceLogin(data.workspaceName);
common.navigateToManageSSO();
cy.get(ssoSelector.passwordEnableToggle).uncheck();
cy.get(commonSelectors.buttonSelector("Yes")).click();
SSO.visitWorkspaceLoginPage();
cy.get(ssoSelector.googleSSOText).verifyVisibleElement(
"have.text",
ssoText.googleSSOText
);
cy.get(ssoSelector.gitSSOText).verifyVisibleElement(
"have.text",
ssoText.gitSignInText
);
cy.notVisible(commonSelectors.workEmailInputField);
cy.notVisible(commonSelectors.passwordInputField);
cy.notVisible(commonSelectors.loginButton);
data.workspaceName = fake.companyName.toLowerCase();
cy.apiLogin();
cy.apiCreateWorkspace(data.workspaceName, data.workspaceName);
cy.visit(data.workspaceName);
cy.wait(500);
SSO.disableDefaultSSO();
cy.get(ssoSelector.passwordEnableToggle).uncheck();
cy.get(commonSelectors.buttonSelector("Yes")).click();
SSO.visitWorkspaceLoginPage();
cy.get(ssoSelector.noLoginMethodWarning).verifyVisibleElement(
"have.text",
ssoText.noLoginMethodWarning
);
});
}
});

0
cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/workspaceConstants.cy.js → cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/workspace/workspaceConstants.cy.js
View file

77
cypress-tests/cypress/support/utils/manageSSO.js
View file

@ -584,10 +584,77 @@ export const setSSOStatus = (workspaceName, ssoType, enabled) => {
});
};
export const defaultSSO = (workspaceName, enabled) => {
cy.task("updateId", {
dbconfig: Cypress.env("app_db"),
sql: `UPDATE organizations SET inherit_sso = ${enabled ? "true" : "false"
} WHERE name = '${workspaceName}'`,
export const defaultSSO = (enable) => {
cy.getCookie("tj_auth_token").then((cookie) => {
cy.request(
{
method: "PATCH",
url: "http://localhost:3000/api/organizations",
headers: {
"Tj-Workspace-Id": Cypress.env("workspaceId"),
Cookie: `tj_auth_token=${cookie.value}`,
},
body: { inheritSSO: enable },
},
{ log: false }
).then((response) => {
expect(response.status).to.equal(200);
});
});
};
export const setSignupStatus = (enable) => {
cy.getCookie("tj_auth_token").then((cookie) => {
cy.request(
{
method: "PATCH",
url: "http://localhost:3000/api/organizations",
headers: {
"Tj-Workspace-Id": Cypress.env("workspaceId"),
Cookie: `tj_auth_token=${cookie.value}`,
},
body: { enableSignUp: enable },
},
{ log: false }
).then((response) => {
expect(response.status).to.equal(200);
});
});
};
export const deleteOrganisationSSO = (workspaceName, services) => {
let workspaceId;
cy.task("updateId", {
dbconfig: Cypress.env("app_db"),
sql: `select id from organizations where name='${workspaceName}';`,
}).then((resp) => {
workspaceId = resp.rows[0].id;
cy.task("updateId", {
dbconfig: Cypress.env("app_db"),
sql: `DELETE FROM sso_configs WHERE organization_id = '${workspaceId}' AND sso IN (${services
.map((service) => `'${service}'`)
.join(",")});`,
});
});
};
export const resetDomain = () => {
cy.getCookie("tj_auth_token").then((cookie) => {
cy.request(
{
method: "PATCH",
url: "http://localhost:3000/api/organizations",
headers: {
"Tj-Workspace-Id": Cypress.env("workspaceId"),
Cookie: `tj_auth_token=${cookie.value}`,
},
body: { domain: "" },
},
{ log: false }
).then((response) => {
expect(response.status).to.equal(200);
});
});
};

10
cypress-tests/cypress/support/utils/manageUsers.js
View file

@ -68,6 +68,7 @@ export const manageUsersElements = () => {
"have.text",
usersText.buttonUploadCsvFile
);
cy.get(usersSelector.addUsersCardTitle).verifyVisibleElement(
"have.text",
usersText.addUsersCardTitle
@ -121,6 +122,15 @@ export const manageUsersElements = () => {
"have.text",
usersText.buttonDownloadTemplate
);
cy.exec("cd ./cypress/downloads/ && rm -rf *");
cy.get(usersSelector.buttonDownloadTemplate).click();
cy.wait(4000)
cy.exec("ls ./cypress/downloads/").then((result) => {
const downloadedAppExportFileName = result.stdout.split("\n")[0];
expect(downloadedAppExportFileName).to.contain.string("sample_upload.csv");
});
cy.get(usersSelector.iconBulkUpload).should("be.visible");
cy.get(usersSelector.helperTextSelectFile).verifyVisibleElement(
"have.text",

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

@ -30,6 +30,7 @@ The user details entered while setting up ToolJet will have Super Admin privileg
| [Make any user Super Admin](#make-the-user-super-admin) | ❌ | ✅ |
| [Manage all workspaces in the instance(Archive/Unarchive)](#all-workspaces) | ❌ | ✅ |
| [Restrict creation of personal workspace of users](#restrict-creation-of-personal-workspace-of-users) | ❌ | ✅ |
| [Configure instance level login](#instance-login) | ❌ | ✅ |
| [Enable Multiplayer editing](#enable-multiplayer-editing) | ❌ | ✅ |
| [Implement White Labelling](#white-labelling) | ❌ | ✅ |
@ -42,7 +43,7 @@ If a user is a Super Admin, they can switch to any workspace created by any user
The dropdown will display all workspaces, including those created by both Super Admins and any other users.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/workspaceswitcher.png" alt="Superadmin: settings" />
<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/workspaceswitcher.png" alt="Superadmin: settings" />
</div>
### Create, Edit or Delete apps from any user's personal workspace
@ -58,7 +59,7 @@ Super Admin can not only archive/unarchive users/admins on their workspace but a
If a user is Super Admin, they just need to open the workspace in which they want to archive or unarchive a user. Then go to the **Workspace Settings** from the sidebar -> **Manage Users** -> **Archive/Unarchive** any user/admin
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/archiveusersa.png" alt="Superadmin: settings" />
<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/archiveusersa.png" alt="Superadmin: settings" />
</div>
### Access ToolJet DB in any workspace
@ -86,7 +87,7 @@ Only Super Admins can access the Settings. To access the Settings page, click on
- **[White labelling](#white-labelling)**
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/settings.png" alt="Superadmin: settings" />
<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/settings.png" alt="Superadmin: settings" />
</div>
## All Users
@ -96,7 +97,7 @@ Only Super Admins can access the Settings. To access the Settings page, click on
**All Users** settings can be used to check the list of all the users available on all the workspaces in the instance. Super Admins can also promote/demote any user to/from Super Admin from this page. They can also archive/unarchive any user at an instance level from this setting.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/allusers1.png" alt="Superadmin: settings" />
<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/allusers1.png" alt="Superadmin: settings" />
</div>
### Archiving a user from all the workspaces (Instance level)
@ -106,7 +107,7 @@ Super Admins have the authority to deactivate any user at instance level. This w
To archive a user, go to the **All Users** settings, click on the kebab menu next to the user that is to be archived and select **Archive** option. Once the user is archived, the status will change from **Active** to **Archived**. The user will not be able to login to any workspace in the instance.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/archiveinstance.png" alt="Superadmin: settings" />
<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/archiveinstance.png" alt="Superadmin: settings" />
</div>
<br/>
@ -116,7 +117,7 @@ To archive a user, go to the **All Users** settings, click on the kebab menu nex
**Info**: The user will be unarchived from instance level automatically if a workspace admin unarchives the user from their workspace.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/unarchiveinstance.png" alt="Superadmin: settings" />
<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/unarchiveinstance.png" alt="Superadmin: settings" />
</div>
### Reset password of any user
@ -136,7 +137,7 @@ On selecting the **Edit user details** option, a drawer will open from the right
From the **Edit user details** drawer, Super Admins can make any user as Super Admin or remove any Super Admin from the **All Users** settings. To make a user Super Admin, toggle on the **Super Admin** radio button. The user will become Super Admin and the Type column will update from **`Workspace`** to **`Instance`**.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/edituserdetailsinstance.png" alt="Superadmin: settings" />
<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/edituserdetailsinstance.png" alt="Superadmin: settings" />
</div>
## All workspaces
@ -146,7 +147,7 @@ The All Workspaces tab provides a comprehensive view of all workspaces within th
Super Admins have the authority to **archive** or **unarchive** workspaces of any user in the instance as needed. Archiving a workspace essentially sets it to an inactive state, removing it from active use. Conversely, unarchiving reactivates a previously archived workspace, making it accessible once again.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/workspaces1.png" alt="Superadmin: settings" />
<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/workspaces1.png" alt="Superadmin: settings" />
</div>
### Current Workspace
@ -170,13 +171,13 @@ The **Archive** button on the right of the workspace name allows Super Admins to
The **Archived** section displays a list of all archived workspaces. Super Admins can unarchive any workspace from this section by clicking the **Unarchive** button.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/workspaces2.png" alt="Superadmin: settings" />
<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/workspaces2.png" alt="Superadmin: settings" />
</div>
## Manage instance settings
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/instanceoptions.png" alt="Superadmin: settings" />
<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/instanceoptions.png" alt="Superadmin: settings" />
</div>
### Restrict creation of personal workspace of users
@ -198,6 +199,36 @@ This feature allows you to customize the ToolJet instance with your own branding
Check out the [White labelling](/docs/enterprise/white-label/) page for more details.
## Instance login
Instance login configuration at the Settings level allows super admins to set up and manage the default login method for all workspaces within the instance. This ensures a standardized login experience unless individual workspace admins choose to configure a different method for their specific workspace.
### Access and permissions
Only super admins have the authority to configure **Instance login** settings. This ensures centralized control over the default login method across the entire instance.
### Super Admin URL
This URL serves as a fail-safe in scenarios where password login is disabled, SSO is not configured, or a paid plan expires. Importantly, this URL exclusively supports password login and is accessible only by the super admin, preventing any unauthorized access.
The default URL for super admin login is `https://<domain>/login/super-admin`. This URL can be accessed by the super admin to log in to the instance and manage the settings.
### Enable sign-up
The "Enable Sign Up" option allows users to sign up without being invited. It is important to note that this feature includes both password login and SSO, providing a seamless onboarding experience for users.
### Password login
Super admins can enable or disable password login for the entire instance. This setting ensures that all workspaces within the instance adhere to the same login method, unless individual workspace admins choose to configure a different method for their specific workspace.
### Enable workspace configuration
Turning off this option restricts workspace admins from configuring the login method for their workspace. This configuration hides the Workspace Login option from the workspace settings tab.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/superadmin/instancelogin.png" alt="Superadmin: settings" />
</div>
## License
Manage the instance license via the **Settings** page. Super Admins have the capability to update the instance's license key from this page.

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

@ -12,45 +12,43 @@ With this feature, you gain the ability to rebrand the following key elements:
- **Application Logo**: This includes the logo displayed on the login screen, dashboard, and app-editor.
<div style={{textAlign: 'center'}}>
<img style={{ marginBottom:'15px'}} className="screenshot-full" src="/img/enterprise/white-label/newdash.png" alt="ToolJet - Enterprise - White label" />
<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/white-label/whitelabeln1.png" alt="ToolJet - Enterprise - White label" />
</div>
- **Favicon**: The small icon associated with your application.
- **Favicon**: The small icon associated with your application. It is displayed in the browser tab.
- **Page Title**: This is the text displayed in the browser tab.
Example, we have set a favicon image and page title as `Bon Ton` in the below image.
<div style={{textAlign: 'center'}}>
<img style={{ marginBottom:'15px'}} className="screenshot-full" src="/img/enterprise/white-label/newfav.png" alt="ToolJet - Enterprise - White label" />
</div>
- **Page Title**: This is the text displayed next to the Favicon.
<div style={{textAlign: 'center'}}>
<img style={{ marginBottom:'15px'}} className="screenshot-full" src="/img/enterprise/white-label/title.png" alt="ToolJet - Enterprise - White label" />
<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/white-label/title-and-favicon.png" alt="ToolJet - Enterprise - White label" />
</div>
## Configuration
To enable white labelling, you'll need to go to the **Settings** from the Dashboard and click on the `White labelling` tab. On the White labelling page, you'll be able to configure the following:
To enable white labelling, click on the gear icon on the bottom left of the dashboard and select `Settings`. From the settings page, click on the `White labelling` tab. On the White labelling page, you'll be able to configure the following:
- **Application Logo**: Add the URL of the image you want to use as your application logo. Preferred dimensions of the logo are: width `130px` and height `26px`.
- **Favicon**: Enter the URL of the image you want to use as your application's favicon. Preferred dimensions of the favicon are: width `32px` and height `32px` or `16px` and height `16px`.
- **Page Title**: Enter the text you want to display as your application's title. Preferred title length are 50-60 characters.
<div style={{textAlign: 'center'}}>
<img style={{ marginBottom:'15px'}} className="screenshot-full" src="/img/enterprise/white-label/whitelabelsettings.png" alt="ToolJet - Enterprise - White label" />
<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/white-label/settings.png" alt="ToolJet - Enterprise - White label" />
</div>
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
## ToolJet Cloud
If you are using ToolJet Cloud, you can enable white labelling by going to the **Settings** from the Dashboard and clicking on the `White labelling` tab. On the White labelling page, you'll be able to configure the following:
If you are using ToolJet Cloud, click on the gear icon on the bottom left of the dashboard and select `Settings`. From the settings page, click on the `White labelling` tab. On the White labelling page, you'll be able to configure the following:
- **Application Logo**: Add the URL of the image you want to use as your application logo. Preferred dimensions of the logo are: width `130px` and height `26px`.
- **Page Title**: Enter the text you want to display as your application's title. Preferred title length are 50-60 characters.
- **Favicon**: Enter the URL of the image you want to use as your application's favicon. Preferred dimensions of the favicon are: width `32px` and height `32px` or `16px` and height `16px`.
<div style={{textAlign: 'center'}}>
<img style={{ marginBottom:'15px'}} className="screenshot-full" src="/img/enterprise/white-label/whitecloud.png" alt="Whitelabel Cloud" />
<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/enterprise/white-label/cloud1.png" alt="ToolJet - Enterprise - White label" />
</div>
</div>

6
docs/docs/app-builder/customcss.md
View file

@ -11,7 +11,7 @@ Custom Styles helps in maintaining consistent themes across the ToolJet apps, al
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/customcss.gif" alt="Custom CSS" />
<img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/customcss-v2.gif" alt="Custom CSS" />
</div>
@ -22,7 +22,7 @@ To add Custom Styles to ToolJet apps, users should follow these steps:
1. Go to the **Custom Styles** Page, accessible under **Workspace Settings** from the ToolJet dashboard.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/settings.png" alt="Custom CSS" />
<img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/settings-v2.png" alt="Custom CSS" />
</div>
@ -51,6 +51,6 @@ To add Custom Styles to ToolJet apps, users should follow these steps:
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/styledapp.gif" alt="Custom CSS" />
<img className="screenshot-full" src="/img/v2-beta/app-builder/customcss/styledapp-v2.gif" alt="Custom CSS" />
</div>

6
docs/docs/app-builder/import-export-apps.md
View file

@ -14,14 +14,14 @@ This documentation explains the process of exporting and importing applications
- Click on the **Export app** button.
<div style={{textAlign: 'center', marginBottom:'15px'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/import-export-apps/export-app-button.png" alt="Export App Button" />
<img className="screenshot-full" src="/img/v2-beta/app-builder/import-export-apps/export-app-button-v2.png" alt="Export App Button" />
</div>
- If you select `Export All`, all the versions of the application will be exported in JSON format. If you select `Export selected version`, only the selected version will be exported in JSON format.
- Ticking the `Export ToolJet table schema` checkbox will also export the related ToolJet Database table schemas with your application. In this case, when you import the application in a workspace, the related ToolJet Database tables will also be created.
<div style={{textAlign: 'center', marginBottom:'15px'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/import-export-apps/export-options.png" alt="Export App Options" />
<img className="screenshot-full" src="/img/v2-beta/app-builder/import-export-apps/export-options-v2.png" alt="Export App Options" />
</div>
</div>
@ -34,7 +34,7 @@ This documentation explains the process of exporting and importing applications
- Click on the ellipses on the **Create new app** button and select `Import`.
<div style={{textAlign: 'center', marginBottom:'15px'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/import-export-apps/import-button.png" alt="Import App Button" />
<img className="screenshot-full" src="/img/v2-beta/app-builder/import-export-apps/import-button-v2.png" alt="Import App Button" />
</div>
- After clicking on `Import`, choose the relevant JSON file that you previously downloaded during the application export process.

22
docs/docs/app-builder/toolbar.md
View file

@ -13,7 +13,7 @@ Upon the creation of a new app, it is automatically assigned a unique app name.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/appnamenew.png" alt="App Builder: Topbar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/appnamenew-v2.png" alt="App Builder: Topbar"/>
</div>
@ -33,19 +33,13 @@ Switch the canvas to mobile layout by clicking the mobile icon on the topbar. Dr
Width of the component will be automatically adjusted to fit the screen while viewing the application in app viewer.
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/canvasmodes.gif" alt="App Builder: Topbar"/>
</div>
### Changes saved indicator
Whenever a change is made on the component or the query panel/queries, the changes are saved automatically. The changes saved indicator will be displayed on the topbar. This helps the developer to know if the changes are saved or not.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/changessaved.png" alt="App Builder: Topbar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/changessaved-v2.png" alt="App Builder: Topbar"/>
</div>
@ -55,7 +49,7 @@ This will show a profile picture of the developer who is currently working on th
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/profile.png" alt="App Builder: Topbar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/profile-v2.png" alt="App Builder: Topbar"/>
</div>
@ -71,7 +65,7 @@ Versioning is also helpful when working with **[multiple environments](/docs/rel
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/versionsnew.png" alt="App Builder: Topbar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/versionsnew-v2.png" alt="App Builder: Topbar"/>
</div>
@ -83,7 +77,7 @@ You can also use **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)** to
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/undonew.png" alt="App Builder: Topbar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/undo-v3.png" alt="App Builder: Topbar"/>
</div>
@ -100,7 +94,7 @@ Learn more about **[Sharing](/docs/app-builder/share)** your tooljet application
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/sharenew.png" alt="App Builder: Topbar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/sharenew-v2.png" alt="App Builder: Topbar"/>
</div>
@ -110,7 +104,7 @@ Clicking on **Preview** button will open up the currently opened version of the
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/previewnew.png" alt="App Builder: Topbar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/previewnew-v2.png" alt="App Builder: Topbar"/>
</div>
@ -124,6 +118,6 @@ ToolJet will block editing of the Released version of an app and will display a
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/releasenew.png" alt="App Builder: Topbar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/releasenew-v2.png" alt="App Builder: Topbar"/>
</div>

82
docs/docs/dashboard.md
View file

@ -9,17 +9,17 @@ Furthermore, the dashboard serves as a gateway to various essential sections, su
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/dashboardoptions.png" alt="App menu options"/>
<img className="screenshot-full" src="/img/dashboard/dashboardoptions-v2.png" alt="App menu options"/>
</div>
## Workspace Manager
The workspace manager is located on the bottom left corner of the dashboard. Clicking on the workspace manager will open a dropdown menu with a list of all the workspaces you are a part of. You can switch between workspaces by clicking on the workspace name from the dropdown menu.
The workspace manager is located on the bottom left corner of the dashboard. Clicking on the workspace manager will open a dropdown menu listing all the workspaces you belong to. You can switch between workspaces by clicking on the workspace name from the dropdown menu.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/workspacemenu.png" alt="Dashboard"/>
<img className="screenshot-full" src="/img/dashboard/workspacemenu-v2.png" alt="Dashboard"/>
</div>
@ -39,7 +39,7 @@ Previously, the workspace slug was an automatically generated workspace ID, like
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/newworkmodal.png" alt="Dashboard"/>
<img className="screenshot-full" src="/img/dashboard/new-workspace-modal-v2.png" alt="Dashboard"/>
</div>
@ -49,11 +49,11 @@ Similar to the `Add new workspace` button, clicking on the `Edit workspace` butt
## Create a new app
To create a new app, click on the `Create new app` button on the top left corner of the dashboard. Clicking on this button will open a modal where you can enter the name of the app and then click on the `+ Create app` button to create a new app.
To create a new app, click on the `Create new app` button on the top left corner of the dashboard. Clicking on this button will open a modal where you can enter the name of the app and then click on the `+ Create app` button to create a new app.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/newappmodal.png" alt="Dashboard"/>
<img className="screenshot-full" src="/img/dashboard/new-app-modal-v2.png" alt="Dashboard"/>
</div>
<br/>
@ -69,39 +69,40 @@ This option will open a modal with a list of pre-built templates. You can choose
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/choosefromtemplate.gif" alt="Dashboard"/>
<img className="screenshot-full" src="/img/dashboard/choosefromtemplate-v2.gif" alt="Dashboard"/>
</div>
### Import
This option will open a file picker to import a JSON file. This JSON file should be the app exported from ToolJet.
This option will open a file picker to import a JSON file. This JSON file should contain the app data exported from ToolJet.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/import.gif" alt="Dashboard"/>
<img className="screenshot-full" src="/img/dashboard/import-app-v2.gif" alt="Dashboard"/>
</div>
### Importing app connected to marketplace plugins
### Importing an app connected to Marketplace plugins
When importing an app with marketplace plugins, the marketplace plugin should be installed in the tooljet workspace where the app is being imported. If the marketplace plugin is not installed, the app will be imported without the queries for that plugin.
When importing an app with Marketplace plugins, the Marketplace plugin should be installed in the ToolJet workspace where the app is being imported. If the Marketplace plugin is not installed, the app will be imported without the queries for that plugin.
#### When marketplace plugin is installed
#### When Marketplace plugin is installed
If marketplace plugin is installed in the tooljet workspace where the app is being imported, the queries connected to the marketplace plugin will be available in the imported application. The queries will be linked to the data source with the same name if it is already present. If the data source is not present, a new data source will be created of that marketplace plugin and linked to the queries.
If Marketplace plugin is installed in the ToolJet workspace where the app is being imported, the queries connected to the Marketplace plugin will be available in the imported application. The queries will be linked to the data source with the same name if it is already present. If the data source is not present, a new data source will be created of that Marketplace plugin and linked to the queries.
#### When marketplace plugin is not installed
#### When Marketplace plugin is not installed
If you have an app with a query linked to a marketplace plugin, and you import that app in a tooljet workspace where the marketplace plugin is not installed as the data source, the queries will be not be available in the imported application.
If you have an app with a query linked to a Marketplace plugin, and you import that app in a ToolJet workspace where the Marketplace plugin is not installed as the data source, the queries will be not be available in the imported application.
### Importing app connected to tooljet table
### Importing app connected to ToolJet table
When the app(JSON file) that includes the table schema is imported, and the table is not present in the tooljet database of the workspace where the app is being imported, a new table will be created in the tooljet database with the same name as the table in the imported app.
When the app(JSON file) that includes the table schema is imported, and the table is not present in the ToolJet database of the workspace where the app is being imported, a new table will be created in the ToolJet database with the same name as the table in the imported app.
If the table with the same name is already present in the workspace, the new table will be created with the name `<table name>_<unix timestamp>`. Example: `<tablename>_1627980000`.
## Folders
### Create a new folder
Folders can be created to organize your apps. To create a new folder, click on the `+` button on the left drawer of the dashboard. Clicking on this button will open a modal, enter the name of the folder and click on the `Create Folder` button to create a new folder.
@ -115,7 +116,7 @@ A folder can be **deleted** or **renamed**. To delete or rename a folder, click
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/newfolder.gif" alt="Dashboard"/>
<img className="screenshot-full" src="/img/dashboard/newfolder-v2.gif" alt="Dashboard"/>
</div>
@ -125,7 +126,7 @@ Folders can be searched by clicking on the search icon on the left drawer of the
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/search.png" alt="Dashboard"/>
<img className="screenshot-full" src="/img/dashboard/search-v2.png" alt="Dashboard"/>
</div>
@ -135,11 +136,11 @@ The folder's URL slug is generated automatically from its name, providing direct
To get the URL of a specific folder, the user will have to select that folder and then copy the URL from the address bar of the browser. The copied URL can be used to share with other users of the workspace.
Example: If the name of the folder is `customer support`, The folder can be accessed directly from the URL `https://tooljet.com/<workspace-name>?folder=customer%20support`.
Example: If the name of the folder is `Customer Support`, The folder can be accessed directly from the URL `https://tooljet.com/<workspace-name>?folder=Customer%20Support`.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/appurl.png" alt="Dashboard"/>
<img className="screenshot-full" src="/img/dashboard/app-url-v2.png" alt="Dashboard"/>
</div>
@ -149,14 +150,15 @@ The dashboard displays all the apps created in the workspace as cards. These car
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/appcard.png" alt="Dashboard"/>
<img className="screenshot-full" src="/img/dashboard/appcard-v2.png" alt="Dashboard"/>
</div>
## App menu
The app menu is located on the top right corner of the app card. Clicking on the app menu will open a dropdown menu with a list of options. These options are:
The app menu is located on the top right corner of the app card. Clicking on the app menu will open a dropdown menu containing various options. These options are:
- **[Rename app](#rename-app)**
- **[Change Icon](#change-icon)**
- **[Add to folder](#add-to-folder)**
- **[Clone app](#clone-app)**
@ -165,7 +167,17 @@ The app menu is located on the top right corner of the app card. Clicking on the
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/appmenu.gif" alt="Dashboard"/>
<img className="screenshot-full" src="/img/dashboard/app-menu-v2.gif" alt="Dashboard"/>
</div>
### Rename app
This option will open a modal that will allow you to rename your app.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/rename-app.png" alt="Dashboard"/>
</div>
@ -175,7 +187,7 @@ This option will open a modal with a list of icons. You can choose any icon from
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/changeicon.png" alt="Dashboard"/>
<img className="screenshot-full" src="/img/dashboard/change-icon-v2.png" alt="Dashboard"/>
</div>
@ -185,35 +197,35 @@ This option will open a modal with a list of folders. You can choose any folder
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/addtofolder.png" alt="Dashboard"/>
<img className="screenshot-full" src="/img/dashboard/add-to-folder-v2.png" alt="Dashboard"/>
</div>
### Clone app
Selecting this option will immediately open the cloned app in the app builder with the same configuration as the original app. The new app will be named as `<original app name>` followed by unix timestamp. Example: `<original app name> 1627980000`.
Selecting this option will open a modal where you can enter the desired name for the cloned app. After providing the desired name, click on the Clone app button. This will immediately open the cloned app in the app builder with the same configuration as the original app.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/cloneapp.gif" alt="Dashboard"/>
<img className="screenshot-full" src="/img/dashboard/clone-app-v2.gif" alt="Dashboard"/>
</div>
### Export app
This option will download a JSON file of the application. This JSON file can be [imported](#import) to ToolJet to create a new app. The exported app will include all the queries connected to global data sources including the data source created from Marketplace plugins.
This option downloads a JSON file containing the application data. This JSON file can be [imported](#import) to ToolJet to create a new app. The exported app will include all the queries connected to global data sources including the data source created from Marketplace plugins.
This option allows you to select a specific version of the app to export or export all the versions of the app. To export a specific version of the app, select a version from the list of available versions in the modal and click on the `Export selected version` and to export all the versions of the app, click on the `Export All` button.
#### Export ToolJet table schema
Selecting this option will include the schema of the tooljet table connected to that application in the exported JSON file. This option is available for all the apps on ToolJet however only the apps with a tooljet table connected(includes tjdb query) will have the schema included in the exported JSON file.
Selecting this option will include the schema of the ToolJet table connected to that application in the exported JSON file. This option is available for all the apps on ToolJet however only the apps with a ToolJet table connected(includes tjdb query) will have the schema included in the exported JSON file.
This JSON file can be used to [import](#importing-app-connected-to-tooljet-table) the application to ToolJet along with the table schema that was connected to the application.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/exportapp.png" alt="Dashboard"/>
<img className="screenshot-full" src="/img/dashboard/export-app-v2.png" alt="Dashboard"/>
</div>
@ -223,7 +235,7 @@ This option will open a confirmation modal to delete the app. Click on the `Dele
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/deleteapp.png" alt="Dashboard"/>
<img className="screenshot-full" src="/img/dashboard/delete-app-v2.png" alt="Dashboard"/>
</div>
@ -233,16 +245,16 @@ Apps can be searched by clicking on the search bar on the center of the dashboar
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/searchapp.png" alt="Dashboard"/>
<img className="screenshot-full" src="/img/dashboard/search-app-v2.png" alt="Dashboard"/>
</div>
## Current ToolJet Version
The current version of ToolJet is displayed on the top right corner of the dashboard.
The current version of ToolJet is displayed on the top right corner of the dashboard.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/currentversion.png" alt="Dashboard"/>
<img className="screenshot-full" src="/img/dashboard/current-version-v2.png" alt="Dashboard"/>
</div>

2
docs/docs/data-sources/airtable.md
View file

@ -8,7 +8,7 @@ title: Airtable
ToolJet can connect to your Airtable account to read and write data. **Personal Access Token** is required to connect to the Airtable data source on ToolJet. You can generate the Personal Access Token by visiting [Developer Hub from your Airtable profile](https://support.airtable.com/docs/creating-and-using-api-keys-and-access-tokens#understanding-personal-access-token-basic-actions).
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/datasource-reference/airtable/airtableconnect.gif" alt="Airtable Data Source Connection" />
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/datasource-reference/airtable/airtableconnect-v2.gif" alt="Airtable Data Source Connection" />
</div>
<br/>

2
docs/docs/data-sources/azureblob.md
View file

@ -13,7 +13,7 @@ To connect ToolJet with the Azure Blob data source, you have two options:
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/azureblob/gdsazure.gif" alt="Azure Blob - ToolJet" />
<img className="screenshot-full" src="/img/datasource-reference/azureblob/gdsazure-v2.png" alt="Azure Blob - ToolJet" />
</div>

2
docs/docs/data-sources/baserow.md
View file

@ -17,7 +17,7 @@ To connect to Baserow, you need to provide the following details:
<img className="screenshot-full" src="/img/datasource-reference/baserow/baserow-intro.png" alt="Baserow intro" />
<img className="screenshot-full" src="/img/datasource-reference/baserow/baserow-intro-v2.png" alt="Baserow intro" />
## Supported Operations

2
docs/docs/data-sources/clickhouse.md
View file

@ -29,7 +29,7 @@ ToolJet requires the following to connect to your ClickHouse Database:
- **Debug**
- **Raw**
<img className="screenshot-full" src="/img/datasource-reference/clickhouse/connection.png" alt="ClickHouse connection" />
<img className="screenshot-full" src="/img/datasource-reference/clickhouse/connection-v2.png" alt="ClickHouse connection" />
## Querying ClickHouse

2
docs/docs/data-sources/cosmosdb.md
View file

@ -24,7 +24,7 @@ You can find the endpoint and key in the **[Azure Portal](https://portal.azure.c
<div style={{textAlign: 'center'}}>
![ToolJet - Data source - CosmosDB](/img/datasource-reference/cosmosdb/cosmosdb-connect.png)
![ToolJet - Data source - CosmosDB](/img/datasource-reference/cosmosdb/cosmosdb-connect-v2.png)
</div>

132
docs/docs/data-sources/databricks.md Normal file
View file

@ -0,0 +1,132 @@
---
id: databricks
title: Databricks
---
# Databricks
Databricks is a cloud-based platform for data processing, analytics, and machine learning. ToolJet connects to Databricks, allowing your applications to access and update your data in your Databricks Warehouses directly using SQL queries.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/datasource-reference/databricks/install.gif" alt="Install Databricks" />
</div>
## Configuration
ToolJet's Databricks integration relies on a configuration form that supports the following parameters:
#### Required Parameters
- **Server hostname**: The server hostname or the IP address of your Databricks Warehouse. For example, `62596234423488486.6.gcp.databricks.com`.
- **HTTP Path**: The API endpoint path for the Databricks resource you want to access. For example, `/sql/1.0/warehouses/44899g7346c19m95`.
- **Personal access token**: Personal access tokens are used for secure authentication to the Databricks API instead of passwords. For example, `dapi783c7d155d138d8cf14`.
#### Optional Parameters
- **Port**: The port number of your Databricks Warehouse. The default port number is `443`.
- **Default Catalog**: The default catalog to use for the connection.
- **Default Schema**: The default schema to use for the connection.
### Setup
- Navigate to your Databricks workspace, select the desired SQL Warehouse, and find **Server Hostname** and **HTTP Path** within the connection details tab.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/datasource-reference/databricks/connection-details.png" alt="Databricks: Connection Details" />
</div>
- To generate a personal access token, access your Databricks User Settings, select the Developer tab, click Manage under Access Tokens, and then click on the **Generate New Token** button.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/datasource-reference/databricks/generate-token.png" alt="Databricks: Access Tokens" />
</div>
- Navigate to the Databricks datasource configuration form in ToolJet, fill in the required parameters, and click the **Save** button. You can test the connection by clicking the **Test Connection** button.
:::note
Ensure your Databricks Warehouse is running and has been granted the necessary permissions prior to clicking **Test Connection** or running any queries.
:::
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/datasource-reference/databricks/setup-parameters.png" alt="Databricks: Setup Paramaters" />
</div>
## Querying Databricks
- To perform queries on Databricks in ToolJet, click the **+ Add** button in the query manager located at the bottom panel of the editor.
- Select the previously configured Databricks datasource.
- In the second Data Source dropdown, select **SQL mode** as the query type. ToolJet currently supports only SQL mode for Databricks interactions.
- Selecting SQL mode will open a dedicated SQL editor where you can write your SQL queries.
- After writing the query, click the **Run** button to execute the query.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/databricks/add-query.gif" alt="Databricks: Query Setup" />
</div>
:::tip
You can apply transformations to the query results. Refer to our transformations documentation for more information: [link](/docs/tutorial/transformations)
:::
## Supported Queries
Databricks supports standard SQL commands for data manipulation tasks.
### Read Data
The following example demonstrates how to read data from a table. The query selects all the columns from the `customers` table.
```sql
SELECT * FROM customers
```
### Write Data
The following example demonstrates how to write data to a table. The query inserts a new row into the `customers` table.
```sql
INSERT INTO customers (
customer_id,
first_name,
last_name,
email,
phone,
city,
state,
zip_code,
country
) VALUES (
'1001'
'Tom',
'Hudson',
'tom.hudson@example.com',
'50493552',
'San Clemente',
'CA',
'92673',
'USA'
);
```
### Update Data
The following example demonstrates how to update data in a table. The query updates the `first_name` and `email` column of the `customers` table.
```sql
UPDATE customer
SET first_name = 'John',
email = 'john.hudson@example.com'
WHERE customer_id = 1001;
```
### Delete Data
The following example demonstrates how to delete data from a table. The query deletes a row from the `customers` table.
```sql
DELETE FROM customer
WHERE customer_id = 1001;
```

122
docs/docs/data-sources/dynamodb.md
View file

@ -2,6 +2,7 @@
id: dynamodb
title: DynamoDB
---
# DynamoDB
DynamoDB is a managed non-relational database service provided by Amazon. ToolJet has the capability to connect to DynamoDB for reading and writing data.
@ -12,7 +13,7 @@ To establish a connection with the DynamoDB data source, you can either click on
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/dynamoDB/dynamogds.gif" alt="DynamoDB" />
<img className="screenshot-full" src="/img/datasource-reference/dynamodb/dynamogds-v2.png" alt="DynamoDB" />
</div>
@ -96,10 +97,12 @@ Returns an array of table names associated with the current account and endpoint
Retrieves a single item from a table. You must specify the primary key for the item that you want. You can retrieve the entire item, or just a subset of its attributes.
**Required parameters:**
- **Table**
- **Key name**
Syntax for Key name:
```json
{
"Key": {
@ -123,23 +126,25 @@ Syntax for Key name:
Retrieves all items that have a specific partition key. You must specify the partition key value. You can retrieve entire items, or just a subset of their attributes. Optionally, you can apply a condition to the sort key values so that you only retrieve a subset of the data that has the same partition key. You can use this operation on a table, provided that the table has both a partition key and a sort key. You can also use this operation on an index, provided that the index has both a partition key and a sort key.
**Required parameters:**
- **Query condition**
Syntax for Query condition:
```json
{
"TableName": "Reply",
"IndexName": "PostedBy-Index",
"Limit": 3,
"ConsistentRead": true,
"ProjectionExpression": "Id, PostedBy, ReplyDateTime",
"KeyConditionExpression": "Id = :v1 AND PostedBy BETWEEN :v2a AND :v2b",
"ExpressionAttributeValues": {
":v1": {"S": "Amazon DynamoDB#DynamoDB Thread 1"},
":v2a": {"S": "User A"},
":v2b": {"S": "User C"}
},
"ReturnConsumedCapacity": "TOTAL"
"TableName": "Reply",
"IndexName": "PostedBy-Index",
"Limit": 3,
"ConsistentRead": true,
"ProjectionExpression": "Id, PostedBy, ReplyDateTime",
"KeyConditionExpression": "Id = :v1 AND PostedBy BETWEEN :v2a AND :v2b",
"ExpressionAttributeValues": {
":v1": { "S": "Amazon DynamoDB#DynamoDB Thread 1" },
":v2a": { "S": "User A" },
":v2b": { "S": "User C" }
},
"ReturnConsumedCapacity": "TOTAL"
}
```
@ -154,12 +159,13 @@ Syntax for Query condition:
Retrieves all items in the specified table or index. You can retrieve entire items, or just a subset of their attributes. Optionally, you can apply a filtering condition to return only the values that you are interested in and discard the rest.
**Required parameters:**
- **Scan condition**
Syntax for Scan condition:
```json
{"TableName": "<table_name>"}
{ "TableName": "<table_name>" }
```
<div style={{textAlign: 'center'}}>
@ -173,22 +179,24 @@ Syntax for Scan condition:
Deletes a single item from a table. You must specify the primary key for the item that you want to delete.
**Required parameters:**
- **Table**
- **Key Name**
Syntax for Key name:
```json
{
"Key": {
"ForumName": {
"S": "Amazon DynamoDB"
},
"Subject": {
"S": "How do I update multiple items?"
}
"Key": {
"ForumName": {
"S": "Amazon DynamoDB"
},
"ConditionExpression": "attribute_not_exists(Replies)",
"ReturnValues": "ALL_OLD"
"Subject": {
"S": "How do I update multiple items?"
}
},
"ConditionExpression": "attribute_not_exists(Replies)",
"ReturnValues": "ALL_OLD"
}
```
@ -203,16 +211,18 @@ Syntax for Key name:
Update an item in DynamoDB by specifying the primary key and providing new attribute values. If the primary key does not exist in the table then instead of updating it will insert a new row.
**Required parameters:**
- **Update Condition**
Syntax for Update Condition:
```json
{
"TableName": "USER_DETAILS_with_local",
"Key": {
"USER_ID": 1,
"USER_NAME": "Nick"
},
"USER_ID": 1,
"USER_NAME": "Nick"
},
"UpdateExpression": "set USER_AGE = :age, USER_FEE = :fee",
"ExpressionAttributeValues": {
":age": 40,
@ -232,6 +242,7 @@ Syntax for Update Condition:
This operation in DynamoDB retrieves metadata and configuration details about a specific table. It provides information such as the table's name, primary key schema, provisioned throughput settings, and any secondary indexes defined on the table.
**Required parameters:**
- **Table**
<div style={{textAlign: 'center'}}>
@ -242,49 +253,50 @@ This operation in DynamoDB retrieves metadata and configuration details about a
### Create Table
This operation in DynamoDB enables you to create a new table by specifying its name, primary key schema, and optional configurations.
This operation in DynamoDB enables you to create a new table by specifying its name, primary key schema, and optional configurations.
**Required parameters:**
- **Table Parameters**
Syntax for Table Parameters:
```json
{
"AttributeDefinitions": [
"AttributeDefinitions": [
{
"AttributeName": "USER_ID",
"AttributeName": "USER_ID",
"AttributeType": "N"
},
{
"AttributeName": "USER_FEE",
"AttributeName": "USER_FEE",
"AttributeType": "N"
}
],
"KeySchema": [
{
"AttributeName": "USER_ID",
"KeyType": "HASH"
}
],
{
"AttributeName": "USER_ID",
"KeyType": "HASH"
}
],
"LocalSecondaryIndexes": [
{
"IndexName": "USER_FEE",
"KeySchema": [
{
"IndexName": "USER_FEE",
"KeySchema": [
{
"AttributeName": "USER_ID",
"KeyType": "HASH"
},
{
"AttributeName": "USER_FEE",
"KeyType": "RANGE"
}
],
"Projection": {
"ProjectionType": "KEYS_ONLY"
}
"AttributeName": "USER_ID",
"KeyType": "HASH"
},
{
"AttributeName": "USER_FEE",
"KeyType": "RANGE"
}
],
],
"Projection": {
"ProjectionType": "KEYS_ONLY"
}
}
],
"ProvisionedThroughput": {
"ReadCapacityUnits": 1,
"WriteCapacityUnits": 1
@ -307,17 +319,19 @@ Syntax for Table Parameters:
This operation allows you to create or replace an item in a table. It enables you to specify the table name, provide the attribute values for the new item, and define the primary key attributes to uniquely identify the item.
**Required parameters:**
- **New Item Details**
Syntax for New Item Details:
```json
{
"TableName": "USER_DETAILS_with_localS",
"Item": {
"USER_ID": 1,
"USER_ID": 1,
"USER_NAME": "NICK",
"USER_AGE": 34,
"USER_FEE": 1234.56,
"USER_FEE": 1234.56
}
}
```
@ -326,4 +340,4 @@ Syntax for New Item Details:
<img className="screenshot-full" src="/img/datasource-reference/dynamodb/updateitem.png" alt="ToolJet - DynamoDB operations" />
</div>
</div>

2
docs/docs/data-sources/firestore.md
View file

@ -14,7 +14,7 @@ Once you have the key, open it in a text editor and copy the contents. Paste the
Click on **Test connection** button to verify if the key is valid. Click on **Save** button to save the data source.
<img className="screenshot-full" src="/img/datasource-reference/firestore/add-ds-firestore.gif" alt="firestore add ds"/>
<img className="screenshot-full" src="/img/datasource-reference/firestore/add-ds-firestore-v2.png" alt="firestore add ds"/>
## Querying Firestore

2
docs/docs/data-sources/google.sheets.md
View file

@ -31,7 +31,7 @@ When connecting to a Google Sheets datasource, you can choose between two permis
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/google-sheets/sheetconnect.gif" alt="Google Sheet" />
<img className="screenshot-full" src="/img/datasource-reference/google-sheets/sheetconnect-v2.png" alt="Google Sheet" />
</div>

2
docs/docs/data-sources/graphql.md
View file

@ -11,7 +11,7 @@ To establish a connection with the GraphQL global datasource, you can either cli
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/graphql/graphgds.gif" alt="ToolJet - Data source - REST API" />
<img className="screenshot-full" src="/img/datasource-reference/graphql/graphgds-v2.png" alt="ToolJet - Data source - REST API" />
</div>

4
docs/docs/data-sources/influxdb.md
View file

@ -22,7 +22,7 @@ For generating API Token visit [InfluxDB docs](https://docs.influxdata.com/influ
<div style={{textAlign: 'center'}}>
![ToolJet - Data source - influxDB](/img/datasource-reference/influxdb/influxauth.png)
![ToolJet - Data source - influxDB](/img/datasource-reference/influxdb/influxauth-v2.png)
</div>
@ -51,7 +51,7 @@ For generating API Token visit [InfluxDB docs](https://docs.influxdata.com/influ
- [Delete a bucket](#delete-a-bucket)
<img className="screenshot-full" src="/img/datasource-reference/influxdb/operations.png" alt="influx operations" />
<img className="screenshot-full" src="/img/datasource-reference/influxdb/operations-v2.png" alt="influx operations" />
### Write data

4
docs/docs/data-sources/mailgun.md
View file

@ -7,7 +7,7 @@ title: Mailgun
ToolJet can connect to your Mailgun account to send emails.
<img class="screenshot-full" src="/img/datasource-reference/mailgun/mailgun-datasource.png" alt="ToolJet - Data source - Mailgun" height="420" />
<img class="screenshot-full" src="/img/datasource-reference/mailgun/mailgun-datasource-v2.png" alt="ToolJet - Data source - Mailgun" height="420" />
:::info
The Mailgun API Datasource supports for interaction with the mail endpoint of the [Mailgun API](https://documentation.mailgun.com/en/latest/api-intro.html#authentication-1).
@ -42,8 +42,6 @@ Optional parameters:
- Body as HTML
<img class="screenshot-full" src="/img/datasource-reference/MailGun/mailgun_query_body.png" alt="ToolJet - Query Mailgun" height="420"/>
:::info
**Send mail to** - accepts a single email id.
For example:

2
docs/docs/data-sources/mariadb.md
View file

@ -13,7 +13,7 @@ To establish a connection with the MariaDB global datasource, you can either cli
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/mariadb/gdsmaria.gif" alt="MariaDB" />
<img className="screenshot-full" src="/img/datasource-reference/mariadb/gdsmaria-v2.png" alt="MariaDB" />
</div>

2
docs/docs/data-sources/openapi.md
View file

@ -21,7 +21,7 @@ OpenAPI datasource accepts specifications only in **JSON** and **YAML** formats.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/openapi/openapiconnect.gif" alt="OpenAPI" />
<img className="screenshot-full" src="/img/datasource-reference/openapi/openapiconnect-v2.png" alt="OpenAPI" />
</div>

2
docs/docs/data-sources/oracledb.md
View file

@ -23,7 +23,7 @@ A Oracle DB can be connected with the following credentials:
<div style={{textAlign: 'center'}}>
![ToolJet - Data source - OracleDB](/img/datasource-reference/oracledb/oracleauth.png)
![ToolJet - Data source - OracleDB](/img/datasource-reference/oracledb/oracleauth-v2.png)
</div>

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

@ -13,7 +13,7 @@ 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="Data Sources: Overview" width="600"/>
<img className="screenshot-full" src="/img/datasource-reference/overview/overview-v2.png" alt="Data Sources: Overview" />
</div>
@ -26,19 +26,13 @@ Data Source page is available only on **ToolJet version 2.3.0 and above**.
</div>
Or you can directly go to the **Data Sources** page from the left sidebar of the dashboard
<div style={{textAlign: 'left'}}>
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/newgds.png" alt="Data Sources: Overview" />
</div>
Or you can directly go to the **Data Sources** page from the left sidebar of the dashboard.
2. Within the **Data Sources** page, you'll find various categories of data sources on the left side, including Databases, APIs, Cloud Storages, and plugins. Click on each category to view the list of accessible data sources. As you hover over the desired data source, an `Add` button will appear. Upon clicking this button, the selected data source will be integrated into the workspace.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/gdsadd.gif" alt="Overview of Data Sources" />
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/gdsadd-v2.png" alt="Overview of Data Sources" />
</div>
@ -48,7 +42,7 @@ 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/newui/overview/connectinggds.gif" alt="Overview of Data Sources" />
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/connectinggds-v2.gif" alt="Overview of Data Sources" />
</div>

2
docs/docs/data-sources/zendesk.md
View file

@ -34,7 +34,7 @@ To connect Zendesk datasource to your ToolJet application, go to the data source
<div style={{textAlign: 'center'}}>
![ToolJet - Data source - Zendesk](/img/datasource-reference/zendesk/zendesk.gif)
![ToolJet - Data source - Zendesk](/img/datasource-reference/zendesk/zendesk-v2.gif)
</div>

18
docs/docs/getting-started/platform-overview.md
View file

@ -5,15 +5,10 @@ slug: /
---
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
<!-- ## What is ToolJet?
ToolJet is a fast, secure, and user-friendly development platform to build custom internal tools. ToolJet streamlines the development process with seamless integrations, robust security, and a comprehensive suite of app-building tools. -->
## What is ToolJet?
ToolJet is a low-code platform that enables developers to rapidly build and deploy custom internal tools. It has a drag-and-drop app builder with 45 pre-built components, so developers can create complex applications in minutes. ToolJet also connects to most popular data sources and APIs out of the box, and it has a group-based permission system for easy user access management. ToolJet also comes with a lot of other features, but for now, let’s build a basic ToolJet app.
</div>
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
@ -21,7 +16,7 @@ ToolJet is a low-code platform that enables developers to rapidly build and depl
## How ToolJet Works:
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/platform-overview/platform-overview-v2.jpg" alt="Platform Overview" />
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/platform-overview/platform-overview-v2.png" alt="Platform Overview" />
</div>
**With ToolJet, you can streamline app development with 4 core steps:** <br/>
@ -42,10 +37,9 @@ Below is a detailed overview of ToolJet's key functionalities, demonstrating how
### Visual App Builder
Enables the creation of visually appealing front-ends with a drag-and-drop interface and pre-built components.
<!-- It simplifies the app-development process, making it accessible even for non-technical users. -->
<div style={{textAlign: 'center'}}>
<img style={{ border:'0'}} className="screenshot-full" src="/img/platform-overview/app-builder.png" alt="App-Builder" />
<img className="screenshot-full" src="/img/platform-overview/app-builder.png" alt="App-Builder" />
</div>
</div>
@ -54,10 +48,9 @@ Enables the creation of visually appealing front-ends with a drag-and-drop inter
### Integrations
Offers seamless integration with a wide range of data sources, including over 50 applications, databases, and APIs.
<!-- This feature facilitates easy data connectivity and aggregation from various systems. -->
<div style={{textAlign: 'center'}}>
<img style={{ border:'0'}} className="screenshot-full" src="/img/platform-overview/integrations.png" alt="Integrations" />
<img style={{}} className="screenshot-full" src="/img/platform-overview/integrations-v2.png" alt="Integrations" />
</div>
</div>
@ -92,7 +85,7 @@ Designed with advanced security features and a scalable infrastructure to meet t
<!-- This ensures the protection of sensitive data and the reliability of the platform in handling large-scale applications. -->
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', borderRadius:'5px'}} className="screenshot-full" src="/img/platform-overview/security.png" alt="Security" />
<img style={{ border:'0', borderRadius:'5px'}} className="screenshot-full" src="/img/platform-overview/security-v2.png" alt="Security" />
</div>
</div>
@ -102,10 +95,9 @@ Designed with advanced security features and a scalable infrastructure to meet t
### SSO Support
Single Sign-On (SSO) capabilities, supporting a variety of providers including Okta, Google, Azure AD, and OpenID Connect.
<!-- This enhances user authentication and bolsters overall security. -->
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', borderRadius:'5px'}} className="screenshot-full" src="/img/platform-overview/sso.png" alt="SSO Support" />
<img style={{ border:'0', borderRadius:'5px'}} className="screenshot-full" src="/img/platform-overview/sso-v2.png" alt="SSO Support" />
</div>
</div>

16
docs/docs/gitsync.md
View file

@ -61,12 +61,6 @@ Obtain the **SSH URL** of the repository. When a repository is created, GitHub s
### Step 3: Configure the GitSync feature on ToolJet
Go to the **Workspace settings**, and click on the **Configure git** tab.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/gitsync/gitsync.png" alt="GitSync" />
</div>
<br/>
Enter the **SSH URL** of the repository (obtained in Step 2) in the **Git repository URL** field. Click on the **Generate SSH key** button, and copy the SSH key that is generated. The SSH key is used to authenticate ToolJet with the repository.
There are two types of generated SSH keys: **
@ -74,7 +68,7 @@ There are two types of generated SSH keys: **
- **RSA**: This is an older algorithm that is used for generating SSH keys. It is not recommended to use this key type. Older VCS providers like Bitbucket recommend using this key type.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/gitsync/ssh2.png" alt="GitSync" />
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/gitsync/ssh2-v2.png" alt="GitSync" />
</div>
### Step 4: Deploy the SSH key to GitHub repository
@ -96,7 +90,7 @@ Enter a title for the SSH key in the **Title** field. Paste the SSH key that you
Go back to the **Configure git** tab on ToolJet, and click on the **Finalize setup** button. If the SSH key is configured correctly, you will see a success message.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/gitsync/git55.png" alt="GitSync" />
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/gitsync/finalize-ssh2-configuration-v2.png" alt="GitSync" />
</div>
<br/>
@ -112,7 +106,7 @@ When you promote an environment, from **Developement to Staging** or from **Stag
This option can be enabled or disabled from the **Configure git** tab on the **Workspace settings** page. By default, this option is disabled.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/gitsync/autocommit.png" alt="GitSync" />
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/gitsync/autocommit-v2.png" alt="GitSync" />
</div>
<br/>
@ -129,7 +123,7 @@ On clicking the GitSync button, the users will be able to commit changes to the
2. For admin users: The users will see a dialogue box with a link to configure the GitSync feature.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/gitsync/connect.png" alt="GitSync" />
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/gitsync/connect-v2.png" alt="GitSync" />
</div>
<br/>
@ -141,7 +135,7 @@ To delete the GitSync configuration, go to the **Configure git** tab on the **Wo
- Deleting the GitSync configuration will not delete the apps from the git repository. The apps will still be available in the git repository in the same state as they were before the GitSync configuration was deleted.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/gitsync/deleteconfig.png" alt="GitSync" />
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/gitsync/deleteconfig-v2.png" alt="GitSync" />
</div>
<br/>

71
docs/docs/marketplace/marketplace_overview.md
View file

@ -1,19 +1,17 @@
---
id: marketplace-overview
title: 'Marketplace : Overview'
title: 'Marketplace: Overview'
---
# Marketplace : Overview
# Marketplace: Overview
With ToolJet Marketplace, ToolJet users can conveniently add custom plugins (datasources) to their workspaces. This feature enables users to create plugins that cater to their specific needs and integrate them seamlessly with ToolJet.
With ToolJet Marketplace, ToolJet users can conveniently add custom plugins (data sources) to their workspaces. This feature enables users to create plugins that cater to their specific needs and integrate them seamlessly with ToolJet.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/marketplace/overview/marketplace.png" alt="Marketplace" />
<img className="screenshot-full" src="/img/marketplace/overview/marketplace-v2.png" alt="Marketplace Overview" />
</div>
## Enabling the Marketplace
## Enabling Marketplace
To **Enable** the marketplace feature, users need to add the following environment variable to their **[`.env`](/docs/setup/env-vars#marketplace)** file:
@ -21,74 +19,59 @@ To **Enable** the marketplace feature, users need to add the following environme
ENABLE_MARKETPLACE_FEATURE=true
```
Once the marketplace feature has been activated, a Marketplace icon will appear on the left-hand sidebar of the dashboard, providing users with access to the Marketplace.
When running ToolJet locally, ensure that all the plugins are available. Specifically, building the marketplace and then starting the server is mandatory.
When running ToolJet locally, ensure that all the plugins are available by building marketplace before starting the server.
:::info Note
The user logged-in should be the **Administrator** to access the marketplace page.
The logged-in user should be an **Administrator** to access the marketplace page.
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/marketplace/overview/icon.png" alt="Marketplace" />
</div>
## Installing a plugin
To navigate to the Marketplace page, click on the settings icon on the bottom left of the dashboard, and click on **Marketplace** from the selection menu.
The Marketplace page will contain two tabs: **Installed** and **Marketplace**.
Under the **Marketplace** tab, you will see a list of all the available plugins that can be installed on the workspace. To install a plugin, click on the **Install** button on the plugin's card. Once the installation is complete, the status will change from Install to **Installed**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/marketplace/overview/allplugins.png" alt="Marketplace" />
<img className="screenshot-full" src="/img/marketplace/overview/allplugins-v2.png" alt="List of All Plugins" />
</div>
## Using Marketplace plugins
## Using Marketplace Plugins
You can access any installed plugins by following these steps:
- Navigate to the **Global Datasources** Page.
- Click on the **Add new datasource** button.
- Open the **Plugins** tab in the modal that appears.
- From here, you can connect to any of the plugins that were installed from the Marketplace.
- Navigate to the **Data sources** tab in the dashboard.
- Scroll down to **Plugins**.
You can now see the list of installed marketplace plugins that you can configure as data sources.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/marketplace/overview/gdsplugin.png" alt="Marketplace" />
<img className="screenshot-full" src="/img/marketplace/overview/installed-plugins.png" alt="Installed plugins" />
</div>
- After successfully connecting to a plugin, you can access it under the Global Datasource section when creating queries.
- After successfully configuring a plugin, you can access it when trying to add a new query from the Query Panel.
<div style={{textAlign: 'center'}}>
<!-- <div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/marketplace/overview/add-query.png" alt="Marketplace" />
</div> -->
<img className="screenshot-full" src="/img/marketplace/overview/query.png" alt="Marketplace" />
</div>
## Removing a plugin
## Removing a Plugin
:::caution
If you remove a plugin, all the queries associated with it will be eliminated from all the applications.
:::
To remove a plugin, follow these steps:
- Go to the Marketplace page from the dashboard.
- Go to the **Installed** tab and click on the **Remove** button next to the plugin that you want to remove.
- By doing so, the plugin will be removed from the global datasource section, and no user will be able to establish a connection with it.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/marketplace/overview/remove.png" alt="Marketplace" />
</div>
- Click on the settings icon on the bottom left of the dashboard, and click on `Marketplace` from the selection menu.
- On the `Installed` page, click on the `Remove` button of the related plugin that you wish to remove.
## Available Plugins
- **[AWS Redshift](/docs/marketplace/plugins/marketplace-plugin-redshift)**
- **[AWS Textract](/docs/marketplace/plugins/marketplace-plugin-textract)**
- **[AWS Lambda](/docs/marketplace/plugins/marketplace-plugin-aws-lambda)**
- **[GitHub](/docs/marketplace/plugins/marketplace-plugin-github)**
- **[HarperDB](/docs/marketplace/plugins/marketplace-plugin-harperdb)**
- **[OpenAI](/docs/marketplace/plugins/marketplace-plugin-openai)**
- **[Plivo](/docs/marketplace/plugins/marketplace-plugin-plivo)**

97
docs/docs/marketplace/plugins/amazon-redshift.md Normal file
View file

@ -0,0 +1,97 @@
---
id: marketplace-plugin-redshift
title: Amazon Redshift
---
ToolJet can connect to Amazon Redshift, enabling your applications to query data directly from a Redshift cluster.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/marketplace/plugins/redshift/install.gif" alt="Marketplace Plugin: Amazon Redshift" />
</div>
<br/>
**NOTE:** **Before following this guide, it is assumed that you have already completed the process of [Using Marketplace plugins](/docs/marketplace/marketplace-overview#using-marketplace-plugins)**.
## Configuration
To connect to Amazon Redshift, you need to provide the following details:
#### Required Parameters
- **Region**: The region where your Redshift cluster is located. For example, `us-east-1`.
- **Database Name**: The name of the database you want to connect to.
- **Authentication Type**: The type of authentication you want to use to connect to the Redshift cluster. Currently, only **IAM** is supported.
- **Access Key**: The access key of the user you want to use to connect to the Redshift cluster.
- **Secret Key**: The secret key of the user you want to use to connect to the Redshift cluster.
#### Optional Parameters
- **Port**: The port number of the Redshift cluster. The default port number is `5439`.
- **Workgroup name**: The name of the workgroup you want to use to connect to the Redshift cluster.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/marketplace/plugins/redshift/creds.png" alt="Marketplace Plugin: Amazon Redshift" />
</div>
## Supported Queries
Redshift supports a comprehensive set of SQL commands. You can use the SQL editor to run any SQL query on the connected Redshift cluster. Refer to the [Redshift documentation](https://docs.aws.amazon.com/redshift/latest/dg/c_SQL_commands.html) for more information on the supported SQL commands.
### Read Data
The following example demonstrates how to read data from a table in the connected Redshift cluster. The query selects all the columns from the `employee` table.
```sql
SELECT * FROM employee
```
### Write Data
The following example demonstrates how to write data to a table in the connected Redshift cluster. The query inserts a new row into the `employee` table.
```sql
INSERT INTO employee (
first_name,
last_name,
email,
phone_number,
hire_date,
job_title,
salary,
department_id
) VALUES (
'Tom',
'Hudson',
'tom.hudson@example.com',
'234843294323',
'2024-01-01',
'Test Automation Engineer',
245000.00,
12
);
```
### Update Data
The following example demonstrates how to update data in a table in the connected Redshift cluster. The query updates the `first_name` and `last_name` columns of the `employee` table.
```sql
UPDATE employee
SET first_name = 'Glenn',
last_name = 'Jacobs'
WHERE employee_id = 8;
```
### Delete Data
The following example demonstrates how to delete data from a table in the connected Redshift cluster. The query deletes a row from the `employee` table.
```sql
DELETE FROM employee
WHERE employee_id = 7;
```

92
docs/docs/marketplace/plugins/engagespot.md Normal file
View file

@ -0,0 +1,92 @@
---
id: engagespot
title: Engagespot
---
# Engagespot
ToolJet can connect to your Engagespot account and send notifications.
## Connection
To establish a connection with the Engagespot data source, you can either click on the `+Add new Data source` button located on the query panel or navigate to the [Data Sources](/docs/data-sources/overview/) page from the ToolJet dashboard.
Enter your Engagespot API key and Engagespot API secret in their respective fields. Optionally, you can specify a signing key if you wish to generate user tokens from ToolJet.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/marketplace/plugins/engagespot/engagespot_install.png" alt="engagespot api key" />
</div>
Click on **Test connection** button to verify if the credentials. Click on **Save** button to save the data source.
:::info
You can change your engagespot BaseURL by enable custom endpoint.
:::
## Querying Engagespot
Click on `+Add` button of the [query manager](/docs/app-builder/query-panel/#add) and select the data source added in the previous step as the data source. Select the operation that you want to perform, fill in the required parameters and click on **Run** button to run the query.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/marketplace/plugins/engagespot/engagespot_query.png" alt="engagespot query" />
</div>
<br/>
:::info
Query results can be transformed using transformations. Read our [transformations documentation](/docs/tutorial/transformations).
:::
## Query operations
You can create query for Engagespot data source to perform several actions such as:
1. **[Create or Update User](#create-or-update-user)**
2. **[Send Notification](#read-object)**
3. **[Generate User Token](#upload-object)**
### Create OR Update User
#### Required parameters:
- **User Identifier** - user unique identifier
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/marketplace/plugins/engagespot/create_user.png" alt="engagespot create user" />
</div>
<br/>
:::info
The user profile column will accept any key value pair. please note that it must be always a valid JSON.
:::
### Send Notification
#### Required parameters:
- **Reciepient** - user unique identifier
- **Notification Title** - The title for your notification
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/marketplace/plugins/engagespot/send_notification.png" alt="engagespot send notitication"/>
</div>
<br/>
### Generate User Token
#### Required parameters:
- **User Identifier** - user unique identifier
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/marketplace/plugins/engagespot/generate_token.png" alt="engagespot generate token" />
</div>
<br/>
:::warning
For Generating user tokens must add SigningKey while establishing connection with Engagespot Data soucre.
:::
### Adding the In-App Inbox element to your Tooljet app
If you want to setup an In-App Inbox element in your tooljet app you can Read [Adding In app](https://docs.engagespot.co/docs/plugins/tooljet/adding-the-inbox-component) and follow the steps.

2
docs/docs/marketplace/plugins/lambda.md
View file

@ -1,5 +1,5 @@
---
id: aws-lambda-plugin
id: marketplace-plugin-aws-lambda
title: AWS Lambda
---

14
docs/docs/org-management/workspaces/workspace_constants.md
View file

@ -3,7 +3,7 @@ id: workspace_constants
title: Workspace Constants
---
Workspace constants are predefined values(usually tokens/secret keys/API keys) that can be used across your application to maintain consistency and facilitate easy updates. They allow you to store important data or configurations that should remain unchanged during the application's runtime. This doc will guide you through the usage and management of workspace constants within your workspaces.
Workspace constants are predefined values(usually tokens/secret keys/API keys) that can be used across your application to maintain consistency and facilitate easy updates. They allow you to store important data or configurations that should remain unchanged during the application's runtime. This doc will guide you through the usage and management of workspace constants within your workspaces.
:::danger
Workspace constants are handled server-side and are not intended for use in query transformations or RunJS and RunPy queries. For these operations, employ variables and page variables instead.
@ -32,15 +32,16 @@ To use a workspace constant, you need to follow the syntax: **`{{constants.const
## Creating Workspace Constants
To create workspace constants, follow these steps:
- Access the ToolJet Dashboard and navigate to Workspace Settings.
- Select the Workspace Constants tab.
- Click on the **Create New Constant** button.
- A drawer will appear; enter the desired name and value for the constant.
- A drawer will appear. Enter the desired name and value for the constant.
- Click the **Add Constant** button to save the constant.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/workspace-const/createconstant.gif" alt="Workspace constants: create"/>
<img className="screenshot-full" src="/img/workspace-const/create-constant-v2.gif" alt="Workspace constants: create"/>
</div>
@ -48,7 +49,7 @@ To create workspace constants, follow these steps:
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/workspace-const/editdelete.png" alt="Workspace constants: edit/delete"/>
<img className="screenshot-full" src="/img/workspace-const/edit-delete-v2.png" alt="Workspace constants: edit/delete"/>
</div>
@ -58,7 +59,7 @@ Workspace constants can be used in the app builder and the global datasource con
### Using Workspace Constants in Global Datasource Connection
You can use workspace constants in the **[global datasource connection](/docs/data-sources/overview#connecting-global-datasources)** form to store sensitive information like API keys, tokens, etc. This will ensure that the data remains secure and is not exposed to the client-side. You can use the syntax `{{constants.constant_name}}` to access the value of the constant.
You can use workspace constants in the **[global datasource connection](/docs/data-sources/overview#connecting-global-datasources)** form to store sensitive information like API keys, tokens, etc. This will ensure that the data remains secure and is not exposed to the client-side. You can use the syntax `{{constants.constant_name}}` to access the value of the constant.
<div style={{textAlign: 'center'}}>
@ -77,10 +78,11 @@ Inside the App Builder, you will find the **[Inspector](/docs/app-builder/left-s
</div>
As you build the application, you can easily refer to the constants and incorporate them into different elements of your app.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/workspace-const/querypanel.png" alt="Workspace constants: querypanel"/>
</div>
With workspace constants, you can streamline your application's configuration and maintain a consistent experience for your users. By leveraging this feature, you can ensure that vital data remains secure while making it accessible for authorized users throughout the application building process.
With workspace constants, you can streamline your application's configuration and maintain a consistent experience for your users. By leveraging this feature, you can ensure that vital data remains secure while making it accessible for authorized users throughout the application building process.

2
docs/docs/org-management/workspaces/workspace_overview.md
View file

@ -9,7 +9,7 @@ The user who creates the workspace will automatically be assigned as its adminis
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/multiworkspace/multiwork2.gif" alt="multi workspace" />
<img className="screenshot-full" src="/img/multiworkspace/multiwork2-v2.gif" alt="multi workspace" />
</div>

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

@ -326,3 +326,29 @@ By default, only embedding of public apps is permitted. By setting this variable
:::caution
The option is only available starting from ToolJet Enterprise Edition `2.8.0` or higher, and `2.10.0` for the Community edition and cloud version.
:::
## Configuring the Default Language
To change the default language, set the LANGUAGE variable to your desired language code.
| Variable | Description |
| --------------- | ------------------------------------- |
| LANGUAGE | `LANGUAGE_CODE` |
Available Languages with their codes and native names:
| Language | Code | Native Name |
|-------------|------|-------------------|
| English | en | English |
| French | fr | Français |
| Spanish | es | Español |
| Italian | it | Italiano |
| Indonesian | id | Bahasa Indonesia |
| Ukrainian | uk | Українська |
| Russian | ru | Русский |
| German | de | Deutsch |
For instance, to set the language to French, you can set the LANGUAGE variable to `fr`.
:::info
The option to set a default language is not available on cloud version of ToolJet.
:::

4
docs/docs/tooljet-concepts/data-sources.md
View file

@ -12,7 +12,7 @@ Data sources are pivotal as they enable us to fetch and send data to and from di
Apart from its built-in database, ToolJet supports a range of external data sources which can be broadly categorized into databases, external APIs, and services. To manage these data sources, ToolJet provides a data source manager that can be opened by clicking on the **Data Sources** button located on the left-sidebar of the App-Builder.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/tooljet-concepts/what-are-datasources/data-source-manager.png" alt="Data Source Manager" />
<img className="screenshot-full" src="/img/tooljet-concepts/what-are-datasources/data-source-manager-v2.png" alt="Data Source Manager" />
</div>
</div>
@ -24,7 +24,7 @@ Apart from its built-in database, ToolJet supports a range of external data sour
Adding a new data source is as easy as filling out a form; users can click on the Data Sources button in the left-sidebar, navigate to the required data source, click on the corresponding **Add** button and enter the credentials.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/tooljet-concepts/what-are-datasources/configure-data-source.gif" alt="Configuring Data Source" />
<img className="screenshot-full" src="/img/tooljet-concepts/what-are-datasources/configure-datasource-v2.gif" alt="Configuring Data Source" />
</div>
</div>

2
docs/docs/tooljet-concepts/workspace-constants.md
View file

@ -11,7 +11,7 @@ Workspace Constants in ToolJet help in maintaining consistency and security acro
One of the key functionalities of Workspace Constants is allowing environment-specific configurations. This is particularly useful for managing sensitive data such as API keys and database credentials securely. The Constants ensure that such critical information is effectively managed across different environments like development, staging, and production. Moreover, to enhance security, Workspace Constants are resolved server-side. This means the actual values of the constants are not sent with network payloads; instead, the server resolves these values, thereby keeping them secure from client-side exposure.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/tooljet-concepts/workspace-constants/workspace-constants-preview.png" alt="Workspace Constants Preview" />
<img className="screenshot-full" src="/img/tooljet-concepts/workspace-constants/workspace-constants-preview-v2.png" alt="Workspace Constants Preview" />
</div>
</div>

6
docs/docs/tooljet_database.md
View file

@ -128,7 +128,7 @@ When the **Create New Table** button is clicked, a drawer opens up from the righ
|:--------- |:----------- |:------- |
| **serial** | **serial** is used to generate a sequence of integers which are often used as the Primary key of a table. Whenever a new table is created in the ToolJet database, a column **id** with the serial data type is automatically created as the **primary key** of the table. | Numbers starting from 1, 2, 3, 4, 5, etc. |
| **varchar** | **varchar** data type is used to store characters of indefinite length | Any string value |
| **int** | **Int** is a numeric data type used to store whole numbers, that is, numbers without fractional components. | Numbers ranging from -2147483648 to 2147483647 |
| **int** | **int** is a numeric data type used to store whole numbers, that is, numbers without fractional components. | Numbers ranging from -2147483648 to 2147483647 |
| **bigint** | **bigint** is a numeric data type that is used to store whole numbers, that is, numbers without fractional components. | Numbers ranging from -9223372036854775808 to 9223372036854775807 |
| **float** | **float** is also a numeric data type that is used to store inexact, variable-precision values. | Any floating-point number, ex: 3.14 |
| **boolean** | **boolean** data type can hold true, false, and null values. | `true` or `false` |
@ -165,8 +165,8 @@ A drawer from the right will open up where you can enter the details for the new
- **Column Name**: Enter a unique name for the new column, serving as its key identifier.
- **Data Type**: Choose the appropriate data type for the column from the [available options](#supported-data-types).
- **Default Value**: Specify any default value that should be assigned to the column. Optionally, users can leave this field blank. It is mandatory to provide a value when NOT NULL is enabled for a column.
- **NULL/NOT NULL**: Use the switch to determine whether the column should allow NULL values or not. By default, `NULL` is enabled for a column which means that the specified column may have no value (NULL) for certain rows. If you toggle the switch and enable the `NOT NULL` option, column is configured to disallow NULL values.
- **Default Value**: Specify any default value that should be assigned to the column. Optionally, users can leave this field blank. When a table contains rows and NOT NULL is applied to one of its existing or new columns, specifying a default value becomes compulsory.
- **NULL/NOT NULL**: Use the switch to determine whether the column should allow NULL values or not. By default, the toggle is off, allowing the column to have blank or empty entries. If you turn it on, the column is set to NOT NULL, meaning it can't have blank or empty entries anymore. But, for text columns, even with NOT NULL on, they can still have empty text (like an empty line) but not completely blank entries
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/newcol.png" alt="ToolJet database" />

6
docs/docs/user-authentication/general-settings.md
View file

@ -8,14 +8,14 @@ title: General Settings
- Go to the **Workspace Settings** (⚙️) from the left sidebar in the ToolJet dashboard
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/general/workside2.png" alt="General Settings: SSO" width="500"/>
<img className="screenshot-full" src="/img/sso/general/workside2-new.png" alt="General Settings: SSO" width="500"/>
</div>
- Select `SSO` from sidebar and then select **General Settings**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/general/sso2.png" alt="General Settings: SSO" width="500"/>
<img className="screenshot-full" src="/img/sso/general/sso2-new.png" alt="General Settings: SSO" width="500"/>
</div>
@ -33,6 +33,6 @@ You can use the login URL to login directly to the workspace. This will be hidde
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/general/generalsettings2.png" alt="General Settings: SSO" />
<img className="screenshot-full" src="/img/sso/general/generalsettings2-new.png" alt="General Settings: SSO" />
</div>

2
docs/docs/user-authentication/password-login.md
View file

@ -13,7 +13,7 @@ Password login is a method of user authentication where user can login using the
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/general/password-login.png" alt="General Settings: Password login" />
<img className="screenshot-full" src="/img/sso/general/password-login-new.png" alt="General Settings: Password login" />
</div>

112
docs/docs/user-authentication/sso/github.md
View file

@ -9,29 +9,29 @@ To enable GitHub Single Sign-on (SSO) for your ToolJet instance, follow these st
1. From the ToolJet dashboard, go to **Settings** (⚙️) from the bottom of the left sidebar and select the **Workspace Settings**.
2. In the **Workspace Settings**, select **Workspace login** from the sidebar. On the right, you'll see toggles to enable SSO via different clients. All the client toggles are disabled by default. After turning it on, a modal will appear with input fields for parameters such as Host name, Client ID, and Client secret. At the top left of the modal, there is a toggle to enable this modal. Turn it on, and then, without entering any parameters, click on the **Save changes** button. This will generate a `Redirect URL` that you will need to utilize in the GitHub Developer settings.
<img className="screenshot-full" src="/img/sso/git/generate-redirect-url.gif" alt="GitHub SSO" />
3. Now go to the **[GitHub Developer settings](https://github.com/settings/developers)** and navigate to `OAuth Apps` and create a new OAuth App.
- Enter the **App Name**, **Homepage URL**, and **Authorization callback URL**. The **Authorization callback URL** should be the generated `Redirect URL` in the ToolJet GitHub manage SSO page. Click on the **Register application** button to create the OAuth App.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/sso/git/workset.png" alt="GitHub SSO" />
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/sso/git/register-0auth.png" alt="GitHub SSO" />
</div>
2. In the **Workspace Settings**, select **SSO** from the sidebar and then select **GitHub**. GitHub login will be **Disabled** by default, **Enable** it and you will see the generated `Redirect URL`.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/sso/git/ssogit.png" alt="GitHub SSO" />
</div>
- The **Client ID** will be generated automatically.
- Generate the **Client Secret** by clicking the `Generate a new client secret` button.
3. Now go to the **[GitHub Developer settings](https://github.com/settings/developers)** and navigate to `OAuth Apps` and create a new project.
- The **Client ID** will be generated automatically.
- Generate the **Client Secret** by clicking the `Generate new client secret` button. Copy the **Client Secret** and save it for later use.
- Enter the **App Name**, **Homepage URL**, and **Authorization callback URL**. The **Authorization callback URL** should be the generated `Redirect URL` in the GitHub manage SSO page.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/sso/git/gitdev.png" alt="GitHub SSO" />
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/sso/git/client-id-secret.png" alt="GitHub SSO" />
</div>
4. Open the ToolJet's GitHub SSO settings and enter the obtained **Client ID** and **Client Secret**.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/sso/git/ssogit.png" alt="GitHub SSO" />
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/sso/git/enter-creds.png" alt="GitHub SSO" />
</div>
5. If you are using **GitHub Enterprise** self-hosted, enter the `Host Name`. The host name should be a URL and should not end with `/`, for example, `https://github.tooljet.com`. If it is not self-hosted, you can skip this field.
@ -44,11 +44,11 @@ To enable GitHub Single Sign-on (SSO) for your ToolJet instance, follow these st
To set GitHub as the default SSO for the instance, use the following environment variables:
| Variable | Description |
| ------------------------------------- | ----------------------------------------------------------- |
| SSO_GIT_OAUTH2_CLIENT_ID | GitHub OAuth client ID |
| SSO_GIT_OAUTH2_CLIENT_SECRET | GitHub OAuth client secret |
| SSO_GIT_OAUTH2_HOST | GitHub OAuth host name if GitHub is self-hosted |
| Variable | Description |
| ---------------------------- | ----------------------------------------------- |
| SSO_GIT_OAUTH2_CLIENT_ID | GitHub OAuth client ID |
| SSO_GIT_OAUTH2_CLIENT_SECRET | GitHub OAuth client secret |
| SSO_GIT_OAUTH2_HOST | GitHub OAuth host name if GitHub is self-hosted |
**Redirect URL should be `<host>/sso/git`**
@ -60,41 +60,41 @@ The exposed user info can be dynamically accessed throughout the apps using JS *
The following is an example of the user info returned by GitHub:
| Key | Description | Syntax to access |
|:--- |:----------- |:---------------- |
| **login** | GitHub username | `{{globals.currentUser.ssoUserInfo.login}}` |
| **id** | GitHub user ID | `{{globals.currentUser.ssoUserInfo.id}}` |
| **node_id** | GitHub user node ID | `{{globals.currentUser.ssoUserInfo.node_id}}` |
| **avatar_url** | GitHub user avatar URL | `{{globals.currentUser.ssoUserInfo.avatar_url}}` |
| **gravatar_id** | GitHub user gravatar ID | `{{globals.currentUser.ssoUserInfo.gravatar_id}}` |
| **url** | GitHub user URL | `{{globals.currentUser.ssoUserInfo.url}}` |
| **html_url** | GitHub user HTML URL | `{{globals.currentUser.ssoUserInfo.html_url}}` |
| **followers_url** | GitHub user followers URL | `{{globals.currentUser.ssoUserInfo.followers_url}}` |
| **following_url** | GitHub user following URL | `{{globals.currentUser.ssoUserInfo.following_url}}` |
| **gists_url** | GitHub user gists URL | `{{globals.currentUser.ssoUserInfo.gists_url}}` |
| **starred_url** | GitHub user starred URL | `{{globals.currentUser.ssoUserInfo.starred_url}}` |
| **subscriptions_url** | GitHub user subscriptions URL | `{{globals.currentUser.ssoUserInfo.subscriptions_url}}` |
| **organizations_url** | GitHub user organizations URL | `{{globals.currentUser.ssoUserInfo.organizations_url}}` |
| **repos_url** | GitHub user repos URL | `{{globals.currentUser.ssoUserInfo.repos_url}}` |
| **events_url** | GitHub user events URL | `{{globals.currentUser.ssoUserInfo.events_url}}` |
| **received_events_url** | GitHub user received events URL | `{{globals.currentUser.ssoUserInfo.received_events_url}}` |
| **type** | GitHub user type | `{{globals.currentUser.ssoUserInfo.type}}` |
| **site_admin** | GitHub user site admin | `{{globals.currentUser.ssoUserInfo.site_admin}}` |
| **name** | GitHub user name | `{{globals.currentUser.ssoUserInfo.name}}` |
| **company** | GitHub user company | `{{globals.currentUser.ssoUserInfo.company}}` |
| **blog** | GitHub user blog | `{{globals.currentUser.ssoUserInfo.blog}}` |
| **location** | GitHub user location | `{{globals.currentUser.ssoUserInfo.location}}` |
| **email** | GitHub user email | `{{globals.currentUser.ssoUserInfo.email}}` |
| **hireable** | GitHub user hireable | `{{globals.currentUser.ssoUserInfo.hireable}}` |
| **bio** | GitHub user bio | `{{globals.currentUser.ssoUserInfo.bio}}` |
| **twitter_username** | GitHub user twitter username | `{{globals.currentUser.ssoUserInfo.twitter_username}}` |
| **public_repos** | GitHub user public repos | `{{globals.currentUser.ssoUserInfo.public_repos}}` |
| **public_gists** | GitHub user public gists | `{{globals.currentUser.ssoUserInfo.public_gists}}` |
| **followers** | GitHub user followers | `{{globals.currentUser.ssoUserInfo.followers}}` |
| **following** | GitHub user following | `{{globals.currentUser.ssoUserInfo.following}}` |
| **created_at** | GitHub user created at | `{{globals.currentUser.ssoUserInfo.created_at}}` |
| **updated_at** | GitHub user updated at | `{{globals.currentUser.ssoUserInfo.updated_at}}` |
| **access_token** | GitHub user access token. Sensitive information of a logged-in user. | `{{globals.currentUser.ssoUserInfo.access_token}}` |
| Key | Description | Syntax to access |
| :---------------------- | :------------------------------------------------------------------- | :-------------------------------------------------------- |
| **login** | GitHub username | `{{globals.currentUser.ssoUserInfo.login}}` |
| **id** | GitHub user ID | `{{globals.currentUser.ssoUserInfo.id}}` |
| **node_id** | GitHub user node ID | `{{globals.currentUser.ssoUserInfo.node_id}}` |
| **avatar_url** | GitHub user avatar URL | `{{globals.currentUser.ssoUserInfo.avatar_url}}` |
| **gravatar_id** | GitHub user gravatar ID | `{{globals.currentUser.ssoUserInfo.gravatar_id}}` |
| **url** | GitHub user URL | `{{globals.currentUser.ssoUserInfo.url}}` |
| **html_url** | GitHub user HTML URL | `{{globals.currentUser.ssoUserInfo.html_url}}` |
| **followers_url** | GitHub user followers URL | `{{globals.currentUser.ssoUserInfo.followers_url}}` |
| **following_url** | GitHub user following URL | `{{globals.currentUser.ssoUserInfo.following_url}}` |
| **gists_url** | GitHub user gists URL | `{{globals.currentUser.ssoUserInfo.gists_url}}` |
| **starred_url** | GitHub user starred URL | `{{globals.currentUser.ssoUserInfo.starred_url}}` |
| **subscriptions_url** | GitHub user subscriptions URL | `{{globals.currentUser.ssoUserInfo.subscriptions_url}}` |
| **organizations_url** | GitHub user organizations URL | `{{globals.currentUser.ssoUserInfo.organizations_url}}` |
| **repos_url** | GitHub user repos URL | `{{globals.currentUser.ssoUserInfo.repos_url}}` |
| **events_url** | GitHub user events URL | `{{globals.currentUser.ssoUserInfo.events_url}}` |
| **received_events_url** | GitHub user received events URL | `{{globals.currentUser.ssoUserInfo.received_events_url}}` |
| **type** | GitHub user type | `{{globals.currentUser.ssoUserInfo.type}}` |
| **site_admin** | GitHub user site admin | `{{globals.currentUser.ssoUserInfo.site_admin}}` |
| **name** | GitHub user name | `{{globals.currentUser.ssoUserInfo.name}}` |
| **company** | GitHub user company | `{{globals.currentUser.ssoUserInfo.company}}` |
| **blog** | GitHub user blog | `{{globals.currentUser.ssoUserInfo.blog}}` |
| **location** | GitHub user location | `{{globals.currentUser.ssoUserInfo.location}}` |
| **email** | GitHub user email | `{{globals.currentUser.ssoUserInfo.email}}` |
| **hireable** | GitHub user hireable | `{{globals.currentUser.ssoUserInfo.hireable}}` |
| **bio** | GitHub user bio | `{{globals.currentUser.ssoUserInfo.bio}}` |
| **twitter_username** | GitHub user twitter username | `{{globals.currentUser.ssoUserInfo.twitter_username}}` |
| **public_repos** | GitHub user public repos | `{{globals.currentUser.ssoUserInfo.public_repos}}` |
| **public_gists** | GitHub user public gists | `{{globals.currentUser.ssoUserInfo.public_gists}}` |
| **followers** | GitHub user followers | `{{globals.currentUser.ssoUserInfo.followers}}` |
| **following** | GitHub user following | `{{globals.currentUser.ssoUserInfo.following}}` |
| **created_at** | GitHub user created at | `{{globals.currentUser.ssoUserInfo.created_at}}` |
| **updated_at** | GitHub user updated at | `{{globals.currentUser.ssoUserInfo.updated_at}}` |
| **access_token** | GitHub user access token. Sensitive information of a logged-in user. | `{{globals.currentUser.ssoUserInfo.access_token}}` |
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/sso/git/ssogithub.png" alt="GitHub SSO" />
@ -110,8 +110,8 @@ Once a user is logged in to ToolJet using GitHub SSO, the access token of the us
3. In the Headers section of the query, include the **key** `Authorization` and set the **value** to `Bearer {{globals.currentUser.ssoUserInfo.access_token}}`. This will pass the user's GitHub access token as a Bearer token in the request header.
5. Execute the query to fetch the list of followers for the logged-in user. The response will contain the list of followers for the authenticated GitHub user.
4. Execute the query to fetch the list of followers for the logged-in user. The response will contain the list of followers for the authenticated GitHub user.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/sso/git/queryresults.png" alt="GitHub SSO" />
</div>
</div>

51
docs/docs/user-authentication/sso/google.md
View file

@ -3,37 +3,24 @@ id: google
title: Google
---
# Google Single Sign-on
# Google Single Sign-on Configuration
- Go to the **Workspace Settings** (⚙️) from the left sidebar in the ToolJet dashboard
To enable Google Single Sign-on (SSO) for your ToolJet instance, follow these steps:
1. From the ToolJet dashboard, go to **Settings** (⚙️) from the bottom of the left sidebar and select the **Workspace Settings**.
2. In the **Workspace Settings**, select **Workspace login** from the sidebar. On the right, you'll see toggles to enable SSO via different clients. All the client toggles are disabled by default. Turn on the Google toggle, a modal will appear with the input field for the parameter Client ID. At the top left of the modal, there is a toggle to enable this modal. Turn it on, and then, without entering the Client ID, click on the **Save changes** button. This will generate a `Redirect URL` that you will need to utilize in the Google Cloud console.
<img className="screenshot-full" src="/img/sso/google/generate-redirect-url.gif" alt="Generate Redirect URL"/>
3. Go to **[Google Cloud console](https://console.cloud.google.com/)** and create a project.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/general/workside2.png" alt="General Settings: SSO" width="500"/>
<img className="screenshot-full" src="/img/sso/google/create-project-v2.png" alt="Create New Project" width="700"/>
</div>
- Select `SSO` from sidebar and then select **Google**. Google login will be **disabled** by default,
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/google/googlessov22.png" alt="General Settings: SSO" />
</div>
- Enable Google. You can see `Redirect URL` generated
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/google/googlesso2v22.png" alt="General Settings: SSO" />
</div>
- Go to **[Google cloud console](https://console.cloud.google.com/)** and create a project.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/google/create-project.png" alt="General Settings: SSO" width="500"/>
</div>
- Go to the **[Google cloud console credentials page](https://console.cloud.google.com/apis/credentials)**, and create an OAuth client ID
- Go to the **[Google Cloud console credentials page](https://console.cloud.google.com/apis/credentials)**, and create an OAuth client ID.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/google/create-oauth.png" alt="General Settings: SSO" width="700"/>
@ -49,29 +36,29 @@ select 'External'.
</div>
- You'll be led to an app registration page where you can set OAuth scopes. Select 'Add or remove scopes' and add the scopes
userinfo.email and userinfo.profile as shown in the image. This will allow ToolJet to store the email and name of the
user who is signing in
`userinfo.email` and `userinfo.profile` as shown in the image. This will allow ToolJet to store the email and name of the
user who is signing in.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/google/scope.png" alt="General Settings: SSO" width="700"/>
</div>
- Set the domain on which ToolJet is hosted as an authorized domain
- Set the domain on which ToolJet is hosted as an authorized domain.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/google/authorized-urls.png" alt="General Settings: SSO" width="700"/>
</div>
- Set the `Redirect URL` generated at manage SSO `Google` page under Authorised redirect URIs
- Under Authorized redirect URIs, enter the `Redirect URL` which was generated in ToolJet's Google SSO settings.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/google/authorized-redirect-urls.png" alt="General Settings: SSO" width="700"/>
</div>
Lastly, set the `client id` in google manage SSO page. This value will be available from your [Google cloud console credentials page](https://console.cloud.google.com/apis/credentials)
Lastly, set the `Client ID` in ToolJet's Google SSO settings. This value will be available from your [Google Cloud console credentials page](https://console.cloud.google.com/apis/credentials).
The Google sign-in button will now be available in your ToolJet login screen.
@ -80,6 +67,4 @@ To set Google as default SSO for the instance use environment variable.
| variable | description |
| ------------------------------------- | ----------------------------------------------------------- |
| SSO_GOOGLE_OAUTH2_CLIENT_ID | Google OAuth client id |
**Redirect URL should be `<host>/sso/google`**
| SSO_GOOGLE_OAUTH2_CLIENT_ID | Google OAuth client id |

4
docs/docs/user-authentication/sso/ldap.md
View file

@ -9,7 +9,7 @@ To set up LDAP as Single Sign-On (SSO) for ToolJet, follow these steps:
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/ldap/settings.png" alt="SSO :LDAP" width="500"/>
<img className="screenshot-full" src="/img/sso/ldap/settings-v2.png" alt="SSO :LDAP" />
</div>
@ -17,7 +17,7 @@ To set up LDAP as Single Sign-On (SSO) for ToolJet, follow these steps:
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/ldap/disabled.png" alt="SSO :LDAP"/>
<img className="screenshot-full" src="/img/sso/ldap/disabled-v2.png" alt="SSO :LDAP"/>
</div>

4
docs/docs/user-authentication/sso/openid/google-openid.md
View file

@ -6,14 +6,14 @@ title: Google (Open ID)
- Go to the **Workspace Settings** (⚙️) from the left sidebar in the ToolJet dashboard
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/general/workside2.png" alt="Google Open ID" width="500"/>
<img className="screenshot-full" src="/img/sso/general/workside2-new.png" alt="Google Open ID" width="500"/>
</div>
- Select `SSO` from workspace options
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/okta/sso2.png" alt="Google Open ID" width="500"/>
<img className="screenshot-full" src="/img/sso/okta/sso2-new.png" alt="Google Open ID" width="500"/>
</div>

4
docs/docs/user-authentication/sso/openid/setup.md
View file

@ -11,14 +11,14 @@ title: OpenID Setup
- Go to the **Workspace Settings** (⚙️) from the left sidebar in the ToolJet dashboard
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/general/workside2.png" alt="General Settings: SSO" width="500"/>
<img className="screenshot-full" src="/img/sso/general/workside2-new.png" alt="General Settings: SSO" width="500"/>
</div>
- Select `SSO` from workspace options
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/okta/sso2.png" alt="Okta: SSO" width="500"/>
<img className="screenshot-full" src="/img/sso/okta/sso2-new.png" alt="Okta: SSO" width="500"/>
</div>

6
docs/docs/user-authentication/sso/saml.md
View file

@ -13,7 +13,7 @@ To enable SAML authentication, you need to configure the following workspace set
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/saml/workspaceset.png" alt="SSO :SAMP" />
<img className="screenshot-full" src="/img/sso/saml/workspaceset-new.png" alt="SSO :SAMP" />
</div>
@ -42,7 +42,7 @@ To enable SAML authentication, you need to configure the following workspace set
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/saml/config.png" alt="SSO :SAMP" />
<img className="screenshot-full" src="/img/sso/saml/config-new.png" alt="SSO :SAMP" />
</div>
@ -54,7 +54,7 @@ To enable SAML authentication, you need to configure the following workspace set
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/sso/saml/url.png" alt="SSO :SAML"/>
<img className="screenshot-full" src="/img/sso/saml/url-new.png" alt="SSO :SAML"/>
</div>

91
docs/docs/user-authentication/workspace-settings.md Normal file
View file

@ -0,0 +1,91 @@
---
id: workspace-login
title: Workspace Login
---
## Accessing Workspace Login
To access the Workspace Login, navigate to the ToolJet dashboard and click on the gear icon (⚙️) located at the bottom of the left sidebar. From the dropdown, select `Workspace Settings` and then select the `Workspace Login` tab. Workspace login/SSO can be configured by both workspace admins and super admins.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/sso/workspace-settings/login-sso-v2.png" alt="Workspace settings" />
</div>
## Workspace login state: Enabled/Inherited
The workspace login state can be either `Enabled` or `Inherited`. When the workspace login state is `Enabled`, it overrides the instance login configurations, including allowed domains, enable sign-up toggle, and password login toggle. Workspace admins can separately choose to enable or disable the SSO options of the workspace.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/sso/workspace-settings/enabled-v2.png" alt="Workspace settings" />
</div>
When the workspace login state is `Inherited`, the workspace login settings are inherited from the instance login settings. The workspace login settings are disabled, and the workspace admins cannot change the SSO settings. Only super admins can change the SSO settings from the instance login settings.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/sso/workspace-settings/inherited.png" alt="Workspace settings" />
</div>
## Configuring Workspace Login
### Allowed Domains
The allowed domains field is used to specify the domains that are allowed to access the workspace. If the allowed domains field is empty, all domains are allowed to access the workspace. If the allowed domains field is not empty, only the specified domains are allowed to access the workspace. The allowed domains field can be a comma-separated list of domains.
### Login URL
Login URL is automatically generated and can be used to login directly to the workspace. The login URL is unique to the workspace and can be shared with the users to access the workspace.
### Enable Sign-up
The enable sign-up toggle is used to enable or disable the sign-up option for the workspace. If the enable sign-up toggle is enabled, new users can sign up for the workspace. If the enable sign-up toggle is disabled, new users cannot sign up for the workspace.
## Password Login
Password login is a method of user authentication where user can login using their email and password. This option is enabled by default. If the password login toggle is disabled, users can only login to the workspace using the SSO options.
### Retry limits
The user password authentication method will be disabled after predefined numbers of wrong password attempts. This feature can be disabled using setting `DISABLE_PASSWORD_RETRY_LIMIT` to `true` in environment variables. Number of retries allowed will be 5 by default, it can be override by `PASSWORD_RETRY_LIMIT` environment variable.
### Reset Password
There are two ways through which a user can reset their password. The first method is where user can reset their password by themselves. The second method is where a **Super Admin** can reset password for a user.
#### 1. Forgot Password
- On the login page, click on the **Forgot Password**.
- Enter the registered email address associated with the account and then click on the **Send a reset link** button.
- Receive a password reset link via email.
- Click on the link to be directed to the password reset page.
- Follow the prompts to set a new password.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/sso/general/forgot-password-v2.png" alt="Workspace settings" />
</div>
#### 2. **Super Admin**
- Reach out to the **[Super Admin](/docs/Enterprise/superadmin)** of the workspace.
- The **Super Admin** can reset the password for the user from the **Settings** > **All Users** section.
- Select the user for whom the password needs to be reset.
- Click on the kebab icon(three dots) on the right side of the user's name and select **Reset Password**.
- A modal will appear with two options to reset the password: **Automatically generate a password** and **Create password**.
#### Automatically Generate Password
- Selecting this option will automatically generate a new password for the user.
- Click on the **Reset** button to reset the password and the new password will be displayed in the modal.
- Super Admin can copy this password and provide it to the user securely.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/sso/general/auto-password.png" alt="Workspace settings" />
</div>
#### Create Password
- Selecting this option will allow the Super Admin to create a new password for the user.
- Enter the new password and click on the **Reset** button.
<div style={{textAlign: 'center'}}>
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/sso/general/create-password.png" alt="Workspace settings" />
</div>

52
docs/docs/widgets/kanban-board.md
View file

@ -5,27 +5,33 @@ title: Kanban
# Kanban
Kanban widget allows you to visually organize and prioritize your tasks with a transparent workflow. You can set the number of columns to display, enable/disable the add cards button, and bind data to the cards.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/kanban/kanban2/kanban2.png" alt="ToolJet - Widget Reference - Kanban widget" />
Kanban component allows you to visually organize and prioritize your tasks with a transparent workflow. You can set the number of columns to display, enable/disable the add cards button, and bind data to the cards.
<div style={{textAlign: 'center', marginBottom:'15px'}}>
<img className="screenshot-full" src="/img/widgets/kanban/kanban2/kanban2.png" alt="ToolJet - Component Reference - Kanban Component" />
</div>
:::caution Restricted components
In order to avoid excessively complex situations, certain components are restricted from being placed within the **Card** and **Popout** of the Kanban component.
Certain components are restricted from being placed within the **Card** and **Popout** of the Kanban component.
- **Card**: Calendar, Kanban, Form, Tabs, Modal, ListView, Container
- **Popout**: Calendar, Kanban
If the builder attempts to add any of the aforementioned components inside the Kanban Card or Popout, an error message will be displayed:
`<Restricted component> cannot be used as a child component within the Kanban Popout/Card.`
:::
## Setting Card Data
To dynamically populate Kanban cards, you can use the `cardData` key.
For instance, you can set the `Data` property of a Text component on a card using the below code:
```js
{{cardData.title}}
// Replace title with the key in your data
```
## Events
To add an event, click on the widget handle to open the widget properties on the right sidebar. Go to the **Events** section and click on **Add handler**.
To add an event, click on the component handle to open the component properties on the right sidebar. Go to the **Events** section and click on **Add handler**.
- **[On update](#on-update)**
- **[On add card click](#on-add-card-click)**
@ -36,7 +42,7 @@ To add an event, click on the widget handle to open the widget properties on the
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/kanban/kanban2/events.png" alt="ToolJet - Widget Reference - Kanban widget" width="700" />
<img className="screenshot-full" src="/img/widgets/kanban/kanban2/events.png" alt="ToolJet - Component Reference - Kanban component" width="700" />
</div>
@ -70,7 +76,7 @@ This event is triggered whenever a card is clicked to open the modal.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/kanban/kanban2/props.png" alt="ToolJet - Widget Reference - Kanban widget" width="300"/>
<img className="screenshot-full" src="/img/widgets/kanban/kanban2/props.png" alt="ToolJet - Component Reference - Kanban component" width="300"/>
</div>
@ -91,13 +97,13 @@ This event is triggered whenever a card is clicked to open the modal.
## General
### Tooltip
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/kanban/kanban2/tooltip.png" alt="ToolJet - Widget Reference - Kanban widget" width="400"/>
<img className="screenshot-full" src="/img/widgets/kanban/kanban2/tooltip.png" alt="ToolJet - Component Reference - Kanban component" width="400"/>
</div>
@ -105,34 +111,34 @@ Under the <b>General</b> accordion, you can set the value in the string format.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/kanban/kanban2/layout.png" alt="ToolJet - Widget Reference - Kanban widget" width="400"/>
<img className="screenshot-full" src="/img/widgets/kanban/kanban2/layout.png" alt="ToolJet - component Reference - Kanban component" width="400"/>
</div>
| Layout | description | Expected value |
| --------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| Show on desktop | Toggle on or off to display the widget in desktop view. | You can programmatically set the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
| Show on mobile | Toggle on or off to display the widget in mobile view. | You can programmatically set the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
| Show on desktop | Toggle on or off to display the component in desktop view. | You can programmatically set the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
| Show on mobile | Toggle on or off to display the component in mobile view. | You can programmatically set the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
## Styles
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/kanban/kanban2/styles.png" alt="ToolJet - Widget Reference - Kanban widget" width="400"/>
<img className="screenshot-full" src="/img/widgets/kanban/kanban2/styles.png" alt="ToolJet - Component Reference - Kanban component" width="400"/>
</div>
| Style | Description |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Disable | If disabled or set to `{{false}}` the widget will be locked and becomes non-functional. By default, its disabled i.e. its value is set to `{{true}}` . |
| Visibility | This is to control the visibility of the widget. If `{{false}}`/disabled the widget will not visible after the app is deployed. By default, it's enabled (set to `{{true}}`). |
| Disable | If disabled or set to `{{false}}` the component will be locked and becomes non-functional. By default, its disabled i.e. its value is set to `{{true}}` . |
| Visibility | This is to control the visibility of the component. If `{{false}}`/disabled the component will not visible after the app is deployed. By default, it's enabled (set to `{{true}}`). |
| Accent color | You can change the accent color of the column title by entering the Hex color code or choosing a color of your choice from the color picker. |
## Exposed variables
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/kanban/kanban2/exposedvar.png" alt="ToolJet - Widget Reference - Kanban widget" width="500"/>
<img className="screenshot-full" src="/img/widgets/kanban/kanban2/exposedvar.png" alt="ToolJet - Widget Reference - Kanban component" width="500"/>
</div>

83
docs/docs/widgets/listview.md
View file

@ -1,25 +1,46 @@
---
id: listview
title: List view
title: List View
---
# List view
List view widget allows to create a list of repeatable rows of data. Just like a container widget, you can nest other widgets inside of it and control how many times they repeat.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/list-view/listviewapp.png" alt="ToolJet - List view widget" />
List View component allows to create a list of repeatable rows of data. Just like the Container component, you can nest other components inside of it and control how many times they repeat.
<div style={{textAlign: 'center', marginBottom: '15px'}}>
<img className="screenshot-full" src="/img/widgets/list-view/listviewapp.png" alt="ToolJet - List view component" />
</div>
:::caution Restricted components
In order to avoid excessively complex situations, certain components, namely **Calendar** and **Kanban**, are restricted from being placed within the list view component using drag-and-drop functionality.
If the builder attempts to add any of the aforementioned components inside the List view, an error message will be displayed:
`<Restricted component> cannot be used as a child component within the list view.`
Certain components, namely **Calendar** and **Kanban**, are restricted from being placed within the list view component using drag-and-drop functionality.
:::
## Setting List Data
To dynamically populate List View components, you can use specific data properties.
Consider this data being passed inside a List View component's `List data` property:
```js
{{[
{ imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 1' },
{ imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 2' },
{ imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 3' },
]}}
```
Based on the above data, you can set the `Data` property of a Text component inside List View using the below code:
```js
{{listItem.text}}
```
Similarly, for an Image component inside List View, you can use the below code to pass the `imageURL` value:
```js
{{listItem.imageURL}}
```
## Events
To attach an event handler to the list view component, follow these steps:
@ -33,7 +54,7 @@ There are two events that you can use with the List View component:
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/list-view/newevents.png" alt="ToolJet - List view widget" />
<img className="screenshot-full" src="/img/widgets/list-view/newevents.png" alt="ToolJet - List view component" />
</div>
@ -61,7 +82,7 @@ To get detailed information about all the **Actions**, please consult the [Actio
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/list-view/propsnew.png" alt="ToolJet - List view widget" width="300"/>
<img className="screenshot-full" src="/img/widgets/list-view/propsnew.png" alt="ToolJet - List view component" width="300"/>
</div>
@ -77,16 +98,16 @@ To get detailed information about all the **Actions**, please consult the [Actio
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/list-view/gridmode.gif" alt="ToolJet - List view widget" />
<img className="screenshot-full" src="/img/widgets/list-view/gridmode.gif" alt="ToolJet - List view component" />
</div>
### General
#### Tooltip
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
<div style={{textAlign: 'center'}}>
@ -98,7 +119,7 @@ Under the <b>General</b> accordion, you can set the value in the string format.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/list-view/listlayout.png" alt="ToolJet - List view widget" />
<img className="screenshot-full" src="/img/widgets/list-view/listlayout.png" alt="ToolJet - List view component" />
</div>
@ -111,16 +132,16 @@ Under the <b>General</b> accordion, you can set the value in the string format.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/list-view/style.png" alt="ToolJet - List view widget" />
<img className="screenshot-full" src="/img/widgets/list-view/style.png" alt="ToolJet - List view component" />
</div>
| Style | Description |
| ----------- | ----------- |
| Background Color | You can change the background color of the widget by entering the Hex color code or choosing a color of your choice from the color picker. |
| Background Color | You can change the background color of the component by entering the Hex color code or choosing a color of your choice from the color picker. |
| Border Color | You can change the border color of the listview by entering the `Hex color code` or choosing a color of your choice from the color picker. |
| Visibility | This is to control the visibility of the widget. If `{{false}}` the widget will not be visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. By default, it's set to `{{true}}`. |
| Disable | This property only accepts boolean values. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
| Visibility | This is to control the visibility of the component. If `{{false}}` the component will not be visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. By default, it's set to `{{true}}`. |
| Disable | This property only accepts boolean values. If set to `{{true}}`, the component will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
| Border radius | Use this property to modify the border radius of the list view. The field expects only numerical value from `1` to `100`, default is `0`. |
:::info
@ -129,11 +150,11 @@ Any property having `Fx` button next to its field can be **programmatically conf
## Example: Displaying data in the list view
- Let's start by creating a new app and then dragging the List view widget onto the canvas.
- Let's start by creating a new app and then dragging the List view component onto the canvas.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/list-view/emptylist.png" alt="ToolJet - List view widget" />
<img className="screenshot-full" src="/img/widgets/list-view/emptylist.png" alt="ToolJet - List view component" />
</div>
@ -141,32 +162,32 @@ Any property having `Fx` button next to its field can be **programmatically conf
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/list-view/data.gif" alt="ToolJet - List view widget" />
<img className="screenshot-full" src="/img/widgets/list-view/data.gif" alt="ToolJet - List view component" />
</div>
- Now lets edit the `List data` property of the list view widget for displaying the query data. We will use JS to get the data from the query - `{{queries.restapi1.data.data}}`. Here the last `data` is a data object that includes an array of objects, the first `data` is the data resulted from the `restapi1` query. This will automatically create the rows in the widget using the data.
- Now lets edit the `List data` property of the list view component for displaying the query data. We will use JS to get the data from the query - `{{queries.restapi1.data.data}}`. Here the last `data` is a data object that includes an array of objects, the first `data` is the data resulted from the `restapi1` query. This will automatically create the rows in the component using the data.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/list-view/datadisplay.png" alt="ToolJet - List view widget" />
<img className="screenshot-full" src="/img/widgets/list-view/datadisplay.png" alt="ToolJet - List view component" />
</div>
- Finally, we will need to nest widgets into the first row of list view widget and the widget will automatically create the subsequent instances. The subsequent rows will appear the same way you'll display the data in the first row.
- Finally, we will need to nest components into the first row of list view component and the component will automatically create the subsequent instances. The subsequent rows will appear the same way you'll display the data in the first row.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/list-view/addingwidgets.gif" alt="ToolJet - List view widget" />
<img className="screenshot-full" src="/img/widgets/list-view/addingwidgets.gif" alt="ToolJet - List view component" />
</div>
:::tip
Use `{{listItem.key}}` to display data on the nested widgets. Example: For displaying the images we used `{{listItem.avatar}}` where **avatar** is one of the key in the objects from the query result.
Use `{{listItem.key}}` to display data on the nested components. Example: For displaying the images we used `{{listItem.avatar}}` where **avatar** is one of the key in the objects from the query result.
:::
@ -174,7 +195,7 @@ Use `{{listItem.key}}` to display data on the nested widgets. Example: For displ
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/list-view/exposed2.png" alt="ToolJet - List view widget" />
<img className="screenshot-full" src="/img/widgets/list-view/exposed2.png" alt="ToolJet - List view component" />
</div>
@ -197,7 +218,7 @@ All the child components of the list view component are exposed through the `chi
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/list-view/children.png" alt="ToolJet - List view widget" />
<img className="screenshot-full" src="/img/widgets/list-view/children.png" alt="ToolJet - List view component" />
</div>

5
docs/docs/widgets/number-input.md
View file

@ -68,6 +68,11 @@ Check the **component specific actions** available for this component **[here](/
| Max value | Sets the maximum value allowed. | Integer (e.g., `1000` for a maximum value of 1000).|
| Custom validation | Specifies a validation error message for specific conditions. | Logical Expression (e.g., `{{components.numberinput1.value<5&&"Value needs to be more than 5"}}`). |
To add regex inside `Custom Validation`, you can use the below format:
**Format**: `{{(<regexPattern>.test(<value>)) ? '' : 'Error message';}}`
**Example**: `{{(/^\d{1,10}$/.test(components.numberinput1.value)) ? '' : 'Error message';}}`
## Additional Actions

4
docs/docs/widgets/password-input.md
View file

@ -67,7 +67,11 @@ Check the **component specific actions** available for this component **[here](/
| Max length | Sets the maximum number of characters allowed. | Integer (e.g., `12` for a maximum of 12 characters).|
| Custom validation | Specifies a validation error message for specific conditions. | Logical Expression (e.g., `{{components.passwordinput1.value<5&&"Value needs to be more than 5"}}`). |
To add regex inside `Custom Validation`, you can use the below format:
**Format**: `{{(<regexPattern>.test(<value>)) ? '' : 'Error message';}}`
**Example**: `{{(/^\d{1,10}$/.test(components.passwordinput1.value)) ? '' : 'Error message';}}`
## Additional Actions

59
docs/docs/widgets/pdf.md
View file

@ -5,61 +5,66 @@ title: PDF
# PDF
PDF widget can be used to embed the PDF file either by URL or as a Base64 encoded.
The PDF component can be used to embed PDF files either by URL or through Base64 code.
:::info
Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
## Compatibility
The PDF component is compatible with the following browser versions: <br/>
| Browser | Version |
|:--------|:--------------------|
| Chrome | 92 or later |
| Edge | 92 or later |
| Safari | 15.4 or later |
| Firefox | 90 or later |
If the PDF component is integrated into your application, it will only render in supported browsers.
## Properties
### File URL
The URL of the PDF file on the web. `data:application/pdf;base64,` format is supported and the input needs to be prefixed with `data:application/pdf;base64,`
Under this property, you can enter the URL of the PDF file to display. Base64 format is also supported, the input needs to be prefixed with `data:application/pdf;base64,`.
For example:
```js
{{'data:application/pdf;base64,' + components.filepicker1.file[0].base64Data}}
```
### Scale page to width
It can be toggled to adjust the PDF content to fit the width or height of the component
The `Scale page to width` property automatically adjusts the PDF to fill the entire width of the component.
### Show page controls
By default, page number, previous & next button is displayed while hovering the PDF file. It can be toggled on or off.
By default, when hovering over the PDF file, buttons for the previous and next page, along with the page number, are displayed. They can be toggled on or off using the `Show page controls` toggle.
### Show the download
The `Download` button on the PDF component allows you to download the pdf file. By default, Show the download button is enabled. Toggle it off to remove the `Download` button from PDF component, you can also click on the `Fx` button to set the values `{{true}}` or `{{false}}` dynamically.
The `Download` button on the PDF component allows you to download the PDF file. By default, `Show the download` button is enabled. Toggle it off to remove the `Download` button from the PDF component.
## General
### Tooltip
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
To display instructional text when a user hovers over the PDF component, add some text under the Tooltip property.
Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
## Devices
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/tooltip.png" alt="ToolJet - Widget Reference - PDF" />
</div>
## Layout
| Layout | description | Expected value |
| --------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
| Property | Description | Expected value |
| :-------------- | :---------------------------------------- | :------------------ |
| Show on desktop | Display the component in Desktop view | Programmatically determine the value by clicking on `fx` or use the toggle switch |
| Show on mobile | Display the component in Mobile view | Programmatically determine the value by clicking on `fx` or use the toggle switch |
## Styles
| Style | Description |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Visibility | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not visible after the app is deployed. By default, it's set to `{{true}}`. |
### Visibility
Toggle the `Visibility` condition on or off to control the visibility of the component. You can also programmatically change its value by clicking on the `fx` button next to it. If `{{false}}` the component will not be visible after the app is deployed. By default, it's set to `{{true}}`.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how to display images/PDFs using base64 string
:::
## Exposed variables
There are currently no exposed variables for the component.

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

@ -621,7 +621,7 @@ Activate this option to visually emphasize the last clicked row. **Enabling** th
To enable the selection of one or more rows from the current page of a table, you can activate the 'Bulk selection' setting in the inspector. The values of the selected rows will be exposed as '**selectedRows**'.
### Default Selected Row
### Default selected row
By enabling this option, you can designate a default row to be pre-selected when the app loads. This means that whenever the app is opened for the first time, a specific row will already be highlighted in the table by default. Additionally, there is an accessible variable that stores the value for this setting. You can find a list of all accessible variables **[here](#exposed-variables)**.
@ -634,6 +634,9 @@ Example:
Please ensure that the value provided in the object corresponds to a valid id in the table to ensure proper functionality.
### Select row on cell edit
Enabling the `Make editable` property for a column allows the app users to edit the column. While editing, the related row will be selected by default. To stop the row from getting selected by default, turn off `Select row on cell edit`.
## Search Sort and Filter
<div style={{textAlign: 'center'}}>

6
docs/docs/widgets/text-input.md
View file

@ -66,6 +66,12 @@ Check the **component specific actions** available for this component **[here](/
| Max length | Sets the maximum number of characters allowed. | Integer (e.g., `12` for a maximum of 12 characters).|
| Custom validation | Specifies a validation error message for specific conditions. | Logical Expression (e.g., `{{components.textinput1.value<5&&"Value needs to be more than 5"}}`). |
To add regex inside `Custom Validation`, you can use the below format:
**Format**: `{{(<regexPattern>.test(<value>)) ? '' : 'Error message';}}`
**Example**: `{{(/^\d{1,10}$/.test(components.textinput1.value)) ? '' : 'Error message';}}`
## Additional Actions
| <div style={{ width:"100px"}}> Action </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Configuration Options </div>|

15
docs/docs/workflows/triggers.md
View file

@ -13,8 +13,7 @@ Triggers can be used to execute a workflow. Currently, ToolJet supports two type
A webhook trigger allows you to run the workflow when a webhook is received. You can configure the webhook trigger from the Triggers tab. The webhook URL is unique for each workflow.
### Creating a webhook trigger
### Creating a Webhook Trigger
- Click on the **Triggers** option in the left panel to open the Triggers tab.
<div style={{textAlign: 'center'}}>
@ -55,6 +54,14 @@ A webhook trigger allows you to run the workflow when a webhook is received. You
<img style={{padding: '10px'}} className="screenshot-full" src="/img/workflows/triggers/token.png" alt="Triggers" />
</div>
:::info
Currently, authentication is mandatory for webhooks. Use a bearer token in the `Authorization` header for authentication. <br/>
**Format:**
`Authorization: Bearer <secret_token>`<br/>
**Example:**
`Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...`
:::
- Parameters can be passed to the workflow using the **Parameters** field. The parameter `key` and their `type` can be specified in the **Parameters** field. For example, if you want to pass the `name` and `age` parameters to the workflow using the webhook triggers, you can set the **Parameters** field as follows:
```json
@ -81,7 +88,7 @@ A webhook trigger allows you to run the workflow when a webhook is received. You
<img style={{padding: '10px'}} className="screenshot-full" src="/img/workflows/triggers/test.png" alt="Triggers" />
</div>
### Restrictions on usage of webhook triggers
### Restrictions on Usage of Webhook Triggers
There are certain restrictions on the usage of webhook triggers that are configurable, both at the instance level and at the workspace level depending on the license. The restrictions are as follows:
@ -111,7 +118,7 @@ In the application, simply click on the `+ Add` button in the query panel and se
<img style={{padding: '10px'}} className="screenshot-full" src="/img/workflows/triggers/workflowdrop.png" alt="Triggers" />
</div>
### Passing parameters
### Passing Parameters
Parameters can be passed to the workflow from the **Params** field in the query. The parameter `key` and their `value` can be specified in the **Params** field. For example, if you want to pass the `name` and `age` parameters to the workflow using the manual triggers, you can set the **Params** field as follows:

6
docs/docusaurus.config.js
View file

@ -10,7 +10,7 @@ module.exports = {
baseUrl: '/',
onBrokenLinks: 'ignore',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/icon.svg',
favicon: 'img/tooljet-favicon.svg',
organizationName: 'ToolJet', // Usually your GitHub org/user name.
projectName: 'ToolJet', // Usually your repo name.
themeConfig: {
@ -121,8 +121,8 @@ module.exports = {
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
editUrl: 'https://github.com/ToolJet/Tooljet/blob/develop/docs/',
includeCurrentVersion: false,
lastVersion: '2.30.0',
includeCurrentVersion: true,
lastVersion: '2.33.0',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),

2
docs/package.json
View file

@ -39,4 +39,4 @@
"last 1 safari version"
]
}
}
}

17
docs/sidebars.js
View file

@ -235,6 +235,7 @@ const sidebars = {
'data-sources/clickhouse',
'data-sources/cosmosdb',
'data-sources/couchdb',
'data-sources/databricks',
'data-sources/dynamodb',
'data-sources/elasticsearch',
'data-sources/gcs',
@ -291,20 +292,9 @@ const sidebars = {
{
'type': 'category',
'label': 'User Authentication',
'link': {
'type': 'generated-index',
'title': 'User Authentication',
'description': 'Guides for setting up User Authentication and managing Single Sign-On',
'keywords': [
'SSO',
'authentication',
],
},
'collapsed': true,
'items': [
'user-authentication/user-lifecycle',
'user-authentication/general-settings',
'user-authentication/password-login',
'user-authentication/workspace-login',
{
'type': 'category',
'label': 'SSO',
@ -376,8 +366,9 @@ const sidebars = {
'type': 'category',
'label': 'Marketplace Plugins',
'items': [
'marketplace/plugins/marketplace-plugin-redshift',
'marketplace/plugins/marketplace-plugin-textract',
'marketplace/plugins/aws-lambda-plugin',
'marketplace/plugins/marketplace-plugin-aws-lambda',
'marketplace/plugins/marketplace-plugin-github',
'marketplace/plugins/marketplace-plugin-harperdb',
'marketplace/plugins/marketplace-plugin-openai',

1
docs/src/components/DocsCard/DocsCard.jsx
View file

@ -9,6 +9,7 @@ export const DocsCard = ({ label, imgSrc, link, height = 40, width = 40, title }
const description = {
"Try ToolJet": "Try out ToolJet with single docker command",
"System Requirements": "Learn about system requirements for running ToolJet",
DigitalOcean: "Quickly deploy ToolJet using the Deploy to DigitalOcean button",
Docker: "Deploy ToolJet on a server using docker-compose",
Heroku: "Deploy ToolJet on Heroku using the one-click-deployment button",

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

@ -49,11 +49,6 @@
--ifm-link-menu-color-background-hover: #f0f4ff;
}
/* .markdown h1 {
margin-left: 10%;
margin-right: 10%;
} */
.menu__link--sublist-caret:after {
background: var(--ifm-menu-link-sublist-icon) 50% / 1rem 1rem;
}
@ -186,6 +181,14 @@ body {
img {
max-width: 100%;
max-height: 100%;
border: 0 ;
border-radius: 10px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2)
}
.card-icon img {
box-shadow: none;
border-radius: 0;
}
.menu__link--sublist:after {
@ -198,8 +201,9 @@ img {
--ifm-hero-background-color: #00bcd4;
}
.navbar__logo {
height: 25px;
.navbar__logo img {
border-radius: 0px !important;
box-shadow: none !important
}
/* strong {

BIN
docs/static/img/dashboard/add-to-folder-v2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 254 KiB

BIN
docs/static/img/dashboard/app-menu-v2.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
docs/static/img/dashboard/app-url-v2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 198 KiB

BIN
docs/static/img/dashboard/appcard-v2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 270 KiB

BIN
docs/static/img/dashboard/change-icon-v2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 248 KiB

BIN
docs/static/img/dashboard/choosefromtemplate-v2.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 798 KiB

BIN
docs/static/img/dashboard/clone-app-v2.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 573 KiB

BIN
docs/static/img/dashboard/current-version-v2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 261 KiB

BIN
docs/static/img/dashboard/dashboardoptions-v2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 212 KiB

BIN
docs/static/img/dashboard/delete-app-v2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 250 KiB

BIN
docs/static/img/dashboard/export-app-v2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 260 KiB

BIN
docs/static/img/dashboard/import-app-v2.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
docs/static/img/dashboard/new-app-modal-v2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 323 KiB

BIN
docs/static/img/dashboard/new-workspace-modal-v2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 218 KiB

BIN
docs/static/img/dashboard/newfolder-v2.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
docs/static/img/dashboard/rename-app.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 247 KiB

BIN
docs/static/img/dashboard/search-app-v2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 272 KiB

BIN
docs/static/img/dashboard/search-v2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 272 KiB

BIN
docs/static/img/dashboard/workspacemenu-v2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 209 KiB

BIN
docs/static/img/datasource-reference/airtable/airtableconnect-v2.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
docs/static/img/datasource-reference/azureblob/gdsazure-v2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 295 KiB

BIN
docs/static/img/datasource-reference/baserow/baserow-intro-v2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 241 KiB

BIN
docs/static/img/datasource-reference/clickhouse/connection-v2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 260 KiB

BIN
docs/static/img/datasource-reference/cosmosdb/cosmosdb-connect-v2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 267 KiB

BIN
docs/static/img/datasource-reference/databricks/add-query.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 834 KiB

BIN
docs/static/img/datasource-reference/databricks/connection-details.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 318 KiB

BIN
docs/static/img/datasource-reference/databricks/generate-token.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 251 KiB

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