Module
Last updated
Last updated
One of the most powerful concepts of QuickDEV is Modules. QuickDEV Modules are essentially applications that can be included and replicated within other applications. You have the capability to insert a module into an app or other modules (referred to as external apps in the remainder of this document), and it operates just like a single component. Moreover, Modules can be seamlessly integrated or embedded natively within other web applications!
When constructing an app, the aim is often to reuse a set of components and queries across different apps. Consider a User-Profile Card comprising elements such as Profile Image, Name, and Contacts. By creating these elements within a Module, you can seamlessly integrate them into all other apps as if they were a single component.
To access the module editor, simply click on "New" > "Module" located at the top right corner of the Admin Page.
Editing a Module or App is essentially the same, except for the Module Settings. The placement of Components and Data Queries operates identically to the App Editor. You can insert components and create queries using the same methods as in your typical App-building process.
Within the Module Editor, you can adjust the size of a module by dragging its bottom-right corner to your preferred default size. However, it's important to note that the screen size within the editor doesn't accurately reflect the module's real horizontal size. This dimension is defined at the app level where the module is ultimately placed.
Changes made within Modules will only be available and active for Apps utilizing the Module after the Module has been republished.
You can control the component height scales with the container by toggling the button in the Properties panel. This feature is applicable only to fixed-height components within the module.
During the editing process of an App or Module, navigate to "Insert" > "Extensions" > "Modules" to reveal the available modules you have access to.
Subsequently, drag and drop the module onto the canvas, configure input parameters, and adjust styles within the module's Properties panel.
You have the freedom to choose the horizontal size as desired. However, the Module inside maintains the bounding box size at 100% of its horizontal size.
For effective embedding, modules are capable of interacting with external apps or websites. There are four essential elements to facilitate communication with a module.
Inputs: dynamic parameters passed into the current module from external apps.
Outputs: set data exposed to external apps.
Methods: external apps can interact with modules through exposed methods. For example, you might define a module with a changeTitle method, allowing external apps to call it and change the module's title.
Events: module events can be managed by external apps. For instance, you can specify an event like stockChanged, allowing external apps to attach event handlers to it once the module fires the stockChanged event.
Module inputs are parameters sent to the module from external apps. They support various input types including data, string, number, array, boolean, and query. Four of them represent basic data types, with "data" being chosen to avoid constraining it to a specific data type. When selecting the query type, external apps can pass in a query and trigger it within the module. Subsequently, you can reference a module input parameter by its assigned name.
Within the Settings tab (marked in green), click on the "+ Add" button to generate a new input. Then, click on the input to rename it and designate a data type.
To swiftly assess the functionality of Input parameters while editing a Module, utilize the Input Test feature. Within the Module Editor, select the entire Module to perform tests with simulated input data in the Properties panel of the Module (highlighted in blue).
Ensure that you remove any test data before publishing the Module.
Module outputs consist of data made accessible to an app or other modules. You can examine the outputs of a module in the data browser and access them via JavaScript code enclosed in {{ }}. Subsequently, you can inspect and reference the outputs of a module in apps or other modules that utilize it.
We recommend carefully selecting output data names.
Make sure they express the module origin
Make sure they express the inner source (from data, from action etc.)
Methods are used to initiate operations or actions within a Module from external sources, such as your App or the webpage where the Module is embedded.
Within the Settings tab, click on the "+ Add" button to generate a new Module Method. Then, click on the Method to rename it and specify an action.
When creating a Method for a Module, you're unable to establish input parameters for the Method. You can only reference parameters within the scope of the current Module.
When employing modules, you can invoke a module method in two distinct ways:
Within event handlers, you can select Action > Control component, and then proceed to choose the component and method accordingly.
When using JavaScript queries, remember to apply dot notation. For instance, module1.clearAll() invokes the method clearAll() of module1.
You can simulate method calling testing using the Method Test function.
Events facilitate the transmission of signals from a module to external apps. For instance, you might define events such as orderPlaced or OrderModified within an order management module. These events can be added and triggered within the module, while external apps can handle them using Event Handlers.
Navigate to the Settings tab, then click on "+ Add" to generate a new module event. Subsequently, click on the event to specify its name.
In the provided example, the event contentChange is activated whenever the content within any input box changes. You can initiate it in two manners:
Within the event handlers of both input components, follow these steps: click on + Add, choose Change as the component event, select Trigger module event as the action, and finally, opt for the module event contentChange.
Using dot notation in JavaScript queries is essential. For instance, you have the option to trigger the contentChange event as follows: contentChange.trigger().
When an app incorporates a module, you may specify how the current app responds to the module's events. For example, within module1's Event handlers, you can add an action by clicking + Add, then selecting the module event contentChange and choosing the action Show notification.
End users are automatically granted permission to view modules in apps or other modules they have viewing permissions with. However, if you're an editor and want to utilize a module in external apps, you should have at least the viewer's role for that module.
QuickDEV retains historical versions of your modules for reference purposes. To access this feature, click on "Preview" > "Publish" located at the top right corner. The release management process for a module mirrors that of an app. For more detailed information, consult the version history.
