9 new components–File Inputs, Buttons, Tags, Listbox and more!​

We’re rolling out 9 redesigned and rebuilt components, including fully overhauled, existing components (Button, File Button, Link) and brand new components (Tags, File Input, File Dropzone, Listbox, Multiselect Listbox).

Just like the input components we released a few weeks ago, these offer brand new configuration options, built-in and custom validation rules, and expanded style editor support. These components were also built with accessibility in mind.

Listbox and Multiselect Listbox​

Listbox and Multiselect Listbox

Listbox and Multiselect Listbox allow you to display a list of selectable item(s) to your end users. You can dynamically set the default selected item(s) and/or disabled item(s). There’s also built-in support for fuzzy search on the values or labels, all you have to do is set the search term (e.g. {{ textinput1.value }}).

There are plenty more settings you can configure, even down to the empty state when no options match your search term. Additional functionality includes: an optional Tooltip with support for GitHub flavored markdown, custom validation (e.g. min/max items, custom error messages), event handler support, and more!

Button, Outline Button, and Link​

Button, Outline Button, and Link

The refreshed Button component and new Outline Button component have lots of new functionality. For example, you can dynamically set the loading state (e.g. {{ query1.isFetching }} ) to show a loading animation and disable interactivity for your users while your query is running.

You can switch between a regular, Solid Button and an Outline Button directly in the “Style” section of the Inspector for either component–you’ll also find more advanced style editor support.

Lastly, we have a new Link component that supports additional configuration like prefix/suffix icons and an optional Tooltip. You can use the Link component with any event handler, like opening a webpage or another Retool application.

File Button, File Input, and File Dropzone​

File Button, File Input, and File Dropzone

We now have 2 new ways for your end users to browse and upload files–File Dropzone and File Input–and we’ve rebuilt and redesigned File Button. All of these now support single or multiple file uploads, and have 3 consistent properties to interact with and reference elsewhere in your app: (1) value: an array of base64 encoded strings for the selected file(s) (2) files: an array of file metadata, like when it was last modified, the file name, type, and size (3) parsedValue: an array of JS objects or arrays that Retool automatically parses from uploaded files (Excel, JSON, CSV, TSV and text files are supported).

They also support custom validation (e.g. min/max file size, custom error messages), prefix/suffix text and icons, an optional Tooltip, and so much more functionality.

Tags​

Tags

Lastly, we’ve also added a new Tags component, a presentational component typically used in apps for things like categorization. It now has dynamic and automatic height: growing as you add additional tags as well as support for an optional Tooltip.

These components won’t be the last–we’re continuing to expand our component library and add more functionality and customizability to those you’re using today. Drop us a note with any feedback (or requests for new components!) at support@retool.com.

Fixes and improvements​

• Added a button to the Users page for admins to download their user list as a CSV
• Fixed previewing apps with multiple versions so that we now support previewing any published release, as well as the current working version
• Added appName to retoolContext so you can dynamically access the name of the current app (e.g. {{retoolContext.appName}})
• Added the ability to copy table names from the database schema browser in the editor
• Added a submit event to the Notes component
• Added the ability to set custom content-type on Google Cloud Storage upload query
• Simplified the History modal further by removing an unneeded entry type
• Fixed cases where drag-and-drop could get blocked by iframes on the canvas
• Fixed unexpected layout shifts on some apps with multiple Text components
• Improved performance of apps with many dynamic height components
• Improved the query selection dropdown for event handlers to include the name of the resource for a given query
• Improved performance on initial render of the canvas and Container components
• Added a new option to Tabbed Container to preserve UI state across hidden tabs
• Improved the dialog when deleting multiple components to show child components that will also be deleted
• Added an option to customize the 'no rows found' text when a Table component is empty
• Fixed overflow issues with long before/after text in Text, Number, and Password inputs

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.

Performance​

Switching between edit and preview is now much snappier! When building an app in Retool, you’ll often jump back and forth between editing your app and previewing what it looks like for your end users. We’ve just shipped some big performance improvements to the path:

Performance is always top of mind for us. In an effort to make every app load faster, we’ve leveraged code splitting to reduce the size of our main Components bundle by 63%. Now, your apps only pay a performance cost for the components you use. We have several engineers focused on burning down a list of similar improvements to app performance–drop us a note at support@retool.com if there are parts of Retool you want us to focus on!

Fixes and improvements​

• Added a keyboard shortcut ⌘ + U (CTRL + U) to toggle the right panel (Inspector) open/close
• Added a keyboard shortcut ⌘ + . (CTRL + .) to toggle open/close whichever panels you’re currently using
• Fixed localStorage.setValue so that it will no longer trigger queries that depend on other keys in local storage
• Added the ability to write a table name dynamically in Snowflake GUI mode queries
• Improved performance of evaluating dependencies (e.g. component/query references) in applications
• Enabled search by component type in the Event Handlers component dropdown
• Improved REST API queries to respect the DBCONNECTOR_QUERY_TIMEOUT_MS setting
• Improved the pop out code editor to maintain the cursor position of its in-line editor
• Protected Apps (Enterprise plan)
  • Added additional logging for syncing single pages
  • Fixed incorrect links to pages in the releases and history modal

Event handlers: run script​

You can now run JavaScript with side effects directly inside of an event handler without having to create and manage a separate JavaScript Query.

Previously, if you wanted to run JavaScript with side effects—like triggering a query query1.trigger() or downloading data utils.downloadFile(…)—you had to create a new JavaScript query, write your code, save your query, and wire up a “Trigger query” event handler.

To streamline this common workflow, you can now write custom JavaScript code directly in your event handler with the new “Run script” action. You can utilize Retool’s full JavaScript API that allows you to control components (e.g. modal.open(), table.selectRow(index), input.setValue(…)), show notifications utils.showNotification(…), set temporary state state.setValue(…), set key/value pairs in local storage localStorage.setValue(…), and more. Check out this guide to learn more about what you can do with JavaScript in Retool.

Additional API methods you’d like to see us add? Any other feedback while working with “Run script” or JavaScript queries? Drop us a note at support@retool.com.

Fixes and improvements​

• Added a Divider component to create a horizontal rule
• Fixed the keyboard shortcut ⌘+C (CTRL+C) to copy text from an input component while in editor mode
• Added support for Snowflake OAuth at the user level
• Added new tooltips for components that render error messages in context, replacing the generic “has an error in property” warning
• Fixed the "run query automatically when inputs change" setting so that it’s not overwritten for imported queries
• Added the ability to automatically paginate Stripe queries
• Fixed a flash of content rendering issue in the inspector when selecting multiple components
• Fixed a rendering issue with the user menu for embedded apps
• Removed redundant fields in the app YAML serialization
• Added 5+ different design polish improvements to the Resources page

Protected apps (Enterprise only)

• Improved publishing and unpublishing releases
• Fixed an edge case when protecting an already protected app

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 canvas frames and a Navigation component​

We’ve removed the Retool header from end user mode, giving you full control over your app’s presentation. User-specific actions have moved to a new location, and we’ve introduced a new sticky header frame, along with a Navigation component for building your own custom headers.

Editor mode

Floating user menu​

In end user mode, Retool-specific actions have been moved to the floating menu in the lower left corner of your apps. Here your users can navigate to different Retool apps, edit their user settings, logout, and more.

If you are viewing an app where you have edit permissions, you’ll still see a Retool header above your app with editor-specific actions. End users will not see this.

Header frame​

The canvas area is now split into two frames: Header and Main. Put any component into the Header — including the new Navigation component — and your app will have a sticky header.

Navigation component​

The new Navigation component allows you to configure a list of menu items and submenus. Each item can open another app, link to a URL, run a query, and more. You can also add a logo, control alignment of the menu items, and style it all via the Style Editor. With modules, you can even reuse your Navigation across multiple apps.

Configuring the Navigation component

The Header frame and Navigation component will be rolling out in one of the next stable releases for on-prem customers, but is available today for all cloud customers.

Fixes and improvements​

• Improved performance of component interactions by 2x for applications with a large number of components
• Fixed arrow keys to use the new row height when moving a component up or down
• Fixed the order of menu items in the Navigation component after using the inspector
• Polished design in various places in the editor
• Improved initial render time for apps with many input components
• Added the ability to change your first and last name in Account Settings
• Fixed event handlers for generated Forms
• Fixed S3 file downloads of non-binary type files
• Added the ability to input Redis commands in raw format, similar to redis-cli
• Fixed editor keyboard shortcuts when certain input components have focus
• Added the ability for editors to set a description for module inputs
• Fixed Form's "clear after submission" option with new input components
• Fixed spacing around components inside of a ListView
• Added additional user metadata to the Releases and History modal
• Added a warning when additional configuration is needed to connect a Google Sheets resource

Check out this guide to see the on-prem versions and their release notes.

New input components​

We’re rolling out 15+ input components, redesigned and rebuilt from the ground up. These include a full overhaul of components like Text Input and Checkbox, along with completely new inputs like Segmented Control and Range Slider.

Each component offers brand new configuration options, built-in and custom validation rules, and expanded style editor support. We’ve also built these components with accessibility in mind, with features like focus states, full keyboard and screen reader support, and automatic text color selection.

Along with these new components, the grid is also getting major upgrade: we’ve introduced a significantly reduced row height that allows for greater data density and more fine-grained layout control. The height of all new components is automatic and dynamic: growing as you add options to a Radio Group or type in a Text Area, and enabling validation errors to be rendered inline.

These components support their original functionality along with new features like:

• Text Input

  • Simplified inspector with many options split out into separate components
  • Configurable prefix and suffix text or icons, autofill behavior, and more

• **Text Area **(formerly part of Text Input)

  • Controls for number of lines and auto-grow as the user types
  • Optional character count display along with min/max validation

• **Number Input **(formerly part of Text Input)

  • Automatic formatting based on the locale in your browser settings
  • Support for any 3-letter currency code, with the ability to override default display
  • Optional increment/decrement steppers, alignment options, and more

• Inputs preconfigured to get you started more quickly

  • Email and URL configurations of Text Input
  • Currency and Percent configurations of Number Input

• Select inputs

  • Segmented Control
  • Radio Group
  • Checkbox and Checkbox Group
  • Switch (formerly Toggle) and Switch Group

• Password Input

  • Optional show/hide password toggle
  • Regex validation and autofill types

• Sliders

  • Slider for selecting single value
  • Range Slider for selecting a start and end value
  • Rating, with support for 3 different icon sets — stars, hearts, and smileys

• In addition, all new inputs support:

  • APIs to set, clear, and validate an input's value via an Event Handler or JS query

  • Tooltips with GitHub Flavored Markdown and styles based on the app theme

  • Control over label position, alignment, and wrapping

  • Validation rules including custom logic and inline error messages

You can find all of these components in our new compact and reorganized component list that features improved search. Old versions of these inputs have been deprecated, but existing instances will not be affected. If you want to continue using them, turn on the "Deprecated components" switch on the Beta settings page to see the “Deprecated” section in the components list.

Drop us a note with any feedback (or requests for new components!) at support@retool.com.

Utilities​

Whether you’re prototyping a new idea or just want to get a CRUD app up and running, we now have 20+ developer utilities to help you build faster. Starting just with a CSV, you can generate a REST API on top of your data, write your data back to PostgresSQL or MySQL, or even autogenerate a CRUD app. We also have plenty of public data sets to get you started.

Check out the full set of utilities and start building today. Any others you’d like to see? Drop us a note at support@retool.com!

Fixes and improvements​

• Added a 'Submit feedback' option to the help menu to send product feedback directly to the Retool engineering team
• Added a keyboard shortcut ⌘+J (CTRL+J) to show/hide the query editor (bottom panel)
• Fixed the style editor for Modal components
• Fixed Date/Time components min and max to use UTC time when 'display in local timezone' is not selected
• Added back the ability to delete and duplicate transformers and analytics from the query editor sidebar
• Fixed loading spinners that weren’t visible for some components
• Fixed styling for URL parameters in REST queries
• Fixed self-hosted trials that were expiring at the incorrect date
• Added a OneSignal integration
• Added support for current_user.metadata when using custom HTTP Auth with REST
• Improved search in the components list

