# Module

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!](https://docs.quickdev.cloud/integrations)

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.

## Create a new Module

To access the module editor, simply click on "**New**" > "**Module**" located at the top right corner of the Admin Page.

<figure><img src="/files/qfDTalxz6yujHIwrbJwm" alt=""><figcaption></figcaption></figure>

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.

{% hint style="info" %}
Changes made within Modules will only be available and active for Apps utilizing the Module after the Module has been republished.
{% endhint %}

<figure><img src="/files/flOOTt7bLjjBgsshEYWT" alt=""><figcaption></figcaption></figure>

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.

## Integrating Modules into Apps or Other Modules <a href="#id-3-integrating-modules-into-apps-or-other-modules" id="id-3-integrating-modules-into-apps-or-other-modules"></a>

During the editing process of an App or Module, navigate to "Insert" > "Extensions" > "Modules" to reveal the available modules you have access to.

<figure><img src="/files/eVSkulIdIsHGL01m06BD" alt=""><figcaption></figcaption></figure>

Subsequently, drag and drop the module onto the canvas, configure input parameters, and adjust styles within the module's **Properties** panel.

<figure><img src="/files/HNlupN6ENIlpUOmLfwTG" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/Pu55LvoLmR4S3DMNzEjN" alt=""><figcaption></figcaption></figure>

## Module settings <a href="#id-4-module-settings" id="id-4-module-settings"></a>

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.

<figure><img src="/files/vcYDIiHay3tkAyiTY4Q6" alt=""><figcaption></figcaption></figure>

### Input

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.

#### Add a new Input

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.

#### Input Test

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

<figure><img src="/files/KA6mxCP5oBeLWuWqX3Zm" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Ensure that you remove any test data before publishing the Module.
{% endhint %}

### Output

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.

{% hint style="info" %}
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.)
  {% endhint %}

### Method

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.

#### Add new Method

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.

<figure><img src="/files/ZeBfKQbQp0xGcakoX0zo" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
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.
{% endhint %}

#### Call a Method

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

<figure><img src="/files/DgdpPOVhizLFS71GWLZ1" alt=""><figcaption></figcaption></figure>

#### Method Test

You can simulate method calling testing using the **Method Test** function.

### Event

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](https://docs.quickdev.cloud/applications/actions-editor/event-handlers).

#### Add a new event

Navigate to the **Settings** tab, then click on "**+ Add**" to generate a new module event. Subsequently, click on the event to specify its name.

#### Trigger an event

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()`.

#### Event handlers

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.

## Permissions

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.

## Releases and versions

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](https://docs.quickdev.cloud/applications/create-applications/version-and-release-management).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quickdev.cloud/applications/create-applications/module.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.