Skip to main content

Changelog

Updates, changes, and improvements at Retool.

Fixes and improvements

  • Changed Container's "hoist loading state" so that it only applies to the current view
  • Added a new JS API, setCurrentViewIndex,** **to Containers to set the current view of the Container by index
  • Added support for toggling showBody for Containers and Forms with fixed height
  • Fixed app document titles so that they're dynamically evaluated
  • Fixed syntax underlines in code inputs so that they are correctly positioned against the invalid tokens
  • Improved automatic labels in the Form generator (ex: "imageUrl" -> "Image URL")
  • Renamed the Table component's "Default selected row" option to "Default row"
  • Expanded the number of input types to choose from in the Form generator when the type can't be inferred
  • Changed the Table component to now show the "Save changes" event handler first
  • Fixed a rendering issue when clicking the Toggle Button component
  • Fixed text centering when Listbox components wrap to multiple lines

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.

20+ new column types for the Table component

We've brought the power and flexibility of our canvas components–like the new Rating component or the rebuilt Date Time component–to our Table with over 20 new column types to choose from.

Number, Currency, Percent, Rating

These column types provide new and expanded functionality to display numeric values in the Table component. Like the Number Input component on the canvas, you can control decimal places or support any 3-letter currency code. You can also display a star rating of your numeric values with the Rating type.

**User Email **

Display formatted emails using the new User Email column type. If the email address has an associated Retool account, you'll get better formatting out of the box: including the email, the user's profile picture (if applicable, otherwise their initials), and full name.

Multiline, Markdown, HTML

Display multiline text easily with the new Multiline column, or take advantage of full GitHub Flavored Markdown support in the Markdown column. Use the HTML column type to render HTML in your table cells.

Date, Time, Date Time

Display dates and times, and automatically handle time zone in the Table with "manage time zone." "Display" time zone controls how time is displayed to your users, while "Value" time zone controls how it’s encoded, so you can do things like have the display time zone follow your user's local browser, but encode the time in UTC! The new Date, Time, and Date Time columns also support an expanded list of formatting strings.

Image Link, Image Upload

Display images from a URL or allow your users to upload an image directly with the Image Link and Image Upload column types.

Single Tag, Multiple Tag (coming soon!) ---****

The new Single Tag column type replaces the existing Dropdown column type: when your user edits the cell like above, they'll see the familiar dropdown. You can configure the data source that populates the list of options in the dropdown: it defaults to the unique column values, but you can also choose a query, transformer, or just JS. When your user selects an option, it will be rendered as a tag! Tag colors can be automatic or configured with JS. In the next few weeks we'll be rolling out the Multiple Tag column type, so your users can similarly select multiple options from a Multiselect dropdown.

Additionally, check out the new JSON column type (instead of Object), the Link type, and the rebuilt Modal and Button types.

Usability improvements

****

We've added better overflow handling so that truncated cells will expand on hover, and multiline cells will also grow on hover to show more of their content. The editing experience also got a revamp: there's a new indicator for edited cells in the top right corner of the cell, and we've made it easier to directly edit Boolean and Rating cells.

What's next

In the next few weeks, we'll be rolling out keyboard navigation (e.g. use arrow keys to navigate between cells, type to start editing, etc.). We'll also be adding an upgrade path so that you can migrate your existing column types to the new ones, and get access to all of the expanded keyboard navigation!

If you have any questions or feedback on these new column types, head to our community forum.

Fixes and Improvements

  • Changed Date, Time, and Date Time column types for the Table component to be left aligned by default

  • Fixed Containers so that their children components properly render in a List View

  • Fixed the Multiselect component's read only setting

  • Added support for custom root certificates for the Postgres resource

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.

This week, we've introduced one of our most commonly requested components, the Dropdown Button, so that you can easily display a list of actions for your users to choose from. Our new options list editor allows you to configure a short list of actions for your Dropdown Button in Manual mode, or a dynamically generated list (i.e. from a query or transformer) in Mapped mode.

In Manual mode, set additional properties like label and caption, as well as event handlers for each option. In the below example, when "Review" is clicked both the reviewOffer_ query and the **_notifyReview** query will be triggered:

In Mapped mode, you can set all of your Dropdown Button's properties using the special keyword item_ or index **_i **to reference each element in the dynamic list of options. When you're configuring event handlers, item_ _and **i** will also be in scope, so you can do things like run a specific query when a given option is selected:

Split button

We also introduced another component similar to Dropdown Button–Split Button! It allows your users to see the primary action first, but drop into additional actions if needed. Set it up just like you would the Dropdown Button, with all the same Manual/Mapped mode functionality, including event handlers:

As we continue to add to our component library, we want to hear from you–share any feedback on these new components, or other components you'd like to see in our community forum. If you have more questions about how these components work, check out the component directory for details about Dropdown Button and Split Button.

