Skip to main content

Changelog

Updates, changes, and improvements at Retool.

HTML component

We have introduced the new HTML Component so that you can quickly add custom HTML and sandboxed CSS to your apps. This component is perfect for use cases that require a little bit of custom UI without the full scripting capabilities that Custom Component provides. The HTML component is live for all cloud customers, and will be rolling out to on-premise customers in the coming weeks.

Icon component

We have also introduced a standalone Icon component with over 3,400 icons to choose from! It supports alignment options, alt text for accessibility, and optional click event handlers.

Dynamically set the icon based on any state from your application to give helpful visual clues:

The new Icon component is live for all cloud customers. We're working on rolling out our new icon library and this component to our on-premise customers in the coming weeks. If you have any questions or feedback, let us know in the community forum.

Fixes and improvements

  • Fixed layout issues with dragging hidden components
  • Fixed an edge case where style editor colors would occasionally display incorrectly
  • Fixed an issue where you could not programmatically call selectRow in Table components with multiple selection enabled
  • Added a new "Auto" height option for Modules, allowing them to resize themselves to fit their contents
  • Added the ability to dynamically set whether a Table component supports selecting multiple rows
  • Fixed the Table component's "sort change" event handlers which were temporarily not firing

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 event handlers in the Split Button component and the Dropdown Button component when options are hidden
  • Fixed the confirmation message when deleting queries, transformers, and temporary state
  • Added markdown syntax highlighting to tooltip fields in the Inspector
  • Fixed the Table component's "Add new row" action so that it no longer overwrites the first row in your Table when uploading an image
  • Adjusted the amount the Container component grows when dragging in child components
  • Fixed the _focus _JavaScript APIs for the Listbox and Multiselect Listbox components
  • Improved the editing experience when working with the Container component
  • Fixed app URL parameters when they reference components
  • Added the ability in edit mode to select components when a Container component is in a loading state
  • Fixed an edge case in the options list editor where items would be duplicated in Manual mode
  • Fixed the Dropdown Button component so that it is square when it only has an icon and no text
  • Fixed validation for icons configured via the options list editor in Mapped mode
  • Fixed the Date Time component so that it is not editable in readonly mode
  • Fixed the Form component so that it doesn't clear its fields if the submit event fails

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

  • 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.