Modules let you reuse groups of components and queries between Retool applications.

Quickstart

  1. On the Retool Apps page press Create new → Create a module
Create a module from the home screenCreate a module from the home screen

Create a module from the home screen

  1. Define Inputs and Outputs for your module. Inputs are values that can be passed into the module from a parent application. Outputs are how parent applications can read data from a module’s internals.

  2. Drag your modules into applications the same way you’d grab regular components.

Working with Modules

View all settings—inputs/outputs configuration, usage of your module—in the left-hand panel:

Inputs

Modules have two types of inputs: data and query.

Data Inputs

Data inputs let you specify any kind of input (ex: string, number, boolean, etc.), including double curly braces {{ }} like most other inputs inside Retool. Not all apps will have inputs to provide. Configure default values for your data inputs by clicking on the edit icon:

Query inputs

Query inputs are how applications using modules can pass in queries that the module can then trigger. When you create a query input, Retool will create a dummy query where you can configure additional properties (e.g. transformer, onSuccess) for the query that application(s) will pass in. When a query input is renamed, the created dummy query is also renamed.

Testing

You can test various module inputs directly in the module by clicking on the module container. When doing so, the right-hand inspector panel will show what you would see in a parent application when clicking on a module.

You can test different values for your data and query inputs here. Hitting the “Reset” button will reset all of these test values to the empty state.

Outputs

Module outputs let you expose data from inside your module to the containing application.

An app using the above module can refer to the module’s output the same way you might refer to a component or query property:

Sizing your module

Set the dimensions of your module by resizing the blue container. The size will be the default size of the module when you drag your module onto the canvas in an application. Just like resizing a regular Container component, all components inside the Module container will also resize.

Permissions

Users that have access to an application will automatically have access to all modules used in that application. Editors with "Use" access to a module will be able to add the module to applications.

📘

Please send us feedback!

We’re planning on adding more restrictive permissions in the future. If you have ideas on how you’d like Modules permissions to work, drop us a note at [email protected]

Create a module from an app

Convert an existing application to a module by clicking the “Export to module” button:

Duplicate a container to a module by clicking on the “Turn component into module”

Duplicate a selection to a module by clicking “Duplicate to module”

Importing and Exporting

Modules can be imported and exported in your organization like regular applications. If an app containing modules is imported, and the modules are missing for any reason, the missing modules will automatically be created.


Did this page help you?