Skip to main content

Changelog

Updates, changes, and improvements at Retool.

73 posts tagged with "Apps"

View All Tags

New version of the Alert component

Jeffrey Bui
Jeffrey Bui
Software Engineer

A new version of the Alert component is now available. It is a significant upgrade over the previous version, with new options to customize alert messaging.

You can create custom alert states that represent different alert types or severity, and configure them with the following options:

  • Title and description.
  • Icon, icon position, and tooltip.
  • Action text to trigger event handlers on click.

Existing apps can continue to use the previous version, which is now deprecated.

New Scanner component for Retool apps

MB
MB
Software Engineer

A new version of the Scanner component is now available. It is a significant upgrade over the previous version, with new functionality for you to customize the scanning experience. Features include:

  • Use scan events to reference scanned items and the time between scans.
  • Detect duplicate scans.
  • Programmatically pause after each scan or set the time between scans.

Comment Thread component

Hong Lin
Hong Lin
Software Engineer

The Comment Thread component enables users to post comments and start discussions directly within your apps. All users who have access to an app that contains Comment Thread can use the component. Each user's comment appears with their name and avatar image.

Comment Thread with comments for the selected table row.

When using Comment Thread, you specify a unique thread ID with which to associate comments. This can be a dynamic value so that comment threads dynamically change based on user interactions. For example, setting the thread ID to {{ table1.selectedRow.id }} would associate comments to whichever row is currently selected.

Comment Thread includes event handler support, action buttons, and granular control over the refresh period. Retool automatically handles comment storage and retrieval so no data source is needed.

If you're currently using the Comment component, you can switch to using Comment Thread without losing previous conversations by using the current Evaluated key value as the thread ID.

List View and Legacy List View comparison

Olivia Sztanga
Olivia Sztanga
Software Engineer

Retool released a new version of the List View component in December 2023. The previous version has continued to be available as the Legacy List View component. You can continue to use the Legacy List View component in existing apps but we recommend you switch to using the newer List View component. The newer version of List View is much more performant, has more features, and will receive updates.

Feature comparison

Learn more about the differences between Legacy List View and List View.

FeatureLegacy List ViewList View
Number of instancesSet the instances property value.Automatically generated for each array item in data.
Instance valuesReference nested values using the item index (e.g., textInput1[3].value).Nested components cannot be referenced outside of List View. For form inputs, use instanceValues instead.
Instance keysItem keys.Primary keys.
Auto-heightAutomatically grows with content.Requires a suitable maxHeight value.
Show borderYesNest the List View component within a container and use it to set the border.
Show drop shadowYesNest the List View component within a container and use it to set the drop shadow.
Styles and nested stylesYesNest a container within List View to apply styles and nested styles.

Instance keys and values

Retool recommends using primary keys, a unique identifier, to track and restore instances within the List View.

List View is virtualized and only evaluates and renders items currently visible. This significantly improves performance. However, this also means that you can no longer directly reference nested items as they may not have been evaluated yet. Instead, you can reference instance values for forms and input components.

Appearance settings

List View supports all of the same appearance settings as Legacy List View, with the following exceptions:

  • List View does not support border or drop shadow styles. Instead, nest a container within List View and configure it with a border and drop shadow.
  • A List View with a heightType of auto requires a suitable maxHeight value to maintain performance. The default is 100vh and you can specify a different value to use. You should consider using the container in which List View is nested to avoid unexpected scrollbars.

Flexible layouts with the Stack component

Kent Walters
Lead Product Manager, AI

The Stack component is a container with Flexbox-like layout controls. Instead of following the standard 12-column grid layout, Stack automatically arranges nested components horizontally or vertically. You can then control the alignment and distribution of nested components and precisely adjust component size.

Multipage apps beta

Zhengming Wang
Software Engineer

Multipage apps contain pages to combine functionality and use cases. Standard Retool apps operate as single-page applications where all code and components is continually evaluated. Multipage apps are also supported by Retool Mobile where each screen functions as a separate page.

With multipage apps, Retool only evaluates the code and components of the page currently in view. The benefits of multipage apps include:

  • Greater performance of large and complex apps. Since Retool only evaluates code and components for the current page, multipage apps are 30-40% faster than a single-page app.
  • Seamless navigation between pages. Retool loads the complete app state whenever a user navigates to a single-page app. With multipage apps, navigation between pages is seamless and more responsive.
  • Improved app management. Multipage apps can replace multiple apps in your organization, such as a team's frequently used apps. This reduces the number of apps to maintain and allows for easier permission management.
  • Reduced module dependency. Modules are commonly used to create shared navigation menus across multiple single-page apps. With multipage apps, you can eliminate the need for additional modules and the complexities with maintaining them.

Each multipage app uses global and page scopes to separate pages. Globally scoped code, and Header and Sidebar frames, are available for use across every page, while each page has its own page-scoped code and components.

You can request access to the multipage app beta and explore the docs to learn more.

Early access to WidgetGrid for faster app building interactions

Ryan Pearl
Ryan Pearl
Software Engineer

Retool is currently working on a new layout architecture, WidgetGrid, that significantly improves the performance of the canvas. Placement and arrangement of components, such as dragging to reposition, is up to 50% more responsive.

Enable or disable WidgetGrid from the status bar.

WidgetGrid is currently rolling out to cloud-hosted organizations as an opt-in beta and will be available in the next Edge release of self-hosted Retool. You can enable WidgetGrid from the status bar when viewing or editing an app. You can disable WidgetGrid at any time and provide feedback about any issues you experienced.

Updated paths for static JavaScript files

Daniel Byrd
Software Engineer

Browsers now load static .js files from the following locations:

  • Custom component libraries: /libs/custom-component-collections.${hash}.umd.js
  • Legacy custom components: /libs/custom-components.${hash}.umd.js
  • Workflows sandbox: /libs/sandbox.${hash}.umd.js

This change will not disrupt most self-hosted organizations. However, if you have additional infrastructure that sits between your user's browser and your Retool instance, such as a load balancer, you might need to update your infrastructure configuration.

The reason for this is because these files are requested from an iframe, and so regular browser cookies will be missing from those requests for these files. If you have a load balancer that requires additional cookies be present (such as for SSO), it may block requests to these files from an iframe.

If you need to account for this, the recommend solution is to allow-list requests to these file paths in your infrastructure so that they don't require any additional authentication to access.

Perform these tests if you want to confirm that your Retool instance is correctly serving these files:

  1. Edit any app.
  2. View an app with a custom component (and the legacy version of custom components if you use it).
  3. Edit any workflow (if you use the workflows product).

Multiplayer: Collaborative app building

Alexander Stabile
Software Engineer

Multiplayer provides real-time collaborative editing that allows users to see what each other is working on and reflect changes as soon as they're made. It's best suited for development teams who work on different areas of an app independently.

Send errors from apps to observability providers

Caitlyn Chen
Caitlyn Chen
Software Engineer

You can now connect your organizations to Sentry or Datadog for error monitoring. App errors will be reported with a callstack and descriptive tags when viewing and interacting with an app in preview or public (end-user) mode.