---
title: "Modularizing Applications"
slug: "modularizing-applications"
description: "Modularizing applications enhances reliability and scalability by creating reusable modules, reducing complexity, and improving maintainability."
updated: 2026-01-05T19:18:19Z
published: 2026-01-06T19:09:42Z
canonical: "docs.unqork.io/modularizing-applications"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Modularizing Applications

**Modularizing applications** increases system reliability and scalability while reducing complexity. To modularize your applications, separate them into small, reusable modules by patterns in your configuration. Designing these modules to function independently lets you import them into other modules to execute specific application functionality. For example, you might have a search bar that displays on multiple pages of your application. Instead of implementing multiple search bar modules, a single, reusable search bar module is built instead.

## Identifying Configuration Patterns

Modularizing an application requires identifying repeating patterns and shared functionalities. For example, a single drop-down component or a search field might be required across multiple modules. Identifying these similarities lets you build efficient, scalable applications.

When evaluating your configuration for modularity, consider the following:

- Does the same header exist throughout the application?
- Is the footer identical across all modules?
- Is the same navigation required in different locations?

If a functionality repeats, build it into a function-specific module.

### Modularization Example

Building the following application without modularity requires three dashboards and 18 individual modules. By identifying overlapping functions, you can consolidate these elements into reusable components.

#### Dashboard Requirements

- **Dashboard 1**: Header, side navigation, search, filtering, inbox dashboard (grid and content), and footer.
- **Dashboard 2**: Header, side navigation, search, inbox dashboard (grid and KPIs), and footer.
- **Dashboard 3**: Header, side navigation, progress bar, search, filtering, inbox dashboard (grid and KPIs), and footer.

#### Shared Functionality

The similarities between these dashboards allow for the creation of eight function-specific modules:

- Header
- Footer
- Navigation
- Search
- Filter
- Progress bar
- Inbox dashboard
- KPI dashboard

## Creating Reusable Modules

Using the filter function example, consider modules designed to filter information by date. To ensure reusability, this module must function independently of other modules. After configuration, Creators can import the date filter module into another module.

### Naming Conventions and Property IDs

Maintain strict naming conventions for all modules and components. Names must be clear and specific to their functionality to avoid configuration conflicts.

> [!WARNING]
> Duplicate component names or **Property IDs** prevent successful module imports. For example, if two modules contain a Plug-In component with the Property ID of `pluginGetSubmissions`, the platform returns a duplicate component name error during the import process. Ensure every component in your reusable modules has a unique Property ID.

### Conceptual Module

The following images illustrate a completed function-specific module. This example is conceptual and intended to demonstrate the structure of a modularized application.

- **Module Builder View**: This view displays the logic and components of the standalone filter module.

![User interface for date range filtering with validation messages and calculation options.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/modularizingModules.webp?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A09Z&se=2026-11-09T04%3A51%3A09Z&sr=c&sp=r&sig=mAM6%2Fiz0h%2FuBVwwMY%2Bjkc0sRDouv5yuJtj6%2BPgAEQXg%3D)
- **Express View**: Express View displays the module as it appears to an end-user.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Modularity_02_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A09Z&se=2026-11-09T04%3A51%3A09Z&sr=c&sp=r&sig=mAM6%2Fiz0h%2FuBVwwMY%2Bjkc0sRDouv5yuJtj6%2BPgAEQXg%3D)
- **Module List View**: This list view displays all function-specific modules required for the application. Each module and its internal components use unique naming conventions to support seamless integration.

![Overview of modularized application elements with search and navigation features highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/modularizingModulesList.webp?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A09Z&se=2026-11-09T04%3A51%3A09Z&sr=c&sp=r&sig=mAM6%2Fiz0h%2FuBVwwMY%2Bjkc0sRDouv5yuJtj6%2BPgAEQXg%3D)

## Building an Application Using Modularity

To import a module into another module, use the [Panel](/v1/docs/panel-component) component to reference another module by its name. For example, you can import a module named **Filter Status** into **Dashboard 1**.

These instructions assume you have a module open, saved, and with a title.

> To import modules with content that must be refreshed, view our [Dynamic Refresh](/v1/docs/dynamic-refresh) article.

### Importing a Module Using a Panel Component

Configure a [Panel](/v1/docs/panel-component) component to reference an external module. By default, the Panel component's **Update Type** is set to **Automatic**, ensuring any changes made to the source module automatically reflect in the host module.

To set up the Panel component:

1. In the Module Builder, drag and drop a **Panel** component onto your canvas.
2. In the **Property ID** and **Canvas Label Text** fields, enter a unique and descriptive ID. For example, `panelFilter`.
3. Set **Import Module** to ![A toggle switch icon indicating an on state for user interface settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggledOn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A09Z&se=2026-11-09T04%3A51%3A09Z&sr=c&sp=r&sig=mAM6%2Fiz0h%2FuBVwwMY%2Bjkc0sRDouv5yuJtj6%2BPgAEQXg%3D) **(ON)**.
4. From the **Module** drop-down, select the module you'd like to import. For this example, select **Filter Status**.

![Panel settings for importing modules with options for reference and update types.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/modularizingModulesPanelFilter.webp?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A09Z&se=2026-11-09T04%3A51%3A09Z&sr=c&sp=r&sig=mAM6%2Fiz0h%2FuBVwwMY%2Bjkc0sRDouv5yuJtj6%2BPgAEQXg%3D)
5. Click **Save Component**.
6. **Save** your module.

After saving, the imported module’s module ID displays below the component's Property ID. Select the **Preview Module** link to open the imported module in a new tab for editing.

### Modularized Dashboard

When all reusable modules are imported into Panel components, the host dashboard contains minimal unique configuration. Most of the dashboard's functionality is derived from function-specific modules:

![Dashboard layout displaying various panel components and their imported modules.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/modularizingModulesMBView.webp?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A09Z&se=2026-11-09T04%3A51%3A09Z&sr=c&sp=r&sig=mAM6%2Fiz0h%2FuBVwwMY%2Bjkc0sRDouv5yuJtj6%2BPgAEQXg%3D)

Modularization eliminates redundant configurations and improves application maintainability by centralizing core logic in dedicated modules.

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .