How to: Create and Edit a Module

 

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.

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.

To learn more about module types, view our Module Settings article.

A static image displaying the creation of a front-end module.

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:

What You Need

To create this module, you need:

Normally, you also have a Button or Navigation 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  Text Field component onto the canvas.
2. In the Property ID  field, enter firstName.

To learn about best practices for Property IDs, view our Best Practices: Property IDs article.

3. In the Label Text field, enter First Name.
4. Click Save Component.
5. Drag and drop a second  Text Field component onto the canvas, placing it below the firstName 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 iconAddress Search component onto your canvas, placing it below the  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.

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

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.

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

To learn more about accessing Submission Data with the Angular command, view our 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:
Copy 
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   {data: {...}.
4. Expand the   data section to display your submission data object.

Next time you open the DevTools Console, you can press the up arrow key on your keyboard to repopulate the most recent command.

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.

You can see the data you entered on the front-end. Use this data for troubleshooting and mapping purposes.

Resources