Enterprise plan

• Added an environment variable–DISABLE_INTERCOM–to swap email support for default chat support
• Added a button in the Advanced settings tab to refresh your license key
• Protected apps
  • Fixed the 'protect page' modal to properly dismiss on branches other than 'main’
  • Improved autogenerated PR descriptions
  • Added entries in the History modal for resetting branches and merging pull requests

Check out this guide to see the on-prem versions and their release notes.

Undo/redo​

We’ve completely overhauled the undo/redo system in the Retool editor. You can now reliably undo and redo nearly any action, including:

• Creating, renaming, or deleting components and queries
• Editing queries or component properties
• Any layout operation (including copy and paste)

History​

The History modal lets you view changes and revert apps to a prior state. Until now, the list included many entries (e.g. “minor changes”) that made it difficult to pinpoint exactly what had changed. We’ve added human-readable descriptions for every action and consolidated entries, making it easier than ever to identify your changes and jump back to the right moment.

Fixes and improvements​

• Improved load times for our components
• Fixed S3 download queries that would fail for certain file types
• Fixed an inconsistent default sticky header setting
• Fixed the utils.downloadPage API
• Fixed Snowflake queries to correctly estimate their size
• Improved error messages for bulk user invites
• Added the ability to ⌘+click (CTRL+click) on a query, component, or state name inside {{ }} to see its value in the model browser
• Improved permissions for resource creation
• Fixed queries triggered by a Navigation component in a Module

Enterprise plan

• Added a configuration option to disable public pages
• Added a new page–Environment Variables–in Settings for debugging (Beta)
• Protected apps
  • Added the ability to protect and unprotect apps from the actions menu
  • Fixed the commit changes modal to display changes since the last commit, instead of against the main branch
  • Improved autogenerated PR descriptions

Check out this guide to see the on-prem versions and their release notes.

Performance​

We recently fixed a long term issue that was negatively impacting Retool performance, caused by inefficient transmission of data between our parent application window and our JavaScript evaluation sandbox. We’re now seeing up to 10x faster query result speeds for many Retool apps, especially those with significant data fetching and {{}} usage.

To complement this improvement, we’ve also started to expose some performance metadata directly in the query editor. Hover over query’s runtime in the left panel of the query editor and you’ll now see a performance breakdown for that query. You can inspect each step from when a query is triggered to when the data is processed on the client—making it much easier to debug slow queries.

The performance tooltip will be rolling out to users over the next week. Drop a note to support@retool.com and let us know how it’s working for you.

Self-hosted Retool​

If you’re working with sensitive data or in a highly regulated industry, your internal tools almost certainly need to run on your own infra. For developers in this camp, we’ve just introduced much easier paths to spin up self-hosted Retool: 1-click deployment to AWS, a k8s install script, and deployment as a Docker container to any service (Heroku, Render, etc.). Get started now and build Retool apps on your own infrastructure in less than 10 minutes.

Fixes and improvements​

• Fixed the app “Preview” button to wait for all changes to save before switching to preview mode
• Fixed the “allowed inputs” validation for certain types of the TextInput component (e.g. percentage, number, currency)
• Added a toggle on custom components to enable the allow-modals sandbox option
• Fixed the Scanner component's image preview on mobile
• Fixed failure conditions in a query's “Response” tab so that they’re no longer shown when the setting is toggled off
• Upgraded the Presto integration JDBC driver to v350
• Added support to the Presto integration for the source connection parameter
• Removed license key checking for airgapped deployments
• Added support for audit log entries when Resources get created, updated, or deleted (Pro plan and above)

Enterprise Plan​

We’ve been shipping improvements to Protected Apps over the past few weeks and all of those changes are now live on the latest stable build, 2.69.17–check out this guide to upgrade your Retool instance.

More room to write code​

