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 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. for their first name, last name, and address. Then, you'll preview your module in Express View Express View is how your end-user views you 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. 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 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. 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 A modal is a window that appears on top of the content you are currently viewing. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module.  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 A Property ID is the unique field ID used by Unqork to track and link components in your module.  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 A Property ID is the unique field ID used by Unqork to track and link components in your module.  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 Express View is how your end-user views you 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..

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 Express View is how your end-user views you 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., you're ready to add data. Complete your module's fields as if you're an end-user. Then, enter the Angular Includes the Short Answer component, Long Answer component, Select Boxes, Radio component, Dropdown, Number component and Single Checkbox. command in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.. 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 Angular command The Angular command, or data command, is a tool that displays submission data in a browser's developer console. In Express View, enter the following command in the devtool console: angular.element('.unqorkio-form').scope().submission in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. tab:

1. At the prompt, enter the following Angular command: angular.element('.unqorkio-form').scope().submission
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 Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections. object.

Next time you open the DevTools Console, you can press the up arrow key on your keyboard to repopulate the Angular Command.

The Angular command only displays the submission data entered 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

 

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 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. 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 tile.
2. Click an application tile's name, or click View App.
3. Click + Create New. The Create Module modal A modal is a window that appears on top of the content you are currently viewing. displays.

4. 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.
5. (Optional) In the Module Description field, enter a description of the module's purpose. For example, This is a training module.
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 Tags field, enter or select additional tags.
8. (Optional) From the Data Models drop-down, select a Data Model(s) to associate with your module.
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 A Property ID is the unique field ID used by Unqork to track and link components in your module.  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 & Close.
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 A Property ID is the unique field ID used by Unqork to track and link components in your module.  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 Address Search component onto your canvas, placing it below the  Text Field components.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module.  field, enter address.
3. From the component's configuration menu, click Data Panel icon Data.
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 & 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 Express View is how your end-user views you 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..

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 Express View is how your end-user views you 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., you're ready to add data. Complete your module's fields as if you're an end-user. Then, enter the Angular Includes the Short Answer component, Long Answer component, Select Boxes, Radio component, Dropdown, Number component and Single Checkbox. command in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.. 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 Angular command The Angular command, or data command, is a tool that displays submission data in a browser's developer console. In Express View, enter the following command in the devtool console: angular.element('.unqorkio-form').scope().submission in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. tab:

1. At the prompt, enter the following Angular command: angular.element('.unqorkio-form').scope().submission
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 Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections. object.

Next time you open the DevTools Console, you can press the up arrow key on your keyboard to repopulate the Angular Command.

The Angular command only displays the submission data entered 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