330 docs tagged with "Classic apps"
Documentation for building classic apps.
Apps (273)
Add documentation to classic apps
Learn how to add a README and user documentation to classic apps.
Agent Chat component
A component to chat with a Retool Agent in a classic app.
AI in classic app building
Learn how to utilize AI when building and editing classic apps.
AI-assisted app generation with Assist
Use Assist to generate classic apps.
Assemble mobile layouts for classic apps
Learn how to assemble mobile layouts for classic apps.
Build a landing page
Learn how to use landing pages to automatically route external users to pre-specified classic apps.
Build custom pages
Learn how to build custom pages in Retool.
Build custom React components
Learn how to develop and deploy custom React components for classic apps.
Build custom views using repeatable components
Learn how to display and interact with your data using repeatable components.
Build modules to reuse queries and components
Learn how to reuse groups of components and queries across classic apps.
Built-in URL parameters
Learn about built-in URL parameters to control classic app behavior.
Button components for classic apps
UI elements to trigger actions and queries in classic apps.
Chart components for classic apps
Charts and graphs to represent data in classic apps.
Checkbox Tree component for classic apps
A group of checkboxes to toggle boolean values in a multi-level tree.
Classic app best practices
Best practices for building performant classic apps.
Classic app error reporting and observability
Monitor classic apps by connecting with Datadog or Sentry.
Classic app event handlers reference
Reference documentation for classic app event handlers.
Classic app how-to guides
Step-by-step instructions for using common features and functionality in classic apps.
Classic app IDE
Learn about Retool's IDE for classic app development.
Classic app IDE keyboard shortcuts
Learn about built-in keyboard shortcuts for the classic app IDE.
Classic app management
Learn how to manage, share, and release classic apps.
Classic app performance
Best practices for building performant classic apps.
Classic app performance monitoring
Monitor classic app performance by connecting to Datadog and Sentry.
Classic app tutorial: Map and filter data
Learn how to map data to components and filter table rows.
Classic app tutorial: Pass data between pages
Learn how to use a variable to automatically sync the selected customer between pages.
Classic apps component reference
Reference documentation for UI components.
Classic apps concept guides
Learn about relevant features, functionality, and principles related to classic apps.
Classic apps documentation
Build classic apps with rich interfaces, powered by your data.
Classic apps frames reference
Reference documentation for frames.
Classic apps glossary
Learn the meanings of classic app-related terms.
Classic apps quickstart
Learn about the fundamental concepts of classic apps.
Classic apps reference
Reference documentation for classic apps.
Classic apps tutorial
A hands-on introduction to classic apps.
Classic apps tutorial: Advanced features
Build upon the classic app you created in part one and add more functionality.
Classic apps tutorial: Assemble the user interface
Learn how to assemble the user interface of a classic app.
Classic apps tutorial: Configure multiple pages
Learn how to add multiple pages to your classic app's interface.
Classic apps tutorial: Connect and query data
Learn how to connect a data source and retrieve customer data using queries.
Classic apps tutorial: Fundamental concepts
Learn how to assemble your classic app's user interface.
Classic apps tutorial: Save changes to data
Learn how to connect write queries and configure event handlers to save changes.
Command Palette
Learn about Retool's Command Palette and its global search and commands.
Components
Learn more about Retool's UI components.
Configure columns in the Table component
Learn how to configure, edit, and sort table columns.
Configure custom keyboard shortcuts for classic apps
Learn how to create custom shortcuts for classic app users.
Configure event handlers
Learn how to trigger actions and queries in response to user interactions.
Configure rows in the Table component
Learn how to configure table rows.
Configure server-side pagination for the Table component
Learn how to implement server-side pagination of data with the Table component.
Configure URL parameters
Learn how to control classic app behavior and pass values using URL parameters.
Configure user actions for users
Learn how to write User Action queries that allow users to authenticate using custom product pages.
Configure your organization for Assist
Learn how to configure your organization so your users can use Assist.
Container and form components for classic apps
UI elements to group components together in classic apps.
Container List View
A flexible list of repeated components with containers.
Create external classic apps
Learn how to enable and customize the external app experience.
Custom and embedded content
Learn how to create custom components and embed other content in your classic app.
Custom Component
A custom-built React, or HTML and JavaScript, component.
Custom components for classic apps
Custom UI elements to embed content in classic apps.
Custom CSS styles
Learn more about using custom CSS in classic apps.
Customize classic app URLs
Learn how to customize classic app and page URLs.
Customize the appearance of the Table component
Learn how to customize the Table component using different styles and add-ons.
Data
Learn how to present and visualize your data.
Data components for classic apps
UI elements to display and interact with data in classic apps.
Date and time components for classic apps
Date input fields and UI elements for classic apps.
Debug Tools
Investigate and resolve issues with Retool's built-in debugging tools.
Define option lists
Use the option list editor to configure options manually or map data to generate them dynamically.
Design organization and classic app themes
Learn more about how to create organization and classic app themes.
Embed classic apps
Learn how to embed classic apps with optional authentication.
Embedded apps
Learn about embedding classic apps in your existing web applications with support for authentication.
External apps
Build classic apps and customize the experience for external users.
Filter data in the Table component
Learn how to filter and search table data.
Forms and inputs
Learn how to gather user inputs through forms and various input types.
Getting started with Agent Chat
Learn how to use the Agent Chat component to interact with agents.
Getting started with avatars
Learn how to display information about the current user and retrieve profile images from Gravatar.
Getting started with boolean inputs
Learn how to add, configure, and set the value of boolean input components in classic apps.
Getting started with buttons and links
Learn how to use buttons and links to help users navigate inside and outside of your classic app.
Getting started with charts
Learn how to use your data to create charts and graphs.
Getting started with chat components
Learn how to use chat components to interact with large-language models and Retool Agents.
Getting started with Comment Thread
Learn how to use the Comment Thread component to enable users to post comments and start discussions directly within your classic apps.
Getting started with date and time components
Learn how to display and manage date and time values in classic apps.
Getting started with embedded media
Learn how to use PDF, QR Code, and Video components to display embedded content.
Getting started with file inputs
Learn how to upload files and images in classic apps.
Getting started with frames
Learn how to use frames to organize content in a classic app.
Getting started with icons
Learn how to use built-in icons in classic apps.
Getting started with images
Learn about the different ways to include images in your classic apps.
Getting started with LLM Chat
Learn how to use the LLM Chat component to provide access to an AI chatbot.
Getting started with Mapbox Map
Learn how to use Mapbox Map to display coordinates and other information on a map.
Getting started with navigation components
Learn how to build interfaces for users to navigate within classic apps.
Getting started with number inputs
Learn how to collect number values with input components in classic apps.
Getting started with pagination components
Learn how to help users move between pages within classic apps.
Getting started with presentation components
Learn how to use various components to present text, numeric, and graphic information in your classic app.
Getting started with select inputs
Learn how to provide a list of options from which users can select in classic apps.
Getting started with sliders and ratings
Learn how to provide number value ranges from which users can select in classic apps.
Getting started with the Calendar component
Learn how to display an interactive calendar in your classic app.
Getting started with the Form and JSON Schema Form components
Learn how to build forms using components or JSON Schema to collect user input.
Getting started with the Form component
Learn how to assemble an input form using the Form component.
Getting started with the IFrame component
Learn how to embed a web page as an iframe into your classic app.
Getting started with the JSON Schema Form component
Retool recommends using the Form component as it's more versatile for most use cases. Use the JSON Schema Form component only if your use case requires it. Refer to the comparison of form components for more details.
Getting started with the Key Value component
Learn how to display data in key-value pairs.
Getting started with the Table component
Learn how to display and interact with data using tables.
Getting started with the Timeline component
Learn how to use the Timeline component to display date information in a Gantt chart format.
Getting started with the Wizard component
Learn how to build a step-by-step interface with multiple paths using the Wizard component.
Group components with containers
Learn how to group components into multi-view interfaces.
HTML
A content area to embed HTML and CSS markup.
IFrame
A content area to embed a web page.
Import and export classic apps
Learn how to import and export classic apps.
Integration components for classic apps
UI elements for integrating third-party services and content in classic apps.
Interaction and navigation
Learn how to structure your classic app for user interactivity, and how to trigger and handle events.
JSON Editor
An interface to edit and validate JSON.
Layout and structure
Learn how to arrange components in your classic app.
Legacy and deprecated components
Learn about legacy and deprecated components.
Localize classic apps
Learn how to localize your Retool applications.
Managing security with Assist
Understand how Assist interacts with your data and LLMs.
Module best practices
Best practices for building modules.
Modules
A collection of components and code.
Multiplayer
Learn about collaborative classic app building for real-time development.
Navigational components for classic apps
Navigational menus and UI elements for classic apps.
Notifications
Learn more about notifications and their global settings.
Number input components for classic apps
Number input fields for classic apps.
Observability
Learn how to run tests and report errors.
Password
An input field to enter a password.
Presentation and styling
Learn how to display information and visual components.
Presentation components for classic apps
UI elements to display content in classic apps.
Preview and share classic apps with users
Learn how to preview and share classic apps with users.
Programming paradigms at Retool
Learn about the programming styles supported by Retool and their use.
Prompt with Assist
Learn how to prompt Assist to edit or create classic apps.
Prompting best practices
Best practices for writing prompts for Assist.
Record classic app user sessions with Fullstory
Learn how to capture user classic app behavior for use with Fullstory.
Reference dates and times in components
Learn how to reference dates and times in various components.
Repeatable components for classic apps
UI elements to build repeatable groups of components in classic apps.
Retool CLI reference
A command-line tool for interacting with Retool.
Select input components for classic apps
Value selection input fields and UI elements for classic apps.
Share data between classic app pages
Learn how to pass data between pages in classic apps.
Share your classic apps externally
Share your classic apps with users outside your organization.
Special input components for classic apps
Specialized input fields and UI elements for classic apps.
Testing best practices
Best practices for testing classic apps.
Text Area
An input field to enter multiple lines of text.
Text input components for classic apps
Text input fields for classic apps.
The Alert component for classic apps
A message box to display important information with optional title and clickable action.
The Alert component for classic apps
A message box to display important information with optional title and clickable action.
The Annotated Text component for classic apps
An interface to display and annotate text.
The Auth Login component for classic apps
A button to perform custom authentication for an API resource.
The Avatar component for classic apps
A content area to display user information and profile image.
The Avatar Group component for classic apps
A group of avatars to display information and profile images for users.
The Bar Chart component for classic apps
A content area to display bar charts.
The Bounding Box component for classic apps
An interface to display a bounding box and tag areas of an image.
The Breadcrumbs component for classic apps
A secondary navigation menu to trigger actions.
The Bubble Chart component for classic apps
A content area to display bubble charts.
The Button component for classic apps
A button to trigger actions when clicked.
The Button Group component for classic apps
A group of buttons to trigger actions when clicked.
The Button Group component for classic apps
A group of buttons to trigger actions when clicked.
The Calendar component for classic apps
A content area to display calendar events.
The Calendar Input component for classic apps
An input field to select a specific date on a calendar.
The Cascader component for classic apps
An input field to select options using a dropdown menu or manually enter a value in a multi-level tree structure.
The Chart component for classic apps
A content area to display charts.
The Checkbox component for classic apps
An input field to toggle a boolean value.
The Checkbox Group component for classic apps
A group of checkboxes to toggle boolean values.
The Circular Image component for classic apps
A content area to display a circular image.
The Close Button component for classic apps
A button with preconfigured icon that trigger actions when clicked.
The Collapsible Container component for classic apps
A container to group other components with a preconfigured collapsible body area.
The Color Input component for classic apps
An input field to select a color.
The Comment Thread component for classic apps
An interface to display and enter comments.
The Container component for classic apps
A container to group other components together with flexible layout controls.
The Currency component for classic apps
An input field to enter a monetary number value.
The Current User object
Information about the current logged-in or authenticated user of the classic app.
The Date component for classic apps
An input field to select or enter a date.
The Date Range component for classic apps
An input field to select or enter a date range.
The Date Time component for classic apps
An input field to select or enter a date and time.
The Day component for classic apps
A dropdown menu and input field to select or enter a day.
The Divider component for classic apps
A content area to display a dividing line with optional label.
The Drawer frame
A container that slides in from the side of the viewport.
The Dropdown Button component for classic apps
A dropdown menu with buttons to trigger actions when clicked.
The Editable Number component for classic apps
A click-to-edit input field to enter a number.
The Editable Text Area component for classic apps
A click-to-edit input field to enter multiple lines of text.
The Editable Text component for classic apps
A click-to-edit input field to enter a single line of text.
The Email component for classic apps
An input field to enter an email address.
The Event List web component
A content area to display a list of events.
The File Button component for classic apps
A button to select single or multiple files.
The File Dropzone component for classic apps
A drag-and-drop area to select single or multiple files.
The File Input component for classic apps
An input field to select single or multiple files.
The Filter component for classic apps
An interface to define filters for Table components.
The Form component for classic apps
A form to group and submit input fields.
The Funnel Chart component for classic apps
A content area to display funnel charts.
The Grid View component for classic apps
A repeatable grid of components with values that map to a list of data.
The Heat Map component for classic apps
A content area to display heat maps.
The Icon component for classic apps
A content area to display an icon.
The Icon Text component for classic apps
A content area to display an icon with accompanying text.
The Image component for classic apps
A content area to display an image.
The Image Grid component for classic apps
A content area to display images in a grid layout.
The JSON Explorer component for classic apps
A content area to display JSON data with collapsible nodes.
The JSON Schema Form component for classic apps
A JSON-defined form to group and submit input fields.
The Key Value component for classic apps
A content area for viewing and editing key-value data.
The Key Value component for classic apps
Display key-value information.
The Line Chart component for classic apps
A content area to display line charts.
The Link Card component for classic apps
A container preconfigured with an icon and text.
The Link component for classic apps
A link to trigger actions when clicked.
The Link List component for classic apps
A group of links to trigger actions when clicked.
The List View component for classic apps
A repeatable list of components with values that map to a list of data.
The Listbox component for classic apps
An input field to select an option from a list.
The LLM Chat component for classic apps
An interface for AI chat conversations.
The Looker component for classic apps
A content area to display a Looker dashboard.
The Mapbox Map component for classic apps
A content area to embed a map with custom locations.
The Microphone component for classic apps
A button to record audio.
The Mixed Chart component for classic apps
A content area to display mixed charts.
The Modal frame
A container that appears above other content.
The Month component for classic apps
A dropdown menu and input field to select or enter a month.
The Multiselect component for classic apps
An input field to select multiple options using a dropdown menu or manually enter values.
The Multiselect Listbox component for classic apps
An input field to select multiple options from a list.
The Navigation component for classic apps
A primary navigation menu with nested items to trigger actions.
The Number Input component for classic apps
An input field to enter a number.
The Outline Button component for classic apps
A button to trigger actions when clicked.
The Page Input component for classic apps
An input field to jump to a specific page of data.
The Pagination component for classic apps
A navigation menu to jump to a specific page of data.
The PDF component for classic apps
A content area to embed a PDF.
The Percent component for classic apps
An input field to enter a percentage number value.
The Phone Number Input component for classic apps
An input field to enter a phone number.
The Pie Chart component for classic apps
A content area to display pie charts.
The Plotly JSON Chart component for classic apps
A content area to display custom charts.
The Progress Bar component for classic apps
A content area to display a horizontal progress bar.
The Progress Circle component for classic apps
A content area to display a circular progress bar.
The QR Code component for classic apps
A content area to display a QR code.
The Radio Group component for classic apps
A group of radio buttons to select a single value.
The Range Slider component for classic apps
An input field to select a range of number values.
The Rating component for classic apps
An input field to select a rating.
The Reorderable List component for classic apps
A content area to display a list of text items that can be reordered when dragged.
The Retool Context object
Information about the current classic app.
The Rich Text Editor component for classic apps
An input field to enter text with rich formatting.
The Sankey Chart component for classic apps
A content area to display sankey charts.
The Scanner component for classic apps
An interface to scan a barcode or QR code using the device's camera.
The Scatter Chart component for classic apps
A content area to display scatter charts.
The Segmented Control component for classic apps
A segmented button to select an option from a list.
The Select component for classic apps
An input field to select an option using a dropdown menu or manually enter a value.
The Sidebar frame
A container that renders on the left-side of the viewport.
The Signature component for classic apps
An input field to digitally capture a signature as an image.
The Slider component for classic apps
A slider to select a number value.
The Spacer component for classic apps
An empty area to add space between components.
The Sparkline component for classic apps
A content area to display sparklines.
The Split Button component for classic apps
A dropdown menu with buttons to trigger actions when clicked.
The Split Pane frame
A container that divides the viewport into two resizable panes.
The Stack component for classic apps
A container to group other components together in a flexbox layout.
The Stacked Bar Chart component for classic apps
A content area to display stacked bar charts.
The Statistic component for classic apps
A content area to display primary and secondary number values with optional trend indicators.
The Status component for classic apps
A content area to display a status indicator.
The Stepped Container mobile component
A container to group other components into a series of steps.
The Steps component for classic apps
A group of steps that trigger actions when clicked.
The Stripe Card Form component for classic apps
An embedded Stripe card form.
The Sunburst Chart component for classic apps
A content area to display sunburst charts.
The Switch component for classic apps
An input field to toggle a boolean value.
The Switch Group component for classic apps
A group of switches to toggle boolean values.
The Tabbed Container component for classic apps
A container to group other components into tabbed views.
The Table component for classic apps
A table to display data that can be sorted, filtered, paginated, and edited.
The Tableau component for classic apps
A content area to display a Tableau visualization.
The Tabs component for classic apps
A group of tabs that trigger actions when clicked.
The Tags component for classic apps
A content area to display a set of tags.
The Text component for classic apps
A content area to display Markdown text or HTML content.
The Text Input component for classic apps
An input field to enter a single line of text.
The Theme object
Information about the current classic app theme.
The Time component for classic apps
An input field to select or enter a time.
The Timeline web component
Display a Gantt chart of events.
The Timer component for classic apps
A button to record elapsed time.
The Toggle Button component for classic apps
A toggle button to trigger different actions when clicked.
The Toggle Link component for classic apps
A toggle link to trigger different actions when clicked.
The Treemap component for classic apps
A content area to display treemaps.
The URL component for classic apps
An input field to enter a URL.
The Url object
Information about URL query and hash parameters currently in use.
The Video component for classic apps
A content area to display a video.
The Viewport object
Information about the canvas size in the current viewport.
The Waterfall Chart component for classic apps
A content area to display waterfall charts.
The Wizard component for classic apps
A container for a series of steps with multiple branches and outcomes.
The Year component for classic apps
A dropdown menu and input field to select or enter a year.
Usability features
Learn more about usability features.
Use Retool custom component library
Learn how to use the Retool custom component library with your custom component.
Use TypeScript API to configure custom components
Learn how to configure custom React components with TypeScript API.
Validate inputs and forms
Learn how to validate forms and input components.
Version and release classic apps
Learn how to version classic apps or revert changes to a previous state.
Write WebDriver tests
Learn how to write Cypress and Playwright tests against your classic apps.
Organization & users (1)
Permissions (2)
Manage per-page permissions in multipage classic apps
Learn how to configure page permissions in multipage classic apps.
Sharing classic apps with users and groups
Learn how to directly share classic apps with users and groups.
Queries (46)
Advanced query options
Learn how to use advanced query options.
AI resource queries
Learn how to create AI resource queries to generate text, analyze images, and process documents in Retool.
Ask AI and quick actions
Learn about Retool's built-in AI assistance.
Collect app usage analytics
Learn how to integrate with Segment or Google Analytics to collect usage data.
Configure query run behavior
Learn how configure the run behavior of app queries.
Create workflow functions to reuse queries and logic
Learn how to create workflow functions.
Dynamically query resources
Learn how to dynamically access various resources with one query.
Edit queries in VS Code
Connect your local Visual Studio Code development environment to Retool.
Explore database schemas
Learn how to explore database table schemas when writing queries.
Generate PDFs
Learn how to generate PDFs using the built-in PDF exporter resource.
Import and run a workflow from an app
The Retool Workflows query resource enables you to run a workflow from an app. This is useful for reducing complexity as it enables you to:
Interact with files
Learn how to store and retrieve files on data stores.
JavaScript
Write JavaScript in Retool.
JavaScript libraries
Reference documentation for available JavaScript libraries.
Preload custom JavaScript code and libraries
Learn how to preload custom JavaScript and libraries in apps.
Preloaded JavaScript libraries
Information about third-party JavaScript libraries preloaded for use in web apps.
Prepared statements
Learn how Retool uses prepared statements for SQL queries.
Queries and code concept guides
Learn about relevant features, functionality, and principles related to queries and code.
Queries and code documentation
Write functional code to power classic apps and workflows.
Queries and code example tutorials
Hands-on guides for example usage of queries and code.
Queries and code how-to guides
Step-by-step instructions for common queries and code usage.
Queries and code quickstart
Learn about the fundamental concepts of queries and code.
Queries and code reference
Reference documentation for queries and code.
Queries and code tutorials
Hands-on guides for writing queries and code.
Query and code glossary
Learn the meanings of query and code-related terms.
Query caching
Learn more about caching query results to increase app performance.
Query GraphQL APIs
Learn how to query GraphQL APIs.
Query JSON data with SQL statements
Learn how to use SQL statements to query JSON data.
Query Library
Learn more about creating and sharing queries with the Query Library.
Query performance
Learn about query performance at different stages.
Query performance best practices
Learn about the best practices for writing performant queries.
Query REST APIs
Learn how to connect and query REST APIs in Retool.
Read data from SQL databases
Learn how to construct queries to retrieve data from SQL databases and similar data stores.
Row-level security
Learn about row-level security of database tables.
Share queries with the Query Library
Learn how to import and export queries with the Query Library.
Store temporary data with variables and localStorage
Learn how to temporarily store data for apps.
The File Utils JavaScript library
JavaScript methods for parsing and uploading files.
The localStorage object
Store and retrieve data in the browser.
The Query object
Query information and data.
The Tools JavaScript library
JavaScript methods to reformat data.
The Utils JavaScript Library
JavaScript methods for interacting with apps.
The Variable object
Variables that store temporary state.
Transform data with JavaScript
Learn how to write JavaScript to manipulate data.
Write and run JavaScript
Learn how to run JavaScript in your Retool apps.
Write data to SQL databases
Learn how to construct queries to safely write data to SQL databases and similar data stores.
Write queries and code with Ask AI
Learn how to generate, edit, and fix queries with Ask AI.
Source control (8)
Catch-up commits in Source Control
Learn more about how Retool uses catch-up commits and how to disable them.
Create collaborative branches for app changes
Learn how to create collaborative branches for app changes in Source Control.
Keep branches up to date with branch merging
Learn how to use branch merging and resolve merge conflicts when using Source Control.
Manage Source Control branches
Learn how to view, edit, delete, and switch Source Control branches.
Multi-instance development with Source Control
Learn more about using multiple instances of your deployment with Source Control.
Multi-instance releases
Learn how to create and manage releases across instances
Protect classic apps with Source Control
Learn how to make changes to classic apps protected with Source Control.
Toolscript
Learn how Retool uses Toolscript to serialize apps.