Modules

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.

Create new moduleCreate new module

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.

Clone app to moduleClone app 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.

Export components to a new moduleExport components to a new 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.

Add module data inputAdd module data input

Query inputs

Query inputs allow you to pass in and trigger queries from existing apps. For example, you might want to use a query input to pass in 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. The parent app defines createNewDeal, which can be used in event handlers and given success and failure trigger queries. Setting createNewDeal as a query input allows parent apps to use this module with their own queries.

Add module query inputAdd module query input

🚧

Trigger module queries from a parent app

Modules are designed to be imported in any app where they're passed the proper inputs. However, if you need to trigger a query inside a module based on actions in the app using the module, you can find instructions in our community forum.

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.

Module test inputsModule test 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.

Add module outputsAdd module outputs

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.

Use module in appUse module in app

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.


Did this page help you?