Fixes and improvements

  • Added clearValue and setValue JS API methods to the Cascader component
  • Added a keyboard shortcut– CMD + / (CTRL + /)–to toggle all components visible. It will also force "Maintain space when hidden" components to be fully visible.
  • Fixed the Confetti event handler to not block component state changes (e.g. Form submitting)
  • Added more granular control for the styles of the Steps component
  • Improved scroll behavior of the Tabs and Steps components when their widths are small
  • Fixed Table rows so that when scrolling, they will now resize properly between compact and standard height settings
  • Fixed nested Form components so that they submit correctly
  • Fixed Forms as they were incorrectly getting stuck in a submitting state after cancelling a query
  • Renamed the Toggle List component to Feature Flags since it's configured for feature flags by default
  • Fixed Form fields from validating before a user has provided any input
  • Fixed vertical centering of fallback text in Avatar and Avatar Group components
  • Fixed an erroneous error message when dragging a JSON Editor component out of a Container
  • Fixed disabled Radio and Segmented Control options so that they no longer appear selected
  • Improved error messages for code inputs where the value is optional
  • Fixed Button and Toggle Button components so that they can't overflow the component bounding box (blue box in editor mode)

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.

Containers

This week we’re highlighting some major improvements to containers including support for multiple views, collapsible containers, and new presets for multistep flows and tabs.

Multiview

Multiview makes it easy to swap between different groups of components within a single Container. Add any number of views via the Inspector, each with a grid to drag components onto. The current view can be controlled with event handlers, the setView API, or conditional logic in the default view settings.

You can enable multiview on any Container, but we’re also launching presets for common multiview patterns:

Tabbed Container

The redesigned Tabbed Container comes pre-configured with a Tabs component linked to a multiview Container. Tabs can now be moved and customized independently, and individual tabs can be disabled or hidden.****

---Stepped Container

The brand new Stepped Container provides a quick and easy way to build beautiful multi-step flows. Like Tabbed, it comes pre-configured with the new Steps component linked to a multiview Container, along with next and previous Buttons.****

****

Collapsible Container

Container and Form now include a “Show body” setting, along with new APIs to show/hide the header, body, and footer. Get started quickly with the new Collapsible Container, which includes a Toggle Button wired up to expand and collapse the body of its Container.

To learn more about all of these new features, check out our Containers docs. And if you have any feedback, we’d love to hear from you in our community forum.

Fixes and improvements

  • Improved styling of disabled components to improve readability
  • Fixed keyboard navigation for disabled components
  • Added more information, like the type of the value, in the SQL editor when SQL is evaluated
  • Fixed File Dropzone, File Button, and File Input in List Views
  • Added an option to Table components to "Disable user selection." If enabled, selection can only happen via the editor inspector or JS APIs. Click and arrow keys are ignored.
  • Improved List View rendering performance
  • Fixed the columnMappers property on the Table component to update when data changes
  • Added the ability to hover over the extra indicator (e.g. "+10") for the Tags component to see the other tags
  • (enterprise only) Fixed the keyboard shortcut_ CMD+SHIFT+P_ (CTRL+ SHIFT + P) so that it doesn't drop you into a non-editable protected branch

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.

Options list editor

Many components present a list of options, like the dropdown in a Select or the radio buttons in a Radio Group; we’ve made it much easier to build this kind of UI with our new options list editor. We’ve also added new settings for those options, like captions and tooltips.

These types of components now have a new Options section, with two modes: Manual and Mapped. If you have a short list of options (e.g. Cherry, Apple, Orange, Kiwi), quickly configure your component in Manual mode by adding them to the reorderable list:

Sometimes you’ll need to generate a list of options from a dynamic data source like a query or transformer, or from a large array or JS expression. Switch into Mapped mode to quickly set up these dynamic options lists:

New settings

In both Manual and Mapped mode, you can configure settings (caption, tooltip, hidden, disabled) for each item in your list of options.

In Manual mode, just click on an option and enter values for each setting (e.g. “caption ABC”, {{ checkbox1.value }}):

Mapped mode works similar to the .map method on an array. You have access to a special keyword, item, which will allow you to map each item in your data source to these settings you’ve configured:

The new options list editor is much more powerful–dig into our docs to learn more. We’re also working on supporting more settings, like images and colors for options in a Select dropdown. Let us know in our community forum if you have any feedback or ideas for other settings!

Theme editor

We rebuilt our theme editor, which allows you to create themes that control the look and feel of applications across your organization. Under your organization settings, you’ll find Themes, where you can create new themes and modify existing ones.

The new editor includes improved descriptions of all the style properties and a revamped, live-updating preview–so you can see how your color selections will impact your apps 🎨. We also introduced several new settings, like status colors. You can also now configure text colors: components will automatically use the most readable option of the light and dark colors you choose!

