Reuse queries and components

A module is a reusable group of components and queries. 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 a module

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 editor.

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

Clone an app to a module

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

Copy components to a module

To copy components to a module, select the components—Cmd + Click (or Ctrl + Click on Windows)—you'd like 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. Modules inputs are a separate concept from component inputs and 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. On the State tab in the left panel, select + Add input.
2. Set the input Type to Data.
3. Add an optional description or a default value.

In the following example, filterType and filterOptions are data inputs used to populate the Select component.

Query inputs

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

To add a query input:

1. On the State tab in the left panel, select + Add input.
2. Set the input Type to Query.

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

In the following example, createNewDeal is a query input. Using createNewDeal as a query input allows parent apps to pass their own queries to the module. In the module, the input queries can be used in event handlers and given success and failure trigger queries.

When the Create app button is clicked in the module, the createNewDeal query from the parent app is called.

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 }}

3. 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.
4. In your parent app, set the module's data input. For example, to trigger the module query based on the result of a buttonClick query, set the data input to be {{ buttonClick.data }}. The module will watch for changes to buttonClick.data.

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 editor 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. On the State tab in the left panel, select + Add output.
2. Enter the value of your output in the Value field. This value can use any data within the module—in the below example, the outputs are values from the selected search filters.
3. Add an optional description.

In apps which use your module, you can refer to outputs using the naming convention {{ moduleName.outputName }}. In the parent app, you can confirm this value by viewing the module in the State > Components section, where you should see the output within the module object.

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. In the right panel under Create, select Modules and find the module you'd like to add. Modules appear in the App editor with a purple background.
2. If the module requires inputs, go to Inspect > moduleName > Basic and add values to any inputs.

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 editor. 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.