Changelog

• Fixed the Modal component so that it cannot open behind existing modals
• Fixed the List View component so that the first row is vertically sized correctly
• Added a new option to the Table component "Reset after successful save" that allows you to control whether the Table data should reset after saving or adding new rows
• Fixed the height of the first line of text in the Text component
• Improved drag and drop behavior on Safari for the Image component
• Fixed theme in the hover model browser so that it shows changes correctly
• Added the ability to save a query even when it's running 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.

More customizable Select components​

Select, Listbox, and their Multiselect variants are getting a lot more customizable! Using the recently launched option list editor, you can easily assign a color, image, icon, and prefix text to each option. The layout will automatically adapt as you mix and match settings, and you can adjust the image size and shape in the Style Editor.

Theme and Style Editor updates​

The color picker in the Style Editor now includes all of the swatches from your Theme, including two new optional colors: Secondary and Tertiary. We’ve also added a theme global, so you can reference theme colors directly in your code. For example, conditionally indicate success or failure with {{ someCondition ? theme.success : theme.danger }}.

Automatic colors​

Last but not least, Themes have also been updated with a collection of Automatic colors that can be used by components like Tags, Select, Listbox, and Avatar. Colors from this collection are deterministically assigned based on text in the component. For example, the tag “Foo” will get the same color assignment no matter where it appears in your app.

Configure your automatic colors directly in your Theme Editor

Fixes and improvements​

• Improved query creation from event handlers so that it default creates the last selected query type
• Fixed the Table component's "select all" menu for checkbox selection
• Fixed an edge case where transformers would not run on page load
• Improved the experience of resizing components
• Fixed Select components that were incorrectly showing validation errors when required was set to true
• Fixed the Table component's "row select change" event that was incorrectly firing twice
• Added a new setting so that Modal .open() and .close() can optionally trigger the Open and Close event handlers
• Added support for the Image component to have a smaller height in Fixed height mode
• Fixed component repositioning via keyboard
• Fixed keyboard navigation on the canvas such that arrow keys do not swap component positions
• Added a warning in edit mode when Table "save changes" events are not configured
• Fixed the Table component's "Row select change" events that were firing twice when rows were selected via keyboard arrow keys
• Fixed Range Slider and Toggle Button components so that they don't automatically trigger dependent queries with the "Run query only when manually triggered" setting on
• Consolidated the 'Dynamically show column' and 'Show column' fields into a single 'Show column' field for the Table component's column editors
• Fixed the Modal component so that it maintains visual height when switched to Fixed height
• Fixed the ability to show/hide a button to clear selection in the Table component
• Fixed "text auto" colors for modules being used in applications

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.

Table updates​

Working with Table just got a lot more efficient thanks to major improvements to keyboard navigation and new UI for multi-row selection!

Keyboard navigation​

We’ve vastly expanded keyboard navigation support in Table, enabling your end users to work much more quickly.

Use the arrow keys to move between cells, with up/down now respecting the sort order (a long-standing bug). On editable cells, hit** **Enter to edit or just start typing to replace the content. Hit Enter again to commit your edits and move down a row, Tab to commit and move to the next column, or Esc to revert. You can also clear the focused cell with Delete/Backspace and copy the contents with CMD+C (**CTRL+C**).

We also added a Double click to edit option in the Inspector section, on by default for upgraded Tables. Turn this off to return to the old single-click mode.

Existing Table components can be upgraded in the Inspector, enabling keyboard navigation and converting all columns to the new column types announced a few weeks back. To access legacy column types, choose Downgrade component from the ••• menu.

Checkbox selection​

We’ve also added an optional checkbox column for Tables with multi-row selection enabled. When the setting is turned on (Use checkbox column for selection under** Row Selection**), an additional column will appear on the left with checkboxes to control row selection. The header also includes a checkbox to instantly select every row, along with a menu to select all rows on the current page.

Fixes and improvements​

• Added a new "Auto" height option for Modules, allowing them to resize themselves to fit their contents
• Fixed Form components in Modules so that validation and submit buttons work properly
• Added support to control which menu items are highlighted in the Navigation component
• Fixed dynamic height components so that they don't shift the canvas layout when deleted
• Increased the size of handles on components to make resizing easier
• Improved drag-and-drop such that moving a component into a Container component will preserve its width as much as possible
• Fixed action buttons for the Table component so that they fire on first click in editor mode
• Fixed the editor canvas so it does not change it's size when dragging components
• Fixed component selection so that hidden containers stay visible when you're selecting any component inside of them
• Fixed the Slider component and the Range Slider component's outputs when the value is over 1,000
• Fixed layout issues with dragging around 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 the ability to dynamically set whether a Table component supports selecting multiple rows

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.

Multiple environments​

We’ve added support for multiple, user-defined environments, making it easy to build, run, and test applications to suit your development needs. Now, you're not constrained by only **Staging **and Production: admins can configure as many environments as they need under Organization Settings > Environments:

To set these up on the resource level, define configurations for all environments under Resources:

As you're editing and previewing applications, switch between environments to quickly test against different scenarios (e.g. switching between QA data and production data).

This feature will be available on all plans, and is rolling out to customers in the next few weeks. If you have any feedback, let us know in the community forum!

Fixes and improvements​

• Fixed keyboard shortcuts that were occasionally not firing in editor mode
• Fixed an edge case where multiple options' tooltips could display at the same time for Select, Multiselect, Listbox, and Multiselect Listbox components
• Fixed resizing widgets when scrolling the canvas
• Added automatic code hinting to the options list editor for components like Select and Multiselect
• Added an option to order columns via the Table component's dynamic column settings
• Fixed git syncing with GitHub, which was failing due to an error about using RSA key with SHA-1

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.

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.

Dropdown button component​

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.