--- title: "How to: Create and Edit a Module" slug: "how-to-create-and-edit-a-module" updated: 2025-09-26T12:46:05Z published: 2025-09-26T12:46:05Z canonical: "docs.unqork.io/how-to-create-and-edit-a-module" --- > ## 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. # How to: Create and Edit a Module UDesignerClassic Designer ## Overview To create an application, start by **creating and editing a** **module**. In this how-to guide, you'll create a simple form that asks end-users for their first name, last name, and address. Then, you'll preview your module in Express View to understand how end-users see the module. ## Creating a New Module First, you'll create a new module. Later, you'll add components to the module and learn how to view it from your end-user's perspective. ### What You Need To create and build a new module, you need access to an Unqork environment, a workspace, and an existing application. ### Create a Module To create a module: 1. From the **Workspaces** view, navigate to a workspace you own and click View Workspace. 2. Navigate to an existing application and click View Application. 3. Click **+ Create New**. A menu drop-down displays below the button. 4. Click **Module**. The Create Module modal displays. [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Create_Module_UDesigner.webm?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) 5. In the **Module** **Name*** field, enter a unique module name. The **Module** **Path*** field populates with a URL-friendly version of the name you enter. 6. From the **Module** **Type** drop-down, select **FE Front-End**. > [!TIP] > To learn more about module types, view our [Module Settings](/v1/docs/module-settings) article. [![A static image displaying the creation of a front-end module.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Create_Module_Modal_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Create%20Module%20Modal.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) 7. (Optional) In the **Module** **Description** field, enter a description of the module's purpose. For example, `This is a training module`. 8. (Optional) In the **Tags** field, enter or select additional tags. 9. Click **Create**. ## Editing a Module Now that a new module has been created, it's time to configure components in it. This section explores the following: - Adding basic input components to your module. - Previewing your module in Express View. - Running the Angular command to view your module's submission data. > [!NOTE] > Normally, you also have a [Button](/v1/docs/button-component) or [Navigation](/v1/docs/navigation-component) component in your module. For this example, this simple module only includes three components. #### Configure the Text Field Components Add two Text Field components to collect your end-user's first and last name. To configure the Text Field components: 1. In the Module Builder, drag and drop a **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_field_teal_component.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) Text Field** component onto the canvas. 2. In the Property ID field, enter `firstName`. > [!TIP] > To learn about best practices for Property IDs, view our [Best Practices: Property IDs](/v1/docs/best-practices-property-ids) article. 3. In the **Label Text** field, enter `First Name`. 4. Click **Save Component**. 5. Drag and drop a second **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_field_teal_component.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) Text Field** component onto the canvas, placing it below the **firstName ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_field_teal_component.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) Text Field** component. 6. In the Property ID field, enter `lastName`. 7. In the **Label Text** field, enter `Last Name`. 8. Click **Save Component**. #### Configure the Address Search Component Now, add an Address Search component to collect your end-user's physical address. To configure the Address Search component: 1. Drag and drop an **![Address Search icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/address_teal_component(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)** **Address Search** component onto your canvas, placing it below the **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_field_teal_component.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) Text Field** components. 2. In the Property ID field, enter `address`. 3. Navigate to the component's **Data** settings. 4. From the **Select API** drop-down, select **Test Google Places API**. > [!TIP] > Test Google Places API is a preconfigured address service for the Training environment. To learn how to implement address service into the Address Search component, visit our [Enabling Address Search Using Address Services](/v1/docs/enabling-address-search-using-address-services) article. [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Create_Module_AddressSearchU.webm?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) 5. Click **Save Component**. 6. **Save** your module. ### Preview your Module in Express View You officially have a module. Now, it's time to preview your work in Express View. To preview your module in Express View: 1. Open your module in the Module Builder. 2. Click **Preview**. The Express View of your module opens in a new tab. > [!NOTE] > You might have to log in again to view your module in Express View. You can now navigate the front-end of your module. ### Check Your Module Details in the Console Now that you have built a module from scratch and previewed it in Express View, you're ready to add data. Complete your module's fields as if you're an end-user. Then, enter the Angular command in the DevTools Console. This command displays the data temporarily stored in the browser and only works when viewing your module in Express View. Enter information in the fields to test your module. Then, open the DevTools Console tab and enter the Angular command. > [!TIP] > To learn more about accessing Submission Data with the Angular command, view our [Access Submission Data Using the DevTools Console](/v1/docs/access-submission-data-using-the-devtools-console) article. To run the Unqork Angular command in the DevTools Console tab: 1. At the prompt, enter the following Unqork Angular command ```javascript angular.element('.unqorkio-form').scope().submission                                               ``` 2. Press **Enter** **(Return)**. The submission object displays in the Console. 3. Click the solid drop-down arrow to the left of the response in your Console panel. The response starts with ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/grey_dropdown_arrow_closed(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) **{data: {...}**. 4. Expand the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/grey_dropdown_arrow_closed(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) **data** section to display your submission data object. > [!TIP] > Next time you open the DevTools Console, you can press the up arrow key on your keyboard to repopulate the most recent command. > [!NOTE] > The Unqork Angular command only displays the submission data stored in a component through automated or end-user input before the command runs. [![A static image displaying a module in Express view. The browser's DevTools are open and the angular command is used to display the data captured by the module.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Module-IntroAngular_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Module-IntroAngular.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) You can see the data you entered on the front-end. Use this data for troubleshooting and mapping purposes. ## Overview To create an application, you'll start by **creating and editing a** **module**. In this how-to guide, you'll create a simple form that asks end-users for their first name, last name, and address. ## Creating a New Module First, you'll create a new module. Later, you'll add components to the module and learn how to view it from your end-user's perspective. ### What You Need To create and build a new module, you need access to an Unqork environment, a workspace, and an existing application. ### Create a Module To create a module: 1. From the **Workspaces** view, select a [workspace](/v1/docs/introduction-to-workspaces) tile. 2. Click an application tile's name, or click **View App**. 3. Click **+ Create New**. The Create Module modal displays. [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Create_Module.webm?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) In the **Module** **Name*** field, enter a unique module name. The **Module** **Path*** field populates with a URL-friendly version of the name you enter. 4. (Optional) In the **Module** **Description** field, enter a description of the module's purpose. For example, `This is a training module`. 5. From the **Module** **Type** drop-down, select **FE** **Front-End**. > [!TIP] > To learn more about module types, view our [Module Settings](/v1/docs/module-settings) article. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Create_Module_FE_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) 6. (Optional) In the **Tags** field, enter or select additional tags. 7. (Optional) From the Data Models drop-down, select a Data Model(s) to associate with your module. 8. Click **Create**. ## Editing a Module Now that a new module has been created, it's time to configure components in it. This section explores the following: - Adding basic input components to your module. - Previewing your module in Express View. - Running the Angular command to view your module's submission data. ### What You Need To create this module, you need: - 2 [Text Field](/v1/docs/text-field-component) components - 1 [Address Search](/v1/docs/address-search-component) component > [!NOTE] > Normally, you also have a [Button](/v1/docs/button-component) or [Navigation](/v1/docs/navigation-component) component in your module. For this example, this simple module only includes three components. #### Configure the Text Field Components Add two Text Field components to collect your end-user's first and last name. To configure the Text Field components: 1. In the Module Builder, drag and drop a **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_field_teal_component.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) Text Field** component onto the canvas. 2. In the Property ID field, enter `firstName`. > [!TIP] > To learn about best practices for Property IDs, view our [Best Practices: Property IDs](/v1/docs/best-practices-property-ids) article. 3. In the **Label Text** field, enter `First Name`. 4. Click **Save & Close**. 5. Drag and drop a second **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_field_teal_component.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) Text Field** component onto the canvas, placing it below the **firstName** **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_field_teal_component.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) Text Field** component. 6. In the Property ID field, enter `lastName`. 7. In the **Label Text** field, enter `Last Name`. 8. Click **Save & Close**. #### Configure the Address Search Component Now, add an Address Search component to collect your end-user's physical address. To configure the Address Search component: 1. Drag and drop an **![Address Search icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/address_teal_component(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)** **Address Search** component onto your canvas, placing it below the **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_field_teal_component.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) Text Field** components. 2. In the Property ID field, enter `address`. 3. From the component's configuration menu, click ![Data Panel icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_teal_icon.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) Data. 4. From the **Select API** drop-down, select **Test Google Places API**. > [!TIP] > Test Google Places API is a preconfigured address service for the Training environment. To learn how to implement address service into the Address Search component, visit our [Enabling Address Search Using Address Services](/v1/docs/enabling-address-search-using-address-services) article. [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Create_Module_AddressSearch.webm?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) 5. Click **Save & Close**. 6. **Save** your module. ### Preview your Module in Express View You officially have a module. Now, it's time to preview your work in Express View. To preview your module in Express View: 1. Open your module in the Module Builder. 2. Click Preview. The Express View of your module opens in a new tab. > [!NOTE] > You might have to log in again to view your module in Express View. You can now navigate the front-end of your module. ### Check Your Module Details in the Console Now that you have built a module from scratch and previewed it in Express View, you're ready to add data. Complete your module's fields as if you're an end-user. Then, enter the Angular command in the DevTools Console. This command displays the data temporarily stored in the browser and only works when viewing your module in Express View. Enter information in the fields to test your module. Then, open the DevTools Console tab and enter the Angular command. > [!TIP] > To learn more about accessing Submission Data with the Angular command, view our [Access Submission Data Using the DevTools Console](/v1/docs/access-submission-data-using-the-devtools-console) article. To run the Unqork Angular command in the DevTools Console tab: 1. At the prompt, enter the following Unqork Angular command: ```javascript angular.element('.unqorkio-form').scope().submission ``` 2. Press **Enter** **(Return)**. The submission object displays in the Console. 3. Click the solid drop-down arrow to the left of the response in your Console panel. The response starts with ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/grey_dropdown_arrow_closed(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) **{data: {...}**. 4. Expand the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/grey_dropdown_arrow_closed(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) **data** section to display your submission data object. > [!TIP] > Next time you open the DevTools Console, you can press the up arrow key on your keyboard to repopulate the most recent command. > [!NOTE] > The Unqork Angular command only displays the submission data stored in a component through automated or end-user input before the command runs. [![A static image displaying a module in Express view. The browser's DevTools are open and the angular command is used to display the data captured by the module.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Module-IntroAngular_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Module-IntroAngular.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) You can see the data you entered on the front-end. Use this data for troubleshooting and mapping purposes ## Resources - [Copy and Paste Module definitions](/v1/docs/how-to-copy-and-paste-module-definitions). - [Share, Duplicate, Move, or Delete a Module](/v1/docs/working-with-module-type-apps). - [Best Practices for Configuring a Module](/v1/docs/best-practices-component-configuration). - [How to Structure Modules](/v1/docs/introduction-to-structuring-modules). - [Troubleshooting Common Issues in a Module](/v1/docs/common-performance-issues). - [Discover More About Modules in the Community Hub](https://community.unqork.com/search?q=Modules). 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. 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 modal is a window that appears on top of the content you are currently viewing. AngularJS is a JavaScript framework added to an HTML page with a