Changelog

Container and Form​

Container and Form components have received major upgrades to layout, styling, data handling, and configuration options. In particular, these updates make working with forms much faster and easier than before!

Layout

Container and Form now support optional headers and footer slots, which are customizable via the inspector. The header and footer slots function as additional canvas areas, allowing you to drag and drop any component into either slot. For example, you can now build a Form with two buttons in the footer: reset and submit.

Styling

You can quickly style all components nested within a Container or Form via the Context section of the style editor, and separately style the Container or Form as well.

Data handling

Forms now support a new property called Initial data. If you’re building a Form to edit existing data, you can quickly set the default values of all of your inputs by setting this property. For example, to map your Form’s input defaults to the selected row in a table, set the Form’s Initial data property to {{ table1.selectedRow.data }}. Form inputs also have a data key which you can use to match the keys in the Initial data object. If you use our Form generator, those inputs will be linked automatically (you can also use ctrl + click to generate/regenerate a Form).

Another critical part of form building is writing the underlying query that writes data back to your database or API. Previously, these queries required setting key-value pairs manually in Retool’s GUI mode query editor. Now, you can supply the object {{ form1.data }} to properly persist the changeset from your form!

Expanded API

Lastly, we expanded Form's API to give you more programmatic control over your forms! In addition to supporting submit and clear , we’ve added reset and setData.

If you have any questions or feedback on form building in Retool, head to our community forum. These new features are rolling out over the next week.

Fixes and improvements​

• Added a setValue API for Date Range components
• Added selectedIndex and selectedIndexes properties to Select, Multiselect, Listbox, Multiselect Listbox, Radio Group, Segmented Control, and Switch Group components
• Added case sensitive and fixed string searching to Select, Multiselect, Listbox, and Multiselect Listbox components
• Fixed modal column types in Tables to scroll if their content overflows
• Fixed an evaluation issue with self when controlling another component
• Fixed the bounding box for Container components with children
• Improved performance when editing a Table component
• Fixed an evaluation issue with mapped columns in Table components
• Fixed the context menu so it closes when you click outside of it

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.

Generating forms​

Retool’s form generator now lets you automatically create forms with our new input components! Simply drag a Form onto the canvas, click “generate from a resource,” then select your SQL resource and table. In a few steps, you can build a fully functioning form—without writing an insert query or dragging-and-dropping individual components!****

The form generator flow also has a few new improvements, including:

• Smarter component defaults: given your column type, we’ll select a default type from our new input components. For example, a_ varchar(n)_ column will default to a Text Input but can be changed to an Editable Text, Text Area, or Password. An integer column will default to a Number Input but can be changed to an Editable Number, Percent, Rating, Currency, or Slider.
• Automatic labels: We automatically generate labels for you (e.g. a column named created_at will be given the label “Created at”). You can also quickly tab through the fields in each row to edit the labels directly before generating your form.

You can always modify or extend your form by dragging-and-dropping other components into the Form and modifying your insert query. Additionally, you can regenerate your form via the context menu (⌃ + click on the Form component). To learn more about building forms in Retool, including more details about form generation, check out the docs. Form generation only works with a subset of SQL resources (PostgreSQL, MySQL, and MS SQL) right now, but if you’d like to see us support other resource types, let us know in the community forum.

Fixes and improvements​

