mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-23 06:27:57 +00:00
bdfe3270e2
* docs: jira * docs: formatting + Client Credentials grant type * docs: connection string pgsql * docs: parameterized queries mysql * docs: parameterized queries in PostgreSQL * docs: update mysql example * docs: TJDB sql editor * docs: add metadata to REST API * docs: add, update postgresql media * docs: add metadata to graphql * docs: update parameterized queries * docs: add parameterized queries for mssql * docs: add SSL Cert to mysql * docs: TJDB SQL restricted commands * docs: update JIRA token location * docs: update delete issue example * docs: update find user by query example * docs: remove session id from get assignable users * docs: use correct image for get issues for board * docs: update create issue example * docs: update delete issue media * docs: update assignable users media * docs: update examples * docs: update key desc * docs: v2.68.0-Beta
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)**.
|
|
|