mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-22 22:17:55 +00:00
9f2ff94a12
* whtie label revamp * minor changes * updated beta info in copilot docs * renamed gds to ds in overview doc of v2.15 onwards * updated multienv: renamed gds to ds, updated screenshot * updated multienv: app state description * updated superadmin wrt new licensing updates * licensing update: free trial * updates in licensing * changes after review * [docs]updated restapi with bearer auth * Update kubernetes-aks.md * Update openshift.md * Update ecs.md * Update ecs.md * Update kubernetes-gke.md * Update kubernetes.md * Update docker.md * Update docker.md * Update ecs.md * Update google-cloud-run.md * Update kubernetes-aks.md * Update kubernetes-gke.md * Update kubernetes.md * Update openshift.md * Update kubernetes-gke.md * Update kubernetes-aks.md * fixed ecs, removed heroku from 2.15 onwards * updated digitalocean doc * licensing doc changes and location * Update digitalocean.md * Update digitalocean.md * added v2.18.0 --------- Co-authored-by: Adish M <44204658+adishM98@users.noreply.github.com>
67 lines
2.8 KiB
Markdown
67 lines
2.8 KiB
Markdown
---
|
|
id: canvas
|
|
title: Canvas
|
|
---
|
|
|
|
Canvas is the center area of the ToolJet app builder where the application is built. You arrange the **components** by dragging them from the Components library(right-sidebar).
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
|
|
<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/canvasnew.png" alt="App Builder: Canvas"/>
|
|
|
|
</div>
|
|
<br/>
|
|
|
|
:::info
|
|
- The Canvas height and width can be adjusted from the [Global Settings](/docs/app-builder/left-sidebar#global-settings).
|
|
- When the [Pages drawer](/docs/tutorial/pages) on the left is opened or pinned, the canvas becomes horizontally scrollable.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
|
|
<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/scrollnew.gif" alt="App Builder: Canvas"/>
|
|
|
|
</div>
|
|
:::
|
|
|
|
### Arrange Components
|
|
|
|
All the components are fully interactive in editor mode - to prevent interaction you can **click and hold** the **Component Handle** to change component's position.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
|
|
<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/handlenew.png" alt="App Builder: Canvas"/>
|
|
|
|
</div>
|
|
|
|
### Resize Components
|
|
|
|
Components on the canvas can be resized from the edges.
|
|
|
|
You can precisely set the position of selected components using keyboard arrow keys after clicking the component handle.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
|
|
<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/resize.gif" alt="App Builder: Canvas"/>
|
|
|
|
</div>
|
|
|
|
### Group Components
|
|
|
|
ToolJet comes with flexible components to group other components together, such as **[Container](/docs/widgets/container/)** and **[Form](/docs/widgets/form/)**. When you drag and drop components in containers/forms they create a group of nested components. All components can be nested in this way.
|
|
|
|
### Hide or Disable Components
|
|
|
|
Hide or Disable a component by setting its **Visibility** or **Disabled** property to `true`. Click on the component handle to open **config inspector** on right side. These values can also evaluate to true based on a truthy value. For example, you can use the property of one component to toggle the Visibility property of another component dynamically, you just need to write a conditional statement.
|
|
|
|
For example: We want to disable a button when a checkbox is checked so we can simple use `{{components.checkbox1.value}}` in **Disable** property of the button. `{{components.checkbox1.value}}` evaluates to `true` when the checkbox is checked, and false when unchecked.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
|
|
<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/hide.gif" alt="App Builder: Canvas"/>
|
|
|
|
</div>
|
|
|
|
### Clone Components
|
|
|
|
You can clone existing components on the canvas by **cmd/ctrl + d**. Check other **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)**.
|
|
|