--- title: "Introduction to Structuring Modules" slug: "introduction-to-structuring-modules" updated: 2025-09-25T21:20:58Z published: 2025-09-25T21:20:58Z canonical: "docs.unqork.io/introduction-to-structuring-modules" --- > ## 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. # Introduction to Structuring Modules UDesignerClassic Designer ## Overview **Structuring** **module****s** helps maintain simplicity for creators, and presents a unified experience for end-users. Creators structure components by uniformly organizing a [module's](/v1/docs/what-is-a-module) layout. This includes placing [input and output components](/v1/docs/logic-components-input-output-types) above and below your logic components and using [Display & Layout components](/v1/docs/introduction-to-display-layout) to group your components by relationship. ## Display and Layout Components Unqork uses grouping and layout components that add structure to your modules. Examples of organization components include **[![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(18).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D)](//docs/columns-component)** [**Columns**](/v1/docs/columns-component), [**Panel**](/v1/docs/panel-component), [**Table**](/v1/docs/table-component), **[![Navigation Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/navigation_teal_component(2).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D)](//docs/navigation-component)** [**Navigation**](/v1/docs/navigation-component), and [**Field Group**](/v1/docs/field-group-component). These components help you nest other components. You'll find these components in the [Display & Layout component](/v1/docs/display-layout) group of the [Module Builder](/v1/docs/introduction-to-the-module-builder). The image below shows how the **P****anel** and **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(18).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D) Columns** components organize other components into easy-to-read groups. [![A static image displaying a module that uses Panel and Column components to organize other components.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Structure_PanelColExample_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Structure%20PanelColExample.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D) Many of the Unqork snippets also have Panels and other organizational configurations. These configurations will help guide you when using a snippet. For instance, here's how the **API** Module looks in the Module Builder: [![A static image displaying an API Module using Panel components.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Structure_apiModule_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Structure%20apiModule.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D) Unless your module only has a few components, always include structural components. Using these components improve not only your experience but also your end-user's experience. ## Adding Logic to Your Module One benefit of structural components is that they let you apply logic to a group of settings. One example is setting a **P****anel** component to hidden. This hides all the components in the Panel. You can then configure the whole Panel to show when the end-user performs a certain action. There are also best practices when configuring logic and ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-11 151123.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D) [Plug-In](/v1/docs/plug-in-component) components. Logic components include the **[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calculator_teal_component(7).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D)](//docs/calculator-component)** [**Calculator**](/v1/docs/calculator-component), [**Decisions**](/v1/docs/decisions-component), and [**Data Workflow**](/v1/docs/data-workflow-component) components. Each component requires inputs, outputs, and the specific logic you'll need for your module. Some best practices are: - Placing input components above their logic component in the Module Builder. This could be an [**Initializer**](/v1/docs/initializer-component) that triggers a ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-11 151123.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D) [Plug-In](/v1/docs/plug-in-component) component. - Placing output components below their logic component in the Module Builder. This could be a [**Hidden**](/v1/docs/hidden-component) component that contains a [**Data Workflow**](/v1/docs/data-workflow-component) output. - Group all components involved with a Data Workflow around that Data Workflow component. Here's a great example of the organization of logic components for a complex bulk processingmodule: [![A static image displaying a complex module's layout.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Structure_ComplexExample_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Structure%20ComplexExample.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D) ## Improved Creator Experience Adding structure to your modules improves your Creator experience by: - Making it easier for others to read and understand your module. - Making it easier to find specific components in your module. - Improving the ability to troubleshoot and make changes to your module. The image below shows a variety of components for an Application Management application. Take note of the column organization and grouping of components that share function. [![A static image of a module using field groups and columns to sort logic components by likeness.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Structure_ExampleEnvApp_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Structure%20ExampleEnvApp.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D) ## Improved End-User Experience Formalizing structure improves your end-user's experience by: - Giving your end-user guidance on completing the application process. - Organizing content in a readable way. - Improving your end-user's efficiency in filling out fields. Let's look at the previous Application Management module in Express View. The previous image shows how well organized the module is on the back-end. But, it should be just as organized on the front-end. In the image below, end-users immediately know it's an Application Management tool. They can also easily follow the fields, drop-downs, and functions of the buttons. [![A static image displaying the Application Management Module in Express Views.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Structure_ExampleEnvApp2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Structure%20ExampleEnvApp2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D) ## Overview **Structuring Components** in a module helps maintain simplicity for creators, and presents a unified experience for end-users. Creators structure components by uniformly organizing a [module's](/v1/docs/what-is-a-module) layout. This includes placing [input and output components](/v1/docs/logic-components-input-output-types) above and below your logic components and using [Display & Layout components](/v1/docs/display-layout) to group your components by relationship. ## Display and Layout Components Unqork uses grouping and layout components that add structure to your modules. Examples of organization components include **[![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(18).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D)](//docs/columns-component)** [**Columns**](/v1/docs/columns-component), [**Panel**](/v1/docs/panel-component), [**Table**](/v1/docs/table-component), **[![Navigation Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/navigation_teal_component(2).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D)](//docs/navigation-component) Navigation**, and [**Field Group**](/v1/docs/field-group-component). These components help you nest other components. You'll find these components in the [Display & Layout component](/v1/docs/display-layout) group of the [Module Builder](/v1/docs/introduction-to-the-module-builder). The image below shows how the **P****anel** and **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(18).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D) Columns** components organize other components into easy-to-read groups. [![A static image displaying a module using panels and columns to organize components.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Intro_to_Structure_01_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Intro%20to%20Structure%2001.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D) Many of the Unqork snippets also have Panels and other organizational configurations. These configurations will help guide you when using a snippet. For instance, here's how the **API** Module looks in the Module Builder: [![A static image displaying an API module using panels to organize components.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/API_Spec_Snippet_01_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/API%20Spec%20Snippet%2001.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D) Unless your module only has a few components, always include structural components. Using these components improve not only your experience but also your end-user's experience. ## Adding Logic to Your Module One benefit of structural components is that they let you apply logic to a group of settings. One example is setting a **P****anel** component to hidden. This hides all the components in the Panel. You can then configure the whole Panel to show when the end-user performs a certain action. There are also best practices when configuring logic and ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-11 151123.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D) [Plug-In](/v1/docs/plug-in-component) components. Logic components include the **[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calculator_teal_component(7).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D)](//docs/calculator-component)** [**Calculator**](/v1/docs/calculator-component), [**Decisions**](/v1/docs/decisions-component), and [**Data Workflow**](/v1/docs/data-workflow-component) components. Each component requires inputs, outputs, and the specific logic you'll need for your module. Some best practices are: - Placing input components above their logic component in the Module Builder. This could be an [**Initializer**](/v1/docs/initializer-component) that triggers a ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-11 151123.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D) [Plug-In](/v1/docs/plug-in-component) component. - Placing output components below their logic component in the Module Builder. This could be a [**Hidden**](/v1/docs/hidden-component) component that contains a [**Data Workflow**](/v1/docs/data-workflow-component) output. - Group all components involved with a Data Workflow around that Data Workflow component. Here's a great example of the organization of logic components for a complex filtering module: [![A static image displaying a complex module using panels and columns to organize components.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/API_Queries_02_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/API%20Queries%2002.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D) ## Improved Creator Experience Adding structure to your modules improves your creator experience by: - Making it easier for others to read and understand your module. - Making it easier to find specific components in your module. - Improving the ability to troubleshoot and make changes to your module. The image below shows a variety of components for a vehicle registration application. Take note of the column organization and grouping of components that share function. [![A static image displaying a Car Insurance module using panels and columns to organize components.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dashboards_Complex_Filter_10_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dashboards%20Complex%20Filter%2010.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D) ## Improved End-User Experience Formalizing structure improves your end-user's experience by: - Giving your end-user guidance on completing the application process. - Organizing content in a readable way. - Improving your end-user's efficiency in filling out fields. Let's look at the previous vehicle registration module in Express View. The previous image shows how well organized the module is on the back-end. But, it should be just as organized on the front-end. In the image below, end-users immediately know it's a filtering dashboard. They can also easily follow the fields, drop-downs, and functions of the buttons. [![A static image displaying a module in Express View, columns and panels invisibly organize the fields for the end-user.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dashboards_Complex_Filter_11_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dashboards%20Complex%20Filter%2011.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A43Z&se=2026-11-07T18%3A57%3A43Z&sr=c&sp=r&sig=M0%2FzFGDZ%2FaRi933THJ6dtwu9op%2FnixPC55BFDaFEPxw%3D) ## Resources - [Introduction to Applications](/v1/docs/introduction-to-unqork-applications). - [What Is a Module?](/v1/docs/what-is-a-module). - [Introduction to the Module Builder](/v1/docs/introduction-to-the-module-builder). - [Troubleshooting Common Issues in a Module.](/v1/docs/common-performance-issues) 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. Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. 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. Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. 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.