Skip to main content

Build modules to reuse queries and components

Learn how to reuse groups of components and queries across apps.

A module is a type of app that can be embedded within other apps. You might use a module to reuse common components in multiple apps or split up common functionality into smaller parts. For example, you can use modules to:

  • Create common search filters
  • Build a navigation bar to use across all your apps
  • Share forms between apps
  • Break large, complex apps into smaller, more maintainable parts

Build a module​

You can create a module from scratch, by cloning a module from an app, or by copying components to a module. Once you've created your module, you can define it further with inputs and outputs.

Create modules​

To create a module, on your home page, select Create new > Module and give it a unique name. You can change the name any time in the App IDE.

After creating a module, assemble components using the same methods you would use to build an app.

Clone apps to modules​

Cloning an app to a module copies the app's components and queries to a new module, leaving the app unchanged. To clone an app from a module, click on the App actions menu and select Clone to module.

Copy components to modules​

To copy components to a module, select the components— + Click—to include and select Duplicate to module.

Add inputs​

Inputs are data or queries that can be passed into your modules from apps or other modules. A module input can be either a data input or a query input.

Data inputs​

A data input is a property—a string, object, number, or boolean—that apps can pass into your module.

To add a data input:

  1. With the Inspector open to Module settings, select + next to Inputs.
  2. Set the input Type to Data.
  3. Add an optional description or a default value.

Query inputs​

Query inputs allow you to pass queries into modules from parent apps. The module can then trigger these queries directly, calling them in event handlers and as success and failure trigger queries. For example, you might want to run different queries based on the parent app, helping your module's reusability.

Though query inputs are not defined in modules, you can view them in the query editor and add event handlers to them.

To add a query input:

  1. With the Inspector open to Module settings, select + next to Inputs.
  2. Set the input Type to Query.
  3. Add an optional description.

Trigger module queries from parent apps​

Query inputs are used to trigger queries within a module, not from the parent app defining the query. If you need to trigger a module's query from its parent app, you can use data inputs.

  1. In your module, create a data input. You'll use this input to watch for changes from the parent app.
  2. In your module, use the Query JSON with SQL resource to write a query which runs automatically when your data input changes. The result of this query won't be used. For example, given input1 as a data input, the query could be:
select id from {{ input1.value }}
  1. In your module, define the query you want the parent app to trigger. In the Query JSON with SQL query, trigger this query as a Success event handler.
  2. In the Inspector of your parent app, pass data to the module's data input. To trigger the module query based on the result of a query, set the data input to {{ queryName.data }}. The module will watch for changes to queryName.data.
Pass data to data inputs from parent app

To test out this behavior, download and import the JSON of an example module using data inputs.

Test inputs with sample values​

Because module inputs are controlled by the app using a module, to preview your module you may want to pass through test values. When you select the module container, the right panel of the App IDE shows a Test inputs section. There, you can test your module's behavior given expected values for each of your inputs.

Add outputs​

Outputs are properties that apps using your module can reference. Outputs are the only data within a module exposed to apps using your module.

To add an output:

  1. With the Inspector open to Module settings, select + next to Outputs.
  2. Enter the value of your output in the Value field. This value can use any data within the module. In the following example, the output is a value from the selected search filter.
  3. Add an optional description.

Use modules with apps and other modules​

Modules can be used and imported into apps and other modules, exported to JSON, and exported as apps.

Add modules to apps and other modules​

To add a module to your app or module:

  1. Click Add in the top left and go to the Modules tab.
  2. Search for or find your module, and drag it onto the canvas.
  3. If the module requires inputs, click on the module and add them in the Content section.

Import and export modules in JSON​

You can import and export modules using JSON the same way you would import and export an app.

Importing a module from an existing app or module replaces the app with the imported module. To import a module into an existing app or module, go to the App actions menu and select Import app from JSON.

You can also import a module from your home page by selecting Create new > From JSON.

Module sizing​

You can set default dimensions of your module by resizing the blue container in the App IDE. Components within this container automatically resize the same as they resize in apps, including dynamically based on their contents using the Hug Contents option in the Inspect tab.

Module permissions​

Users who can view an app can view any modules used in that app. Users must have write access to a module to edit it, even if the user has edit access to an app using the module.

Users who can edit a module can add the module to apps.

Releases and versions​

Apps always use the latest version of any contained modules.

To revert a module to a previous state, go to Module actions > Release and history > History and select Revert next to the state to restore. This updates the module in all apps using the module.