Let’s face it, writing more than a few lines of code inside of Retool isn’t usually a great experience: code inputs are small, there aren’t any line numbers, and the text wrapping can be aggressive. This week, we’re excited to ship a new movable, resizable editor window that can be popped out from any code input. Whether you’re writing a custom component, editing JSON for a Chart component, or writing a long SQL query—it’s finally much nicer to write multiline code in Retool.

We’re working to bring even more code editing improvements to Retool, so drop us a note at support@retool.com and let us know what you’d like to see next.

Fixes and improvements​

• Added 20+ app edit descriptions for the history tab in "Releases and history"
• Added the ability to automatically format JS queries
• Fixed the distanceMatrix endpoint for the Google Maps integration
• Added the ability to set a custom content-type on a S3 upload query
• Added a permission group setting to grant non-admins access to the audit log
• Fixed undo/redo when renaming components
• Added a setting to restrict which user groups can run a query in a query's "Advanced" tab
• Added the ability to browse MongoDB collection schemas in the query editor
• Added more defaults to MongoDB fields in the query editor
• Added support for the insertMany action type for MongoDB queries
• Fixed the button column type for the Table component to correctly evaluate references to other components and queries when setting the "disabled" field
• Added text color settings to the Rich Text Editor component
• Added support for the style attribute in Text component content
• Fixed a rare edge case with custom auth flows
• Fixed alignment of profile photos in permissions settings

Enterprise plan​

• Added a button in the “Advanced” tab to verify GitHub repo setup for protected apps
• Added the ability to set a name when creating protected branches
• Added links to GitHub commits in “Releases and history” for protected apps
• Added the ability to turn on protected apps from the settings page
• Added support for setting the client ID and secret for JIRA resources

Check out this guide to see the on-prem versions and their release notes.

Code editing improvements​

Great code editing ergonomics are near and dear to our hearts at Retool. We’ve recently added a few improvements that make writing JavaScript in Retool just a little bit smoother.

Inline code evaluation previews now display the type of the returned value. This is handy for quick reference when working with properties that can accept multiple types:

Retool now also supports and correctly lints ES2020 features, like the nullish coalescing operator and optional chaining. You can replace clunky expressions like {{ (localStorage.values||{}).userStatus ? localStorage.values.userStatus : 'Unavailable' }} with a simple {{ localStorage.values.userStatus ?? 'Unavailable' }}.

Lastly, we’ve improved Retool’s autocomplete to properly infer JavaScript types and offer the available methods and properties, even when chained. If using inline JSDoc comments, the defined parameters will also show up the autocomplete menus.

Fixes and improvements​

• Fixed a memory leak issue causing unneeded query results to be retained
• Added the returned value type to inline code evaluation previews
• Added ES2020 support to Retool’s code linter
• Removed notifications from appearing on every copy and paste operation
• Fixed Excel files returned from REST API queries to be correctly parsed as base64Binary
• Added link on the Billing page for admins to view past invoices and payment methods

Enterprise Plan​

• Moved protected apps actions into separate menu in the editor header

One-click reusable queries, right from your app​

When you’re writing a query in an app, you may realize that it would be useful in many apps. Rather than copy/pasting your work, you can now extract your resource query to the Query Library and import your new, reusable query wherever you need it! We’ll automatically convert JS expressions to query variables, so that each app can configure its own inputs. To learn more about reusing queries with the Query Library, check out the docs.

Fixes and improvements​

• Added the ability to reset all temporary state variables to their initial value
• Improved performance of Omnibox ⌘ + K (or_ CTRL + K_)
• Included Query Library queries in Omnibox ⌘ + K (or CTRL + K)
• Fixed the Jira query editor to work correctly with POST requests
• Fixed the query editor so that its height persists throughout a session
• Fixed the canvas background color for themes in the editor
• Added support for Vim mode in code editors ⌘ + ⌥ + V (or CTRL + ALT + V)
• Fixed initial value on app load for the date/time inputs
• Fixed the function selection for Lambda queries
• Fixed S3 read queries for binary/octet-stream content-type payloads ** ---**

Enterprise plan

• Added an environment variable to disable username/password login (DISABLE_USER_PASS_LOGIN)

Check out this guide to see the on-prem versions and their release notes.