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.

Modules are an excellent solution for repeating complex parts of an application. We do not recommend using them for only several small components though, as reusing modules may increase the page load.

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 - change the name, if needed, switch on Public mode or copy an embed URL.

Working with a module

The Builder interface for modules is exactly the same as for applications. When you are working with a module, you will see the green module's icon combined with the regular UI Bakery icon.

You can drag the necessary components to the working area, add custom logic to your actions, and connect third-party libraries. 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.

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

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 App Data trigger with the last received value accessible in the {{app.data}} variable.

Sending data from a module to an app

To send the data from a module to an app, you can call the {{app.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.