Workflow IDE
Learn about the Retool Workflows IDE.
The Workflow IDE is the interface you use to build workflows. It is made up of four primary areas:
- Canvas - Arrange blocks and build your workflow.
- Left panel - Add blocks and functions, configure triggers, and configure code libraries.
- Status bar - Select an environment and debug workflow runs.
- Toolbar - Rename, run, and deploy a workflow.
Canvas
The canvas is the main area of the IDE and is where you build workflows. You add blocks to the canvas that perform specific actions. You can move blocks around using drag-and-drop to position them anywhere on the canvas.
Navigation controls
The canvas has no size constraints and you can add as many blocks as you need. There are a number of controls to navigate the workflow:
Pan
Click and drag anywhere on the canvas to move (pan) around the workflow. You can also pan around the canvas using the minimap at the lower-right corner. The visible area is highlighted—click and drag to move it around.
The Minimap also adjusts when changing the zoom level. Click to collapse the minimap.
Zoom
You can zoom in and out of the canvas to show more content in the visible area. There are multiple ways to adjust the zoom:
- Use the Zoom controls in the lower-right of the canvas.
- or .
- + Mouse scroll.
- Pinch-to-zoom with a trackpad.
You can quickly return the zoom level to 100% by double-clicking on any area of the canvas or clicking on the zoom level.
Fit to screen
Click Fit view to automatically adjust the zoom level to view the entirety of the canvas.
Layout controls
You can adjust the layout of blocks on the canvas using the available layout controls:
| Layout control | Description |
|---|---|
| Autolayout | Automatically arrange blocks on the canvas. |
| Expand all | Expand all blocks. |
| Collapse all | Collapse all blocks. |
| Toggle comments | Show or hide block comments. |
View controls
Use the Graph view and Tree view controls at the top-center of the canvas to switch between the standard or vertical view of the workflow.
Left panel
The left panel contains a set of tabs to configure functionality of a workflow.
Blocks
The Blocks tab is one method for adding blocks to the canvas.
Outline
The Outline tab displays a list of all blocks in the workflow. You can click on each block to show it in the canvas. As with blocks on the canvas, blocks in the Outline section include an icon that reflects their function.
Split view
You can select a block to open it in split view, making it easier to edit blocks with complex code. Click Split view in the toolbar to show or hide the split view pane.
Click Open in tab in the toolbar of any block to open it in split view.
Functions
The Functions tab is where you configure Function blocks—reusable blocks that can be called by other blocks. Function blocks don't appear on the canvas due to their purpose and are managed in this area of the panel.
Triggers
The Triggers tab is where you configure webhook and schedule triggers to automatically run workflows.
Libraries
The Libraries tab enables you to use custom JavaScript or Python libraries within a workflow. You can select which libraries to use, customize their configuration, and view documentation.
Status bar
The status bar contains environment options, run history, and debugging tools. Workflows can run using data sources set up in different environments, such as production and staging. You can select the environment in which a workflow runs from the environment select input on the right of the status bar area.
Multiple environments are available to Retool organizations on paid plans and you must configure environment settings for each resource.
The Run History section displays run logs for a workflow and contains debugging tools, should you need to troubleshoot a workflow.
Toolbar
The toolbar at the top of the IDE contains controls to rename, run, and deploy a workflow.
Use the Run and Deploy buttons to run a workflow or deploy it to run automatically. You can also view the last deployed date, revert undeployed changes, or import and export the workflow.