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

Merge pull request #6258 from ToolJet/docs/txtract

Browse source 
[docs] v2.5.0
This commit is contained in:
Shubham Gupta 2023-05-05 16:41:46 +05:30 committed by GitHub
commit 9f631edccf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
229 changed files with 51893 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
docs/docs/marketplace/plugins/textract.md Normal file
View file

@ -0,0 +1,83 @@
---
id: marketplace-plugin-textract
title: Amazon Textract
---
ToolJet can connect to Amazon Textract to extract text and data from scanned documents, forms, and tables. Textract can process documents of various formats, including PDF, JPEG/JPG, and PNG.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/marketplace/plugins/textract/textract.gif" alt="Marketplace: Amazon Textract" />
</div>
:::note
Before following this guide, it is recommended to check the following doc: **[Using Marketplace plugins](/docs/marketplace/marketplace-overview#using-marketplace-plugins)**.
:::
## Connection
For connecting to Amazon Textract, following credentials are required:
- **Access key**
- **Secret key**
- **Region**
:::caution
- Access to the S3 bucket is dependent on the permissions granted to the IAM role added for the connection.
- Only single page documents are supported. if there is a multipage PDF you can convert it to single page using available online tools.
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/marketplace/plugins/textract/creds.png" alt="Marketplace: Amazon Textract" />
</div>
## Supported queries
- **[Analyze Document](#analyze-document)**
- **[Analyze document stored in AWS S3](#analyze-document-stored-in-aws-s3)**
:::info
The data returned by the queries is in **JSON** format and may include additional information such as confidence scores and the location of the extracted content within the original document.
:::
### Analyze Document
This operation let's you to analyze the document by providing the document data in **base64** format.
#### Required parameters:
- **Document**: Provide the document data in base64 scheme. Components like filepicker can be used to pick the document from local system and retrieve the base64 data dynamically using exposed variables. ex: **{{components.filepicker1.file[0].base64Data}}**
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
3. **Queries**: Extracted data from databases and other structured data sources.
4. **Signature Detection**: Identification and extraction of signatures and signature blocks from documents.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/marketplace/plugins/textract/doc.png" alt="Marketplace: Amazon Textract" />
</div>
### Analyze document stored in AWS S3
This operation let's you to analyze the document stored in your AWS S3 buckets by providing the **bucket** and **object** name.
#### Required parameters:
- **Bucket**: Name of the S3 bucket that has the document stored
- **Key**: Object name(document name) that needs to be extracted
- **Data Output**: Select one or more type of data output of the document. The 4 types of data outputs are:
1. **Forms**: Extracted data and text from forms, including field keys and values.
2. **Tables**: Extracted table data, including column and row headers and cell contents.
3. **Queries**: Extracted data from databases and other structured data sources.
4. **Signature Detection**: Identification and extraction of signatures and signature blocks from documents.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/marketplace/plugins/textract/s3.png" alt="Marketplace: Amazon Textract" />
</div>

2
docs/docusaurus.config.js
View file

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

1
docs/sidebars.js
View file

@ -302,6 +302,7 @@ const sidebars = {
'type': 'category',
'label': 'Marketplace Plugins',
'items': [
'marketplace/plugins/marketplace-plugin-textract',
'marketplace/plugins/marketplace-plugin-github',
'marketplace/plugins/marketplace-plugin-openai',
'marketplace/plugins/marketplace-plugin-plivo',

BIN
docs/static/img/marketplace/plugins/textract/creds.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
docs/static/img/marketplace/plugins/textract/doc.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
docs/static/img/marketplace/plugins/textract/s3.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
docs/static/img/marketplace/plugins/textract/textract.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 644 KiB

5
docs/versioned_docs/version-2.5.0/Enterprise/_category_.json Normal file
View file

@ -0,0 +1,5 @@
{
"label": "Enterprise",
"position": 9,
"collapsed": true
}

84
docs/versioned_docs/version-2.5.0/Enterprise/audit_logs.md Normal file
View file

@ -0,0 +1,84 @@
---
id: audit_logs
title: Audit logs
---
<div className='badge badge--primary heading-badge'>Available on: Enterprise Edition</div>
The audit log is the report of all the activities done in your ToolJet account. It will capture and display events automatically by recording who performed an activity, what when, and where the activity was performed, along with other information such as IP address.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/audit_logs/auditlogv2.png" alt="Audit logs" />
</div>
### Filter audit logs
Audited events can be filtered using the below characteristics:
#### Select Users
Select a specific user from this dropdown to check all their activities.
#### Select Apps
The dropdown will list all the apps present in your account. Choose an app to filter the logs associated with that app.
#### Select Resources
| Resources | description |
| ----------- | ----------- |
| User | Filter all the User events like `USER_LOGIN`, `USER_SIGNUP`, `USER_INVITE`, AND `USER_INVITE_REDEEM`. |
| App | Filter all the App events like `APP_CREATE`, `APP_UPDATE`,`APP_VIEW`,`APP_DELETE`,`APP_IMPORT`,`APP_EXPORT`,`APP_CLONE`. |
| Data Query | Filters the events associated with Data Query like `DATA_QUERY_RUN`. |
| Group Permission | All the events associated with Group Permissions will be filtered. Group Permissions include `GROUP_CREATE`, `GROUP_UPDATE`, `GROUP_DELETE`. |
| App Group Permission | Within each group, you can set apps for read or edit privileges. These events get recorded as App Group Permissions. |
#### Select Actions
| Actions | description |
| ----------- | ----------- |
| USER_LOGIN | This event is recorded everytime a user logins. |
| USER_SIGNUP | This event is recorded everytime a new signup is made. |
| USER_INVITE | You can invite users to your account from `Manage Users` section and an event is audited everytime an invite is sent. |
| USER_INVITE_REDEEM | This event is recorded whenever an invite is redeemed. |
| APP_CREATE | This event is recorded when a user creates a new app. |
| APP_UPDATE | This event is recorded whenever actions like renaming the app, making the app public, editing shareable link, or deploying the app are made. |
| APP_VIEW | This event is logged when someone views the launched app. (public apps aren't accounted for) |
| APP_DELETE | This event is recorded whenever a user deletes an app from the dashboard. |
| APP_IMPORT | This event is recorded whenever a user imports an app. |
| APP_EXPORT | This event is recorded whenever an app is exported. |
| APP_CLONE | This event is recorded whenever a clone of the existing app is created. |
| DATA_QUERY_RUN | This event is logged whenever a data source is added, a query is created, or whenever a query is run either from the query editor or from the launched app. |
| GROUP_PERMISSION_CREATE | This event is recorded whenever a group is created. |
| GROUP_PERMISSION_UPDATE | This event is recorded whenever an app or user is added to or removed from a group, or the permissions for a group are updated. |
| GROUP_PERMISSION_DELETE | This event is recorded whenever a user group is deleted from an account. |
| APP_GROUP_PERMISSION_UPDATE | For every app added in to user group, you can set privileges like `View` or `Edit` and whenever these privileges are updated this event is recorded. By default, the permission of an app for a user group is set to `View`. |
:::info
It is mandatory to set a Data Range in `From` and `To` to filter audit logs.
:::
### Understanding information from logs
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/audit_logs/readinglogv2.png" alt="Audit logs" />
</div>
| Property | description |
| ----------- | ----------- |
| action_type | It is the type of action that was logged in this event. Refer [this](#select-actions) to know about actions. |
| created_at | Displays the date and time of a logged event. |
| id | Every event logged has a specific event id associated with it. |
| ip_address | Displays the IP address from where the event was logged. |
| metadata | Metadata includes two sub-properties - `tooljet_version` and `user_agent`. `tooljet_version` displays the version of ToolJet used for the logged event and `user_agent` contains information about the device and browser used for that event. |
| organization_id | Every organization in ToolJet has an id associated with it and is recorded when an event occurs. |
| resource_id | There are several [resources](#select-resources) and for each resource that is created, an id gets associated with it.|
| resource_name | Displays the name of the [resources](#select-resources) that were logged in the event. For example, if an app was created or deleted then it will display the name of the app. |
| resource_type | Displays the type of the [resources](#select-resources) that were logged in the event. |
| user_id | Every user account in ToolJet has an id associated with it and is recorded when an event occurs. |

131
docs/versioned_docs/version-2.5.0/Enterprise/superadmin.md Normal file
View file

@ -0,0 +1,131 @@
---
id: superadmin
title: Super Admin
---
<div className='badge badge--primary heading-badge'>Available on: Enterprise Edition</div>
A Super Admin is the user who has full access to all the Workspaces, Users, and Groups of an instance. An instance can have more than one Super Admin. A Super Admin has full control over other users' workspaces and can create users, groups, and other super admins.
The user details entered while setting up ToolJet will have Super Admin privileges.
## How is Super Admin different from Admin
| Privilege | Admin | Super Admin |
| --------- | ----- | ----------- |
| Manage Users in their workspace (Invite/Archive/Unarchive) | ✅ | ✅ |
| Manage Groups in their workspace (Create Group/Add or Delete Users from groups/ Modify Group Permissions) | ✅ | ✅ |
| Manage SSO in their workspace | ✅ | ✅ |
| Manage Workspace Variables in their workspace | ✅ | ✅ |
| [Manage Global datasources for the user group in their workspace](/docs/next/data-sources/overview#permissions) | ✅ | ✅ |
| [Access any user's personal workspace (create, edit or delete apps)](#access-any-workspace) | ❌ | ✅ |
| [Archive Admin or any user of any workspace](#archiveunarchive-users) | ❌ | ✅ |
| [Access any user's ToolJet database (create, edit or delete database)](#access-tooljet-db-in-any-workspace) | ❌ | ✅ |
| [Manage any workspace's setting (Groups/SSO/Workspace Variables)](#manage-workspace-setting-groupsssoworkspace-variables) | ❌ | ✅ |
| [Manage all users from all the workspaces in the instance](#checking-all-the-users-in-the-instance) | ❌ | ✅ |
| [Make any user Super Admin](#make-the-user-super-admin) | ❌ | ✅ |
| [Restrict creation of personal workspace of users](#restrict-creation-of-personal-workspace-of-users) | ❌ | ✅ |
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/superadmin/instance.png" alt="Super Admin: Enterprise" />
</div>
## Super Admin features
### Access any workspace
If a user is a Super Admin then they can switch to any workspace created by any user in the instance from the dropdown on the top-left of dashboard that is used to switch between workspaces.
The dropdown will list all the workspaces including workspaces created by the Super Admin or Any User.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/superadmin/workspacedrop.png" alt="Super Admin: Enterprise" />
</div>
### Create Edit or Delete apps from any user's personal workspace
Once the Super Admin accesses the workspace of any other user, they can create, edit or delete app on the workspace.
This also includes - modifying folders and importing, exporting, or cloning apps to any user's workspace.
### Archive/Unarchive Users
Super Admin can not only archive/unarchive users/admins on their workspace but also from the workspaces of any other user.
If a user is Super Admin, they just need to open the workspace in which they want to archive or unarchive a user. Then go to the **Workspace Settings** from the sidebar -> **Manage Users** -> **Archive/Unarchive** any user/admin
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/superadmin/archive.png" alt="Super Admin: Enterprise" />
</div>
### Access ToolJet DB in any workspace
Super Admins have access to the database of any user's workspace - just like Super Admins can access any application in any workspace. They have full access to modify or create any table in the ToolJet DB of any workspace.
### Manage Workspace Settings (Groups/SSO/Workspace Variables)
Super Admins have all the privileges that an Admin of a workspace have, Super Admins can:
- **✅ Manage Groups**: Creating/Deleting/Updating a Group in any workspace
- **✅ Manage SSO**: Full control over General Settings, Password login and other SSO options
- **✅ Workspace Variables**: Adding, updating or deleting workspace variables
## Instance Settings
Only Super Admins can access the Instance Settings:
- **Manage All Users**
- **Manage Instance Settings**
### Checking all the users in the instance
**Manage All Users** can be used to check all the users that are there - altogether from all the workspaces in an instance.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/superadmin/instancesettings.png" alt="Super Admin: Enterprise" />
</div>
### Archiving a user from workspace
Super Admins have the privilege to remove any user from any of the workspace they belong.
Super Admins can go to **Manage All Users** page, Under the **Workspaces** column they'll see the number of workspaces a user belongs to. Click on the **`View(n)`**, a modal will pop up that will have the list of **`n`** number the workspaces, click on the **Archive/Unarchive** button next to the workspace name to remove the user from the workspace.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/superadmin/archwork.png" alt="Super Admin: Enterprise" />
</div>
### Make the user super admin
Super Admins can make any user as Super Admin or remove any Super Admin from the **Manage All Users** in the Instance Settings page.
Click on the **Edit** button next to any user, **Enable** the **Make the user Super Admin** option, and then **Save** it.
The user will become Super Admin and the Type column will update from **`workspace`** to **`instance`**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/superadmin/makesa.png" alt="Super Admin: Enterprise" />
</div>
### Restrict creation of personal workspace of users
When a user joins a workspace, they are provided with their own personal workspace and option to create new workspaces.
Super Admins can **control** this behavior from the Manage Instance Settings page, they can **toggle off** the option to **Allow personal workspace**. Now whenever a user joins a workspace they won't be provided a personal workspace nor they will be able to create a new workspace in the instance.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/superadmin/personal.png" alt="Super Admin: Enterprise" />
</div>

39
docs/versioned_docs/version-2.5.0/Enterprise/white-label.md Normal file
View file

@ -0,0 +1,39 @@
---
id: white-label
title: White Label
---
<div className='badge badge--primary heading-badge'>Available on: Enterprise Edition</div>
White Label feature will allow you to remove the ToolJet branding from the ToolJet platform and add your own custom logo and text.
This feature allows you to rebrand the following:
- **App logo** (Logo on login screen, dashboard, and app-editor)
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/white-label/applogo.png" alt="ToolJet - Enterprise - White label" width="500"/>
</div>
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/white-label/appeditor.png" alt="ToolJet - Enterprise - White label" width="500"/>
</div>
- **Favicon**
- **Page Title** (next to Favicon)
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/enterprise/white-label/favicon.png" alt="ToolJet - Enterprise - White label" width="500" />
</div>
## Configuration
To enable white labelling, you'll need to set the below mentioned **environment variables** in the .env file:
- `WHITE_LABEL_LOGO`: URL of the logo. Preferred dimensions of the logo are: width 130px and height 26px
- `WHITE_LABEL_TEXT`: The text that you want to display as Page Title
- `WHITE_LABEL_FAVICON`: URL of the favicon. Preferred dimensions of the logo are: 16x16px or 32x32px

5
docs/versioned_docs/version-2.5.0/actions/_category_.json Normal file
View file

@ -0,0 +1,5 @@
{
"label": "Actions Reference",
"position": 7,
"collapsed": true
}

19
docs/versioned_docs/version-2.5.0/actions/close-modal.md Normal file
View file

@ -0,0 +1,19 @@
---
id: close-modal
title: Close modal
---
Use this action to close the modal that is already shown.
Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
:::info
You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/actions/closemodal/closemodal2.png" alt="ToolJet - Action reference - Close modal" width="700" />
</div>

98
docs/versioned_docs/version-2.5.0/actions/control-component.md Normal file
View file

@ -0,0 +1,98 @@
---
id: control-component
title: Control component (Component Specific Actions)
---
Control component action invokes the component specific actions. Component specific actions are the actions that are exclusive actions for a particular widget. Component specific actions can be triggered either through the event handlers or from the Run JavaScript code query.
:::info
Check out the **[live demo](https://youtu.be/JIhSH3YeM3E)** of Component specific actions demonstrated in one of our community call.
:::
## Available Component Specific Actions
| Widget | Component Specific Actions |
|--------|---------------------------|
| Button | Click, Set label, Disable, Visibility, Loading |
| Checkbox | Set checked |
| Color picker | Set color |
| Dropdown | Select option |
| File picker | Clear files |
| Kanban | Add card, Delete card, Move card, Update card data |
| Map | Set location |
| Modal | Show, Close |
| Multiselect | Select option, Deselect option, Clear selection |
| Radio button | Select option |
| Tabs | Set tab |
| Table | Set page, Select row, Deselect Row, Discard changes |
| Text | Set text, Set Visibility |
| Text Area | Set text, Clear |
| Text Input | Set text, Clear, Set Focus, Set Blur, Disable, Visibility |
:::info
Currently, Component specific actions are supported only by the above listed widgets. We are working on bringing component specific actions for the remaining widgets.
:::
## Using Component Specific Actions
### Set a value for text input widget using button's event handler
- Drag a **Text Input** and a **Button** widget onto the canvas.
- Go to the **Inspector** on the left sidebar to check the exposed variables available for the `textinput1` widget under the `components`. You'll see that the variable `value` is an empty string because the field value of the text input widget is empty right now.
<div style={{textAlign: 'center'}}>
![ToolJet - Action reference - Control Component](/img/actions/controlcomponent/inspector.png)
</div>
- Now enter some value in the text input widget and you'll see that the `value` in inspector has been updated.
<div style={{textAlign: 'center'}}>
![ToolJet - Action reference - Control Component](/img/actions/controlcomponent/updated.png)
</div>
- Now, click on the button's widget handler to open up its properties in the right sidebar and then add a event handler for **On Click** event to trigger **Control Component** action. Select `textinput1` in component dropdown, `Set text` as Action, and in `Text` field enter the text that you want to update in the field value.
<div style={{textAlign: 'center'}}>
![ToolJet - Action reference - Control Component](/img/actions/controlcomponent/button.png)
</div>
- Now when you'll click on the button you'll see that the field value of the text input widget has been updated with value that you set.
<div style={{textAlign: 'center'}}>
![ToolJet - Action reference - Control Component](/img/actions/controlcomponent/set.png)
</div>
### Clear value of text input widget using JavaScript query
- Let's clear the value that we set in the previous section, using Run JavaScript code. Create a new Run JavaScript Code query and call the component and the CSA that component provides.
**Syntax:**
```js
await components.textinput1.clear()
```
<div style={{textAlign: 'center'}}>
![ToolJet - Action reference - Control Component](/img/actions/controlcomponent/jsoption.png)
</div>
<div style={{textAlign: 'center'}}>
![ToolJet - Action reference - Control Component](/img/actions/controlcomponent/clear.png)
</div>
- Finally, hit the **save and run** query button to fire up the query, and you'll see that the field value of the text input widget has been cleared.

18
docs/versioned_docs/version-2.5.0/actions/copy-to-clipboard.md Normal file
View file

@ -0,0 +1,18 @@
---
id: copy-to-clipboard
title: Copy to clipboard
---
Use this action to copy the text to the clipboard.
Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
:::info
You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/actions/copytoclipboard/copy2.png" alt="ToolJet - Action reference - Copy to clipboard" width="700" />
</div>

42
docs/versioned_docs/version-2.5.0/actions/generate-file.md Normal file
View file

@ -0,0 +1,42 @@
---
id: generate-file
title: Generate file
---
# Generate file
This action allows you to construct files on the fly and let users download it.
Presently, the only file type supported is `CSV`.
## Options
| Option | Description |
|--------|-------------|
| Type | Type of file to be generated |
| File name | Name of the file to be generated |
| Data | Data that will be used to construct the file. Its format will depend on the file type, as specified in the following section |
| Debounce | Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300` |
### Data format for CSV
For `CSV` file type, the data field should be supplied with an array objects. ToolJet assumes that the keys of each of
these objects are the same and that they represent the column headers of the csv file.
Example:
```javascript
{{
[
{ name: 'John', email: 'john@tooljet.com' },
{ name: 'Sarah', email: 'sarah@tooljet.com' },
]
}}
```
Supplying the above snippet will generate a csv file which looks like this:
```csv
name,email
John,john@tooljet.com
Sarah,sarah@tooljet.com
```

20
docs/versioned_docs/version-2.5.0/actions/go-to-app.md Normal file
View file

@ -0,0 +1,20 @@
---
id: go-to-app
title: Go to app
---
This action allows you to open any ToolJet application when an event occurs.
Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
:::info
You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/actions/gotoapp/gotoapp2.png" alt="ToolJet - Action reference - Open webpage" width="700" />
</div>

18
docs/versioned_docs/version-2.5.0/actions/logout.md Normal file
View file

@ -0,0 +1,18 @@
---
id: logout
title: Logout
---
This action allows you to log out of the application (ToolJet).
Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
:::info
You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/actions/logout/logout2.png" alt="ToolJet - Action reference - Logout" width="700" />
</div>

18
docs/versioned_docs/version-2.5.0/actions/open-webpage.md Normal file
View file

@ -0,0 +1,18 @@
---
id: open-webpage
title: Open webpage
---
You can use this action to open a webpage(on a new tab) for any event.
Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
:::info
You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/actions/open-webpage/open2.png" alt="ToolJet - Action reference - Open webpage" width="700" />
</div>

18
docs/versioned_docs/version-2.5.0/actions/run-query.md Normal file
View file

@ -0,0 +1,18 @@
---
id: run-query
title: Run Query
---
This action allows you to fire queries when an event occurs.
Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
:::info
You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/actions/run-query/run-query2.png" alt="ToolJet - Action reference - Run Query" width="700" />
</div>

59
docs/versioned_docs/version-2.5.0/actions/set-localstorage.md Normal file
View file

@ -0,0 +1,59 @@
---
id: set-localstorage
title: Set localStorage
---
# Set localStorage
This action allows you to specify a `key` and its corresponding `value` to be stored in localStorage.
## Example: App that stores a name in localStorage and displays it on reload
1. Add an input field, button and a text as shown
<div style={{textAlign: 'center'}}>
![ToolJet - Action reference -Set local storage sample app](/img/actions/localstorage/1.png)
</div>
2. Select the button and add a `Set localStorage` action with `key` set to `name` and value pointing at the value of the text field
<div style={{textAlign: 'center'}}>
![ToolJet - Action reference -Set local storage sample app](/img/actions/localstorage/2.png)
</div>
3. Select the text label we've added and set its value to the name item from localStorage.
:::info
Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
:::
<div style={{textAlign: 'center'}}>
![ToolJet - Action reference -Set local storage sample app](/img/actions/localstorage/debounce.png)
</div>
4. Now save the application, this is important as we're about to reload the page.
5. Type in anything you wish on the input box and click on the button
<div style={{textAlign: 'center'}}>
![ToolJet - Action reference -Set local storage sample app](/img/actions/localstorage/5.png)
</div>
6. Reload the page, you'll see that the value stored in local storage is persisted and it is displayed on screen!
<div style={{textAlign: 'center'}}>
![ToolJet - Action reference -Set local storage sample app](/img/actions/localstorage/6.png)
</div>

20
docs/versioned_docs/version-2.5.0/actions/set-page-var.md Normal file
View file

@ -0,0 +1,20 @@
---
id: set-page-variable
title: Set page variable
---
Page variables can only be accessed within a page on which they are created, unlike normal variables that can be accessed throughout the application.
Use this action to create a variable and assign a `value` to it in the [Multipage Apps](/docs/tutorial/pages).
Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
:::info
You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/actions/page/setpagevar2.png" alt="ToolJet - Action reference - Switch page" width="600"/>
</div>

24
docs/versioned_docs/version-2.5.0/actions/set-table-page.md Normal file
View file

@ -0,0 +1,24 @@
---
id: set-table-page
title: Set Table Page
---
Use this action to change the page index in the table widget.
## Options
| Option | Description |
|--------|-------------|
| Table | Select table from the dropdown |
| Page Index | Numerical value for the page index. ex: `{{2}}` |
| Debounce | Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300` |
:::info
You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/actions/settablepage/page2.png" alt="ToolJet - Action reference - Open webpage" width="700" />
</div>

24
docs/versioned_docs/version-2.5.0/actions/set-variable.md Normal file
View file

@ -0,0 +1,24 @@
---
id: set-variable
title: Set variable
---
This action allows you to create a variable and assign a `value` to it.
## Options
| Option | Description |
|--------|-------------|
| Key | Name(String) of the variable through which you can access the value |
| Value | A value can be a string, number, boolean expression, array, or object |
| Debounce | Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300` |
:::info
You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/actions/setvar/setvar2.png" alt="ToolJet - Action reference -Set variable" width="700" />
</div>

23
docs/versioned_docs/version-2.5.0/actions/show-alert.md Normal file
View file

@ -0,0 +1,23 @@
---
id: show-alert
title: Show alert
---
This action allows you to display an alert message.
You can set a custom **message** for the alert and choose a particular alert type.
There are 4 types of alert messages - **Info**, **Success**, **Warning**, and **Error**.
Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
:::info
You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/actions/show-alert/alert2.png" alt="ToolJet - Action reference - Show Alert" width="700" />
</div>

18
docs/versioned_docs/version-2.5.0/actions/show-modal.md Normal file
View file

@ -0,0 +1,18 @@
---
id: show-modal
title: Show modal
---
Use this action to show the modal for an event.
Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
:::info
You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/actions/showmodal/showmodal2.png" alt="ToolJet - Action reference - Show modal" width="700" />
</div>

18
docs/versioned_docs/version-2.5.0/actions/switch-page.md Normal file
View file

@ -0,0 +1,18 @@
---
id: switch-page
title: Switch Page
---
Use this action with different events to switch to a different page in the [Multipage App](/docs/tutorial/pages).
Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
:::info
You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/actions/page/switchpage2.png" alt="ToolJet - Action reference - Switch page" width="700"/>
</div>

18
docs/versioned_docs/version-2.5.0/actions/unset-page-var.md Normal file
View file

@ -0,0 +1,18 @@
---
id: unset-page-variable
title: Unset page variable
---
Use this action to clear the variable that was created using the set page variable action.
Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
:::info
You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/actions/page/unsetpagevar2.png" alt="ToolJet - Action reference - Switch page" width="600"/>
</div>

23
docs/versioned_docs/version-2.5.0/actions/unset-variable.md Normal file
View file

@ -0,0 +1,23 @@
---
id: unset-variable
title: Unset variable
---
This action allows you to remove the variable variable that was created using the set variable action.
## Options
| Option | Description |
|--------|-------------|
| Key | Name(String) of the variable through which you can access the value |
| Debounce | Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300` |
:::info
You can also trigger actions from the **JavaScript code**. Check it out [here](/docs/how-to/run-actions-from-runjs).
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/actions/unsetvar/unsetvar2.png" alt="ToolJet - Action reference -Unset variable" width="700" />
</div>

55
docs/versioned_docs/version-2.5.0/app-builder/canvas.md Normal file
View file

@ -0,0 +1,55 @@
---
id: canvas
title: Canvas
---
Canvas is the center area of the ToolJet app builder where the application is built. You arrange the **components** by dragging them from the Components library(right-sidebar).
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/canvas.png" alt="App Builder: Canvas"/>
</div>
### Arrange Components
All the components are fully interactive in editor mode - to prevent interaction you can **click and hold** the **[Component Handle](docs/app-builder/components-library)** to change component's position.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/arrange.png" alt="App Builder: Canvas"/>
</div>
### Resize Components
Components on the canvas can be resized from the edges.
You can precisely set the position of selected components using keyboard arrow keys after clicking the component handle.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/resize.gif" alt="App Builder: Canvas"/>
</div>
### Group Components
ToolJet comes with flexible components to group other components together, such as **Container** and **Form**. When you drag and drop components in containers/forms they create a group of nested components. All components can be nested in this way.
### Hide or Disable Components
Hide or Disable a component by setting its **Visibility** or **Disabled** property to `true`. Click on the component handle to open **config inspector** on right side. These values can also evaluate to true based on a truthy value. For example, you can use the property of one component to toggle the Visibility property of another component dynamically, you just need to write a conditional statement.
For example: We want to disable a button when a checkbox is checked so we can simple use `{{components.checkbox1.value}}` in **Disable** property of the button. `{{components.checkbox1.value}}` evaluates to `true` when the checkbox is checked, and false when unchecked.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/hide.gif" alt="App Builder: Canvas"/>
</div>
### Clone Components
You can clone existing components on the canvas by **cmd/ctrl + d**. Check other **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)**

55
docs/versioned_docs/version-2.5.0/app-builder/left-sidebar.md Normal file
View file

@ -0,0 +1,55 @@
---
id: left-sidebar
title: Left-sidebar
---
Left-sidebar has the following options:
- **[Pages](#pages)**
- **[Inspector](#inspector)**
- **[Debugger](#debugger)**
- **[Theme switch](#theme-switch)**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/newside.png" alt="App Builder: Left-sidebar"/>
</div>
## Pages
Pages allows you to have multiple pages in a single application, making your ToolJet applications more robust and user-friendly.
Check the detailed documentation for **[Pages](/docs/tutorial/pages)**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/pages2.png" alt="App Builder: Left-sidebar"/>
</div>
## Inspector
The Inspector can be used to inspect the data of the **queries**, properties and values of the **components** that are there on the canvas, ToolJet's global variables and the variables that have been set by the user.
Check the detailed guide on **[using Inspector](/docs/how-to/use-inspector)**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/inspector2.png" alt="App Builder: Left-sidebar"/>
</div>
## Debugger
The debugger captures errors that happens while running the queries. For example, when a database query fails due to the unavailability of a database or when a REST API query fails due to an incorrect URL, the errors will be displayed on the debugger. The debugger also displays relevant data related to the error along with the error message.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/newdebug.png" alt="App Builder: Left-sidebar"/>
</div>
## Theme switch
Switch ToolJet into light or dark mode from this button.

20
docs/versioned_docs/version-2.5.0/app-builder/overview.md Normal file
View file

@ -0,0 +1,20 @@
---
id: overview
title: Overview
---
# App-Builder: Overview
ToolJet's App Builder allows you to build applications. ToolJet's app builder has the following major components:
- **[Toolbar](/docs/app-builder/toolbar)**: configure app settings
- **[Canvas](/docs/app-builder/canvas)**: Arrange the components to build the interface of app
- **[Left-sidebar](/docs/app-builder/left-sidebar)**: Add **[pages](/docs/tutorial/pages)**, **[inspect](/docs/how-to/use-inspector)** the components, queries or variables, and **[debug](#debugger)** the errors.
- **[Components library](/docs/app-builder/components-library)**(right sidebar): Drag any component or modify the property or styling
- **[Query Panel](/docs/app-builder/query-panel)**: Create, edit or manage the queries from the **[datasources](/docs/data-sources/overview)**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/builder.png" alt="App Builder: Overview"/>
</div>

188
docs/versioned_docs/version-2.5.0/app-builder/query-panel.md Normal file
View file

@ -0,0 +1,188 @@
---
id: query-panel
title: Query Panel
---
The Query Panel is present at the bottom of the app-builder, this is where you create queries to interact with connected **local** and **global** datasources. You can perform API requests, query **[databases](/docs/data-sources/overview)**, or **[transform](/docs/tutorial/transformations)** or manipulate data with **[JavaScript](/docs/data-sources/run-js)** & **[Python](/docs/data-sources/run-py)**.
The Query Panel has two sections:
- **[Query Manager](#query-manager)** on the right that includes a list of all the created queries
- **[Query Editor](#query-editor)** is used to configure the selected query
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui/querypanel.png" alt="App Builder: Component library- right sidebar"/>
</div>
## Query Manager
Query Manager will list all the queries that has been created in the application. Query Manager is used to:
### Search
On the top of the query manager is search box that can be used to search for a specific query.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/search.png" alt="App Builder: Component library- right sidebar"/>
</div>
### Add
Add button is used to add more queries in the application. When Add button is clicked, the Query Editor will show you a list of options for creating a query from: **Rest API**, connected **[datasources](/docs/data-sources/overview)**, **[ToolJet Database](/docs/tooljet-database)**, **[JavaScript Code](/docs/data-sources/run-js)**, **[Python Code](/docs/data-sources/run-py)** or Add a new datasource.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui/add.png" alt="App Builder: Component library- right sidebar"/>
</div>
### Delete
Delete button will delete the selected query, the button will only show up when you hover over the query name.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/delete.png" alt="App Builder: Component library- right sidebar"/>
</div>
### Edit
Edit button is used edit the name of the selected query, the button will only show up when you hover over the query name.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/edit.png" alt="App Builder: Component library- right sidebar"/>
</div>
## Query Editor
Query editor used to configure the query parameters, preview or transform the data return by the query.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/editor.png" alt="App Builder: Component library- right sidebar"/>
</div>
### Topbar
On the top of the query panel there are a few options:
#### Query Name editor
Edit the name of the query by clicking on the edit button next to the default query name.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/nameedit.png" alt="App Builder: Component library- right sidebar"/>
</div>
#### Preview
Preview gives you a quick look at the data returned by the query without triggering the query in the app.
The Preview of data is returned in two different formats:
**Raw**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/raw.png" alt="App Builder: Component library- right sidebar"/>
</div>
**JSON**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/json.png" alt="App Builder: Component library- right sidebar"/>
</div>
#### Save
Save is used to save the changes whenever a change is made in query.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/save.png" alt="App Builder: Component library- right sidebar"/>
</div>
#### Run
Run is used to trigger the query, running the query will interact with the application unlike `Preview`.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/run.png" alt="App Builder: Component library- right sidebar"/>
</div>
### Query Parameters
Query Parameters are the values required for the query to return a response from the server. Parameters include **endpoints**, **methods**, or **operations**. Query Parameters are different for each datasource.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/params.png" alt="App Builder: Component library- right sidebar"/>
</div>
### Transformation
Transformations can be enabled on queries to transform the query results. ToolJet allows you to transform the query results using two programming languages JavaScript & Python. Check the detailed documentation on **[Transformations](/docs/tutorial/transformations)**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/transform.png" alt="App Builder: Component library- right sidebar"/>
</div>
### Advanced options
#### Run this query on application load?
Enabling this option will fire the query every time the app is loaded.
#### Request confirmation before running the query?
Enabling this option show a confirmation modal to confirm `Yes` or `No` if you want to fire that query.
#### Run this query on application load?
Enabling this option show a success toast notification when the query is successfully triggered.
#### Event Handlers
Event Handler are used to add some action when a particular event happens. You can add event handlers to the query for the following events:
- **Query Success**
- **Query Failure**
:::info
Learn more about [Event Handlers and Actions](/docs/widgets/overview#component-event-handlers).
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/advanced.png" alt="App Builder: Component library- right sidebar"/>
</div>
### Change Datasource
If more than one datasources are connected of same type then you can change the datasource of the query from this dropdown.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui/switch.png" alt="App Builder: Component library- right sidebar"/>
</div>

29
docs/versioned_docs/version-2.5.0/app-builder/right-sidebar.md Normal file
View file

@ -0,0 +1,29 @@
---
id: components-library
title: Components Library
---
The **Components Library** on the right sidebar contains all of the available components. Use this to drag-and-drop a component from the library to the canvas. It organizes components into sections and you can enter a search term to quickly find a component you need.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/rightsidebar/rightsidebar.png" alt="App Builder: Component library- right sidebar"/>
</div>
:::tip
Check the **[Components Catalog](/docs/widgets/overview)** here to know more about specific component.
:::
## Component Config Inspector
The Component Config Inspector is also called as component inspector. It contains all the available settings for the selected component and is where you **set values**, **update component names**, and **create event handlers**. The Compoenent Inspector organizes settings into different sections, such as **Property** and **Styles**.
To open the Component Config Inspector, click on the component handle that is present on the top of the component including **⚙️ + Component Name** and the component inspector will open up on the right side:
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/rightsidebar/component-inspector.gif" alt="App Builder: Component library- right sidebar"/>
</div>

133
docs/versioned_docs/version-2.5.0/app-builder/toolbar.md Normal file
View file

@ -0,0 +1,133 @@
---
id: toolbar
title: Toolbar
---
Toolbar is present at the top of the app-builder, and is used to configure the app settings.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/toolbar.png" alt="App Builder: Toolbar"/>
</div>
### App name
App name can be edited from the left side of the toolbar next to the ToolJet logo.
When a new app is created, by default its name is set to **Untitled app**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/name.png" alt="App Builder: Toolbar"/>
</div>
### Global Settings
To configure the app's global settings, click on the kebab menu(three vertical dots) on the left of the app name. Global settings include:
- **Hide heaeder for launched apps**: Toggle this on to the hide the tooljet's header when the applications are launched
- **Maintenance mode**: Toggle this on to put the application in maintenance mode. When in **maintenance mode**, on launching the app, the user will get an error message that **the app is under maintenance**.
- **Max width of canvas**: Modify the width of the canvas in **px** or **%**. The default width is 1292 px.
- **Max height of canvas**: Modify the width of the canvas in **px** or **%**. The default height is 2400 px and currently it is the maximum height limit.
- **Background color of canvas**: Enter the hex color code or choose a color from the picker to change the background color of the canvas. You can also click on the **Fx** to programmatically set the value.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/newglobalset.png" alt="App Builder: Toolbar"/>
</div>
### Desktop or Mobile layout
Switch the canvas mode in Mobile or Desktop layout from the toolbar.
#### Adding existing component to mobile layout
Click on the component handle to open component config inspector on the right side. Scroll down to the **Layout** section and enable Mobile Layout. The width of the widget will be adjusted to fit the Mobile Layout.
#### Adding a new component to mobile layout
Switch the layout to mobile by clicking the button on the toolbar. Drag and drop a component to the canvas. This widget will not be shown on desktop layout unless **Show on desktop** is enabled from the component config inspector.
:::info
Width of the component will be automatically adjusted to fit the screen while viewing the application in app viewer.
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/view.png" alt="App Builder: Toolbar"/>
</div>
### Undo or Redo
Use the undo or redo buttons from the toolbar to undo or redo any change on the canvas.
You can also **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)** to perform such actions.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/undo.png" alt="App Builder: Toolbar"/>
</div>
### Version Manager
Create or Remove Versions of the applications from the Version Manager. You can also edit the version name from the edit button.
When many developers are working on an app, **Versioning** allows them to save their own version of the app. This also prevents developers from overwriting the other developer's work.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/version.png" alt="App Builder: Toolbar"/>
</div>
### Comments
Comment anywhere on the canvas and collaborate with other users in the workspace. Click on the comments button to enable it and then drop comment anywhere on the canvas.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/comments.png" alt="App Builder: Toolbar"/>
</div>
### Share
Share your applications with a unique URL generated automatically or edit the URL slug to personalize it.
- When **Make the application public** is off and URL is shared then the users will have to login to ToolJet to use the application. Toggle on the option then anyone on the internet will be able to access the application without logging in to ToolJet.
- ToolJet generates the **Embedded link** which can be used to embed application on the webpages.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/share.png" alt="App Builder: Toolbar"/>
</div>
### Preview
Clicking on **Preview** button will open up the currently opened version of the app in the new tab. This is really handy when the app developer wants to immediately check the app preview in production.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/preview.png" alt="App Builder: Toolbar"/>
</div>
### Release
Release the app to publish the current version of the app and push the changes into the production.
:::caution
ToolJet will block editing of the Released version of an app and will display a prompt to create a new version to make the changes. This is to prevent accidentally pushing an unfinished app to the live version.
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/release.png" alt="App Builder: Toolbar"/>
</div>

5
docs/versioned_docs/version-2.5.0/contributing-guide/_category_.json Normal file
View file

@ -0,0 +1,5 @@
{
"label": "Contributing Guide",
"position": 11,
"collapsed": true
}

81
docs/versioned_docs/version-2.5.0/contributing-guide/code-of-conduct.md Normal file
View file

@ -0,0 +1,81 @@
---
id: code-of-conduct
title: Contributor Code of Conduct
---
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to make participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies within all project spaces, and it also applies when
an individual is representing the project or its community in public spaces.
Examples of representing a project or community include using an official
project e-mail address, posting via an official social media account, or acting
as an appointed representative at an online or offline event. Representation of
a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at hello@tooljet.com . All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq

69
docs/versioned_docs/version-2.5.0/contributing-guide/l10n.md Normal file
View file

@ -0,0 +1,69 @@
---
id: l10n
title: Localization
---
Welcome to ToolJet Localization Guide. The goal of the Localization is to make ToolJet easy to use and close to all countries, languages, and general cultural groups. On this page, you will find instructions on how to contribute to ToolJet through Localization and make a more friendly ToolJet for all regions.
## Adding Translations
- For adding the translations of your language in ToolJet, you'll need to create a new **languagecode.json** file which will include all the translations for the keywords in your language, and then list the language in the **languages.json** file for the language to be listed in the dashboard of the ToolJet.
- Go to the **frontend** directory which is at the root of ToolJet, then go to the **assets** and inside assets, you'll find the **translations** directory. You have created a new json file with the **language code** as the file name. The language code should follow [ISO 639-1 Code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes).
```
\frontend
|--\assets
|--\--\translations
|--\--\--\languages.json
|--\--\--\en.json
```
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/l10n/files.png" alt="files" />
</div>
- Let's localize ToolJet in the **French** language. Create a new json file inside the translations directory and name it **fr.json**. `fr` is the language code for French.
- After creating the new file, open the **en.json** file and copy all the contents of the file to the newly created **fr.json**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/l10n/en.png" alt="files" />
</div>
- Once copied, you can now start adding the translations for the keywords in the french language.
- After completing the translation, all you need to do is list the language in **languages.json** file. You'll need to add an object with three key-value pairs. **lang** - the name of the language that you added, **code** - the language code, and the **nativeLang** - name of language in the native.
```js
{
"languageList":
[
{ "lang": "English", "code": "en", "nativeLang": "English" },
{ "lang": "French", "code": "fr", "nativeLang": "Français" }
]
}
```
<!--
- Once you list the language in the `language.json` file, you'll be able to see it in the **dashboard**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/l10n/list.png" alt="files" />
</div>
:::info
ToolJet will automatically detect your browser's default language and will switch to it. If your browser's default language translation is not available in ToolJet then it will set English as the default language.
:::
-->
:::note
Feel free to reach us on [Slack](https://tooljet.com/slack) for any help related to Localization.
:::

384
docs/versioned_docs/version-2.5.0/contributing-guide/marketplace/creating-a-plugin.md Normal file
View file

@ -0,0 +1,384 @@
---
id: creating-a-plugin
title: 'Marketplace: Creating plugins'
---
# Marketplace: Creating plugins
## What are plugins
ToolJet’s development has centered on extensibility, allowing developers to utilize plugins that expand their capabilities. Currently, these plugins are limited to connectors, including data source connectors like PostgreSQL, MySQL, Twilio, Stripe, and more. Using JavaScript/TypeScript, developers can develop plugins to enhance ToolJet's functionality and publish these plugins on the ToolJet Marketplace.
This guide will provide step-by-step instructions for creating ToolJet plugins using the `tooljet` CLI.
The `tooljet` CLI is a user-friendly command-line tool designed to simplify the plugin building process. As part of this guide, we will create a basic plugin for GitHub.
## Step 1: Creating a New Plugin - GitHub Plugin
The first step is to bootstrap a new plugin for the ToolJet marketplace. The plugin will authenticate users with a GitHub Personal Access Token and include fundamental operations such as fetching user details, repositories, issues, and pull requests.
If you have completed the **[Setup](/docs/contributing-guide/marketplace/marketplace-setup)** guide, you can begin developing the plugin using the `tooljet` CLI. To initiate plugin development, enter the following command in the terminal:
```bash
# create a new plugin
tooljet plugin create github
```
When prompted, enter the **plugin name** and select the **plugin type**, which is api in this case. Additionally, select **yes** when prompted to create a new plugin for the marketplace.
If your plugin is hosted on GitHub, please provide the **repository URL** when prompted. Otherwise, leave it blank.
When a plugin is created using the `ToolJet` CLI, an object is added to the **plugins.json** file in the **`ToolJet/server/src/assets/marketplace/`** directory. This object includes metadata about the plugin, such as its name, description, version, author, and other relevant details.
The plugins.json file serves as a registry of all available plugins for use in ToolJet. When the ToolJet server starts up, it reads the plugins.json file and loads all plugins that are listed in it.
:::info
It is important to note that the plugins.json file should not be manually edited, as it is automatically generated by the `ToolJet CLI`. Making changes to this file can result in issues with the proper functioning of the plugins in the system.
:::
All marketplace plugins are stored in the **`/marketplace`** directory of the ToolJet repository. You can find the GitHub plugin **[here](https://github.com/ToolJet/ToolJet/tree/develop/marketplace/plugins/github)**.
The structure of a typical ToolJet plugin directory appears as follows:
```bash
github/
package.json
lib/
icon.svg
index.ts
operations.json
manifest.json
```
In this structure, the file **manifest.json** contains information about the plugin's name, description, and other details. The file **operations.json** contains metadata about all the operations that the plugin supports. The main file, **index.ts**, creates a QueryService for the plugin, which handles queries, connection testing, caching, and more. The **icon.svg** file serves as the plugin's icon, while **package.json** is automatically generated by the CLI.
:::info
**Why do we need a manifest.json file or a operations.json file?**
The manifest.json file is used by a React component to create a dynamic UI for connection forms. It defines the schema of an API or data source, including its name, type, and any exposed variables, as well as options for authentication and other customizable properties. The properties section specifies the required fields and their types for connecting to the API or data source. By reading the manifest.json file, the React component generates the necessary UI components based on the schema, such as text inputs, dropdowns, checkboxes, and other elements.
On the other hand, the operations.json file contains a schema definition for a specific data source, like Github. It describes the available operations and their parameters that can be used to query the data source. A React component uses this schema to create queries in ToolJet applications, generating a UI that allows users to select the desired operation and provide the required parameters. The component uses the properties defined in the operations.json file to create various UI elements, such as dropdowns and input fields, and handle user interactions to create the final query. Once the user fills in the required parameters, the component uses them to generate a query that can be executed against the data source and return the results to the user.
Overall, *manifest.json* and *operations.json* files are essential for creating dynamic UI components in ToolJet applications. They define the schema for data sources and available operations, which React components then use to generate user-friendly UI elements. By utilizing these files, ToolJet enables users to easily connect to various APIs and data sources, perform queries, and retrieve data in an intuitive and efficient manner.
:::
## Step 2: Defining the manifest.json file
To construct the connection form, it's important to include the necessary options in the manifest.json file. Here's an example of how to do it:
```json
"properties": {
"credentials": {
"label": "Authentication",
"key": "auth_type",
"type": "dropdown-component-flip",
"description": "A single select dropdown to choose credentials",
"list": [
{
"value": "personal_access_token",
"name": "Use Personal Access Token"
}
]
},
"personal_access_token": {
"token": {
"label": "Token",
"key": "personal_token",
"type": "password",
"description": "Enter your personal access token",
"hint": "You can generate a personal access token from your Github account settings."
}
}
}
```
This manifest.json file includes information about authentication options, specifically a dropdown to choose a type of credentials and a field to enter a personal access token. The label, key, type, description, and hint properties are used to define the specific fields and their types required for connecting to the API or data source.
In this particular code, there are two main properties defined: **`credentials`** and **`personal_access_token`**.
The **`credentials`** property specifies the authentication method to be used. It contains several keys:
- **`label`**: a user-friendly label for the authentication method, set to "Authentication"
- **`key`**: a unique identifier for the authentication method, set to "auth_type"
- **`type`**: the type of the authentication method, set to "dropdown-component-flip"
- **`description`**: a description of the authentication method, set to "A single select dropdown to choose credentials"
- **`list`**: an array of objects representing the different authentication methods available. In this case, there is only one method available: a personal access token. The `value` key in the object is set to "personal_access_token" and the `name` key is set to "Use Personal Access Token".
The **`personal_access_token`** property specifies the details of the personal access token authentication method. It contains a `token` key, which specifies the actual personal access token to be used. The `token` key contains several keys:
- **`label`**: a user-friendly label for the personal access token, set to "Token"
- **`key`**: a unique identifier for the personal access token, set to "personal_token"
- **`type`**: the type of the personal access token, set to "password"
- **`description`**: a description of the personal access token, set to "Enter your personal access token"
- **`hint`**: a hint for the personal access token, set to "You can generate a personal access token from your Github account settings."
The available `type` options are:
However, based on the code you provided, the available **`type`** options are:
- **`password`**: used to input a secret value, such as a password or an access token.
- **`dropdown-component-flip`**: used to create a dropdown menu that flips its position relative to the component that triggers it.
- **`text`**: used to input a single line of text.
- **`textarea`**: used to input multiple lines of text.
- **`toggle`**: used to create a simple on/off switch.
- **`react-component-headers`**: used to display headers for React components.
- **`codehinter`**: is a specialized input field used for entering code and has additional functionality, such as resolving JavaScript code within double curly braces`{{}}`.
:::tip
The **manifest.json** file is utilized by the connection modal component, which appears to prompt users to enter their datasource credentials. Meanwhile, the **operations.json** file is used by the query manager when users generate a specific query for a connected datasource. **Both files utilize a similar schema**.
:::
## Step 3: Defining the operations.json file
```json
"properties": {
"operation": {
"label": "Operation",
"key": "operation",
"type": "dropdown-component-flip",
"description": "Single select dropdown for operation",
"list": [
{
"value": "get_user_info",
"name": "Get user info"
},
{
"value": "get_repo",
"name": "Get repository"
},
{
"value": "get_repo_issues",
"name": "Get repository issues"
},
{
"value": "get_repo_pull_requests",
"name": "Get repository pull requests"
}
]
},
"get_user_info": {
"username": {
"label": "Username",
"key": "username",
"type": "codehinter",
"lineNumbers": false,
"description": "Enter username",
"width": "320px",
"height": "36px",
"className": "codehinter-plugins",
"placeholder": "Enter username"
}
},
"get_repo": {
"owner": {
"label": "Owner",
"key": "owner",
"type": "codehinter",
"lineNumbers": false,
"description": "Enter owner name",
"width": "320px",
"height": "36px",
"className": "codehinter-plugins",
"placeholder": "developer"
},
"repo": {
"label": "Repository",
"key": "repo",
"type": "codehinter",
"lineNumbers": false,
"description": "Enter repository name",
"width": "320px",
"height": "36px",
"className": "codehinter-plugins",
"placeholder": "tooljet"
}
},
"get_repo_issues": {
"owner": {
"label": "Owner",
"key": "owner",
"type": "codehinter",
"lineNumbers": false,
"description": "Enter owner name",
"width": "320px",
"height": "36px",
"className": "codehinter-plugins",
"placeholder": "developer"
},
"repo": {
"label": "Repository",
"key": "repo",
"type": "codehinter",
"lineNumbers": false,
"description": "Enter repository name",
"width": "320px",
"height": "36px",
"className": "codehinter-plugins",
"placeholder": "tooljet"
},
"state": {
"label": "State",
"key": "state",
"className": "codehinter-plugins col-4",
"type": "dropdown",
"description": "Single select dropdown for choosing state",
"list": [
{
"value": "open",
"name": "Open"
},
{
"value": "closed",
"name": "Closed"
},
{
"value": "all",
"name": "All"
}
]
}
},
"get_repo_pull_requests": {
"owner": {
"label": "Owner",
"key": "owner",
"type": "codehinter",
"lineNumbers": false,
"description": "Enter owner name",
"width": "320px",
"height": "36px",
"className": "codehinter-plugins",
"placeholder": "developer"
},
"repo": {
"label": "Repository",
"key": "repo",
"type": "codehinter",
"lineNumbers": false,
"description": "Enter repository name",
"width": "320px",
"height": "36px",
"className": "codehinter-plugins",
"placeholder": "tooljet"
},
"state": {
"label": "State",
"key": "state",
"type": "dropdown",
"className": "codehinter-plugins col-4",
"description": "Single select dropdown for choosing state",
"list": [
{
"value": "open",
"name": "Open"
},
{
"value": "closed",
"name": "Closed"
},
{
"value": "all",
"name": "All"
}
]
}
}
}
```
The operations.json file specifies the available operations that can be executed on the data source. It provides details about the operation type, required fields to execute the operation, and the data type of each field. The label, key, type, description, and hint properties are used to define the specific fields and their types required to establish a connection with the API or data source.
## Step 4: Add the npm package of Gitub to the plugin dependencies
- Change directory to the plugin directory where the npm package needs to be installed and then install the package
```bash
# change directory to the plugin directory and install the npm package
npm i octokit --workspace=@tooljet-marketplace/github
```
:::info
Steps to install npm package to a plugin
```bash
npm i <npm-package-name> --workspace=<plugin-name-in-package-json>
```
The command `npm i <npm-package-name> --workspace=<plugin-name-in-package-json>` is used to install a specific npm package into a particular workspace of a multi-package repository.
The *--workspace* flag is used to specify the workspace where the package should be installed. In this case, we are installing the package in the *@tooljet-marketplace/github* workspace.
:::
## Step 5: Implement the query execution logic in index.ts
In index.ts, the query execution logic needs to be implemented for the Github plugin's QueryService. The QueryService is responsible for handling the process of running queries and receives information about the data source, including credentials, configurations, and query parameters.
For the Github data source, the sourceOptions will contain the necessary authentication credentials, like the personal access token, while the queryOptions will include the configurations and parameters specific to the query, like obtaining a list of repositories for a particular user.
Using this information, the QueryService will create and execute API requests against the Github API. The resulting data will be returned to the caller for further processing as needed.
Create a new file **query_operations.ts** in the **plugins/github/src** directory and add the following code to it.
```typescript
import { Octokit } from 'octokit'
import { QueryOptions } from './types'
export async function getUserInfo(octokit: Octokit, options: QueryOptions): Promise<object> {
const { data } = await octokit.request(
'GET /users/{username}',
{
username: options.username
}
);
return data;
}
export async function getRepo(octokit: Octokit, options: QueryOptions): Promise<object> {
const { data } = await octokit.request(
'GET /repos/{owner}/{repo}',
{
owner: options.owner,
repo: options.repo
}
);
return data;
}
export async function getRepoIssues(octokit: Octokit, options: QueryOptions): Promise<object> {
const { data } = await octokit.request(
'GET /repos/{owner}/{repo}/issues',
{
owner: options.owner,
repo: options.repo,
state: options.state || 'all'
}
);
return data;
}
export async function getRepoPullRequests(octokit: Octokit, options: QueryOptions): Promise<object> {
const { data } = await octokit.request(
'GET /repos/{owner}/{repo}/pulls',
{
owner: options.owner,
repo: options.repo,
state: options.state || 'all'
}
);
return data;
}
```
The query_operations.ts file comprises functions that will execute the queries and will be called by the QueryService in index.ts.
The GitHub class has three methods:
- **run**: This method executes a query and is invoked by passing sourceOptions and queryOptions as input, representing the source metadata and query configuration, respectively. The run method utilizes the octokit library to send API requests to the GitHub API and returns the query result in a QueryResult object.
- **testConnection**: When adding a new data source to a ToolJet application, the connection can be tested. The testConnection method is used to test the connection, and it takes in sourceOptions as input, which represents the source metadata. The method tests the connection by trying to fetch the authenticated user and returns a ConnectionTestResult object indicating whether the connection was successful.
:::note
Not all data sources may support testing connections. If it's not applicable for your data source, you can disable the test connection feature by adding "customTesting": true to your plugin's manifest.json.
:::
- **getConnection**: This method is a helper function that returns an authenticated octokit client, which is utilized to send requests to the GitHub API. It takes in sourceOptions as input, representing the source metadata, and returns an authenticated octokit client.
## Removing a plugin
To remove a plugin from the marketplace, you can simply remove the object entry of the plugin from the **plugins.json**(`ToolJet/server/src/assets/marketplace/plugins.json`) and then re-run the build commands.
## Publish a plugin
To release a plugin, submit a pull request on ToolJet's GitHub Repository after creating it. The ToolJet team will review the pull request, and if approved, the plugin will be included and published in the next release.

65
docs/versioned_docs/version-2.5.0/contributing-guide/marketplace/marketplace-setup.md Normal file
View file

@ -0,0 +1,65 @@
---
id: marketplace-setup
title: 'Marketplace: Development Setup'
---
The Marketplace offers custom plugins that can be installed in your ToolJet instance. This guide aims to assist you in creating a new plugin for the ToolJet marketplace.
## Requirements
- [Node.js](https://nodejs.org/en/download/) **(v18.3.0)**
- [npm](https://www.npmjs.com/get-npm) **(v8.11.0)**
## Getting started
### Step 1. Setup ToolJet locally
To obtain the ToolJet repository via git, use the command:
```bash
git clone https://github.com/ToolJet/ToolJet.git
```
Next, refer to the appropriate guide for your development environment to follow the Setup instructions:
- **[MacOS](/docs/contributing-guide/setup/macos)**
- **[Docker](/docs/contributing-guide/setup/docker)**
- **[Ubuntu](/docs/contributing-guide/setup/ubuntu)**
### Step 2. Enabling the marketplace for your instance
To enable the marketplace for your ToolJet instance, you need to specify the following environment variables in your **`.env`** file:
#### Marketplace feature enable
Use this environment variable to enable/disable the feature that allows users to use the [marketplace](/docs/marketplace).
| variable | value |
| -------------------------- | ----------------- |
| ENABLE_MARKETPLACE_FEATURE | `true` or `false` |
#### Enable Marketplace plugin developement mode
The use of this environment variable facilitates plugin development by enabling automatic builds whenever package changes occur, thus simplifying the development process. Moreover, it also incorporates a reload button that retrieves all the recent local modifications from the file system for installed plugins, making it a valuable feature for improving the overall development experience.
| variable | value |
| -------------------------- | ----------------- |
| ENABLE_MARKETPLACE_DEV_MODE | `true` or `false` |
Please note that the marketplace is not enabled by default. After updating the variable, restart your ToolJet instance.
For information on running ToolJet on your local machine, please refer to the instructions provided **[here](/docs/category/contributing-guide)**. You can access the marketplace by navigating to the **'/integrations'** route.
### Step 3: Installation of tooljet-cli
In order to manage plugins for the ToolJet marketplace, including creating, updating, and deleting, you will need to utilize **[tooljet-cli](https://www.npmjs.com/package/@tooljet/cli)**. This can be installed via npm by entering the following command:
```bash
npm install -g tooljet-cli
# Ensure the installation was successful
tooljet --version
```
Having completed the environment setup for Marketplace Developer mode, we can proceed to the next section and commence with [developing the first plugin](/docs/contributing-guide/marketplace/creating-a-plugin).

5
docs/versioned_docs/version-2.5.0/contributing-guide/setup/_category_.json Normal file
View file

@ -0,0 +1,5 @@
{
"label": "Setup",
"position": 1,
"collapsed": true
}

25
docs/versioned_docs/version-2.5.0/contributing-guide/setup/architecture.md Normal file
View file

@ -0,0 +1,25 @@
---
id: architecture
title: Architecture
---
# Introduction
ToolJet has two main components: **ToolJet Server** and **ToolJet Client**.
### 1. ToolJet Server
ToolJet server is a Node.js API application. Server is responsible for authentication, authorization, persisting application definitions, running queries, storing data source credentials securely and more.
**Dependencies:**
- **PostgreSQL** - ToolJet server persists data to a postgres database.
- **Email service** (SMTP/Sendgrid/Mailgun/etc) - Required to send user invitations and password reset emails.
- **PostgREST (Optional)** - Standalone web server that converts PostgreSQL database into queryable RESTful APIs for Tooljet Database.
### 2. ToolJet Client
ToolJet client is a ReactJS application. Client is responsible for visually editing the applications, building & editing queries, rendering applications, executing events and their trigger, etc.
## Requirements
1. **Node version 18.3.0**
2. **npm version 8.11.0**

184
docs/versioned_docs/version-2.5.0/contributing-guide/setup/docker.md Normal file
View file

@ -0,0 +1,184 @@
---
id: docker
title: Docker
---
:::warning
The following guide is intended for contributors to set-up ToolJet locally. If you're interested in **self-hosting** ToolJet, please refer to the **[Setup](/docs/setup/)** section.
:::
Docker compose is the easiest way to setup ToolJet server and client locally.
:::info
If you rather want to try out ToolJet locally with docker, you can follow the steps [here](https://docs.tooljet.com/docs/setup/docker-local).
:::
## Prerequisites
Make sure you have the latest version of `docker` and `docker-compose` installed.
[Official docker installation guide](https://docs.docker.com/desktop/)
[Official docker-compose installation guide](https://docs.docker.com/compose/install/)
We recommend:
```bash
docker --version
Docker version 19.03.12, build 48a66213fe
docker-compose --version
docker-compose version 1.26.2, build eefe0d31
```
## Setting up
:::tip
If you are setting up on a Windows machine, we advise you to setup Docker desktop with WSL2.
Please find more information [here](https://docs.docker.com/desktop/windows/wsl/).
:::
1. Clone the repository
```bash
git clone https://github.com/tooljet/tooljet.git
```
2. Create a `.env` file by copying `.env.example`. More information on the variables that can be set is given in the [environment variables reference](/docs/setup/env-vars)
```bash
cp .env.example .env
cp .env.example .env.test
```
3. Populate the keys in the `.env` and `.env.test` file
:::info
`SECRET_KEY_BASE` requires a 64 byte key. (If you have `openssl` installed, run `openssl rand -hex 64` to create a 64 byte secure random key)
`LOCKBOX_MASTER_KEY` requires a 32 byte key. (Run `openssl rand -hex 32` to create a 32 byte secure random key)
:::
:::tip
If you are setting up on a Windows machine. Please make sure that .env file line endings to be LF as it will be CRLF by default unless configured for Windows machine.
:::
Example:
```bash
cat .env
TOOLJET_HOST=http://localhost:8082
LOCKBOX_MASTER_KEY=13c9b8364ae71f714774c82498ba328813069e48d80029bb29f49d0ada5a8e40
SECRET_KEY_BASE=ea85064ed42ad02cfc022e66d8bccf452e3fa1142421cbd7a13592d91a2cbb866d6001060b73a98a65be57e65524357d445efae00a218461088a706decd62dcb
NODE_ENV=development
# DATABASE CONFIG
PG_HOST=postgres
PG_PORT=5432
PG_USER=postgres
PG_PASS=postgres
PG_DB=tooljet_development
ORM_LOGGING=all
```
```bash
cat .env.test
TOOLJET_HOST=http://localhost:8082
LOCKBOX_MASTER_KEY=13c9b8364ae71f714774c82498ba328813069e48d80029bb29f49d0ada5a8e40
SECRET_KEY_BASE=ea85064ed42ad02cfc022e66d8bccf452e3fa1142421cbd7a13592d91a2cbb866d6001060b73a98a65be57e65524357d445efae00a218461088a706decd62dcb
NODE_ENV=test
# DATABASE CONFIG
PG_HOST=postgres
PG_PORT=5432
PG_USER=postgres
PG_PASS=postgres
PG_DB=tooljet_test
ORM_LOGGING=error
```
4. Build docker images
```bash
docker-compose build
docker-compose run --rm plugins npm run build:plugins
```
5. Run ToolJet
```bash
docker-compose up
```
ToolJet should now be served locally at `http://localhost:8082`.
8. To shut down the containers,
```bash
docker-compose stop
```
## Making changes to the codebase
If you make any changes to the codebase/pull the latest changes from upstream, the tooljet server container would hot reload the application without you doing anything.
Caveat:
1. If the changes include database migrations or new npm package additions in the package.json, you would need to restart the ToolJet server container by running `docker-compose restart server`.
2. If you need to add a new binary or system library to the container itself, you would need to add those dependencies in `docker/server.Dockerfile.dev` and then rebuild the ToolJet server image. You can do that by running `docker-compose build server`. Once that completes you can start everything normally with `docker-compose up`.
Example:
Let's say you need to install the `imagemagick` binary in your ToolJet server's container. You'd then need to make sure that `apt` installs `imagemagick` while building the image. The Dockerfile at `docker/server.Dockerfile.dev` for the server would then look something like this:
```
FROM node:18.3.0-buster AS builder
RUN apt update && apt install -y \
build-essential \
postgresql \
freetds-dev \
imagemagick
RUN mkdir -p /app
WORKDIR /app
COPY ./server/package.json ./server/package-lock.json ./
RUN npm install
ENV NODE_ENV=development
COPY ./server/ ./
COPY ./docker/ ./docker/
COPY ./.env ../.env
RUN ["chmod", "755", "entrypoint.sh"]
```
Once you've updated the Dockerfile, rebuild the image by running `docker-compose build server`. After building the new image, start the services by running `docker-compose up`.
## Running tests
Test config picks up config from `.env.test` file at the root of the project.
Run the following command to create and migrate data for test db
```bash
docker-compose run --rm -e NODE_ENV=test server npm run db:create
docker-compose run --rm -e NODE_ENV=test server npm run db:migrate
```
To run the unit tests
```bash
docker-compose run --rm server npm run --prefix server test
```
To run e2e tests
```bash
docker-compose run --rm server npm run --prefix server test:e2e
```
To run a specific unit test
```bash
docker-compose run --rm server npm --prefix server run test <path-to-file>
```
## Troubleshooting
Please open a new issue at https://github.com/ToolJet/ToolJet/issues or join our [Slack Community](https://tooljet.com/slack) if you encounter any issues when trying to run ToolJet locally.

137
docs/versioned_docs/version-2.5.0/contributing-guide/setup/macos.md Normal file
View file

@ -0,0 +1,137 @@
---
id: macos
title: Mac OS
---
:::warning
The following guide is intended for contributors to set-up ToolJet locally. If you're interested in **self-hosting** ToolJet, please refer to the **[Setup](/docs/setup/)** section.
:::
Follow these steps to setup and run ToolJet on macOS for development purposes. Open terminal and run the commands below. We recommend reading our guide on [architecture](/docs/contributing-guide/setup/architecture) of ToolJet before proceeding.
## Setting up
1. Set up the environment
1.1 Install Homebrew
```bash
/bin/bash -c "(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
1.2 Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
```bash
brew install nvm
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh
nvm install 18.3.0
nvm use 18.3.0
npm install -g npm@8.11.0
```
1.3 Install Postgres
:::tip
ToolJet uses a postgres database as the persistent storage for storing data related to users and apps. We do not plan to support other databases such as MySQL.
:::
```bash
brew install postgresql
```
1.4 Install PostgREST(optional)
:::info
Required only if Tooljet Database is being used.
Please use PostgREST version 10.1.1.x
:::
```bash
brew install postgrest --version 10.1.1.20221215
```
1.5 Clone the repository
```bash
git clone https://github.com/tooljet/tooljet.git
```
2. Set up environment variables
Create a `.env` file by copying `.env.example`. More information on the variables that can be set is given in the [environment variables reference](/docs/setup/env-vars)
```bash
cp .env.example .env
```
3. Populate the keys in the env file
:::info
`SECRET_KEY_BASE` requires a 64 byte key. (If you have `openssl` installed, run `openssl rand -hex 64` to create a 64 byte secure random key)
`LOCKBOX_MASTER_KEY` requires a 32 byte key. (Run `openssl rand -hex 32` to create a 32 byte secure random key)
:::
Example:
```bash
cat .env
TOOLJET_HOST=http://localhost:8082
LOCKBOX_MASTER_KEY=1d291a926ddfd221205a23adb4cc1db66cb9fcaf28d97c8c1950e3538e3b9281
SECRET_KEY_BASE=4229d5774cfe7f60e75d6b3bf3a1dbb054a696b6d21b6d5de7b73291899797a222265e12c0a8e8d844f83ebacdf9a67ec42584edf1c2b23e1e7813f8a3339041
NODE_ENV=development
# DATABASE CONFIG
PG_HOST=postgres
PG_PORT=5432
PG_USER=postgres
PG_PASS=postgres
PG_DB=tooljet_development
ORM_LOGGING=all
```
4. Install and build dependencies
```bash
npm install
npm install --prefix server
npm install --prefix frontend
npm run build:plugins
```
5. Set up database
```bash
npm run --prefix server db:reset
```
6. Run plugins compilation in watch mode
```bash
cd ./plugins && npm start
```
7. Run the server
```bash
cd ./server && npm run start:dev
```
8. Run the client
```bash
cd ./frontend && npm start
```
The client will start on the port 8082, you can access the client by visiting: [https://localhost:8082](https://localhost:8082)
9. Create login credentials
Visiting [https://localhost:8082](https://localhost:8082) should redirect you to the login page, click on the signup link and enter your email. The emails sent by the server in development environment are captured and are opened in your default browser. Click the invitation link in the email preview to setup the account.
## Running tests
Test config requires the presence of `.env.test` file at the root of the project.
To run the unit tests
```bash
npm run --prefix server test
```
To run e2e tests
```bash
npm run --prefix server test:e2e
```
To run a specific unit test
```bash
npm run --prefix server test <path-to-file>
```

129
docs/versioned_docs/version-2.5.0/contributing-guide/setup/ubuntu.md Normal file
View file

@ -0,0 +1,129 @@
---
id: ubuntu
title: Ubuntu
---
:::warning
The following guide is intended for contributors to set-up ToolJet locally. If you're interested in **self-hosting** ToolJet, please refer to the **[Setup](/docs/setup/)** section.
:::
Follow these steps to setup and run ToolJet on Ubuntu. Open terminal and run the commands below.
## Setting up
1. Set up the environment
1.1 Install NVM
```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
```
Close and reopen your terminal to start using nvm
```bash
nvm install 18.3.0
```
Ensure you have the correct version of npm, or it will cause an error about fsevents.
```bash
npm i -g npm@8.11.0
```
1.2 Install Postgres
```bash
sudo apt install postgresql postgresql-contrib
sudo apt-get install libpq-dev
```
1.3 Install PostgREST (optional)
:::info
Required only if Tooljet Database is being used.
Please use PostgREST version 10.1.1.x
:::
Please follow the installation [PostgREST](https://postgrest.org/en/stable/install.html) guide
**Note:** Clone the GitHub repo locally using:
```bash
git clone https://github.com/ToolJet/ToolJet.git
```
2. Set up environment variables
Create a `.env` file by copying `.env.example`. More information on the variables that can be set is given in the [environment variables reference](/docs/setup/env-vars)
```bash
cp .env.example .env
```
3. Populate the keys in the env file
:::info
`SECRET_KEY_BASE` requires a 64 byte key. (If you have `openssl` installed, run `openssl rand -hex 64` to create a 64 byte secure random key)
`LOCKBOX_MASTER_KEY` requires a 32 byte key. (Run `openssl rand -hex 32` to create a 32 byte secure random key)
:::
Example:
```bash
cat .env
TOOLJET_HOST=http://localhost:8082
LOCKBOX_MASTER_KEY=1d291a926ddfd221205a23adb4cc1db66cb9fcaf28d97c8c1950e3538e3b9281
SECRET_KEY_BASE=4229d5774cfe7f60e75d6b3bf3a1dbb054a696b6d21b6d5de7b73291899797a222265e12c0a8e8d844f83ebacdf9a67ec42584edf1c2b23e1e7813f8a3339041
```
4. Install and build dependencies
```bash
npm install
npm install --prefix server
npm install --prefix frontend
npm run build:plugins
```
5. Set up database
```bash
npm run --prefix server db:reset
```
6. Run plugins compilation in watch mode
```bash
cd ./plugins && npm start
```
7. Run the server
```bash
cd ./server && npm run start:dev
```
8. Run the client
```bash
cd ./frontend && npm start
```
The client will start running on the port 8082, you can access the client by visiting: [https://localhost:8082](https://localhost:8082)
9. Create login credentials
Visiting https://localhost:8082 should redirect you to the login page, click on the signup link and enter your email. The emails sent by the server in development environment are captured and are opened in your default browser. Click the invitation link in the email preview to setup the account.
## Running tests
Test config requires the presence of `.env.test` file at the root of the project.
To run the unit tests
```bash
npm run --prefix server test
```
To run e2e tests
```bash
npm run --prefix server test:e2e
```
To run a specific unit test
```bash
npm run --prefix server test <path-to-file>
```

90
docs/versioned_docs/version-2.5.0/contributing-guide/slackcoc.md Normal file
View file

@ -0,0 +1,90 @@
---
id: slackcoc
title: Slack Code of Conduct
---
# Slack Code of Conduct
This code of conduct governs ToolJet's Slack Community events and discussions.
---
## Introduction
- Diversity and inclusion make our community strong. We encourage participation from the most varied and diverse backgrounds possible and want to be very clear about where we stand.
- Our goal is to maintain a safe, helpful and friendly community for everyone, regardless of experience, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, nationality, or other defining characteristic.
- This code and related procedures apply to unacceptable behavior occurring in all community venues, including behavior outside the scope of community activities — online and in-person— as well as in all one-on-one communications, and anywhere such behavior has the potential to adversely affect the safety and well-being of community members.
## Expected behavior
- Be welcoming.
- Be kind.
- Look out for each other.
## Unacceptable Behavior
- Conduct or speech which might be considered sexist, racist, homophobic, transphobic, ableist or otherwise discriminatory or offensive in nature.
- Do not use unwelcome, suggestive, derogatory or inappropriate nicknames or terms.
- Do not show disrespect towards others. (Jokes, innuendo, dismissive attitudes.)
- Intimidation or harassment (online or in-person).
- Disrespect towards differences of opinion.
- Inappropriate attention or contact. Be aware of how your actions affect others. If it makes someone uncomfortable, stop.
- Not understanding the differences between constructive criticism and disparagement.
- Sustained disruptions.
- Violence, threats of violence or violent language.
## Where does the Code of Conduct apply?
This Code of Conduct applies to all spaces managed by ToolJet. This includes:
- Conferences (including social events and peripheral activities)
- Unconferences and sprints
- Meetups, including their discussion boards
- Workshops
- Presentation materials used in talks or sessions
- Slack
- GitHub
- Twitter hashtag and mentions
- Any forums created by the ToolJet which the community uses for communication.
The Code of Conduct does not exclusively apply to slack or events on an official agenda. For example, if after a scheduled social event you go to a bar with a group of fellow participants, and someone harasses you there, we would still treat that as a CoC violation. Similarly, harassment in Twitter direct messages related to ToolJet can still be covered under this Code of Conduct.
In addition, violations of this code outside our spaces may affect a person’s ability to participate in them.
## Enforcement
- Understand that speech and actions have consequences, and unacceptable behavior will not be tolerated.
- If you are the subject of, or witness to any violations of this Code of Conduct, please contact us via email at hello@tooljet.com or dm @navaneeth on slack.
- If violations occur, organizers will take any action they deem appropriate for the infraction, up to and including expulsion.
:::info
Portions derived from the [Django Code of Conduct](https://www.djangoproject.com/conduct/), [The Rust Code of Conduct](https://www.rust-lang.org/conduct.html) and [The Ada Initiative](http://adainitiative.org/2014/02/18/howto-design-a-code-of-conduct-for-your-community/) under a Creative Commons Attribution-ShareAlike license.
:::
---
## Etiquettes to follow
#### 1. Be nice to everyone
#### 2. Check off your resolved questions
If you have received a useful reply to your question, please drop a ✅ reaction or a reply for affirmation.
#### 3. Try not to repost question
If you have asked a question and have not got a response in 24hrs, please review your question for clarity and revise it. If you still feel you haven't received adequate response, feel free to ping @navaneeth.
#### 4. Post in public
Please don't direct message any individual member of ToolJet community without their explicit permission, independent of reason. Your question might be helpful for other community members.
#### 5. Don't spam tags
ToolJet's community of volunteer is very active and helpful, generally avoid tagging members unless it is urgent.
#### 6. Use threads for discussion
To keep the main channel area clear, we request to use threads to keep an ongoing conversation organized.

57
docs/versioned_docs/version-2.5.0/contributing-guide/testing.md Normal file
View file

@ -0,0 +1,57 @@
---
id: testing
title: Testing
---
Follow the steps below to setup and run the test specifications using Cypress. We recommend [setting up ToolJet locally](/docs/contributing-guide/setup/macos) before proceeding.
## Setting up
- Navigate to the `cypress-tests` directory and enter the following command:
```bash
npm install
```
## Running Tests
#### Headed mode
- To run cypress in **headed** mode, run the following command:
```bash
npm run cy:open
```
- In **headed** mode, the user will be able to choose the test specs from the test runner:
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/testing/headed.png" alt="Cypress headed mode" />
</div>
#### Headless mode
- To run cypress in **headless** mode, run the following command:
```bash
npm run cy:run
```
- For running specific spec in headless mode, run for specific spec
```bash
npm run cy:run -- --spec "cypress/e2e/dashboard/multi-workspace/manageSSO.cy.js
```
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/testing/headless.png" alt="Cypress headless mode" />
</div>
:::caution
If some test specs need the environment variables, the user can pass them similar to the following command:
```bash
npm run cy:open -- --env='{"pg_host":"localhost","pg_user":"postgres", "pg_password":"postgres"}'
```
or the user can add env-vars in the **cypress.config.js** file
:::
:::info
Check all the Cypress commands [here](https://docs.cypress.io/guides/guides/command-line#Commands)
:::

46
docs/versioned_docs/version-2.5.0/contributing-guide/troubleshooting/eslint.md Normal file
View file

@ -0,0 +1,46 @@
---
id: eslint
title: EsLint
---
# ESLint
ESLint as a code quality tool is a tool that checks your code for errors and helps you to fix them and enforces a coding style.
## Setup
1. Install the [ESLint extension](https://eslint.org/docs/latest/user-guide/integrations) for your code editor.
2. Set your editor's default formatter to `ESLint`.
:::tip
For VSCode users, you can set the formatter to `ESLint` in the [**settings.json**](https://code.visualstudio.com/docs/getstarted/settings#_settingsjson).
:::
3. Install the dependencies.
```bash
npm install
npm install --prefix server
npm install --prefix frontend
```
4. Run the linter.
```bash
npm run --prefix server lint
npm run --prefix frontend lint
```
5. Fix the ESlint errors and warnings.
```bash
npm run --prefix server format
npm run --prefix frontend format
```
## Requirements
1. **Node version 18.3.0**
2. **npm version 8.11.0**
:::tip
It is recommended to check the VSCode **Setting.json**(Press `ctrl/cmnd + P` and search `>Settings (JSON)`) file to ensure there are no overrides to the eslint config rules. Comment the following rules for eslint: **eslint.options: {...}**.
:::

5
docs/versioned_docs/version-2.5.0/contributing-guide/tutorials/_category_.json Normal file
View file

@ -0,0 +1,5 @@
{
"label": "Tutorials",
"position": 2,
"collapsed": true
}

27
docs/versioned_docs/version-2.5.0/contributing-guide/tutorials/create-widget.md Normal file
View file

@ -0,0 +1,27 @@
---
id: creating-widget
title: Creating Widgets
---
# Creating Widgets
These are some of the most useful properties and functions passed to the widget
### properties
The `properties` object will contain the configurable properties of a widget, initially obtained from its definition on `widgetConfig.js`.
The values inside `properties` change whenever the developer makes changes to the inspector panel of ToolJet editor.
### exposedVariables
The `exposedVariables` object will contain the values of all exposed variables as configured in `widgetConfig.js`.
### setExposedVariable('exposedVariableName', newValue)
This function allows you to update the value of an exposed variable to `newValue`.
### validate(value)
This function validates the `value` passed based on the validation settings configured on the inspector panel for the widget.
It returns an array `[isValid, validationError]`, which represents respectively, whether the `value` passed is valid,
and the error message if there is one.

5
docs/versioned_docs/version-2.5.0/data-sources/_category_.json Normal file
View file

@ -0,0 +1,5 @@
{
"label": "Datasource Reference",
"position": 5,
"collapsed": true
}

229
docs/versioned_docs/version-2.5.0/data-sources/airtable.md Normal file
View file

@ -0,0 +1,229 @@
---
id: airtable
title: Airtable
---
# Airtable
ToolJet can connect to your Airtable account to read and write data. **Airtable API key** is required to create an Airtable data source on ToolJet. You can generate API key by visiting [Airtable account page](https://airtable.com/account).
<img className="screenshot-full" src="/img/datasource-reference/airtable/add_creds.gif" alt="irtable record"/>
:::info
Airtable API has a rate limit, and at the time of writing this documentation, the limit is five(5) requests per second per base. You can read more about rate limits here **[Airtable API]( https://airtable.com/api )**.
:::
:::tip
This guide assumes that you have already gone through [Adding a data source](/docs/tutorial/adding-a-datasource) tutorial.
:::
## Supported queries
- **[Listing records](#listing-records)**
- **[Retrieving a record](#retrieving-a-record)**
- **[Creating a record](#creating-a-record)**
- **[Updating a record](#updating-a-record)**
- **[Deleting a record](#deleting-a-record)**
### Listing records
This query lists all the records in a table. The results are paginated and each page can have up to 100 records.
#### Required parameters:
- **Base ID:** To find the Base ID, first visit **airtable.com/api**. Select from the list of bases the base whose ID you'd like to find out. Example Base ID: `appDT3UCPffPiSmFd`
- **Table name:** Enter the table name whose data you want to fetch.
#### Optional parameters:
- **Page size:** The number of records returned in each request. Must be less than or equal to 100. Default is 100.
- **offset:** If there are more records, the response will contain an offset. To fetch the next page of records, include offset in the next request's parameters.
<img className="screenshot-full" src="/img/datasource-reference/airtable/listv2.png" alt="List airtable record" />
Example response from Airtable:
```json
{
"records": [
{
"id": "recu9xMnUdr2n2cw8",
"fields": {
"Notes": "sdfdsf",
"Name": "dsfdsf"
},
"createdTime": "2021-05-12T14:30:33.000Z"
},
{
"id": "recyIdR7bVdQvmKXa",
"fields": {
"Notes": "sdfdsf",
"Name": "dfds"
},
"createdTime": "2021-05-12T14:30:33.000Z"
},
{
"id": "recAOzdIHaRpvRaGE",
"fields": {
"Notes": "sdfsdfsd",
"Name": "sdfdsf"
},
"createdTime": "2021-05-12T14:30:33.000Z"
}
],
"offset": "recAOzdIHaRpvRaGE"
}
```
### Retrieving a record
#### Required parameters:
- **Base ID**
- **Table name**
- **Record ID**
<img className="screenshot-full" src="/img/datasource-reference/airtable/retv2.png" alt="Retrieve airtable record" />
Example response from Airtable:
```json
{
"id": "recu9xMnUdr2n2cw8",
"fields": {
"Notes": "sdfdsf",
"Name": "dsfdsf"
},
"createdTime": "2021-05-12T14:30:33.000Z"
}
```
### Creating a record
#### Required parameters:
- **Base ID**
- **Table name**
- **Records**
<img className="screenshot-full" src="/img/datasource-reference/airtable/createv2.png" alt="Create airtable record" />
#### Example Records:
```json
[
{
"fields": {
"Notes": "sdfdsf",
"Name": "dsfdsf"
}
},
{
"fields": {
"Notes": "note1",
"Name": "dsfdsf"
}
}
]
```
Click on the `run` button to run the query.
:::info
NOTE: Query must be saved before running.
:::
Example response from Airtable:
```json
{
"records": [
{
"id": "rec5RuZ1COoZGtGDY",
"fields": {
"Notes": "sdfdsf",
"Name": "dsfdsf"
},
"createdTime": "2022-02-07T20:25:27.000Z"
},
{
"id": "recaYbFPonNNu6Cwj",
"fields": {
"Notes": "note1",
"Name": "dsfdsf"
},
"createdTime": "2022-02-07T20:25:27.000Z"
}
]
}
```
### Updating a record
#### Required parameters:
- **Base ID**
- **Table name**
- **Record ID**
<img className="screenshot-full" src="/img/datasource-reference/airtable/updv2.png" alt="Update airtable record"/>
#### Example body:
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/airtable/airtable-update-example-body.png" alt="Airtable update body" />
</div>
Click on the `run` button to run the query.
:::info
NOTE: Query must be saved before running.
:::
Example response from Airtable:
```json
{
"id": "recu9xMnUdr2n2cw8",
"fields": {
"Notes": "Example Notes",
"Name": "change"
},
"createdTime": "2021-08-08T17:27:17.000Z"
}
```
### Deleting a record
#### Required parameters:
- **Base ID**
- **Table name**
- **Record ID**
<img className="screenshot-full" src="/img/datasource-reference/airtable/delv2.png" alt="Delete airtable record" />
Click on the `run` button to run the query.
:::info
NOTE: Query must be saved before running.
:::
Example response from Airtable:
```json
{
deleted: true
id: "recIKsyZgqI4zoqS7"
}
```

61
docs/versioned_docs/version-2.5.0/data-sources/amazonses.md Normal file
View file

@ -0,0 +1,61 @@
---
id: amazonses
title: Amazon SES
---
# Amazon SES
ToolJet can connect to your Amazon SES account to send emails.
## Connection
To add a new Amazon SES API datasource, click the **Datasource manager** icon on the left-sidebar of the app builder and click on the `Add datasource` button, then select Amazon SES from the modal that pops up.
ToolJet requires the following to connect to Amazon SES:
- **Region**
- **Access key**
- **Secret key**
It is recommended to create a new IAM user for the database so that you can control the access levels of ToolJet.
Click on the 'Save' button to save the data source.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/amazonses/connection.png" alt="Amazon SES" width="600" />
</div>
## Supported operations
1. Email service
### Email service
Required parameters:
- Send email to
- Send email from
- Subject
- Body as text
Optional parameters:
- Body as HTML
- CC Addresses
- BCC Addresses
:::info
**Send mail to** - accepts an array/list of emails separated by comma.
For example:
`{{["dev@tooljet.io", "admin@tooljet.io"]}}`.
**Send mail from** - accepts a string.
For example: `admin@tooljet.io`
:::
:::tip
**Send a single email to multiple recipients** - The `Send mail to` field can contain an array of recipients, which will send a single email with all of the recipients in the field.
:::
:::info Note
Query should be saved before running.
:::

160
docs/versioned_docs/version-2.5.0/data-sources/appwrite.md Normal file
View file

@ -0,0 +1,160 @@
---
id: appwrite
title: Appwrite Database
---
# Appwrite Database
Now build applications on top of your Appwrite database.
## Connection
ToolJet connects to your Appwrite app using :
- **Host (API endpoint)**
- **Project ID**
- **Secret key**
You'll find the Secret key and other credentials on your Appwrite's project settings page. You may need to create a new key if you don't have one already.
:::info
You should also set the scope for access to a particular resource. Learn more about the **API keys and scopes** [here](https://appwrite.io/docs/keys).
:::
To connect Appwrite datasource to your ToolJet application, go to the data source manager on the left-sidebar and click on the `+` button. Select Appwrite from the list of available datasources, provide the credentials and click **Save**. It is recommended to check the connection by clicking on 'Test connection' button to verify if the service account can access Appwrite from the ToolJet server.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/appwrite/connectv2.png" alt="Appwrite intro" width="600"/>
</div>
## Querying Appwrite
After setting up the Appwrite datasource, you can click on the `+` button of the query manager at the bottom panel of the editor and select the Appwrite data source that you added in the previous step.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/appwrite/queryingv2.png" alt="Appwrite intro"/>
</div>
After selecting Appwrite datasource, select the operation that you want to perform on the Appwrite database and click **Save** to save the query.
:::tip
Query results can be transformed using Transformations. Read our **Transformation documentation** [here](/docs/tutorial/transformations)
:::
## Supported operations
1. **[List documents](#list-documents)**
2. **[Get document](#get-document)**
3. **[Create document](#create-document)**
4. **[Update document](#update-document)**
5. **[Delete document](#delete-document)**
6. **[Bulk update using document id](#bulk-update-using-document-id)**
### List documents
This operation can be used to get a list of all the user documents.
#### Required parameters:
- **Collection ID:** You can create a new collection using the Database service [server integration](https://appwrite.io/docs/server/database#createCollection) or appwrite console. The value for collection ID field should be of `String` type.
#### Optional parameters:
- **Limit:** Maximum number of documents to return in the response. By default, it will return a maximum of 25 results. A maximum of 100 results is allowed per request. The Limit value should be of `integer` type.
- **Order fields:** Array of attributes used to sort results. The order field value should be an `array`.
- **Order types:** Array of order directions for sorting attributes. Possible values are DESC for descending order or ASC for ascending order. The order field value should be an `array`.
- **Field, Operator, and Value:** For filtering the results, you can enter a field(attribute) name, use the appropriate operator from the dropdown, and set a value.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/appwrite/listv2.png" alt="Appwrite List" />
</div>
### Get document
Use this operation to get a document from a collection by its unique ID.
#### Required parameters:
- **Collection ID:** You can create a new collection using the Database service [server integration](https://appwrite.io/docs/server/database#createCollection) or appwrite console. The value for collection ID should be of `String` type.
- **Document ID:** Enter the document ID of the document that you want to get. The document ID should be of `String` type.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/appwrite/getv2.png" alt="Appwrite get" />
</div>
### Add Document to Collection
Use this operation to create a new document in a collection.
#### Required parameters:
- **Collection ID:** You can create a new collection using the Database service [server integration](https://appwrite.io/docs/server/database#createCollection) or appwrite console. The collection ID should be of `String` type.
- **Body:** Enter the document data as a JSON object.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/appwrite/addv2.png" alt="Appwrite add" />
</div>
### Update document
Use this operation to update a document.
#### Required parameters:
- **Collection ID:** You can create a new collection using the Database service [server integration](https://appwrite.io/docs/server/database#createCollection) or appwrite console. The value for collection ID should be of `String` type.
- **Document ID:** Enter the document ID of the document that you want to get. The document ID should be of `String` type.
- **Body:** Enter the document data as a JSON object.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/appwrite/updv2.png" alt="Appwrite update" />
</div>
### Delete document
Use this operation for deleting a document in the collection.
#### Required parameters:
- **Collection ID:** You can create a new collection using the Database service [server integration](https://appwrite.io/docs/server/database#createCollection) or appwrite console. The value for collection ID should be of `String` type.
- **Document ID:** Enter the document ID of the document that you want to get. The document ID should be of `String` type.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/appwrite/delv2.png" alt="Appwrite delete"/>
</div>
### Bulk update using document id
Use this operation for bulk updating a document in a collection.
#### Required parameters:
- **Collection ID:** You can create a new collection using the Database service [server integration](https://appwrite.io/docs/server/database#createCollection) or appwrite console. The value for collection ID should be of `String` type.
- **Key for document ID:** Enter the key or attribute name that can be used to identify each record.
- **Records:** The array of objects that will contain the data for updating each record in the database
and these objects must contain a key-value pair to point unique record in the database (key for document)
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/appwrite/bulkv2.png" alt="Appwrite bulk update" />
</div>

67
docs/versioned_docs/version-2.5.0/data-sources/athena.md Normal file
View file

@ -0,0 +1,67 @@
# Athena
ToolJet can connect to Amazon Athena which is an interactive query service that makes it easy to analyze data in Amazon S3 using standard SQL.
- [Connection](#connection)
- [Querying-athena](#querying-amazon-athena)
- [Basic Operation](#basic-queries)
## Connection
ToolJet requires the following to connect to your Athena.
- **Database**
- **S3 output location**
- **Access key**
- **Secret key**
- **Region**
:::info
You can also configure for **[additional optional parameters](https://github.com/ghdna/athena-express)**.
:::
<img className="screenshot-full" src="/img/datasource-reference/athena/athena-connection.png" alt="Athena connection" />
## Querying Amazon Athena
- Click on `+` button of the query manager at the bottom panel of the editor and select the database added in the previous step as the datasource. Query manager then can be used to write SQL queries.
<img className="screenshot-full" src="/img/datasource-reference/athena/athena-query.png" alt="Athena query" />
- Click on the `run` button to run the query.
**NOTE:** Query should be saved before running.
:::tip
**Refer amazon athena docs here for more info:** [link](https://docs.aws.amazon.com/athena/latest/ug/what-is.html)
:::
### Basic queries
#### Creating table
```sql
CREATE EXTERNAL TABLE student (
name STRING,
age INT
) LOCATION 's3://athena-express-akiatfa53s-2022/';
```
#### Inserting to table
```sql
INSERT INTO student
VALUES ('Lansing',1)
```
#### Select operation
```sql
SELECT * from student WHERE AGE=1
```

269
docs/versioned_docs/version-2.5.0/data-sources/baserow.md Normal file
View file

@ -0,0 +1,269 @@
---
id: baserow
title: Baserow
---
# Baserow
## Connection
ToolJet can connect to your Baserow account to read and write data.
Select the hosted version of Baserow or the self-host option.
For [**self-hosted**](https://baserow.io/docs/index#installation) option, base URL is required to connect.
Baserow API token is required to create an Baserow data source on ToolJet. You can follow the steps to create API token from [this link](https://baserow.io/api-docs).
<img className="screenshot-full" src="/img/datasource-reference/baserow/baserow-intro.png" alt="Baserow intro" />
:::tip
This guide assumes that you have already gone through [Adding a data source](/docs/tutorial/adding-a-datasource) tutorial.
:::
## Supported queries
- [List fields](#list-fields)
- [List rows](#list-rows)
- [Get row](#get-row)
- [Create row](#create-row)
- [Update row](#update-row)
- [Move row](#move-row)
- [Delete row](#delete-row)
### List fields
This query lists all the fields in a table.
#### Required parameters:
- **Table ID**
<img className="screenshot-full" src="/img/datasource-reference/baserow/baserow-list-fields.png" alt="Baserow list fields" />
Example response from Baserow:
```json
[
{
"id": 331156,
"table_id": 57209,
"name": "Name",
"order": 0,
"type": "text",
"primary": true,
"text_default": ""
},
{
"id": 331157,
"table_id": 57209,
"name": "Last name",
"order": 1,
"type": "text",
"primary": false,
"text_default": ""
},
{
"id": 331158,
"table_id": 57209,
"name": "Notes",
"order": 2,
"type": "long_text",
"primary": false
},
{
"id": 331159,
"table_id": 57209,
"name": "Active",
"order": 3,
"type": "boolean",
"primary": false
}
]
```
### List rows
This query lists all the rows in a table.
#### Required parameters:
- **Table ID**
<img className="screenshot-full" src="/img/datasource-reference/baserow/baserow-list-rows.png" alt="Baserow list"/>
Example response from Baserow:
```json
{
"count": 3,
"next": null,
"previous": null,
"results": [
{
"id": 2,
"order": "0.99999999999999999991",
"Name": "Bill",
"Last name": "Gates",
"Notes": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim, urna eget rutrum sollicitudin, sapien diam interdum nisi, quis malesuada nibh eros a est.",
"Active": false
},
{
"id": 3,
"order": "0.99999999999999999992",
"Name": "Mark",
"Last name": "Zuckerburg",
"Notes": null,
"Active": true
},
{
"id": 1,
"order": "0.99999999999999999997",
"Name": "Elon",
"Last name": "Musk",
"Notes": null,
"Active": true
}
]
}
```
### Get row
#### Required parameters:
- **Table ID**
- **Row ID**
<img className="screenshot-full" src="/img/datasource-reference/baserow/baserow-get-row.png" alt="Baserow get" />
Example response from Baserow:
```json
{
"id": 1,
"order": "0.99999999999999999997",
"Name": "Elon",
"Last name": "Musk",
"Notes": null,
"Active": true
}
```
### Create row
#### Required parameters:
- **Table ID**
- **Records**
<img className="screenshot-full" src="/img/datasource-reference/baserow/baserow-create-row.png" alt="Bserow create"/>
#### Example Records:
```json
{
"Name": "Test",
"Last name": "Test Name",
"Notes": "Test Note",
"Active": true
}
```
Example response from Baserow:
```json
{
"id": 19,
"order": "0.99999999999999999996",
"Name": "Test",
"Last name": "Test Name",
"Notes": "Test Note",
"Active": true
}
```
### Update row
#### Required parameters:
- **Table ID**
- **Row ID**
- **Records**
<img className="screenshot-full" src="/img/datasource-reference/baserow/baserow-update-row.png" alt="Baserow update" />
#### Example Records:
```json
{
"Name": "Test",
"Last name": "Test Name",
"Notes": "Test Note",
"Active": true
}
```
Example response from Baserow:
```json
{
"id": 19,
"order": "0.99999999999999999996",
"Name": "Test",
"Last name": "Test Name",
"Notes": "Test Note",
"Active": true
}
```
### Move row
#### Required parameters:
- **Table ID**
- **Row ID**
#### Optional parameters:
- **Before ID** (The row will be moved before the entered ID. If not provided, then the row will be moved to the end )
<img className="screenshot-full" src="/img/datasource-reference/baserow/baserow-move-row.png" alt="Baserow move row" />
Example response from Baserow:
```json
{
"id": 3,
"order": "2.00000000000000000000",
"Name": "Mark",
"Last name": "Zuckerburg",
"Notes": null,
"Active": true
}
```
### Delete row
#### Required parameters:
- **Table ID**
- **Row ID**
<img className="screenshot-full" src="/img/datasource-reference/baserow/baserow-delete-row.png" alt="Baserow delete" />
While deleting a row, the response will be either success or failure from Baserow

160
docs/versioned_docs/version-2.5.0/data-sources/bigquery.md Normal file
View file

@ -0,0 +1,160 @@
---
id: bigquery
title: BigQuery
---
# BigQuery
ToolJet can connect to BigQuery databases to run BigQuery queries.
## Connection
Please refer [this](https://cloud.google.com/bigquery/docs/bigquery-web-ui) link to enable BigQuery API in Google Cloud Console.
Create **Service Account** and **key**, then get your configs downloaded as **JSON**
To add a new BigQuery, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select BigQuery from the modal that pops up.
ToolJet requires the config json downloaded from your account to connect to BigQuery. Paste the json into the `Private key` field.
**The json looks like**:
```json
{
"type": "service_account",
"project_id": "tooljet-279812",
"private_key_id": "ea6e234sdfsdf3242b91525626edeef74a14e58761",
"private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvQIBADAAhdh67sidfnIUWWWBAQC8V+z0vaM/rFiA\nrq8fzVjSpEu7Cietjn82SVtguAlAUP9YpRepzi4rDmRgVQiXe4KES7VGQhmg3hUj\nbBASbdI5WRCvAC2ujzrxv3rbfjYRWfm+OqzpUBWaEKbwSGc6rNkhmirvhjiFdl5k\nn7aK7w3bmQfBlnNM6+WiQdT09g2qx3lmRDoUUpuCngkhbWOs3gN/U6wlm0cHKtbF\nWUOwKdyeZrm3UORUDkFvq6rVSF8vob+FQxf24FuvpBmXi2o2dqqglle8rlm8Lz83\ns4kAVbqVjtGrVXm6QUcnLISqJCJUnFkSuFpo60GCcgAVrwyAq/6aQH3IM78QKzFL\n8q5b65rXAgMBAAECggEAClIF8tRk0VuG3NZH5lg3q8fDOyaLBFdVKcHKtzCec3Ez\no6C4RcxP6Hk5IbPrtgggjVIi/Z7exKRv2mAwFvuSuJJSQSSjXC7Fm87AQPdYFWYt\noFYIeLGPlFMO++H3Nh+Xt3I5NBLR58UmH48iBdgR3pygXi1C5eBvQ2rdNVTL/uxw\n3iULu8WcVBw8glzkdLNLDq94uqbW7/qyji7QWNkU+804sA0LEj4PWmO7B9k1LCLK\nFV0Ppv+SJYMS2MhWmXPHnYVfeNaKJKPQpHsS2ep/hyjEO/3Fvm3o3cp6SrEkNGIH\nGKeozlfV7MQj7tMHLqWddDBXtFwYVEmN0UJVafvGsQKBgQDsEVzb7DG/xlMpuDQv\nqpLGWXR5DdAhzxVJzeh11Ongb+XxBOVSyTDKJLvOX4rI7tDqqN7b2pabUA3ZjvXv\nhMPXr7AjL6yoJEzVCyo1+pi26OL99OcO+7gUDa0axHFt6LZuPw00r+2Nl0FqrXNR\n+qUiPuZpp2MuKjMwLCwhr5YuqwKBgQDMPv6TPMl+oocoQ4uc84uY58Ywb7XZjmhY\n8jXdA38I454EbQGeLja+2knDpDkF6g14cTzVJe/Ec4A6QmeIieTFSJKBV4VCZ3QN\npLR4PrET7o9GL3mtwnNqcHPw2dLNHtn1OgsOUfJMWPIrFK2abVNAmYIBtOGA4eyH\nrOl+NcAUhQKBgC4EKGy6OuxeFYHxZULRZjEB6QFb3vFoM4cieyjU6w4T4ee8g5NC\nop8U0AMnfp8yZkkHyAFlN6xoy3pYMrqQz7gwiA4j0e0ovk1dEspY4gHtnanRXmT+\nTmCiVdb86ft5vG37HnDhxlWuYVMRIoSdbikhx7papauvEDFYuvWKC6VnAoGBAJQr\nvxOhrauozNRw6//YzxUGT8kjwZEqtpiQXnMP7kDMn/4l9l6CuESMp6a+pH+d5FfU\nDoWzF9Y01HlvYxyyrLxSgbZDf/FEi/S54BK7qEsFbftExclAn+o/2lyIKV2VXBmD\nGjIxUM4CWOzX+3lkhlj/BEmop0+Qlr92uY1OASLhAoGAfTb/Le0Nf5bGLjK3hI9D\no/oDI5Ryj5rTMxmG/wRjE+1Jm6BjFzEyH2CvnFonccyHQ+wGn61AgbRFLn+Tg5fz\nZXpzD2Xq3Y/AXtrdaayK0wnpMvVE1bZt+ikeVAWX+gR79igTqSXRgCuyp+edsgcE\nZ+2Eser4Z5BpqfFjqFW8MhY=\n-----END PRIVATE KEY-----\n",
"client_email": "tooljettest@tooljet-279812.iam.gserviceaccount.com",
"client_id": "106795637455432158803",
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
"token_uri": "https://oauth2.googleapis.com/token",
"auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
"client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/tooljettest%40tooljet-279812.iam.gserviceaccount.com"
}
```
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/bigquery/bq-create.png" alt="BQ create" />
</div>
Click on **Test connection** button to verify if the credentials are correct and that the API is accessible to ToolJet server. Click on **Save** button to save the data source.
## Querying BigQuery
Click on `+` button of the query manager at the bottom panel of the editor and select the database added in the previous step as the data source. Select the operation that you want to perform and click **Save** to create the query.
<img className="screenshot-full" src="/img/datasource-reference/bigquery/bq-query.png" alt="BQ query" />
Click on the **run** button to run the query. NOTE: Query should be saved before running.
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations)
:::
## Supported operations
- [List Datasets](#list-datatsets)
- [List Tables](#list-tables)
- [Query](#query)
- [Insert Record ](#insert-record)
- [Delete Record ](#delete-record)
- [Update Record](#update-record)
- [Create View](#create-view)
- [Create Table](#create-table)
- [Delete Table](#create-table)
### List Datasets
Returns list of datasets.
#### Optional parameters:
- **Options:** This can be used to filter the list.
<img className="screenshot-full" src="/img/datasource-reference/bigquery/list_datasets.png" alt="BQ list datasets"/>
### List Tables
Return list of tables within a dataset
#### Required parameters:
- **Dataset:** Enter the dataset name.
<img className="screenshot-full" src="/img/datasource-reference/bigquery/listtables.png" alt="BQ list tables"/>
### Query
Return data based on the `Query`. `Query options` ([Reference](https://cloud.google.com/bigquery/docs/reference/rest/v2/Job)), and `Query result options` ([Reference](https://cloud.google.com/nodejs/docs/reference/bigquery/latest/overview#_google_cloud_bigquery_QueryResultsOptions_type)).
<img className="screenshot-full" src="/img/datasource-reference/bigquery/query.png" alt="BQ query"/>
### Insert Record
- To insert a record.
<img className="screenshot-full" src="/img/datasource-reference/bigquery/bq-insert.png" alt="BQ insert" />
### Delete Record
- To delete a record.
<img className="screenshot-full" src="/img/datasource-reference/bigquery/bq-delete.png" alt="BQ delete" />
:::info
NOTE: Be careful when deleting records in a table. If you omit the WHERE clause, all records in the table will be deleted!
:::
### Update Record
- To update a record.
<img className="screenshot-full" src="/img/datasource-reference/bigquery/bq-update.png" alt="BQ update" />
:::info
NOTE: Be careful when deleting records in a table. If you omit the WHERE clause, all records in the table will be updated!
:::
### Create View
- To create a view.
<img className="screenshot-full" src="/img/datasource-reference/bigquery/bq-view.png" alt="BQ create view" />
### Create Table
- To create a table.
:::info
NOTE: visit -https://github.com/googleapis/nodejs-bigquery/blob/main/samples/createTable.js for more info on schema.
:::
### Delete Table
- To delete a table.

211
docs/versioned_docs/version-2.5.0/data-sources/clickhouse.md Normal file
View file

@ -0,0 +1,211 @@
---
id: clickhouse
title: ClickHouse
---
# ClickHouse
ToolJet can connect to the ClickHouse to read and write data.
:::info
ToolJet uses this [NodeJS](https://github.com/TimonKK/clickhouse) client for ClickHouse.
:::
## Connection
To add a new ClickHouse datasource, Go to the **Datasource Manager** on the left sidebar of the app editor and click on `Add datasource` button. Select **ClickHouse** from the modal that pops up.
ToolJet requires the following to connect to your ClickHouse Database:
- **Username**
- **Password**
- **Host**
- **Port**
- **Database Name**
- **Protocol**
- **Use Post**
- **Trim Query**
- **Use Gzip**
- **Debug**
- **Raw**
<img className="screenshot-full" src="/img/datasource-reference/clickhouse/connection.png" alt="ClickHouse connection" />
## Querying ClickHouse
After setting up the ClickHouse datasource, you can click on the `+` button of the query manager and select the ClickHouse datasource that you added in the previous step to create a new query.
:::info
For more details on clickhouse visit [Clickhouse docs](https://clickhouse.com/docs/en/quick-start).
:::
## Supported Operations:
- [SQL Query](#sql-query)
- [Insert array of objects](#supported-operations)
### SQL Query
Use this to operation to enter **[ClickHouse SQL Statements](https://clickhouse.com/docs/en/sql-reference/statements/)**. These statements represent various kinds of action you can perform using SQL queries.
#### Example SQL queries
- **SELECT**:
```sql
SELECT * from test array;
```
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/clickhouse/select.png" alt="ClickHouse SQL Statement operation" />
</div>
- **CREATE**:
```sql
CREATE TABLE test array3 (
date Date,
str String,
arr Array(String),
arr2 Array (Date)
arr3 Array(UInt32) ,
id1 UUID
)ENGINE=MergeTree () ORDER BY(str)
```
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/clickhouse/create.png" alt="ClickHouse SQL Statement operation" />
</div>
- **ALTER TABLE**(add column)
```sql
ALTER TABLE test array1 ADD COLUMN Added2 UInt32;
```
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/clickhouse/alter.png" alt="ClickHouse SQL Statement operation" />
</div>
- **SELECT WITH WHERE CLAUSE**
```sql
SELECT * FROM test array1 WHERE str='Somethingl...'
```
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/clickhouse/selectwithwhere.png" alt="ClickHouse SQL Statement operation" />
</div>
- **UPDATE**
```sql
ALTER TABLE test_array1 UPDATE arr = (12] WHERE str='Somethingl...'
```
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/clickhouse/update.png" alt="ClickHouse SQL Statement operation" />
</div>
- **DELETE**
```sql
ALTER TABLE test_array1 DELETE WHERE str= 'Somethingl...'
```
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/clickhouse/delete.png" alt="ClickHouse SQL Statement operation" />
</div>
- **NORMAL INSERT**
1) Step 1 - Creating Table
```sql
CREATE TABLE test array4 (
name String,
date Date
)ENGINE=MergeTree () ORDER BY (name)
```
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/clickhouse/step1.png" alt="ClickHouse SQL Statement operation" />
</div>
2) Step 2 - Insert
```sql
INSERT INTO test_array4 (*) VALUES ('juvane', '1996-01-13')
```
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/clickhouse/step1.png" alt="ClickHouse SQL Statement operation" />
</div>
:::info
**Giving Primary Key**
```
CREATE TABLE db.table_name
(
name1 type1, name2 type2, ...,
PRIMARY KEY(expr1[, expr2,...])]
)
ENGINE = engine;
OR
CREATE TABLE db.table_name
(
name1 type1, name2 type2, ...
)
ENGINE = engine
PRIMARY KEY(expr1[, expr2,...]);
```
:::
### Insert array of objects
Use this operation for inserting array of objects.
#### Required Parameters:
- **Body**
- **Fields**
- **Table name**
**Example Body value:**
```javascript
[
{
date: '2018-01-01',
str: 'Something1...',
arr: [],
arr2: ['1985-01-02', '1985-01-03'],
arr3: [1,2,3,4,5],
id1: '102a05cb-8aaf-4f11-a442-20c3558e4384'
},
{
date: '2018-02-01',
str: 'Something2...',
arr: ['5670000000', 'Something3...'],
arr2: ['1985-02-02'],
arr3: [],
id1: 'c2103985-9a1e-4f4a-b288-b292b5209de1'
}
];
```
<img className="screenshot-full" src="/img/datasource-reference/clickhouse/insertarray.png" alt="ClickHouse Insert array of objects operation" />

91
docs/versioned_docs/version-2.5.0/data-sources/cosmosdb.md Normal file
View file

@ -0,0 +1,91 @@
---
id: cosmosdb
title: CosmosDB
---
# Cosmosdb
ToolJet can connect to CosmosDB databases to read and write data.
## Connection
To add a new **[Azure Cosmos DB](https://docs.microsoft.com/en-us/javascript/api/overview/azure/cosmos-readme?view=azure-node-latest#key-concepts)**, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select CosmosDB from the modal that pops up.
ToolJet requires the following to connect to your Cosmos DB.
- **Cosmos DB Account End point**
- **Cosmos DB Account Key**
:::info
**Azure Cosmos DB End point** is the URL of the Cosmos DB service.
**Azure Cosmos DB Key** is the key that is used to access the Cosmos DB service.
You can find the endpoint and key in the **[Azure Portal](https://portal.azure.com/)**.
:::
<div style={{textAlign: 'center'}}>
![ToolJet - Data source - CosmosDB](/img/datasource-reference/cosmosdb/cosmosdb-connect.png)
</div>
## Supported queries:
- [Listing databases](#listing-databases)
- [Listing containers](#listing-containers)
- [Inserting item(s)](#inserting-items)
- [Retrieving an item](#retrieving-an-item)
- [Deleting an item](#deleting-an-item)
- [Querying documents](#querying-documents)
### Listing databases
This query lists all the databases in a Cosmos DB.
### Listing containers
This query lists all the containers of a database in a Cosmos DB.
| Fields | description |
| ----------- | ----------- |
| database | id of the database |
### Inserting item(s)
This query inserts one or more items in a container of a database in a Cosmos DB.
| Fields | description |
| ----------- | ----------- |
| database | id of the database |
| container | id of the container |
| items | items to be inserted. Example: `{{[{name: "one", val: 1}, {name:"two", val: 2}]}}` |
### Retrieving an item
To read a single item from a container of a database in a Cosmos DB, use the following query.
| Fields | description |
| ----------- | ----------- |
| database | id of the database |
| container | id of the container |
| item | id of the item |
### Deleting an item
To delete an item from a container of a database in a Cosmos DB, use the following query.
| Fields | description |
| ----------- | ----------- |
| database | id of the database |
| container | id of the container |
| item | id of the item |
### Querying documents
To query documents from a container of a database in a Cosmos DB using SQL-like syntax, use the following query.
| Fields | description |
| ----------- | ----------- |
| database | id of the database |
| container | id of the container |
| query | query to be executed. Example: `SELECT * FROM c WHERE c.age > 20 AND c.age <= 30` |

311
docs/versioned_docs/version-2.5.0/data-sources/couchdb.md Normal file
View file

@ -0,0 +1,311 @@
---
id: couchdb
title: CouchDB
---
# CouchDB
ToolJet can connect to CouchDB databases to read and write data. CocuhDB uses basic auth for authentication , username and password for the database is required to create an CouchDB data source on ToolJet. For more info visit [CouchDB docs](https://docs.couchdb.org/en/stable/).
<img className="screenshot-full" src="/img/datasource-reference/couchdb/auth_couch.gif" alt="Couch auth" />
## Supported queries:
- [Listing records](#listing-records)
- [Retrieving a record](#retrieving-a-record)
- [Creating a record](#creating-a-record)
- [Updating a record](#updating-a-record)
- [Deleting a record](#deleting-a-record)
- [Find](#find)
- [Retrieving a view](#retrieving-a-view)
:::info
NOTE: Record ID is same as document ID("_id") .
:::
### Listing records
This query lists all the records in a database.
#### Optional parameters:
- **Include docs**
- **Descending order**
- **Limit**
- **Skip**
:::info
descending (boolean) – Return the documents in descending order by key. Default is false.
limit (number) – Limit the number of the returned documents to the specified number.
skip (number) – Skip this number of records before starting to return the results. Default is 0.
include_docs (boolean) – include_docs key is set to false by default , if true it returns the document data along with the default fields.
:::
<img className="screenshot-full" src="/img/datasource-reference/couchdb/listing.png" alt="Couch listing"/>
Example response from CouchDb:
```json
{
"total_rows": 3,
"offset": 0,
"rows": [
{
"id": "23212104e60a71edb42ebc509f000dc2",
"key": "23212104e60a71edb42ebc509f000dc2",
"value": {
"rev": "1-0cc7f48876f15883394e5c139c628123"
}
},
{
"id": "23212104e60a71edb42ebc509f00216e",
"key": "23212104e60a71edb42ebc509f00216e",
"value": {
"rev": "1-b3c45696b10cb08221a335ff7cbd8b7a"
}
},
{
"id": "23212104e60a71edb42ebc509f00282a",
"key": "23212104e60a71edb42ebc509f00282a",
"value": {
"rev": "1-da5732beb913ecbded309321cac892d2"
}
},
]
}
```
### Retrieving a record
#### Required parameters:
- **Record ID**
<img className="screenshot-full" src="/img/datasource-reference/couchdb/retrieving.png" alt="Couch retrieve view" />
Example response from CouchDb:
```json
{
"_id": "e33dc4e209689cb0400d095fc401a1e0",
"_rev": "1-a62af8e14451af88c150e7e718b7a0e8",
"0": {
"name": "test data"
}
}
```
The returned JSON is the JSON of the document, including the document ID and revision number:
### Creating a record
<img className="screenshot-full" src="/img/datasource-reference/couchdb/creating.png" alt="Couch create view"/>
#### Example Records:
```json
[{"name":"tooljet"}]
```
Click on the `run` button to run the query.
:::info
NOTE: Query must be saved before running.
:::
Example response from CouchDb:
```json
{
"ok": true,
"id": "23212104e60a71edb42ebc509f0049a2",
"rev": "1-b0a625abc4e21ee554737920156e911f"
}
```
### Updating a record
You can get the revision id value, by sending a GET request to get the document details.
You get the document as JSON in the response. For each update to the document, the revision field "_rev" gets changed.
#### Required parameters:
- **Revision ID**
- **Record ID**
<img className="screenshot-full" src="/img/datasource-reference/couchdb/updating.png" alt="Couch update view" />
#### Example body:
```json
[{"name":"tooljet"}]
```
Click on the `run` button to run the query.
:::info
NOTE: Query must be saved before running.
:::
Example response from CouchDb:
```json
{
"ok": true,
"id": "23212104e60a71edb42ebc509f0049a2",
"rev": "2-b0a625abc4e21ee554737920156e911f"
}
```
### Deleting a record
#### Required parameters:
- **Revision ID**
- **Record ID**
<img className="screenshot-full" src="/img/datasource-reference/couchdb/deleting.png" alt="Couch delete view"/>
Click on the `run` button to run the query.
Example response from CouchDb:
```json
{
"ok": true,
"id": "rev_id=2-3d01e0e87139c57e9bd083e48ecde13d&record_id=e33dc4e209689cb0400d095fc401a1e0",
"rev": "1-2b99ef28c03e68ea70bb668ee55ffb7b"
}
```
### Find
Find documents using a declarative JSON querying syntax.
#### Required parameters:
- **Selector**
:::info
NOTE:
selector syntax: https://pouchdb.com/guides/mango-queries.html
:::
<img className="screenshot-full" src="/img/datasource-reference/couchdb/find.png" alt="Couch find" />
#### Example body:
```json
{
"selector": {
"year": {"$gte": 2015}
},
"fields": ["year"]
}
```
Click on the `run` button to run the query.
:::info
NOTE:
selector (json) – JSON object describing criteria used to select documents.
More information : https://docs.couchdb.org/en/stable/api/database/find.html
:::
Example response from CouchDb:
<img className="screenshot-full" src="/img/datasource-reference/couchdb/find_response.png" alt="Couch find response" />
### Retrieving a view
Views are the primary tool used for querying and reporting on CouchDB documents.
#### Required parameters:
- **View url**
Reference for view :https://docs.couchdb.org/en/3.2.0/ddocs/views/intro.html#what-is-a-view
<img className="screenshot-full" src="/img/datasource-reference/couchdb/get_view.png" alt="Couch get view" />
#### Optional parameters:
- **Start key**
- **End key**
- **Limit**
- **Skip**
Click on the `run` button to run the query.
:::info
startkey (json) – Return records starting with the specified key.
endkey (json) – Stop returning records when the specified key is reached.
limit (number) – Limit the number of the returned documents to the specified number.
skip (number) – Skip this number of records before starting to return the results. Default is 0.
:::
Example response from CouchDb:
```json
{
"total_rows": 4,
"offset": 0,
"rows": [
{
"id": "23212104e60a71edb42ebc509f000dc2",
"key": "23212104e60a71edb42ebc509f000dc2",
"value": {
"rev": "1-0cc7f48876f15883394e5c139c628123"
}
},
{
"id": "23212104e60a71edb42ebc509f00216e",
"key": "23212104e60a71edb42ebc509f00216e",
"value": {
"rev": "1-b3c45696b10cb08221a335ff7cbd8b7a"
}
},
{
"id": "23212104e60a71edb42ebc509f00282a",
"key": "23212104e60a71edb42ebc509f00282a",
"value": {
"rev": "1-da5732beb913ecbded309321cac892d2"
}
},
{
"id": "23212104e60a71edb42ebc509f002cbd",
"key": "23212104e60a71edb42ebc509f002cbd",
"value": {
"rev": "1-ca5bb3c0767eb42ea6c33eee3d395b59"
}
}
]
}
```

56
docs/versioned_docs/version-2.5.0/data-sources/custom-js.md Normal file
View file

@ -0,0 +1,56 @@
---
id: run-js
title: Run JavaScript code
---
# Run JavaScript code
You can write custom JavaScript code to interact with components and queries. To do that, you just need to create a new query and select **Run JavaScript Code** from the data sources dropdown.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/custom-javascript/run-js.png" alt="Run JavaScript code" />
</div>
#### Example: Displaying random number
- Let's drag a **button** and a **text** widget inside a container widget.
- Click on the `+` on the query panel to create a query and select **Run JavaScript code** from the available datasources
- Write the code in **JavaScript editor** and save the query:
```jsx
const a = Math.floor(Math.random() * (10 - 1)) + 1;
return a;
```
:::tip
- The `return` statement is used to end the code and the value specified to the `return` statement will be stored in the `data` property of the query.
ex: `{{queries.runjs1.data}}`
- You cannot use `console.log` in Run JavaScript code
:::
- Let's edit the properties of widgets:
- Add an event handler to the button - Select **On Click** event, **Run Query** action, and select the `runjs1` query that we created. This will run the JavaScript code every time the button is clicked.
- Edit the property of text widget - In the text field enter **Random number: `{{queries.runjs1.data}}`**. It will display the output as Random number: *result from JS code*
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/custom-javascript/jsrandom.gif" alt="Run JavaScript code" />
</div>
You can also write custom JavaScript code to get the data from **External APIs** and manipulate the response for graphical representation. Here's the [tutorial](https://blog.tooljet.com/build-github-stars-history-app-in-5-minutes-using-low-code/) on how we used custom JavaScript code to build an app using GitHub API.
### Libraries
ToolJet allows you to internally utilize these libraries:
| Name | Documentation |
| ----------- | ----------- |
| Moment | [https://momentjs.com/docs/](https://momentjs.com/docs/) |
| Lodash | [https://lodash.com/docs/](https://lodash.com/docs/) |
| Axios | [https://axios-http.com/docs/intro](https://axios-http.com/docs/intro) |
:::info
Issues with writing custom JavaScript code? Ask in our [Slack Community](https://tooljet.com/slack).
:::

38
docs/versioned_docs/version-2.5.0/data-sources/dynamodb.md Normal file
View file

@ -0,0 +1,38 @@
---
id: dynamodb
title: DynamoDB
---
# DynamoDB
ToolJet can connect to DynamoDB to read and write data.
## Connection
To add a new DynamoDB, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select DynamoDB from the modal that pops up.
ToolJet requires the following to connect to your DynamoDB.
- **Region**
- **Access key**
- **Secret key**
It is recommended to create a new IAM user for the database so that you can control the access levels of ToolJet.
<img className="screenshot-full" src="/img/datasource-reference/dynamo-connect.png" alt="ToolJet - Dynamo connection" height="250"/>
Click on 'Test connection' button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on 'Save' button to save the data source.
## Querying DynamoDB
Click on `+` button of the query manager at the bottom panel of the editor and select the database added in the previous step as the data source. Select the operation that you want to perform and click 'Save' to save the query.
<img className="screenshot-full" src="/img/datasource-reference/dynamo-query.png" alt="ToolJet - Dynamo query" height="250"/>
Click on the 'run' button to run the query. NOTE: Query should be saved before running.
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations)
:::

80
docs/versioned_docs/version-2.5.0/data-sources/elasticsearch.md Normal file
View file

@ -0,0 +1,80 @@
---
id: elasticsearch
title: Elasticsearch
---
# Elasticsearch
ToolJet can connect to your Elasticsearch cluster to read and write data.
## Connection
Please make sure the host/IP of the Elasticsearch cluster is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist our IP**.
To add a new Elasticsearch database, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select Elasticsearch from the modal that pops up.
ToolJet requires the following to connect to your Elasticsearch cluster:
- **Host**
- **Port**
- **Username**
- **Password**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/elasticsearch/connect.png" alt="Elastic connect" />
</div>
Elastic search datasource is also providing an option for connecting services with ssl certificates.
- You can either use CA / Client certificates option.
<img className="screenshot-full" src="/img/datasource-reference/elasticsearch/ssl.png" alt="Elastic ssl" />
## Querying Elasticsearch
Click on `+` button of the query manager at the bottom panel of the editor and select the Elasticsearch added in the previous step as the data source.
Select the operation that you want to perform on your Elasticsearch cluster and click `Create` to save the query.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/elasticsearch/query.png" alt="Elastic query" />
</div>
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
:::
## Supported operations
#### Search
This operation allows you to execute a search query and get back search hits that match the query. Read the Elasticsearch's `Search` guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-search.html)**.
<img className="screenshot-full" src="/img/datasource-reference/elasticsearch/elastic-search.png" alt="Elastic search" />
#### Index a document
This operation allows you to add a JSON document to the specified data stream or index. Read the Elasticsearch's `Index` guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-index_.html)**.
<img className="screenshot-full" src="/img/datasource-reference/elasticsearch/index.png" alt="Elastic index"/>
#### Get a document
This operation allows you to retrieve the specified JSON document from the index. Read the Elasticsearch's `Get` guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-get.html)**.
<img className="screenshot-full" src="/img/datasource-reference/elasticsearch/get.png" alt="Elastic get"/>
#### Update a document
This operation allows to update a document using the specified script. Read the Elasticsearch's `Update` guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-update.html)**.
<img className="screenshot-full" src="/img/datasource-reference/elasticsearch/update.png" alt="Elastic update" />

163
docs/versioned_docs/version-2.5.0/data-sources/firestore.md Normal file
View file

@ -0,0 +1,163 @@
---
id: firestore
title: Cloud Firestore
---
# Cloud Firestore
## Connection
ToolJet connects to your Cloud Firestore using JSON key of your GCP service account.
To generate a new key, check out [Firestore's official documentation](https://cloud.google.com/iam/docs/creating-managing-service-account-keys#iam-service-account-keys-create-console).
Once the key is downloaded, click on `+` button of data sources panel at the left-bottom corner of the app editor. Select Firestore from the modal that pops up. Paste the key in the field for GCP key. Click on **Test connection** button to verify if the service account can access Firestore from ToolJet server. Click on **Save** button to save the datasource.
<img className="screenshot-full" src="/img/datasource-reference/firestore/add-ds-firestore.gif" alt="firestore add ds"/>
## Querying Firestore
Click on `+` button of the query manager at the bottom panel of the editor and select the database added in the previous step as the data source.
<img className="screenshot-full" src="/img/datasource-reference/firestore/firestore-query.png" alt="firestore QUERY" />
Select the operation that you want to perform on Firestore and click **Save** to save the query.
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
:::
## Supported operations
1. [Get document](#get-document)
2. [Query collection](#query-collection)
3. [Add Document to Collection](#add-document-to-collection)
4. [Update document](#update-document)
5. [Set document](#set-document)
6. [Bulk update using document id](#bulk-update-using-document-id)
7. [Delete document](#delete-document)
### Get document
Use this operation to get the data in a document.
#### Required parameters:
- **Path**: Enter the path of the document. Path format: `collection name/document id`. ex: `books/23e2wsds32`
<img className="screenshot-full" src="/img/datasource-reference/firestore/get.png" alt="firestore get" />
### Query collection
Use this operation to query all the documents in a collection. Check firestore doc [here](https://firebase.google.com/docs/reference/js/v8/firebase.database.Query).
#### Required parameters:
- **Path**: Enter the name of the collection to be queried. Example: `books`
#### Optional parameters:
- **Order type**: Select ascending or descending from the dropdown.
- **Limit**: Maximum number of documents to return in response. By default will return maximum 25 results. Maximum of 100 results allowed per request. The Limit value should be of integer type.
- **Field, Operator, and Value**: For filtering the results, you can enter a document field name, use appropriate operator from the dropdown and set a value.
<img className="screenshot-full" src="/img/datasource-reference/firestore/query-collection.png" alt="firestore collection"/>
### Add Document to Collection
Use this operation for creating a new document in a collection.
#### Required parameters:
- **Collection**: Enter the path of the document in a collection. Path format: `collection name/document id`. ex: `books/33243dwe2332`
- **Body**: Enter the Field names and their values in json form. example body:
```json
{
"Author": "Shubh",
"id": 5
}
```
<img className="screenshot-full" src="/img/datasource-reference/firestore/add-document.png" alt="firestore document" />
### Update document
Use this operation for updating the existing document in a collection. Also, it only updates fields if they exist, but doesn't replace an entire object like [set operation](#set-document).
#### Required parameters:
- **Path**: Enter the path of the document in a collection. Path format: `collection name/document id`. ex: `books/33243dwe2332`
- **Body**: Enter the Field names and their values in json form. example body:
```json
{
"Author": "Shubhendra",
"id": 3
}
```
<img className="screenshot-full" src="/img/datasource-reference/firestore/update.png" alt="firestore update" />
### Set document
This operation replaces your chosen object with the value that you provide. So if your object has 5 fields, and you use Set operation and pass object with 3 fields, it will now have 3 fields.
#### Required parameters:
- **Path**: Enter the path of the document in a collection. Path format: `collection name/document id`. ex: `books/33243dwe2332`
- **Body**: Enter the Field names and their values in json form. example body:
```json
{
"Author": "Shefewfbh",
"id": 9
}
```
<img className="screenshot-full" src="/img/datasource-reference/firestore/set.png" alt="firestore set" />
### Bulk update using document id
Use this operation for bulk updating documents.
#### Required parameters:
- **Collection**:
- **Key for document ID**:
- **Records**:
<img className="screenshot-full" src="/img/datasource-reference/firestore/bulk.png" alt="firestore bulk" />
### Delete document
Use this operation for deleting a document in a collection.
#### Required parameters:
- **Path**: Enter the path of the document to be deleted in a collection. Path format: `collection name/document id`. ex: `books/33243dwe2332`
<img className="screenshot-full" src="/img/datasource-reference/firestore/delete.png" alt="firestore delete"/>
## Transforming firestore query result for Table widget
The Firestore query result is in the form of object so we’ll need to transform it into array.
```js
return data = Array(data)
```

41
docs/versioned_docs/version-2.5.0/data-sources/gcs.md Normal file
View file

@ -0,0 +1,41 @@
---
id: gcs
title: Google Cloud Storage
---
# Google Cloud Storage
ToolJet can connect to GCS buckets and perform various operation on them.
## Supported operations
-**Read file**
-**Upload file**
-**List buckets**
-**List files in a bucket**
-**Signed url for download**
-**Signed url for upload**
## Connection
To add a new GCS source, click on the **Add or edit datasource** icon on the left sidebar of the app editor and click on `Add datasource` button. Select GCS from the modal that pops up.
ToolJet requires the **json private key** of a service account to be able to connect to GCS.
You can follow the [google documentation](https://cloud.google.com/docs/authentication/getting-started) to get started.
<img className="screenshot-full" src="/img/datasource-reference/gcs-connect.png" alt="gcs connection" />
Click on **Test connection** button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on **Save** button to save the data source.
## Querying GCS
Click on `+` button of the **query manager** at the bottom panel of the editor and select the data source added in the previous step as the data source. Select the operation that you want to perform and click **Save** to save the query.
<img className="screenshot-full" src="/img/datasource-reference/gcs-query.png" alt="gcs query" />
Click on the **run** button to run the query.
**NOTE**: Query should be saved before running.
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations)
:::

112
docs/versioned_docs/version-2.5.0/data-sources/google.sheets.md Normal file
View file

@ -0,0 +1,112 @@
---
id: google.sheets
title: Google Sheets
---
# Google Sheets
ToolJet can connect to Google Sheet using OAuth 2.0, which helps us to limit an application's access to a user's account.
## How to integrate Google Sheets
<iframe height="500" src="https://www.youtube.com/embed/3PO41waW2CQ" title="ToolJet Googlsheet Integration" frameborder="0" allowfullscreen width="100%"></iframe>
## Self-Hosted Configuration
If you are self-hosting the application, you will need to perform some additional steps.
1. Follow the [Google OAuth 2.0 setup steps outlined here](/docs/setup/env-vars#google-oauth--optional-)
2. Set the following environment variables with the values from the previous step:
* `GOOGLE_CLIENT_ID`
* `GOOGLE_CLIENT_SECRET`
* `TOOLJET_HOST`
3. Enable the Google Sheets API in the GCP console
## Authorization Scopes
You can create a Google Sheets data source with one of either of the two permission scopes :
1. **Read Only**
2. **Read and Write**
<img className="screenshot-full" src="/img/datasource-reference/google-sheets/googlesheets.gif" alt="google sheets" />
## Operations
Using Google sheets data source you can perform several operations from your applications like:
1. **[Read data from a sheet](/docs/data-sources/google.sheets#read-data-from-a-sheet)**
2. **[Append data to a sheet](/docs/data-sources/google.sheets#append-data-to-a-sheet)**
3. **[Update single row of a sheet](/docs/data-sources/google.sheets#update-single-row-of-a-sheet)**
4. **[Delete row from a sheet](/docs/data-sources/google.sheets#delete-row-from-a-sheet)**
5. **[Get spreadsheet info](/docs/data-sources/google.sheets#get-spreadsheet-info)**
### Read data from a sheet
This operation returns the table data from the spreadsheet in the form of json object.
| Fields | description |
| ----------- | ----------- |
| Spreadsheet ID | It is mandatory to enter the spreadsheet-id. The spreadsheet-id can be found in the URL of the spreadsheet. Example URL: https://docs.google.com/spreadsheets/d/1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM/edit#gid=0 - in this URL, the `1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM` is the spreadsheet-id. |
| Range | This is optional. You can specify the range of cells in this field. If left empty, it will select the range `A1:Z500`. |
| Sheet | This is optional. You can specify `sheet name` if it has more than 1 sheets, else it will automatically choose the first sheet. |
<img className="screenshot-full" src="/img/datasource-reference/google-sheets/read-data-op.png" alt="google sheets read"/>
### Append data to a sheet
You can add more rows to the table using the append operation.
| Fields | description |
| ----------- | ----------- |
| Spreadsheet ID | It is mandatory to enter the spreadsheet-id. The spreadsheet-id can be found in the URL of the spreadsheet. Example URL: https://docs.google.com/spreadsheets/d/1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM/edit#gid=0 - in this URL, the `1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM` is the spreadsheet-id. |
| Sheet | This is optional. You can specify `sheet name` if it has more than 1 sheets, else it will automatically choose the first sheet. |
| Rows | Enter the row data in the json array form. Each object in an array will represent a single row. Example: `[ {"name":"John", "email":"John@tooljet.com"},{...},{...} ]` In each object, the `key` represents the **column name** and the `value` represents the **cell data**. |
<img className="screenshot-full" src="/img/datasource-reference/google-sheets/append-data-op.png" alt="google sheets append" />
### Update single row of a sheet
You can update the existing data in sheet using this operation.
| Fields | description |
| ----------- | ----------- |
| Spreadsheet ID | It is mandatory to enter the spreadsheet-id. The spreadsheet-id can be found in the URL of the spreadsheet. Example URL: https://docs.google.com/spreadsheets/d/1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM/edit#gid=0 - in this URL, the `1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM` is the spreadsheet-id. |
| Where | Enter the column name such as `id` for choosing a row. |
| Operator | Choose the `===` operator to check the equality. |
| Value | Enter the any `id` number/name that you want to update. |
| Rows | Enter the row data. Example: `{{({id: components.textinput4.value, company: components.textinput1.value, position: components.textinput2.value, url: components.textinput3.value, 'date-applied': components.datepicker1.value, status: components.dropdown1.value})}}` |
<img className="screenshot-full" src="/img/datasource-reference/google-sheets/update-data-op.png" alt="google sheets update" />
### Delete row from a sheet
Use this operation delete a specific row from the sheet.
| Fields | description |
| ----------- | ----------- |
| Spreadsheet ID | It is mandatory to enter the spreadsheet-id. The spreadsheet-id can be found in the URL of the spreadsheet. Example URL: https://docs.google.com/spreadsheets/d/1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM/edit#gid=0 - in this URL, the `1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM` is the spreadsheet-id. |
| GID | You'll find the GID in the end of the URL of spreadsheet. In the example mentioned above, the GID is 0 |
| Delete row number | Just enter the row number that you want to delete. |
<img className="screenshot-full" src="/img/datasource-reference/google-sheets/delete-row-op.png" alt="google sheets delete"/>
### Get spreadsheet info
This operation can be used to get some basic information of the spreadsheet such as the number of sheets, theme, time-zone, format, and url etc.
Here is the `Preview` of the query that used the get spreadsheet info operation.
<img className="screenshot-full" src="/img/datasource-reference/google-sheets/get-info2.png" alt="google sheets get info" />

55
docs/versioned_docs/version-2.5.0/data-sources/graphql.md Normal file
View file

@ -0,0 +1,55 @@
---
id: graphql
title: GraphQL
---
# GraphQL
ToolJet can connect to GraphQL endpoints to execute queries and mutations.
## Connection
To add a new GraphQL datasource, click the `+` button on data sources panel at the bottom-left corner of the app builder and then select GraphQL from the modal that pops up.
ToolJet requires the following to connect to a GraphQL datasource:
- **URL of the GraphQL endpoint**
The following optional parameters are also supported:
| Type | Description |
| ----------- | ----------- |
| URL params | Additional query string parameters|
| headers | Any headers the GraphQL source requires|
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/graphql/graphql-ds.png" alt="ToolJet - Data source - GraphQl"/>
</div>
Click on the **Save** button to save the data source.
## Querying GraphQL
Click on `+` button of the query manager at the bottom panel of the editor and select the GraphQL endpoint added in the previous step as the data source.
### Required Parameters:
- **Query**
### Optional Parameters
- **Variable**
- **Headers**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/graphql/headers.png" alt="ToolJet - Data source - GraphQl"/>
</div>
Click on the 'Create' button to create the query or Click on the `Run` button to create and trigger the query.
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations)
:::

88
docs/versioned_docs/version-2.5.0/data-sources/grpc.md Normal file
View file

@ -0,0 +1,88 @@
---
id: grpc
title: gRPC
---
<div className='badge badge--primary heading-badge'>Self-hosted only</div>
:::caution
only self-hosted deployments will have access to a gRPC datasource that is capable of handling unary requests and responses.
:::
- [Setup](#setup)
- [Querying gRPC](#querying-grpc)
## Setup
### Step 1: Upgrade ToolJet to the version 2.5 or above
Find instructions on how to do this in the setup guides located here: https://docs.tooljet.com/docs/setup/.
### Step 2: Add proto files
At the root, create a directory named "**protos**" and add a "**service.proto**" file inside it.
### Step 3: Mount Volumes
In the `docker-compose.yml` add
```bash
./protos:/app/protos
```
to the 2 volume sections for **plugins** and **server**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/grpc/proto1.png" alt="gRPC: datasource" width='500' />
</div>
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/grpc/proto2.png" alt="gRPC: datasource" width='500'/>
</div>
### Step 4: Reboot the instance
```bash
docker-compose up -d
```
## Querying gRPC
After setting up your proto files, you should be able to establish a connection to gRPC by going to the [global datasource](/docs/data-sources/overview) page.
### Connect the gRPC datasource
ToolJet requires the following to connect to gRPC servers:
- **Server URL**
- **Authentication type** (None, Basic, Bearer, and API key)
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/grpc/connection.png" alt="gRPC: connection" />
</div>
Once you have added the gRPC from the global datasource page, you'll find it on the query panel of the application.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/grpc/grpcgds.png" alt="gRPC: connection" />
</div>
### Creating query
You can now query a particular RPC method of the added services.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/grpc/query.png" alt="gRPC: connection" />
</div>

129
docs/versioned_docs/version-2.5.0/data-sources/influxdb.md Normal file
View file

@ -0,0 +1,129 @@
---
id: influxdb
title: InfluxDB
---
# InfluxDB
ToolJet can connect to InfluxDB databases to read and write data. Use the Token authentication scheme to authenticate to the InfluxDB API. For more info visit [InfluxDB docs](https://docs.influxdata.com/).
## Connection
ToolJet connects to InfluxDB using :
- **API Token**
- **Host**
- **Port**
- **Protocol** (HTTP/HTTPS)
:::info
For generating API Token visit [InfluxDB docs](https://docs.influxdata.com/influxdb/cloud/security/tokens/create-token/).
:::
<div style={{textAlign: 'center'}}>
![ToolJet - Data source - influxDB](/img/datasource-reference/influxdb/influxauth.png)
</div>
## Supported queries:
- [Write data](#write-data)
- [Query data](#query-data)
- [Generate an Abstract Syntax Tree (AST) from a query](#generate-an-abstract-syntax-tree-ast-from-a-query)
- [Retrieve query suggestions](#retrieve-query-suggestions)
- [Retrieve query suggestions for a branching suggestion](#retrieve-query-suggestions-for-a-branching-suggestion)
- [Analyze a Flux query](#analyze-a-flux-query)
- [List buckets](#list-buckets)
- [Create a bucket](#create-a-bucket)
- [Retrieve a bucket](#retrieve-a-bucket)
- [Update a bucket](#update-a-bucket)
- [Delete a bucket](#delete-a-bucket)
<img className="screenshot-full" src="/img/datasource-reference/influxdb/operations.png" alt="influx operations" />
### Write data
This operation writes data to a bucket.
#### Required parameters:
- **Bucket**
- **Organization name or ID**
#### Optional parameters:
- **Precision**
### Query data
Retrieves data from InfluxDB buckets.
#### Required parameters:
- **Organization name or ID**
### Generate an Abstract Syntax Tree (AST) from a query
This operation analyzes flux query and generates a query specification.
#### Required parameters:
- **Query**
### Retrieve query suggestions
This query retrieve query suggestions.
### Retrieve query suggestions for a branching suggestion
This operation retrieve query suggestions for a branching suggestion.
#### Required parameters:
- **Name**
### Analyze a Flux query
This Analyzes a Flux query.
#### Required parameters:
- **Query**
### List buckets
This operation lists all the buckets in a database.
### Create a bucket
#### Required parameters:
- **Query**
### Retrieve a bucket
This operation retrieve a bucket in a database.
#### Required parameters:
- **Bucket ID**
### Update a bucket
#### Required parameters:
- **Bucket ID**
- **Query**
### Delete a bucket
#### Required parameters:
- **Bucket ID**

64
docs/versioned_docs/version-2.5.0/data-sources/mailgun.md Normal file
View file

@ -0,0 +1,64 @@
---
id: mailgun
title: Mailgun
---
# 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" />
:::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).
:::
## Connection
To add a new Mailgun API datasource, click the **Datasource manager** icon on the left-sidebar of the app builder and click on the `Add datasource` button, then select Mailgun API from the modal that pops up.
Enter your **Mailgun API key** in the "API key" field.
:::tip
Mailgun API key is required to create an Mailgun datasource on ToolJet. You can generate API key by visiting [Mailgun account page](https://app.mailgun.com/app/account/security/api_keys).
:::
Click on the 'Save' button to save the data source.
## Supported operations
1. Email service
### Email service
Required parameters:
- Send email to
- Send email from
- Subject
- Body as text
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:
`{{"dev@tooljet.io"}}`.
**Send mail from** - accepts a string.
For example: `admin@tooljet.io`
:::
:::tip
**Send a single email to multiple recipients** - The `Send mail to` field can contain an array of recipients, which will send a single email with all of the recipients in the field.
**Send multiple individual emails to multiple recipients** - set <b>Multiple recipients</b> field to `{{true}}` and the `Send mail to` field will be split into multiple emails and send to each recipient.
:::
:::note
NOTE: Query should be saved before running.
:::

49
docs/versioned_docs/version-2.5.0/data-sources/mariadb.md Normal file
View file

@ -0,0 +1,49 @@
---
id: mariadb
title: MariaDB
---
# MariaDB
ToolJet can connect to MariaDB to read and write data.
## Connection
To add a new MariaDB data source, click on the `+` button on datasources panel at the left sidebar of the app builder. Select MariaDB from the modal that pops up.
ToolJet requires the following to connect to your DynamoDB.
- **Host**
- **Username**
- **Password**
- **Connection Limit**
- **Port**
- **Database**
- **SSL**
- **SSL Certificate**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/mariadb/connection.png" alt="MariaDB" />
</div>
Click on **Test connection** button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on **Save** button to save the data source.
## Querying MariaDB
Click on `+` button of the query manager at the bottom panel of the builder and select the MariaDB datasource added in the previous step.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/mariadb/query.png" alt="MariaDB query" />
</div>
Click on the **run** button to run the query.
**NOTE**: Query should be saved before running.
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
:::

51
docs/versioned_docs/version-2.5.0/data-sources/minio.md Normal file
View file

@ -0,0 +1,51 @@
---
id: minio
title: MinIO
---
# MinIO
ToolJet can connect to minio and perform various operation on them.
## Supported operations
- **Read object**
- **Put object**
- **Remove object**
- **List buckets**
- **List objects in a bucket**
- **Presigned url for download**
- **Presigned url for upload**
## Connection
To add a new minio source, click on the **Add or edit datasource** icon on the left sidebar of the app editor and click on `Add datasource` button. Select Minio from the modal that pops up.
ToolJet requires the following to connect to your DynamoDB:
- **Host**
- **Port**
- **Access key**
- **Secret key**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/minio-connect.png" alt="miniIo connect" />
</div>
Click on **Test connection** button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on **Save** button to save the data source.
## Querying Minio
Click on `+` button of the **query manager** at the bottom panel of the editor and select the data source added in the previous step as the data source. Select the operation that you want to perform and click **Save** to save the query.
<img className="screenshot-full" src="/img/datasource-reference/minio-query.png" alt="miniIo query" />
Click on the **run** button to run the query.
**NOTE**: Query should be saved before running.
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations)
:::

109
docs/versioned_docs/version-2.5.0/data-sources/mongodb.md Normal file
View file

@ -0,0 +1,109 @@
---
id: mongodb
title: MongoDB
---
# MongoDB
ToolJet can connect to MongoDB to read and write data.
## Connection
Please make sure the host/ip of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP.
To add a new MongoDB, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select MongoDB from the modal that pops up.
ToolJet requires the following to connect to your MongoDB.
- **Host**
- **Port**
- **Username**
- **Password**
It is recommended to create a new MongoDB user so that you can control the access levels of ToolJet.
<img className="screenshot-full" src="/img/datasource-reference/mo-connect.png" alt="ToolJet - Mongo connection" height="250"/>
Click on 'Test connection' button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on 'Save' button to save the data source.
## Querying MongoDB
Click on `+` button of the query manager at the bottom panel of the editor and select the database added in the previous step as the data source. Select the operation that you want to perform and click 'Save' to save the query.
<img className="screenshot-full" src="/img/datasource-reference/mo-query.png" alt="ToolJet - Mongo query" height="250"/>
Click on the 'run' button to run the query. NOTE: Query should be saved before running.
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations)
:::
### Supported operations
- [List Collections](#list-collections)
- [Find One](#find-one)
- [Find Many](#find-many)
- [Total Count](#total-count)
- [Count](#count)
- [Distinct](#distinct)
- [Insert One](#insert-one)
- [Insert Many](#insert-many)
- [Update One](#update-one)
- [Update Many](#update-many)
- [Replace One](#replace-one)
- [Find One and Update](#find-one-and-update)
- [Find One and Replace](#find-one-and-replace)
- [Find One and Delete](#find-one-and-delete)
- [Aggregate](#aggregate)
- [Delete One](#delete-one)
- [Delete Many](#delete-many)
- [Bulk Operations](#bulk-operations)
#### List Collections
Returns list of collections
#### Fine One
Return a document which satisfy the given filter and options. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/findOne)
#### Fine Many
Return list of documents which satisfy the given filter and options. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/find/)
#### Total Count
Returns an estimation of the number of documents in the collection based on collection metadata. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#estimateddocumentcount)
#### Count
Returns the number of documents based on the filter. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#countdocuments)
#### Distinct
Retrieve a list of distinct values for a field based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/distinct/)
#### Insert One
Insert a document. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/insertOne/)
#### Insert Many
Insert list of documents. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/insertMany/)
#### Update One
Update a document based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/updateOne/)
#### Update Many
Update many documents based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/updateMany/)
#### Replace One
Replace a document based on filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/replaceOne/)
#### Find One and Update
If your application requires the document after updating, use this instead of `Update One`. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneandupdate)
#### Find One and Replace
If your application requires the document after updating, use this instead of `Replace One`. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneandreplace)
#### Find One and Delete
If your application requires the document after deleting, use this instead of `Delete One`. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneanddelete)
#### Aggregate
Aggregation operations are expressions you can use to produce reduced and summarized results. [Reference](https://docs.mongodb.com/drivers/node/v4.0/fundamentals/aggregation/)
#### Delete One
Delete a record based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/deleteOne/)
#### Delete Many
Delete many records based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/deleteMany/)
#### Bulk Operations
Perform bulk operations. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/bulkWrite/)
### Dynamic Quries
```javascript
{ amount: { $lt: '{{ components.textinput1.value }}' }}
// Dates
// supported: Extended JSON syntax
{ createdAt: { $date: '{{ new Date('01/10/2020') }}'} }
// not supported: MongoDB classic syntax
{ createdAt: new Date('01/10/2020') }
```
Reference on [mongodb extended JSON](https://docs.mongodb.com/manual/reference/mongodb-extended-json/) supported data types

42
docs/versioned_docs/version-2.5.0/data-sources/mssql.md Normal file
View file

@ -0,0 +1,42 @@
---
id: mssql
title: MS SQL Server / Azure SQL databases
---
# MS SQL Server / Azure SQL databases
ToolJet can connect to MS SQL Server & Azure SQL databases to read and write data.
## Connection
Please make sure the host/ip of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP.
To add new MS SQL Server / Azure SQL database, click on the '+' button on data sources panel at the left-bottom corner of the app editor. Select `SQL Server` from the modal that pops up.
ToolJet requires the following to connect to your PostgreSQL database.
- **Host**
- **Port**
- **Username**
- **Password**
- **Azure** - Select this option if you are using Azure SQL databases.
It is recommended to create a new database user so that you can control the access levels of ToolJet.
Click on 'Test connection' button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on 'Save' button to save the data source.
<img className="screenshot-full" src="/img/datasource-reference/mssql/connect.gif" alt="ToolJet - Redis connection" height="420"/>
## Querying SQL Server / Azure SQL databases
Click on '+' button of the query manager at the bottom panel of the editor and select the database added in the previous step as the data source.
Click on the 'run' button to run the query. NOTE: Query should be saved before running.
<img className="screenshot-full" src="/img/datasource-reference/mssql/query.gif" alt="ToolJet - Redis connection" height="420"/>
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations)
:::

65
docs/versioned_docs/version-2.5.0/data-sources/mysql.md Normal file
View file

@ -0,0 +1,65 @@
---
id: mysql
title: MySQL
---
# MySQL
ToolJet can connect to MySQL databases to read and write data.
## Connection
ToolJet requires the following to connect to your MySQL database. Please make sure the host/ip of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP.
To add a new MySQL database, click on the `+` button on data sources panel at left sidebar in the app editor. Select MySQL from the modal that pops up.
ToolJet requires the following to connect to your MySQL database.
- **Host**
- **Port**
- **Username**
- **Password**
It is recommended to create a new MySQL database user so that you can control the access levels of ToolJet.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/mysql/mysql.png" alt="mysql"/>
</div>
Click on **Test connection** button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on **Save** button to save the data source.
## Querying MySQL
Once you have added a MySQL data source, click on `+` button of the query manager to create a new query. There are two modes by which you can query SQL:
1. **[SQL mode](/docs/data-sources/mysql#sql-mode)**
2. **[GUI mode](/docs/data-sources/mysql#gui-mode)**
#### SQL mode
SQL mode can be used to write raw SQL queries. Select SQL mode from the dropdown and enter the SQL query in the editor. Click on the `run` button to run the query.
**NOTE**: Query should be saved before running.
<img className="screenshot-full" src="/img/datasource-reference/mysql/mysql-sqlmode.png" alt="mysql mode" />
#### GUI mode
GUI mode can be used to query MySQL database without writing queries. Select GUI mode from the dropdown and then choose the operation **Bulk update using primary key**. Enter the **Table** name and **Primary key column** name. Now, in the editor enter the records in the form of an array of objects.
**Example**: `{{ [ {id: 1, channel: 33}, {id:2, channel:24} ] }}`
<img className="screenshot-full" src="/img/datasource-reference/mysql/mysql-guimode.png" alt="mysql gui mode" />
Click on the **run** button to run the query. **NOTE**: Query should be saved before running.
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
:::

51
docs/versioned_docs/version-2.5.0/data-sources/n8n.md Normal file
View file

@ -0,0 +1,51 @@
---
id: n8n
title: n8n
---
# n8n
ToolJet can trigger n8n workflows using webhook URLs. Please refer [this](https://docs.n8n.io/) to know more about n8n.
## Connection
Go to the data source manager on the left sidebar and click on `+` button to add new data source. Select n8n from the list of available data sources in the modal that pops-up.
n8n webhooks can be called with or without an **Authentication**. You can keep the `Authentication type` as `none` if your webhook didn't have one or if it has one then you can choose the one from the dropdown and provide credentials:
#### Authentication Types
- **Basic Auth**: To connect your n8n webhooks using basic auth you'll need to provide the following credentials:
- **Username**
- **Password**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/n8n/basicauth.png" alt="n8n basicauth" />
</div>
- **Header Auth**: To connect your n8n webhooks using header auth the following fields are required:
- **Name / Key**
- **Value**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/n8n/headerauth.png" alt="n8n headerauth" />
</div>
:::tip
Webhook credentials and instance credentials are different. Please use the credentials that you use with the webhook trigger. Know more: **[Webhook Authentication](https://docs.n8n.io/nodes/n8n-nodes-base.webhook/#:~:text=then%20gets%20deactivated.-,Authentication,-%3A%20The%20Webhook%20node)**.
:::
## Trigger Workflow
Click on `+` button of the query manager at the bottom panel of the editor and the select n8n as the datasource.
You can trigger a workflow with `GET/POST` URL. Choose the request type from the `Methods` dropdown and then provide the required fields:
- **URL parameters** (Support for GET & POST) `Optional`
- **Body** (Only for POST URL) `Required`
<img className="screenshot-full" src="/img/datasource-reference/n8n/query.png" alt="n8n query" />

234
docs/versioned_docs/version-2.5.0/data-sources/notion.md Normal file
View file

@ -0,0 +1,234 @@
---
id: notion
title: Notion
---
# Notion
ToolJet can connect to a Notion workspace to do operations on notion pages, databases and blocks.
## Connection
For integrating Notion with ToolJet we will need the API token. The API token can be generated from your Notion workspace settings. Read the official Notion docs for [Creating an internal integration with notion API](https://www.notion.so/help/create-integrations-with-the-notion-api).
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/notion/api.png" alt="notion api" />
</div>
## Querying Notion
Notion API provides support for:
- **[Database](#database)**
- **[Page](#page)**
- **[Block](#blocks)**
- **[User](#user)**
<img className="screenshot-full" src="/img/datasource-reference/notion/querying.png" alt="notion querying"/>
:::tip
Before querying Notion, you must share the database with your integration. Click the share button in your database view, find your integration name select it.
<img className="screenshot-full" src="/img/datasource-reference/notion/share.png" alt="notion share"/>
:::
### Database
On database resource you can perform the following operations:
- **[Retrieve a database](#1-retrieve-a-database)**
- **[Query a database](#2-query-a-database)**
- **[Create a database](#3-create-a-database)**
- **[Update a database](#4-update-a-database)**
<img className="screenshot-full" src="/img/datasource-reference/notion/db_q.png" alt="notion db" />
#### 1. Retrieve a database
This operations retrieves a Database object using the ID specified.
##### Required parameters:
- **Database ID**: You'll find the Database ID in the url. Suppose this is the example url: `https://www.notion.so/workspace/XXX?v=YYY&p=ZZZ` then `XXX` is the database ID, `YYY` is the view ID and `ZZZ` is the page ID.
<img className="screenshot-full" src="/img/datasource-reference/notion/db_retrieve.png" alt="notion db retreieve" />
#### 2. Query a database
This operation gets a list of **Pages** contained in the database, filtered and ordered according to the filter conditions and sort criteria provided in the query.
##### Required parameters:
- **Database ID** : You'll find the Database ID in the url. Suppose this is the example url: `https://www.notion.so/workspace/XXX?v=YYY&p=ZZZ` then `XXX` is the database ID, `YYY` is the view ID and `ZZZ` is the page ID.
##### Optional parameters:
- **Filter** : This must be an object of filters
- **Sort** : Array of sort objects
- **Limit** : limit for pagination
- **Start Cursor** : Next object id to continue pagination
#### 3. Create a database
This operation creates a database as a subpage in the specified parent page, with the specified properties.
##### Required parameters:
- **Database ID** : You'll find the Database ID in the url. Suppose this is the example url: `https://www.notion.so/workspace/XXX?v=YYY&p=ZZZ` then `XXX` is the database ID, `YYY` is the view ID and `ZZZ` is the page ID.
- **Page ID** : Page ID of the parent
- **Properties** : Properties defines the columns in a database
##### Optional parameters:
- **Title** : Title should be an array of rich_text properties
- **Icon type** : Currently notion api accepts two icon options, emoji, external URL
- **Icon value** : Value of selected icon type
- **Icon type** : Currently notion api accepts only external URL
- **Cover value** : Value of selected cover type
#### 4. Update a database
This operation updates an existing database as specified by the parameters.
##### Required parameters:
- **Database ID**
##### Optional parameters:
- **Title** : Title should be an array of rich_text properties
- **Properties** : Properties defines the columns in a database
- **Icon type** : Currently notion api accepts two icon options, emoji, external URL
- **Icon value** : Value of selected icon type
- **Icon type** : Currently notion api accepts only external URL
- **Cover value** : Value of selected cover type
### Page
On page resource you can perform the following operations:
- **[Retrieve a page](#1-retrieve-a-page)**
- **[Create a page](#2-create-a-page)**
- **[Update a page](#3-update-a-page)**
- **[Retrieve a page property](#4-retrieve-a-page-property-item)**
- **[Archive a page](#5-archive-delete-a-page)**
<img className="screenshot-full" src="/img/datasource-reference/notion/page_q.png" alt="notion page" />
#### 1. Retrieve a page
This operation retrieves a **Page** object using the ID specified.
##### Required parameters:
- **Page ID**
#### 2. Create a page
This operation creates a new page in the specified database or as a child of an existing page. If the parent is a database, the property values of the new page in the properties parameter must conform to the parent database's property schema. If the parent is a page, the only valid property is title.
##### Parameters:
- **Page ID**
- **Properties** : Property values of this page
- **Icon type** : Currently notion api accepts two icon options, emoji, external URL
- **Icon value**: Value of selected icon type
- **Icon type** : Currently notion api accepts only external URL
- **Cover value** : Value of selected cover type
#### 3. Update a page
This operation updates page property values for the specified page. Properties that are not set via the properties parameter will remain unchanged.
##### Parameters:
- **Page ID**
- **Parent type**: A database parent or page parent
- **Properties** : Property values of this page
- **Children** : Page content for the new page as an array of block objects
- **Icon type** : Currently notion api accepts two icon options, emoji, external URL
- **Icon value**: Value of selected icon type
- **Icon type** : Currently notion api accepts only external URL
- **Cover value** : Value of selected cover type
#### 4. Retrieve a page property item
This operation retrieves a property_item object for a given page ID and property ID. Depending on the property type, the object returned will either be a value or a paginated list of property item values. See Property item objects for specifics.
##### Parameters:
- **Page ID**
- **Property ID**
- **Limit**
- **Start cursor**
#### 5. Archive (delete) a page
##### Required parameters:
- **Page ID**
- **Archive**: Dropdown for archive and un archive the page
### Blocks
The following operations can be performed on the block resource:
- **[Retrieve a block](#1-retrieve-a-block)**
- **[Append block children](#2-append-new-block-children)**
- **[Retrieve block children](#3-retrieve-block-children)**
- **[Update a block](#4-update-a-block)**
- **[Delete a block](#5-delete-a-block)**
<img className="screenshot-full" src="/img/datasource-reference/notion/block_q.png" alt="notion block" />
:::info
To get the id for blocks, simply click on the menu icon for the block and click "Copy link". Afterwards, paste the link in the browser and it should look like this: `https://www.notion.so/Creating-Page-Sample-ee18b8779ae54f358b09221d6665ee15#7fcb3940a1264aadb2ad4ee9ffe11b0e` the string after **#** is the block id i.e. `7fcb3940a1264aadb2ad4ee9ffe11b0e`.
:::
#### 1. Retrieve a block
This operation retrieves a **Block** object using the ID specified.
##### Required parameters:
- **Block ID**
#### 2. Append new block children
This operation creates and appends new children blocks to the parent block_id specified.
##### Required parameters:
- **Block ID**
- **Children**: Array of block objects
#### 3. Retrieve block children
This operation retrieves a paginated array of child block objects contained in the block using the ID specified.
##### Required parameters:
- **Block ID**
- **Limit**
- **Start cursor**
#### 4. Update a block
This operation updates the content for the specified block_id based on the block type.
##### Required parameters:
- **Block ID**
- **Properties**: The block object type value with the properties to be updated
- **Archive**
#### 5. Delete a block
##### Required parameters:
- **Block ID**
### User
The following operations can be performed on the user notion resource:
#### 1. Retrieve a user from current workspace
This operation retrieves a User using the ID specified.
<img className="screenshot-full" src="/img/datasource-reference/notion/user_q.png" alt="notion user" />
##### Required parameters:
- **User ID**
#### 2. Retrieve list of users of a workspace
This operation returns a paginated list of Users for the workspace.
##### Required parameters:
- **Limit**
- **Start cursor**
[Read more about notion API](https://developers.notion.com/reference/intro)

25
docs/versioned_docs/version-2.5.0/data-sources/openapi.md Normal file
View file

@ -0,0 +1,25 @@
---
id: openapi
title: OpenAPI
---
# OpenAPI
ToolJet has a data source for generating REST API operations from OpenAPI Specs.
## Connection
- Connections are generated from OpenAPI specifications. Currently supports Basic Auth, API Key, Bearer Token, OAuth 2.0
- Also supports specifications with multiple authentications
[Read more](https://swagger.io/docs/specification/authentication/)
## Querying OpenAPI
- Operations will be generated from specifications and each one will be different from other
### Common fields
- Host (Base URL)
Some specs can have one or more base URLs/servers and specific operations may have separate Base URLs. So you can select the URL from the host select
- Operation

53
docs/versioned_docs/version-2.5.0/data-sources/oracledb.md Normal file
View file

@ -0,0 +1,53 @@
---
id: oracledb
title: Oracle DB
---
# Oracle DB
ToolJet can connect to Oracle databases to read and write data.
## Connection
A Oracle DB can be connected with the following credentails:
- **Host**
- **Port**
- **SID / Service Name** ( Database name must be a SID / Service Name )
- **Database Name**
- **SSL**
- **Username**
- **Password**
- **Client Library Path** ( Only required for local setup )
<div style={{textAlign: 'center'}}>
![ToolJet - Data source - OracleDB](/img/datasource-reference/oracledb/oracleauth.png)
</div>
Click on **Test connection** button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on **Save** button to save the data source.
## Querying Oracle DB
Once you have added a Oracle DB data source, click on `+` button of the query manager to create a new query. There are two modes by which you can query SQL:
1. **[SQL mode](/docs/data-sources/oracledb#sql-mode)**
2. **[GUI mode](/docs/data-sources/oracledb#gui-mode)**
#### SQL mode
SQL mode can be used to write raw SQL queries. Select SQL mode from the dropdown and enter the SQL query in the editor. Click on the `run` button to run the query.
**NOTE**: Query should be saved before running.
#### GUI mode
GUI mode can be used to query Oracle database without writing queries. Select GUI mode from the dropdown and then choose the operation **Bulk update using primary key**. Enter the **Table** name and **Primary key column** name. Now, in the editor enter the records in the form of an array of objects.
**Example**: `{{ [ {id: 1, channel: 33}, {id:2, channel:24} ] }}`
Click on the **run** button to run the query. **NOTE**: Query should be saved before running.
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
:::

131
docs/versioned_docs/version-2.5.0/data-sources/overview.md Normal file
View file

@ -0,0 +1,131 @@
---
id: overview
title: Overview
---
# Global Datasources : Overview
Global datasources pull in and push data to any source including databases, external APIs, or services. Once a global datasource is connected to a workspace, the connection can be shared with any app of that workspace.
:::caution
Global datasources are available only on **ToolJet version 2.3.0 and above**.
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/overview/overview.png" alt="Datasources: Overview" width="600"/>
</div>
## Connecting global datasources
1. From the ToolJet dashboard, go to the **global datasources page** from the left sidebar.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/global.png" alt="Datasources: Overview" />
</div>
2. Click on the **Add new datasource** button, a modal will pop-up with all the available global datasources.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/popup.png" alt="Datasources: Overview" />
</div>
3. Select the datasource, enter the **Credentials** and **Save** the datasource.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/newui/overview/connection.png" alt="Datasources: Overview" />
</div>
4. Now, go back to the dashboard, create a new app, and the datasource will be available on the query panel under **Global Datasources**. Added datasources will be available on any of the **existing** or the **new applications**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/overview/globalquery.png" alt="Datasources: Overview" />
</div>
5. You can now create queries of the connected global datasource. From the queries, you'll be able to switch to **different connections** of the same datasource if there are more than one connections created.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/overview/switch.png" alt="Datasources: Overview" />
</div>
## Changing scope of datasources of an app created on older versions of ToolJet
On ToolJet versions below 2.3.0, the datasource connection was made from within the individual apps. To make it backward compatible, we added an option to change the scope of the datasources and make it global datasource.
1. If you open an app created on previos versions of ToolJet, you'll find the datasource manager on the left sidebar of the App Builder.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/overview/leftsidebar.png" alt="Datasources: Overview" />
</div>
2. Click on the kebab menu next to the connected datasource, select the **change scope** option.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/overview/changescope.png" alt="Datasources: Overview" />
</div>
3. Once you change the scope of the datasource and make it global, you'll see that the **datasource manager** is removed from the left sidebar and now you'll find the datasource on the **query panel** under Global Datasources. You can now configure the datasource fromt the Global Datasource page on the **dashboard**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/overview/queryadd.png" alt="Datasources: Overview" />
</div>
## Default datasources
By default, 4 datasources will be available on every app on ToolJet:
- **[ToolJet Database](/docs/tooljet-database/)**
- **[RestAPI](/docs/data-sources/restapi/)**
- **[Run JavaScript Query](/docs/data-sources/run-js/)**
- **[Run Python Query](/docs/data-sources/run-py/)**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/overview/default.png" alt="Datasources: Overview" />
</div>
## Permissions
Only **Admins** and **[Super Admins](/docs/Enterprise/superadmin)** of the workspace can change the **[Permissions](/docs/tutorial/manage-users-groups#group-properties)** for Global Datasource.
From **Workspace Settings** -> **Groups Settings**, Admins and Super Admins can set the permission for a user group to:
- **Create** and **Delete** datasources onto that workspace. If **Create** permission is enabled then the users can add new global datasources and **edit** the datasources as well but cannot **delete** it, and if only **Delete** permission is set then the users of the group will only be able to delete the connected datasources on the workspace.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/overview/create.png" alt="Datasources: Overview" />
</div>
- If any of the permission(Create or Delete) is not enabled for a user group then the users of the group will get an error toast when they try to Add or Delete the global datasource.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/overview/error.png" alt="Datasources: Overview" />
</div>
- **View** or **Edit** allowed global datasources from the **Datasources** tab. If only **View** permission is set then the users of the group will only be able to connect to the allowed datasource, and if only **Edit** permission is set then the users of the group will be able to update the credentials of the allowed datasources.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/overview/view.png" alt="Datasources: Overview" />
</div>
- If any of the permission(View or Edit) is not enabled for a user group then the users of the group will get an error toast when they try to Add or Delete the global datasource.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/overview/edit.png" alt="Datasources: Overview" />
</div>

57
docs/versioned_docs/version-2.5.0/data-sources/postgresql.md Normal file
View file

@ -0,0 +1,57 @@
---
id: postgresql
title: PostgreSQL
---
# PostgreSQL
ToolJet can connect to PostgreSQL databases to read and write data.
## Connection
Please make sure the host/ip of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP.
To add a new PostgreSQL database, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select PostgreSQL from the modal that pops up.
ToolJet requires the following to connect to your PostgreSQL database.
- **Host**
- **Port**
- **Username**
- **Password**
It is recommended to create a new PostgreSQL database user so that you can control the access levels of ToolJet.
<img className="screenshot-full" src="/img/datasource-reference/postgresql/pgconnect.png" alt="ppg connect" />
Click on **Test connection** button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on **Save** button to save the data source.
## Querying PostgreSQL
Click on `+` button of the query manager at the bottom panel of the editor and select the database added in the previous step as the data source. PostgreSQL query editor has two modes, SQL & GUI. **[SQL mode](/docs/data-sources/postgresql#sql-mode)** can be used to write raw SQL queries and **[GUI mode](/docs/data-sources/postgresql#gui-mode)** can be used to query your PostgreSQL database without writing queries.
#### SQL mode
Select SQL mode from the dropdown and enter the query in the editor. Click on the `run` button to run the query.
**NOTE**: Query should be saved before running.
<img className="screenshot-full" src="/img/datasource-reference/postgresql/pg-sql.png" alt="ppg sql" />
#### GUI mode
Select GUI mode from the dropdown and then choose the operation **Bulk update using primary key**. Enter the **Table** name and **Primary key column** name. Now, in the editor enter the **records** in the form of an array of objects.
Click on the `run` button to run the query. **NOTE**: Query should be saved before running.
<img className="screenshot-full" src="/img/datasource-reference/postgresql/pg-gui.png" alt="ppg gui" />
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
:::

44
docs/versioned_docs/version-2.5.0/data-sources/redis.md Normal file
View file

@ -0,0 +1,44 @@
---
id: redis
title: Redis
---
# Redis
ToolJet can run Redis commands on your Redis instances.
## Connection
ToolJet requires the following to connect to your Redis instances.
<img class="screenshot-full" src="/img/redis/connect.png" alt="ToolJet - Redis connection" height="250"/>
- **Host**
- **Port** - The default port for Redis server is 6379
- **Username**
- **Password**
Click on "Test" button to test the connection and click "Save" to save the data source.
## Redis Queries
List of supported commands: [Redis Official Documentation](https://redis.io/commands)
### Examples
`PING` command to test the Redis connection. If the connection is ready, the Redis server will respond with `PONG`.
```shell
PING
```
`SET` command can be used to set the value for a key
```shell
SET key value
```
`GET` command can be used to retrieve the value of a key
```shell
GET key
```

46
docs/versioned_docs/version-2.5.0/data-sources/restapi.md Normal file
View file

@ -0,0 +1,46 @@
---
id: restapi
title: REST API
---
# REST API
ToolJet can connect to any REST endpoint available.
## Connection
To add a new REST API datasource, click the Datasources manager icon on the left-sidebar of the app builder and click on the `Add datasource` button, then select REST API from the modal that pops up.
Click on the 'Save' button to save the data source.
<img class="screenshot-full" src="/img/datasource-reference/rest-api/rest-api.gif" alt="ToolJet - Data source - REST API" height="420"/>
ToolJet requires the following to connect to a REST API datasource.
- URL of the REST endpoint
The following optional parameters are also supported:
| Type | Description |
| ----------- | ----------- |
| URL params | Additional query string parameters|
| headers | Any headers the REST API source requires|
| body | Any values or fields the REST API source requires|
:::info
REST HTTP methods that are supported are **GET, POST, PUT, PATCH &amp; DELETE**.
:::
<img class="screenshot-full" src="/img/datasource-reference/rest-api/rest-api-values.gif" alt="ToolJet - Data source - REST API" height="420"/>
## Querying REST API
Click on `+` button of the query manager at the bottom panel of the editor and select the REST API endpoint added in the previous step as the data source.
Click on the 'run' button to run the query.
:::note
NOTE: Query should be saved before running.
:::
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations)
:::

52
docs/versioned_docs/version-2.5.0/data-sources/rethinkdb.md Normal file
View file

@ -0,0 +1,52 @@
---
id: rethinkdb
title: RethinkDB
---
# RethinkDB
ToolJet can connect to RethinkDB databases to read and write data. For more info visit this [doc](https://rethinkdb.com/api/javascript).
<img class="screenshot-full" src="/img/datasource-reference/rethink/rethink_auth.png" alt="ToolJet - Data source - RethinkDB" height="420" />
## Connection
ToolJet connects to InfluxDB using :
- **Database**
- **Host**
- **Port**
- **Username**
- **Password**
## Supported queries:
- Delete database
- Delete Table
- Create database
- Create Table
- List table
- List database
- Get all documents
- Insert table data
- Update all table data
- Update by id
- Delete table data by id
- Delete all table data
- Get document from primary key
:::info
NOTE: Name field in all operation is database name if not given will take the default database used for connection.
:::

55
docs/versioned_docs/version-2.5.0/data-sources/run-py.md Normal file
View file

@ -0,0 +1,55 @@
---
id: run-py
title: Run Python code
---
You can write custom Python code to interact with components and queries. To do that, you just need to create a new query and select **Run Python Code** from the available datasources.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/custom-python/run-py.png" alt="Run JavaScript code" />
</div>
#### Example: Using Python code to trigger component specific actions
- Let's drag a **button** and a **text** widget onto the canvas. We will set a text on the text component and trigger button click event from the Python query.
- Click on the `+` on the query panel to create a query and select **Run Python code** from the available datasources
- Let's write the code in **Python Editor** and save the query:
```python
class Person:
def __init__(self, name, age):
self.name = name
self.age = age
def myfunc(self):
return "Hello my name is " + self.name
p1 = Person(tj_globals.currentUser.firstName, 36)
components.text1.setText(p1.myfunc())
components.button1.click()
```
- The code above has a function `myfunc` which returns a string and we using the component specific action to set the **text component**'s value from the Python query. We are also triggering the button click using `components.button1.click()`
:::tip
- ToolJet's global variables can be accessed using **tj_globals**. ex: `tj_globals.currentUser.firstName`
- As of now, Run Python code only supports the [Python standard library](https://docs.python.org/3/library/) only.
:::
- Let's edit the properties of widgets:
- Add an event handler to the button - Select **On Click** event, **Show alert** action, and set a success message `Triggered using RunPy`. This will show a success alert popup whenever the button click event is triggered from the Python code.
- For the text component, we don't have to edit any property since we are changing the value directly from the Python code.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/custom-python/runpyg.gif" alt="Run Python code" />
</div>
You can also write custom Python code to get the data from **External APIs** and manipulate the response for graphical representation.
:::info
Issues with writing custom Python code? Ask in our [Slack community](https://www.tooljet.com/slack).
:::

137
docs/versioned_docs/version-2.5.0/data-sources/s3.md Normal file
View file

@ -0,0 +1,137 @@
---
id: s3
title: Amazon S3
---
# Amazon S3
ToolJet can connect to Amazon S3 buckets and perform various operation on them.
## Connection
To add a new S3 source, go to the **Datasources manager** on the left sidebar of the app editor and click on `Add datasource` button. Select **AWS S3** from the modal that pops up.
ToolJet requires the following to connect to your AWS S3:
- **Region**
- **Access key**
- **Secret key**
It is recommended to create a new IAM user for the database so that you can control the access levels of ToolJet.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/aws-s3/connectv2.png" alt="aws s3 modal" width="600" />
</div>
Click on **Test connection** button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on **Save** button to save the data source.
:::tip
You can now connect to **[different S3 Hosts using custom endpoints](/docs/how-to/s3-custom-endpoints)**.
:::
## Querying AWS S3
Click on `+` button of the **query manager** at the bottom panel of the editor and select the data source added in the previous step as the data source. Select the operation that you want to perform and click **Save** to save the query.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/aws-s3/operationsv2.png" alt="aws s3 query" />
</div>
Click on the **run** button to run the query.
**NOTE**: Query should be saved before running.
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
:::
## Query operations
You can create query for AWS S3 data source to perform several actions such as:
1. **[Read object](/docs/data-sources/s3#read-object)**
2. **[Upload object](/docs/data-sources/s3#upload-object)**
3. **[List buckets](/docs/data-sources/s3#list-buckets)**
4. **[List objects in a bucket](/docs/data-sources/s3#list-objects-in-a-bucket)**
5. **[Signed url for download](/docs/data-sources/s3#signed-url-for-download)**
6. **[Signed url for upload](/docs/data-sources/s3#signed-url-for-upload)**
### Read object
You can read an object in a bucket by using this operation. It requires two parameters - **Bucket** name and **Key**.
<img className="screenshot-full" src="/img/datasource-reference/aws-s3/readv2.png" alt="aws s3 read object" />
### Upload object
You can use this operation to upload objects(files) to your S3 bucket. It requires four parameters:
1. **Bucket**: Specify the bucket name
2. **Key**: Key of the object/file
3. **Content type**: Specify file type such as text, image etc.
4. **Upload data**: File/object that is to be uploaded.
<img className="screenshot-full" src="/img/datasource-reference/aws-s3/uplobjv2.png" alt="aws s3 upload"/>
### List buckets
This operation will list all the buckets in your S3. This does not require any parameter.
<img className="screenshot-full" src="/img/datasource-reference/aws-s3/listbucketsv2.png" alt="aws s3 bucket" />
### List objects in a bucket
This operation will fetch the list of all the files in your bucket. It requires two parameters:
1. **Bucket**: Bucket name (mandatory)
2. **Prefix**: To limit the response to keys that begin with the specified prefix (optional)
3. **Max keys**: The maximum number of keys returned in the response body (optional). Default value is 1000.
4. **Offset**: The key to start with when listing objects in a bucket (optional).
5. **"Next Continuation Token"**: `Next Continuation Token` indicates Amazon S3 that the list is being continued on this bucket with a token. ContinuationToken is obfuscated and is not a real key (optional).
:::info
**Next Continuation Token**
For listing a bucket for objects that begin with a specific character or a prefix, then use the `Offset` parameter. For example, if you want to list all the objects that begin with `a`, then set the `Offset` parameter to `a`. Similarly, if you want to list all the objects that begin with `ab`, then set the `Offset` parameter to `ab`.
The `Next Continuation Token` is used to list the next set of objects in a bucket. It is returned by the API when the response is truncated. The results will contain `Next Continuation Token` if there are more keys in the bucket that satisfy the list query. To get the next set of objects, set the `Next Continuation Token` parameter and run the query again.
The results will continue from where the last listing finished.
:::
<img className="screenshot-full" src="/img/datasource-reference/aws-s3/listobjectsv2.png" alt="aws s3 list object" />
### Signed url for download
The object owner can optionally share objects with others by creating a presigned URL, using their own security credentials, to grant time-limited permission to download the objects. For creating a presigned URL, the required parameters are:
1. **Bucket**: name of the bucket for uploading the file
2. **Key**: an object key
3. **Expires in**: an expiration time of URL
<img className="screenshot-full" src="/img/datasource-reference/aws-s3/urldownv2.png" alt="aws s3 signed download" />
### Signed url for upload
The presigned URLs are useful if you want your user/customer to be able to upload a specific object to your bucket, but you don't require them to have AWS security credentials or permissions. For creating a presigned URL, the required parameters are:
1. **Bucket**: name of the bucket for uploading the file
2. **Key**: an object key
3. **Expires in**: an expiration time of URL
4. **Content type**: the content type such as text, image etc.
<img className="screenshot-full" src="/img/datasource-reference/aws-s3/urluplv2.png" alt="aws s3 signed upload" />
:::info
We built an app to view and upload files to AWS S3 buckets. Check out the complete tutorial **[here](https://blog.tooljet.com/building-an-app-to-view-and-upload-files-in-aws-s3-bucket/)**.
:::

48
docs/versioned_docs/version-2.5.0/data-sources/saphana.md Normal file
View file

@ -0,0 +1,48 @@
---
id: saphana
title: SAP HANA
---
# SAP HANA
ToolJet can connect to SAP HANA databases to read and write data.
- [Connection](#connection)
- [Querying SAP HANA](#querying-sap-hana)
## Connection
To add a new SAP HANA database, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select SAP HANA from the modal that pops up.
ToolJet requires the following to connect to your SAP HANA database:
- **Host**
- **Port**
- **Username**
- **Password**
:::info
Please make sure the host/ip of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP.
:::
<div style={{textAlign: 'center'}}>
![ToolJet - Data source - SAP HANA](/img/datasource-reference/saphana/connect.png)
</div>
Click on **Test connection** button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on **Save** button to save the data source.
## Querying SAP HANA
Click on `+` button of the query manager at the bottom panel of the editor and select the database added in the previous step as the data source. Enter the query in the editor. Click on the `run` button to run the query.
**NOTE**: Query should be saved before running.
<img className="screenshot-full" src="/img/datasource-reference/saphana/query.png" alt="saphana query" />
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
:::

62
docs/versioned_docs/version-2.5.0/data-sources/sendgrid.md Normal file
View file

@ -0,0 +1,62 @@
---
id: sendgrid
title: SendGrid
---
# SendGrid
ToolJet can connect to your SendGrid account to send emails.
<img class="screenshot-full" src="/img/datasource-reference/sendgrid/sendgrid-datasource.png" alt="ToolJet - Data source - SendGrid" height="420" />
:::info
The SendGrid API Datasource supports for interaction with the mail endpoint of the [SendGrid v3 API](https://docs.sendgrid.com/api-reference/how-to-use-the-sendgrid-v3-api/authentication).
:::
## Connection
To add a new SendGrid API datasource, click the **Datasource manager** icon on the left-sidebar of the app builder and click on the `Add datasource` button, then select SendGrid API from the modal that pops up.
Enter your **SendGrid API key** in the "API key" field.
:::tip
SendGrid API key is required to create an SendGrid datasource on ToolJet. You can generate API key by visiting [SendGrid account page](https://app.sendgrid.com/settings/api_keys).
:::
Click on the 'Save' button to save the data source.
## Supported operations
1. Email service
### Email service
Required parameters:
- Send email to
- Send email from
- Subject
- Body as text
Optional parameters:
- Body as HTML
<img class="screenshot-full" src="/img/datasource-reference/sendgrid/sendgrid-query.jpg" alt="ToolJet - Query SendGrid" height="420"/>
:::info
**Send mail to** - accepts an array/list of emails separated by comma.
For example:
`{{["dev@tooljet.io", "admin@tooljet.io"]}}`.
**Send mail from** - accepts a string.
For example: `admin@tooljet.io`
:::
:::tip
**Send a single email to multiple recipients** - The `Send mail to` field can contain an array of recipients, which will send a single email with all of the recipients in the field.
**Send multiple individual emails to multiple recipients** - set <b>Multiple recipients</b> field to `{{true}}` and the `Send mail to` field will be split into multiple emails and send to each recipient.
:::
:::note
NOTE: Query should be saved before running.
:::

81
docs/versioned_docs/version-2.5.0/data-sources/slack.md Normal file
View file

@ -0,0 +1,81 @@
---
id: slack
title: Slack
---
# Slack
ToolJet can connect to your Slack workspace to send messages.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/slack/connect.png" alt="Slack datasource: ToolJet"/>
</div>
## Connection
- To add the Slack datasource, click the **Datasource manager** icon on the left-sidebar of the app builder and click on the `Add datasource` button, then select Slack from the modal that pops up.
- In the next dialog, you'll be asked to choose the **permission scope**. Choose the permission scope and then click on **Connect to Slack** button.
- A new tab will open up asking for authorization confirmation. Once done, you can close the tab.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/slack/authorize.png" alt="Slack datasource: ToolJet"/>
</div>
- Click on the '**Save data source** button to save the data source.
:::note
The App (which credentials are provided) needs to be installed in the workspace to use the Slack data source, and it needs to be added to the channel where you want to post the message.
:::
## Supported operations
1. **List members**
2. **Send message**
3. **List messages from a channel**
### List members
This operation will return the data of all the members in your slack workspace.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/slack/listmembers.png" alt="Slack datasource: ToolJet"/>
</div>
### Send message
This operation will send/post the message to a specified channel or posting to direct messages (also known as DMs or IMs) in your slack workspace.
| Property | Description |
| :--- | :--- |
| Channel | The channel ID or user ID to post the message to. |
| Message | The message to post. |
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/slack/sendmessage.png" alt="Slack datasource: ToolJet"/>
</div>
### List messages
This operation will get the messages from a specified channel.
| Property | Description |
| :--- |:----------------------------------------|
| Channel | The channel ID to get the messages from |
| Limit | The maximum number of messages to return. |
| Next Cursor | A cursor value returned by a previous call to list messages. |
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/slack/listmessages.png" alt="Slack datasource: ToolJet"/>
</div>

57
docs/versioned_docs/version-2.5.0/data-sources/smtp.md Normal file
View file

@ -0,0 +1,57 @@
---
id: smtp
title: SMTP
---
# SMTP
The SMTP datasource facilitates the connection between ToolJet applications and email servers, enabling the apps to send emails.
## Connection
To connect to an SMTP server, the following credentials are typically required:
- **Host**
- **Port**
- **Username**
- **Password**
:::tip Finding configuration details:
The SMTP configuration details like host and port can usually be obtained from your email service provider. Here are some general settings for the most commonly used email providers:
- **Gmail**: `Host`: smtp.gmail.com; `Port`: 587 or 465 (SSL); `Username`: your full Gmail email address; `Password`: your Gmail password.
- **Yahoo Mail**: `Host`: smtp.mail.yahoo.com; `Port`: 465 (SSL); `Username`: your Yahoo Mail email address; `Password`: your Yahoo Mail password.
- **Outlook.com/Hotmail**: `Host`: smtp.office365.com; `Port`: 587 or 465 (SSL); `Username`: your Outlook.com/Hotmail email address; `Password`: your Outlook.com/Hotmail password.
Before saving the configuration, it's possible to test the connection by clicking the "Test Connection" button.
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/smtp/connect.png" alt="smtp connect" />
</div>
## Querying SMTP
To create a query for sending an email, follow these steps:
1. Open the query panel located at the bottom panel of the editor.
2. Click the `+Add` button on the left to create a new query.
3. Select `SMTP` from the global datasource.
4. Provide the following properties:
- **From** `required` : Email address of the sender
- **From Name** : Name of the sender
- **To** `required` : Recipient's email address
- **CC mail to** : Email address of the recipients that will receive a copy of the email, and their email addresses will be visible to other recipients.
- **BCC mail to** : Email address of the recipients that will receive a copy of the email but the email addressed will be hidden to other recipients.
- **Subject** : Subject of the email.
- **Body** : You can enter the body text of the email in either raw text or html format, in their respective fields.
- **Attachments** : You can add attachments to an SMTP query by referencing the file from the File Picker component in the attachments field.
For instance, you can set the `Attachments` field value to `{{ components.filepicker1.file }}` or pass an array of `{{ name: 'filename.jpg', dataURL: '......' }}` objects to include attachments.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/smtp/querysmtp.png" alt="smtp connect" />
</div>

52
docs/versioned_docs/version-2.5.0/data-sources/snowflake.md Normal file
View file

@ -0,0 +1,52 @@
---
id: snowflake
title: Snowflake
---
# Snowflake
ToolJet can connect to Snowflake databases to read and write data.
- [Connection](#connection)
- [Getting Started](#querying-snowflake)
## Connection
Please make sure the host/ip of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP. You can find snowflake docs on network policies **[here](https://docs.snowflake.com/en/user-guide/network-policies.html)**.
To add a new Snowflake database, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select Snowflake from the modal that pops up.
ToolJet requires the following to connect to your Snowflake database.
- **Account**
- **Username**
- **Password**
:::info
You can also configure for **[additional optional parameters](https://docs.snowflake.com/en/user-guide/nodejs-driver-use.html#additional-connection-options)**.
:::
<div style={{textAlign: 'center'}}>
![ToolJet - Snowflake connection](/img/datasource-reference/snowflake/snowflake-connect.png)
</div>
## Querying Snowflake
Click on `+` button of the query manager at the bottom panel of the editor and select the database added in the previous step as the datasource. Query manager then can be used to write raw SQL queries.
<div style={{textAlign: 'center'}}>
![ToolJet - Snowflake query](/img/datasource-reference/snowflake/snowflake-query.png)
</div>
Click on the `run` button to run the query.
**NOTE:** Query should be saved before running.
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations)
:::

192
docs/versioned_docs/version-2.5.0/data-sources/stripe.md Normal file
View file

@ -0,0 +1,192 @@
---
id: stripe
title: Stripe
---
# Stripe
ToolJet can connect to your Stripe account to read or write customers' and payments' data.
:::info
Check out the **[Stripe Refund App tutorial](https://blog.tooljet.com/build-a-stripe-refund-tool-using-low-code/)**
:::
## Connection
To add a new Stripe data source, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select Stripe from the modal that pops up.
ToolJet requires the **Stripe API key** to connect to your database.
<div style={{textAlign: 'center'}}>
![ToolJet - Data source - Stripe](/img/datasource-reference/stripe/connect.png)
</div>
You can get the Stripe API key from the dashboard of your Stripe account. Go to the Stripe account dashboard, click on the **Developers** on the top right, then on the left-sidebar go to the **API Keys**, you can simple reveal the **Secret Key** and copy-paste on ToolJet.
<div style={{textAlign: 'center'}}>
![ToolJet - Data source - Stripe](/img/datasource-reference/stripe/apikey.png)
</div>
## Querying Stripe
Click on **+** button of the query manager at the bottom panel of the editor and select the Stripe datasource added in the previous step. Enter the query in the editor. Click on the `Save and Run` button to save and then run the query.
**NOTE**: Query should be saved before running.
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
:::
## Supported operations
You can check out the some of the operations mentioned below. All the operations for Stripe are available and can be performed from ToolJet. Check out the **[Stripe API documentation](https://stripe.com/docs/api/)** for the detailed information about each operation.
- **delete,/v1/account**
- **get,/v1/account**
- **post,/v1/account**
- **post,/v1/account/bank_accounts**
- **delete,/v1/account/bank_accounts/{id}**
- **get,/v1/account/bank_accounts/{id}**
- **post,/v1/account/bank_accounts/{id}**
- **get,/v1/account/capabilities**
- **get,/v1/account/capabilities/{capability}**
- **post,/v1/account/capabilities/{capability}**
- **get,/v1/account/external_accounts**
- **post,/v1/account/external_accounts**
- **delete,/v1/account/external_accounts/{id}**
- **get,/v1/account/external_accounts/{id}**
- **post,/v1/account/external_accounts/{id}**
- **post,/v1/account/login_links**
- **get,/v1/account/people**
- **post,/v1/account/people**
- **delete,/v1/account/people/{person}**
- **get,/v1/account/people/{person}**
- **post,/v1/account/persons**
- **delete,/v1/account/persons/{person}**
- **get,/v1/account/persons/{person}**
- **post,/v1/account/persons/{person}**
- **post,/v1/account_links**
- **get,/v1/accounts**
- **post,/v1/accounts**
- **delete,/v1/accounts/{account}**
- **get,/v1/accounts/{account}**
- **post,/v1/accounts/{account}**
- **post,/v1/accounts/{account}/bank_accounts**
- **delete,/v1/accounts/{account}/bank_accounts/{id}**
- **get,/v1/accounts/{account}/bank_accounts/{id}**
- **get,/v1/accounts/{account}/bank_accounts/{id}**
- **get,/v1/accounts/{account}/capabilities**
- **get,/v1/accounts/{account}/capabilities/{capability}**
- **post,/v1/accounts/{account}/capabilities/{capability}**
- **get,/v1/accounts/{account}/external_accounts**
- **post,/v1/accounts/{account}/external_accounts**
- **delete,/v1/accounts/{account}/external_accounts/{id}**
- **get,/v1/accounts/{account}/external_accounts/{id}**
- **get,/v1/accounts/{account}/external_accounts/{id}**
- **post,/v1/accounts/{account}/login_links**
- **get,/v1/accounts/{account}/people**
- **post,/v1/accounts/{account}/people**
- **delete,/v1/accounts/{account}/people/{person}**
- **get,/v1/accounts/{account}/people/{person}**
- **post,/v1/accounts/{account}/people/{person}**
- **get,/v1/accounts/{account}/persons**
- **post,/v1/accounts/{account}/persons**
- **delete,/v1/accounts/{account}/persons/{person}**
- **get,/v1/accounts/{account}/persons/{person}**
- **post,/v1/accounts/{account}/persons/{person}**
- **post,/v1/accounts/{account}/reject**
- **get,/v1/apple_pay/domains**
- **post,/v1/apple_pay/domains**
- **delete,/v1/apple_pay/domains/{domain}**
- **get,/v1/apple_pay/domains/{domain}**
- **get,/v1/application_fees**
- **get,/v1/application_fees/{fee}/refunds/{id}**
- **post,/v1/application_fees/{fee}/refunds/{id}**
- **get,/v1/application_fees/{id}**
- **post,/v1/application_fees/{id}/refund**
- **get,/v1/application_fees/{id}/refunds**
- **post,/v1/application_fees/{id}/refunds**
- **get,/v1/apps/secrets**
<!--
### delete,/v1/account
This operation can be used to delete the accounts that you manage in Stripe.
#### Required parameters:
- **account**: Enter the account id of account that you want to delete. example: `acct_1032D82eZvKYlo2C`
<div style={{textAlign: 'center'}}>
![ToolJet - Data source - Firestore](/img/datasource-reference/stripe/delete-account.png)
</div>
### get,/v1/account
This operation returns the basic account information such as account id, capabilities, currency, country etc.
<div style={{textAlign: 'center'}}>
![ToolJet - Data source - Firestore](/img/datasource-reference/stripe/get-account.png)
</div>
### post,/v1/account
This operation updates the connected account by setting the values of the parameters passed. Any parameters not provided are left unchanged.
### post,/v1/account/bank_accounts
This operation will create a bank account in your stripe account.
### delete,/v1/account/bank_accounts/{id}
This operation can be used to delete a specified external account for a given account.. You'll need to provide the **id** of the bank account in stripe.
### get,/v1/account/bank_accounts/{id}
This operation can be used to retrieve a specified external account whose **id** is provided in parameters.
### post,/v1/account/bank_accounts/{id}
This operation can be used to update the metadata, account holder name, account holder type of a bank account belonging to a Custom Account, and optionally sets it as the default for its currency. Other bank account details are not editable by design. You can re-enable a disabled bank account by performing an update call without providing any arguments or changes.
### get,/v1/account/capabilities
This operation returns a list of capabilities associated with the account. The capabilities are returned sorted by creation date, with the most recent capability appearing first.
### get,/v1/account/capabilities/{capability}
This operation retrieves information about the specified Account Capability.
### post,/v1/account/capabilities/{capability}
This operation updates an existing Account Capability.
### get,/v1/account/external_accounts
List external accounts for an account.
### post,/v1/account/external_accounts
This operation creates an external account for a given account.
### delete,/v1/account/external_accounts/{id}
This operation deletes a specified external account for a given account.
-->

54
docs/versioned_docs/version-2.5.0/data-sources/twilio.md Normal file
View file

@ -0,0 +1,54 @@
---
id: twilio
title: Twilio
---
# Twilio
ToolJet can connect to your Twilio account to send sms.
<div style={{textAlign: 'center'}}>
![ToolJet - Data source - Twilio](/img/datasource-reference/twilio/connect.png)
</div>
## Connection
- To add the Twilio datasource, click the **Datasource manager** icon on the left-sidebar of the app builder and click on the `Add datasource` button, then select **Twilio** from the modal that pops up.
- In the next dialog, you'll be asked to enter the Auth Token, Account SID, and Messaging Service SID.
- You can get the **Auth Token and Account SID** on the dashboard of your Twilio account.
<div style={{textAlign: 'center'}}>
![ToolJet - Data source - Twilio](/img/datasource-reference/twilio/auth.png)
</div>
- For **Messaging Service SID**, you'll need to create a messaging service first from the Services under Messaging in the left-sidebar.
<div style={{textAlign: 'center'}}>
![ToolJet - Data source - Twilio](/img/datasource-reference/twilio/sid.png)
</div>
- After entering the three credentials, you can **Save** the datasource.
## Supported operations
1. **Send message**
### Send message
This operation will send the specified message to specified mobile number.
<div style={{textAlign: 'center'}}>
![ToolJet - Data source - Twilio](/img/datasource-reference/twilio/sms.png)
</div>

92
docs/versioned_docs/version-2.5.0/data-sources/typesense.md Normal file
View file

@ -0,0 +1,92 @@
---
id: typesense
title: TypeSense
---
# TypeSense
ToolJet can connect to your TypeSense deployment to read and write data.
## Connection
Please make sure the host/IP of the TypeSense deployment is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist our IP**.
ToolJet requires the following to connect to your TypeSense deployment:
- **Host**
- **Port**
- **API Key**
- **Protocol**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/typesense/connect.png" alt="typesense connect" />
</div>
## Querying TypeSense
Click on `+` button of the query manager at the bottom panel of the editor and select the TypeSense added in the previous step as the data source.
Select the operation that you want to perform on your TypeSense cluster and click `Create` to save the query.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/typesense/query.png" alt="typesense query" />
</div>
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
:::
## Supported operations
#### 1. Create a Collection
With this operation you can easily create `Collections` in your TypeSense cluster. In the schema field, you'll need to define the schema for creating a new collection. Check out TypeSense docs to know more about collections **[here](https://typesense.org/docs/0.22.2/api/collections.html#create-a-collection)**
<img className="screenshot-full" src="/img/datasource-reference/typesense/collection.png" alt="typesense collection" />
#### 2. Index a document
Use this operation to index a document to your collection. You'll need to specify the **Collection Name** where you want your document to be indexed and also provide the document data according the schema defined in the collection. Read more about Indexing a document in TypeSense **[here](
https://typesense.org/docs/0.22.2/api/documents.html#index-a-single-document)**.
<img className="screenshot-full" src="/img/datasource-reference/typesense/index.png" alt="typesense index" />
#### 3. Search
Use this operation to perform a search within the specified collection. Know more about the search parameters in the TypeSense doc **[here](https://typesense.org/docs/0.22.2/api/documents.html#search)**.
<img className="screenshot-full" src="/img/datasource-reference/typesense/search.png" alt="typesense search" />
#### 4. Get a document
Use this operation to fetch an individual document in a collection by providing the `id` of the document. Read more about it **[here](https://typesense.org/docs/0.22.2/api/documents.html#retrieve-a-document)**.
<img className="screenshot-full" src="/img/datasource-reference/typesense/get.png" alt="typesense get"/>
#### 5. Update a document
Use this operation to update an individual document by providing the **Collection Name** and **Id** of the document. You'll need to provide the updated document data in the form of specified schema. Check out the TypeSense's doc on updating a document **[here](https://typesense.org/docs/0.22.2/api/documents.html#update-a-document)**.
<img className="screenshot-full" src="/img/datasource-reference/typesense/update.png" alt="typesense update" />
#### 6. Delete a document
Delete a document from collection by providing the `Id` of the document. Check out the TypeSense's doc on deleting documents **[here](https://typesense.org/docs/0.22.2/api/documents.html#delete-documents)**.
<img className="screenshot-full" src="/img/datasource-reference/typesense/delete.png" alt="typesense delete" />
:::tip
Make sure that you supply JSON strings instead of JavaScript objects for any document or schema that is being passed to the server, in any of the above operations.
:::

64
docs/versioned_docs/version-2.5.0/data-sources/woocommerce.md Normal file
View file

@ -0,0 +1,64 @@
---
id: woocommerce
title: WooCommerce
---
# WooCommerce
ToolJet can connect to WooCommerce databases to read and write data.
- [Connection](#connection)
- [Getting Started](#querying-woocommerce)
## Connection
Auth
You may use [HTTP Basic Auth] by providing the REST API Consumer Key as the username and the REST API Consumer Secret as the password.
- **Host**
- **Consumer key**
- **Consumer secret**
![ToolJet - Data Source - Woocommerce](/img/datasource-reference/woocommerce/woocomerce-auth.png)
:::info
NOTE: For generating keys visit admin dashboard of woocommerce , more info: https://woocommerce.github.io/woocommerce-rest-api-docs/?javascript#authentication
:::
## Querying Woocommerce
**Operations**
**Customer**
- list customer
- update customer
- delete customer
- batch update customer
- create customer
- retrieve customer
**PRODUCT**
- list product
- update product
- delete product
- batch update product
- create product
- retrieve product
**ORDER**
- list order
- update order
- delete order
- batch update order
- create order
- retrieve order
**Coupon**
- list coupon
- create coupon
:::info
NOTE: For more info visit https://woocommerce.github.io/woocommerce-rest-api-docs/?javascript.
:::

96
docs/versioned_docs/version-2.5.0/data-sources/zendesk.md Normal file
View file

@ -0,0 +1,96 @@
---
id: zendesk
title: Zendesk
---
# Zendesk
ToolJet can connect to Zendesk APIs to read and write data using OAuth 2.0, which helps us to limit an application's access to a user's account.
- [Connection](#connection)
- [Querying Zendesk](#querying-zendesk)
## Connection
ToolJet connects to your Zendesk app using :
- **Zendesk Sub-domain**
- **Client ID**
- **Client Secret**
## Authorization Scopes
You can create a Zendesk data source with one of either of the two permission scopes :
1. **Read Only**
2. **Read and Write**
:::info
You must first be a verified user to make Zendesk API requests. This is configured in the Admin Center interface in **Apps and integrations > APIs > Zendesk APIs.** For more information, see Security and Authentication in the [Zendesk Support API reference](https://developer.zendesk.com/api-reference/ticketing/introduction/#security-and-authentication) or [check out Zendesk's docs](https://support.zendesk.com/hc/en-us/articles/4408845965210).
:::
To connect Zendesk datasource to your ToolJet application, go to the data source manager on the left-sidebar and click on the `+` button. Select Zendesk from the list of available datasources, provide the credentials and click **Connect to Zendesk** and authenticate via OAuth. And click **Save** to save the datasource.
<div style={{textAlign: 'center'}}>
![ToolJet - Data source - Zendesk](/img/datasource-reference/zendesk/zendesk.gif)
</div>
## Operations
1. **[List Tickets](/docs/data-sources/zendesk#list-tickets)**
2. **[List requested Tickets](/docs/data-sources/zendesk#list-requested-tickets)**
3. **[Show a Ticket](/docs/data-sources/zendesk#show-tickets)**
4. **[Update a Ticket](/docs/data-sources/zendesk#update-tickets)**
5. **[List Users](/docs/data-sources/zendesk#list-users)**
6. **[Get Profile](/docs/data-sources/zendesk#get-profile)**
7. **[Search query](/docs/data-sources/zendesk#search-query)**
### List Tickets
Lists all the tickets in your Zendesk account.
### List requested Tickets
Lists all the tickets requested by the user.
| Fields | description |
| ----------- | ----------- |
| User ID | The id of the user |
### Show Tickets
Gets a ticket's properties with the given ID, though not the ticket comments.
| Fields | description |
| ----------- | ----------- |
| Ticket ID | The id of the ticket |
### Update Tickets
Updates a ticket's properties with the given ID.
| Fields | description |
| ----------- | ----------- |
| Ticket ID | The id of the ticket |
| Body | The properties and values to update. Example: `{{({ "ticket": {"status": "solved"} })}}` |
### List Users
Lists all the users in your Zendesk account.
### Get Profile
Gets a user's profile with the given ID.
| Fields | description |
| ----------- | ----------- |
| User ID | The id of the user |
### Search Query
The Search Query uses Zendesk's Search API to return tickets, users, and organizations with defined filters.
Common filters include:
- `type:ticket`
- `type:user`
- `type:organization`
- `type:ticket organization:12345 status:open`
| Fields | description |
| ----------- | ----------- |
| Query | The search query |

249
docs/versioned_docs/version-2.5.0/getting-started.md Normal file
View file

@ -0,0 +1,249 @@
---
id: getting-started
title: Getting Started
description: ToolJet is an open-source low-code framework to build and deploy custom internal tools. ToolJet can connect to your data sources such as databases ( PostgreSQL, MongoDB, MS SQL Server, Snowflake, , BigQuery, etc ), API/GraphQL endpoints, SaaS tools ( Airtable, Stripe, Google Sheets, etc ) and cloud object storage services ( AWS S3, Google Cloud Storage and Minio ). Once the data sources are connected, ToolJet can run queries on these data sources to fetch and update data. The data fetched from data sources can be visualised and modified using the UI widgets such as tables, charts, forms, etc.
slug: /
---
# Welcome to ToolJet Docs
---
## What is ToolJet
ToolJet is an **open-source low-code framework** to build and deploy custom internal tools.
ToolJet ships with its built-in database called **[ToolJet DB](/docs/tooljet-database)** (built on top of PostgreSQL). You can also connect to the **external data sources** such as **databases** ( PostgreSQL, MongoDB, MS SQL Server, Snowflake, , BigQuery, etc ), **API/GraphQL endpoints**, **SaaS tools** ( Airtable, Stripe, Google Sheets, etc ) and **cloud object storage services** ( AWS S3, Google Cloud Storage and Minio ).
Once the data sources are connected, ToolJet can run **queries** on these data sources to fetch and update data. The data fetched from data sources can be **visualised and modified** using the UI widgets such as tables, charts, forms, etc. You can also use **[Javascript](/docs/data-sources/run-js)** or **[Python](/docs/data-sources/run-py)** queries for writing business logic or interacting with the user interface of the application.
<img src="/img/v2-beta/getting_started/intro.png" alt="Getting started Demo app" />
<!-- Why ToolJet section is commented out.
## Why ToolJet
When you're building an internal tool, there are a lot of tools and frameworks available. But with ToolJet, you can save developers' hours by allowing them to build full-stack business applications in minutes.
- **Open-Source**: ToolJet is Open-Source, you can go through the ToolJet codebase on **[GitHub](https://github.com/ToolJet/ToolJet)** or you can **deploy ToolJet on your infrastructure**.
- **Full-stack platform**: ToolJet has a **[built-in database](/docs/tooljet-database)**, **[External datasources](/docs/data-sources/airtable)**, and a frontend builder so you can build a full-stack app right inside it. ToolJet comes with Custom Component for importing your own **react components** and the ability to write custom **JavaScript** and **Python** code.
- **Extensible**: Didn't find the **component** or **datasource** that fit your application's requirements? You can always build your own **component** and **datasource** using our **plugin development kit**.
- **Powerful Apps**: With ToolJet, developers can quickly build powerful custom internal tools for their Support, Operations and Sales teams. Build CRUD apps, Dashboards, Admin Panels, CRMs and much more.
-->
## How ToolJet works
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/getting_started/howtjworks.png" alt="How ToolJet works flow" />
</div>
**With ToolJet, you can build apps in 3 simple steps:**
1. **Connect to datasources:** Connect to the ToolJet's built-in database **[ToolJet DB](/docs/tooljet-database)** (built on top of PostgreSQL) or your existing data sources such as PostgreSQL, MySQL, Firestore, Stripe, Google Sheets, API endpoints, etc.
2. **Build queries:** ToolJet comes with query builders for all supported data sources. You can also write **[Javascript](/docs/data-sources/run-js)** or **[Python](/docs/data-sources/run-py)** queries or use **[Transformations](/docs/tutorial/transformations)** to transform the query response.
3. **Build User Interface:** ToolJet's visual **[App Builder](/docs/app-builder/overview)** allows you to drag and drop components ( Eg: tables, charts, forms, etc ) to quickly build the user-interface of the apps. Components have events such as `on click`, `on row selected`, `on page changed`, etc. ToolJet apps can be used in light and dark mode.
:::tip
ToolJet binds together the datasources, queries and components to convert business logic into custom applications. You can also secure your ToolJet apps with **[Group & Permissions](/docs/org-management/permissions)** and **[Audit Logging](/docs/Enterprise/audit_logs)**.
:::
## Choose your ToolJet
There are a few different ways to set up ToolJet depending on how you intend to use it:
- **[ToolJet Cloud](https://www.tooljet.com)**: hosted solution, just sign-up for free and start building apps in seconds.
- **[Deploy on premise](/docs/setup/)**: recommended method for production or customized use cases. You'll find Server setup guides for popular platforms (AWS, GCP, Kubernetes etc) and one-click deployment guides (Heroku, DigitalOcean etc).
- **[Try ToolJet on local machine](/docs/setup/try-tooljet/)**: the fastest way to try out ToolJet on your computer using docker.
:::info
- Data security is top priority at ToolJet, read about our **[data security here](/docs/security)**.
:::
## The very quick quickstart
Let's say you're an eCommerce company and your **Customer Support/Operations** team need a **Support Tool/Admin** panel for managing the orders, updating inventory, and track revenue and metrics. This quickstart will guide you through building your first custom internal tool in less than 5 minutes.
You will:
- **[Create a database](#create-a-tooljet-database)**
- **[Create a new application](#create-a-new-application)**
- **[Build the UI](#build-the-ui)**
- **[Build queries and bind data to UI](#build-queries-and-bind-data-to-ui)**
- **[Preview, Release and Share app](#preview-release-and-share-app)**
:::tip
Before getting into the quickstart, Sign up and create your account on **[ToolJet](https:///www.tooljet.com)**.
:::
### Create a database
1. Navigate to **ToolJet DB Editor** from the left sidebar on the dashboard
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/111c.png" alt="Getting started: Quickstart" />
</div>
2. Click on **Create New Table** button, enter **Table name** and **Add columns** from the drawer that slides from the right. Click on **Create** to add the table.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/prodtable.png" alt="Getting started: Quickstart" />
</div>
3. Once the table is created, click on the **Add new row** button to add the data to the table and click **Create**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/newrow1.png" alt="Getting started: Quickstart" />
</div>
:::info
Learn more about the **[ToolJet Database here](/docs/tooljet-database)**
:::
### Create a new application
1. To create a new ToolJet application, go to the **Dashboard** -> **Create new application**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/newapp1.png" alt="Getting started: Quickstart" />
</div>
:::info
You can also use the existing UI **templates** for your application or **import** an application to your workspace.
:::
2. When you click on create new app the **App-builder** will open up. You can rename your application from `untitled` to **Support Tool** from the top left of app-builder.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/appbuilder2.png" alt="Getting started: Quickstart" />
</div>
### Build the UI
1. Let's build the UI of the application by dragging and dropping the components on the canvas.
2. To build the UI, we will use:
1. **Table** for displaying the customers data
2. **Text** components for the Title and description of the app as the header
3. **Text Input** component for getting product name input from the user
4. **Number Input** component for getting product quantity and price input from the user
5. **Button** component that will be used to trigger the query for inserting a row in the database using the button's **OnClick** event handler
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/ui.png" alt="Getting started: Quickstart" />
</div>
:::info
ToolJet application's User interface is constructed using Components like Tables, Forms, Charts, or Buttons etc. Check **[Components Catalog](/docs/widgets/overview)** to learn more.
:::
### Build queries and bind data to UI
1. We can add a new datasource from the **[Global datasources](/docs/data-sources/overview)** page from the dashboard but since we are using **ToolJet Database** we don't need to add any external datasource. Go to the **Query Panel and select ToolJet Database**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/tjdb2.png" alt="Getting started: Quickstart" />
</div>
:::info
ToolJet can connect to several databases, APIs and external services to fetch and modify data. Check **[Datasource Catalog](/docs/data-sources/overview)** to learn more.
:::
2. Choose a **Table** from the dropdown, Select the **List rows** option from the **Operation** dropdown, You can leave other query parameters. Scroll down and enable **Run this query on application load** - this will trigger the query when the app is loaded.
3. Click on **Create** to create the query and then click **Run** to trigger the query and get response. You can also check the query response by clicking **Preview** button without firing the query.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/listrowsq.png" alt="Getting started: Quickstart" />
</div>
4. Go to the **Table properties** by clicking on the component handle and bind the data returned by the query in the **Table data** property. When building apps in ToolJet anything inside `{{}}` is JavaScript and we javascript dot notation to get the data from query and populate the table using **{{queries.tooljetdb1.data}}**. The table will be auto-populated once the table data is entered.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/tabledata.png" alt="Getting started: Quickstart" />
</div>
5. Let's create another query that will get the data from the **input fields** and will add a new row in the tooljet database. **Create New Query** -> **Select Table (Customers)** -> **Select Operation (Create row)** -> add the following columns with the respective value:
1. **id** - `{{components.textinput1.value}}`
2. **quantity** - `{{components.numberinput1.value}}`
3. **price** - `{{components.numberinput2.value}}`
4. **created_at** - `{{moment().format("DD/MM/YYYY hh:mm A")}}` (We are using **momentjs library** to get the current date from the system rather than getting input by the user )
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/query2.png" alt="Getting started: Quickstart" />
</div>
:::tip
You can also add event handler to this query for **On Success** event to run the `tooljetdb1` query that populates the table, so that whenever this is successful the table is refreshed.
:::
6. Now, let's bind this query to the **Add Product** button. Click on the button handle to open its properties, **Add an handler** -> **Select Event (On Click)** -> **Select Action (Run Query)** -> **Select Query (tooljetdb2)**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/event.png" alt="Getting started: Quickstart" />
</div>
:::info
- You can manipulate the data returned by the queries using **[Transformations](/docs/tutorial/transformations)**
- You can also **[Run JavaScript code](/docs/data-sources/run-js)** or **[Run Python code](/docs/data-sources/run-py)** to perform custom behavior inside ToolJet
:::
### Preview, Release and Share app
1. Click on the **Preview** on the top-right of app builder to immediately check the currently opened version of the app in production.
2. Click on the **Release** button to publish the currently opneded version of the app and push the changes to production.
3. **Share** option allows you to share the **released version** of the application with other users or you can also make the app **public** and anyone with the URL will be able to use the app.
:::tip
You can control how much access to users have to your ToolJet apps and resources using **[Org Management](/docs/tutorial/manage-users-groups)**.
:::
## What Can I Do With ToolJet
If you are building internal tool for your organization, here are few tutorials of sample use-cases for you to get started:
- **[Build a Feature Request Management App](https://youtu.be/c2sbFTDUMzs)**
- **[Build a Ticket Triaging App with Baserow and ToolJet](https://blog.tooljet.com/build-a-ticket-triaging-app-with-baserow-and-tooljet/)**
- **[Building a MinIO file explorer app](https://blog.tooljet.com/building-a-minio-file-explorer-app-in-30-minutes/)**
- **[Building a Google Cloud Storage (GCS) file explorer app](https://blog.tooljet.com/build-internal-file-explorer-application-using-google-cloud-storage-gcs-and-tooljet/)**
- **[Build an AWS S3 file explorer app](https://blog.tooljet.com/building-an-app-to-view-and-upload-files-in-aws-s3-bucket/)**
- **[Build Stripe Refund App](https://blog.tooljet.com/build-a-stripe-refund-tool-using-low-code/)**
- **[Build a WhatsApp CRM](https://blog.tooljet.com/build-a-whatsapp-crm-using-tooljet-within-10-mins/)**
- **[Build a cryptocurrency dashboard](https://blog.tooljet.com/how-to-build-a-cryptocurrency-dashboard-in-10-minutes/)**
- **[Build a Redis GUI](https://blog.tooljet.com/building-a-redis-gui-using-tooljet-in-5-minutes/)**
Find more Tutorials on our **[Blog](https://blog.tooljet.com/)**.
## For ToolJet Contributors
To contribute to ToolJet code, plugins, and documentation, refer to our **[Contributing Guide](/docs/category/contributing-guide)**.
[![GitHub contributors](https://img.shields.io/github/contributors/tooljet/tooljet)](https://github.com/ToolJet/ToolJet/contributors)
[![GitHub issues](https://img.shields.io/github/issues/ToolJet/ToolJet)](https://github.com/ToolJet/ToolJet/issues)
[![GitHub stars](https://img.shields.io/github/stars/ToolJet/ToolJet)](https://github.com/ToolJet/ToolJet/stargazers)
[![GitHub license](https://img.shields.io/github/license/ToolJet/ToolJet)](https://github.com/ToolJet/ToolJet)
<a href="https://github.com/tooljet/tooljet/graphs/contributors">
<img src="https://contrib.rocks/image?repo=tooljet/tooljet&max=300&columns=20" />
</a>
## Help and Support
- We have extensively documented the features of ToolJet, but in case you are stuck, please feel free to e-mail us at **hello@tooljet.com**
- If you are using ToolJet cloud, click on the chat icon at the bottom-left corner for instant help.
- If you have found a bug, please create a **[GitHub issue](https://github.com/ToolJet/ToolJet/issues)** for the same.
- Feel free to join our highly active **[Slack Community](https://www.tooljet.com/slack)**.

5
docs/versioned_docs/version-2.5.0/how-to/_category_.json Normal file
View file

@ -0,0 +1,5 @@
{
"label": "How To",
"position": 8,
"collapsed": true
}

115
docs/versioned_docs/version-2.5.0/how-to/access-cellvalue-rowdata.md Normal file
View file

@ -0,0 +1,115 @@
---
id: access-cellvalue-rowdata
title: Change text color in columns of the table
---
# Change text color in columns by accessing `cellValue` and `rowData` in the table
In this how-to guide, we will build an app that will use a sample RestAPI to display the data in the table, and then we will change the text color of the columns according to the condition.
- Let's start by creating a new application and then adding a table widget into the canvas.
<div style={{textAlign: 'center'}}>
![ToolJet - How To - Change text color in columns of the table](/img/how-to/change-text-color/newapp.gif)
</div>
- Now go to the **Query Panel** at the bottom of the app editor and click on the `+` button.
- Choose **RestAPI** data source
<div style={{textAlign: 'center'}}>
![ToolJet - How To - Change text color in columns of the table](/img/how-to/change-text-color/restapi.png)
</div>
- Now we will use a sample RestAPI endpoint - I have used the API provided by **coinstats.app**, API-URL:
https://api.coinstats.app/public/v1/coins?skip=0&limit=100&currency=USD
- Choose `GET` method, enter the request URL (API URL in previous step), name the query - I have named it `crypto`, and then **Create** the query
<div style={{textAlign: 'center'}}>
![ToolJet - How To - Change text color in columns of the table](/img/how-to/change-text-color/apiendpoint.png)
</div>
- Now hit the **Run** button next to the query name to run the query.
<div style={{textAlign: 'center'}}>
![ToolJet - How To - Change text color in columns of the table](/img/how-to/change-text-color/runquery.png)
</div>
- Once you run the query, you can check the data returned by the query in the **Inspector** on the left sidebar.
<div style={{textAlign: 'center'}}>
![ToolJet - How To - Change text color in columns of the table](/img/how-to/change-text-color/inspectord.png)
</div>
- Now that we have got the data, we will display it on the table. To do this, click on the widget handle of the table to open its properties in the right sidebar.
- In the Table Data field, enter `{{queries.crypto.data.coins}}` - as you can see in the screenshot of the inspector the data is inside the `coins` array. You'll see the data in the Preview(green box) below the field.
<div style={{textAlign: 'center'}}>
![ToolJet - How To - Change text color in columns of the table](/img/how-to/change-text-color/data.png)
</div>
- Let's add the columns that we want to display on the table. Go to the **Columns** section, Add columns, set their Names, and set **key** for each column. I have added 5 columns: **Rank**, **Name**, **Symbol**, **Price**, and **Market Cap**.
<div style={{textAlign: 'center'}}>
![ToolJet - How To - Change text color in columns of the table](/img/how-to/change-text-color/columns.png)
</div>
- Once you've added the columns, you'll get the table like this:
<div style={{textAlign: 'center'}}>
![ToolJet - How To - Change text color in columns of the table](/img/how-to/change-text-color/table.png)
</div>
### Using cellValue to change column text color
Now that we have our data on the table, we will change the color of the text in the **Price** and **Market Cap** columns.
- Edit table properties, go to **Columns**, and click on the Price Column to open its properties.
- For **Price** column, we want to change color of those cells who have value which is greater than 1000 to red else to green if it is less than 1000. So to do this, we will set a condition in **Text Color** property of this column: `{{cellValue >= 1000 ? 'red' : 'green'}}`
<div style={{textAlign: 'center'}}>
![ToolJet - How To - Change text color in columns of the table](/img/how-to/change-text-color/price.png)
</div>
- Similarly, we will do for **Market Cap** column. We want to change the text color of those cells who have value which is greater than 60000000000 to red else to green if it is less than 60000000000. so the condition will be `{{cellValue >= 60000000000 ? 'red' : 'green'}}`
- Now the text color of cells in the columns will be updated.
<div style={{textAlign: 'center'}}>
![ToolJet - How To - Change text color in columns of the table](/img/how-to/change-text-color/cellvalue.png)
</div>
:::info
You can also use Hex Color Code instead of mentioning color in plane text.
:::
### Using rowData to change column text color
- To change the color of the text using `rowData` variable it is required to mention the column name whose cell value we will be comparing in the condition. Let's take a look by changing the text color of **Symbol** column.
- We will add a condition to look in the row data and if the row has column called `name` which has value `Solana` then it should change the color to red else the color should be green.
- Edit the properties of the Symbol column, set the **Text Color** field value to `{{rowData.name === 'Solana' ? 'red' : 'green'}}`.
- You'll see that in the Symbols column all the values has become green except the one that has Solana in Name column.
<div style={{textAlign: 'center'}}>
![ToolJet - How To - Change text color in columns of the table](/img/how-to/change-text-color/rowData.png)
</div>

54
docs/versioned_docs/version-2.5.0/how-to/access-users-groups.md Normal file
View file

@ -0,0 +1,54 @@
---
id: access-currentuser
title: Enable/Disable a component using current user's property
---
# Enable/Disable a component using current user's property
Let's take look at the exposed variables of the current user property:
- **email** : The value can accessed using `{{globals.currentUser.email}}`
- **firstName** : The value can accessed using `{{globals.currentUser.firstName}}`
- **lastName** : The value can accessed using `{{globals.currentUser.lastName}}`
- **lastName** : The value can accessed using `{{globals.currentUser.lastName}}`
- **groups** : By default, the admin will be in the two groups `all_users` and `admin`, and any user who is not admin will always be in the `all_users` group by default. Since the **groups** is an array you’ll have to provide the index ([0], [1], and so on) to return the group name. The value can be accessed using `{{globals.currentUser.groups[1]}}`.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/how-to/access-currentuser/props.png" alt="Properties of current user" />
</div>
### Example: Disable a button if a user is not admin
- Click on the **Button** handle to open its properties, on the **Styles** tab go to the **Disable** property.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/how-to/access-currentuser/button.png" alt="Properties of button" />
</div>
- Set a condition on the Disable field so that if the the user who is using the app does not have **admin** value in the first index of **groups** array return **true**. The condition can be:
```javascript
{{globals.currentUser.groups[1] !== "admin" ? true : false}}
```
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/how-to/access-currentuser/disable.png" alt="Disable Property of button" />
</div>
- Now, when you'll **release** the app, if the user is not is not admin the button will be disabled.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/how-to/access-currentuser/released.png" alt="Released button disabled when user is not admin" />
</div>
:::info
In this how-to we have used the **Groups** property of the **Current User**. You can use any of the exposed variables mentioned above according to your use.
:::

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