Skip to main content

Upgrade deprecated components

Learn how to upgrade deprecated components to their latest version.

Retool regularly adds functionality to web components. On occasion, Retool may rewrite a component in a way that significantly changes how it operates under the hood. Should this occur, an updated version of the component is made available that replaces the previous one which is no longer used in new apps. To prevent disruption, any existing apps continue to use the version of the component that was originally added.

You can continue to use deprecated components, but Retool recommends upgrading them. You can automatically upgrade deprecated a deprecated component or select multiple components to upgrade at the same time, if required. All configuration settings (event handlers, tooltips, etc.) transfer to the upgraded component.

Upgrade vs. migrate​

In some cases, Retool releases a new component that is considered a replacement for an existing component, but does not directly replace it. In these instances, you must migrate to the new component rather than upgrade (e.g., migrate from the legacy Table component).

Identify components for upgrade​

If a selected component in your app has been deprecated and a new version is available, the Inspector contains a message and option to upgrade.

Upgrade available

Upgrade components​

You can upgrade a single component or all deprecated components at the same time. To upgrade a single component, click Upgrade in the Inspector.

To upgrade multiple components:

  1. Click the ••• button on the upper-right of the editor to open the App actions menu.
  2. Select Upgrade components to view a list of all deprecated components to upgrade.
  3. Select the components you want to upgrade and click Upgrade.

Upgrade multiple components

Renamed properties​

Retool occasionally must rename properties to improve clarity and consistency. For example, renaming suffix to textAfter. Upgrading a component automatically updates any values and references to use the refactored fields.

Review any JavaScript queries and custom scripts after upgrading a component to ensure they continue to work as expected.

Retool makes a best-effort attempt to update property values used in JavaScript and event handlers. Indirect references, such as a reference to one property value that itself references the renamed property, cannot be automatically updated and must be done manually.

// Before
console.log(textInput1.suffix);

const newVariable = textInput1;
console.log(newVariable.suffix);

// After
console.log(textInput1.textAfter); // RENAMED

const newVariable = textInput1;
console.log(newVariable.suffix); // NOT RENAMED