Skip to main content

Configuring Inputs and Outputs

Modules have their own inputs and outputs which enable them to interact with the parent application. You can configure inputs and outputs of a module from the properties panel.

Inputs​

Inputs allow the parent application to send data or trigger actions inside the module. You can access inputs in the module using the input object.

Input Types​

  • Data: Use this to pass values like string, number, boolean, array, or object.
  • Query: Use this to trigger queries inside the module from the parent app.
Input Types

How to Define Inputs​

In the properties panel, go to the Inputs section and click Add new. Then, provide the following:

Data Input​

For Data inputs, define the following parameters:

  • Name: A unique name for the input
  • Type: Select Data
  • Default Value (optional)

For example, to pass a form title from the parent application, create an input with the name formTitle and type Data. You can also set a default value.

Module Input

To use this input in the module, use the following syntax:

{{input.<input_name>}}

For our case, we’ll use {{input.formTitle}} to access the form title in the component.

{{input.formTitle}}

When you import this module into an application, you’ll see the input field in the module settings. If you set the formTitle value to User Details, the form will display that as the title.

Input Settings

Query Input​

For Query inputs, define the following parameters:

  • Name: A unique name for the input
  • Type: Select Query

For example, if you want to trigger a query named submitForm from the parent application, create an input named submit and select Query as the type.

Query Input

To handle this input in the module, add an event handler to a component that should trigger the query. Set the action to Run Query and select the query as the input (e.g., submit) from the dropdown.

Event Handler

When you import the module into an applications, you’ll see the query input in the module settings. You can then select any available query in the parent application to be triggered.

Query Input Settings

Testing Inputs​

You can test how a module behaves before importing it into an application in the Test Input section in the properties panel of the module builder. To do this, open the module's properties panel and scroll to the Test Input section. Enter sample values for each input.

For example, if the module has an input named formTitle, you can enter a sample value like User Details to see how it's rendered in the module.

You can also test query inputs by creating a query inside the module builder and triggering it using the defined query input.

Test Input

Outputs​

Outputs allow the module to send data back to the parent app. You can access outputs from the module in the parent application using the components object.

For example, if you want to send submitted form data back to the parent application, create an output named formData and pass the form data From the component.

Module Output

To access this output in the parent application, use the following syntax:

{{components.<module_name>.<output_name>}}

In this case, use the following reference to access the form data.

{{components.formModule.formData}}
Output Consumption

To explore more on how data flows between modules and apps, check out Data Flow guide.