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 #7457 from ToolJet/platform/v5.0

Browse source 
Release v2.18.0 Platform v5.0
This commit is contained in:
Midhun G S 2023-09-28 14:39:37 +05:30 committed by GitHub
commit 68dca28800
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
653 changed files with 115028 additions and 2208 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.version
View file

@ -1 +1 @@
2.17.5
2.18.0

79
README.md
View file

@ -1,4 +1,6 @@
ToolJet is an **open-source low-code framework** to build and deploy internal tools quickly with minimal engineering effort. ToolJet's drag and drop frontend builder allows you to build complicated responsive frontends within minutes. You can also connect to your data sources, such as databases ( PostgreSQL, MongoDB, Elasticsearch & more), API endpoints (ToolJet supports importing OpenAPI spec & OAuth2 authorization), SaaS tools (Stripe, Slack, Google Sheets, Airtable, Notion & more) and object storage services ( S3, GCS, Minio, etc ) to fetch and write data.
ToolJet is an **open-source low-code framework** to build and deploy internal tools with minimal engineering effort. ToolJet's drag and drop frontend builder allows you to create complex, responsive frontends within minutes. Additionally, you can integrate various data sources, including databases like PostgreSQL, MongoDB, and Elasticsearch; API endpoints with OpenAPI spec and OAuth2 support; SaaS tools such as Stripe, Slack, Google Sheets, Airtable, and Notion; as well as object storage services like S3, GCS, and Minio, to fetch and write data.
⭐ If you find ToolJet useful, please consider giving us a star on GitHub! Your support helps us continue to innovate and deliver exciting features.
![Docker Cloud Build Status](https://img.shields.io/docker/cloud/build/tooljet/tooljet-ce)
![GitHub contributors](https://img.shields.io/github/contributors/tooljet/tooljet)
@ -13,10 +15,8 @@ ToolJet is an **open-source low-code framework** to build and deploy internal to
<p align="center">
<img src="https://user-images.githubusercontent.com/7828962/211444352-4d6d2e4a-13c9-4980-9e16-4aed4af9811b.png"/>
</p>
<p align="center">
<kbd>
<img src="https://user-images.githubusercontent.com/7828962/202402863-2851a072-9dca-4b8b-9473-0d044373928b.png"/>
@ -45,31 +45,33 @@ ToolJet is an **open-source low-code framework** to build and deploy internal to
## All features
- **Visual app builder:** 40+ built-in responsive widgets such as Tables, Charts, Lists, Forms, Progressbars, and more.
- **ToolJet Database:** In-built no-code database.
- **Multi-Page:** Build an application with as many pages as you want.
- **Multiplayer editing:** multiple users can use the app builder at the same time.
- **40+ data sources:** connect to external databases, cloud storages and APIs.
- **Desktop & mobile:** layout widths can be customised to support different screens.
- **Self-host:** (supports Docker, Kubernetes, Heroku, AWS EC2, Google Cloud Run, and more).
- **Collaborate:** add comments anywhere on the canvas and tag your team members.
- **Extend with plugins:** use our [commandline tool](https://www.npmjs.com/package/@tooljet/cli) to easily bootstrap new connectors.
- **Version control:** every application have different versions with proper release cycle.
- **Run JS & Python code:** ability custom JavaScript & Python snippets
- **Granular access control** on group-level and app-level.
- **Low-code:** write JS code almost anywhere in the builder. For example, the color property of text can be set to `status === 'success' ? 'green' : 'red'`
- **No-code query editors:** for all supported data sources.
- **Join and transform data:** transform query results using just JavaScript/Python code.
- **Visual App Builder:** 40+ built-in responsive components, including Tables, Charts, Lists, Forms, and Progress Bars.
- **ToolJet Database:** Built-in no-code database.
- **Multi-Page:** Build an application with multiple pages.
- **Multiplayer editing:** Allows simultaneous app building by multiple developers.
- **40+ data sources:** Integrate with external databases, cloud storage, and APIs.
- **Desktop & mobile:** Customize layout widths to fit various screen sizes.
- **Self-host:** Supports Docker, Kubernetes, Heroku, AWS EC2, Google Cloud Run, and more.
- **Collaborate:** Add comments anywhere on the canvas and tag your team members.
- **Extend with plugins:** Use our [command-line tool](https://www.npmjs.com/package/@tooljet/cli) to easily bootstrap new connectors.
- **Version control:** Manage multiple application versions with a structured release cycle.
- **Run JS & Python code:** Execute custom JavaScript and Python snippets.
- **Granular access control:** Set permissions at both group and app levels.
- **Low-code:** Use JS code almost anywhere within the builder, such as setting text color based on status with
`status === 'success' ? 'green' : 'red`.
- **No-code query editors:** Query Editors available for all supported data sources.
- **Join and transform data:** Transform query results using JavaScript or Python code.
- **Secure:** All the credentials are securely encrypted using `aes-256-gcm`.
- **Doesn't store data:** ToolJet acts only as a proxy and doesn't store any data.
- **SSO:** Supports multiple SSO providers
- **Data Privacy:** ToolJet serves solely as a proxy and does not store data.
- **SSO:** Supports multiple Single Sign-On providers.
<hr>
## Quickstart
The easiest way to get started with ToolJet is by creating a [ToolJet Cloud](https://tooljet.com) account. ToolJet Cloud offers a hosted solution of ToolJet. If you want to self-host ToolJet, kindly proceed to [deployment documentation](https://docs.tooljet.com/docs/setup/).
You can deploy ToolJet on Heroku for free using the one-click-deployment button only until **28th November 2022**.
You can deploy ToolJet on Heroku using one-click-deployment.
<p align="center">
<a href="https://heroku.com/deploy?template=https://github.com/tooljet/tooljet/tree/main"><img src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy to Heroku" height=32></a>
<a href="https://cloud.digitalocean.com/apps/new?repo=https://github.com/ToolJet/ToolJet/tree/main"><img src="https://www.deploytodo.com/do-btn-blue.svg" alt="Deploy to DigitalOcean" height=32></a>
@ -89,32 +91,41 @@ docker run \
## Tutorials and examples
[GitHub contributor leaderboard using ToolJet](https://blog.tooljet.io/building-a-github-contributor-leaderboard-using-tooljet/)<br>
[Cryptocurrency dashboard using ToolJet](https://blog.tooljet.com/how-to-build-a-cryptocurrency-dashboard-in-10-minutes/)<br>
[WhatsApp CRM using ToolJet](https://blog.tooljet.com/build-a-whatsapp-crm-using-tooljet-within-10-mins/)<br>
[AWS S3 file explorer](https://blog.tooljet.com/building-an-app-to-view-and-upload-files-in-aws-s3-bucket/)<br>
[Time Tracker Application](https://docs.tooljet.com/docs/#quickstart-guide)<br>
[Build your own CMS using low-code](https://blog.tooljet.com/build-cms-using-lowcode-and-mongodb/)<br>
[AWS S3 Browser](https://blog.tooljet.com/build-an-aws-s3-broswer-with-tooljet/)<br>
## Documentation
Documentation is available at https://docs.tooljet.com.
- [Getting Started](https://docs.tooljet.com)<br>
- [Datasource Reference](https://docs.tooljet.com/docs/data-sources/airtable/)<br>
- [Widget Reference](https://docs.tooljet.com/docs/widgets/button)
- [Data source Reference](https://docs.tooljet.com/docs/data-sources/airtable/)<br>
- [Component Reference](https://docs.tooljet.com/docs/widgets/button)
## Self-hosted
You can use ToolJet cloud for a fully managed solution. If you want to self-host ToolJet, we have guides on deploying ToolJet on Kubernetes, AWS EC2, Docker, Heroku and more.
You can use ToolJet Cloud for a fully managed solution. If you want to self-host ToolJet, we have guides on deploying ToolJet on Kubernetes, AWS EC2, Docker, Heroku and more.
| Provider | Documentation |
| ------------- | ------------- |
| :------------- | :------------- |
| Digital Ocean | [Link](https://docs.tooljet.com/docs/setup/digitalocean) |
| Docker | [Link](https://docs.tooljet.com/docs/setup/docker) |
| Heroku | [Link](https://docs.tooljet.com/docs/setup/heroku) |
| AWS EC2 | [Link](https://docs.tooljet.com/docs/setup/ec2) |
| AWS EKS (Kubernetes) | [Link](https://docs.tooljet.com/docs/setup/kubernetes) |
| AWS ECS | [Link](https://docs.tooljet.com/docs/setup/ecs) |
| OpenShift | [Link](https://docs.tooljet.com/docs/setup/openshift) |
| Helm | [Link](https://docs.tooljet.com/docs/setup/helm) |
| AWS EKS (Kubernetes) | [Link](https://docs.tooljet.com/docs/setup/kubernetes) |
| GCP GKE (Kubernetes) | [Link](https://docs.tooljet.com/docs/setup/kubernetes-gke) |
| Azure AKS (Kubernetes) | [Link](https://docs.tooljet.com/docs/setup/kubernetes-aks) |
| Heroku | [Link](https://docs.tooljet.com/docs/setup/heroku) |
| Docker | [Link](https://docs.tooljet.com/docs/setup/docker) |
| Azure Container | [Link](https://docs.tooljet.com/docs/setup/azure-container) |
| Google Cloud Run | [Link](https://docs.tooljet.com/docs/setup/google-cloud-run) |
| Deploying ToolJet client | [Link](https://docs.tooljet.com/docs/setup/client) |
| Deploying ToolJet on a Subpath | [Link](https://docs.tooljet.com/docs/setup/tooljet-subpath/) |
## Marketplace
ToolJet can now be found on both AWS and Azure Marketplaces, making it simpler than ever to access and deploy our app-building platform.
Find ToolJet on AWS Marketplace [here](https://aws.amazon.com/marketplace/pp/prodview-fxjto27jkpqfg?sr=0-1&ref_=beagle&applicationId=AWSMPContessa) and explore seamless integration on Azure Marketplace [here](https://azuremarketplace.microsoft.com/en-us/marketplace/apps/tooljetsolutioninc1679496832216.tooljet?tab=Overview).
## Community support
For general help using ToolJet, please refer to the official [documentation](https://docs.tooljet.com/docs/). For additional help, you can use one of these channels to ask a question:
@ -124,13 +135,13 @@ For general help using ToolJet, please refer to the official [documentation](htt
- [Twitter](https://twitter.com/ToolJet) - Get the product updates easily.
## Roadmap
Check out our [roadmap](https://github.com/ToolJet/ToolJet/projects/2) to get informed of the latest features released and the upcoming ones.
Check out our [roadmap](https://github.com/ToolJet/ToolJet/projects/2) to stay updated on recently released features and to learn about what's coming next.
## Branching model
We use the git-flow branching model. The base branch is `develop`. If you are looking for a stable version, please use the main branch or tags labeled as v1.x.x.
## Contributing
Kindly read our [Contributing Guide](CONTRIBUTING.md) to learn and understand about our development process, how to propose bug fixes and improvements, and how to build and test your changes to ToolJet. <br>
Kindly read our [Contributing Guide](CONTRIBUTING.md) to familiarize yourself with ToolJet's development process, how to suggest bug fixes and improvements, and the steps for building and testing your changes. <br>
## Contributors
<a href="https://github.com/tooljet/tooljet/graphs/contributors">

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

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

15
docs/docs/app-builder/canvas.md
View file

@ -7,17 +7,18 @@ Canvas is the center area of the ToolJet app builder where the application is bu
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/canvas.png" alt="App Builder: Canvas"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/canvasnew.png" alt="App Builder: Canvas"/>
</div>
<br/>
:::info
- The Canvas height and width can be adjusted from the [Global Settings](/docs/app-builder/topbar#global-settings).
- When the [Pages drawer](/docs/tutorial/pages) on the left is opened or pinned, the canvas becomes scrollable.
- The Canvas height and width can be adjusted from the [Global Settings](/docs/app-builder/left-sidebar#global-settings).
- When the [Pages drawer](/docs/tutorial/pages) on the left is opened or pinned, the canvas becomes horizontally scrollable.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/canvasscroll.gif" alt="App Builder: Canvas"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/scrollnew.gif" alt="App Builder: Canvas"/>
</div>
:::
@ -28,7 +29,7 @@ All the components are fully interactive in editor mode - to prevent interaction
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/arrange.png" alt="App Builder: Canvas"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/handlenew.png" alt="App Builder: Canvas"/>
</div>
@ -46,7 +47,7 @@ You can precisely set the position of selected components using keyboard arrow k
### 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.
ToolJet comes with flexible components to group other components together, such as **[Container](/docs/widgets/container/)** and **[Form](/docs/widgets/form/)**. When you drag and drop components in containers/forms they create a group of nested components. All components can be nested in this way.
### Hide or Disable Components
@ -62,5 +63,5 @@ For example: We want to disable a button when a checkbox is checked so we can si
### Clone Components
You can clone existing components on the canvas by **cmd/ctrl + d**. Check other **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)**
You can clone existing components on the canvas by **cmd/ctrl + d**. Check other **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)**.

42
docs/docs/app-builder/left-sidebar.md
View file

@ -8,11 +8,13 @@ Left-sidebar has the following options:
- **[Pages](#pages)**
- **[Inspector](#inspector)**
- **[Debugger](#debugger)**
- **[Global Settings](#global-settings)**
- **[Comments](#comments)**
- **[Theme switch](#theme-switch)**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/newui.png" alt="App Builder: Left-sidebar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/leftnew.png" alt="App Builder: Left-sidebar"/>
</div>
@ -24,7 +26,7 @@ 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"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/pagesnew.png" alt="App Builder: Left-sidebar"/>
</div>
@ -36,7 +38,7 @@ 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"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/inspectornew.png" alt="App Builder: Left-sidebar"/>
</div>
@ -58,8 +60,40 @@ Debugger consists of two main sections:
</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 header for launched apps**: Toggle this on to the hide the tooljet's header when the applications are launched
- **Maintenance mode**: Toggle this on to put the application in maintenance mode. When in **maintenance mode**, on launching the app, the user will get an error message that **the app is under maintenance**.
- **Max width of canvas**: Modify the width of the canvas in **px** or **%**. The default width is 1292 px.
- **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/leftsidebar/globalnew.png" alt="App Builder: Left-sidebar"/>
</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/leftsidebar/commentnew.png" alt="App Builder: Left-sidebar"/>
</div>
## Theme Switch
Use the theme switch button to toggle ToolJet between light and dark modes.
While developers can access the current theme's value through global variables using `{{globals.theme.name}}`, it is not currently feasible to change the theme programmatically.
While developers can access the current theme's value through global variables using `{{globals.theme.name}}`, it is not currently feasible to change the theme programmatically.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/theme.png" alt="App Builder: Left-sidebar"/>
</div>

2
docs/docs/app-builder/overview.md
View file

@ -15,6 +15,6 @@ ToolJet's App Builder allows you to build applications. ToolJet's app builder ha
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/builder.png" alt="App Builder: Overview"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/appbuilderui2.png" alt="App Builder: Overview"/>
</div>

8
docs/docs/app-builder/right-sidebar.md
View file

@ -7,23 +7,23 @@ The **Components Library** on the right sidebar contains all of the available co
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/rightsidebar/rightsidebar.png" alt="App Builder: Component library- right sidebar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/rightsidebar/librarynew.png" alt="App Builder: Component library- right sidebar"/>
</div>
:::tip
Check the **[Components Catalog](/docs/widgets/overview)** here to know more about specific component.
Check the **[Components Catalog](/docs/widgets/overview)** to know more about specific component.
:::
## Component Config Inspector
The Component Config Inspector is also called as component inspector. It contains all the available settings for the selected component and is where you **set values**, **update component names**, and **create event handlers**. The Component Inspector organizes settings into different sections, such as **Property** and **Styles**.
To open the Component Config Inspector, click on the component handle that is present on the top of the component including **⚙️ + Component Name** and the component inspector will open up on the right side:
To open the Component Config Inspector, click on the **[component handle](/docs/app-builder/canvas#arrange-components)** that is present on the top of the component including **⚙️ + Component Name** and the component inspector will open up on the right side:
<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"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/rightsidebar/configinspector.gif" alt="App Builder: Component library- right sidebar"/>
</div>

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

@ -7,7 +7,7 @@ ToolJet apps offer two sharing options: they can either be shared privately with
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/share/modal.png" alt="Share modal" width='700'/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/share/sharenew.png" alt="Share modal" width='700'/>
</div>
@ -17,7 +17,7 @@ To share the app with external end users and make it accessible to anyone on the
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/share/shareon.png" alt="Share modal" width='700'/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/share/publicnew.png" alt="Share modal" width='700'/>
</div>
@ -39,7 +39,7 @@ ToolJet apps can be directly shared with end users and embedded into web apps us
For embedding private ToolJet apps, you'll need to set an environment variable in the `.env` file.
| Variable | Description |
| --------------- | ------------------------------------- |
|:-------------- |:------------------------------------ |
| ENABLE_PRIVATE_APP_EMBED | `true` or `false` |
You can learn more [here](/docs/setup/env-vars#enabling-embedding-of-private-apps).

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

@ -7,35 +7,19 @@ Topbar is present at the top of the app-builder, and is used to configure the ap
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/toolbar.png" alt="App Builder: Topbar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/topbarnew.png" alt="App Builder: Topbar"/>
</div>
### App name
App name can be edited from the left side of the topbar next to the ToolJet logo.
The App name can be modified by selecting the application name located on the left side of the topbar.
When a new app is created, by default its name is set to **Untitled app**
Upon the creation of a new app, it is automatically assigned a unique app name.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/name.png" alt="App Builder: Topbar"/>
</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 header for launched apps**: Toggle this on to the hide the tooljet's header when the applications are launched
- **Maintenance mode**: Toggle this on to put the application in maintenance mode. When in **maintenance mode**, on launching the app, the user will get an error message that **the app is under maintenance**.
- **Max width of canvas**: Modify the width of the canvas in **px** or **%**. The default width is 1292 px.
- **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: Topbar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/appnamenew.png" alt="App Builder: Topbar"/>
</div>
@ -43,13 +27,13 @@ To configure the app's global settings, click on the kebab menu(three vertical d
Switch the canvas mode in Mobile or Desktop layout from the topbar.
#### Adding existing component to mobile layout
#### Showing component on 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.
Click on the component handle to open [component config inspector](/docs/app-builder/components-library#component-config-inspector) on the right sidebar. Scroll down to the **Layout** section and toggle on the Mobile Layout option. The width of the components will be adjusted to fit the Mobile Layout.
#### Adding a new component to mobile layout
Switch the layout to mobile by clicking the button on the topbar. 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.
Switch the canvas to mobile layout by clicking the mobile icon on the topbar. Drag and drop a new component to the canvas. This component will not be visible on the desktop layout unless **Show on desktop** is enabled from the component config inspector.
:::info
Width of the component will be automatically adjusted to fit the screen while viewing the application in app viewer.
@ -57,41 +41,55 @@ Width of the component will be automatically adjusted to fit the screen while vi
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/view.png" alt="App Builder: Topbar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/canvasmodes.gif" alt="App Builder: Topbar"/>
</div>
### Undo or Redo
### Changes saved indicator
Use the undo or redo buttons from the topbar to undo or redo any change on the canvas.
You can also **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)** to perform such actions.
Whenever a change is made on the component or the query panel/queries, the changes are saved automatically. The changes saved indicator will be displayed on the topbar. This helps the developer to know if the changes are saved or not.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/undo.png" alt="App Builder: Topbar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/changessaved.png" alt="App Builder: Topbar"/>
</div>
### Developer Details
This will show a profile picture of the developer who is currently working on the application. Hovering over the profile picture will show the name of the developer. If there is no profile picture, then the first letter of the first name and last name will be displayed.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/profile.png" alt="App Builder: Topbar"/>
</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.
**Add** or **remove** versions of an application from the Version Manager. Click on the `edit` icon next to version name to rename the version.
When many developers are working on an app, **Versioning** allows them to save their own version of the app. This also prevents developers from overwriting the other developer's work.
:::tip
Versioning is also helpful when working with **[multiple environments](/docs/release-management/multi-environment/)** like development, staging and production.
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/version.png" alt="App Builder: Topbar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/versionsnew.png" alt="App Builder: Topbar"/>
</div>
### Comments
### Undo or Redo
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.
Undo or Redo any action performed on the canvas.
You can also use **[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/comments.png" alt="App Builder: Topbar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/undonew.png" alt="App Builder: Topbar"/>
</div>
@ -102,9 +100,13 @@ Share your applications with a unique URL generated automatically or edit the UR
- 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.
:::tip
Learn more about **[Sharing](/docs/app-builder/share)** your tooljet applications.
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/share.png" alt="App Builder: Topbar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/sharenew.png" alt="App Builder: Topbar"/>
</div>
@ -114,7 +116,7 @@ Clicking on **Preview** button will open up the currently opened version of the
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/preview.png" alt="App Builder: Topbar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/previewnew.png" alt="App Builder: Topbar"/>
</div>
@ -128,6 +130,6 @@ ToolJet will block editing of the Released version of an app and will display a
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/release.png" alt="App Builder: Topbar"/>
<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/releasenew.png" alt="App Builder: Topbar"/>
</div>

208
docs/docs/dashboard.md Normal file
View file

@ -0,0 +1,208 @@
---
id: dashboard
title: Dashboard
---
The ToolJet Dashboard is the initial landing page that you see upon logging into your workspace. This interface serves as a central hub where you can access a variety of features. Primarily, it displays all the applications you've created within ToolJet. Moreover, you have the capability to create new workspaces and applications directly from this dashboard. Additionally, it provides an option to create folders for categorizing and managing applications for easier organization, access control, and workflow management.
Furthermore, the dashboard serves as a gateway to various essential sections, such as **[Workflows](/docs/workflows/overview)**, **[ToolJet Database](/docs/tooljet-database)**, **[Data Sources](/docs/data-sources/overview)**, **[Marketplace](/docs/marketplace/marketplace-overview)**, **[Workspace Settings](/docs/tutorial/manage-users-groups)**, **[Instance Settings](/docs/enterprise/superadmin/#instance-settings)**, and **[Audit logs](/docs/enterprise/audit_logs/)**. You can effortlessly navigate to these sections directly from the dashboard.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/dashboardoptions.png" alt="App menu options"/>
</div>
## Workspace Manager
The workspace manager is located on the top left corner of the dashboard. Clicking on the workspace manager will open a dropdown menu with a list of all the workspaces you are a part of. You can switch between workspaces by clicking on the workspace name from the dropdown menu.
You can also create a new workspace by clicking on the `Add new workspace` button on the bottom of the dropdown menu. Clicking on this button will open a modal, enter the name of the workspace and click on the `Create Workspace` button to create a new workspace. Workspaces can be **renamed** by clicking on the `edit` icon on the right side of the workspace name.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/workspacemenu.png" alt="Dashboard"/>
</div>
## Create a new app
To create a new app, click on the `Create new app` button on the top left corner of the dashboard. Clicking on this button will instantly create a new app and open the **[app builder](/docs/next/app-builder/overview)**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/newapp.gif" alt="Dashboard"/>
</div>
<br/>
There are three dots on the right side of the `Create new app` button. Clicking on these dots will open a dropdown menu with two options:
### Choose from templates
This option will open a modal with a list of pre-built templates. You can choose any template from this list to create a new app.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/choosefromtemplate.gif" alt="Dashboard"/>
</div>
### Import
This option will open a file picker to import a JSON file. This JSON file should be the app exported from ToolJet.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/import.gif" alt="Dashboard"/>
</div>
### Importing app connected to marketplace plugins
When importing an app with marketplace plugins, the marketplace plugin should be installed in the tooljet workspace where the app is being imported. If the marketplace plugin is not installed, the app will be imported without the queries for that plugin.
#### When marketplace plugin is installed
If marketplace plugin is installed in the tooljet workspace where the app is being imported, the queries connected to the marketplace plugin will be available in the imported application. The queries will be linked to the data source with the same name if it is already present. If the data source is not present, a new data source will be created of that marketplace plugin and linked to the queries.
#### When marketplace plugin is not installed
If you have an app with a query linked to a marketplace plugin, and you import that app in a tooljet workspace where the marketplace plugin is not installed as the data source, the queries will be not be available in the imported application.
### Importing app connected to tooljet table
When the app(JSON file) that includes the table schema is imported, and the table is not present in the tooljet database of the workspace where the app is being imported, a new table will be created in the tooljet database with the same name as the table in the imported app.
If the table with the same name is already present in the workspace, the new table will be created with the name `<table name>_<unix timestamp>`. Example: `<tablename>_1627980000`.
## Create a new folder
Folders can be created to organize your apps. To create a new folder, click on the `+` button on the left drawer of the dashboard. Clicking on this button will open a modal, enter the name of the folder and click on the `Create Folder` button to create a new folder.
### Delete or Edit Folder
A folder can be **deleted** or **renamed**. To delete or rename a folder, click on the kebab menu on the right side of the folder name. Clicking on kebab menu will open a dropdown menu with two options:
- **Edit folder**: This option will open a modal, enter the new name of the folder and click on the `Edit` button to rename the folder.
- **Delete folder**: This option will open a confirmation modal to delete the folder. Click on the `Delete` button to delete the folder.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/newfolder.gif" alt="Dashboard"/>
</div>
### Search folders
Folders can be searched by clicking on the search icon on the left drawer of the dashboard. Clicking on the search icon will open a search bar, enter the name of the folder to search.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/search.png" alt="Dashboard"/>
</div>
## App cards
The dashboard displays all the apps created in the workspace as cards. These cards are displayed in a grid layout. The app cards display the **name of the app**, the **name of the creator**, and the **date of creation**. The app cards also display the app **icon**, which can be changed by clicking on the `Change Icon` option from the app menu.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/appcard.png" alt="Dashboard"/>
</div>
## App menu
The app menu is located on the top right corner of the app card. Clicking on the app menu will open a dropdown menu with a list of options. These options are:
- **[Change Icon](#change-icon)**
- **[Add to folder](#add-to-folder)**
- **[Clone app](#clone-app)**
- **[Export app](#export-app)**
- **[Delete app](#delete-app)**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/appmenu.gif" alt="Dashboard"/>
</div>
### Change Icon
This option will open a modal with a list of icons. You can choose any icon from this list to change the app icon.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/changeicon.png" alt="Dashboard"/>
</div>
### Add to folder
This option will open a modal with a list of folders. You can choose any folder from this list to add the app to the folder.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/addtofolder.png" alt="Dashboard"/>
</div>
### Clone app
Selecting this option will immediately open the cloned app in the app builder with the same configuration as the original app. The new app will be named as `<original app name>` followed by unix timestamp. Example: `<original app name> 1627980000`.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/cloneapp.gif" alt="Dashboard"/>
</div>
### Export app
This option will download a JSON file of the application. This JSON file can be [imported](#import) to ToolJet to create a new app. The exported app will include all the queries connected to global data sources including the data source created from Marketplace plugins.
This option allows you to select a specific version of the app to export or export all the versions of the app. To export a specific version of the app, select a version from the list of available versions in the modal and click on the `Export selected version` and to export all the versions of the app, click on the `Export All` button.
#### Export ToolJet table schema
Selecting this option will inclue the schema of the tooljet table connected to that application in the exported JSON file. This option is available for all the apps on ToolJet however only the apps with a tooljet table connected(includes tjdb query) will have the schema included in the exported JSON file.
This JSON file can be used to [import](#importing-app-connected-to-tooljet-table) the application to ToolJet along with the table schema that was connected to the application.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/exportapp.png" alt="Dashboard"/>
</div>
### Delete app
This option will open a confirmation modal to delete the app. Click on the `Delete` button to delete the app.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/deleteapp.png" alt="Dashboard"/>
</div>
## App search
Apps can be searched by clicking on the search bar on the center of the dashboard. Click on the search bar and enter the name of the app to search.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/searchapp.png" alt="Dashboard"/>
</div>
## Current ToolJet Version
The current version of ToolJet is displayed on the top right corner of the dashboard.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/dashboard/currentversion.png" alt="Dashboard"/>
</div>

87
docs/docs/data-sources/mysql.md
View file

@ -3,63 +3,94 @@ id: mysql
title: MySQL
---
# MySQL
ToolJet can connect to MySQL databases to read and write data.
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 establish a connection with the MySQL datasource, you can either click on the `+Add New` button located on the query panel or navigate to the **[Global Datasources](/docs/data-sources/overview)** page through the ToolJet dashboard.
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.
<div style={{textAlign: 'center'}}>
ToolJet requires the following to connect to your MySQL database.
<img className="screenshot-full" src="/img/datasource-reference/mysql/addmysql.gif" alt="MySQL datasource"/>
- **Host**
- **Port**
- **Username**
- **Password**
</div>
<br/>
:::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.
:::
**ToolJet requires the following to connect to your MySQL database:**
| Parameter | Description |
|:--- |:--- |
| Username | Username of the MySQL database |
| Password | Password of the MySQL database |
| Database name | Name of the MySQL database |
| Connection type | Connection type of the MySQL database: either **Hostname** or **Socket**. |
If you are using **Hostname** as the connection type, you will need to provide the following information:
| Parameter | Description |
|:--- |:--- |
| Host/IP | Hostname or IP address of the MySQL database |
| Port | Port number of the MySQL database |
| SSL | Enable SSL connection to the MySQL database |
If you are using **Socket** as the connection type, you will need to provide the following information:
| Parameter | Description |
|:--- |:--- |
| Socket path | Path of the socket file |
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"/>
<img className="screenshot-full" src="/img/datasource-reference/mysql/mysqlconnect.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.
Click on **Test connection** to verify the correctness of the provided credentials and the accessibility of the database to the ToolJet server. Finally, click the **Save** button to save the data source configuration.
## 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:
Once the MySQL data source is added, you can create queries to read and write data to the database. You can create queries from the **[Query Panel](/docs/app-builder/query-panel#add)** located at the bottom panel of the app builder.
1. **[SQL mode](/docs/data-sources/mysql#sql-mode)**
2. **[GUI mode](/docs/data-sources/mysql#gui-mode)**
1. **[SQL mode](/docs/data-sources/mysql#sql-mode)**
2. **[GUI mode](/docs/data-sources/mysql#gui-mode)**
#### SQL 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.
SQL mode can be used to query MySQL database using SQL queries. Select SQL mode from the dropdown and then enter the SQL query in the editor.
**NOTE**: Query should be saved before running.
**Example:**
```sql
SELECT * FROM users
```
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/mysql/mysql-sqlmode.png" alt="mysql mode" />
<img className="screenshot-full" src="/img/datasource-reference/mysql/sqlmode.png" alt="mysql"/>
</div>
### GUI 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. Each object should contain the primary key column and the columns to be updated.
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:**
```json
{{ [ {id: 1, channel: 33}, {id:2, channel:24} ] }}
```
**Example**: `{{ [ {id: 1, channel: 33}, {id:2, channel:24} ] }}`
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/mysql/guinew.png" alt="mysql"/>
<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.
</div>
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
:::
Query results can be transformed using transformations. Learn more about transformations [here](/docs/tutorial/transformations).
:::

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

@ -11,7 +11,7 @@ To establish a connection with the REST API global datasource, you can either cl
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/rest-api/restapi2.gif" alt="ToolJet - Data source - REST API" />
<img className="screenshot-full" src="/img/datasource-reference/rest-api/restconnect.gif" alt="ToolJet - Data source - REST API" />
</div>
@ -23,6 +23,9 @@ To establish a connection with the REST API global datasource, you can either cl
- **Basic**: Requires Username and Password
- **Bearer**: Requires a token, typically a JSON Web Token (JWT), to grant access
- **OAuth 2.0**: The OAuth 2.0 protocol mandates the provision of the following parameters: access token URL, access token URL custom headers, client ID, client secret, scopes, custom query parameters, authorization URL, custom authentication parameters, and client authentication.
- __SSL Certificate__: SSL certificate to use with REST API requests. Supported Types: None, CA Certificate, and Client Certificate
- **CA Certificate**: Requires a CA certificate to verify the server certificate
- **Client Certificate**: Requires a client certificate to authenticate with the server
<div style={{textAlign: 'center'}}>
@ -36,7 +39,7 @@ REST HTTP methods that are supported are **GET, POST, PUT, PATCH & DELETE**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/rest-api/methods.png" alt="ToolJet - Data source - REST API" />
<img className="screenshot-full" src="/img/datasource-reference/rest-api/restquery.png" alt="ToolJet - Data source - REST API" />
</div>
@ -49,8 +52,7 @@ Once you have connected to the REST API datasource, follow these steps to write
2. Click the `+Add` button to open the list of available `local` and `global datasources`.
3. Select **REST API** from the global datasource section.
4. Enter the required query parameters.
5. Save the query.
6. Click `Preview` to view the data returned from the query or click `Run` to execute the query.
5. Click `Preview` to view the data returned from the query or click `Run` to execute the query.
:::tip
Query results can be transformed using Transformation. For more information on transformations, please refer to our documentation at **[link](/docs/tutorial/transformations)**.

425
docs/docs/getting-started.md
View file

@ -63,155 +63,386 @@ There are a few different ways to set up ToolJet depending on how you intend to
- Data security is top priority at ToolJet, read about our **[data security here](/docs/security)**.
:::
## The very quick quickstart
## Quickstart Guide
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.
In this quickstart guide, we'll cover the fundamentals of ToolJet by building a **Time Tracking Application** that will allow end-users to record their daily working hours with supporting details.
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)**
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/time-tracker-final-preview.png" alt="Application Preview" />
</div>
:::tip
Before getting into the quickstart, Sign up and create your account on **[ToolJet](https:///www.tooljet.com)**.
:::
If you don't already have a ToolJet account, head over to **[tooljet.com](https://tooljet.com)** to sign up for free. Existing users can simply log in.
### Create a database
### Create Database Table
1. Navigate to **ToolJet DB Editor** from the left sidebar on the dashboard
<div style={{textAlign: 'center'}}>
We'll first create a table in ToolJet's built-in **[database](/docs/tooljet-database)**.
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/compressed/tooljetdbeditor.webp" width="100%" height="100%" alt="Getting started: Quickstart" />
Navigate to the **Database** tab from the left sidebar. Click on the **Create new table** button on the top-left. A dialog box will slide from the right to configure the database table properties.
</div>
<div style={{display: 'flex', justifyContent: 'space-between', alignItems:'center'}}>
<div style={{flex: 1, padding: '0', alignment:'center'}}>
<p style={{textAlign: 'left'}}>
In the <b>Table name</b> field, enter <i>timeTracker</i>.
<br/>
<br/>
The <b>id</b> field will be present by default to create a unique identifier for each record in our database table.
<br/>
<br/>
Click on the <b>Add more columns</b> button and enter <b>employee</b> in the Name field and select <b>varchar</b> as the Type.
<br/>
<br/>
Similarly, add four more columns:<br/><br/>
- Name: <b>taskname</b> | Type: <b>varchar</b> <br/><br/>
- Name: <b>duration</b> | Type: <b>integer</b> <br/><br/>
- Name: <b>dateoftask</b> | Type: <b>varchar</b> <br/><br/>
- Name: <b>description</b> | Type: <b>varchar</b>
<br/>
<br/>
Click on the <b>Create</b> button on the bottom right to create the table.
</p>
</div>
<div style={{flex: 1, padding: '10px'}}>
<img className="screenshot-full" src="/img/quickstart-guide/database-setup.png" alt="ToolJet Database Table" />
</div>
</div>
<br/>
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'}}>
For every column, you can choose from four data types - **varchar** for text, **integer** for numbers, **float** for decimal or fractional numbers and **boolean** for true or false values. The **Default** field allows you to enter a default value that will be used if no value is received from the frontend.
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/compressed/createnewtable.webp" width="100%" height="100%" alt="Getting started: Quickstart" />
Add three rows of dummy data by clicking on the **Add New Row** button and entering the required values. We are entering email IDs for the employee column. Later, we'll use this **employee column** to display data specific to the logged-in user.
</div>
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/dummy-data.png" alt="Add Dummy Data" />
</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'}}>
### Create UI For Home Page Using ToolJet App-Builder
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/compressed/addnewrow.webp" width="100%" height="100%" alt="Getting started: Quickstart" />
We'll now go ahead and build the Home page of our application using the **ToolJet** **[App-Builder](/docs/app-builder/overview)**.
</div>
Click on the **Dashboard** button on the sidebar and click on the **Create new app** button. A new application will be created with an empty canvas.
:::info
Learn more about the **[ToolJet Database here](/docs/tooljet-database)**
:::
We can see the **Component Library** on the right, we can drag and drop pre-built components from the **Component Library** on the canvas to create the UI. The **Query Panel** at the bottom can be used to create and manage queries to interact with the database.
### Create a new application
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/app-builder-overview.png" alt="App-Builder Overview" />
</div>
1. To create a new ToolJet application, go to the **Dashboard** -> **Create new application**.
Rename the application to *Time Tracker*. Minimize the Query Panel by clicking on the **Hide Query Panel** button on its top-left.
<div style={{textAlign: 'center'}}>
Click and drag a **[Container](/docs/widgets/container)** component to the canvas. Adjust the borders of the **Container** and expand it till it covers the visible portion of the canvas.
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/compressed/createnewapplication.webp" width="100%" height="100%" alt="Getting started: Quickstart" />
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/drag-drop-container.gif" alt="Drag and Drop Container" />
</div>
</div>
Each time you click and select the **Container** or any other component on the canvas, configuration related to the component will appear on the right.
:::info
You can also use the existing UI **templates** for your application or **import** an application to your workspace.
:::
<div style={{display: 'flex', justifyContent: 'space-between', alignItems:'center'}}>
<div style={{flex: 1, padding: '0', alignment:'center'}}>
<p style={{textAlign: 'left'}}>
Each component will show a different configuration based on its overall functionality.
<br/>
<br/>
Right at the top is an input field that lets us name the component. We'll click on it and rename the container to <i>home</i>.
<br/>
<br/>
Below we have the <b>Properties</b> and <b>Styles</b> tab.
<br/>
<br/>
<b>Properties</b> tab lets us configure the functional behaviour of a component.
<br/>
<br/>
<b>Style</b> tab allows us to add custom styling to the components.
</p>
</div>
<div style={{flex: 1, padding: '10px'}}>
<img className="screenshot-full" src="/img/quickstart-guide/container-config.png" alt="Container Configuration" />
</div>
</div>
<br/>
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'}}>
We'll give each component in this application a name that reflects its function. This naming strategy will become increasingly beneficial as the application expands and we need to identify specific components.
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/compressed/appbuilder.webp" width="100%" height="100%" alt="Getting started: Quickstart" />
Let's build the header of our application. Click and drag an **[Image](/docs/widgets/image)** component to the canvas from the library and rename it to *Logo*. Select the Image component, you'll see its configuration on the right.
Enter the below value as **URL**:
</div>
```js
https://static-00.iconduck.com/assets.00/tooljet-icon-1024x908-0mi0u3op.png
```
### Build the UI
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/image-config.png" alt="Image Component Configuration" />
</div>
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'}}>
<i>Feel free to add any other URL that you might wish to use as the logo.</i>
<br/><br/>
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/compressed/buildingui.webp" width="100%" height="100%" alt="Getting started: Quickstart" />
Place a **[Text](docs/widgets/text)** component next to it and rename the component to *headerText*. Paste following value under **Text** property:
</div>
```js
Time Tracker Application⏳
```
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/text-config.png" alt="Text Component Configuration" />
</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.
:::
Under **Styles**, change the **Text Size** to 25. We are now ready with the Header of the application.
### Build queries and bind data to UI
Next we'll use a **[Table](/docs/widgets/table)** component to display all the time tracker logs. The **Table** component offers a simple and intuitive way to display and interact with data.
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'}}>
Drag and drop a table component on the canvas. Adjust the width and make it slightly wider than the header. The default name of the table will be *table1*, rename it to *trackerTable*. We already have some dummy data in the **Table** component. We'll replace it with actual data later on.
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/compressed/tooljetdb.webp" width="100%" height="100%" alt="Getting started: Quickstart" />
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/rename-table.png" alt="Drag and Drop Table Component" />
</div>
</div>
### Create Your First Query In ToolJet
:::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.
:::
It's time to add some real data to our application.
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.
Click on the **Show Query Panel** button on the top-left of the **Query Panel** to expand it. Click on the **+Add** and select **ToolJet Database** - a new query will be created. Rename the query to *getTrackerSummary*. Select *timeTracker* (the database table that we had created at the start) as the Table name and **List Rows** as Operations.
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'}}>
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/first-query.gif" alt="Create a Get Query" />
</div>
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/compressed/createquery.webp" width="100%" height="100%" alt="Getting started: Quickstart" />
Enable **Run this query on load?** toggle, this will ensure that the query runs every time the application loads. We'll generally use this setting for queries that are used to fetch data. Click on the **Run** button to run the query.
</div>
To see the preview of the returned data, press on the **Preview** button in the **Query Panel**.
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'}}>
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/query-preview.png" alt="Query Preview" />
</div>
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/compressed/tabledata.webp" width="100%" height="100%" alt="Getting started: Quickstart" />
### Adding Queried Data To The Table
</div>
We need to use double curly braces `{{}}` to write custom JavaScript code or access values such as query results, component variables and other variables available in the ToolJet App-Builder.
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 )
The general format to access queries is:
<div style={{textAlign: 'center'}}>
```js
{{queries.queryName.data}}
```
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/compressed/selecttablecustomers.webp" width="100%" height="100%" alt="Getting started: Quickstart" />
A quick way to look at available queries (and other accessible values) would be to click on the **Inspector** button in the left side-bar and expand the **queries** dropdown.
</div>
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/inspector.gif" alt="Inspector" />
</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'}}>
We can use the queried data in our components. Let's insert the data returned by the *getTrackerSummary* query in our table. Hide the query panel and click on the **Table** component. Under the **Data** property, paste the below code:
<img className="screenshot-full" src="/img/v2-beta/getting_started/quickstart/compressed/addproductbutton.webp" width="100%" height="100%" alt="Getting started: Quickstart" />
```js
{{queries.getTrackerSummary.data}}
```
</div>
We've now replaced the static data with dynamic data that we are fetching from the database. The table now displays data fetched using the *getTrackerSummary* query.
:::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
:::
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/table-with-data.png" alt="Table With Queried Data" />
</div>
### Preview, Release and Share app
Let's make some more changes in the **Table** configuration. Disable all the properties under **Search sort and filter** and **Additional Actions**. We don't need them for our use-case.
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 opened 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.
### Creating Form To Submit Data
The **Modal** component can be used to create a pop-up form to submit data.
Drag a **[Modal](/docs/widgets/modal)** component from the components library and place it at the bottom-right of the table - you will notice that only a button with the label **Launch Modal** shows up on the canvas. We'll first change the name of the button to *logTimeButton* and **Trigger Button label** property to **Log Time**.
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/modal-button-config.png" alt="Modal Button Configuration" />
</div>
To edit the modal, click on the **Log Time** button(named *Launch Modal* earlier) - a modal will open up on your canvas. The modal will stay open till you click on the `X` button/close button on the top-right. You can edit the modal and place other components over it while it is open. We'll place components on our modal to create a form layout to submit the time tracker details.
Let's change the **Title** property of the modal to *Log Details*. Click on the back button/`←` on the top-left of Modal component's configuration and go back to the components library.
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/change-modal-label.gif" alt="Modal Label Change" />
</div>
Drag four **[Text](/docs/widgets/text)** components on the modal and align them vertically. We'll rename the components and their labels according to the table below:
| Component | Component Name | Text property |
|:----------------|:-------------------|:-----------------|
| Text |taskName | Task Name |
| Text |duration | Duration (In Hours) |
| Text |dateOfTask | Date Of Task |
| Text |taskDescription | Task Description |
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/modal-text-labels.png" alt="Modal Text Labels" />
</div>
We are ready with the labels, let's place the input components next to the labels. Drag **[Text Input](/docs/widgets/text-input)**, **[Number Input](/docs/widgets/number-input)**, **[Date Picker](/docs/widgets/datepicker)** and **[Textarea](/docs/widgets/textarea)** components and arrange them next to the labels. You'll find all the input fields under the **Form** section of the component library. We'll also add a **Submit** button below the input fields. Refer to the below table to rename the component name and default values:
| Component | Component Name | Default Value |
|:----------------|:-------------------|:-----------------|
| Text Input | taskNameInput | Development |
| Number Input | taskDurationInput | 1 |
| Date Picker | taskDateInput | {{moment().format("DD/MM/YYYY")}}|
| Textarea | taskDescriptionInput| Creating a modal component |
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/modal-with-inputs.png" alt="Modal With Input Fields" />
</div>
For the **Date Picker** field, we are using double curly braces to pass JavaScript code. Using the **Moment.js** library, we are getting today's date in the dd/mm/yyyy format. ToolJet comes with **Moment.js**, **Lodash** and **Axios** libraries to make it more convenient for you to work with custom JavaScript code.
We'll close the modal by clicking on the `X`/close button on the top-right.
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/open-close-modal.gif" alt="Open and Close the Modal Component" />
</div>
### Creating Query To Write Data
We are ready with the form. Now we need to create a query that will help us add new entries to the *timeTracker* table in the database. Click on the **+ Add** button in the Query Panel. Select **ToolJet Database** from the list of available sources.
Rename the query to *addLog*, select **Create row** as Operations and use the below configuration for the columns. We'll see how we can use custom code and use different keys to access the data available in the app-builder in the below table.
| Column Name | Keys |
| :-------------- | :------------------------ |
| employee | {{globals.currentUser.email}} |
| taskname | {{components.taskNameInput.value}} |
| duration | {{components.taskDurationInput.value}} |
| dateoftask | {{components.taskDateInput.value}} |
| taskdescription | {{components.taskDescriptionInput.value}} |
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/add-log-config.png" alt="Configuration for the addLog query" />
</div>
Click on the **Inspector** on the left-sidebar to look at the available values under **globals** and **components**.
<div style={{display: 'flex', justifyContent: 'space-between', alignItems:'center'}}>
<div style={{flex: 1, padding: '0', alignment:'center'}}>
<p style={{textAlign: 'left'}}>
The <b>currentUser</b> object holds all the values related to logged-in user.
<br/>
<br/>
You can refer to the logged-in user's firstName, lastName, email and groups using the <b>currentUser</b> object.
<br/>
<br/>
Similarly, the <b>components</b> object holds all the values related to the components in our application.
<br/>
<br/>
Now every time the <i>addLog</i> query runs, the values present in the referred keys will be written to the database.
</p>
</div>
<div style={{flex: 1, padding: '10px'}}>
<img className="screenshot-full" src="/img/quickstart-guide/inspector-objects.png" alt="Details in the Inspector Objects" />
</div>
</div>
<br/>
Later, we'll plug this query to the **Submit** button on *logTimeModal*.
### Using Events
**Events** allow us to run queries and other application functions based on button clicks, query completion and an array of other triggers.
The *addLog* query will add data to the the *timeTracker* table in the database when it runs. But we would want our **Table** component to be reloaded with the new data every time we add or delete the entries. Since the data in the **Table** component is coming from the *getTrackerSummary* query, we'll trigger the *getTrackerSummary* query after running the *addLog* query.
Click on the **+ New Event Handler** button in the *addLog* query - a new event will be added. Click on the event and select **Run Query** as Action and *getTrackerSummary* as Query.
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/query-success-event.png" alt="Configuration for the addLog query" />
</div>
Now the *getTrackerSummary* will run every time the *addLog* query is successfully executed, the **Table** component will also get updated with the new data since it displays the data returned by the *getTrackerSummary*.
It's time to add the *addLog* query to the modal and see it in action. Open the modal by clicking on *logTimeButton* and select the *submit* button that we've placed inside the modal.
Under **Events** configuration of the *submit* button, click on **+ Add Handler**, leave the Event as **On Click**, select the Action as **Run Query** and select *addLog* as the query.
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/modal-addlog-event.png" alt="Add addLog Query To Modal" />
</div>
Now whenever we click on the submit button, the *addLog* query will run and values present in the input fields will be written to the database.
We also need to show a prompt to indicate that the data has been added. Click on **+ Add Handler**, leave the Event as **On Click**, select the Action as **Show Alert** and enter **Log Added** as the Message and leave Alert Type as **Info**.
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/alert-event.png" alt="Add Alert Event" />
</div>
Finally, we would want our modal to close once we click on **Submit** and the required query and alert is triggered. Add one more **Event**, select **Close Modal** as the action type and *logTimeModal* as **Modal**.
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/close-modal-event.png" alt="Event to Close Modal" />
</div>
Now every time we click on the **Submit** button on the modal, the *addLog* query will run, followed by an alert and the modal being closed.
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/add-log.gif" alt="Add New Log Entries" />
</div>
### Adding Actions To Tables
Let's create a way to delete entries from the **Table** component using **Actions**.
We'll first create the required query to perform the action. Click on the **+ Add** button in the Query Panel. Select **ToolJet Database** from the list of available sources. Rename the query to *deleteLog*, select **Delete rows** as Operations.
For the **Filter**, select **id** as the column(first field), **equals** as the operation(second field) and paste the below code in the **key** input(third field):
```js
{{components.trackerTable.selectedRow.id}}
```
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/delete-log-config.png" alt="Delete Log Entries" />
</div>
When you click on a table row, its values get stored under the selectedRow key. To remove that row from the database, we match **selectedRow.id** with the database's **id** field.
We also need to run the *getTrackerSummary* query once the *deleteLog* query is completed to ensure that the **Table** component gets reloaded with the updated data. Click on the **+ New Event Handler** button in the *deleteLog* query - a new event will be added. Click on the newly created event, leave Event as **Query Success**, select **Run Query** as Action and *getTrackerSummary* as Query.
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/delete-query-success-event.png" alt="Delete Query Success Event" />
</div>
Now let's use this query with **Actions** in the **Table** component.
Go to the **Action Buttons** section of the *trackerTable* properties. Click on **+ New action button** and change Button Text to **Delete**, Background color to **Red**(first color in the palette) and Text color to **White**(last color in the palette.)
Click on **+ New event handler** and leave the Event as **On click** and select **Run Query** as the Action. Select *deleteLog* for the Query dropdown.
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/delete-action-config.png" alt="Delete Action Configuration" />
</div>
Now every time we click on the **Delete** action button, the *deleteLog* query will run and delete the related row.
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/delete-log-demo.gif" alt="Delete Log Entries" />
</div>
### Filter Data Based On The Logged-In User
In a typical time-tracking application, we only need to show the data related to the logged-in user. To achieve that, we need to add a filter to our *getTrackerSummary* query.
Open the *getTrackerSummary* query in the **Query Panel**, click on the **+ Add Condition** button associated with **Filter**.
For the **Filter**, select **employee** as the column(first field), **equals** as the operation(second field) and paste the below code in the **key** input(third field):
```js
{{globals.currentUser.email}}
```
Add some new entries to the Time Tracker. Earlier, we had put some test entries with test@gmail.com as the value for the **employee** column. Now, those entries will not appear and only the entries you have added with your current email(or logged in account) will appear on the table.
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/quickstart-guide/logged-in-user-data.png" alt="Filtered Data For Logged-In User" />
</div>
Congratulations! You've successfully built a time tracker application and, in the process, covered the essential fundamentals of ToolJet. Now you're well-equipped to take on more complex projects. Happy building!
:::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

69
docs/docs/tutorial/app-menu-options.md
View file

@ -1,69 +0,0 @@
---
id: app-menu-options
title: App menu options
---
# App menu options
Options that are available in the overflow menu of the app card are:
- **[Change Icon](#change-icon)**
- **[Add to folder](#add-to-folder)**
- **[Clone app](#clone-app)**
- **[Export app](#export-app)**
- **[Delete app](#delete-app)**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/tutorial/app-menu-options/app-menu.png" alt="App menu options"/>
</div>
## Change Icon
The icon on the app cards can be customised by selecting the `Change Icon` option.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/tutorial/app-menu-options/change-icon.png" alt="App menu options"/>
</div>
## Add to folder
ToolJet allows you to create folders (`+ Create new folder` from the left sidebar) on the dashboard, and any application can be added to these folders.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/tutorial/app-menu-options/movetofolder.png" alt="App menu options"/>
</div>
## Clone app
Any application created on ToolJet can be cloned using the `Clone app` option. The cloned application is the exact copy of the original app except that the user will have to re-enter the datasource credentials in cloned app.
## Export app
Export app option will allow the users to download `JSON` file with all the information about your application(excluding credentials). This JSON file can be used to import this application to the same or other workspace.
Users get the option to export:
- the currently released version
- a particular version from list latest version to oldest version
- all versions
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/tutorial/app-menu-options/export.png" alt="App menu options"/>
</div>
## Delete app
Use this option to complete remove the app from the workspace.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/tutorial/app-menu-options/delete.png" alt="App menu options"/>
</div>

21
docs/docs/tutorial/pages.md
View file

@ -78,11 +78,12 @@ There are several options available for a Page. To use these options, click on t
- **[Page Handle](#page-handle)**
- **[Rename](#rename)**
- **[Duplicate](#duplicate)**
- **[Mark Home](#mark-home)**
- **[Hide Page](#hide-page)**
- **[Delete Page](#delete-page)**
- **[Hide Page on app menu](#hide-page-on-app-menu)**
- **[Duplicate](#duplicate)**
- **[Event Handlers](#event-handlers)**
- **[Disable Page](#disable-page)**
- **[Delete Page](#delete-page)**
<div style={{textAlign: 'center'}}>
@ -129,7 +130,7 @@ The page which is marked home will have a **Home** icon on the left of the Page
</div>
:::
### Hide Page
### Hide Page on app menu
Hide Page option can be used to hide a page from the **page navigation sidebar** in viewer mode.
@ -189,6 +190,18 @@ Currently, there is **On page load** event available. You can use all the availa
</div>
### Disable Page
Disable page option can be used to disable a page. A disabled page won't be accessible in the viewer mode.
**Note:** Page marked as **home** can't be disabled.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/v2-beta/pages/disable.png" alt="Pages Panel" width="300" />
</div>
### Delete Page
You can **delete** a page from an application using this option.

117
docs/docs/widgets/bounded-box.md
View file

@ -5,7 +5,7 @@ title: Bounded Box
# Bounded box
A bounded box is an infinitely customizable image annotation component that can be used to select and tag areas of an image. It supports selection using specific points (landmarking) or draw rectangular areas (bounding boxes).
A **bounded box** is an infinitely customizable image annotation component that can be used to select and tag areas within an image. It supports selection using specific points (landmarking) or drawing rectangular areas (bounding boxes). It can be used to create datasets for machine learning models or to annotate images for other purposes.
<div style={{textAlign: 'center'}}>
@ -21,24 +21,29 @@ A bounded box is an infinitely customizable image annotation component that can
</div>
### Image URL
<br/>
The bounding box requires an image to be displayed. Enter the URL or image data to show it on the component.
| **Property** | **Description** | **Expected value** |
| :----------- | :----------- | :----------------- |
| **Image URL** | The URL or image data to show it on the component. | Get the image URL dynamically from database: **{{queries.queryname.data[0].url}}** or use [image's base64 data](/docs/how-to/loading-image-pdf-from-db/) |
| **Default value** | The data that will load the default bounded boxes over the image when the app is loaded. | Array of objects. Check the [Default value](#default-value) data properties |
| **Selector** | The bounded box support selection using rectangle or point. | Click **Fx** to set the value `RECTANGLE` or `POINT` |
| **List of labels** | The list of label that will be displayed in the dropdown while selection in the bounded-box. | Labels in array format: `{{['Tree', 'Car', 'Stree light']}}` |
### Default value
#### Default value
Provide the data that will load the default bounded boxes over the image when the app is loaded. The data is expected to be an array of objects format.
Provide the data that will load the default bounding boxes over the image when the app is loaded. The data is expected to be an array of objects format.
| Property | Values |
| -------- | ------ |
| type | Sets the type of the bounded box. The value can be `RECTANGLE` or `POINT`. |
| width | Sets the width of the bounded box in pixels. The value should be a number. If the `type` value is `POINT`, set it to `0`. |
| height | Sets the height of the bounded box in pixels. The value should be a number. If the `type` value is `POINT`, set it to `0`. |
| x | Sets the x-coordinate position of the bounded box in the image. It expects a numerical value representing the horizontal position. |
| y | Sets the y-coordinate position of the bounded box in the image. It expects a numerical value representing the vertical position. |
| text | Sets the text value of the bounded box. It should be one of the labels provided in the **[List of labels](#list-of-labels)** property. |
| **Property** | **Description** | **Expected value** |
| :-------- | :------ | :-------- |
| **type** | Sets the type of the bounded box. | `RECTANGLE` or `POINT` |
| **width** | Sets the width of the bounded box in pixels. | Numeric value. If the `type` value is `POINT`, set it to `0` |
| **height** | Sets the height of the bounded box in pixels. | Numeric value. If the `type` value is `POINT`, set it to `0` |
| **x** | Sets the x-coordinate(horizontal) position of the bounded box in the image. | Numerical value ex: `41` |
| **y** | Sets the y-coordinate(vertical) position of the bounded box in the image. | Numerical value ex: `22` |
| **text** | Sets the text value of the bounded box. | It should be one of the labels provided in the **[List of labels](#properties)** property |
Example of default values:
**Example of default values:**
```js
[
@ -61,31 +66,21 @@ Example of default values:
]
```
### Selector
The bounded box support selection using:
- **Rectangle**
- **Point**
You can also click on the **Fx** to set the value programmatically.
### List of labels
This property will include the list of label that will be displayed in the dropdown while selection in the bounded-box. This property requires the label in array format.
## Events
To add an event to a bounded-box, click on the component handle to open its properties on the right. Go to the **Events** accordion and click on **Add handler**.
Events are actions that can be triggered programmatically when the user interacts with the component. Click on the component handle to open its properties on the right. Go to the **Events** accordion and click on **+ Add handler**.
<div style={{textAlign: 'center'}}>
<div style={{textAlign: 'left'}}>
<img className="screenshot-full" src="/img/widgets/bounded-box/onchange.png" alt="Button group events" width="600"/>
<img className="screenshot-full" src="/img/widgets/bounded-box/event1.png" alt="Bounded box events" width="600"/>
</div>
### On change
<br/>
On change event is triggered when the label from the dropdown in the selector is changed in the bounded box. Just like any other event on ToolJet, you can set multiple handlers for on-change event.
| **Event** | **Description** |
| :----------- | :----------- |
| **On change** | Triggered when the label from the dropdown in the selector is changed in the bounded box. |
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
@ -93,60 +88,44 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
## General
### Tooltip
#### Tooltip
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
A Tooltip is often used to specify the extra information when the user hovers the mouse pointer over the component. Once a value is set for Tooltip, hovering over the element will display the specified string as the tooltip text.
Under the <b>General</b> accordion, you can set the value in the string format. Hovering over the component will display the string as the tooltip.
<div style={{textAlign: 'left'}}>
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/bounded-box/tooltip.png" alt="Button group Tooltip" width="300"/>
<img className="screenshot-full" src="/img/widgets/bounded-box/tooltip1.png" alt="Bounded box Tooltip"/>
</div>
## Layout
<div style={{textAlign: 'center'}}>
#### Show on desktop
Use this toggle to show or hide the component in the desktop view. You can dynamically configure the value by clicking on **`Fx`** and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to **`{{true}}`** or **`{{false}}`**.
<img className="screenshot-full" src="/img/widgets/button-group/layout.png" alt="Button group layout" width="300"/>
</div>
| Layout | description | Expected value |
| ----------- | ----------- | ------------ |
| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
#### Show on mobile
Use this toggle to show or hide the component in the mobile view. You can dynamically configure the value by clicking on **`Fx`** and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to **`{{true}}`** or **`{{false}}`**.
## Styles
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/bounded-box/styles.png" alt="Bounded box properties" width="300"/>
</div>
| Style | Description |
| ----------- | ----------- |
| Visibility | Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the component will not be visible when the app is loaded. By default, it's set to `{{true}}`. |
| Disable | Toggle on to disable the widget. You can programmatically change its value by clicking on the `Fx` button next to it, if set to `{{true}}`, the component will be disabled and becomes non-functional. By default, its value is set to `{{false}}`. |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
| Style | Description | Expected value |
| :----------- | :----------- | :----------- |
| **Visibility** | Toggle on or off to control the visibility of the component when the app is loaded | **`{{true}}`** or **`{{false}}`**, By default, it's set to `{{true}}` |
| **Disable** | Toggle on to disable the component. | **`{{true}}`** or **`{{false}}`**, By default, it's set to `{{false}}` |
| **Box shadow** | Sets the add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow. | Values that represent x,y, blur, spread and color. Ex: `9px 11px 5px 5px #00000040` |
## Exposed variables
| variable | Description |
| ----------- | ----------- |
| annotations | This variable is an array of objects, where each object represents an annotation added to an image. The object contains the following keys: type, x, y, width, height, text, and id |
| annotations.`type` | There are two types of annotations: Rectangle and Point |
| annotations.`x` | coordinates on x axis |
| annotations.`y` | coordinates on y axis |
| annotations.`width` | width of annotation |
| annotations.`height` | height of annotation |
| annotations.`text` | label selected for the annotation |
| annotations.`id` | unique id of the annotation (system generated) |
| :----------- | :----------- |
| **annotations** | This variable is an array of objects, where each object represents an annotation added to an image. The object contains the following keys: type, x, y, width, height, text, and id |
| **annotations.`type`** | There are two types of annotations: `RECTANGLE` and `POINT` |
| **annotations.`x`** | coordinates on the x axis |
| **annotations.`y`** | coordinates on the y axis |
| **annotations.`width`** | width of the annotation |
| **annotations.`height`** | height of the annotation |
| **annotations.`text`** | label selected for the annotation |
| **annotations.`id`** | unique ID of the annotation (system generated) |
The values can be accessed dynamically using `{{components.boundedbox1.annotations[0].text}}` or `{{components.boundedbox1.annotations[1].width}}`

101
docs/docs/widgets/button-group.md
View file

@ -4,102 +4,75 @@ title: Button Group
---
# Button group
Button group widget can be used to take actions.
The Button group component is used to group a series of buttons together in a single line. It is used to group related buttons.
<div style={{textAlign: 'center'}}>
<div style={{textAlign: 'left'}}>
<img className="screenshot-full" src="/img/widgets/button-group/button-group.png" alt="Button group" />
<img className="screenshot-full" src="/img/widgets/button-group/buttongroup1.png" alt="Button group" />
</div>
## Properties
### Events
To add an event to a button group, click on the widget handle to open the widget properties on the right sidebar. Go to the **Events** section and click on **Add handler**.
| Properties | Description | Expected Value |
|:----------- |:----------- |:-------------- |
| **label** | Used to set the title of the button-group. | Any **String** value: `Select the options` or `{{queries.queryname.data.text}}` |
| **values** | It can be used to set the values of the button group items. | **Array** of strings and numbers: `{{[1,2,3]}}` |
| **labels** | It can be used to set the labels of the button group items. | **Array** of strings and numbers: `{{['A','B','C']}}` |
| **Default selected** | Initial selected values can be set using this. | **Array** of strings and numbers: `{{[1]}}` will select the first button by default. |
| **Enable multiple selection** | Toggle on or off to enable multiple selection. | **Boolean** value: `{{true}}` or `{{false}}` |
<div style={{textAlign: 'center'}}>
## Events
<img className="screenshot-full" src="/img/widgets/button-group/events.png" alt="Button group events" />
Events are actions that can be triggered programmatically when the user interacts with the component. Click on the component handle to open its properties on the right. Go to the **Events** accordion and click on **+ Add handler**.
</div>
#### On click
On click event is triggered when the button group is clicked. Just like any other event on ToolJet, you can set multiple handlers for on click event.
| Events | Description |
|:----------- |:----------- |
| **On click** | This event is triggered when the user clicks on the button in the button group. |
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
:::
### Properties
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/button-group/properties.png" alt="Button group properties" />
</div>
| Properties | description | Expected value |
| ----------- | ----------- | -------------- |
| label | label is used to set the heading of the button group. | Any **String** value |
| values |Values for button group items. | **Array** of strings and numbers |
| labels | It can be used to set the labels of the button group items. | **Array** of strings and numbers |
| Default selected | Initial selected values can be set using this. | **Array** of strings and numbers |
| Enable multiple selection | Toggle this to allow multiple button selection. | Toggle to true/false |
### General
## General
#### Tooltip
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
A Tooltip is often used to display additional information when the user hovers the mouse pointer over the component. Once a value is set for Tooltip, hovering over the element will display the specified string as the tooltip text.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/tooltip.png" alt="Button group Tooltip" />
<img className="screenshot-full" src="/img/widgets/button-group/grouptooltip.png" alt="Button group layout" />
</div>
### Layout
## Layout
<div style={{textAlign: 'center'}}>
#### Show on desktop
<img className="screenshot-full" src="/img/widgets/button-group/layout.png" alt="Button group layout" />
Use this toggle to show or hide the component in the desktop view. You can dynamically configure the value by clicking on **Fx** and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to **`{{true}}`** or **`{{false}}`**.
</div>
#### Show on mobile
| Layout | description | Expected value |
| ----------- | ----------- | ------------ |
| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
Use this toggle to show or hide the component in the mobile view. You can dynamically configure the value by clicking on **Fx** and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to **`{{true}}`** or **`{{false}}`**.
### Styles
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/button-group/styles.png" alt="Button group properties" />
</div>
| Style | Description |
| ----------- | ----------- |
| Background color | You can change the background color of the widget by entering the Hex color code or choosing a color of your choice from the color picker. |
| Text color | You can change the color of the Text in button by entering the Hex color code or choosing a color of your choice from the color picker. |
| Visibility | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not visible after the app is deployed. By default, it's set to `{{true}}`. |
| Disable | Toggle on to lock the widget. You can programmatically change its value by clicking on the `Fx` button next to it, if set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
| Border radius | Use this property to modify the border radius of the button. |
| Selected text color | Use this property to modify the background colour of text in selected button |
| Selected background color | Use this property to modify the background colour of selected button |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
## Styles
| Style | Description | Expected value |
| :---------- | :---------- | :-------------- |
| **Background color** | Set a background color for the buttons in buttons group. | Choose a color from the picker or enter the Hex color code. ex: `#000000` |
| **Text color** | Set a text color for the buttons in buttons group. | Choose a color from the picker or enter the Hex color code. ex: `#000000` |
| **Visibility** | Make the component visible or hidden. | **`{{true}}`** or **`{{false}}`**, By default, its value is set to `{{true}}` |
| **Disable** | Disable the component. | **`{{true}}`** or **`{{false}}`**, By default, its value is set to `{{false}}` |
| **Border radius** | Add a border radius to the buttons in the component using this property. | Any numerical value from `0` to `100` |
| **Selected text color** | Use this property to modify the text color of selected button | Choose a color from the picker or enter the Hex color code. ex: `#000000` |
| **Selected background color** | Use this property to modify the background color of selected button | Choose a color from the picker or enter the Hex color code. ex: `#000000` |
| **Box Shadow** | Sets the add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow. | Values that represent X, Y, blur, spread, and color. Example: `9px 11px 5px 5px #00000040`` |
## Exposed Variables
| Variables | Description |
| ----------- | ----------- |
| selected | If the "enable multiple selection" option is turned off, then the variable is an array of objects, and the first object holds the value of the selected button. However, if the "enable multiple selection" option is turned on, the variable type changes from an array to an object, and the selected button values are stored as a string within that object. The value can be accessed using `{{components.buttongroup1.selected[0]}}` or `{{components.buttongroup1.selected}}` |
| Variable | Description |
| :---------- | :---------- |
| **selected** | If the **enable multiple selection** option is turned off, then the variable is an array of objects, and the first object holds the value of the selected button. However, if the **enable multiple selection** option is turned on, the variable type changes from an array to an object, and the selected button values are stored as a string within that object. The value can be accessed using `{{components.buttongroup1.selected[0]}}` or `{{components.buttongroup1.selected}}` |
## Component specific actions (CSA)

113
docs/docs/widgets/button.md
View file

@ -4,111 +4,78 @@ title: Button
---
# Button
Button widget can be used to take actions.
Button component can be used to trigger an action. It can be used to submit a form, navigate to another page, or trigger a query.
<iframe height="500"src="https://www.youtube.com/embed/zw3yxC7WUOg" title="Tooljet Button Widget" frameborder="0" allowfullscreen width="100%"></iframe>
<iframe height="500" src="https://www.youtube.com/embed/zw3yxC7WUOg" title="Tooljet Button Widget" frameborder="0" allowfullscreen width="100%"></iframe>
## Properties
To add an event to a button, click on the widget handle to open the widget properties on the right sidebar. Go to the **Events** section and click on **Add handler**.
| Property | Description | Expected value |
| :----------- | :----------- | :----------- |
| **Button Text** | It can be used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}` |
| **Loading state** | The loading state can be used to show a spinner as the button content. Loading state is commonly used with isLoading property of the queries to show a loading status while a query is being run. | Toggle the switch **On** or click on **fx** to programmatically set the value to `{{true}}`` or `{{false}}`` |
### Events
## Events
<div style={{textAlign: 'center'}}>
Events are actions that can be triggered programmatically when the user interacts with the component. Click on the component handle to open its properties on the right. Go to the **Events** accordion and click on **+ Add handler**.
<img className="screenshot-full" src="/img/widgets/button/button-actions.png" alt="ToolJet - Widget Reference - Button Events List" />
</div>
#### On click
**On Click** event is triggered when the button is clicked.
#### On hover
**On hover** event is triggered when the mouse cursor is moved over the button. Just like any other event on ToolJet, you can set multiple handlers for on click event.
| Event | Description |
| :----------- | :----------- |
| **On click** | The On click event is triggered when the button is clicked. |
| **On hover** | The On hover event is triggered when the mouse cursor is moved over the button. Just like any other event on ToolJet, you can set multiple handlers for on click event. |
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
:::
### Properties
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/button/properties.png" alt="ToolJet - Widget Reference - Button Properties" />
</div>
| Properties | description | Expected value |
| ----------- | ----------- | -------------- |
| Button Text | It can be used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}` |
| Loading state | Loading state can be used to show a spinner as the button content. Loading state is commonly used with isLoading property of the queries to show a loading status while a query is being run. | Switch the toggle **On** or click on `fx` to programmatically set the value `{{true}}` or `{{false}}` |
### General
## General
#### Tooltip
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
A Tooltip is often used to display additional information when the user hovers the mouse pointer over the component. Once a value is set for Tooltip, hovering over the element will display the specified string as the tooltip text.
Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
<div style={{textAlign: 'left'}}>
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/tooltip.png" alt="ToolJet - Widget Reference - Tooltip" />
<img className="screenshot-full" src="/img/widgets/button/buttontooltip.png" alt="ToolJet - Widget Reference - Tooltip" />
</div>
### Layout
## Layout
<div style={{textAlign: 'center'}}>
#### Show on desktop
<img className="screenshot-full" src="/img/widgets/list-view/listlayout.png" alt="ToolJet - Widget Reference - Layout" />
Use this toggle to show or hide the component in the desktop view. You can dynamically configure the value by clicking on **Fx** and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to **`{{true}}`** or **`{{false}}`**.
</div>
#### Show on mobile
| Layout | description | Expected value |
| ----------- | ----------- | ------------ |
| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
Use this toggle to show or hide the component in the mobile view. You can dynamically configure the value by clicking on **Fx** and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to **`{{true}}`** or **`{{false}}`**.
### Styles
## Styles
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/button/styles.png" alt="ToolJet - Widget Reference - Button Styles" />
</div>
| Style | Description |
| ----------- | ----------- |
| Background color | You can change the background color of the widget by entering the Hex color code or choosing a color of your choice from the color picker. |
| Text color | You can change the color of the Text in button by entering the Hex color code or choosing a color of your choice from the color picker. |
| Loader color | You can change the color of the loader in button by entering the Hex color code or choosing a color of your choice from the color picker. This will only be affective if the [loading state](#properties-1) property of the button is enabled. |
| Visibility | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not visible after the app is deployed. By default, it's set to `{{true}}`. |
| Disable | Toggle on to lock the widget. You can programmatically change its value by clicking on the `Fx` button next to it, if set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
| Border radius | Use this property to modify the border radius of the button. |
| Border color | Add a color to the border of the button using this property. |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
| Style | Description | Expected value |
| :----------- | :----------- | :----------- |
| **Background color** | Change the background color. | Choose color from the colorpicker or enter the Hex color code. ex: `#000000` |
| **Text color** | Change the text color. | Choose color from the colorpicker or enter the Hex color code. ex: `#000000` |
| **Loader color** | Change the color of the loader (if loading state is enabled) | Choose color from the colorpicker or enter the Hex color code. ex: `#000000` |
| **Visibility** | Make the component visible or hidden. | **`{{true}}`** or **`{{false}}`**, By default, its value is set to `{{true}}` |
| **Disable** | Disable the button. | **`{{true}}`** or **`{{false}}`**, By default, its value is set to `{{false}}` |
| **Border radius** | Add a border radius to the button using this property. | Any numerical value from `0` to `100` |
| **Border color** | Change the border color of the button. | Choose color from the colorpicker or enter the Hex color code. ex: `#000000` |
| **Box Shadow** | Sets the add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow. | Values that represent X, Y, blur, spread, and color. Example: `9px 11px 5px 5px #00000040`` |
## Exposed variables
| Variable | Description |
| ----------- | ----------- |
| buttonText | This variable stores the text displayed on the button. Its value can be accessed dynamically through JavaScript using the following syntax: `{{components.button1.buttonText}}` |
| :----------- | :----------- |
| **buttonText** | This variable stores the text displayed on the button. Its value can be dynamically accessed through JavaScript using the following syntax: `{{components.button1.buttonText}}` |
## Component specific actions (CSA)
Following actions of button component can be controlled using the component specific actions(CSA):
| Actions | Description |
| ----------- | ----------- |
| click | You can regulate the click of a button via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.button1.click()` |
| setText | button's text can be controlled using component specific action from any of the event handler. You can also use RunJS query to execute component specific actions: `await components.button1.setText('New Button Text')` |
| disable | button can be disabled using the component specific action from any of the event handler. You can also use RunJS query to execute this action: `await components.button1.disable(true)` or `await components.button1.disable(false)` |
| visibility | button's visibility can be switched using the component specific action from any of the event handler. You can also use RunJS query to execute this action: `await components.button1.disable(true)` or `await components.button1.disable(false)` |
| loading | The loading state of the button can be set dynamically using the component specific actions from any of the event handler. You can also use this action from RunJS: `await components.button1.loading(true)` or `await components.button1.loading(false)` |
| :----------- | :----------- |
| **click** | You can regulate the click of a button via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.button1.click()` |
| **setText** | button's text can be controlled using component specific action from any of the event handler. You can also use RunJS query to execute component specific actions: `await components.button1.setText('New Button Text')` |
| **disable** | button can be disabled using the component specific action from any of the event handler. You can also use RunJS query to execute this action: `await components.button1.disable(true)` or `await components.button1.disable(false)` |
| **visibility** | button can be hidden using the component specific action from any of the event handler. You can also use RunJS query to execute this action: `await components.button1.visibility(true)` or `await components.button1.visibility(false)` |
| **loading** | The loading state of the button can be set dynamically using the component specific actions from any of the event handler. You can also use this action from RunJS: `await components.button1.loading(true)` or `await components.button1.loading(false)` |

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

File diff suppressed because it is too large Load diff

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

@ -174,7 +174,7 @@ Use `{{listItem.key}}` to display data on the nested widgets. Example: For displ
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/list-view/exposedvars.png" alt="ToolJet - List view widget" />
<img className="screenshot-full" src="/img/widgets/list-view/exposed2.png" alt="ToolJet - List view widget" />
</div>
@ -184,8 +184,33 @@ Use `{{listItem.key}}` to display data on the nested widgets. Example: For displ
| **selectedRowId** (deprecated) | This variable holds the ID of the clicked row in the list view. The row ID starts from `0`. You can access the selectedRowId using `{{components.listview1.selectedRowId}}` |
| **selectedRow** (deprecated) | This variable contains the data of the components within the selected row. You can access the data using `{{components.listview1.selectedRow.text1}}` |
| **selectedRecordId** | This variable holds the ID of the clicked record in the list view. The record ID starts from `0`. You can access the selectedRecordId using `{{components.listview1.selectedRecordId}}` |
| **selectedRow** | This variable stores the data of the components within the selected record. You can access the data using `{{components.listview1.selectedRecord.text1}}` |
| **selectedRecord** | This variable stores the data of the components within the selected record. You can access the data using `{{components.listview1.selectedRecord.text1}}` |
| **children** | This variable stores the data of the components within all the records in listview component. The purpose of exposing children is to enable the child components to be [controlled using component specific actions](#controlling-child-components). |
## Component specific actions (CSA)
There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
## Controlling child components
All the child components of the list view component are exposed through the `children` variable. This variable is an array of objects, where each object represents a record in the listview and contains the data of the child components.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/list-view/children.png" alt="ToolJet - List view widget" />
</div>
<br/>
The components inside the list view can be controlled using the javascipt queries. For example, if you want to disable the `button1` component in the first record, you can use the following expression:
```js
components.listview1.children[0].button1.disable(true) // disables the button1 component in the first record
```
<br/>
:::caution
Currently, only those child components can be controlled using the javascript queries that have component specific actions implemented. To check if a component has component specific actions implemented, refer to the document of that **[specific component](/docs/widgets/overview)**.
:::

98
docs/docs/widgets/map.md
View file

@ -3,7 +3,7 @@ id: map
title: Map
---
The map component enables users to choose or select locations by their coordinates on Google Map. It allows users to interact with the map interface and pick specific points of interest.
The map component enables users to display a map on the app. It can be used to display or choose a single location or multiple locations on the map. The map component can be used to display the location of a business, a store, or a restaurant. It can also be used to display the location of a user on the map. It allows users to interact with the map interface and pick specific points of interest.
:::tip Using Self-hosted
If you are utilizing the self-hosted version of ToolJet, it is necessary to configure the Google Maps API key as an environment variable. Please refer to the [environment variable setup documentation](/docs/setup/env-vars/#google-maps-configuration--optional-).
@ -11,85 +11,79 @@ If you are utilizing the self-hosted version of ToolJet, it is necessary to conf
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/map/mapv2.png" alt="ToolJet - Widget Reference - Map" />
<img className="screenshot-full" src="/img/widgets/map/map2.png" alt="ToolJet - Component Reference - Map" />
</div>
## Properties
| Properties | Description | Expected value |
|:----------- |:----------- |:------------------ |
| **Initial location** | default location when the app is loaded initially. | An object containing the **latitude** and **langitude** as key value pairs. ex: `{{ {"lat": 40.7128, "lng": -73.935242} }}` |
| **Default Markers** | Number of markers that should be shown on the map | An array of objects containing the coordinates. ex: `{{ [{"lat": 40.7128, "lng": -73.935242}, {"lat": 40.7128, "lng": -73.935242}] }}` |
| **Polygon points** | Create a polygon on the map using the given coordinates. | An array of objects containing the coordinates. ex: `{{ [{"lat": 40.7128, "lng": -73.935242}, {"lat": 40.7128, "lng": -73.935242}] }}` |
| **Add new markers** | On clicking the map, a new marker will be added to the map. | By default, it's set to `On`. Toggle `off` to disable adding new markers on the map. Click `Fx` to set `{{true}}` or `{{false}}` programmatically. |
| **Search for places** | Enable to show the search box on the map. | By default, it's set to `On`. Toggle `off` to disable the search box on the map. Click `Fx` to set `{{true}}` or `{{false}}` programmatically. |
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/map/propertiesmap.png" alt="ToolJet - Component Reference - Map" />
</div>
## Events
| Event Name | Description |
| ----------------- | --------------------------------------------- |
| On bounds change | Triggered when the bounding area is modified. This event occurs after the `bounds` variable has been updated. |
| On create marker | Triggered when a new marker is added to the map. |
| On marker click | Triggered when a user clicks on any of the markers displayed on the map. |
|:----------------- | :--------------------------------------------- |
| **On bounds change** | Triggers when the bounding area is modified. This event occurs after the `bounds` variable changes. |
| **On create marker** | Triggers when a new marker is added to the map. |
| **On marker click** | Triggers when the user clicks on any of the markers on the map. |
| **On polygon click** | Triggers when the user clicks on the polygon on the map. |
:::info
For detailed information about all the available **Actions**, please refer to the [Action Reference](/docs/category/actions-reference) documentation.
:::
## Properties
| properties | description | Expected value |
| ----------- | ----------- | ------------------ |
| Initial location | It is the default location's coordinates that the map should focus on. | An object containing the latitude and langitude as key value pairs. ex: `{{ {"lat": 40.7128, "lng": -73.935242} }}` |
| Default Markers | List of markers that should be shown on the map | An array of objects containing the coordinates. ex: `{{ [{"lat": 40.7128, "lng": -73.935242}] }}` |
| Add new markers | This property should be enabled to add new markers to the map on click. | `On` by default, toggle `off` to disable adding new markers on the map. Can be programmatically configured by clicking on `Fx`, accepts values `{{true}}` or `{{false}}` |
| Search for places | It can be used to show or hide auto-complete search box. | `On` by default, toggle `off` to disable search on the map. Can be programmatically configured by clicking on `Fx`, accepts values `{{true}}` or `{{false}}` |
## General
### Tooltip
#### Tooltip
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/tooltip.png" alt="ToolJet - Widget Reference - Map" />
</div>
A Tooltip is often used to specify the extra information when the user hovers the mouse pointer over the component. Once a value is set for Tooltip, hovering over the element will display the specified string as the tooltip text.
## Layout
### Show on desktop
Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
### Show on mobile
Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
| Properties | Description | Expected value |
|:----------- |:----------- |:------------------ |
| Show on desktop | Toggle on or off to display the component in desktop view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
| Show on mobile | Toggle on or off to display the component in mobile view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
## Styles
### Visibility
Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
### Disable
This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
| Properties | Description | Expected value |
|:----------- |:----------- |:------------------ |
| **Visibility** | Toggle on or off to control the visibility of the component. | You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the component will not be visible after the app is release. By default, it's set to `{{true}}`. |
| **Disable** | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. | You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
| **Box shadow** | Add a shadow effect to the component by providing values to X, Y, Blur, Spread and Color. | You can also programmatically set the value by clicking on the `Fx` button next to it. Ex: `{{"x": 0, "y": 0, "blur": 0, "spread": 0, "color": "#000000"}}` |
## Exposed Variables
Exposed variables can be used to get data from the widget.
Exposed variables can be used to get data from the component.
| Variables | Description |
| ----------- | ----------- |
| center | This variable will hold the latitude, longitude and the google map url value. |
| center.`lat` | This variable holds the latitude value of the marker on the map component. You can access the value dynamically using JS: `{{components.map1.center.lat}}`|
| centere.`lng` | This variable gets updated with RGB color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.map1.center.lng}}`|
| center.`googleMapUrl` | This variable holds the URL of the location where the center marker is placed on the map component. You can access the value dynamically using JS: `{{components.map1.center.googleMapUrl}}`|
| markers | The markers variable will hold the value only if `add new markers` is enabled from the map properties. Each marker is an object and will have `lat` and `lng` keys. Values can be accessed dynamically using `{{components.map1.markers[1].lat}}` |
| selectedMarker | Object with the marker selected by the user |
| **center** | This variable will hold the latitude, longitude and the google map url value. |
| **center.`lat`** | This variable holds the latitude value of the marker on the map component. You can access the value dynamically using JS: `{{components.map1.center.lat}}`|
| **center.`lng`** | This variable gets updated with RGB color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.map1.center.lng}}`|
| **center.`googleMapUrl`** | This variable holds the URL of the location where the center marker is placed on the map component. You can access the value dynamically using JS: `{{components.map1.center.googleMapUrl}}`|
| **markers** | The markers variable will hold the value only if `add new markers` is enabled from the map properties. Each marker is an object and will have `lat` and `lng` keys. Values can be accessed dynamically using `{{components.map1.markers[1].lat}}` |
| **selectedMarker** | Object with the marker selected by the user |
| **bounds** | It constructs a rectangle from the points at its south-west and north-east corners |
| **bounds.northEast** | It holds the latitude and longitude of the north-east corner of the rectangle. You can access the value dynamically using JS: `{{components.map1.bounds.northEast.lat}}` or `{{components.map1.bounds.northEast.lng}}` |
| **bounds.southWest** | It holds the latitude and longitude of the south-west corner of the rectangle. You can access the value dynamically using JS: `{{components.map1.bounds.southWest.lat}}` or `{{components.map1.bounds.southWest.lng}}` |
## Component specific actions (CSA)
Following actions of map component can be controlled using the component specific actions(CSA):
| Actions | Description |
| ----------- | ----------- |
| setLocation | Set the marker's location on map using latitude and longitude values as parameteres via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as: `component.map1.setLocation(40.7128, -73.935242)` |
|:---------- |:---------- |
| **setLocation** | Set the marker's location on map using latitude and longitude values as parameteres via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as: `component.map1.setLocation(40.7128, -73.935242)` |

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

@ -4,119 +4,73 @@ title: Number Input
---
# Number Input
The Number Input component allows users to input and modify numerical values.
The Number Input component allows users to enter numbers. It can be used as a standalone component or in form fields. In this document, we'll go through all the configuration options for the **Number Input** component.
:::info
Numbers can be adjusted using the arrow keys.
:::
## Properties
### Default Value
| Property | Description | Expected Value |
|:----------------|:-----------------------------------| :--------------|
| Default Value | Default Value is the initial value in the Number Input field when the application is loaded. It is a pre-established value that will be retrieved from the number input component if no modifications are made to it. | Any numeric value|
| Minimum value | Sets the minimum value that can be entered in the input field.| Any numerical value|
| Maximum value | Sets the maximum value that can be entered in the input field.| Any numerical value|
| Placeholder | The placeholder value is displayed when no user input has been made yet. It disappears once the user interacts with the control, such as typing a number or using the arrow keys on the right side of the component. |Enter some instructional text as the value (example: "Type number here")|
| Loading state | The loading state can be enabled to show a spinner as the content of the number input. This is commonly used with the `isLoading` property of queries to indicate a loading status while a query is being executed. | Use the toggle button or dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either `{{true}}` or `{{false}}`|
| Decimal places | This controls decimal places in the number input. You pick how many decimals you want. If you choose `{{2}}`, any decimals will be rounded to two places. Use `{{0}}` for whole numbers or increase for more precision.| Any numeric value|
Specify a default value for the number input component when the application is loaded. A default value is a pre-established value that can be retrieved from the number input widget if no modifications are made to it.
Example values:
```js
10 // integer type
3.54 // decimal type
10.00 // decimal type, but displayed as 10 on the number input component
```
### Minimum value
This field sets the minimum value that can be entered in the number input. Any numerical value is accepted.
### Maximum value
This field sets the maximum value that can be entered in the number input. Any numerical value is accepted.
### Placeholder
The placeholder value is displayed when no user input has been made yet. It disappears once the user interacts with the control, such as typing a number or using the arrow keys on the right side of the component. Any numerical value can be used as a placeholder.
### Loading state
The loading state can be enabled to show a spinner as the content of the number input. This is commonly used with the `isLoading` property of queries to indicate a loading status while a query is being executed. You can toggle the state to "On" or use the "fx" option to programmatically set the value to `{{true}}` or `{{false}}`.
### Decimal places
This property determines the number of decimal places displayed in the number input component. It allows you to specify the level of precision for decimal values.
For example, if you set the decimal places to **{{2}}**, any decimal value entered or displayed in the number input will be rounded to two decimal places. This ensures consistent formatting and helps users input and visualize decimal values accurately. It can be set to **{{0}}** for whole numbers or increased to display more precise decimal values.
## Events
To add an event to the Number Input component, go to the **Events** section and click on **Add handler**.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/number-input/event.png" alt="Events-Number Input" />
</div>
### On change
This event fires whenever the value of the number input widget is changed.
| Event | Description |
|-----------|-----------------------------------------------------------------------------|
| On change | This event fires whenever the value of the number input component is changed. |
:::info
Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
:::
## General
### Tooltip
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget. Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
<font size="4"><b>Tooltip</b></font>
A **Tooltip** is commonly used to provide additional information about an element. This information becomes visible when the user hovers the mouse pointer over the respective component.
In the input field under **Tooltip**, you can enter some text and the component will show the specified text as a tooltip when it is hovered over.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/tooltip.png" alt="Events-Number Input" />
<img className="screenshot-full" src="/img/widgets/number-input/tooltip.png" alt="Tooltip Example" />
</div>
## Layout
<font size="4"><b>Show on desktop</b></font>
### Show on desktop
Use this toggle to show or hide the component in the desktop view. You can dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to `{{true}}` or `{{false}}`.
Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
### Show on mobile
<font size="4"><b>Show on mobile</b></font>
Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
Use this toggle to show or hide the component in the mobile view. You can dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to `{{true}}` or `{{false}}`.
---
## Styles
### Visibility
| Style | Description | Expected Value|
|:-------------|:--------------------|:---------------------|
| Visibility | Controls the visibility of the component. If set to `{{false}}`, the component will not be visible after the app is deployed.| Use the toggle button or dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either `{{true}}` or `{{false}}`.|
| Disable | Makes the component non-functional when set to true. | Use the toggle button or dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either `{{true}}` or `{{false}}`.|
| Border radius | Adjusts the roundness of the component's corners. | Numeric value|
| Background color | Changes the background color of the number-input component. | Hex color code/choose a color using the color picker |
| Border color | Changes the border color of the component.| Hex color code/choose a color using the color picker|
| Text Color | Sets the color of the input value. |Hex color code/choose a color using the color picker |
Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
### Disable
This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
### Border radius
Add a border radius to the number input widget using this property. It accepts any numerical value from `0` to `100`.
### Border color
Change the border color number-input component by entering the Hex color code or choosing a color of your choice from the color picker.
### Background color
Change the background color of the number-input component by entering the Hex color code or choosing a color of your choice from the color picker.
### Text color
Change the color of the number in number-input component by entering the Hex color code or choosing a color of your choice from the color picker.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
## Exposed variables
## Exposed Variables
| Variables | Description |
| ----------- | ----------- |
| value | This variable updates whenever a user selects a number on the number input. You can access the value dynamically using JS: `{{components.numberinput1.value}}`|
## Component specific actions (CSA)
## Component Specific Actions (CSA)
There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
There are currently no Component-Specific Actions (CSA) implemented to regulate or control the component.

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

@ -4,89 +4,69 @@ title: Password Input
---
# Password Input
A Password Input widget provides a way for the users to securely enter a password. The Password Input is a one-line plain text editor in which the text is obscured so that it cannot be read, by replacing each character with an asterisk ("*") symbol.
The Password Input component allows users to enter passwords securely. In this component, passwords are concealed, displaying each character as an asterisk to ensure privacy. In this document, we'll go through all the configuration options for the **Password Input** component.
## How To Use Password Input Widget
<iframe height="500" src="https://www.youtube.com/embed/E9mfJ9cCJ0o" title="Password Input Widget" frameborder="0" allowfullscreen width="100%"></iframe>
## How To Use Password Input Component
<iframe height="500" src="https://www.youtube.com/embed/E9mfJ9cCJ0o" title="Password Input Component" frameborder="0" allowfullscreen width="100%"></iframe>
## Properties
### Placeholder
It specifies a hint that describes the expected value.
## Validation
### Regex
Use this field to enter a Regular Expression that will validate the password constraints.
### Min length
Enter the number for a minimum length of password allowed.
### Max length
Enter the number for the maximum length of password allowed.
### Custom validation
If the condition is true, the validation passes, otherwise return a string that should be displayed as the error message. For example: `{{components.passwordInput1.value === 'something' ? true: 'value should be something'}}`
| Property | Description | Expected Value |
|:------------------|:------------------|:----------------------------------------------------|
| Placeholder | Provides a hint for the expected value. It disappears once the user interacts with the component.| Enter some instructional text as the value (example: "Type name here") |
| Regex | Use this field to enter a Regular Expression that will validate the password constraints.| Regular Expression |
| Min length | Enter the number for a minimum length of password allowed.| Numeric value |
| Max length | Enter the number for the maximum length of password allowed.| Numeric value |
| Custom validation | If the condition is true, the validation passes, otherwise return a string that should be displayed as the error message. | A validation condition (example: `{{components.passwordInput1.value === 'something' ? true : 'value should be something'}}` )|
## General
### Tooltip
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
A **Tooltip** is commonly used to provide additional information about an element. This information becomes visible when the user hovers the mouse pointer over the respective component.
Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
In the input field under **Tooltip**, you can enter some text and the component will show the specified text as a tooltip when it is hovered over.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/tooltip.png" alt="ToolJet - Widget Reference - Password input" />
<img className="screenshot-full" src="/img/tooltip.png" alt="ToolJet - Component Reference - Password input" />
</div>
## Layout
### Show on desktop
<font size="4"><b>Show on desktop</b></font>
Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
### Show on mobile
Use this toggle to show or hide the component in the desktop view. You can dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to `{{true}}` or `{{false}}`.
Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
<font size="4"><b>Show on mobile</b></font>
Use this toggle to show or hide the component in the mobile view. You can dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to `{{true}}` or `{{false}}`.
---
## Styles
### Border radius
| Style| Description | Expected Value |
|:-------------------|:-------------------------------|:-------------------------------|
| Visibility | Controls the visibility of the component. If set to `{{false}}`, the component will not be visible after the app is deployed.| Use the toggle button or dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either `{{true}}` or `{{false}}`.|
| Disable | Makes the component non-functional when set to true. | Use the toggle button or dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either `{{true}}` or `{{false}}`.|
| Border radius | Adjusts the roundness of the component's corners. | Numeric value|
| Background color | Changes the background color of the component. | Hex color code/choose a color using the color picker |
Add a border radius to the number input widget using this property. It accepts any numerical value from `0` to `100`.
## General
### Border color
<font size="4"><b>Box Shadow</b></font>
Add color to the border of the number input component using this property. Enter the hex color code or choose a color from the color picker.
The **Box Shadow** property is used to add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow.
### Background color
You can change the background color of the widget by entering the Hex color code or choosing a color of your choice from the color picker.
### Visibility
Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
### Disable
This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
## Exposed variables
## Exposed Variables
| Variables | Description |
| ----------- | ----------- |
| :----------- |:----------- |
| value | This variable holds the value entered by the user onto the password input component. You can access the value dynamically using JS: `{{components.passwordinput1.value}}`|
## Component specific actions (CSA)
## Component Specific Actions (CSA)
There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
There are currently no Component-Specific Actions (CSA) implemented to regulate or control the component.

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

@ -4,37 +4,19 @@ title: Table
---
# Table
Tables can be used for both displaying and editing data.
<iframe height="500" src="https://www.youtube.com/embed/hTrdkUtz3aA" title="ToolJet Table Widget" frameborder="0" allowfullscreen width="100%"></iframe>
Tables can be used for both displaying and editing data. You can use the table widget to display data from a database or API. You can also use the table widget to edit data and save it back to the database or API.
## Table UI
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/table/UI.png" alt="ToolJet - Widget Reference - Table" width="900" />
<img className="screenshot-full" src="/img/widgets/table/newuitable1.png" alt="ToolJet - Widget Reference - Table" />
</div>
### Search
### Filter data
At the top-left corner of the table component, there is a search box that allows users to input keywords and search for rows within the table data. You can also **[show/hide the search box](/docs/widgets/table#show-search-box)** from the table from the table properties.
:::tip
You can use the `Tab` key to navigate through cells on the table.
:::
### Add new row
When users click on this button, a popup modal appears which enables them to insert new rows. The modal will have a single row initially, and the columns will have the same column type as those on the table. If the user inputs data into the row, it will be stored on the **[`newRows` variable](/docs/widgets/table#exposed-variables)** of the table. If the user selects the **Discard** button, the data in the variable will be cleared. However, if the user closes the popup without taking any action (neither Save nor Discard), the data will still be retained, and a green indicator will appear on the **Add new row** button. The table has an **[Add new rows event handler](/docs//widgets/table#add-new-rows)** that can be utilized to execute queries that store the data into the datasource whenever the **Save** button is clicked.
:::info
At present, it is not possible to include columns of type Image when adding a new row to the table.
:::
### Filters
The table data can be filtered by clicking on this button. You have the option to choose from various filters, such as:
The table data can be filtered using this option. You have the option to choose from various filters, such as:
- **contains**
- **does not contain**
@ -51,6 +33,27 @@ The table data can be filtered by clicking on this button. You have the option t
You have the option to **[hide the filter button](/docs/widgets/table#show-filter-button)** in the table properties.
### Search
At the top-right corner of the table component, there is a search box that allows users to input keywords and search for rows within the table data. You can also **[show/hide the search box](/docs/widgets/table#show-search-box)** from the table from the table properties.
:::tip
You can use the `Tab` key to navigate through cells on the table.
:::
### Pagination
The table component supports both **[client-side pagination](/docs/widgets/table#client-side-pagination)** and **[server-side pagination](/docs/widgets/table#server-side-pagination)**. The `<<` and `>>` button skips to the first and last page respectively. The `<` and `>` button skips to the previous and next page respectively. You can also **[hide the pagination buttons](/docs/widgets/table#show-pagination-buttons)** in the table properties.
### Add new rows
Upon clicking this button, a popup modal will show, providing users with the ability to insert new rows. Initially, the modal will contain a single row, with columns mirroring those found in the table. If users input data into this row, it will be stored within the **[`newRows` variable](/docs/widgets/table#exposed-variables)** associated with the table. Clicking on the **Discard** button will clear the data within this variable. However, if the users close the popup without any action (neither saving nor discarding), the data will persist, accompanied by a green indicator on the **Add new row** button. The table incorporates an **[Add new rows event handler](/docs//widgets/table#add-new-rows)**, which can be employed to execute queries that store the data into the datasource upon clicking the **Save** button.
:::info
At present, it is not possible to include columns of type Image when adding a new row to the table.
:::
### Download
The table data can be downloaded in various file formats, including:
@ -65,19 +68,24 @@ You have the option to **[hide the download button](/docs/widgets/table#show-dow
You can utilize **[Component Specific Actions](#component-specific-actions-csa)** to retrieve the table data in the mentioned formats from the event handlers across the application.
:::
### Column selector button
### Hide columns
You can choose which columns to display or hide in the table by clicking on this button. You also have the option to **[hide the column selector button](/docs/widgets/table#show-column-selector-button)** in the table properties.
You can choose which columns to show or hide in the table using this option. You also have the option to **[hide the column selector button](/docs/widgets/table#show-column-selector-button)** in the table properties.
### Sorting
You can sort the table data in ascending or descending order by clicking on the column header. You can also **[disable the sorting](/docs/widgets/table#disable-sorting)** from the table properties.
## Table data
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/table/nesteddata.png" alt="ToolJet - Widget Reference - Table" />
<img className="screenshot-full" src="/img/widgets/table/tabledata1.png" alt="ToolJet - Widget Reference - Table" />
</div>
<br/>
The table requires an array of objects to display its data. You can use the data returned by queries, such as `{{queries.restapi1.data}}`, to populate the table. Please note that the table will only populate if the provided data is in the form of an array of objects.
To populate the table with the data, it is required to provide the data in the form of an array of objects. You can utilize data from queries, using `{{queries.restapi1.data}}`, to populate table.
Example:
```js
@ -123,22 +131,49 @@ The table also supports the loading of one level of **nested data**. Here is an
}
]
```
<br/>
When you provide the expected table data as an array of objects, the table component will **automatically generate all the required columns**.
The table component will **automatically generate all the required columns** when the data is provided in the form of an array of objects.
## Columns
Whenever data is loaded into a table, the columns are automatically generated. You can add, remove, or modify columns by accessing the table properties under the column section.
Whenever data is loaded into a table, the columns are automatically generated. You can add, remove, or modify columns by accessing the table properties under the column section. You can also rearrange the columns by dragging and dropping them.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/table/columntypes.png" alt="ToolJet - Widget Reference - Table" />
<img className="screenshot-full" src="/img/widgets/table/columnsnew.png" alt="ToolJet - Widget Reference - Table" />
</div>
### Use dynamic column
Enabling the **Use dynamic column** toggle will allow users to set the **Column data** using which the user can link the column data dynamically from a query.
The **column data** field expects a JSON value:
```json
{
"name":"Name",
"columnType":"string",
"key":"first_name",
"cellBackgroundColor":"#000",
"textColor":"#fff",
"isEditable":true,
"regex":"",
"maxLength":10,
"minLength":5,
"customRule":""
}
```
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/table/dynamicnew.png" alt="ToolJet - Widget Reference - Table" />
</div>
### Types of Columns
The table provides different column types based on the data being displayed:
The table component supports the following column types:
- [String | Default](#string--default)
- [Number](#number)
@ -162,6 +197,7 @@ This column type is automatically selected by default when a column is added or
| Column name | Specify the name to be displayed on the table column header |
| Overflow | Manage the handling of content that exceeds the cell dimensions. `Wrap` wraps the content onto the next line within the cell, `Scroll` enables scrolling for content that exceeds the cell, and `Hide` conceals content that goes beyond the cell boundary. |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
| Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
| Text color | Modify the color of the text in the column. You can use a hex color code or color name. The value can be dynamically assigned using JS. Refer to the [how-to guide](/docs/how-to/access-cellvalue-rowdata). |
| Cell background color | Adjust the background color of the cell in the column. You can utilize a hex color code or color name. The value can be dynamically assigned using JS. |
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
@ -175,12 +211,13 @@ Selecting the column type as **Number** will only load numerical data in the col
| ----------- | ----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
| Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
| Column Visibility | This option is enabled by default. Disabling it hides the column from the table. Its value can also be dynamically set to `{{true}}` or `{{false}}` to show or hide the column. |
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/table/numbertype.png" alt="ToolJet - Widget Reference - Table" />
<img className="screenshot-full" src="/img/widgets/table/numbernew.png" alt="ToolJet - Widget Reference - Table" />
</div>
@ -192,6 +229,7 @@ The **Badge** column type is utilized to exhibit labels on the columns using the
| ----------- | ----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
| Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
| Values | Provide the values for the badge as an array |
| Labels | Provide the labels for the values in the badge as an array |
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
@ -199,7 +237,7 @@ The **Badge** column type is utilized to exhibit labels on the columns using the
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/table/badgetype.png" alt="ToolJet - Widget Reference - Table" />
<img className="screenshot-full" src="/img/widgets/table/badgenew.png" alt="ToolJet - Widget Reference - Table" />
</div>
@ -211,6 +249,7 @@ Similar to the **Badge** column type, the **Multiple Badges** type is used to di
| ----------- | ----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
| Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
| Values | Provide the values for the multiple badges as an array |
| Labels | Provide the labels for the values in the multiple badges as an array |
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
@ -230,6 +269,7 @@ The **Tags** column type is utilized to display tags within the column cells usi
| ----------- | ----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
| Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
| Column Visibility | This option is enabled by default. Disabling it hides the column from the table. Its value can also be dynamically set to `{{true}}` or `{{false}}` to show or hide the column. |
@ -247,6 +287,7 @@ The **Dropdown** column type is used to display a dropdown in the column cells u
| ----------- | ----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
| Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
| Values | Provide the values for the dropdown as an array |
| Labels | Provide the labels for the values in the dropdown as an array |
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
@ -266,6 +307,7 @@ The **Radio** column type is used to show radio buttons in the column cells usin
| ----------- | ----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
| Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
| Values | Provide the values for the radio as an array |
| Labels | Provide the labels for the values in the radio as an array |
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
@ -285,6 +327,7 @@ The **Multiselect** column type is used to show a multiselect dropdown in the co
| ----------- | ----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
| Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
| Values | Provide the values for the multiselect as an array |
| Labels | Provide the labels for the values in the multiselect as an array |
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
@ -304,6 +347,7 @@ The **Toggle Switch** column type is used to display a toggle switch in the colu
| ----------- | ----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. If no key is provided, the `Column name` is used as the key for that column. |
| Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
| Active color | Set the color of the toggle switch when it is active using this property. |
| + Add Event Handler | Add an event handler to perform actions whenever the toggle switch is turned on or off. |
| Make editable | This option is disabled by default. Enabling it allows the column to be edited by app users. Its value can also be dynamically set to `{{true}}` or `{{false}}` to toggle it on or off. |
@ -323,6 +367,7 @@ The **Date Picker** column type is used to display a date picker in the column c
| ----------- | ----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. The provided **key** should hold a date value. |
| Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
| Date Display Format | Determines how the date should be displayed in the table |
| Date Parse Format | Specifies the format in which the date is stored in the database. |
| Parse in timezone | The timezone of the time stored in the database. Only required if the **Show time** option is enabled. |
@ -345,6 +390,7 @@ The **Image** column type is used to display images in the column cells using th
| ----------- | ----------- |
| Column name | Specify the name to be displayed on the table column header |
| Key | Specify the key name associated with the loaded data in the table. The provided **key** should hold a URL for the image to be loaded in the column cells. |
| Horizontal alignment | Positions content left, center, or right within table column cells for improved readability and visual presentation. |
| Border radius | Set a border radius for the image loaded in the column cell. The field accepts a numerical value from `0` to `100`. |
| Width | Set a width for the image loaded in the column cell. The field accepts a numerical value from `0` to `100`. |
| Height | Set a height for the image loaded in the column cell. The field accepts a numerical value from `0` to `100`. |
@ -364,23 +410,39 @@ The **Link** column type enables cells to become clickable links that can be loa
| Column property | Description |
| ----------- | ----------- |
| Column name | Specifies the name displayed on the table column header. |
| Key | Specifies the key name associated with the loaded data in the table. The provided **key** can hold either a `string` or a `URL`. |
| Href | Specifies the key that holds the URL. By default, it is set to `{{cellValue}}`, which sets the href to the data loaded from the specified key. |
| Key | Specify the key that holds the URL. By default. The provided key should hold either a `string` or a `URL`. |
| Link Target | Specifies whether the link should be loaded on the same window or a new window. The values can also be set dynamically to `_set` for same window and `_blank` for new window. |
| Column Visibility | This option is enabled by default. Disabling it hides the column from the table. Its value can also be dynamically set to `{{true}}` or `{{false}}` to show or hide the column. |
In the screenshot below, the **key** is set to `Title`, this key holds the string values. In the **Href** field, we are using `{{rowData.image}}`, which retrieves the URLs from the image key for their respective row.
:::info
For more information on using cellValue and rowData, refer to the **[how-to guide](/docs/how-to/access-cellvalue-rowdata)**.
:::
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/table/linktype.png" alt="ToolJet - Widget Reference - Table" />
<img className="screenshot-full" src="/img/widgets/table/linkupd.png" alt="ToolJet - Widget Reference - Table" />
</div>
### Add Column
You can add a new column to the table by clicking on the **+ Add Column** button. On clicking this button a new column will be added to the table and you can edit it's properties from the column section. Check [Displaying Data](#displaying-data) section to learn more.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/table/addcolumn.png" alt="ToolJet - Widget Reference - Table" />
</div>
### Delete Column
Hover on the column under the columns section and click on the three dots icon, a dropdown will appear with the option to delete the column. Click on the **delete** option to remove the column from the table.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/table/deletecolumn.png" alt="ToolJet - Widget Reference - Table" />
</div>
### Displaying Data
@ -439,32 +501,6 @@ Along with `changeSet`, `dataUpdates` property will also be changed when the val
If the data of a cell is changed, "save changes" button will be shown at the bottom of the table. This button when clicked will trigger the `Bulk update query` event. This event can be used to run a query to update the data on your data source.
### Use dynamic column
Enabling the **Use dynamic column** toggle will allow users to set the **Column data** where users can link the column data dynamically from a query.
The **column data** field expects a JSON value:
```json
{
"name":"Name",
"columnType":"string",
"key":"first_name",
"cellBackgroundColor":"#000",
"textColor":"#fff",
"isEditable":true,
"regex":"",
"maxLength":10,
"minLength":5,
"customRule":""
}
```
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/table/dynamic_column.png" alt="ToolJet - Widget Reference - Table" />
</div>
## Validation
Under column properties, expand the detailed view of a column type to access a toggle button called `make editable`. You can toggle it `ON` to apply the validations for each column respectively using the following.
@ -488,7 +524,7 @@ If the condition is true, the validation passes, otherwise return a string that
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/table/action2.png" alt="ToolJet - Widget Reference - Table" width="800" />
<img className="screenshot-full" src="/img/widgets/table/actionnew.png" alt="ToolJet - Widget Reference - Table" />
</div>
@ -502,96 +538,6 @@ Action buttons will be displayed as the last column of the table. The styles of
| Text color (Action Button) | Color of button-text of the action button. |
| Disable Action Button | Toggle on to disable the action button. You can programmatically set its value by clicking on the `Fx` button next to it, if set to `{{true}}`, the action button will be disabled and becomes non-functional. By default, its value is set to `{{false}}`. |
## Options
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
### Server-side pagination
Server-side pagination can be used to run a query whenever the page is changed. Go to events section of the inspector and change the action for `on page changed` event. Number of records per page needs to be handled in your query. If server-side pagination is enabled, `pageIndex` property will be exposed on the table object, this property will have the current page index. `pageIndex` can be used to query the next set of results when page is changed.
When Server-side pagination is enabled, you'll be able to set three other table properties:
- **Enable previous page button**: When server-side pagination is enabled, this button is enabled by default. Toggle this off to disable the previous page button from the table.
- **Enable next page button**: When server-side pagination is enabled, this button is enabled by default. Toggle this off to disable the next page button from the table.
- **Total records server side**: Set a numerical value to display particular number of records.
### Client-side pagination
Client-side pagination is enabled by default. When the client-side pagination is enabled(`{{true}}`), another property **Number of rows per page** will be shown that can be used to set the number of records per page. By default, the value is set to 10 and if it is disabled(`{{false}}`) then it will show all the records in the single page.
### Server-side search
If server-side search is enabled, `on search` event is fired after the content of `searchText` property is changed. `searchText` can be used to run a specific query to search for the records in your data source.
### Show download button
The download button in the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to {{true}} or {{false}} to show or hide the download button by clicking on the **Fx** button.
### Hide column selector button
The column selector button on the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to {{true}} or {{false}} to show or hide the column selector button by clicking on the **Fx** button.
### Show filter button
The filter button in the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to {{true}} or {{false}} to show or hide the filter button by clicking on the **Fx** button.
### Show add new row button
The Add new row button in the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to {{true}} or {{false}} to show or hide the Add new row button by clicking on the **Fx** button.
### Show update buttons
It's enabled by default. Table footer will show two update buttons **Save changes** & **Discard changes** whenever a cell is edited. Toggle `off` to hide update buttons.
### Allow selection
This option is active by default. **Enabling** this functionality allows users to choose a row in the table by utilizing `checkboxes` placed next to each row. If this option is **disabled**, the ability to highlight selected rows and perform bulk selection will not be accessible.
If the option for allowing selection is enabled, a new option called **[Default selected row](#default-selected-row)** will become visible. However, if the option for allowing selection is disabled, the **[Default selected row](#default-selected-row)** option will not be displayed.
### Highlight selected row
Activate this option to visually emphasize the last clicked row. **Enabling** this feature will alter the row selection appearance of the table from a `checkbox`-based theme to a `highlighting`-based theme.
### Bulk selection
To enable the selection of one or more rows from the current page of a table, you can activate the 'Bulk selection' setting in the inspector. The values of the selected rows will be exposed as '**selectedRows**'.
### Default Selected Row
By enabling this option, you can designate a default row to be pre-selected when the app loads. This means that whenever the app is opened for the first time, a specific row will already be highlighted in the table by default. Additionally, there is an accessible variable that stores the value for this setting. You can find a list of all accessible variables **[here](#exposed-variables)**.
To set a default selected row, you need to provide an object with a single key-value pair. For instance, you can use the `id` key and dynamically obtain the value from a variable, let's say `x`, to specify the default selected row in the table. We assume that the variable `x` holds a valid numerical id.
Example:
```js
{{{"id": variables.x}}} //assuming variables.x is already set
```
Please ensure that the value provided in the object corresponds to a valid id in the table to ensure proper functionality.
### Disable sorting
Enable this option to lock the sorting of columns when clicked on column name.
### Server-side sort
When Server-side sort is enabled, clicking on the column headers will not automatically sort the table, instead, the `Sort applied` event will be fired and the applied sorting will be exposed as `sortApplied`. You can use this data to run any query that feeds data to the table in a manner that reflects the sorting applied.
### Server-side filter
When Server-side filter is enabled, applying filters will not automatically filter the table, instead, the `Filter changed` event will be fired and the applied filters will be exposed as `filters`. You can use this data to run any query that feeds data to the table in a manner that reflects the filters applied.
### Show search box
It can be used to show or hide Table Search box. Client-side search is enabled by default and server-side search can be enabled from the events section of the inspector. Whenever the search text is changed, the `searchText` property of the table component is updated. If server-side search is enabled, `on search` event is fired after the content of `searchText` property is changed. `searchText` can be used to run a specific query to search for the records in your data source.
If you don't wish to use the search feature altogether, you can disable it from the inspector.
### Loading state (Boolean)
Loading state shows a loading skeleton for the table. This property can be used to show a loading status on the table while data is being loaded. `isLoading` property of a query can be used to get the status of a query.
## Events
- **[Row hovered](#row-hovered)**
@ -605,6 +551,12 @@ Loading state shows a loading skeleton for the table. This property can be used
- **[Filter changed](#filter-changed)**
- **[Add new rows](#add-new-rows)**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/table/newevents.png" alt="ToolJet - Widget Reference - Table" />
</div>
### Row hovered
This event is triggered when the mouse pointer is moved over a row in the table. The `hoveredRowId` exposed variable of the table will include the id of the latest hovered row and `hoveredRow` property of the table will have the data of the hovered row in the object format.
@ -645,17 +597,146 @@ This event is triggered when filter is added, removed, or updated from the filte
This event is triggered when the **Save** button is clicked from the **Add new row** modal on the table.
## Row Selection
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/table/rowselection.png" alt="ToolJet - Widget Reference - Table" />
</div>
### Allow selection
This option is active by default. **Enabling** this functionality allows users to choose a row in the table by utilizing `checkboxes` placed next to each row. If this option is **disabled**, the ability to highlight selected rows and perform bulk selection will not be accessible.
If the option for allowing selection is enabled, a new option called **[Default selected row](#default-selected-row)** will become visible. However, if the option for allowing selection is disabled, the **[Default selected row](#default-selected-row)** option will not be displayed.
### Highlight selected row
Activate this option to visually emphasize the last clicked row. **Enabling** this feature will alter the row selection appearance of the table from a `checkbox`-based theme to a `highlighting`-based theme.
### Bulk selection
To enable the selection of one or more rows from the current page of a table, you can activate the 'Bulk selection' setting in the inspector. The values of the selected rows will be exposed as '**selectedRows**'.
### Default Selected Row
By enabling this option, you can designate a default row to be pre-selected when the app loads. This means that whenever the app is opened for the first time, a specific row will already be highlighted in the table by default. Additionally, there is an accessible variable that stores the value for this setting. You can find a list of all accessible variables **[here](#exposed-variables)**.
To set a default selected row, you need to provide an object with a single key-value pair. For instance, you can use the `id` key and dynamically obtain the value from a variable, let's say `x`, to specify the default selected row in the table. We assume that the variable `x` holds a valid numerical id.
Example:
```js
{{{"id": variables.x}}} //assuming variables.x is already set
```
Please ensure that the value provided in the object corresponds to a valid id in the table to ensure proper functionality.
## Search Sort and Filter
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/table/searchsort.png" alt="ToolJet - Widget Reference - Table" />
</div>
### Show search
It can be used to show or hide Table Search box. Client-side search is enabled by default and server-side search can be enabled from the events section of the inspector. Whenever the search text is changed, the `searchText` property of the table component is updated. If server-side search is enabled, `on search` event is fired after the content of `searchText` property is changed. `searchText` can be used to run a specific query to search for the records in your data source.
If you don't wish to use the search feature altogether, you can disable it from the inspector.
#### Server-side search
If server-side search is enabled, `on search` event is fired after the content of `searchText` property is changed. `searchText` can be used to run a specific query to search for the records in your data source.
### Enable column sorting
Disable this option to lock the sorting of columns when clicked on column header.
#### Server-side sort
When Server-side sort is enabled, clicking on the column headers will not automatically sort the table, instead, the `Sort applied` event will be fired and the applied sorting will be exposed as `sortApplied`. You can use this data to run any query that feeds data to the table in a manner that reflects the sorting applied.
### Enable filtering
The filter button in the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to {{true}} or {{false}} to show or hide the filter button by clicking on the **Fx** button.
#### Server-side filter
When Server-side filter is enabled, applying filters will not automatically filter the table, instead, the `Filter changed` event will be fired and the applied filters will be exposed as `filters`. You can use this data to run any query that feeds data to the table in a manner that reflects the filters applied.
## Pagination
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/table/paginationnew.png" alt="ToolJet - Widget Reference - Table" />
</div>
### Client-side pagination
Client-side pagination is enabled by default. When the client-side pagination is enabled(`{{true}}`), another property **Number of rows per page** will be shown that can be used to set the number of records per page. By default, the value is set to 10 and if it is disabled(`{{false}}`) then it will show all the records in the single page.
### Server-side pagination
Server-side pagination can be used to run a query whenever the page is changed. Go to events section of the inspector and change the action for `on page changed` event. Number of records per page needs to be handled in your query. If server-side pagination is enabled, `pageIndex` property will be exposed on the table object, this property will have the current page index. `pageIndex` can be used to query the next set of results when page is changed.
When Server-side pagination is enabled, you'll be able to set three other table properties:
- **Enable previous page button**: When server-side pagination is enabled, this button is enabled by default. Toggle this off to disable the previous page button from the table.
- **Enable next page button**: When server-side pagination is enabled, this button is enabled by default. Toggle this off to disable the next page button from the table.
- **Total records server side**: Set a numerical value to display particular number of records.
:::tip
Check this how-to guide to learn more about [server-side pagination](/docs/how-to/use-server-side-pagination).
:::
## Addional actions
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/table/additionalactions.png" alt="ToolJet - Widget Reference - Table" />
</div>
### Show add new row button
The Add new row button in the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to {{true}} or {{false}} to show or hide the Add new row button by clicking on the **Fx** button.
### Show download button
The download button in the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to {{true}} or {{false}} to show or hide the download button by clicking on the **Fx** button.
### Hide column selector button
The column selector button on the table header is visible by default. You can choose to hide it by disabling this option. You can dynamically set the value to {{true}} or {{false}} to show or hide the column selector button by clicking on the **Fx** button.
### Loading state (Boolean)
Loading state shows a loading skeleton for the table. This property can be used to show a loading status on the table while data is being loaded. `isLoading` property of a query can be used to get the status of a query.
### Show update buttons
It's enabled by default. Table footer will show two update buttons **Save changes** & **Discard changes** whenever a cell is edited. Toggle `off` to hide update buttons.
## Devices
| Option | Description | Expected value |
|:----------- |:----------- |:----------- |
| **Show on desktop** | Toggle on or off to show or hide the component on desktop devices | `{{true}}` or `{{false}}` |
| **Show on mobile** | Toggle on or off to show or hide the component on mobile devices | `{{true}}` or `{{false}}` |
## Styles
| Style | Description |
| ----------- | ----------- |
| Text color | Change the color of the text in table by providing `hex color code` or choosing one from the picker |
| Action button radius | This field can be used to give a radius to all action buttons. The default value is `0` |
| Table type | Select a type of table from the dropdown. |
| Cell size | This decides the size of table cells. You can choose between a `Compact` size for table cells or a `Spacious` size |
| Visibility | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not visible after the app is deployed. By default, it's set to `{{true}}`. |
| Disable | Toggle on to lock the widget. You can programmatically change its value by clicking on the `Fx` button next to it, if set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
| Border radius | Use this property to modify the border radius of the button. |
| :---------- | :---------- |
| **Text color** | Change the color of the text in table by providing `hex color code` or choosing one from the picker |
| **Action button radius** | This field can be used to give a radius to all action buttons. The default value is `0` |
| **Table type** | Select a type of table from the dropdown: Bordered, Regular, or Striped. |
| **Cell size** | This decides the size of table cells. You can choose between a `Condensed` size for table cells or a `Regular` size |
| **Visibility** | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not visible after the app is deployed. By default, it's set to `{{true}}`. |
| **Disable** | Toggle on to lock the widget. You can programmatically change its value by clicking on the `Fx` button next to it, if set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
| **Border radius** | Use this property to modify the border radius of the button. |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
@ -664,27 +745,27 @@ Any property having `Fx` button next to its field can be **programmatically conf
## Exposed variables
| variable | description |
| ----------- | ----------- |
| currentData | Data that is currently being displayed by the table ( including edits if any ) |
| currentPageData | Data that is displayed on the current page if pagination is enabled ( including edits if any ) |
| pageIndex | Index of the current page, starting from 1
| changeSet | Object with row number as the key and object of edited fields and their values as the value |
| dataUpdates | Just like changeSet but includes the data of the entire row |
| selectedRow | Contains the data of the row that was most recently clicked. When an action button is clicked, `selectedRow` is also updated. Its initial value is set to the data of the first row when the app is loaded. |
| selectedRowId | Stores the ID of the row that was last clicked. Similar to `selectedRow`, it gets updated when an action button is clicked. You can access its value using `{{components.table1.selectedRowId}}`. By default, it is set to `0`, representing the ID of the first row when the app is loaded. |
| selectedCell | The data of the cell that was last clicked on the table. |
| searchText | The value of the search field if server-side pagination is enabled |
| newRows| The newRows variable stores an array of objects, each containing data for a row that was added to the table using the "Add new row" button. When the user clicks either the "Save" or "Discard" button in the modal, this data is cleared.|
| :---------- | :---------- |
| **currentData** | Data that is currently being displayed by the table ( including edits if any ) |
| **currentPageData** | Data that is displayed on the current page if pagination is enabled ( including edits if any ) |
| **pageIndex** | Index of the current page, starting from 1
| **changeSet** | Object with row number as the key and object of edited fields and their values as the value |
| **dataUpdates** | Just like changeSet but includes the data of the entire row |
| **selectedRow** | Contains the data of the row that was most recently clicked. When an action button is clicked, `selectedRow` is also updated. Its initial value is set to the data of the first row when the app is loaded. |
| **selectedRowId** | Stores the ID of the row that was last clicked. Similar to `selectedRow`, it gets updated when an action button is clicked. You can access its value using `{{components.table1.selectedRowId}}`. By default, it is set to `0`, representing the ID of the first row when the app is loaded. |
| **selectedCell** | The data of the cell that was last clicked on the table. |
| **searchText** | The value of the search field if server-side pagination is enabled |
| **newRows**| The newRows variable stores an array of objects, each containing data for a row that was added to the table using the "Add new row" button. When the user clicks either the "Save" or "Discard" button in the modal, this data is cleared.|
## Component specific actions (CSA)
Following actions of color picker component can be controlled using the component specific actions(CSA):
| Actions | Description |
| ----------- | ----------- |
| setPage | Set the page on the table via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.setPage(2)` |
| selectRow | Select the row on the table using via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.selectRow('id','11')` |
| deselectRow | Deselect the row on the table via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.deselectRow()` |
| discardChanges | Discard the changes from the table when a cell is edited via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.discardChanges()` |
| discardNewlyAddedRows | Discard the newly added rows from the add new row popup on the table via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.discardNewlyAddedRows()` |
| downloadTableData | Retrieve the data from the table in the PDF, CSV, or Excel sheet by using a component-specific action within an event handler. Furthermore, you have the choice to utilize a RunJS query to execute component-specific actions. For downloading the table data as a PDF, you can use the following code: `await components.table1.downloadTableData('pdf')`. Similarly, for downloading as a CSV: `await components.table1.downloadTableData('csv')`, and for downloading as an Excel sheet: `await components.table1.downloadTableData('xlsx')`. |
| :----------- | :----------- |
| **setPage** | Set the page on the table via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.setPage(2)` |
| **selectRow** | Select the row on the table using via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.selectRow('id','11')` |
| **deselectRow** | Deselect the row on the table via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.deselectRow()` |
| **discardChanges** | Discard the changes from the table when a cell is edited via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.discardChanges()` |
| **discardNewlyAddedRows** | Discard the newly added rows from the add new row popup on the table via component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.table1.discardNewlyAddedRows()` |
| **downloadTableData** | Retrieve the data from the table in the PDF, CSV, or Excel sheet by using a component-specific action within an event handler. Furthermore, you have the choice to utilize a RunJS query to execute component-specific actions. For downloading the table data as a PDF, you can use the following code: `await components.table1.downloadTableData('pdf')`. Similarly, for downloading as a CSV: `await components.table1.downloadTableData('csv')`, and for downloading as an Excel sheet: `await components.table1.downloadTableData('xlsx')`. |

106
docs/docs/widgets/text.md
View file

@ -4,85 +4,79 @@ title: Text
---
# Text
Text widget can be used to display text.
The **Text** component can be used to create headers/sub-headers, add labels next to various input fields and more. In this document, we'll go through all the configuration options for the **Text** component.
:::info
Users cannot enter and edit text.
:::
## How To Use Text Component
## How To Use Text Widget
<iframe height="500" src="https://www.youtube.com/embed/mcjYKw2VeAI" title="Text Widget" frameborder="0" allowfullscreen width="100%"></iframe>
<iframe height="500" src="https://www.youtube.com/embed/mcjYKw2VeAI" title="Text Component" frameborder="0" allowfullscreen width="100%"></iframe>
## Properties
### Text
| Properties | Description | Expected Value |
|:--------------------|:--------------------------------------|:---------------|
| Text | This property sets the content/text inside the Text component. | Text input OR Refer query data with dynamic variables - `{{queries.datasource.data.text}}`|
| Show loading state | This property lets you set the condition for loading state of the text. | Use the toggle button or dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either `{{true}}` or `{{false}}` |
This property sets the content/text inside the Text widget. Refer your query data with dynamic variables `{{queries.datasource.data.text}}` or populate it with sample values `Text goes here !`.
### Show loading state
Toggle `on` or `off` to show or hide the loading state. You can also click on the `Fx` next to it to set the value `{{true}}` and `{{false}}` dynamically. Shows a loading status if the value is `true`. This property is often used with the `isLoading` property of queries so that the table shows a spinner while the query is being run. Default value is `false`.
## General
### Tooltip
<font size="4"><b>Tooltip</b></font>
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
A **Tooltip** is commonly used to provide additional information about an element. This information becomes visible when the user hovers the mouse pointer over the respective component.
In the input field under **Tooltip**, you can enter some text and the component will show the specified text as a tooltip when it is hovered over.
Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/tooltip.png" alt="ToolJet - Widget Reference - Text" />
<img className="screenshot-full" src="/img/widgets/text/tooltip.png" alt="Tooltip Example" />
</div>
## Layout
<font size="4"><b>Show on desktop</b></font>
### Show on desktop
Use this toggle to show or hide the component in the desktop view. You can dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to `{{true}}` or `{{false}}`.
Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
### Show on mobile
<font size="4"><b>Show on mobile</b></font>
Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
Use this toggle to show or hide the component in the mobile view. You can dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to `{{true}}` or `{{false}}`.
---
## Styles
| Style | Description |
| ----------- | ----------- |
| Font Weight | You can change the font weight of the text in following ways: **normal (default), bold, lighter, bolder** |
| Text Decoration | You can change the text decoration in following ways : **none(default), overline, line-through, underline, overline underline** |
| Text Transformation | You can transform the text in following ways: **none (default), uppercase, lowercase, capitalize** |
| Font Style | You can change the font style in following ways: **normal(default), italic, oblique** |
| Line Height | You can change the line height by providing number as input (example - 1.5) |
| Text Indent | You can change the text indent by providing the number as input (example - 10) |
| Letter Spacing | You can change the letter spacing by providing the number as input (example - 2) |
| Word Spacing | You can change the letter spacing by providing the number as input (example - 2) |
| Font Variant | You can change the font variant of the text in the following ways: **normal (default), small-caps, initial, inherit** |
| Text Size | By default, the text size is set to 14. You can enter any value from 1-100 to set custom text size. |
| Background Color | You can change the background color of the text component by entering the Hex color code or choosing a color of your choice from the color picker. |
| Text Color | You can change the color of the text by entering the Hex color code or choosing a color of your choice from the color picker. |
| Align Text | You can align the text inside the widget in following ways: left, right, center, justified |
| Visibility | This is to control the visibility of the widget. If `{{false}}` the widget will not visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. By default, it's set to `{{true}}`. |
| Disable | This property only accepts boolean values. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
| Style | Description | Expected Value
|:----------- |:----------- | :-------
| Font Weight | Determines how bold or light your text will appear. | normal (default), bold, lighter, bolder |
| Text Decoration | Adds an underline, overline, line-through, or a combination of lines to selected text. | none(default), overline, line-through, underline, overline underline |
| Text Transformation | Dictates the capitalization of an element's text. It allows for all-uppercase or all-lowercase rendering. | none (default), uppercase, lowercase, capitalize |
| Font Style | Allows you to apply styles like italic or normal, altering the overall look of the text content. | normal(default), italic, oblique |
| Line Height | Determines the vertical space between lines of text within an element. It controls the amount of space above and below each line of text. | Enter a number as the value (example: **1.5**) |
| Text Indent | Commonly used to create an indentation effect, like when starting a paragraph with some space before the first word. | Enter a number as the value (example: **10**) |
| Letter Spacing | Refers to the adjustment of the space between individual characters within a block of text. | Enter a number as the value (example: **2**) |
| Word Spacing | Controls the amount of space between words within a block of text. | Enter a number as the value (example: **2**) |
| Font Variant | Allows you to customize the visual appearance of text and helps achieve specific typographic styles or formatting requirements. | normal (default), small-caps, initial, inherit |
| Text Size | Dimensions of the characters in a font, typically measured in units like pixels, points, ems, or percentages. It determines how large or small the text appears on a screen or in print. | Any number between **1-100** |
| Background Color | Sets the background color of the component. | Hex color code/choose a color using the color picker |
| Text Color | Sets the color of the text. |Hex color code/choose a color using the color picker |
| Align Text | Sets the alignment of the text. | left, right, center, justified |
| Visibility | Controls the visibility of the component. If set to {{false}}, the component will not be visible after the app is deployed. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
| Disable | Makes the component non-functional when set to true. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
## General
<font size="4"><b>Box Shadow</b></font>
The **Box Shadow** property is used to add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/text/box-shadow.png" alt="Box-Shadow Example" />
</div>
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
## Component Specific Actions (CSA)
## Exposed Variables
| Variables | Description |
| ----------- | ----------- |
| text | This variable gets updated with HEX color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: `{{components.colorpicker1.selectedColorHex}}`|
## Component specific actions (CSA)
Following actions of color picker component can be controlled using the component specific actions(CSA):
Following actions of the **Text** component can be controlled using Component-Specific Actions(CSA):
| Actions | Description |
| ----------- | ----------- |
| visibility | Set a visibility of the text via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.text1.visibility(false)` |
| setText | Set a text value on the text component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.text1.setText('this is a text')` |
| :----------- | :----------- |
| visibility | Sets the visibility of the text via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.text1.visibility(false)`. |
| setText | Sets a text value on the text component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.text1.setText('this is a text')`. |

78
docs/docs/widgets/textarea.md
View file

@ -4,75 +4,71 @@ title: Textarea
---
# Textarea
Textarea widgets let users enter and edit just text like [Text Input](/docs/widgets/text-input) widget.
:::tip
Textarea should be preferred over [Text Input](/docs/widgets/text-input) when user input is more than one sentence.
:::
The **Textarea** component allows users to enter text in an input field similar to the [Text Input](/docs/widgets/text-input) component. Textarea is generally preferred when we are expecting an input of multiple sentences. In this document, we'll go through all the configuration options for the **Textarea** component.
## How To Use Textarea Widget
<iframe height="500" src="https://www.youtube.com/embed/ja66x6DeZxk" title="Textarea Widget" frameborder="0" allowfullscreen width="100%"></iframe>
## Properties
### Default value
This property is used for setting the initial value in the textarea on the initial load. This field expects a `String` value.
### Placeholder
It specifies a hint that describes the expected value. This field expects a `String` value.
| Property | Description | Expected Value |
|:-------------|:------------------------------------------------------------|:------------|
| Default value| Used to set initial value in textarea on load. It is a pre-established value that can be retrieved from the Text area component if no modifications are made to it. | Enter some text as the value (example: "John Doe")|
| Placeholder | Provides a hint for the expected value. It disappears once the user interacts with the component. | Enter some instructional text as the value (example: "Type name here") |
## General
### Tooltip
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
<font size="4"><b>Tooltip</b></font>
Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
A **Tooltip** is commonly used to provide additional information about an element. This information becomes visible when the user hovers the mouse pointer over the respective component.
In the input field under **Tooltip**, you can enter some text and the component will show the specified text as a tooltip when it is hovered over.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/tooltip.png" alt="ToolJet - Widget Reference - Text area" />
<img className="screenshot-full" src="/img/widgets/textarea/tooltip.png" alt="Tooltip Example" />
</div>
## Layout
### Show on desktop
<font size='4'><b>Show on desktop</b></font>
Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
### Show on mobile
Use this toggle to show or hide the component in the desktop view. You can dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to `{{true}}` or `{{false}}`.
Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
<font size='4'><b>Show on mobile</b></font>
Use this toggle to show or hide the component in the mobile view. You can dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to `{{true}}` or `{{false}}`.
---
## Styles
### Border Radius
| Property | Description | Expected Value |
|:---------------|:-----------|:---------------|
| Visibility | Controls the visibility of the component. If set to `{{false}}`, the component will not be visible after the app is deployed.| Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
| Disable | Makes the component non-functional when set to true. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
| Border Radius | Adjusts the roundness of the component's corners. | Numeric value|
Use this property to modify the border radius of the text area widget. The field expects only numerical value from `1` to `100`, default is `0`.
### Visibility
## General
This is to control the visibility of the widget. If `{{false}}` the widget will not visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. By default, it's set to `{{true}}`.
### Disable
<font size="4"><b>Box Shadow</b></font>
This property only accepts boolean values. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
The **Box Shadow** property is used to add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/widgets/textarea/box-shadow.png" alt="Box-Shadow Example" />
</div>
## Exposed Variables
| Variables | Description |
| ----------- | ----------- |
| value | This variable holds the value of the text area component. You can access the value dynamically using JS: `{{components.textarea1.value}}`|
| Variables | Description | Expected Value |
|: ----------- |: ----------- | :-------------|
| value | This variable holds the value entered in the text area component. | You can access the value dynamically using JS. For example, `{{components.textarea1.value}}`|
## Component specific actions (CSA)
## Component Specific Actions (CSA)
Following actions of color picker component can be controlled using the component specific actions(CSA):
Following actions of the **Textarea** component can be controlled using Component-Specific Actions(CSA):
| Actions | Description |
| ----------- | ----------- |
| setText | Set the text on the text area component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textarea1.setText('this is a text')` |
| clear | clear the value from the text area component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.text1.clear()` |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::
| :----------- | :----------- |
| setText | Sets the text on the text area component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textarea1.setText('this is a textarea')`. |
| clear | Clears the value from the text area component via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as `await components.textarea1.clear()`. |

2
docs/docs/workflows/overview.md
View file

@ -128,7 +128,7 @@ In the above screenshot, Logs indicate that all three nodes have successfully ex
</div>
<br/>
Click on the *sendSMS* node and look at the **Results**. Under the **data** property, we can see an **errorMessage** indentifier. The **errorMessage** will be null for the messages that are successfully sent to the intended number.
Click on the *sendSMS* node and look at the **Results**. Under the **data** property, we can see an **errorMessage** identifier. The **errorMessage** will be null for the messages that are successfully sent to the intended number.
<div style={{textAlign: 'center'}}>
<img style={{padding: '10px'}} className="screenshot-full" src="/img/workflows/overview/sendSMS-result.png" alt="Send SMS result" />

2
docs/docusaurus.config.js
View file

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

1
docs/sidebars.js
View file

@ -197,6 +197,7 @@ const sidebars = {
},
],
},
'dashboard',
{
'type': 'category',
'label': 'App Builder',

BIN
docs/static/img/dashboard/addtofolder.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 288 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 279 KiB

BIN
docs/static/img/dashboard/appmenu.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 119 KiB

BIN
docs/static/img/dashboard/changeicon.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 293 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 824 KiB

BIN
docs/static/img/dashboard/cloneapp.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 346 KiB

BIN
docs/static/img/dashboard/currentversion.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 182 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 112 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
docs/static/img/dashboard/deleteapp.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 282 KiB

BIN
docs/static/img/dashboard/exportapp.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 316 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
docs/static/img/dashboard/newapp.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 262 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 MiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 268 KiB

BIN
docs/static/img/dashboard/searchapp.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 183 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 311 KiB

BIN
docs/static/img/datasource-reference/mysql/addmysql.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 555 KiB

BIN
docs/static/img/datasource-reference/mysql/guinew.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
docs/static/img/datasource-reference/mysql/mysqlconnect.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
docs/static/img/datasource-reference/mysql/sqlmode.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 35 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
docs/static/img/datasource-reference/rest-api/restconnect.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 MiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
docs/static/img/quickstart-guide/add-log-config.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 237 KiB

BIN
docs/static/img/quickstart-guide/add-log.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
docs/static/img/quickstart-guide/alert-event.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 214 KiB

BIN
docs/static/img/quickstart-guide/app-builder-overview.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 345 KiB

BIN
docs/static/img/quickstart-guide/change-modal-label.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 538 KiB

BIN
docs/static/img/quickstart-guide/close-modal-event.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
docs/static/img/quickstart-guide/container-config.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
docs/static/img/quickstart-guide/database-setup.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
docs/static/img/quickstart-guide/delete-action-config.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 305 KiB

BIN
docs/static/img/quickstart-guide/delete-log-config.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 182 KiB

BIN
docs/static/img/quickstart-guide/delete-log-demo.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 503 KiB

BIN
docs/static/img/quickstart-guide/delete-query-success-event.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 139 KiB

BIN
docs/static/img/quickstart-guide/drag-drop-container.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 731 KiB

BIN
docs/static/img/quickstart-guide/dummy-data.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 121 KiB

BIN
docs/static/img/quickstart-guide/first-query.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
docs/static/img/quickstart-guide/image-config.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
docs/static/img/quickstart-guide/inspector-objects.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 101 KiB

BIN
docs/static/img/quickstart-guide/inspector.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 621 KiB

BIN
docs/static/img/quickstart-guide/logged-in-user-data.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 355 KiB

BIN
docs/static/img/quickstart-guide/modal-addlog-event.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 205 KiB

BIN
docs/static/img/quickstart-guide/modal-button-config.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 226 KiB

BIN
docs/static/img/quickstart-guide/modal-text-labels.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 217 KiB

BIN
docs/static/img/quickstart-guide/modal-with-inputs.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 230 KiB

BIN
docs/static/img/quickstart-guide/open-close-modal.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 498 KiB

BIN
docs/static/img/quickstart-guide/query-preview.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 121 KiB

BIN
docs/static/img/quickstart-guide/query-success-event.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 161 KiB

BIN
docs/static/img/quickstart-guide/rename-table.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 326 KiB

BIN
docs/static/img/quickstart-guide/table-with-data.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 305 KiB

BIN
docs/static/img/quickstart-guide/text-config.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
docs/static/img/quickstart-guide/time-tracker-final-preview.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 290 KiB

BIN
docs/static/img/v2-beta/app-builder/appbuilderui2.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 415 KiB

BIN
docs/static/img/v2-beta/app-builder/canvas/canvasnew.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 387 KiB

BIN
docs/static/img/v2-beta/app-builder/canvas/handlenew.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 114 KiB

BIN
docs/static/img/v2-beta/app-builder/canvas/scrollnew.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
docs/static/img/v2-beta/app-builder/leftsidebar/commentnew.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 351 KiB

BIN
docs/static/img/v2-beta/app-builder/leftsidebar/globalnew.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
docs/static/img/v2-beta/app-builder/leftsidebar/inspectornew.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
docs/static/img/v2-beta/app-builder/leftsidebar/leftnew.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 413 KiB

BIN
docs/static/img/v2-beta/app-builder/leftsidebar/pagesnew.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
docs/static/img/v2-beta/app-builder/leftsidebar/theme.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 351 KiB

BIN
docs/static/img/v2-beta/app-builder/rightsidebar/configinspector.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 MiB

BIN
docs/static/img/v2-beta/app-builder/rightsidebar/librarynew.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 388 KiB

BIN
docs/static/img/v2-beta/app-builder/share/publicnew.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 130 KiB

BIN
docs/static/img/v2-beta/app-builder/share/sharenew.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
docs/static/img/v2-beta/app-builder/toolbar/appnamenew.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
docs/static/img/v2-beta/app-builder/toolbar/canvasmodes.gif vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 392 KiB

BIN
docs/static/img/v2-beta/app-builder/toolbar/changessaved.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

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