Changelog

We're releasing improvements to our drag-and-drop system to make it easier than ever to build UIs within Retool. With our new preview experience, adding and moving components around the canvas is easier and more predictable, especially in nested and dense contexts.

---

Nested Contexts (e.g. Containers)

Containers no longer change size as you’re dragging over them, making it easier to drag and drop in and out of nested areas:

---

---

Dense Contexts (e.g. Forms)

Surrounding components no longer move unpredictably. For example, dragging a Text Input into a dense form is easier than ever:

We want to hear from you! Reach out to dworsky@retool.com if you have any feedback on drag and drop. We’re continuing to add more improvements over the coming weeks.

Introducing a new way to create components! The new component creation flow allows components to be easily created within frames, containers, and more with just a few clicks.

Canvas

Empty Containers, List Views, Forms, and other contexts now have an “Add components” button. Click the button to see a list of Retool components, and select the components you wish to add to the container.

Context Menu

Add components to existing containers and forms by right clicking and selecting “Add components” in the context menu. New components will be added below existing components in the container.

Component Explorer

Quickly add components to frames, containers, container sections, and views through the Component Explorer by clicking on the action button and pulling up the Create Components modal.

We’ve revamped the Calendar component with a bundle of visual and API improvements to help display and manage your events better! It comes with a host of new, customizable view options as well as additional event handlers and styling options. ✨

The updated Calendar comes with: expanded options to customize view and locale settings like time zone, a refreshed look to match your other components and/or app theme, a List view to display events in a schedule format, and bug fixes galore!

You can upgrade your existing Calendar component, or drag out a new one from the right-hand panel. Check out our refreshed docs to learn how to make the best use of the Calendar!

We're excited to launch the Command Palette, a powerful tool for quickly running commands and finding everything you need within Retool! Instead of searching and clicking around the editor to perform common actions, you can now use the Command Palette to build faster than ever before. ⚡

The Command Palette helps you search for components and queries within the app editor, and find other apps, shared queries, or resources within your organization. 🔍 You can also run 90+ app actions without ever leaving your keyboard, such as editing a nested component, viewing releases and history, or previewing a query. 🏃

You can access the Command Palette with the Cmd+K (Mac) or Ctrl+K (Windows) keyboard shortcut, or click on the search icon in the top right corner of the editor. Check out our docs or blog post to learn more, and feel free to send any feedback to jessicasun@retool.com!

We’re excited to announce a revamped cut/copy/paste experience that’s available to all cloud customers and will soon be available to on-premise customers. Component cut, copy, and paste are core to Retool’s editor ergonomics, allowing you to rapidly iterate on existing applications. Previously when copying and pasting, components would occasionally overlap or shift their layouts in unexpected ways. Pasting components within containers was especially difficult. The revamped experience remedies these bugs, including the following:

Previously, when pasting with a Container selected, the components would paste below. Now, pasting with a Container selected pastes the content inside. This makes it easier to create layouts with nested contexts without drag and drop.

Previously, pasting components into a container would resize them to be much narrower or wider than expected. Now, we auto-adjust pasted components’ widths so that they are correctly sized in the new context.

Previously, copy/paste shortcuts did nothing with an input-based component (i.e. Text Input) if the input element is focused. Now, copy/paste shortcuts correctly copy the component or paste components from the clipboard.

We shipped 10+ major bug fixes and improvements to our copy/paste experience, like:

• Fixed overlapping of pasted auto-height components
• Fixed unexpected vertical gaps between components copied from below auto-height components
• Fixed overlapping of pasted components if a frame is selected
• Pasted components now scroll into view
• Fixed unexpected vertical gaps between components inside pasted containers
• Fixed overlapping of pasted components in a container’s header if the container is nested in another container’s header
• Fixed pasting inside containers nested in a List View component
• Disabled being able to paste List View components to achieve nesting depth greater than 3
• Copy/paste shortcuts now correctly copy and paste Table components if no cells are selected

Introducing a new Context Menu​

In addition, we’re introducing a new context menu for Retool’s editor that enables rapid access to common component operations, such as deleting components, switching components to other similar components, and of course, copying and pasting components. In an effort to improve usability, the structure and ordering of the context menu has been improved and now includes submenu options too.

The context menu can be activated by right-clicking on components on the canvas or on the component Explorer in the left panel. Right-clicking on canvas frames will instead bring up an abridged version of the widget context menu with more general editor operations.

Retool continually works on stability and security improvements for our customers. We are updating our infrastructure that will result in a change to the IP addresses that Retool uses. This change will not affect most customers but impacts those who must allow connections to Retool IP addresses through a firewall. This includes:

• Retool Cloud customers who have inbound firewall rules for resources on the network (e.g., databases)
• Self-hosted Retool customers who have outbound firewall rules on the network (air-gapped deployments are not affected)

**If you explicitly allow connections from or to Retool’s IP addresses, you must include additional IP addresses before December 1st, 2022. If you have difficulty updating this information, please reach out to us by emailing ip-changes@retool.com. **

Retool Cloud customers​

Retool must be allowed to connect to your resources using the following IP addresses. Update your inbound firewall rules to ensure Retool has continued access to your data:

• 52.177.12.28/32
• 52.175.251.223/32
• 35.90.103.132/30
• 44.208.168.68/30

Failure to update this information in time can prevent Retool from accessing your data and result in failed queries.

Self-hosted Retool customers​

