One of the most powerful concepts of Lowcoder is Modules. Lowcoder Modules are Applications, that can get included and repeated in other Applications. You can insert a module into an app or other modules (referred to as external apps in the rest of this document) and it functions just like a single component. Also, Modules can get integrated/embedded natively in other Web Applications!
When building an app, you want to reuse a bundle of components and queries across different apps. Imagine a User-Profile Card. Profile-Image, Name, Contacts. If you create these Elements inside of a Module, you can integrate this in all other Apps as it would be a single component.
Select New > Module at the top right of the Admin Page to enter the module editor.
Create a new Module like a normal App
There are no differences in editing a Module or App other than the Module Settings. Placement of Components and Dataqueries behaves the same as in the App Editor. You can insert components and create queries the same way as your normal App-building process.
In the Module Editor, you can resize a module by dragging the bottom-right corner to the desirable default size. Be aware, that the screen in the editor does not show the real horizontal size of the module, as this size is defined at the App, where the Module is placed.
{% hint style="info" %} Any changes you made at Modules are only available and active for Apps that use the Module after the new publishing of the Module! {% endhint %}
Modules get created and edited as normal Apps.
Toggle the button in the Properties panel to control whether the component height scales with the container. This only works for the fixed-height components within the module.
When editing an App or Module, select Insert > Extensions > Modules to display the modules that you have access to.
You can select available modules in the Extension Panel
Then drag and drop the module onto the canvas, set input parameters, and change styles inside the module's Properties panel.
Modules are placed liko other Components too
The horizontal size is free to choose from. However, the Module inside considers the bounding box size as 100% of its horizontal size.
The Module Width scales by the placement in the App
As modules can get embedded, they need to be able to interact with outside apps or websites. There are four elements to support communication with a Module.
- Inputs: dynamic parameters passed into the current module from external apps.
- Outputs: set data exposed to external apps.
- Methods: methods exposed to external apps. For example, you can define a module with a
resetTitlemethod, so that external apps can call it to reset the module's title. - Events: module events can be handled by external apps. For example, you can define an event named
dataChanged, so that external apps can add event handlers to it once thedataChangedevent is fired by the module.
Modules have Settings & possibility to test these - to communicate with the outside App or Website.
Module inputs are parameters passed to the module from external Apps. The supported input types are data, string, number, array, boolean, and query. The first five are data types. Choose data to not restrict it to a specific data type. When choosing the type of query, you can pass in a query from external apps and trigger it inside the module. Then you can reference a module input parameter by its name.
In the Settings tab (green), click + Add to create a new input. Click the input to rename it and select a data type.
To quickly test the effectiveness of Input parameters during editing a Module, you can use the Input Test function. In the Module Editor, select the whole Module to conduct tests with simulated input data in the Properties panel of the Module (blue).
Modules can receive dynamically input data
{% hint style="info" %} Make sure, that you remove any test data when you publish the Module. {% endhint %}
Module outputs are the data exposed to an app or other modules. You can inspect the outputs of a module in the data browser and access them via JavaScript code in {{ }}. Then you can check out and reference the outputs of a module in apps or other modules using it.
{% hint style="info" %} We suggest to chose output data names carefully.
- Make sure they express the module origin
- Make sure they express the inner source (from data, from action etc.) {% endhint %}
Methods are used to call functions / action in a Module from outside - your App or Webpage where you embed a Module.
In the Settings tab, click + Add to create a new Module Method. Click the Method to rename it and select an action.
From an App, one can call Methods of a embedded Module.
{% hint style="warning" %} When creating a Method for a Module, you cannot create input parameters for the Method and can only reference parameters within the scope of the current Module. {% endhint %}
When using modules, you can call a module method in two ways:
- In event handlers, select Action > Control component, and then select the component and method.
- Use dot notation in JavaScript queries. For example,
module1.clearAll()calls the methodclearAll()ofmodule1.
In the App, Methods of an embedded Module are accessible like for other Components.
You can simulate testing method calling in the Method Test function.
Events are used to transfer signals from a module to external apps, such as defining orderPlaced OrderModified events for an order management module. You can add and fire events within a module, and deal with them using Event Handlers externally.
In the Settings tab, click + Add to create a new module event. Click the event to set its name.
In the following example, the event contentChange is triggered when the content in any input box changes. You can trigger it in two ways:
- In Event handlers of both input components, click + Add, select Change as the component event and Trigger module event as the action, and finally select the module event
contentChange. - Use dot notation in JavaScript queries:
contentChange.trigger().
When an app uses a module, you can configure how the current app reacts to the module's events. For example, in Event handlers of module1, click + Add, and select the module event contentChangeand the action Show notification.
The following example conducts event tests in the Event Test section.
End users are automatically granted permission to view modules in apps or other modules they have viewing permissions with. If you are an editor and wish to use a module in external apps, you should at least have the viewer's role of that module.
Lowcoder stores the historical versions of your modules for your reference. Click Preview > Publish at the top right. The release management of a module is identical to that of an app. For detailed information, see version history.
{% hint style="info" %} For an unpublished module, the apps and modules use its latest version; while for a published one, you need to publish it again to sync your latest changes. {% endhint %}