Themes are available on Business or Enterprise plans. We’ll soon be adding even more properties–so be sure to drop us any feedback in the community forum.

Fixes and improvements

  • Simplified the “query success” setting in the query editor
  • Improved autocomplete for Form and Text components

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.

New Component Directory

Our new component directory (retool.com/components) allows you to quickly browse or search through all of our components, see examples of different configurations in action, and dive into expanded API docs for component properties, methods, and events.

Each component has multiple real-world examples to explore different functionality, from labels and captions to validation and styles. Each example also includes the corresponding settings and values if you want to try them out in your own app:

As you check out the new component docs, we'd love to hear any feedback from you in our community forum.

Fixes and improvements

  • Added a default value option for the Toggle Link component
  • Improved the ordering of the Table component inspector fields
  • Improved the responsiveness of code editors
  • Fixed the grid visibility toggle–⌘+Shift+G (Ctrl +Shift+G)–so that it persists across sessions
  • Fixed a layout issue for containers in edit mode when using Safari
  • Improved the resources dropdown in the query editor so that you can now also search by resource type
  • Added the "not equal" and "not in" operators to the Firestore query editor
  • Added a new keyword currentColumn that editors can use when building with the Table component
  • Fixed the ability to reorder rows for the Key Value component
  • Added the ability to configure whether Markdown links open in a new tab via the app settings menu
  • Fixed Snowflake queries using OAuth so that they properly prompt for authentication

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.

Fixes and improvements

  • Fixed code evaluation to properly handle false values with newlines
  • Fixed the styling for empty Table components
  • Improved the dropdown for selecting column types in a Table component–popular types now appear first
  • Improved error messages when a resource type isn't supported in the form generator
  • Improved error messages for the Auth Login integration component
  • Fixed an issue where we were showing a hardcoded query timeout in edit mode, instead of DBCONNECTOR_QUERY_TIMEOUT_MS
  • [on-prem only] Fixed OAuth auto-refresh to work with fields using _RETOOL_EXPOSED__ variables

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.

New Table style options

We now have 15 style options so that you can fully customize the look of your table, and we’ve also refreshed the default styles. In the “Style” section of the Table component inspector, there’s plenty more you can do now, like:

  • Configure row color dynamically with any JavaScript condition (e.g. {{ currentRow.sales > 100 ? ‘green’ : ‘red’ }}), rather than setting background colors on each column.
  • Control column border visibility–we’ve updated default styles to remove column borders and reduce visual noise, but their visibility is configurable. (For backwards compatibility, Table components created before this change will have borders on by default.)
  • Quickly set up zebra striping by choosing a color for the “Alternate row background” style.
  • Control header, toolbar, and cell styles with more fine-grained options for text, background, and accent colors. We’ve also revamped our** column sorting and edited cell indicators** and made their styling configurable.

As you style your tables, let us know if you have any feedback or feature requests in our community forum.

Fixes and improvements

  • Added support for upgrading deprecated Multiselect, Select, and Text components to their new version
  • Added support for label captions on all input components
  • Added autocomplete for user-defined properties with underscores (e.g. {{ currentRow._id }})
  • Fixed dragging and dropping components above Table components
  • Added support for specs served from http urls to the OpenAPI integration
  • Fixed the debounce/throttle dropdown in the event handler menu
  • Fixed the alignment of the Table component's column visibility icons in Safari

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.

New Table columns inspector

We’re making a ton of improvements to our Table component! First up, the recent changes to our columns inspector:

  • The column list is more compact than before, with better drag and drop so you can easily reorder your columns. Additionally, you can now see all of your column types at a glance.
  • To change whether or not a column is editable, you can now do so directly from the column list—instead of having to manually open each column one by one.
  • The settings for each individual column have also been reorganized, making it easier to find the settings you need and giving you more room to write code.

As we continue to make more changes to the Table component, let us know if you have any feedback or new feature requests in our community forum.

Fixes and improvements

  • Introduced accent color styling for Table component cells
  • Introduced vertical column borders as a setting in the Styles section for the Table component, and removed them by default on new Tables
  • Introduced new display behavior for tables with editable columns. If the majority of columns in a Table are view-only, we highlight editable columns with a pencil icon. If the majority of columns are editable, we highlight view-only columns with a lock icon.
  • Added new style editor options to the Button Group component
  • Improved performance of the editor when interacting with input components
  • Fixed autocomplete in event handler code editors
  • Fixed Select and Listbox component deselection when items are marked as required
  • Fixed the setValue API for Select components with the "Allow custom value" option enabled
  • Fixed the Date Time component to correctly display times that fall on DST boundaries
  • Fixed documentation in the model browser (left-hand panel)
  • Improved performance when deleting containers with many children

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.

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.