Skip to main content

Usability features

Learn more about usability features.

Retool includes a number of features to enhance the usability of your classic apps. These options include additional context or personalization, text and data formatting, notifications, and query confirmations.

Input components​

Refer to the Component Library for a complete reference of all components and the settings they support.

Most input components, such as Text Input, have settings that help you provide users with greater context.

  • Placeholder: A placeholder appears within the input when it doesn't have a value.
  • Label: A label appears next to the component. You can also include a caption to provide further context.
  • Add-ons: You can enhance inputs with prefix and suffix text or icons, tooltips to display further context when the mouse hovers over the input, and helper text that appears when an input is in focus.

Formatted data types​

Certain components, such as Table, allow you to format the contents based on the data it contains—such as currencies or email addresses. For example, you can set a column of dates to use the Date format. This allows you to customize the date formatting or even adjust the date shown to match the user's local time zone.

Personalize apps for the current user​

Classic apps have access to global variables, such as current_user, which allow you to personalize the app. For example, you can include a welcome message that displays the user's name with **Welcome, {{current_user.firstName}}!**.

Markdown text with built-in user variables
Markdown text with built-in user variables

Formatted text with Markdown and HTML​

You can use Markdown or HTML across a number of surfaces to include rich text or images. Retool renders Markdown and HTML where available. Refer to Github's Basic writing and formatting syntax guide for more information—Markdown in Retool uses the same conventions.

Trigger notifications​

You can set up notifications using event handlers that trigger in response to any supported event. Add an event handler in Interaction section, then select Show notification as the action.

In addition to the title and description, you can specify the Type of notification by selecting from the list or dynamically with JavaScript. This represents the severity of the message and changes the color used. You can also control the duration for which notifications are shown before being dismissed.

You can also trigger notifications with JavaScript using utils.showNotification() .

Query prompts​

Queries that write or delete data can display a confirmation message before they run. You can enable this in the Advanced tab of a selected query.

Query confirmation
Query confirmation