Skip to main content

UI Module Instance

Business

When you add a UI Module from a package into your application, you create a UI Module Instance. Each instance acts as a reusable, self-contained UI component that can be configured dynamically without modifying the internal structure of the module.

You can create multiple instances of the same UI Module with different input values and settings. Instances are named sequentially (e.g., customerProfile1, customerProfile2) for easier identification.

This page provides information about the settings and properties available for configuring a UI Module Instance.

Image

Properties​

These properties are only available if they are defined in the UI Module.

Inputs​

Allows you to pass dynamic values from the application into the UI Module Instance. Inputs listed at the instance level are automatically generated based on the Inputs defined when the UI Module was created.

Inputs enable you to dynamically populate widget properties, run queries, or execute JavaScript logic inside the module based on the data you provide from the app.

You can bind static values, widget outputs, query results, or app/user data into Inputs using JavaScript bindings.

Example: If you want to pass customer details fetched from a query into the module, you can bind the input like:

{{getCustomerDetails.data.name}}

Then inside the module, the corresponding widget (e.g., Input1) can use:

{{inputs.customerName}}

Outputs​

Outputs allow your app to receive data from a UI Module. You can use outputs to access values like user input, results, or internal state from the module. These values are defined inside the module and become available in your app when you use the module instance.

You can access outputs using the module instance name followed by .outputs.outputName:

{{ModuleInstanceName.outputs.outputName}}

Example: If you want to display data from a module in a Table widget on your application:

// In your Table widget's Data property:
{{DataModule1.tableData}}

This allows you to populate application tables with data processed or filtered inside your module without exposing the internal implementation details.

Example: To use an authentication token generated by a login module in your API calls:

// In an API Header configuration
{
  "Authorization": "Bearer {{LoginModule1.authToken}}"
}

By effectively using module outputs, you can build applications from reusable, encapsulated components while maintaining clean integration between them.