• Added the ability to upgrade deprecated Date Time components
• Added a transition to the Date and Date Time calendar
• Fixed DST handling for Date Time components with the time zone value set to "Local time"
• Fixed formattedValue in Date Time when no timeFormat is specified
• Improved placeholders for configuring URL parameters
• Added support for arrays as parameters for Snowflake queries
• Improved performance of Snowflake queries
• Fixed query loading indicators in presentation mode
• Added warning logging when expected SAML fields are unset (on-prem 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.

Date, Time, Date Time, and Date Range​

Date Range component

We’ve added brand new Date, Time, Date Time, and Date Range components! They are fully keyboard accessible and provide tons of new functionality like automatic time zone handling, expanded formatting options, and more robust validation:

• Automatic time zone handling: We have a new option called “manage time zone” that allows you to set both a display time zone and a** value time zone**. Display time zone controls how time is displayed to your users, while value time zone controls how it’s encoded. This separation allows you to do things like set your display time zone to follow your user’s local browser, while encoding your times in UTC!
• Expanded formatting options: both dates and times now support all format strings and times default to a localized format. You can also control the step size of time increments that your users see in the dropdown selection (e.g. 15-minute or 30-minute steps).
• Validation: You can also set a min/max time and/or a min/max date. The date and time selection UIs respect your component's configured validation, so invalid options are either disabled in the calendar or don’t appear in the dropdown. This even works with “manage time zone” enabled: you can set validation constraints in your value time zone, and the selection UI will correctly adjust, maintaining your display time zone!

Display and value time zone in PDT

These components also support the same options as all of our new input components, including: expanded label support to control position, alignment, and width (in percent, grid columns, or pixels), read only and disabled modes, prefix/suffix text, prefix/suffix icons, an optional tooltip with GitHub flavored markdown, expanded style editor support, and more!

Drop us a note in the community forum if you’d like to see us add more functionality to these components. Date, Time, and Date Time are available now for all users, and Date Range is rolling out over the next week. All of these components will be available in the next on-premise release!

Fixes and improvements​

• Fixed the Image component so it doesn't force authentication in public applications
• Added query loading indicators in presentation mode
• Added a transition to the Date and Date Time components’ calendars
• Added support for a focus state for the Editable Text and Editable Number 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.

{{ self }}​

Components can now reference themselves in the inspector using the {{ self }} keyword! Access any component properties using {{ self }}, like the component’s value/values, label/labels, settings like disabled, hidden, readOnly, and validation properties such as maxCount.

For example, in a component like Select or Multiselect, you can set the labels to dynamically update to the capitalized values with {{ self.values.map(_.startCase) }} –this will actually be the new default going forward! It also makes dynamic styling much more powerful–for example, you can style the Statistic component’s trend green when {{ self.secondaryValue > 0 }} and red otherwise to indicate upward or downward trends.

{{ self }} is available for all components, and works in their event handlers, too! We’ve updated a bunch of our components to use {{ self }} for better defaults–but we’re excited to see what you configure with it. Drop us a note in the community forum with any examples, feature requests, or feedback! This feature is available to all cloud customers, and will be included in the next on-premise release.

Fixes and improvements​

• Fixed unexpected layout shifts in some apps while dragging/resizing
• Fixed form generation to set labels correctly for checkboxes
• Improved performance when querying the audit log
• Added the ability to enable/disable release management across an organization from Advanced Settings

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.

Statistic​

We overhauled our Statistic component! Previously, you could only set a single primary value, and we supported limited formatting options. Now, you can also set a secondary value to compare metrics over different time periods (e.g., to show monthly revenue growth). Additionally, the primary and secondary values have the same powerful customization options as our Number Input component, including currency and percent formatting, decimal place control, and more. The new Statistic component supports more features, including the ability to dynamically control positive and negative trend color, set a caption text, control alignment, and more.

Like all of our new components, the Statistic component also has expanded style editor support. You can automatically migrate your old Statistic components to this new version, too! As always, post in our community forum if you have feedback on this new component or feature requests.

Icon library​

We now offer over 3,000 searchable icons with support for bold and outline styles. You’ll have access to this library anywhere where you can set an icon in Retool. To use any of our old icons, choose the deprecated icon set. These are rolling out to editors over the next week.

Fixes and improvements​

• Added documentation for the majority of component properties, visible in autocomplete and model browser tooltips
• Improved app performance on page load
• Fixed Google Datastore ordering options
• Fixed public apps in Incognito mode for Chrome
• Improved SQL auto-formatting
• Fixed "body query type" for REST APIs with custom auth
• Fixed the layout for Image components in Firefox
• Added support for upgrading caret type Toggle components to the new Toggle Link component
• Fixed unexpected layout shifts in apps with tall dynamic height Text components
• Fixed SQL schema column types to display as timestamp or timestamptz instead of timezone
• Added support for an optional label on the File Dropzone component
• Added an option to configure text size on the Divider component

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.

Create and edit resources from your app​

You can now view, edit, and create new resources without leaving your Retool app!

To create a new resource, select the “create a new resource” option from the top of the resource dropdown in any query. You can configure a connection and immediately query any of our 40+ supported database and API types, including Postgres, MongoDB, and any REST API or GraphQL.

To view or edit a resource configuration, click the “edit resource” button from the selected resource in your query. For example, you can view the name of the default bucket of an S3 resource, add staging credentials to a Postgres database, or add a new header to your GraphQL resource—all without leaving your app! Any changes to the resource persist across all Retool apps in your current environment.

We’re rolling out this new functionality this week. Share any feedback or suggestions for new resource types in our community forum!

Fixes and improvements​

• Fixed label wrapping for Checkbox Group, Radio Group, and Switch Group components
• Fixed duplicate or null values in Select, Multiselect, Listbox, and Multiselect Listbox components
• Fixed the "Go to app" event handler in public apps
• Fixed property defaults when switching from one component type to another
• Fixed default value rendering for Select components in edit mode
• Fixed the Table component’s setSort so that it now updates both the sortedColumn and sortedDesc properties

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.

Upgrading components​

Over the past few months, we’ve launched new versions of 20+ components, including Text Input, Button, Toggle/Switch, Progress Bar, and more. These new components have been redesigned and rebuilt from the ground up with more customization options, expanded style editor support, improved keyboard accessibility, and robust validation for inputs.

In order to make it easy for you to use these new components in your existing apps, we’ve built two ways to migrate existing components to these powerful new versions with a few clicks.

Upgrade individual components​

If a selected component has a new version you will see a “Deprecated component” notice at the top of the Inspector. Click “Upgrade” and Retool will automatically upgrade the component to the new version. All of your configuration settings (e.g. event handlers, tooltip content, suffix text, etc) will transfer to the new version. As always, you use ⌘+Z to undo your changes.

Upgrade all components in an app​

We also added a quick way for you to migrate multiple components in an app at once. Click on the app actions menu (three dots in the upper right), then click “Upgrade components”, then select which components to upgrade.

This new upgrade functionality supports common components and is rolling out to customers over the next week. We’re adding support for new components—like Select and Multiselect—to work with these upgrade paths shortly. Post in our community forum to let us know how it’s working and if you have any additional functionality you’d like to see!

Fixes and improvements

• Fixed the recordUpdates and changeSet attributes of the Table component to only clear when a bulk update is successful
• Added a new Pagination component for easily navigating paged data
• Fixed default text color when the canvas has a dark background
• Added support for sharing Jira resource credentials between users
• Added an option to configure text size in Editable Text and Editable Number components
• Fixed the Calendar component so that custom event properties are not lost when events are modified
• Added the ability to customize the appearance of the Retool user menu on a per-app basis (Enterprise 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.

Select and Multiselect​

We’ve overhauled two of our most popular components: Select and Multiselect. Like our new Input components, they have powerful new functionality including:

• Expanded style editor support
• Control over label position, alignment, and wrapping
• More robust validation (e.g. min/max items for Multiselect)
• Support for adding text and icons in the prefix and suffix
• An optional tooltip with GitHub flavored markdown

Both components support full keyboard accessibility. For example, you can now use arrow keys to move between individual selected items. These components also have tons of new configuration options including:

• Overlay height: set the maximum height of the dropdown
• Combobox mode: set whether or not the component has an input field to support searching by text
• Selection indicator: control whether the dropdown should show a checkmark on the selected item(s)
• Empty state: set a message to display when the component has no options provided or when no options match the search term
• Disabled: provide an array of values that should be rendered disabled or disable the entire component

New components you’d like to see us add? Let us know in our community forum!

Fixes and improvements​

• Fixed label alignment on the Progress Bar component
• Fixed component styles in ListViews
• Added tooltip support to more components (Avatar, Avatar Group, Divider, IFrame, Image, Progress Bar/Circle)
• Improved CSV parsing capabilities of the File Input components
• Added a warning when trying to preview an app with an unsaved query
• Updated Slider and Range Slider components to support editing the track color
• Fixed the Table component “Row select” and “Row select changed” events to support arrow key selections
• Added support for evaluating an app's UUID dynamically (e.g. {{ retoolContext.appUuid }})
• Added support for reply-to email in SMTP resource
• Fixed the JIRA resource so that it automatically refreshes its token

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.

Scrollable tables​

The Table component is now scrollable! Scrollable tables are a great way to allow your users to quickly explore data.

To try it out, select the new “Scroll” option in the Table component inspector. "Scroll" supports all of the Table component’s “Pagination” options (e.g. server-side pagination) out of the box. To learn more about working with Tables in Retool, check out our documentation.

We’ll be shipping other highly requested Table features and bug fixes in the coming months. Visit our community forum to make a new request or add your support for existing ones.

Fixes and improvements​

• Improved ordering of code autocomplete suggestions
• Added multiline text support for Button components
• Fixed folder creation—now we route you to the newly created folder
• Improved validation to skip any components set to disabled, read only, or hidden
• Updated the PDF Viewer component to support scaling each page to the height of the component, and added an additional option to snap scroll to each page
• Improved fuzzy search performance for the Listbox and Multiselect Listbox components when using the “search term” option
• Updated the Preview button to prevent accidental clicks
• Fixed a rendering bug with the Looker component
• Fixed tree construction so that merge conflicts are properly detected in protected apps (Enterprise plan 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.

Avatar and Avatar Group​

****

The new Avatar and Avatar Group components allow you to easily represent users in your app.

Avatar allows you to display an image with an optional label and caption. The image URL will default to the current user’s profile photo (a new property, {{ current_user.profilePhotoUrl }}) and you can optionally set fallback text for when there isn’t a url available — if that text looks like a user's full name, we’ll render just their initials. Choose from a selection of avatar size options, extra small (16px) to extra large (48px), and customize label, alignment, and more!

Avatar Group displays several avatars together. Configure the maximum number of avatars to display, and the last avatar will display “+N” when there are more. Like our new input components, these also offer expanded style editor support.

More components you’d like to see us build? Let us know in our community forum!

Fixes and improvements​

• Added a new option, "show top bar," to IFrame which allows you to optionally show a customizable title, and adds two actions: refresh and open in a new tab
• Fixed Listbox and Multiselect Listbox rendering with duplicate values
• Added autofill for app names when importing an app
• Improved the component search experience by autofocusing the search field when opening the Insert pane
• Improved the loading state for the Table component
• Fixed an edge case where renaming a component didn't rename references to the component
• Added workspaces, audit logs, and data editor to the "powered by Retool" menu
• Updated AWS assume role help text to display the correct backend name
• Added the POSTGRES_STATEMENT_TIMEOUT environment variable, which defaults to 10 seconds (on-prem 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.