Modules

A module is a powerful tool that enables the creation of fully-fledged applications, which can later be reused across other applications within your workspace. The module 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 can seamlessly communicate with a parent application, sending and receiving events.

Please note that a module is an excellent solution for repeating complex parts of an application. We do not recommend using it for just a couple of small components, as re-using these modules may increase the page load.

Creating a module

To create a new module, click the Create app button in the bottom left corner and choose Create module from the dropdown.

In the new window, give your module a meaningful name that will be used further in the development, and confirm the creation. The name can be later changed in the module's settings if required.

The public mode and an embed URL are also available in the module's settings:

Working with a module

The interface of the builder for the modules is exactly the same as the one for the app development. When you are working in a module mode, you will see the green module's icon combined with the regular UI Bakery icon:

You can drag the necessary components onto 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 the application

Once you've finished 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 required application, choose a spot where a module should be included;

2. Open the module's list. It is available between the components and generators icons:

1. Select the module you would like to use and drag it on to the working area. You will notice that unlike the regular components that are highlighted in blue, the whole module is highlighted in green.

2. If you need to edit the module, click the Edit button in the right menu. You will be redirected to a new page. Make the required changes, release them, and get back to the application.

3. Make sure to click the Reload button to refresh the changes in the app.

Communicating with the application

Sending data from an app to the module

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

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

Sending data from a module to an app

To send the data from a module to an app, you can call the method {{app.triggerEvent(data)}} 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 variable {{ui.module.value}}.