Changelog

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.

Event handlers for queries​

When your query succeeds or fails, you can now trigger other queries, control components, call additional APIs, and more–all using event handlers!

New event handlers for queries

For most Retool apps you've built in the past, you've probably set up the "After this query runs" triggers. For example, let's say you have a query, selectUsers, populating a Table component; if you insert a new record to the users table, you probably want to re-run that selectUsers query so that your Table is up to date:

Previous query triggers

However, anything more complex–showing a notification, controlling components (e.g. opening a modal)–previously required creating and wiring up a JavaScript query, and writing custom code.

A few months ago, we rolled out new event handlers to all of your components. We're now replacing the old query triggers, and bringing those powerful event handlers to your queries! You can configure any number of event handlers to run when your query succeeds or fails (e.g. on success, show a notification to your end user and open a modal to prompt a new workflow).

Anything you can do with Retool’s JS API (e.g. query1.trigger(), modal.open(), utils.showNotification(...)) you can do with event handlers. If you do have a need to write some custom JavaScript, it's even easier than before. You can just use the "run script" event handler and write your code, without creating and wiring up a new query.

As you build with these new event handlers on your queries, we want to hear from you! Are there more kinds of event handlers you'd like to see us add? Any feedback? Drop us a note at support@retool.com.

Fixes and improvements​

• Updated default component IDs to use camelCase (e.g., checkboxGroup1)
• Added advanced editor features to the Text Area component, including autocomplete, autocapitalization, and spell check
• Added support for exploring queries and transformers in the model browser (left-hand panel) while actively editing a different query or transformer
• Added a change event handler to BoundingBox component
• Added a Front integration
• Fixed Folders and Apps so that they're sorted consistently
• Fixed an edge case with query trigger migrations for the new query event handlers
• Fixed an edge case where the "Go to app" event handler wouldn't successfully navigate

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

New

• Added support for custom SSL options in the** gRPC** integration

• Improved how we handle errors in the OpenAPI integration

• Added option to configure Table components to hide the refresh button in its footer.

• Added support for frozen columns in the **Table **component

Protected Applications (Beta)

• Added branch management interface to the editor
• Fixed issue where renaming or moving apps would not sync to git repos
• Fixed issue opening pull requests in GitHub Enterprise

Layout (beta)

• Holding CMD will block component interaction and allow you drag and drop components without having to worry about triggering side effects

• Selecting a hidden components will make the component visible automatically. Performance improvements

• Apps with larger numbers of concurrent queries (5+) should see significant improvements in the responsiveness of the application when the queries are running.

Modules beta

• Modules will inherit the permissions sets of their host app. This means that end users will be able view modules used in apps even if they have not been granted explicit view access to those modules.
• Importing an app with modules will also automatically recreate missing modules that are needed by that app.

Bugfixes

• Fixed issue where exporting apps on a non-main branch in the protected application workflow would still export the main branch

• Fixed an issue where OAuth2 flows that had “skip Retool consent screen” turned on was incorrectly interpolating variables

• Fixed issue where the id token was not being refreshed in the OAuth2 refresh

• Fixed issue where the Github API Base URL was not visible in the protected apps settings

• Fixed issue where importing apps would stop working

• Fixed issue where the Rich Text Editor would be blurred unexpectedly

• Fixed issue where it was not possible to disable beta experiments

We’ve added an “Alert” component to Retool! Alert components let you provide and highlight feedback to your users. You might hide and show this component based on the response of a query. You can dynamically set the type of alert you show to your users (ex: display a success or error based on the return value of a query). You can also include a button in this component that can take any action a Button component can, such as running a query, or exporting data.

These updates are included in v2.64.40 or higher.​

Debug queries in browser DevTools​

No longer do you have to console.log everything you can to debug queries. You can now use your browser’s developer tools debugger with Javascript Queries and Transformers! Check out the docs for more details.

For example, to do this in Chrome:

1. Run the query 2. Open the Sources tab in Chrome DevTools and navigate to a file (Cmd/Ctrl-P) with the same name as the query 3. You should now be able to inspect variables, set breakpoints, etc.

Barcode scanner​

You can now scan barcodes in Retool using the Barcode scanner component. The component uses the camera of the device to scan the barcode and returns the code number.

Cascading query deletion​

Often deleting a query left your app in a broken state. To fix this, we've changed query deletion to cascade: deleting a query will delete all the references to it. We've added a confirmation modal that explicitly describes what will happen. One note: it's tricky to delete query references in JS expressions, so we leave those as-is and provide references in the confirmation modal.

Preview specific app versions​

You can now jump from the editor to previewing the latest or the live version of the app, without having to open the Releases modal.

More powerful components​

• Added support for LIKE operations in the Query builder component
• You can now allow popups in the iFrame component
• You can now reload the iFrame component from a JS query
• The Form generator now allows for fields to be drag-and-dropped reordered. You can also specify dropdowns as an input type.
• Fixed an issue where opening another Retool app via the Button component sent you to the home page instead
• Added a lastSubmittedAt field to Text Input components
• Added option to not clear the Dropdown component when clicked
• Added the ability to remove borders in the ListView component
• MultiSelect components no longer expand past the allotted space when full
• Added a button to clear Text Input components
• Chart components with duplicate x-axis values now display correctly

Table improvements​

• Long strings in cells no longer crash the table
• Dropdown type columns now map a value of 0 correctly to its label
• Numeric columns now align right by default
• Queries triggered by Button type columns can now access the triggeredById and index fields to see which table and row triggered them

Editor power and quality of life​

• The releases modal now shows email addresses
• Query editor now scrolls correctly to the bottom of the query list when a query is created
• Deleting a query now also deletes other properties that reference that query
• Queries now have a queryRunTime field that contains how long the query took to run
• Added toggle to always show a hidden component in editor mode
• Query success toasts now display the query name in editor mode
• You can now add metadata to gRPC resource requests

Bug fixes​

• The Releases modal now displays the correct page (was off by 1)
• Accessing currentRow in Button type columns now works as expected
• List View components using row keys no longer crash
• New queries no longer incorrectly display "Cannot find property 'get' of undefined"
• Forms no longer crash when optional fields require validation
• Text Input components now validate numbers with regex correctly
• Text Input components now invalidate floats when an integer was required
• Fixed a bug where connecting a Google sheets resource would occasionally fail
• Added clarifications to GCS resources that failed silently on upload
• Creating a folder named "root" no longer breaks your home page
• The Resend invite button after inviting a user now works as expected
• Fixed a bug that stopped you publishing the latest version of an app
• The errors field is now correctly cleared after a query succeeds
• Custom auth steps when setting up a REST/GraphQL resource now accurately show what variables you have access to
• Queries no longer have isFetching set to true after completion
• Fixed a bug where switching apps didn't stop queries on the previous page from running
• Renaming a page now displays a reason if it failed
• Copy pasting a Container component now also correctly copies its children
• Marking a Text Input component as not required in a Form component now works as expected
• Mappers in Chart components are now recalculated correctly when datasets are toggled