One of the mostpowerful concepts of Lowcoder isModules. Lowcoder Modules are Applications, that can getincluded and repeated in other Applications. You can insert a module into an app or other modules (referred to asexternal apps in the rest of this document) and it functions just like a single component. Also, Modules can getintegrated/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.

Module basics

Create a new module

SelectNew > Module at the top right of the Admin Page to enter the module editor.

Editing of Layout, Components, and Data Queries

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.

Toggle the button in theProperties panel to control whether thecomponent height scales with the container. This only works for the fixed-height components within the module.

Insert module to apps or other modules

When editing an App or Module, selectInsert > Extensions > Modules to display the modules that you have access to.

Then drag and drop the module onto the canvas, set input parameters, and change styles inside the module'sProperties panel.

The horizontal size is free to choose from. However, the Module inside considers the bounding box size as 100% of its horizontal size.

Module settings

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 aresetTitle method, 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 nameddataChanged, so that external apps can add event handlers to it once thedataChanged event is fired by the module.

Module settings

Input

Module inputs are parameters passed to the module from external Apps. The supported input types aredata,string,number,array,boolean, andquery. The first five are data types. Choosedata to not restrict it to a specific data type. When choosing the type ofquery, you can pass in a query from external apps and trigger it inside the module. Then you can reference a module input parameter by itsname.

Add a new Input

In theSettings tab (green), click+Add to create a newinput. Click the input to rename it and select a data type.

Input Test

To quickly test the effectiveness of Input parameters during editing a Module, you can use theInput Test function. In theModule Editor, select the whole Module to conduct tests with simulated input data in theProperties panel of the Module (blue).

Output

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.

Method

Methods are used to call functions / action in a Module from outside - your App or Webpage where you embed a Module.

Add a new Method

In theSettings tab, click+Add to create a new Module Method. Click the Method to rename it and select an action.

Call a Method

When using modules, you can call a module method in two ways:

• In event handlers, selectAction >Control component, and then select thecomponent andmethod.

• Use dot notation in JavaScript queries. For example,module1.clearAll() calls the methodclearAll() ofmodule1.

Method Test

You can simulate testing method calling in theMethod Test function.

Event

Events are used to transfer signals from a module to external apps, such as definingorderPlacedOrderModified events for an order management module. You can add and fire events within a module, and deal with them usingEvent Handlers externally.

Add a new event

In theSettings tab, click+Add to create a new module event. Click the event to set its name.

Trigger an event

In the following example, the eventcontentChange is triggered when the content in any input box changes. You can trigger it in two ways:

• InEvent handlers of both input components, click+ Add, selectChange as the component event andTrigger module event as the action, and finally select the module eventcontentChange.

• Use dot notation in JavaScript queries:contentChange.trigger().

Event handlers

When an app uses a module, you can configure how the current app reacts to the module's events. For example, inEvent handlers ofmodule1, click+ Add, and select the module eventcontentChangeand the actionShow notification.

Event Test

The following example conducts event tests in theEvent Test section.

Demo

Permissions

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.

Releases and versions

Lowcoder stores the historical versions of your modules for your reference. ClickPreview > Publish at the top right. The release management of a module is identical to that of an app. For detailed information, seeversion history.

Last updated11 months ago