Self-hosted Retool deployments must be allowed to connect to Retool’s license check, email, and usage reporting services using the following IP addresses. Update your outbound firewall rules to ensure Retool has continued access:

• 13.66.159.82/32
• 13.66.251.59/32
• 35.92.202.168/29
• 44.211.178.248/29

Failure to update this information in time can result in failed license checks and user invites.

Reachability test​

You can test your changes within Retool to make sure your deployment can reach the new IP addresses:

1. Sign in to Retool and navigate to the Query Library.
2. Click + New to create a new query.
3. Select the **REST **resource and GET action type.
4. Set the URL to https://reachability-test.retool.com.
5. Click Save to save the query, then click ▶ to run the query.

If the query returns a 200 status and OK status text, your deployment can successfully reach the new IP addresses.

We're excited to announce that Debug Tools are now available for all cloud customers, and will be available in the next on-premise version! Debug Tools are a suite of devtools that enable you to investigate and debug errors in your Retool apps.

With Debug Tools, you can:

⚠ Get notified every time there’s an error

🔎 Quickly understand why and how errors happened

🔦 See a timeline of events to debug parallel queries

⚡ Inspect the state of all properties, including dependencies

You can access Debug Tools by clicking the bug icon on the right of the new status bar at the bottom of every Retool app, or by using the CTRL+` keyboard shortcut. Check out our docs or blog post to learn more, and feel free to send any feedback to jessicasun@retool.com. We’re excited to make debugging your apps quicker and easier than ever before!

We’ve added two new tabs, State and Timeline, that enable you to inspect the app state, drill into dependencies, and visualize query runs.

The State tab allows you to view the current state of all properties in your apps, as well as see dependencies between individual properties and calls from event handlers or JavaScript. This makes it easy to see everything that triggers a specific query. You can also directly jump to what you need with a “View state” context menu action and built-in search.

The Timeline tab shows a live view of all query runs, making it easier to visualize run times, compare sequencing, and quickly identify successful, failed, and active query runs.

We've also moved Environments, Releases, and History to the status bar for easier access. The status bar is only visible to users with edit permissions.

To access the Debug Tools beta, navigate to the Beta tab in your organization’s settings and turn on the Debug console and status bar toggle. Share your feedback with us by clicking on the Beta Feedback button in the top right corner! These updates are currently live on cloud and will be available on-prem in v2.98.

Dynamic Icons​

You can now configure icons dynamically! Anywhere in Retool where you can add an icon, like a prefix/suffix icon for Text Input components, you can now dynamically change it based on any Javascript expression. Type the new command /icon to pop up the new icon picker to choose from over 3,000 searchable icons with support for bold and outline styles.

These new icons and the ability to set dynamic icons are available for all cloud-hosted Retool instances and will be available in an upcoming on-premise release. Let us know if you have any feedback in the community forum.

Fixes and improvements​

• Fixed the "allow overflow" option on Table component columns
• Improved overflow for Table component cells with large contents
• Fixed the focus API for Date and Time components
• Fixed the Tags component to show more text when wrapping is turned off
• Improved the Tags component so that it can fit on a single line
• Fixed default labels for Select components
• Fixed the default workspace for permission groups
• Fixed a rendering issue on focus for Listbox and Multiselect Listbox components
• Fixed the authentication dropdown for REST resources in the query editor
• Added support for tel:, sms:, and webcal:// links in markdown
• Added support for forwarding cookies for HTTP requests inside custom authentication
• Fixed SCIM group deletion so that it will not affect default groups–"admin," "editor," "viewer," "All Users"(on-premise only)

Check out this guide to see the on-prem versions and their release notes. These fixes and improvements will be rolling out to on-prem customers in the next few weeks.

Switching between component types​

You can now easily switch the type of a component (e.g. Button →Link), and we’ll transfer over all applicable settings like label configuration, tooltips, and more! Let's say that you’ve set up a Number Input with a default value, min/max, label, and tooltip, and then you decide you actually want your users to be able to select their value via a Slider.

Previously, you’d have to drag out a new Slider component and manually copy over each of your settings one by one. Now, all you need to do is click on the three dots menu in the component inspector (right-hand panel) and click “switch component":

For most input components, you can now switch to a preset or other similar component type (for Number Input, that’s Slider, Percent, Currency, Rating, and Range Slider). Sometimes, we’ll prompt you for additional action when we can’t automatically convert all of your settings: like when switching from a Slider to a Range Slider, you’ll have to choose start and end values. There are so many different options to try out: like switching between different styles of Buttons (Button, Outline Button, and Link)!

We’re rolling out this new functionality to all users over the next week. Additionally, we’re working on fully overhauling additional components like Select and Multiselect, so you won’t see these options on those components just yet. Let us know how “Switch component” works for you, and any other components/presets you’d like to see at support@retool.com!

Fixes and improvements​

• Improved start time when running query
• Improved performance during drag-and-drop
• Fixed an edge case where multiple queries to the same resource would occasionally fail
• Added support for plain numbers in the border radius style editor (assumes px unit)
• Fixed file parsing for the new file input component types on Windows
• Added a new option to the Text Input component to show a character count
• Improved search in the component list
• Fixed a rare edge case where the preview button in editor mode would hang indefinitely
• Fixed GraphQL queries to exclude empty optional fields
• Added support for using self-signed certificates with MongoDB connection string

Check out this guide to see the on-prem versions and their release notes. These features and performance improvements will be rolling out to on-prem customers in the next few weeks.