Modules

A module is a powerful tool that enables the creation of fully fledged applications that can be later reused across other applications within your workspace. It serves as a time-saving solution for complex blocks of logic that need to be reused in multiple applications.

A module is created as a separate application, and it can seamlessly communicate with a parent application, sending and receiving events.

Creating a module

You can create a module from the Workspace dashboard using the Create new menu in the bottom left corner.

A new window will open where you should give your module a meaningful name that will be used further in development and confirm the creation. The newly created module will be added to the list of your applications.

From there, you can access the module's settings to modify the name or activate Public mode. Public mode makes the module available to unauthorised users, which is necessary if the module is used in a public app.

Working with a module

When working with a module, you’ll notice a green module icon combined with the regular UI Bakery icon.

The Builder interface for modules differs from the one used for applications. Unlike applications, modules don’t have pages or render settings. Instead of body modules have a moduleContainer component which acts as the host for module content. The module container's width is customizable. You can set a default width for all modules, which can then be adjusted individually for each instance

You can drag components into the module container, define custom logic for your actions, and integrate third-party libraries as needed. Once you are done developing a module, you can release your changes to Staging and/or Production, publish a Draft release, as well as revert to an older version from the Release history.

Users can access modules based on their permissions. The permissions for modules are set in the same way as for apps.

Using a module inside an app

Once you've developed and released your module, you can use it inside any of your applications. To add a module to an app, follow these steps:

1. Open the app you need and navigate to the Modules subtab (of the Components tab) in the left side panel.

2. Select the module you want to use and drag it into the working area.

You will notice that unlike regular components that are highlighted in blue, the whole module is highlighted in green.

1. Click the Edit module button in the right side panel to make changes to the module. You will be redirected to a new page where you can make the necessary changes, release them, and get back to the application.

2. Click the Reload button in the right side panel to refresh the changes in the module.

Communicating with an app

In this section, we'll review two ways of communicating with an app via a module - sending data from the app to the module and vice versa.

Sending data from an app to a module

You can send the data to a module by calling the {{ui.module.setData({userId:1})}} method. Alternatively, you can also set the module data in its Data field.

Then, in the module, you can also subscribe to the On Data trigger with the last received value accessible in the {{module.data}} variable.

Sending data from a module to an app

To send the data from a module to an app, you can call the {{module.triggerEvent({data:'from module'})}} method from any module's code step.

Then, in the app, you can subscribe to the module's On Event trigger, with the last received value accessible in the {{ui.module.value}} variable.